Clean menu implementation (#20294)

* Clean menu

* Clean up imports

* Fix imports

src/components/ha-menu-item.ts

@@ -0,0 +1,37 @@
+import { customElement } from "lit/decorators";
+import "element-internals-polyfill";
+import { CSSResult, css } from "lit";
+import { MdMenuItem } from "@material/web/menu/menu-item";
+
+@customElement("ha-menu-item")
+export class HaMenuItem extends MdMenuItem {
+  static override styles: CSSResult[] = [
+    ...MdMenuItem.styles,
+    css`
+      :host {
+        --ha-icon-display: block;
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-sys-color-on-primary: var(--primary-text-color);
+        --md-sys-color-secondary: var(--secondary-text-color);
+        --md-sys-color-surface: var(--card-background-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--secondary-text-color);
+        --md-sys-color-secondary-container: rgba(
+          var(--rgb-primary-color),
+          0.15
+        );
+        --md-sys-color-on-secondary-container: var(--text-primary-color);
+        --mdc-icon-size: 16px;
+
+        --md-sys-color-on-primary-container: var(--primary-text-color);
+        --md-sys-color-on-secondary-container: var(--primary-text-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-menu-item": HaMenuItem;
+  }
+}

src/components/ha-menu.ts

@@ -0,0 +1,22 @@
+import { customElement } from "lit/decorators";
+import "element-internals-polyfill";
+import { CSSResult, css } from "lit";
+import { MdMenu } from "@material/web/menu/menu";
+
+@customElement("ha-menu")
+export class HaMenu extends MdMenu {
+  static override styles: CSSResult[] = [
+    ...MdMenu.styles,
+    css`
+      :host {
+        --md-sys-color-surface-container: var(--card-background-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-menu": HaMenu;
+  }
+}

src/layouts/hass-tabs-subpage-data-table.ts

@@ -1,9 +1,6 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/mwc-button/mwc-button";
-import "@material/web/menu/menu";
-import type { MdMenu } from "@material/web/menu/menu";
-import "@material/web/menu/menu-item";
 import {
   mdiArrowDown,
   mdiArrowUp,
@@ -36,9 +33,12 @@ import type {
 } from "../components/data-table/ha-data-table";
 import "../components/ha-dialog";
 import "../components/search-input-outlined";
+import "../components/ha-menu";
+import "../components/ha-menu-item";
 import type { HomeAssistant, Route } from "../types";
 import "./hass-tabs-subpage";
 import type { PageNavigation } from "./hass-tabs-subpage";
+import type { HaMenu } from "../components/ha-menu";
 
 declare global {
   // for fire event
@@ -177,9 +177,9 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @query("ha-data-table", true) private _dataTable!: HaDataTable;
 
-  @query("#group-by-menu") private _groupByMenu!: MdMenu;
+  @query("#group-by-menu") private _groupByMenu!: HaMenu;
 
-  @query("#sort-by-menu") private _sortByMenu!: MdMenu;
+  @query("#sort-by-menu") private _sortByMenu!: HaMenu;
 
   private _showPaneController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width > 750,
@@ -425,37 +425,37 @@ export class HaTabsSubpageDataTable extends LitElement {
               </ha-data-table>`}
         <div slot="fab"><slot name="fab"></slot></div>
       </hass-tabs-subpage>
-      <md-menu anchor="group-by-anchor" id="group-by-menu" positioning="fixed">
+      <ha-menu anchor="group-by-anchor" id="group-by-menu" positioning="fixed">
         ${Object.entries(this.columns).map(([id, column]) =>
           column.groupable
             ? html`
-                <md-menu-item
+                <ha-menu-item
                   .value=${id}
                   @click=${this._handleGroupBy}
                   .selected=${id === this._groupColumn}
                   class=${classMap({ selected: id === this._groupColumn })}
                 >
                   ${column.title || column.label}
-                </md-menu-item>
+                </ha-menu-item>
               `
             : nothing
         )}
         <li divider role="separator"></li>
-        <md-menu-item
+        <ha-menu-item
           .value=${undefined}
           @click=${this._handleGroupBy}
           .selected=${this._groupColumn === undefined}
           class=${classMap({ selected: this._groupColumn === undefined })}
           >${localize(
             "ui.components.subpage-data-table.dont_group_by"
-          )}</md-menu-item
+          )}</ha-menu-item
         >
-      </md-menu>
+      </ha-menu>
-      <md-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
+      <ha-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
         ${Object.entries(this.columns).map(([id, column]) =>
           column.sortable
             ? html`
-                <md-menu-item
+                <ha-menu-item
                   .value=${id}
                   @click=${this._handleSortBy}
                   .selected=${id === this._sortColumn}
@@ -472,11 +472,11 @@ export class HaTabsSubpageDataTable extends LitElement {
                       `
                     : nothing}
                   ${column.title || column.label}
-                </md-menu-item>
+                </ha-menu-item>
               `
             : nothing
         )}
-      </md-menu>
+      </ha-menu>
     `;
   }
 
@@ -732,21 +732,6 @@ export class HaTabsSubpageDataTable extends LitElement {
         display: flex;
         flex-direction: column;
       }
-      /* TODO: Migrate to ha-menu and ha-menu-item */
-      md-menu {
-        --md-menu-container-color: var(--card-background-color);
-      }
-      md-menu-item {
-        --md-menu-item-label-text-color: var(--primary-text-color);
-        --mdc-icon-size: 16px;
-        --md-menu-item-selected-container-color: rgba(
-          var(--rgb-primary-color),
-          0.15
-        );
-      }
-      md-menu-item.selected {
-        --md-menu-item-label-text-color: var(--primary-color);
-      }
       #sort-by-anchor,
       #group-by-anchor {
         --md-assist-chip-trailing-space: 8px;