Merge branch 'dev' into allthebackupchanges

.eslintrc.json

@@ -1,132 +0,0 @@
-{
-  "extends": [
-    "airbnb-base",
-    "airbnb-typescript/base",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:wc/recommended",
-    "plugin:lit/all",
-    "plugin:lit-a11y/recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "ecmaFeatures": {
-      "modules": true
-    },
-    "sourceType": "module",
-    "project": "./tsconfig.json"
-  },
-  "settings": {
-    "import/resolver": {
-      "webpack": {
-        "config": "./webpack.config.cjs"
-      }
-    }
-  },
-  "globals": {
-    "__DEV__": false,
-    "__DEMO__": false,
-    "__BUILD__": false,
-    "__VERSION__": false,
-    "__STATIC_PATH__": false,
-    "__SUPERVISOR__": false,
-    "Polymer": true
-  },
-  "env": {
-    "browser": true,
-    "es6": true
-  },
-  "rules": {
-    "class-methods-use-this": "off",
-    "new-cap": "off",
-    "prefer-template": "off",
-    "object-shorthand": "off",
-    "func-names": "off",
-    "no-underscore-dangle": "off",
-    "strict": "off",
-    "no-plusplus": "off",
-    "no-bitwise": "error",
-    "comma-dangle": "off",
-    "vars-on-top": "off",
-    "no-continue": "off",
-    "no-param-reassign": "off",
-    "no-multi-assign": "off",
-    "no-console": "error",
-    "radix": "off",
-    "no-alert": "off",
-    "no-nested-ternary": "off",
-    "prefer-destructuring": "off",
-    "no-restricted-globals": [2, "event"],
-    "prefer-promise-reject-errors": "off",
-    "import/prefer-default-export": "off",
-    "import/no-default-export": "off",
-    "import/no-unresolved": "off",
-    "import/no-cycle": "off",
-    "import/extensions": [
-      "error",
-      "ignorePackages",
-      {
-        "ts": "never",
-        "js": "never"
-      }
-    ],
-    "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
-    "object-curly-newline": "off",
-    "default-case": "off",
-    "wc/no-self-class": "off",
-    "no-shadow": "off",
-    "@typescript-eslint/camelcase": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-shadow": ["error"],
-    "@typescript-eslint/naming-convention": [
-      "off",
-      {
-        "selector": "default",
-        "format": ["camelCase", "snake_case"],
-        "leadingUnderscore": "allow",
-        "trailingUnderscore": "allow"
-      },
-      {
-        "selector": ["variable"],
-        "format": ["camelCase", "snake_case", "UPPER_CASE"],
-        "leadingUnderscore": "allow",
-        "trailingUnderscore": "allow"
-      },
-      {
-        "selector": "typeLike",
-        "format": ["PascalCase"]
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": "off",
-    "unused-imports/no-unused-vars": [
-      "error",
-      {
-        "vars": "all",
-        "varsIgnorePattern": "^_",
-        "args": "after-used",
-        "argsIgnorePattern": "^_",
-        "ignoreRestSiblings": true
-      }
-    ],
-    "unused-imports/no-unused-imports": "error",
-    "lit/attribute-names": "warn",
-    "lit/attribute-value-entities": "off",
-    "lit/no-template-map": "off",
-    "lit/no-native-attributes": "warn",
-    "lit/no-this-assign-in-render": "warn",
-    "lit-a11y/click-events-have-key-events": ["off"],
-    "lit-a11y/no-autofocus": "off",
-    "lit-a11y/alt-text": "warn",
-    "lit-a11y/anchor-is-valid": "warn",
-    "lit-a11y/role-has-required-aria-attrs": "warn",
-    "@typescript-eslint/consistent-type-imports": "error",
-    "@typescript-eslint/no-import-type-side-effects": "error"
-  },
-  "plugins": ["unused-imports"]
-}

build-scripts/.eslintrc.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../.eslintrc.json",
-  "rules": {
-    "no-console": "off",
-    "import/no-extraneous-dependencies": "off",
-    "import/extensions": "off",
-    "import/no-dynamic-require": "off",
-    "global-require": "off",
-    "@typescript-eslint/no-var-requires": "off",
-    "prefer-arrow-callback": "off"
-  }
-}

