Update lit-virtualizer (#11623)

home-assistant · Feb 9, 2022 · 5f43715 · 5f43715
1 parent 5435218
commit 5f43715
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 1,696 deletions.
diff --git a/.yarn/patches/@lit-labs/virtualizer/0.7.0.patch b/.yarn/patches/@lit-labs/virtualizer/0.7.0.patch
diff --git a/.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch b/.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();
@@ -26,4 +25,5 @@ index d92179f7fd5315203f870a6963e871dc8ddf6c0c..362e284121b97e0fba0925225777aebc
 +    _ET = (await import("event-target-shim")).default.EventTarget;
 +  }
 +  return (ET = _ET);
- }
+ }
+ //# sourceMappingURL=EventTarget.js.map
diff --git a/package.json b/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",

diff --git a/src/components/data-table/ha-data-table.ts b/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,111 +337,99 @@ 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) => {
-                      // not sure how this happens...
-                      if (!row) {
-                        return html``;
-                      }
-                      if (row.append) {
-                        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}
-                          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])),
-                            clickable: this.clickable,
-                          })}"
-                          aria-selected=${ifDefined(
-                            this._checkedRows.includes(String(row[this.id]))
-                              ? true
-                              : undefined
-                          )}
-                          .selectable=${row.selectable !== false}
-                        >
-                          ${this.selectable
-                            ? html`
-                                <div
-                                  class="mdc-data-table__cell mdc-data-table__cell--checkbox"
-                                  role="cell"
-                                >
-                                  <ha-checkbox
-                                    class="mdc-data-table__row-checkbox"
-                                    @change=${this._handleRowCheckboxClick}
-                                    .rowId=${row[this.id]}
-                                    .disabled=${row.selectable === false}
-                                    .checked=${this._checkedRows.includes(
-                                      String(row[this.id])
-                                    )}
-                                  >
-                                  </ha-checkbox>
-                                </div>
-                              `
-                            : ""}
-                          ${Object.entries(this.columns).map(
-                            ([key, column]) => {
-                              if (column.hidden) {
-                                return "";
-                              }
-                              return html`
-                                <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--icon-button":
-                                      column.type === "icon-button",
-                                    "mdc-data-table__cell--overflow-menu":
-                                      column.type === "overflow-menu",
-                                    grows: Boolean(column.grows),
-                                    forceLTR: Boolean(column.forceLTR),
-                                  })}"
-                                  style=${column.width
-                                    ? styleMap({
-                                        [column.grows ? "minWidth" : "width"]:
-                                          column.width,
-                                        maxWidth: column.maxWidth
-                                          ? column.maxWidth
-                                          : "",
-                                      })
-                                    : ""}
-                                >
-                                  ${column.template
-                                    ? column.template(row[key], row)
-                                    : row[key]}
-                                </div>
-                              `;
-                            }
-                          )}
-                        </div>
-                      `;
-                    },
-                  })}
-                </div>
+                  .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> `;
+    }
+    if (row.empty) {
+      return html` <div class="mdc-data-table__row"></div> `;
+    }
+    return html`
+      <div
+        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])
+          ),
+          clickable: this.clickable,
+        })}"
+        aria-selected=${ifDefined(
+          this._checkedRows.includes(String(row[this.id])) ? true : undefined
+        )}
+        .selectable=${row.selectable !== false}
+      >
+        ${this.selectable
+          ? html`
+              <div
+                class="mdc-data-table__cell mdc-data-table__cell--checkbox"
+                role="cell"
+              >
+                <ha-checkbox
+                  class="mdc-data-table__row-checkbox"
+                  @change=${this._handleRowCheckboxClick}
+                  .rowId=${row[this.id]}
+                  .disabled=${row.selectable === false}
+                  .checked=${this._checkedRows.includes(String(row[this.id]))}
+                >
+                </ha-checkbox>
+              </div>
+            `
+          : ""}
+        ${Object.entries(this.columns).map(([key, column]) => {
+          if (column.hidden) {
+            return "";
+          }
+          return html`
+            <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--icon-button":
+                  column.type === "icon-button",
+                "mdc-data-table__cell--overflow-menu":
+                  column.type === "overflow-menu",
+                grows: Boolean(column.grows),
+                forceLTR: Boolean(column.forceLTR),
+              })}"
+              style=${column.width
+                ? styleMap({
+                    [column.grows ? "minWidth" : "width"]: column.width,
+                    maxWidth: column.maxWidth ? column.maxWidth : "",
+                  })
+                : ""}
+            >
+              ${column.template ? column.template(row[key], row) : row[key]}
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  };
+
   private async _sortFilterData() {
     const startTime = new Date().getTime();
     this.curRequest++;
@@ -970,6 +958,9 @@ export class HaDataTable extends LitElement {
         .clickable {
           cursor: pointer;
         }
+        lit-virtualizer {
+          contain: size layout !important;
+        }
       `,
     ];
   }

diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/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,25 +210,24 @@ export class QuickBar extends LitElement {
               </div>
             `
           : html`
-              <mwc-list
-                @rangechange=${this._handleRangeChanged}
-                @keydown=${this._handleListItemKeyDown}
-                @selected=${this._handleSelected}
-                style=${styleMap({
-                  height: this._narrow
-                    ? "calc(100vh - 56px)"
-                    : `${Math.min(
-                        items.length * (this._commandMode ? 56 : 72) + 26,
-                        this._done ? 500 : 0
-                      )}px`,
-                })}
-              >
-                ${scroll({
-                  items,
-                  layout: Layout1d,
-                  renderItem: (item: QuickBarItem, index) =>
-                    this._renderItem(item, index),
-                })}
+              <mwc-list @selected=${this._handleSelected}>
+                <lit-virtualizer
+                  scroller
+                  @keydown=${this._handleListItemKeyDown}
+                  @rangechange=${this._handleRangeChanged}
+                  class="ha-scrollbar"
+                  style=${styleMap({
+                    height: this._narrow
+                      ? "calc(100vh - 56px)"
+                      : `${Math.min(
+                          items.length * (this._commandMode ? 56 : 72) + 26,
+                          this._done ? 500 : 0
+                        )}px`,
+                  })}
+                  .items=${items}
+                  .renderItem=${this._renderItem}
+                >
+                </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;
+        }
       `,
     ];
   }