Migrate a bunch of paper-dropdowns

src/components/data-table/ha-data-table.ts

@@ -945,6 +945,7 @@ export class HaDataTable extends LitElement {
         }
         .scroller {
           height: calc(100% - 57px);
+          overflow: overlay !important;
         }
 
         .mdc-data-table__table.auto-height .scroller {

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;
-      }
     `;
   }
 }

src/components/ha-combo-box.ts

@@ -209,7 +209,6 @@ export class HaComboBox extends LitElement {
       :host {
         display: block;
         width: 100%;
-        margin-top: 4px;
       }
       vaadin-combo-box-light {
         position: relative;

src/components/user/ha-user-picker.ts

@@ -1,8 +1,3 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -11,6 +6,8 @@ import { stringCompare } from "../../common/string/compare";
 import { fetchUsers, User } from "../../data/user";
 import { HomeAssistant } from "../../types";
 import "./ha-user-badge";
+import "@material/mwc-select/mwc-select";
+import "@material/mwc-list/mwc-list-item";
 
 class HaUserPicker extends LitElement {
   public hass?: HomeAssistant;
@@ -37,34 +34,31 @@ class HaUserPicker extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-dropdown-menu-light
+      <mwc-select
         .label=${this.label}
         .disabled=${this.disabled}
+        .value=${this.value}
+        @selected=${this._userChanged}
       >
-        <paper-listbox
-          slot="dropdown-content"
-          .selected=${this.value}
-          attr-for-selected="data-user-id"
-          @iron-select=${this._userChanged}
-        >
-          <paper-icon-item data-user-id="">
-            ${this.noUserLabel ||
-            this.hass?.localize("ui.components.user-picker.no_user")}
-          </paper-icon-item>
-          ${this._sortedUsers(this.users).map(
-            (user) => html`
-              <paper-icon-item data-user-id=${user.id}>
-                <ha-user-badge
-                  .hass=${this.hass}
-                  .user=${user}
-                  slot="item-icon"
-                ></ha-user-badge>
-                ${user.name}
-              </paper-icon-item>
-            `
-          )}
-        </paper-listbox>
-      </paper-dropdown-menu-light>
+        ${this.users?.length === 0
+          ? html`<mwc-list-item value="">
+              ${this.noUserLabel ||
+              this.hass?.localize("ui.components.user-picker.no_user")}
+            </mwc-list-item>`
+          : ""}
+        ${this._sortedUsers(this.users).map(
+          (user) => html`
+            <mwc-list-item graphic="avatar" .value=${user.id}>
+              <ha-user-badge
+                .hass=${this.hass}
+                .user=${user}
+                slot="graphic"
+              ></ha-user-badge>
+              ${user.name}
+            </mwc-list-item>
+          `
+        )}
+      </mwc-select>
     `;
   }
 
@@ -78,10 +72,10 @@ class HaUserPicker extends LitElement {
   }
 
   private _userChanged(ev) {
-    const newValue = ev.detail.item.dataset.userId;
+    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");
@@ -94,15 +88,9 @@ class HaUserPicker extends LitElement {
       :host {
         display: inline-block;
       }
-      paper-dropdown-menu-light {
+      mwc-list {
         display: block;
       }
-      paper-listbox {
-        min-width: 200px;
-      }
-      paper-icon-item {
-        cursor: pointer;
-      }
     `;
   }
 }

src/components/user/ha-users-picker.ts

@@ -75,7 +75,7 @@ class HaUsersPickerLight extends LitElement {
         )
       )}
       <ha-user-picker
-        .noUserLabel=${this.pickUserLabel ||
+        .label=${this.pickUserLabel ||
         this.hass!.localize("ui.components.user-picker.add_user")}
         .hass=${this.hass}
         .users=${notSelectedUsers}

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -1,7 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -122,13 +119,6 @@ class StepFlowCreateEntry extends LitElement {
         .buttons > *:last-child {
           margin-left: auto;
         }
-        paper-dropdown-menu-light {
-          cursor: pointer;
-        }
-        paper-item {
-          cursor: pointer;
-          white-space: nowrap;
-        }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           .device {
             width: 100%;