Add user selector with multiple and system option

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

@@ -71,7 +71,8 @@ class HaEntitiesPickerLight extends LitElement {
   @property({ attribute: "picked-entity-label" })
   public pickedEntityLabel?: string;
 
-  @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
+  @property({ attribute: "pick-entity-label" })
+  public pickEntityLabel?: string;
 
   @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
 

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

@@ -0,0 +1,65 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { UserSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../user/ha-user-picker";
+import "../user/ha-users-picker";
+
+@customElement("ha-selector-user")
+export class HaUserSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: UserSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    if (this.selector.user?.multiple) {
+      return html`
+        <ha-users-picker
+          .hass=${this.hass}
+          .value=${this.value}
+          .label=${this.label}
+          .helper=${this.helper}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          .includeSystem=${this.selector.user.include_system}
+        ></ha-users-picker>
+      `;
+    }
+
+    return html`
+      <ha-user-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .label=${this.label}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .includeSystem=${this.selector.user?.include_system}
+      ></ha-user-picker>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-user-picker {
+        width: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-user": HaUserSelector;
+  }
+}

src/components/ha-selector/ha-selector.ts

@@ -50,6 +50,7 @@ const LOAD_ELEMENTS = {
   color_temp: () => import("./ha-selector-color-temp"),
   ui_action: () => import("./ha-selector-ui-action"),
   ui_color: () => import("./ha-selector-ui-color"),
+  user: () => import("./ha-selector-user"),
 };
 
 const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);

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

@@ -1,68 +1,84 @@
-import "@material/mwc-list/mwc-list-item";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
-import { property } from "lit/decorators";
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
+import {
+  fuzzyFilterSort,
+  ScorableTextItem,
+} from "../../common/string/filter/sequence-matching";
 import { fetchUsers, User } from "../../data/user";
-import { HomeAssistant } from "../../types";
+import { HomeAssistant, ValueChangedEvent } from "../../types";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
+import "../ha-list-item";
 import "../ha-select";
 import "./ha-user-badge";
-import "../ha-list-item";
+
+type ScorableUser = ScorableTextItem & User;
 
 class HaUserPicker extends LitElement {
-  public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
 
-  @property() public noUserLabel?: string;
+  @property() public value?: string;
 
-  @property() public value = "";
+  @property() public helper?: string;
 
-  @property() public users?: User[];
+  @property({ attribute: false }) public users?: User[];
 
-  @property({ type: Boolean }) public disabled = false;
+  @property({ type: Boolean }) public disabled?: boolean;
 
-  private _sortedUsers = memoizeOne((users?: User[]) => {
+  @property({ type: Boolean }) public required?: boolean;
-    if (!users) {
+
-      return [];
+  @state() private _opened?: boolean;
+
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+
+  @property({ type: Boolean, attribute: "include-system" })
+  public includeSystem?: boolean;
+
+  private _init = false;
+
+  private _getUserItems = memoizeOne(
+    (users: User[] | undefined): ScorableUser[] => {
+      if (!users) {
+        return [];
+      }
+
+      return users
+        .sort((a, b) =>
+          stringCompare(a.name, b.name, this.hass!.locale.language)
+        )
+        .map((user) => ({
+          ...user,
+          strings: [user.name, ...(user.username ? [user.username] : [])],
+        }));
     }
+  );
 
-    return users
+  private _filteredUsers = memoizeOne(
-      .filter((user) => !user.system_generated)
+    (users: User[], includeSystem?: boolean) =>
-      .sort((a, b) =>
+      users.filter((user) => includeSystem || !user.system_generated)
-        stringCompare(a.name, b.name, this.hass!.locale.language)
+  );
-      );
-  });
 
-  protected render(): TemplateResult {
+  public async open() {
-    return html`
+    await this.updateComplete;
-      <ha-select
+    await this.comboBox?.open();
-        .label=${this.label}
+  }
-        .disabled=${this.disabled}
+
-        .value=${this.value}
+  public async focus() {
-        @selected=${this._userChanged}
+    await this.updateComplete;
-      >
+    await this.comboBox?.focus();
-        ${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`
-            <ha-list-item graphic="avatar" .value=${user.id}>
-              <ha-user-badge
-                .hass=${this.hass}
-                .user=${user}
-                slot="graphic"
-              ></ha-user-badge>
-              ${user.name}
-            </ha-list-item>
-          `
-        )}
-      </ha-select>
-    `;
   }
 
   protected firstUpdated(changedProps) {
@@ -74,25 +90,104 @@ class HaUserPicker extends LitElement {
     }
   }
 
-  private _userChanged(ev) {
+  protected updated(changedProps: PropertyValues) {
-    const newValue = ev.target.value;
+    super.updated(changedProps);
+    if (
+      (!this._init && this.users) ||
+      (this._init && changedProps.has("_opened") && this._opened)
+    ) {
+      this._init = true;
+      const filteredUsers = this._filteredUsers(
+        this.users ?? [],
+        this.includeSystem
+      );
+      const items = this._getUserItems(filteredUsers);
 
-    if (newValue !== this.value) {
+      this.comboBox.items = items;
-      this.value = newValue;
+      this.comboBox.filteredItems = items;
-      setTimeout(() => {
-        fireEvent(this, "value-changed", { value: newValue });
-        fireEvent(this, "change");
-      }, 0);
     }
   }
 
+  private _rowRenderer: ComboBoxLitRenderer<User> = (item) => html`
+    <ha-list-item
+      graphic="avatar"
+      .value=${item.id}
+      .twoline=${!!item.username}
+    >
+      <ha-user-badge
+        .hass=${this.hass}
+        .user=${item}
+        slot="graphic"
+      ></ha-user-badge>
+      ${item.name}
+      <span slot="secondary">${item.username}</span>
+    </ha-list-item>
+  `;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-combo-box
+        .hass=${this.hass}
+        .label=${this.label === undefined && this.hass
+          ? this.hass.localize("ui.components.user-picker.user")
+          : this.label}
+        .value=${this._value}
+        .helper=${this.helper}
+        .renderer=${this._rowRenderer}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        item-id-path="id"
+        item-value-path="id"
+        item-label-path="name"
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._valueChanged}
+        @filter-changed=${this._filterChanged}
+      >
+      </ha-combo-box>
+    `;
+  }
+
+  private _filterChanged(ev: CustomEvent): void {
+    const target = ev.target as HaComboBox;
+    const filterString = ev.detail.value.toLowerCase();
+    target.filteredItems = filterString.length
+      ? fuzzyFilterSort<ScorableUser>(filterString, target.items || [])
+      : target.items;
+  }
+
+  private _valueChanged(ev: ValueChangedEvent<string>) {
+    ev.stopPropagation();
+    let newValue = ev.detail.value;
+
+    if (newValue === "no_users") {
+      newValue = "";
+    }
+
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
+  }
+
   static get styles(): CSSResultGroup {
     return css`
-      :host {
+      ha-select {
-        display: inline-block;
+        width: 100%;
-      }
-      mwc-list {
-        display: block;
       }
     `;
   }

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

