Latest paper-dropdown -> mwc-select conversion (#11692)

demo/src/entrypoint.ts

@@ -2,8 +2,3 @@ import "../../src/resources/ha-style";
 import "../../src/resources/roboto";
 import "../../src/resources/safari-14-attachshadow-patch";
 import "./ha-demo";
-
-/* polyfill for paper-dropdown */
-setTimeout(() => {
-  import("web-animations-js/web-animations-next-lite.min");
-}, 1000);

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -110,8 +110,7 @@ class HassioAddonAudio extends LitElement {
       hassioStyle,
       css`
         :host,
-        ha-card,
+        ha-card {
-        paper-dropdown-menu {
           display: block;
         }
         paper-item {

hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts

@@ -156,7 +156,7 @@ class HassioDatadiskDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        paper-dropdown-menu {
+        mwc-select {
           width: 100%;
         }
         ha-circular-progress {

src/entrypoints/authorize.ts

@@ -5,9 +5,3 @@ import "../resources/ha-style";
 import "../resources/roboto";
 import "../resources/safari-14-attachshadow-patch";
 import "../resources/array.flat.polyfill";
-
-/* polyfill for paper-dropdown */
-setTimeout(
-  () => import("web-animations-js/web-animations-next-lite.min"),
-  2000
-);

src/layouts/home-assistant.ts

@@ -78,8 +78,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     super.firstUpdated(changedProps);
     this._initializeHass();
     setTimeout(() => registerServiceWorker(this), 1000);
-    /* polyfill for paper-dropdown */
+
-    import("web-animations-js/web-animations-next-lite.min");
     this.addEventListener("hass-suspend-when-hidden", (ev) => {
       this._updateHass({ suspendWhenHidden: ev.detail.suspend });
       storeState(this.hass!);

src/onboarding/onboarding-integrations.ts

@@ -140,8 +140,6 @@ class OnboardingIntegrations extends LitElement {
     this._scanUSBDevices();
     loadConfigFlowDialog();
     this._loadConfigEntries();
-    /* polyfill for paper-dropdown */
-    import("web-animations-js/web-animations-next-lite.min");
   }
 
   private _createFlow() {

src/panels/config/integrations/integration-panels/zha/types.ts

@@ -1,11 +1,8 @@
+import { Select } from "@material/mwc-select";
 import { Cluster, ZHADevice } from "../../../../../data/zha";
 
-export interface PickerTarget extends EventTarget {
-  selected: number;
-}
-
 export interface ItemSelectedEvent {
-  target?: PickerTarget;
+  target?: Select;
 }
 
 export interface ZHADeviceRemovedEvent {

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -1,9 +1,8 @@
 import "@material/mwc-button";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select";
 import { mdiHelpCircle } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
   CSSResultGroup,
@@ -13,6 +12,7 @@ import {
   TemplateResult,
 } from "lit";
 import { property, state } from "lit/decorators";
+import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
@@ -48,7 +48,7 @@ export class ZHAClusterAttributes extends LitElement {
 
   @state() private _attributes: Attribute[] = [];
 
-  @state() private _selectedAttributeIndex = -1;
+  @state() private _selectedAttributeId?: number;
 
   @state() private _attributeValue?: any = "";
 
@@ -60,7 +60,7 @@ export class ZHAClusterAttributes extends LitElement {
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("selectedCluster")) {
       this._attributes = [];
-      this._selectedAttributeIndex = -1;
+      this._selectedAttributeId = undefined;
       this._attributeValue = "";
       this._fetchAttributesForCluster();
     }
@@ -92,29 +92,25 @@ export class ZHAClusterAttributes extends LitElement {
 
         <ha-card class="content">
           <div class="attribute-picker">
-            <paper-dropdown-menu
+            <mwc-select
-              label=${this.hass!.localize(
+              .label=${this.hass!.localize(
                 "ui.panel.config.zha.cluster_attributes.attributes_of_cluster"
               )}
               class="menu"
+              .value=${String(this._selectedAttributeId)}
+              @selected=${this._selectedAttributeChanged}
+              @closed=${stopPropagation}
+              fixedMenuPosition
+              naturalMenuWidth
             >
-              <paper-listbox
+              ${this._attributes.map(
-                slot="dropdown-content"
+                (entry) => html`
-                .selected=${this._selectedAttributeIndex}
+                  <mwc-list-item .value=${String(entry.id)}>
-                @iron-select=${this._selectedAttributeChanged}
+                    ${entry.name + " (id: " + formatAsPaddedHex(entry.id) + ")"}
-              >
+                  </mwc-list-item>
-                ${this._attributes.map(
+                `
-                  (entry) => html`
+              )}
-                    <paper-item
+            </mwc-select>
-                      >${entry.name +
-                      " (id: " +
-                      formatAsPaddedHex(entry.id) +
-                      ")"}</paper-item
-                    >
-                  `
-                )}
-              </paper-listbox>
-            </paper-dropdown-menu>
           </div>
           ${this.showHelp
             ? html`
@@ -125,7 +121,7 @@ export class ZHAClusterAttributes extends LitElement {
                 </div>
               `
             : ""}
-          ${this._selectedAttributeIndex !== -1
+          ${this._selectedAttributeId !== undefined
             ? this._renderAttributeInteractions()
             : ""}
         </ha-card>
@@ -218,7 +214,7 @@ export class ZHAClusterAttributes extends LitElement {
       endpoint_id: this.selectedCluster!.endpoint_id,
       cluster_id: this.selectedCluster!.id,
       cluster_type: this.selectedCluster!.type,
-      attribute: this._attributes[this._selectedAttributeIndex].id,
+      attribute: this._selectedAttributeId!,
       manufacturer: this._manufacturerCodeOverride
         ? parseInt(this._manufacturerCodeOverride as string, 10)
         : undefined,
@@ -236,7 +232,7 @@ export class ZHAClusterAttributes extends LitElement {
       endpoint_id: this.selectedCluster!.endpoint_id,
       cluster_id: this.selectedCluster!.id,
       cluster_type: this.selectedCluster!.type,
-      attribute: this._attributes[this._selectedAttributeIndex].id,
+      attribute: this._selectedAttributeId!,
       value: this._attributeValue,
       manufacturer: this._manufacturerCodeOverride
         ? parseInt(this._manufacturerCodeOverride as string, 10)
@@ -266,7 +262,7 @@ export class ZHAClusterAttributes extends LitElement {
   }
 
   private _selectedAttributeChanged(event: ItemSelectedEvent): void {
-    this._selectedAttributeIndex = event.target!.selected;
+    this._selectedAttributeId = Number(event.target!.value);
     this._attributeValue = "";
   }
 
@@ -274,6 +270,10 @@ export class ZHAClusterAttributes extends LitElement {
     return [
       haStyle,
       css`
+        mwc-select {
+          margin-top: 16px;
+        }
+
         .menu {
           width: 100%;
         }

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -1,8 +1,7 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select";
 import { mdiHelpCircle } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
   CSSResultGroup,
@@ -12,6 +11,7 @@ import {
   TemplateResult,
 } from "lit";
 import { property, state } from "lit/decorators";
+import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
@@ -26,11 +26,7 @@ import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import "../../../ha-config-section";
 import { formatAsPaddedHex } from "./functions";
-import {
+import { ChangeEvent, IssueCommandServiceData } from "./types";
-  ChangeEvent,
-  IssueCommandServiceData,
-  ItemSelectedEvent,
-} from "./types";
 
 export class ZHAClusterCommands extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -45,7 +41,7 @@ export class ZHAClusterCommands extends LitElement {
 
   @state() private _commands: Command[] = [];
 
-  @state() private _selectedCommandIndex = -1;
+  @state() private _selectedCommandId?: number;
 
   @state() private _manufacturerCodeOverride?: number;
 
@@ -55,7 +51,7 @@ export class ZHAClusterCommands extends LitElement {
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("selectedCluster")) {
       this._commands = [];
-      this._selectedCommandIndex = -1;
+      this._selectedCommandId = undefined;
       this._fetchCommandsForCluster();
     }
     super.update(changedProperties);
@@ -86,29 +82,25 @@ export class ZHAClusterCommands extends LitElement {
 
         <ha-card class="content">
           <div class="command-picker">
-            <paper-dropdown-menu
+            <mwc-select
-              label=${this.hass!.localize(
+              .label=${this.hass!.localize(
                 "ui.panel.config.zha.cluster_commands.commands_of_cluster"
               )}
               class="menu"
+              .value=${String(this._selectedCommandId)}
+              @selected=${this._selectedCommandChanged}
+              @closed=${stopPropagation}
+              fixedMenuPosition
+              naturalMenuWidth
             >
-              <paper-listbox
+              ${this._commands.map(
-                slot="dropdown-content"
+                (entry) => html`
-                .selected=${this._selectedCommandIndex}
+                  <mwc-list-item .value=${String(entry.id)}>
-                @iron-select=${this._selectedCommandChanged}
+                    ${entry.name + " (id: " + formatAsPaddedHex(entry.id) + ")"}
-              >
+                  </mwc-list-item>
-                ${this._commands.map(
+                `
-                  (entry) => html`
+              )}
-                    <paper-item
+            </mwc-select>
-                      >${entry.name +
-                      " (id: " +
-                      formatAsPaddedHex(entry.id) +
-                      ")"}</paper-item
-                    >
-                  `
-                )}
-              </paper-listbox>
-            </paper-dropdown-menu>
           </div>
           ${this._showHelp
             ? html`
@@ -119,7 +111,7 @@ export class ZHAClusterCommands extends LitElement {
                 </div>
               `
             : ""}
-          ${this._selectedCommandIndex !== -1
+          ${this._selectedCommandId !== undefined
             ? html`
                 <div class="input-text">
                   <paper-input
@@ -187,8 +179,10 @@ export class ZHAClusterCommands extends LitElement {
       endpoint_id: this.selectedCluster!.endpoint_id,
       cluster_id: this.selectedCluster!.id,
       cluster_type: this.selectedCluster!.type,
-      command: this._commands[this._selectedCommandIndex].id,
+      command: this._selectedCommandId!,
-      command_type: this._commands[this._selectedCommandIndex].type,
+      command_type: this._commands.find(
+        (command) => command.id === this._selectedCommandId
+      )!.type,
     };
   }
 
@@ -202,8 +196,8 @@ export class ZHAClusterCommands extends LitElement {
     this._showHelp = !this._showHelp;
   }
 
-  private _selectedCommandChanged(event: ItemSelectedEvent): void {
+  private _selectedCommandChanged(event): void {
-    this._selectedCommandIndex = event.target!.selected;
+    this._selectedCommandId = Number(event.target.value);
     this._issueClusterCommandServiceData =
       this._computeIssueClusterCommandServiceData();
   }
@@ -212,6 +206,9 @@ export class ZHAClusterCommands extends LitElement {
     return [
       haStyle,
       css`
+        mwc-select {
+          margin-top: 16px;
+        }
         .menu {
           width: 100%;
         }

src/panels/config/integrations/integration-panels/zha/zha-clusters.ts

@@ -1,7 +1,6 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select";
 import { mdiHelpCircle } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
   CSSResultGroup,
@@ -12,6 +11,7 @@ import {
 } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
@@ -25,7 +25,6 @@ import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import "../../../ha-config-section";
 import { computeClusterKey } from "./functions";
-import { ItemSelectedEvent } from "./types";
 
 declare global {
   // for fire event
@@ -79,24 +78,25 @@ export class ZHAClusters extends LitElement {
 
         <ha-card class="content">
           <div class="node-picker">
-            <paper-dropdown-menu
+            <mwc-select
               .label=${this.hass!.localize(
                 "ui.panel.config.zha.common.clusters"
               )}
               class="menu"
+              .value=${String(this._selectedClusterIndex)}
+              @selected=${this._selectedClusterChanged}
+              @closed=${stopPropagation}
+              fixedMenuPosition
+              naturalMenuWidth
             >
-              <paper-listbox
+              ${this._clusters.map(
-                slot="dropdown-content"
+                (entry, idx) => html`
-                .selected=${this._selectedClusterIndex}
+                  <mwc-list-item .value=${String(idx)}
-                @iron-select=${this._selectedClusterChanged}
+                    >${computeClusterKey(entry)}</mwc-list-item
-              >
+                  >
-                ${this._clusters.map(
+                `
-                  (entry) => html`
+              )}
-                    <paper-item>${computeClusterKey(entry)}</paper-item>
+            </mwc-select>
-                  `
-                )}
-              </paper-listbox>
-            </paper-dropdown-menu>
           </div>
           ${this.showHelp
             ? html`
@@ -122,8 +122,8 @@ export class ZHAClusters extends LitElement {
     }
   }
 
-  private _selectedClusterChanged(event: ItemSelectedEvent): void {
+  private _selectedClusterChanged(event): void {
-    this._selectedClusterIndex = event.target!.selected;
+    this._selectedClusterIndex = Number(event.target!.value);
     fireEvent(this, "zha-cluster-selected", {
       cluster: this._clusters[this._selectedClusterIndex],
     });
@@ -137,6 +137,9 @@ export class ZHAClusters extends LitElement {
     return [
       haStyle,
       css`
+        mwc-select {
+          margin-top: 16px;
+        }
         .menu {
           width: 100%;
         }

src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts

@@ -1,8 +1,7 @@
 import "@material/mwc-button/mwc-button";
 import { mdiHelpCircle } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-item/paper-item";
+import "@material/mwc-select";
-import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
   CSSResultGroup,
@@ -21,6 +20,7 @@ import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import "../../../ha-config-section";
 import { ItemSelectedEvent } from "./types";
+import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 
 @customElement("zha-device-binding-control")
 export class ZHADeviceBindingControl extends LitElement {
@@ -62,23 +62,25 @@ export class ZHADeviceBindingControl extends LitElement {
 
         <ha-card class="content">
           <div class="command-picker">
-            <paper-dropdown-menu label="Bindable Devices" class="menu">
+            <mwc-select
-              <paper-listbox
+              label="Bindable Devices"
-                slot="dropdown-content"
+              class="menu"
-                .selected=${this._bindTargetIndex}
+              .value=${String(this._bindTargetIndex)}
-                @iron-select=${this._bindTargetIndexChanged}
+              @selected=${this._bindTargetIndexChanged}
-              >
+              @closed=${stopPropagation}
-                ${this.bindableDevices.map(
+              fixedMenuPosition
-                  (device) => html`
+              naturalMenuWidth
-                    <paper-item
+            >
-                      >${device.user_given_name
+              ${this.bindableDevices.map(
-                        ? device.user_given_name
+                (device, idx) => html`
-                        : device.name}</paper-item
+                  <mwc-list-item .value=${String(idx)}>
-                    >
+                    ${device.user_given_name
-                  `
+                      ? device.user_given_name
-                )}
+                      : device.name}
-              </paper-listbox>
+                  </mwc-list-item>
-            </paper-dropdown-menu>
+                `
+              )}
+            </mwc-select>
           </div>
           ${this._showHelp
             ? html`
@@ -111,7 +113,7 @@ export class ZHADeviceBindingControl extends LitElement {
   }
 
   private _bindTargetIndexChanged(event: ItemSelectedEvent): void {
-    this._bindTargetIndex = event.target!.selected;
+    this._bindTargetIndex = Number(event.target!.value);
     this._deviceToBind =
       this._bindTargetIndex === -1
         ? undefined

src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts

@@ -1,8 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import { mdiHelpCircle } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
   CSSResultGroup,
@@ -13,6 +10,7 @@ import {
 } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table";
 import "../../../../../components/ha-card";
@@ -95,22 +93,24 @@ export class ZHAGroupBindingControl extends LitElement {
 
         <ha-card class="content">
           <div class="command-picker">
-            <paper-dropdown-menu
+            <mwc-select
               .label=${this.hass!.localize(
                 "ui.panel.config.zha.group_binding.group_picker_label"
               )}
               class="menu"
+              .value=${String(this._bindTargetIndex)}
+              @selected=${this._bindTargetIndexChanged}
+              @closed=${stopPropagation}
+              fixedMenuPosition
+              naturalMenuWidth
             >
-              <paper-listbox
+              ${this.groups.map(
-                slot="dropdown-content"
+                (group, idx) =>
-                .selected=${this._bindTargetIndex}
+                  html`<mwc-list-item .value=${String(idx)}
-                @iron-select=${this._bindTargetIndexChanged}
+                    >${group.name}</mwc-list-item
-              >
+                  > `
-                ${this.groups.map(
+              )}
-                  (group) => html` <paper-item>${group.name}</paper-item> `
+            </mwc-select>
-                )}
-              </paper-listbox>
-            </paper-dropdown-menu>
           </div>
           ${this._showHelp
             ? html`
@@ -179,7 +179,7 @@ export class ZHAGroupBindingControl extends LitElement {
   }
 
   private _bindTargetIndexChanged(event: ItemSelectedEvent): void {
-    this._bindTargetIndex = event.target!.selected;
+    this._bindTargetIndex = Number(event.target!.value);
     this._groupToBind =
       this._bindTargetIndex === -1
         ? undefined

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -440,19 +440,15 @@ export class ZHANetworkVisualizationPage extends LitElement {
 
         search-input {
           flex: 1;
+          display: block;
         }
 
         search-input.header {
-          display: block;
-          position: relative;
-          top: -2px;
           color: var(--secondary-text-color);
         }
 
         ha-device-picker {
           flex: 1;
-          position: relative;
-          top: -4px;
         }
 
         .controls {

src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js

@@ -513,6 +513,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
   ready() {
     super.ready();
+    import("web-animations-js/web-animations-next-lite.min");
     this.addEventListener("hass-service-called", (ev) =>
       this.serviceCalled(ev)
     );