@aceshooting/lyra-ui 6.2.0 → 7.0.0

package/dist/components/layout/virtual-list/virtual-list.class.js

@@ -4,14 +4,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { LyraElement } from '../../../internal/lyra-element.js';
-import { prefersReducedMotion } from '../../../internal/motion.js';
-import { finiteInteger } from '../../../internal/numbers.js';
-import { styles } from './virtual-list.styles.js';
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { LyraElement } from "../../../internal/lyra-element.js";
+import { prefersReducedMotion } from "../../../internal/motion.js";
+import { finiteInteger } from "../../../internal/numbers.js";
+import { getNumberFormat } from "../../../internal/intl-cache.js";
+import { styles } from "./virtual-list.styles.js";
 /** Fallback per-row height (px) used for any row that hasn't been measured
  *  yet in `row-height="auto"` mode -- close enough to a typical single-line
  *  chat-list row that the initial scrollbar/spacer size doesn't jump wildly
@@ -26,7 +27,7 @@ export const MAX_OVERSCAN_ROWS = 100;
 function normalizeOverscan(value) {
     if (value === null)
         return DEFAULT_OVERSCAN_ROWS;
-    const numeric = typeof value === 'number' ? value : Number(value);
+    const numeric = typeof value === "number" ? value : Number(value);
     if (!Number.isFinite(numeric))
         return DEFAULT_OVERSCAN_ROWS;
     return Math.min(MAX_OVERSCAN_ROWS, Math.max(0, Math.floor(numeric)));
@@ -39,11 +40,11 @@ const overscanConverter = {
 /** A typed key is used in maps and active-row matching; this token is only for
  * DOM attributes, where every value is necessarily a string. */
 function domKeyToken(key) {
-    if (typeof key === 'number') {
+    if (typeof key === "number") {
         if (Number.isNaN(key))
-            return 'number:NaN';
+            return "number:NaN";
         if (Object.is(key, -0))
-            return 'number:-0';
+            return "number:-0";
     }
     return `${typeof key}:${String(key)}`;
 }
@@ -112,10 +113,9 @@ function domKeyToken(key) {
  * focusable content of its own is otherwise unreachable by keyboard (native
  * arrow/Page Up/Page Down scrolling included).
  *
- * **Grouping.** When supplied, `groups` renders a labeled group marker at the
- * corresponding `startIndex`. Group markers are positioned independently of
- * the row window, so they remain available when the first row in a group is
- * outside the current overscanned range.
+ * **Grouping.** When supplied, `groups` renders a labeled group marker at the corresponding
+ * `startIndex`. Markers are windowed with the rows, while normalized group metadata stays cached
+ * for sticky-header lookup; one-group-per-row catalogs therefore remain bounded.
  *
  * **Sticky group headers.** `renderStickyGroup` adds a `[part="sticky-group"]` overlay pinned to the
  * top of the scroll viewport, showing the `groups` entry the viewport is currently inside; as the
@@ -207,12 +207,12 @@ export class LyraVirtualList extends LyraElement {
         this.renderItem = () => nothing;
         /** `'auto'` (default) measures each row's real height via `ResizeObserver`;
          *  a numeric string fixes every row to that many pixels. */
-        this.rowHeight = 'auto';
+        this.rowHeight = "auto";
         /** `'listitem'` (default) preserves today's `role="list"`/`role="listitem"` mapping with
          *  `aria-setsize`/`aria-posinset`. `'row'` maps to `role="rowgroup"`/`role="row"` with
          *  `aria-rowindex` instead -- for a consumer composing a virtualized `role="table"` (see
          *  `<lr-dataset-viewer>`). */
-        this.itemRole = 'listitem';
+        this.itemRole = "listitem";
         /** Added to a row's 1-based index to compute `aria-rowindex` in `item-role="row"` mode (e.g. `1`
          *  when a consumer renders its own header row occupying `aria-rowindex="1"` outside this
          *  component). No effect in `'listitem'` mode. */
@@ -225,7 +225,7 @@ export class LyraVirtualList extends LyraElement {
         /** When set and it matches a row's typed `keyFunction` result, that row is
          * smoothly scrolled into view whenever this changes. Attribute values are
          * strings; assign the property for a numeric key. */
-        this.activeId = '';
+        this.activeId = "";
         this.loading = false;
         /** When true, scrolling near the bottom fires `lr-load-more`. */
         this.hasMore = false;
@@ -237,6 +237,9 @@ export class LyraVirtualList extends LyraElement {
         this.viewportHeight = 0;
         /** `offsets[i]` = row `i`'s pixel top; `offsets[items.length]` = total content height. Rebuilt only when `offsetsDirty` is set -- see `willUpdate()`. */
         this.offsets = [0];
+        /** Occurrence-safe internal identities. Public duplicate keys remain visible as distinct rows,
+         * while the first occurrence alone owns `activeId`. */
+        this.rowIdentities = [];
         /** Parsed `rowHeight`: a positive pixel number, or `null` for `'auto'` (measured) mode. */
         this.fixedRowHeight = null;
         /** `row-height="auto"` per-row measured heights, keyed by
@@ -275,6 +278,8 @@ export class LyraVirtualList extends LyraElement {
         this.observedRowKeys = new WeakMap();
         this.observedRowIndices = new WeakMap();
         this.pendingScrollTop = null;
+        /** Normalized once per `groups`/`items` assignment, then shared by marker and sticky paths. */
+        this.normalizedGroups = [];
         this.onScroll = (e) => {
             this.pendingScrollTop = e.currentTarget.scrollTop;
             if (this.scrollRafId !== undefined)
@@ -293,7 +298,10 @@ export class LyraVirtualList extends LyraElement {
                     const moved = this.containerScrollTop !== scrollTop;
                     this.containerScrollTop = scrollTop;
                     if (moved) {
-                        this.emit('lr-scroll', { scrollTop, viewportHeight: this.viewportHeight });
+                        this.emit("lr-scroll", {
+                            scrollTop,
+                            viewportHeight: this.viewportHeight,
+                        });
                     }
                 }
             });
@@ -311,7 +319,8 @@ export class LyraVirtualList extends LyraElement {
                 const index = this.observedRowIndices.get(row);
                 if (key === undefined || index === undefined)
                     continue;
-                const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height;
+                const height = entry.borderBoxSize?.[0]?.blockSize ??
+                    entry.target.getBoundingClientRect().height;
                 const prev = this.measuredHeights.get(key);
                 // A sub-pixel-only difference (common with fractional layout/zoom)
                 // isn't worth a full offsets rebuild + re-render.
@@ -361,7 +370,7 @@ export class LyraVirtualList extends LyraElement {
      */
     get scrollContainer() {
         const root = this.renderRoot;
-        return root?.querySelector('[part="base"]') ?? undefined;
+        return (root?.querySelector('[part="base"]') ?? undefined);
     }
     /**
      * The row wrappers (`[part="row"]`) that currently exist as real DOM, in item order — the current
@@ -419,20 +428,25 @@ export class LyraVirtualList extends LyraElement {
             this.scrollRafId = undefined;
         }
         this.pendingScrollCorrection = undefined;
-        this.scrollContainer?.removeEventListener('scroll', this.onScroll);
+        this.scrollContainer?.removeEventListener("scroll", this.onScroll);
     }
     firstUpdated() {
         this.attachContainerListeners();
     }
     willUpdate(changed) {
         this.isFirstUpdate = !this.hasUpdated;
-        if (changed.has('items') || changed.has('rowHeight') || changed.has('keyFunction')) {
+        if (changed.has("items") ||
+            changed.has("rowHeight") ||
+            changed.has("keyFunction")) {
             this.offsetsDirty = true;
         }
-        if (changed.has('items')) {
+        if (changed.has("items")) {
             this.itemsChangedPendingPrune = true;
         }
-        if (changed.has('rowHeight')) {
+        if (changed.has("items") || changed.has("groups")) {
+            this.recomputeGroups();
+        }
+        if (changed.has("rowHeight")) {
             this.fixedRowHeight = this.parseRowHeight(this.rowHeight);
         }
         if (this.offsetsDirty) {
@@ -447,14 +461,14 @@ export class LyraVirtualList extends LyraElement {
         super.updated(changed);
         this.syncRowObservers();
         this.syncStickyOverlay();
-        if (changed.has('activeId') && !this.isFirstUpdate)
+        if (changed.has("activeId") && !this.isFirstUpdate)
             this.scrollActiveIntoView();
         this.emitRangeChangeIfNeeded();
         this.maybeFireLoadMore();
         this.maybeCorrectPendingScroll();
     }
     parseRowHeight(value) {
-        if (value === 'auto')
+        if (value === "auto")
             return null;
         const n = Number(value);
         // Anything that isn't 'auto' or a positive finite number falls back to
@@ -464,7 +478,11 @@ export class LyraVirtualList extends LyraElement {
     }
     keyOf(item, index) {
         const key = this.keyFunction ? this.keyFunction(item, index) : index;
-        return typeof key === 'string' || typeof key === 'number' ? key : index;
+        return typeof key === "string" || typeof key === "number" ? key : index;
+    }
+    rowIdentity(key, occurrence) {
+        const token = domKeyToken(key);
+        return `${token.length}:${token}:${occurrence}`;
     }
     recomputeOffsets() {
         const n = this.items.length;
@@ -477,19 +495,27 @@ export class LyraVirtualList extends LyraElement {
         // before.
         const pruneStale = this.itemsChangedPendingPrune && this.fixedRowHeight == null;
         const liveKeys = pruneStale ? new Set() : null;
+        const occurrences = new Map();
+        const identities = new Array(n);
         for (let i = 0; i < n; i++) {
+            const key = this.keyOf(this.items[i], i);
+            const token = domKeyToken(key);
+            const occurrence = occurrences.get(token) ?? 0;
+            occurrences.set(token, occurrence + 1);
+            const identity = this.rowIdentity(key, occurrence);
+            identities[i] = identity;
             let h;
             if (this.fixedRowHeight != null) {
                 h = this.fixedRowHeight;
             }
             else {
-                const key = this.keyOf(this.items[i], i);
-                liveKeys?.add(key);
-                h = this.measuredHeights.get(key) ?? DEFAULT_ROW_ESTIMATE_PX;
+                liveKeys?.add(identity);
+                h = this.measuredHeights.get(identity) ?? DEFAULT_ROW_ESTIMATE_PX;
             }
             offsets[i + 1] = offsets[i] + h; // safe: offsets[0] set above, offsets[i] written on the prior iteration
         }
         this.offsets = offsets;
+        this.rowIdentities = identities;
         this.itemsChangedPendingPrune = false;
         if (liveKeys) {
             for (const key of this.measuredHeights.keys()) {
@@ -589,10 +615,11 @@ export class LyraVirtualList extends LyraElement {
             const entry = entries[0];
             if (!entry)
                 return;
-            this.viewportHeight = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+            this.viewportHeight =
+                entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
         });
         this.containerResizeObserver.observe(base);
-        base.addEventListener('scroll', this.onScroll, { passive: true });
+        base.addEventListener("scroll", this.onScroll, { passive: true });
         // Queue a one-time read as a fast path for browsers that delay the first
         // ResizeObserver callback. It runs after firstUpdated() returns, so these
         // reactive writes do not schedule an update from inside Lit's lifecycle
@@ -623,24 +650,28 @@ export class LyraVirtualList extends LyraElement {
             return;
         }
         const current = new Map();
-        this.renderRoot.querySelectorAll('[part="row"]').forEach((el) => {
-            const index = Number(el.getAttribute('data-row-index'));
+        this.renderRoot
+            .querySelectorAll('[part="row"]')
+            .forEach((el) => {
+            const index = Number(el.getAttribute("data-row-index"));
             if (!Number.isInteger(index) || index < 0 || index >= this.items.length)
                 return;
-            const key = this.keyOf(this.items[index], index);
-            current.set(key, el);
-            this.observedRowKeys.set(el, key);
+            const identity = this.rowIdentities[index];
+            if (identity === undefined)
+                return;
+            current.set(identity, el);
+            this.observedRowKeys.set(el, identity);
             this.observedRowIndices.set(el, index);
         });
-        for (const [key, el] of this.observedRows) {
-            if (current.get(key) !== el) {
+        for (const [identity, el] of this.observedRows) {
+            if (current.get(identity) !== el) {
                 ro.unobserve(el);
-                this.observedRows.delete(key);
+                this.observedRows.delete(identity);
             }
         }
-        for (const [key, el] of current) {
-            if (!this.observedRows.has(key)) {
-                this.observedRows.set(key, el);
+        for (const [identity, el] of current) {
+            if (!this.observedRows.has(identity)) {
+                this.observedRows.set(identity, el);
                 ro.observe(el);
             }
         }
@@ -653,7 +684,7 @@ export class LyraVirtualList extends LyraElement {
         return this.renderStickyGroup ? this.stickyHeight : 0;
     }
     scrollActiveIntoView() {
-        if (this.activeId === '')
+        if (this.activeId === "")
             return;
         const index = this.items.findIndex((item, i) => Object.is(this.keyOf(item, i), this.activeId));
         if (index < 0)
@@ -675,7 +706,10 @@ export class LyraVirtualList extends LyraElement {
             target = bottom - base.clientHeight;
         if (target === null)
             return;
-        base.scrollTo({ top: Math.max(0, target), behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+        base.scrollTo({
+            top: Math.max(0, target),
+            behavior: prefersReducedMotion() ? "auto" : "smooth",
+        });
     }
     /**
      * Scrolls row `index` into view. `align` (default `'auto'`) chooses `'start'` (row's top edge
@@ -700,12 +734,16 @@ export class LyraVirtualList extends LyraElement {
         if (n === 0)
             return;
         const clamped = Math.min(n - 1, Math.max(0, Math.trunc(index)));
-        const align = options?.align ?? 'auto';
-        const behavior = prefersReducedMotion() ? 'auto' : (options?.behavior ?? 'smooth');
+        const align = options?.align ?? "auto";
+        const behavior = prefersReducedMotion()
+            ? "auto"
+            : options?.behavior ?? "smooth";
         this.performScrollTo(clamped, align, behavior);
         if (this.fixedRowHeight == null) {
-            const key = this.keyOf(this.items[clamped], clamped);
-            this.pendingScrollCorrection = this.measuredHeights.has(key) ? undefined : { key, align, behavior };
+            const identity = this.rowIdentities[clamped];
+            this.pendingScrollCorrection = this.measuredHeights.has(identity)
+                ? undefined
+                : { identity, align, behavior };
         }
         else {
             // Fixed row-height offsets are exact from the first render -- no
@@ -725,9 +763,9 @@ export class LyraVirtualList extends LyraElement {
         let target = null;
         // Only the top-edge alignments need the sticky inset -- `'end'` puts the row's *bottom* edge at
         // the viewport bottom, which the band never covers.
-        if (align === 'start')
+        if (align === "start")
             target = top - inset;
-        else if (align === 'end')
+        else if (align === "end")
             target = bottom - base.clientHeight;
         else if (top - inset < viewTop)
             target = top - inset;
@@ -739,10 +777,10 @@ export class LyraVirtualList extends LyraElement {
     }
     maybeCorrectPendingScroll() {
         const pending = this.pendingScrollCorrection;
-        if (!pending || !this.measuredHeights.has(pending.key))
+        if (!pending || !this.measuredHeights.has(pending.identity))
             return;
         this.pendingScrollCorrection = undefined;
-        const index = this.items.findIndex((item, i) => Object.is(this.keyOf(item, i), pending.key));
+        const index = this.rowIdentities.indexOf(pending.identity);
         if (index < 0)
             return;
         this.performScrollTo(index, pending.align, pending.behavior);
@@ -750,11 +788,12 @@ export class LyraVirtualList extends LyraElement {
     emitRangeChangeIfNeeded() {
         if (this.visibleEnd < this.visibleStart)
             return;
-        if (this.visibleStart === this.lastEmittedStart && this.visibleEnd === this.lastEmittedEnd)
+        if (this.visibleStart === this.lastEmittedStart &&
+            this.visibleEnd === this.lastEmittedEnd)
             return;
         this.lastEmittedStart = this.visibleStart;
         this.lastEmittedEnd = this.visibleEnd;
-        this.emit('lr-visible-range-changed', {
+        this.emit("lr-visible-range-changed", {
             start: this.visibleStart,
             end: this.visibleEnd,
         });
@@ -769,38 +808,41 @@ export class LyraVirtualList extends LyraElement {
         if (!this.hasMore || this.loading || !this.loadMoreArmed)
             return;
         this.loadMoreArmed = false;
-        this.emit('lr-load-more');
+        this.emit("lr-load-more");
     }
-    renderRow(item, index, total) {
+    renderRow(item, index, total, activeIndex) {
         const key = this.keyOf(item, index);
         const top = this.offsets[index] ?? 0;
-        const isActive = this.activeId !== '' && Object.is(key, this.activeId);
-        const isRowMode = this.itemRole === 'row';
+        const isActive = index === activeIndex;
+        const isRowMode = this.itemRole === "row";
         return html `
       <div
         part="row"
-        role=${isRowMode ? 'row' : 'listitem'}
+        role=${isRowMode ? "row" : "listitem"}
         data-row-key=${domKeyToken(key)}
         data-row-index=${index}
         aria-setsize=${isRowMode ? nothing : total}
         aria-posinset=${isRowMode ? nothing : index + 1}
-        aria-rowindex=${isRowMode ? index + 1 + this.safeRowIndexOffset : nothing}
-        aria-current=${isActive ? 'true' : nothing}
+        aria-rowindex=${isRowMode
+            ? index + 1 + this.safeRowIndexOffset
+            : nothing}
+        aria-current=${isActive ? "true" : "false"}
         style=${styleMap({ transform: `translateY(${top}px)` })}
       >
         ${this.renderItem(item, index)}
       </div>
     `;
     }
-    /** `groups`, minus entries whose `startIndex` is non-integer, out of range, or a duplicate of an
-     *  earlier entry's, in ascending `startIndex` order. Shared by the positioned markers and the
-     *  sticky overlay so both agree on exactly which groups exist and where. */
-    validGroups() {
+    /** Normalizes group definitions only when their inputs change. */
+    recomputeGroups() {
         const seen = new Set();
-        return (this.groups ?? [])
+        this.normalizedGroups = (this.groups ?? [])
             .filter((group) => {
             const index = group.startIndex;
-            if (!Number.isInteger(index) || index < 0 || index >= this.items.length || seen.has(index))
+            if (!Number.isInteger(index) ||
+                index < 0 ||
+                index >= this.items.length ||
+                seen.has(index))
                 return false;
             seen.add(index);
             return true;
@@ -808,18 +850,27 @@ export class LyraVirtualList extends LyraElement {
             .sort((a, b) => a.startIndex - b.startIndex);
     }
     renderGroups() {
-        return this.validGroups()
+        return (this.normalizedGroups
+            // A positioned marker outside the overscanned row window cannot be seen. Windowing it keeps
+            // one-group-per-row catalogs bounded by the same DOM ceiling as the rows themselves.
+            .filter((group) => group.startIndex >= this.renderStart &&
+            group.startIndex <= this.renderEnd)
             // An explicitly empty label means "anchor only" -- the host renders its own header for this
             // group (typically as a real row), so a marker here would duplicate it.
-            .filter((group) => group.label !== '')
+            .filter((group) => group.label !== "")
             .map((group) => html `
-          <div
-            part="group"
-            style=${styleMap({ transform: `translateY(${this.offsets[group.startIndex] ?? 0}px)` })}
-          >
-            ${group.label ?? String(group.key)}
-          </div>
-        `);
+            <div
+              part="group"
+              style=${styleMap({
+            transform: `translateY(${this.offsets[group.startIndex] ?? 0}px)`,
+        })}
+            >
+              ${group.label ??
+            (typeof group.key === "number"
+                ? getNumberFormat(this.effectiveLocale).format(group.key)
+                : group.key)}
+            </div>
+          `));
     }
     /** The group the viewport is currently inside -- the last one whose first row's offset is at or
      *  above the current scroll position -- plus how far the incoming group's header has already
@@ -830,15 +881,22 @@ export class LyraVirtualList extends LyraElement {
      * inset is sized from, and a band that only exists once it has first been shown would let the
      * very first `active-id`/`scrollToIndex` jump park its target underneath it. */
     currentStickyGroup() {
-        const groups = this.validGroups();
+        const groups = this.normalizedGroups;
         if (groups.length === 0)
             return null;
         const scrollTop = this.containerScrollTop;
+        let low = 0;
+        let high = groups.length - 1;
         let current = -1;
-        for (let i = 0; i < groups.length; i++) {
-            if (this.offsetForIndex(groups[i].startIndex) > scrollTop)
-                break; // safe: counted loop, i < groups.length
-            current = i;
+        while (low <= high) {
+            const middle = (low + high) >> 1;
+            if (this.offsetForIndex(groups[middle].startIndex) <= scrollTop) {
+                current = middle;
+                low = middle + 1;
+            }
+            else {
+                high = middle - 1;
+            }
         }
         if (current < 0)
             return { group: groups[0], shift: 0, active: false }; // safe: groups.length === 0 returned above
@@ -866,7 +924,9 @@ export class LyraVirtualList extends LyraElement {
         part="sticky-group"
         aria-hidden="true"
         ?data-inactive=${!state.active}
-        style=${state.shift !== 0 ? `transform:translateY(${state.shift}px)` : nothing}
+        style=${state.shift !== 0
+            ? `transform:translateY(${state.shift}px)`
+            : nothing}
       >
         ${render(state.group)}
       </div>
@@ -892,9 +952,11 @@ export class LyraVirtualList extends LyraElement {
         // stop is removed directly instead. A focusable *custom element* (one with `delegatesFocus`,
         // whose focusable node lives in its own shadow root) is beyond reach here -- a consumer
         // rendering one into the overlay gives it `tabindex="-1"` itself.
-        overlay.querySelectorAll(STICKY_FOCUSABLE_SELECTOR).forEach((node) => {
-            if (node.getAttribute('tabindex') !== '-1')
-                node.setAttribute('tabindex', '-1');
+        overlay
+            .querySelectorAll(STICKY_FOCUSABLE_SELECTOR)
+            .forEach((node) => {
+            if (node.getAttribute("tabindex") !== "-1")
+                node.setAttribute("tabindex", "-1");
         });
     }
     render() {
@@ -904,22 +966,31 @@ export class LyraVirtualList extends LyraElement {
         for (let i = this.renderStart; i <= this.renderEnd; i++) {
             windowed.push({ item: this.items[i], index: i });
         }
-        const isRowMode = this.itemRole === 'row';
+        const isRowMode = this.itemRole === "row";
         // Native keyboard/anchor scrolling gets the same treatment as the programmatic paths, from one
         // declaration -- and the attribute is absent entirely while there is no sticky layer.
         const stickyInset = this.stickyInset;
+        const activeIndex = this.activeId === ""
+            ? -1
+            : this.items.findIndex((item, index) => Object.is(this.keyOf(item, index), this.activeId));
         return html `
       <div
         part="base"
-        role=${isRowMode ? 'rowgroup' : 'list'}
+        role=${isRowMode ? "rowgroup" : "list"}
         tabindex="0"
-        style=${stickyInset > 0 ? `scroll-padding-block-start:${stickyInset}px` : nothing}
-        aria-label=${this.getAttribute('aria-label') || nothing}
-        aria-busy=${this.loading ? 'true' : nothing}
+        style=${stickyInset > 0
+            ? `scroll-padding-block-start:${stickyInset}px`
+            : nothing}
+        aria-label=${this.getAttribute("aria-label") || nothing}
+        aria-busy=${this.loading ? "true" : nothing}
       >
-        <div part="spacer" role=${isRowMode ? 'presentation' : nothing} style=${styleMap({ height: `${totalHeight}px` })}>
+        <div
+          part="spacer"
+          role=${isRowMode ? "presentation" : nothing}
+          style=${styleMap({ height: `${totalHeight}px` })}
+        >
           ${this.renderGroups()}
-          ${repeat(windowed, (w) => this.keyOf(w.item, w.index), (w) => this.renderRow(w.item, w.index, n))}
+          ${repeat(windowed, (w) => this.rowIdentities[w.index], (w) => this.renderRow(w.item, w.index, n, activeIndex))}
           ${this.renderStickyLayer()}
         </div>
       </div>
@@ -942,25 +1013,25 @@ __decorate([
     property({ attribute: false })
 ], LyraVirtualList.prototype, "renderStickyGroup", void 0);
 __decorate([
-    property({ attribute: 'row-height' })
+    property({ attribute: "row-height" })
 ], LyraVirtualList.prototype, "rowHeight", void 0);
 __decorate([
-    property({ attribute: 'item-role' })
+    property({ attribute: "item-role" })
 ], LyraVirtualList.prototype, "itemRole", void 0);
 __decorate([
-    property({ type: Number, attribute: 'row-index-offset' })
+    property({ type: Number, attribute: "row-index-offset" })
 ], LyraVirtualList.prototype, "rowIndexOffset", void 0);
 __decorate([
     property({ converter: overscanConverter })
 ], LyraVirtualList.prototype, "overscan", void 0);
 __decorate([
-    property({ attribute: 'active-id' })
+    property({ attribute: "active-id" })
 ], LyraVirtualList.prototype, "activeId", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraVirtualList.prototype, "loading", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'has-more', reflect: true })
+    property({ type: Boolean, attribute: "has-more", reflect: true })
 ], LyraVirtualList.prototype, "hasMore", void 0);
 __decorate([
     state()