build-scripts/eslint.config.mjs

@@ -0,0 +1,16 @@
+import rootConfig from "../eslint.config.mjs";
+
+export default [
+  ...rootConfig,
+  {
+    rules: {
+      "no-console": "off",
+      "import/no-extraneous-dependencies": "off",
+      "import/extensions": "off",
+      "import/no-dynamic-require": "off",
+      "global-require": "off",
+      "@typescript-eslint/no-var-requires": "off",
+      "prefer-arrow-callback": "off",
+    },
+  },
+];

build-scripts/webpack.cjs

@@ -188,6 +188,7 @@ const createWebpackConfig = ({
         "lit/directives/cache$": "lit/directives/cache.js",
         "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/directives/live$": "lit/directives/live.js",
+        "lit/directives/keyed$": "lit/directives/keyed.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
         "@lit-labs/virtualizer/layouts/grid":
           "@lit-labs/virtualizer/layouts/grid.js",

eslint.config.mjs

@@ -0,0 +1,163 @@
+import unusedImports from "eslint-plugin-unused-imports";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends(
+    "airbnb-base",
+    "airbnb-typescript/base",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:wc/recommended",
+    "plugin:lit/all",
+    "plugin:lit-a11y/recommended",
+    "prettier"
+  ),
+  {
+    plugins: {
+      "unused-imports": unusedImports,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        __DEV__: false,
+        __DEMO__: false,
+        __BUILD__: false,
+        __VERSION__: false,
+        __STATIC_PATH__: false,
+        __SUPERVISOR__: false,
+        Polymer: true,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 2020,
+      sourceType: "module",
+
+      parserOptions: {
+        ecmaFeatures: {
+          modules: true,
+        },
+
+        project: "./tsconfig.json",
+      },
+    },
+
+    settings: {
+      "import/resolver": {
+        webpack: {
+          config: "./webpack.config.cjs",
+        },
+      },
+    },
+
+    rules: {
+      "class-methods-use-this": "off",
+      "new-cap": "off",
+      "prefer-template": "off",
+      "object-shorthand": "off",
+      "func-names": "off",
+      "no-underscore-dangle": "off",
+      strict: "off",
+      "no-plusplus": "off",
+      "no-bitwise": "error",
+      "comma-dangle": "off",
+      "vars-on-top": "off",
+      "no-continue": "off",
+      "no-param-reassign": "off",
+      "no-multi-assign": "off",
+      "no-console": "error",
+      radix: "off",
+      "no-alert": "off",
+      "no-nested-ternary": "off",
+      "prefer-destructuring": "off",
+      "no-restricted-globals": [2, "event"],
+      "prefer-promise-reject-errors": "off",
+      "import/prefer-default-export": "off",
+      "import/no-default-export": "off",
+      "import/no-unresolved": "off",
+      "import/no-cycle": "off",
+
+      "import/extensions": [
+        "error",
+        "ignorePackages",
+        {
+          ts: "never",
+          js: "never",
+        },
+      ],
+
+      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
+      "object-curly-newline": "off",
+      "default-case": "off",
+      "wc/no-self-class": "off",
+      "no-shadow": "off",
+      "@typescript-eslint/camelcase": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-shadow": ["error"],
+
+      "@typescript-eslint/naming-convention": [
+        "off",
+        {
+          selector: "default",
+          format: ["camelCase", "snake_case"],
+          leadingUnderscore: "allow",
+          trailingUnderscore: "allow",
+        },
+        {
+          selector: ["variable"],
+          format: ["camelCase", "snake_case", "UPPER_CASE"],
+          leadingUnderscore: "allow",
+          trailingUnderscore: "allow",
+        },
+        {
+          selector: "typeLike",
+          format: ["PascalCase"],
+        },
+      ],
+
+      "@typescript-eslint/no-unused-vars": "off",
+
+      "unused-imports/no-unused-vars": [
+        "error",
+        {
+          vars: "all",
+          varsIgnorePattern: "^_",
+          args: "after-used",
+          argsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+
+      "unused-imports/no-unused-imports": "error",
+      "lit/attribute-names": "warn",
+      "lit/attribute-value-entities": "off",
+      "lit/no-template-map": "off",
+      "lit/no-native-attributes": "warn",
+      "lit/no-this-assign-in-render": "warn",
+      "lit-a11y/click-events-have-key-events": ["off"],
+      "lit-a11y/no-autofocus": "off",
+      "lit-a11y/alt-text": "warn",
+      "lit-a11y/anchor-is-valid": "warn",
+      "lit-a11y/role-has-required-aria-attrs": "warn",
+      "@typescript-eslint/consistent-type-imports": "error",
+      "@typescript-eslint/no-import-type-side-effects": "error",
+    },
+  },
+];

gallery/.eslintrc.json

@@ -1,6 +0,0 @@
-{
-  "extends": "../.eslintrc.json",
-  "rules": {
-    "no-console": 0
-  }
-}

gallery/eslint.config.mjs

@@ -0,0 +1,10 @@
+import rootConfig from "../eslint.config.mjs";
+
+export default [
+  ...rootConfig,
+  {
+    rules: {
+      "no-console": "off",
+    },
+  },
+];

gallery/src/pages/automation/editor-trigger.ts

@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import type { TemplateResult } from "lit";
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators";

package.json

@@ -8,8 +8,8 @@
   "version": "1.0.0",
   "scripts": {
     "build": "script/build_frontend",
-    "lint:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-path=.gitignore",
+    "lint:eslint": "eslint --flag unstable_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore",
-    "format:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-path=.gitignore --fix",
+    "format:eslint": "eslint --flag unstable_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
     "lint:prettier": "prettier . --cache --check",
     "format:prettier": "prettier . --cache --write",
     "lint:types": "tsc",
@@ -33,7 +33,7 @@
     "@codemirror/legacy-modes": "6.4.2",
     "@codemirror/search": "6.5.7",
     "@codemirror/state": "6.4.1",
-    "@codemirror/view": "6.34.2",
+    "@codemirror/view": "6.34.3",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.16.4",
     "@formatjs/intl-displaynames": "6.8.4",
@@ -158,7 +158,7 @@
     "@babel/plugin-transform-runtime": "7.25.9",
     "@babel/preset-env": "7.26.0",
     "@babel/preset-typescript": "7.26.0",
-    "@bundle-stats/plugin-webpack-filter": "4.16.0",
+    "@bundle-stats/plugin-webpack-filter": "4.17.0",
     "@koa/cors": "5.0.0",
     "@lokalise/node-api": "12.8.0",
     "@octokit/auth-oauth-device": "7.1.1",
@@ -191,7 +191,7 @@
     "browserslist-useragent-regexp": "4.1.3",
     "chai": "5.1.2",
     "del": "8.0.0",
-    "eslint": "8.57.1",
+    "eslint": "9.15.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
@@ -247,7 +247,8 @@
     "lit": "2.8.0",
     "clean-css": "5.3.3",
     "@lit/reactive-element": "1.6.3",
-    "@fullcalendar/daygrid": "6.1.15"
+    "@fullcalendar/daygrid": "6.1.15",
+    "globals": "15.12.0"
   },
   "packageManager": "yarn@4.5.1"
 }

src/auth/ha-auth-flow.ts

@@ -3,6 +3,7 @@ import "@material/mwc-button";
 import { genClientId } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
+import { keyed } from "lit/directives/keyed";
 import { customElement, property, state } from "lit/decorators";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
@@ -224,16 +225,19 @@ export class HaAuthFlow extends LitElement {
               : this.localize("ui.panel.page-authorize.just_checking")}
           </h1>
           ${this._computeStepDescription(step)}
-          <ha-auth-form
+          ${keyed(
-            .localize=${this.localize}
+            step.step_id,
-            .data=${this._stepData!}
+            html`<ha-auth-form
-            .schema=${autocompleteLoginFields(step.data_schema)}
+              .localize=${this.localize}
-            .error=${step.errors}
+              .data=${this._stepData!}
-            .disabled=${this._submitting}
+              .schema=${autocompleteLoginFields(step.data_schema)}
-            .computeLabel=${this._computeLabelCallback(step)}
+              .error=${step.errors}
-            .computeError=${this._computeErrorCallback(step)}
+              .disabled=${this._submitting}
-            @value-changed=${this._stepDataChanged}
+              .computeLabel=${this._computeLabelCallback(step)}
-          ></ha-auth-form>
+              .computeError=${this._computeErrorCallback(step)}
+              @value-changed=${this._stepDataChanged}
+            ></ha-auth-form>`
+          )}
           ${this.clientId === genClientId() &&
           !["select_mfa_module", "mfa"].includes(step.step_id)
             ? html`

src/auth/ha-auth-form-string.ts

@@ -54,6 +54,7 @@ export class HaAuthFormString extends HaFormString {
         .autoValidate=${this.schema.required}
         .name=${this.schema.name}
         .autocomplete=${this.schema.autocomplete}
+        ?autofocus=${this.schema.autofocus}
         .suffix=${
           this.isPassword
             ? // reserve some space for the icon.

src/auth/ha-auth-textfield.ts

@@ -69,6 +69,7 @@ export class HaAuthTextField extends HaTextField {
       name=${ifDefined(this.name === "" ? undefined : this.name)}
       inputmode=${ifDefined(this.inputMode)}
       autocapitalize=${ifDefined(autocapitalizeOrUndef)}
+      ?autofocus=${this.autofocus}
       @input=${this.handleInputChange}
       @focus=${this.onInputFocus}
       @blur=${this.onInputBlur}
@@ -246,6 +247,14 @@ export class HaAuthTextField extends HaTextField {
     this.append(style);
     return this;
   }
+
+  public firstUpdated() {
+    super.firstUpdated();
+
+    if (this.autofocus) {
+      this.focus();
+    }
+  }
 }
 
 declare global {

src/components/ha-date-range-picker.ts

@@ -15,6 +15,10 @@ import {
   startOfMonth,
   startOfWeek,
   startOfYear,
+  differenceInMilliseconds,
+  addMilliseconds,
+  subMilliseconds,
+  roundToNearestHours,
 } from "date-fns";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -30,6 +34,8 @@ import "./date-range-picker";
 import "./ha-icon-button";
 import "./ha-svg-icon";
 import "./ha-textfield";
+import "./ha-icon-button-next";
+import "./ha-icon-button-prev";
 
 export interface DateRangePickerRanges {
   [key: string]: [Date, Date];
@@ -249,6 +255,12 @@ export class HaDateRangePicker extends LitElement {
         <div slot="input" class="date-range-inputs" @click=${this._handleClick}>
           ${!this.minimal
             ? html`<ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
+                <ha-icon-button-prev
+                  .label=${this.hass.localize("ui.common.previous")}
+                  class="prev"
+                  @click=${this._handlePrev}
+                >
+                </ha-icon-button-prev>
                 <ha-textfield
                   .value=${this.timePicker
                     ? formatDateTime(
@@ -286,7 +298,13 @@ export class HaDateRangePicker extends LitElement {
                   .disabled=${this.disabled}
                   @click=${this._handleInputClick}
                   readonly
-                ></ha-textfield>`
+                ></ha-textfield>
+                <ha-icon-button-next
+                  .label=${this.hass.localize("ui.common.next")}
+                  class="next"
+                  @click=${this._handleNext}
+                >
+                </ha-icon-button-next>`
             : html`<ha-icon-button
                 .label=${this.hass.localize(
                   "ui.components.date-range-picker.select_date_range"
@@ -317,6 +335,45 @@ export class HaDateRangePicker extends LitElement {
     `;
   }
 
+  private _handleNext(): void {
+    const dateRange = [
+      roundToNearestHours(this.endDate),
+      subMilliseconds(
+        roundToNearestHours(
+          addMilliseconds(
+            this.endDate,
+            Math.max(
+              3600000,
+              differenceInMilliseconds(this.endDate, this.startDate)
+            )
+          )
+        ),
+        1
+      ),
+    ];
+    const dateRangePicker = this._dateRangePicker;
+    dateRangePicker.clickRange(dateRange);
+    dateRangePicker.clickedApply();
+  }
+
+  private _handlePrev(): void {
+    const dateRange = [
+      roundToNearestHours(
+        subMilliseconds(
+          this.startDate,
+          Math.max(
+            3600000,
+            differenceInMilliseconds(this.endDate, this.startDate)
+          )
+        )
+      ),
+      subMilliseconds(roundToNearestHours(this.startDate), 1),
+    ];
+    const dateRangePicker = this._dateRangePicker;
+    dateRangePicker.clickRange(dateRange);
+    dateRangePicker.clickedApply();
+  }
+
   private _setDateRange(ev: CustomEvent<ActionDetail>) {
     const dateRange = Object.values(this.ranges || this._ranges!)[
       ev.detail.index
@@ -418,7 +475,9 @@ export class HaDateRangePicker extends LitElement {
           min-width: inherit;
         }
 
-        ha-svg-icon {
+        ha-svg-icon,
+        .prev,
+        .next {
           display: none;
         }
       }

src/components/ha-form/ha-form.ts

@@ -1,4 +1,3 @@
-/* eslint-disable lit/prefer-static-styles */
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";

src/components/ha-form/types.ts

@@ -85,6 +85,7 @@ export interface HaFormStringSchema extends HaFormBaseSchema {
   type: "string";
   format?: string;
   autocomplete?: string;
+  autofocus?: boolean;
 }
 
 export interface HaFormBooleanSchema extends HaFormBaseSchema {

src/data/auth.ts

@@ -30,11 +30,11 @@ export const autocompleteLoginFields = (schema: HaFormSchema[]) =>
     if (field.type !== "string") return field;
     switch (field.name) {
       case "username":
-        return { ...field, autocomplete: "username" };
+        return { ...field, autocomplete: "username", autofocus: true };
       case "password":
         return { ...field, autocomplete: "current-password" };
       case "code":
-        return { ...field, autocomplete: "one-time-code" };
+        return { ...field, autocomplete: "one-time-code", autofocus: true };
       default:
         return field;
     }

src/data/selector.ts

@@ -1,4 +1,7 @@
-import type { HassEntity } from "home-assistant-js-websocket";
+import type {
+  HassEntity,
+  HassServiceTarget,
+} from "home-assistant-js-websocket";
 import { ensureArray } from "../common/array/ensure-array";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
@@ -871,3 +874,65 @@ export const computeCreateDomains = (
 
   return [...new Set(createDomains)];
 };
+
+export const resolveEntityIDs = (
+  hass: HomeAssistant,
+  targetPickerValue: HassServiceTarget,
+  entities: HomeAssistant["entities"],
+  devices: HomeAssistant["devices"],
+  areas: HomeAssistant["areas"]
+): string[] => {
+  if (!targetPickerValue) {
+    return [];
+  }
+
+  const targetSelector = { target: {} };
+  const targetEntities = new Set(ensureArray(targetPickerValue.entity_id));
+  const targetDevices = new Set(ensureArray(targetPickerValue.device_id));
+  const targetAreas = new Set(ensureArray(targetPickerValue.area_id));
+  const targetFloors = new Set(ensureArray(targetPickerValue.floor_id));
+  const targetLabels = new Set(ensureArray(targetPickerValue.label_id));
+
+  targetLabels.forEach((labelId) => {
+    const expanded = expandLabelTarget(
+      hass,
+      labelId,
+      areas,
+      devices,
+      entities,
+      targetSelector
+    );
+    expanded.devices.forEach((id) => targetDevices.add(id));
+    expanded.entities.forEach((id) => targetEntities.add(id));
+    expanded.areas.forEach((id) => targetAreas.add(id));
+  });
+
+  targetFloors.forEach((floorId) => {
+    const expanded = expandFloorTarget(hass, floorId, areas, targetSelector);
+    expanded.areas.forEach((id) => targetAreas.add(id));
+  });
+
+  targetAreas.forEach((areaId) => {
+    const expanded = expandAreaTarget(
+      hass,
+      areaId,
+      devices,
+      entities,
+      targetSelector
+    );
+    expanded.devices.forEach((id) => targetDevices.add(id));
+    expanded.entities.forEach((id) => targetEntities.add(id));
+  });
+
+  targetDevices.forEach((deviceId) => {
+    const expanded = expandDeviceTarget(
+      hass,
+      deviceId,
+      entities,
+      targetSelector
+    );
+    expanded.entities.forEach((id) => targetEntities.add(id));
+  });
+
+  return Array.from(targetEntities);
+};

src/panels/history/ha-panel-history.ts

@@ -50,12 +50,7 @@ import {
 } from "../../data/history";
 import type { Statistics } from "../../data/recorder";
 import { fetchStatistics } from "../../data/recorder";
-import {
+import { resolveEntityIDs } from "../../data/selector";
-  expandAreaTarget,
-  expandDeviceTarget,
-  expandFloorTarget,
-  expandLabelTarget,
-} from "../../data/selector";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../resources/styles";
@@ -543,66 +538,8 @@ class HaPanelHistory extends LitElement {
       entities: HomeAssistant["entities"],
       devices: HomeAssistant["devices"],
       areas: HomeAssistant["areas"]
-    ): string[] => {
+    ): string[] =>
-      if (!targetPickerValue) {
+      resolveEntityIDs(this.hass, targetPickerValue, entities, devices, areas)
-        return [];
-      }
-
-      const targetSelector = { target: {} };
-      const targetEntities = new Set(ensureArray(targetPickerValue.entity_id));
-      const targetDevices = new Set(ensureArray(targetPickerValue.device_id));
-      const targetAreas = new Set(ensureArray(targetPickerValue.area_id));
-      const targetFloors = new Set(ensureArray(targetPickerValue.floor_id));
-      const targetLabels = new Set(ensureArray(targetPickerValue.label_id));
-
-      targetLabels.forEach((labelId) => {
-        const expanded = expandLabelTarget(
-          this.hass,
-          labelId,
-          areas,
-          devices,
-          entities,
-          targetSelector
-        );
-        expanded.devices.forEach((id) => targetDevices.add(id));
-        expanded.entities.forEach((id) => targetEntities.add(id));
-        expanded.areas.forEach((id) => targetAreas.add(id));
-      });
-
-      targetFloors.forEach((floorId) => {
-        const expanded = expandFloorTarget(
-          this.hass,
-          floorId,
-          areas,
-          targetSelector
-        );
-        expanded.areas.forEach((id) => targetAreas.add(id));
-      });
-
-      targetAreas.forEach((areaId) => {
-        const expanded = expandAreaTarget(
-          this.hass,
-          areaId,
-          devices,
-          entities,
-          targetSelector
-        );
-        expanded.devices.forEach((id) => targetDevices.add(id));
-        expanded.entities.forEach((id) => targetEntities.add(id));
-      });
-
-      targetDevices.forEach((deviceId) => {
-        const expanded = expandDeviceTarget(
-          this.hass,
-          deviceId,
-          entities,
-          targetSelector
-        );
-        expanded.entities.forEach((id) => targetEntities.add(id));
-      });
-
-      return Array.from(targetEntities);
-    }
   );
 
   private _dateRangeChanged(ev) {

src/panels/logbook/ha-panel-logbook.ts

@@ -2,6 +2,8 @@ import { mdiRefresh } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import memoizeOne from "memoize-one";
 import { navigate } from "../../common/navigate";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
@@ -15,10 +17,14 @@ import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-menu-button";
 import "../../components/ha-top-app-bar-fixed";
+import "../../components/ha-target-picker";
 import { filterLogbookCompatibleEntities } from "../../data/logbook";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "./ha-logbook";
+import { storage } from "../../common/decorators/storage";
+import { ensureArray } from "../../common/array/ensure-array";
+import { resolveEntityIDs } from "../../data/selector";
 
 @customElement("ha-panel-logbook")
 export class HaPanelLogbook extends LitElement {
@@ -33,6 +39,13 @@ export class HaPanelLogbook extends LitElement {
   @state()
   private _showBack?: boolean;
 
+  @storage({
+    key: "logbookPickedValue",
+    state: true,
+    subscribe: false,
+  })
+  private _targetPickerValue: HassServiceTarget = {};
+
   public constructor() {
     super();
 
@@ -82,21 +95,19 @@ export class HaPanelLogbook extends LitElement {
             @change=${this._dateRangeChanged}
           ></ha-date-range-picker>
 
-          <ha-entity-picker
+          <ha-target-picker
             .hass=${this.hass}
-            .value=${this._entityIds ? this._entityIds[0] : undefined}
-            .label=${this.hass.localize(
-              "ui.components.entity.entity-picker.entity"
-            )}
             .entityFilter=${filterLogbookCompatibleEntities}
-            @change=${this._entityPicked}
+            .value=${this._targetPickerValue}
-          ></ha-entity-picker>
+            addOnTop
+            @value-changed=${this._targetsChanged}
+          ></ha-target-picker>
         </div>
 
         <ha-logbook
           .hass=${this.hass}
           .time=${this._time}
-          .entityIds=${this._entityIds}
+          .entityIds=${this._getEntityIds()}
           virtualize
         ></ha-logbook>
       </ha-top-app-bar-fixed>
@@ -140,32 +151,62 @@ export class HaPanelLogbook extends LitElement {
     this._applyURLParams();
   };
 
+  private _getEntityIds(): string[] | undefined {
+    const entities = this.__getEntityIds(
+      this._targetPickerValue,
+      this.hass.entities,
+      this.hass.devices,
+      this.hass.areas
+    );
+    if (entities.length === 0) {
+      return undefined;
+    }
+    return entities;
+  }
+
+  private __getEntityIds = memoizeOne(
+    (
+      targetPickerValue: HassServiceTarget,
+      entities: HomeAssistant["entities"],
+      devices: HomeAssistant["devices"],
+      areas: HomeAssistant["areas"]
+    ): string[] =>
+      resolveEntityIDs(this.hass, targetPickerValue, entities, devices, areas)
+  );
+
   private _applyURLParams() {
-    const searchParams = new URLSearchParams(location.search);
+    const searchParams = extractSearchParamsObject();
-
+    const entityIds = searchParams.entity_id;
-    if (searchParams.has("entity_id")) {
+    const deviceIds = searchParams.device_id;
-      const entityIdsRaw = searchParams.get("entity_id");
+    const areaIds = searchParams.area_id;
-
+    const floorIds = searchParams.floor_id;
-      if (!entityIdsRaw) {
+    const labelsIds = searchParams.label_id;
-        this._entityIds = undefined;
+    if (entityIds || deviceIds || areaIds || floorIds || labelsIds) {
-      } else {
+      this._targetPickerValue = {};
-        const entityIds = entityIdsRaw.split(",").sort();
+    }
-
+    if (entityIds) {
-        // Check if different
+      const splitIds = entityIds.split(",");
-        if (
+      this._targetPickerValue!.entity_id = splitIds;
-          !this._entityIds ||
+    }
-          entityIds.length !== this._entityIds.length ||
+    if (deviceIds) {
-          !this._entityIds.every((val, idx) => val === entityIds[idx])
+      const splitIds = deviceIds.split(",");
-        ) {
+      this._targetPickerValue!.device_id = splitIds;
-          this._entityIds = entityIds;
+    }
-        }
+    if (areaIds) {
-      }
+      const splitIds = areaIds.split(",");
-    } else {
+      this._targetPickerValue!.area_id = splitIds;
-      this._entityIds = undefined;
+    }
+    if (floorIds) {
+      const splitIds = floorIds.split(",");
+      this._targetPickerValue!.floor_id = splitIds;
+    }
+    if (labelsIds) {
+      const splitIds = labelsIds.split(",");
+      this._targetPickerValue!.label_id = splitIds;
     }
 
-    const startDateStr = searchParams.get("start_date");
+    const startDateStr = searchParams.start_date;
-    const endDateStr = searchParams.get("end_date");
+    const endDateStr = searchParams.end_date;
 
     if (startDateStr || endDateStr) {
       const startDate = startDateStr
@@ -195,27 +236,48 @@ export class HaPanelLogbook extends LitElement {
       endDate.setDate(endDate.getDate() + 1);
       endDate.setMilliseconds(endDate.getMilliseconds() - 1);
     }
-    this._updatePath({
+    this._time = {
-      start_date: startDate.toISOString(),
+      range: [startDate, endDate],
-      end_date: endDate.toISOString(),
+    };
-    });
+    this._updatePath();
   }
 
-  private _entityPicked(ev) {
+  private _targetsChanged(ev) {
-    this._updatePath({
+    this._targetPickerValue = ev.detail.value || {};
-      entity_id: ev.target.value || undefined,
+    this._updatePath();
-    });
   }
 
-  private _updatePath(update: Record<string, string | undefined>) {
+  private _updatePath() {
-    const params = extractSearchParamsObject();
+    const params: Record<string, string> = {};
-    for (const [key, value] of Object.entries(update)) {
+
-      if (value === undefined) {
+    if (this._targetPickerValue.entity_id) {
-        delete params[key];
+      params.entity_id = ensureArray(this._targetPickerValue.entity_id).join(
-      } else {
+        ","
-        params[key] = value;
+      );
-      }
     }
+    if (this._targetPickerValue.label_id) {
+      params.label_id = ensureArray(this._targetPickerValue.label_id).join(",");
+    }
+    if (this._targetPickerValue.floor_id) {
+      params.floor_id = ensureArray(this._targetPickerValue.floor_id).join(",");
+    }
+    if (this._targetPickerValue.area_id) {
+      params.area_id = ensureArray(this._targetPickerValue.area_id).join(",");
+    }
+    if (this._targetPickerValue.device_id) {
+      params.device_id = ensureArray(this._targetPickerValue.device_id).join(
+        ","
+      );
+    }
+
+    if (this._time.range[0]) {
+      params.start_date = this._time.range[0].toISOString();
+    }
+
+    if (this._time.range[1]) {
+      params.end_date = this._time.range[1].toISOString();
+    }
+
     navigate(`/logbook?${createSearchParam(params)}`, { replace: true });
   }
 

src/panels/lovelace/types.ts

@@ -17,7 +17,6 @@ import type { LovelaceHeadingBadgeConfig } from "./heading-badges/types";
 import type { ShowToastParams } from "../../managers/notification-manager";
 
 declare global {
-  // eslint-disable-next-line
   interface HASSDomEvents {
     "ll-rebuild": Record<string, unknown>;
     "ll-upgrade": Record<string, unknown>;