Migrate a bunch of paper-dropdowns (#11626)

src/components/ha-blueprint-picker.ts

@@ -1,10 +1,10 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import { stringCompare } from "../common/string/compare";
 import { Blueprint, Blueprints, fetchBlueprints } from "../data/blueprint";
 import { HomeAssistant } from "../types";
@@ -24,7 +24,11 @@ class HaBluePrintPicker extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   public open() {
-    this.shadowRoot!.querySelector("paper-dropdown-menu-light")!.open();
+    const select = this.shadowRoot?.querySelector("mwc-select");
+    if (select) {
+      // @ts-expect-error
+      select.menuOpen = true;
+    }
   }
 
   private _processedBlueprints = memoizeOne((blueprints?: Blueprints) => {
@@ -45,32 +49,29 @@ class HaBluePrintPicker extends LitElement {
       return html``;
     }
     return html`
-      <paper-dropdown-menu-light
+      <mwc-select
         .label=${this.label ||
         this.hass.localize("ui.components.blueprint-picker.label")}
+        fixedMenuPosition
+        naturalMenuWidth
+        .value=${this.value}
         .disabled=${this.disabled}
-        horizontal-align="left"
+        @selected=${this._blueprintChanged}
+        @closed=${stopPropagation}
       >
-        <paper-listbox
-          slot="dropdown-content"
-          .selected=${this.value}
-          attr-for-selected="data-blueprint-path"
-          @iron-select=${this._blueprintChanged}
-        >
-          <paper-item data-blueprint-path="">
-            ${this.hass.localize(
-              "ui.components.blueprint-picker.select_blueprint"
-            )}
-          </paper-item>
-          ${this._processedBlueprints(this.blueprints).map(
-            (blueprint) => html`
-              <paper-item data-blueprint-path=${blueprint.path}>
-                ${blueprint.name}
-              </paper-item>
-            `
+        <mwc-list-item value="">
+          ${this.hass.localize(
+            "ui.components.blueprint-picker.select_blueprint"
           )}
-        </paper-listbox>
-      </paper-dropdown-menu-light>
+        </mwc-list-item>
+        ${this._processedBlueprints(this.blueprints).map(
+          (blueprint) => html`
+            <mwc-list-item .value=${blueprint.path}>
+              ${blueprint.name}
+            </mwc-list-item>
+          `
+        )}
+      </mwc-select>
     `;
   }
 
@@ -84,10 +85,10 @@ class HaBluePrintPicker extends LitElement {
   }
 
   private _blueprintChanged(ev) {
-    const newValue = ev.detail.item.dataset.blueprintPath;
+    const newValue = ev.target.value;
 
     if (newValue !== this.value) {
-      this.value = ev.detail.value;
+      this.value = newValue;
       setTimeout(() => {
         fireEvent(this, "value-changed", { value: newValue });
         fireEvent(this, "change");
@@ -100,15 +101,11 @@ class HaBluePrintPicker extends LitElement {
       :host {
         display: inline-block;
       }
-      paper-dropdown-menu-light {
+      mwc-select {
         width: 100%;
         min-width: 200px;
         display: block;
       }
-      paper-item {
-        cursor: pointer;
-        min-width: 200px;
-      }
     `;
   }
 }