Update lit-virtualizer (#11623)

.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch

@@ -1,11 +1,10 @@
-diff --git a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
-index d92179f7fd5315203f870a6963e871dc8ddf6c0c..362e284121b97e0fba0925225777aebc32e26b8d 100644
---- a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
-+++ b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
-@@ -1,14 +1,15 @@
--let _ET, ET;
-+let _ET;
-+let ET;
+diff --git a/polyfillLoaders/EventTarget.js b/polyfillLoaders/EventTarget.js
+index 4e18ade7ba485849f17f28c94c42f0e0e01ac387..8f34f4f646c7f7becc208fb5a546c96034fc74dc 100644
+--- a/polyfillLoaders/EventTarget.js
++++ b/polyfillLoaders/EventTarget.js
+@@ -6,16 +6,15 @@
+ let _ET;
+ let ET;
  export default async function EventTarget() {
 -    return ET || init();
 +  return ET || init();
@@ -27,3 +26,4 @@ index d92179f7fd5315203f870a6963e871dc8ddf6c0c..362e284121b97e0fba0925225777aebc
 +  }
 +  return (ET = _ET);
  }
+ //# sourceMappingURL=EventTarget.js.map

package.json

@@ -46,7 +46,7 @@
     "@fullcalendar/daygrid": "5.9.0",
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
-    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch",
+    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch",
     "@material/chips": "14.0.0-canary.261f2db59.0",
     "@material/data-table": "14.0.0-canary.261f2db59.0",
     "@material/mwc-button": "0.25.3",

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

