Migrate to mwc-menu to support HA > 2022.3.X

src/components/dropdown.js

@@ -1,51 +1,54 @@
 import { LitElement, html, css } from 'lit-element';
 
 import { ICON } from '../const';
-
 import sharedStyle from '../sharedStyle';
 import './button';
 
 class MiniMediaPlayerDropdown extends LitElement {
+  constructor() {
+    super();
+    this.id = Math.random()
+      .toString(36)
+      .substr(2, 9);
+  }
+
   static get properties() {
     return {
       items: [],
       label: String,
       selected: String,
+      id: String,
+      isOpen: Boolean,
     };
   }
 
-  get selectedId() {
+  get selectedIndex() {
     return this.items.map(item => item.id).indexOf(this.selected);
   }
 
-  onChange(e) {
-    const id = e.target.selected;
-    if (id !== this.selectedId && this.items[id]) {
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: this.items[id],
-      }));
-      e.target.selected = -1;
-    }
+  firstUpdated() {
+    const menu = this.shadowRoot.querySelector(`#${this.id}-menu`);
+    const button = this.shadowRoot.querySelector(`#${this.id}-button`);
+    menu.anchor = button;
   }
 
   render() {
     return html`
-      <paper-menu-button
+      <div
         class='mmp-dropdown'
-        noink no-animations
-        .horizontalAlign=${'right'}
-        .verticalAlign=${'top'}
-        .verticalOffset=${44}
-        @click=${e => e.stopPropagation()}>
+        @click=${e => e.stopPropagation()}
+        ?open=${this.isOpen}>
         ${this.icon ? html`
-          <ha-icon-button
+          <mmp-icon-button
+            id=${`${this.id}-button`}
             class='mmp-dropdown__button icon'
-            slot='dropdown-trigger'
-            .icon=${ICON.DROPDOWN}>
+            .icon=${ICON.DROPDOWN}
+            @click=${this.toggleMenu}>
             <ha-icon .icon=${ICON.DROPDOWN}></ha-icon>
-          </ha-icon-button>
+          </mmp-icon-button>
         ` : html`
-          <mmp-button class='mmp-dropdown__button' slot='dropdown-trigger'>
+          <mmp-button id=${`${this.id}-button`} class='mmp-dropdown__button' 
+            @click=${this.toggleMenu}>
             <div>
               <span class='mmp-dropdown__label ellipsis'>
                 ${this.selected || this.label}
@@ -54,17 +57,37 @@ class MiniMediaPlayerDropdown extends LitElement {
             </div>
           </mmp-button>
         `}
-        <paper-listbox slot="dropdown-content" .selected=${this.selectedId} @iron-select=${this.onChange}>
+        <mwc-menu
+          @closed=${() => this.isOpen = false}
+          @selected=${this.onChange}
+          activatable
+          id=${`${this.id}-menu`}
+          corner="BOTTOM_START">
           ${this.items.map(item => html`
-            <paper-item value=${item.id || item.name}>
+            <mwc-list-item value=${item.id || item.name}>
               ${item.icon ? html`<ha-icon .icon=${item.icon}></ha-icon>` : ''}
               ${item.name ? html`<span class='mmp-dropdown__item__label'>${item.name}</span>` : ''}
-            </paper-item>`)}
-        </paper-listbox>
-      </paper-menu-button>
+            </mwc-list-item>`)}
+        </mwc-menu>
+      </div>
     `;
   }
 
+  onChange(e) {
+    const { index } = e.detail;
+    if (index !== this.selectedIndex && this.items[index]) {
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: this.items[index],
+      }));
+    }
+  }
+
+  toggleMenu() {
+    const menu = this.shadowRoot.querySelector(`#${this.id}-menu`);
+    menu.open = !menu.open;
+    this.isOpen = menu.open;
+  }
+
   static get styles() {
     return [
       sharedStyle,
@@ -88,6 +111,7 @@ class MiniMediaPlayerDropdown extends LitElement {
         .mmp-dropdown {
           padding: 0;
           display: block;
+          position: relative;
         }
         .mmp-dropdown__button {
           display: flex;
@@ -118,18 +142,18 @@ class MiniMediaPlayerDropdown extends LitElement {
           width: calc(var(--mmp-unit) * .6);
           min-width: calc(var(--mmp-unit) * .6);
         }
-        paper-item > *:nth-child(2) {
+        mwc-list-item > *:nth-child(2) {
           margin-left: 4px;
         }
-        paper-menu-button[focused] mmp-button ha-icon {
+        .mmp-dropdown[open] mmp-button ha-icon {
           color: var(--mmp-accent-color);
           transform: rotate(180deg);
         }
-        paper-menu-button[focused] ha-icon-button {
+        .mmp-dropdown[open] mmp-icon-button {
           color: var(--mmp-accent-color);
           transform: rotate(180deg);
         }
-        paper-menu-button[focused] ha-icon-button[focused] {
+        .mmp-dropdown[open] mmp-icon-button[focused] {
           color: var(--mmp-text-color);
           transform: rotate(0deg);
         }