@@ -1,5 +1,4 @@
-import { mdiClose } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { guard } from "lit/directives/guard";
 import memoizeOne from "memoize-one";
@@ -15,6 +14,10 @@ class HaUsersPickerLight extends LitElement {
 
   @property() public value?: string[];
 
+  @property({ type: Boolean }) public disabled?: boolean;
+
+  @property({ type: Boolean }) public required?: boolean;
+
   @property({ attribute: "picked-user-label" })
   public pickedUserLabel?: string;
 
@@ -24,6 +27,9 @@ class HaUsersPickerLight extends LitElement {
   @property({ attribute: false })
   public users?: User[];
 
+  @property({ type: Boolean, attribute: "include-system" })
+  public includeSystem?: boolean;
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (this.users === undefined) {
@@ -38,69 +44,80 @@ class HaUsersPickerLight extends LitElement {
       return nothing;
     }
 
-    const notSelectedUsers = this._notSelectedUsers(this.users, this.value);
+    const filteredUsers = this._filteredUsers(this.users, this.includeSystem);
+    const selectedUsers = this._selectedUsers(filteredUsers, this.value);
+    const notSelectedUsers = this._notSelectedUsers(filteredUsers, this.value);
+
     return html`
-      ${guard(
+      ${guard([notSelectedUsers], () =>
-        [notSelectedUsers],
+        selectedUsers.map(
-        () =>
+          (user, idx) => html`
-          this.value?.map(
+            <div>
-            (user_id, idx) => html`
+              <ha-user-picker
-              <div>
+                .label=${this.pickedUserLabel}
-                <ha-user-picker
+                .index=${idx}
-                  .label=${this.pickedUserLabel}
+                .hass=${this.hass}
-                  .noUserLabel=${this.hass!.localize(
+                .value=${user.id}
-                    "ui.components.user-picker.remove_user"
+                .users=${this._notSelectedUsersAndCurrent(
-                  )}
+                  user,
-                  .index=${idx}
+                  filteredUsers,
-                  .hass=${this.hass}
+                  notSelectedUsers
-                  .value=${user_id}
+                )}
-                  .users=${this._notSelectedUsersAndSelected(
+                @value-changed=${this._userChanged}
-                    user_id,
+                .disabled=${this.disabled}
-                    this.users,
+                .includeSystem=${this.includeSystem}
-                    notSelectedUsers
+              ></ha-user-picker>
-                  )}
+            </div>
-                  @value-changed=${this._userChanged}
+          `
-                ></ha-user-picker>
+        )
-                <ha-icon-button
-                  .userId=${user_id}
-                  .label=${this.hass!.localize(
-                    "ui.components.user-picker.remove_user"
-                  )}
-                  .path=${mdiClose}
-                  @click=${this._removeUser}
-                >
-                  ></ha-icon-button
-                >
-              </div>
-            `
-          )
       )}
+      <div>${this._renderPicker(notSelectedUsers)}</div>
+    `;
+  }
+
+  private _renderPicker(users?: User[]) {
+    return html`
       <ha-user-picker
-        .label=${this.pickUserLabel ||
+        .label=${this.pickUserLabel}
-        this.hass!.localize("ui.components.user-picker.add_user")}
         .hass=${this.hass}
-        .users=${notSelectedUsers}
+        .users=${users}
-        .disabled=${!notSelectedUsers?.length}
         @value-changed=${this._addUser}
+        .disabled=${this.disabled || users?.length === 0}
+        .required=${this.required}
+        .includeSystem=${this.includeSystem}
       ></ha-user-picker>
     `;
   }
 
-  private _notSelectedUsers = memoizeOne(
+  private _filteredUsers = memoizeOne(
-    (users?: User[], currentUsers?: string[]) =>
+    (users: User[], includeSystem?: boolean) =>
-      currentUsers
+      users.filter((user) => includeSystem || !user.system_generated)
-        ? users?.filter(
-            (user) => !user.system_generated && !currentUsers.includes(user.id)
-          )
-        : users?.filter((user) => !user.system_generated)
   );
 
-  private _notSelectedUsersAndSelected = (
+  private _selectedUsers = memoizeOne(
-    userId: string,
+    (users: User[], selectedUserIds?: string[]) => {
+      if (!selectedUserIds) {
+        return [];
+      }
+      return users.filter((user) => selectedUserIds.includes(user.id));
+    }
+  );
+
+  private _notSelectedUsers = memoizeOne(
+    (users: User[], selectedUserIds?: string[]) => {
+      if (!selectedUserIds) {
+        return users;
+      }
+      return users.filter((user) => !selectedUserIds.includes(user.id));
+    }
+  );
+
+  private _notSelectedUsersAndCurrent = (
+    currentUser: User,
     users?: User[],
     notSelected?: User[]
   ) => {
-    const selectedUser = users?.find((user) => user.id === userId);
+    const selectedUser = users?.find((user) => user.id === currentUser.id);
     if (selectedUser) {
       return notSelected ? [...notSelected, selectedUser] : [selectedUser];
     }
@@ -123,7 +140,7 @@ class HaUsersPickerLight extends LitElement {
     const index = (event.currentTarget as any).index;
     const newValue = event.detail.value;
     const newUsers = [...this._currentUsers];
-    if (newValue === "") {
+    if (newValue === undefined) {
       newUsers.splice(index, 1);
     } else {
       newUsers.splice(index, 1, newValue);
@@ -146,22 +163,11 @@ class HaUsersPickerLight extends LitElement {
     this._updateUsers([...currentUsers, toAdd]);
   }
 
-  private _removeUser(event) {
+  static override styles = css`
-    const userId = (event.currentTarget as any).userId;
+    div {
-    this._updateUsers(this._currentUsers.filter((user) => user !== userId));
+      margin-top: 8px;
-  }
+    }
-
+  `;
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: block;
-      }
-      div {
-        display: flex;
-        align-items: center;
-      }
-    `;
-  }
 }
 
 declare global {

src/data/selector.ts

@@ -52,7 +52,8 @@ export type Selector =
   | TTSSelector
   | TTSVoiceSelector
   | UiActionSelector
-  | UiColorSelector;
+  | UiColorSelector
+  | UserSelector;
 
 export interface ActionSelector {
   action: {
@@ -392,6 +393,13 @@ export interface UiColorSelector {
   ui_color: {} | null;
 }
 
+export interface UserSelector {
+  user: {
+    multiple?: boolean;
+    include_system?: boolean;
+  } | null;
+}
+
 export const expandAreaTarget = (
   hass: HomeAssistant,
   areaId: string,

src/translations/en.json

@@ -444,9 +444,7 @@
         "none": "None"
       },
       "user-picker": {
-        "no_user": "No user",
+        "user": "User"
-        "add_user": "Add user",
-        "remove_user": "Remove user"
       },
       "blueprint-picker": {
         "select_blueprint": "Select a blueprint"