@@ -1,4 +1,3 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
 import { mdiArrowDown, mdiArrowUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import {
@@ -31,6 +30,7 @@ import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
 import { filterData, sortData } from "./sort-filter";
 import { HomeAssistant } from "../../types";
+import "@lit-labs/virtualizer";
 
 declare global {
   // for fire event
@@ -337,41 +337,47 @@ export class HaDataTable extends LitElement {
                 </div>
               `
             : html`
-                <div
+                <lit-virtualizer
+                  scroller
                   class="mdc-data-table__content scroller ha-scrollbar"
                   @scroll=${this._saveScrollPos}
-                >
-                  ${scroll({
-                    items: this._items,
-                    layout: Layout1d,
-                    renderItem: (row: DataTableRowData, index) => {
+                  .items=${this._items}
+                  .renderItem=${this._renderRow}
+                ></lit-virtualizer>
+              `}
+        </div>
+      </div>
+    `;
+  }
+
+  private _renderRow = (
+    row: DataTableRowData,
+    index: number
+  ): TemplateResult => {
     // not sure how this happens...
     if (!row) {
       return html``;
     }
     if (row.append) {
-                        return html`
-                          <div class="mdc-data-table__row">${row.content}</div>
-                        `;
+      return html` <div class="mdc-data-table__row">${row.content}</div> `;
     }
     if (row.empty) {
       return html` <div class="mdc-data-table__row"></div> `;
     }
     return html`
       <div
-                          aria-rowindex=${index! + 2}
+        aria-rowindex=${index + 2}
         role="row"
         .rowId=${row[this.id]}
         @click=${this._handleRowClick}
         class="mdc-data-table__row ${classMap({
-                            "mdc-data-table__row--selected":
-                              this._checkedRows.includes(String(row[this.id])),
+          "mdc-data-table__row--selected": this._checkedRows.includes(
+            String(row[this.id])
+          ),
           clickable: this.clickable,
         })}"
         aria-selected=${ifDefined(
-                            this._checkedRows.includes(String(row[this.id]))
-                              ? true
-                              : undefined
+          this._checkedRows.includes(String(row[this.id])) ? true : undefined
         )}
         .selectable=${row.selectable !== false}
       >
@@ -386,16 +392,13 @@ export class HaDataTable extends LitElement {
                   @change=${this._handleRowCheckboxClick}
                   .rowId=${row[this.id]}
                   .disabled=${row.selectable === false}
-                                    .checked=${this._checkedRows.includes(
-                                      String(row[this.id])
-                                    )}
+                  .checked=${this._checkedRows.includes(String(row[this.id]))}
                 >
                 </ha-checkbox>
               </div>
             `
           : ""}
-                          ${Object.entries(this.columns).map(
-                            ([key, column]) => {
+        ${Object.entries(this.columns).map(([key, column]) => {
           if (column.hidden) {
             return "";
           }
@@ -403,10 +406,8 @@ export class HaDataTable extends LitElement {
             <div
               role="cell"
               class="mdc-data-table__cell ${classMap({
-                                    "mdc-data-table__cell--numeric":
-                                      column.type === "numeric",
-                                    "mdc-data-table__cell--icon":
-                                      column.type === "icon",
+                "mdc-data-table__cell--numeric": column.type === "numeric",
+                "mdc-data-table__cell--icon": column.type === "icon",
                 "mdc-data-table__cell--icon-button":
                   column.type === "icon-button",
                 "mdc-data-table__cell--overflow-menu":
@@ -416,31 +417,18 @@ export class HaDataTable extends LitElement {
               })}"
               style=${column.width
                 ? styleMap({
-                                        [column.grows ? "minWidth" : "width"]:
-                                          column.width,
-                                        maxWidth: column.maxWidth
-                                          ? column.maxWidth
-                                          : "",
+                    [column.grows ? "minWidth" : "width"]: column.width,
+                    maxWidth: column.maxWidth ? column.maxWidth : "",
                   })
                 : ""}
             >
-                                  ${column.template
-                                    ? column.template(row[key], row)
-                                    : row[key]}
+              ${column.template ? column.template(row[key], row) : row[key]}
             </div>
           `;
-                            }
-                          )}
-                        </div>
-                      `;
-                    },
         })}
       </div>
-              `}
-        </div>
-      </div>
     `;
-  }
+  };
 
   private async _sortFilterData() {
     const startTime = new Date().getTime();
@@ -970,6 +958,9 @@ export class HaDataTable extends LitElement {
         .clickable {
           cursor: pointer;
         }
+        lit-virtualizer {
+          contain: size layout !important;
+        }
       `,
     ];
   }

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1,5 +1,4 @@
-import "../../components/ha-textfield";
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import "@lit-labs/virtualizer";
 import "@material/mwc-list/mwc-list";
 import type { List } from "@material/mwc-list/mwc-list";
 import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
@@ -13,7 +12,7 @@ import {
   mdiReload,
   mdiServerNetwork,
 } from "@mdi/js";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
@@ -36,11 +35,12 @@ import "../../components/ha-chip";
 import "../../components/ha-circular-progress";
 import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
+import "../../components/ha-textfield";
 import { domainToName } from "../../data/integration";
 import { getPanelNameTranslationKey } from "../../data/panel";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import { configSections } from "../../panels/config/ha-panel-config";
-import { haStyleDialog } from "../../resources/styles";
+import { haStyleDialog, haStyleScrollbar } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import {
   ConfirmationDialogParams,
@@ -210,10 +210,12 @@ export class QuickBar extends LitElement {
               </div>
             `
           : html`
-              <mwc-list
-                @rangechange=${this._handleRangeChanged}
+              <mwc-list @selected=${this._handleSelected}>
+                <lit-virtualizer
+                  scroller
                   @keydown=${this._handleListItemKeyDown}
-                @selected=${this._handleSelected}
+                  @rangechange=${this._handleRangeChanged}
+                  class="ha-scrollbar"
                   style=${styleMap({
                     height: this._narrow
                       ? "calc(100vh - 56px)"
@@ -222,13 +224,10 @@ export class QuickBar extends LitElement {
                           this._done ? 500 : 0
                         )}px`,
                   })}
+                  .items=${items}
+                  .renderItem=${this._renderItem}
                 >
-                ${scroll({
-                  items,
-                  layout: Layout1d,
-                  renderItem: (item: QuickBarItem, index) =>
-                    this._renderItem(item, index),
-                })}
+                </lit-virtualizer>
               </mwc-list>
             `}
         ${this._hint ? html`<div class="hint">${this._hint}</div>` : ""}
@@ -261,14 +260,14 @@ export class QuickBar extends LitElement {
     }
   }
 
-  private _renderItem(item: QuickBarItem, index?: number) {
+  private _renderItem = (item: QuickBarItem, index: number): TemplateResult => {
     if (!item) {
       return html``;
     }
     return isCommandItem(item)
       ? this._renderCommandItem(item, index)
       : this._renderEntityItem(item as EntityItem, index);
-  }
+  };
 
   private _renderEntityItem(item: EntityItem, index?: number) {
     return html`
@@ -431,16 +430,21 @@ export class QuickBar extends LitElement {
 
   private _handleListItemKeyDown(ev: KeyboardEvent) {
     const isSingleCharacter = ev.key.length === 1;
-    const isFirstListItem =
-      (ev.target as HTMLElement).getAttribute("index") === "0";
+    const index = (ev.target as HTMLElement).getAttribute("index");
+    const isFirstListItem = index === "0";
     this._focusListElement = ev.target as ListItem;
+    if (ev.key === "ArrowDown") {
+      this._getItemAtIndex(Number(index) + 1)?.focus();
+    }
     if (ev.key === "ArrowUp") {
       if (isFirstListItem) {
         this._filterInputField?.focus();
+      } else {
+        this._getItemAtIndex(Number(index) - 1)?.focus();
       }
     }
     if (ev.key === "Backspace" || isSingleCharacter) {
-      (ev.currentTarget as List).scrollTop = 0;
+      (ev.currentTarget as HTMLElement).scrollTop = 0;
       this._filterInputField?.focus();
     }
   }
@@ -683,6 +687,7 @@ export class QuickBar extends LitElement {
 
   static get styles() {
     return [
+      haStyleScrollbar,
       haStyleDialog,
       css`
         .heading {
@@ -780,6 +785,10 @@ export class QuickBar extends LitElement {
           display: flex;
           align-items: center;
         }
+
+        lit-virtualizer {
+          contain: size layout !important;
+        }
       `,
     ];
   }

src/panels/logbook/ha-logbook.ts

@@ -1,4 +1,4 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import "@lit-labs/virtualizer";
 import {
   css,
   CSSResultGroup,
@@ -97,12 +97,13 @@ class HaLogbook extends LitElement {
         @scroll=${this._saveScrollPos}
       >
         ${this.virtualize
-          ? scroll({
-              items: this.entries,
-              layout: Layout1d,
-              renderItem: (item: LogbookEntry, index) =>
-                this._renderLogbookItem(item, index),
-            })
+          ? html`<lit-virtualizer
+              scroller
+              class="ha-scrollbar"
+              .items=${this.entries}
+              .renderItem=${this._renderLogbookItem}
+            >
+            </lit-virtualizer>`
           : this.entries.map((item, index) =>
               this._renderLogbookItem(item, index)
             )}
@@ -110,11 +111,11 @@ class HaLogbook extends LitElement {
     `;
   }
 
-  private _renderLogbookItem(
+  private _renderLogbookItem = (
     item: LogbookEntry,
-    index?: number
-  ): TemplateResult {
-    if (index === undefined) {
+    index: number
+  ): TemplateResult => {
+    if (!item || index === undefined) {
       return html``;
     }
 
@@ -239,7 +240,7 @@ class HaLogbook extends LitElement {
         </div>
       </div>
     `;
-  }
+  };
 
   @eventOptions({ passive: true })
   private _saveScrollPos(e: Event) {
@@ -362,10 +363,15 @@ class HaLogbook extends LitElement {
           max-height: var(--logbook-max-height);
         }
 
-        :host([virtualize]) .container {
+        .container,
+        lit-virtualizer {
           height: 100%;
         }
 
+        lit-virtualizer {
+          contain: size layout !important;
+        }
+
         .narrow .entry {
           line-height: 1.5;
           padding: 8px;

yarn.lock

@@ -1960,25 +1960,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lit-labs/virtualizer@0.6.0":
-  version: 0.6.0
-  resolution: "@lit-labs/virtualizer@npm:0.6.0"
+"@lit-labs/virtualizer@0.7.0-pre.2":
+  version: 0.7.0-pre.2
+  resolution: "@lit-labs/virtualizer@npm:0.7.0-pre.2"
   dependencies:
     event-target-shim: ^5.0.1
-    lit: ^2.0.0-rc.1
+    lit: ^2.0.0
     tslib: ^1.10.0
-  checksum: c18a49c331a66f82a896a8de7d856277cc48dc4c9ca90df9513c1a73c887a36d1363178233a902d8d0fe5e1aa88f71302d68ac7a0cb1dc6ccbe593282d1cee72
+  checksum: 88d5fffe73213c305160257e4e3a63a93087a90e63ca6640a81d156faacb68a8f84a82b94153b9364aeab3f5de45484acad1f8dcc2673e8464e394672358a3cc
   languageName: node
   linkType: hard
 
-"@lit-labs/virtualizer@patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch::locator=home-assistant-frontend%40workspace%3A.":
-  version: 0.6.0
-  resolution: "@lit-labs/virtualizer@patch:@lit-labs/virtualizer@npm%3A0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch::version=0.6.0&hash=0c4ec6&locator=home-assistant-frontend%40workspace%3A."
+"@lit-labs/virtualizer@patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch::locator=home-assistant-frontend%40workspace%3A.":
+  version: 0.7.0-pre.2
+  resolution: "@lit-labs/virtualizer@patch:@lit-labs/virtualizer@npm%3A0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch::version=0.7.0-pre.2&hash=cef165&locator=home-assistant-frontend%40workspace%3A."
   dependencies:
     event-target-shim: ^5.0.1
-    lit: ^2.0.0-rc.1
+    lit: ^2.0.0
     tslib: ^1.10.0
-  checksum: 66bed3149dce8a0099e567ec3f1d249fb1855bf0df41e644453d044debe5f686c8c1b2078d45b4de5c488e821119eae1734b040a2145862efec54c442b83ff0f
+  checksum: ea8bdd610530fc9b50dd327cc3b8c70d4e45300636d731969af7b9475047c91066fe7973e04ac91f80111c116c80a989f1507da7fbfc526f7c0dff3a54719a4d
   languageName: node
   linkType: hard
 
@@ -9124,7 +9124,7 @@ fsevents@^1.2.7:
     "@fullcalendar/interaction": 5.9.0
     "@fullcalendar/list": 5.9.0
     "@koa/cors": ^3.1.0
-    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch"
+    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch"
     "@material/chips": 14.0.0-canary.261f2db59.0
     "@material/data-table": 14.0.0-canary.261f2db59.0
     "@material/mwc-button": 0.25.3