Migrate entity state picker to generic picker (#28613)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

src/components/entity/ha-entity-state-picker.ts

@@ -1,27 +1,22 @@
-import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { getStates } from "../../common/entity/get_states";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-combo-box";
+import "../ha-generic-picker";
-import type { HaComboBox } from "../ha-combo-box";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
-
-interface StateOption {
-  value: string;
-  label: string;
-}
 
 @customElement("ha-entity-state-picker")
-class HaEntityStatePicker extends LitElement {
+export class HaEntityStatePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public entityId?: string | string[];
 
   @property() public attribute?: string;
 
-  @property({ attribute: false }) public extraOptions?: any[];
+  @property({ attribute: false }) public extraOptions?: PickerComboBoxItem[];
 
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
@@ -42,59 +37,76 @@ class HaEntityStatePicker extends LitElement {
 
   @property() public helper?: string;
 
-  @state() private _opened = false;
+  private _getItems = memoizeOne(
+    (
+      hass: HomeAssistant,
+      entityId: string | string[] | undefined,
+      attribute: string | undefined,
+      hideStates: string[] | undefined,
+      extraOptions: PickerComboBoxItem[] | undefined
+    ): PickerComboBoxItem[] => {
+      const entityIds = entityId ? ensureArray(entityId) : [];
 
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+      const entitiesOptions = entityIds.map<PickerComboBoxItem[]>(
-
+        (entityIdItem) => {
-  protected shouldUpdate(changedProps: PropertyValues) {
+          const stateObj = hass.states[entityIdItem] || {
-    return !(!changedProps.has("_opened") && this._opened);
+            entity_id: entityIdItem,
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (
-      (changedProps.has("_opened") && this._opened) ||
-      changedProps.has("entityId") ||
-      changedProps.has("attribute") ||
-      changedProps.has("extraOptions")
-    ) {
-      const entityIds = this.entityId ? ensureArray(this.entityId) : [];
-
-      const entitiesOptions = entityIds.map<StateOption[]>((entityId) => {
-        const stateObj = this.hass.states[entityId] || {
-          entity_id: entityId,
             attributes: {},
           };
 
-        const states = getStates(this.hass, stateObj, this.attribute).filter(
+          const states = getStates(hass, stateObj, attribute).filter(
-          (s) => !this.hideStates?.includes(s)
+            (s) => !hideStates?.includes(s)
           );
 
-        return states.map((s) => ({
+          return states
-          value: s,
+            .map((s) => {
-          label: this.attribute
+              const primary = attribute
-            ? this.hass.formatEntityAttributeValue(stateObj, this.attribute, s)
+                ? hass.formatEntityAttributeValue(stateObj, attribute, s)
-            : this.hass.formatEntityState(stateObj, s),
+                : hass.formatEntityState(stateObj, s);
-        }));
+              return {
-      });
+                id: s,
+                primary,
+                sorting_label: primary,
+              };
+            })
+            .filter((option) => option.id && option.primary);
+        }
+      );
 
-      const options: StateOption[] = [];
+      const options: PickerComboBoxItem[] = [];
       const optionsSet = new Set<string>();
       for (const entityOptions of entitiesOptions) {
         for (const option of entityOptions) {
-          if (!optionsSet.has(option.value)) {
+          if (!optionsSet.has(option.id)) {
-            optionsSet.add(option.value);
+            optionsSet.add(option.id);
             options.push(option);
           }
         }
       }
 
-      if (this.extraOptions) {
+      if (extraOptions) {
-        options.unshift(...this.extraOptions);
+        // Filter out any extraOptions with empty primary or id fields
+        const validExtraOptions = extraOptions.filter(
+          (option) => option.id && option.primary
+        );
+        options.unshift(...validExtraOptions);
       }
 
-      (this._comboBox as any).filteredItems = options;
+      return options;
-    }
     }
+  );
+
+  private _getFilteredItems = (
+    _searchString?: string,
+    _section?: string
+  ): PickerComboBoxItem[] =>
+    this._getItems(
+      this.hass,
+      this.entityId,
+      this.attribute,
+      this.hideStates,
+      this.extraOptions
+    );
 
   protected render() {
     if (!this.hass) {
@@ -102,48 +114,39 @@ class HaEntityStatePicker extends LitElement {
     }
 
     return html`
-      <ha-combo-box
+      <ha-generic-picker
         .hass=${this.hass}
-        .value=${this._value}
+        .allowCustomValue=${this.allowCustomValue}
+        .disabled=${this.disabled || !this.entityId}
         .autofocus=${this.autofocus}
+        .required=${this.required}
         .label=${this.label ??
         this.hass.localize("ui.components.entity.entity-state-picker.state")}
-        .disabled=${this.disabled || !this.entityId}
-        .required=${this.required}
         .helper=${this.helper}
-        .allowCustomValue=${this.allowCustomValue}
+        .value=${this.value}
-        item-id-path="value"
+        .getItems=${this._getFilteredItems}
-        item-value-path="value"
+        .notFoundLabel=${this.hass.localize("ui.components.combo-box.no_match")}
-        item-label-path="label"
+        .customValueLabel=${this.hass.localize(
-        @opened-changed=${this._openedChanged}
+          "ui.components.entity.entity-state-picker.add_custom_state"
+        )}
         @value-changed=${this._valueChanged}
       >
-      </ha-combo-box>
+      </ha-generic-picker>
     `;
   }
 
-  private get _value() {
-    return this.value || "";
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
   private _valueChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
-    if (newValue !== this._value) {
+    if (newValue !== this.value) {
       this._setValue(newValue);
     }
   }
 
-  private _setValue(value: string) {
+  private _setValue(value: string | undefined) {
     this.value = value;
-    setTimeout(() => {
     fireEvent(this, "value-changed", { value });
     fireEvent(this, "change");
-    }, 0);
   }
 }
 

src/translations/en.json

@@ -680,7 +680,8 @@
           "show_attributes": "Show attributes"
         },
         "entity-state-picker": {
-          "state": "State"
+          "state": "State",
+          "add_custom_state": "Add custom state"
         },
         "entity-state-content-picker": {
           "add": "Add",