@momentum-design/components 0.122.6 → 0.122.7

package/dist/components/virtualizedlist/virtualizedlist.component.js

@@ -9,145 +9,664 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { VirtualizerController } from '@tanstack/lit-virtual';
-import { property } from 'lit/decorators.js';
-import { createRef, ref } from 'lit/directives/ref.js';
-import { Component } from '../../models';
+import { property, eventOptions, query } from 'lit/decorators.js';
+import { defaultRangeExtractor } from '@tanstack/virtual-core';
+import List from '../list/list.component';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { Interval } from '../../utils/range';
+import { VirtualIndexArray } from '../../utils/virtualIndexArray';
+import { KEYS } from '../../utils/keys';
+import { LIFE_CYCLE_EVENTS } from '../../utils/mixins/lifecycle/lifecycle.contants';
 import styles from './virtualizedlist.styles';
 import { DEFAULTS } from './virtualizedlist.constants';
 /**
- * `mdc-virtualizedlist` component for creating custom virtualized lists.
- * IMPORTANT: This component does not create it's own list/list items.
- * Use the setlistdata callback prop to update client state in order to
- * Pass list/listitems as a child of this component, which this will virtuailze
- * This implementation handles dynamic lists as well as fixed sized lists.
+ * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using
+ * the Tanstack Virtual library.
+ *
+ * This component is thin wrapper around the Tanstack libray to provide additional funtionalities such as
+ * keyboard navigation, focus management, scroll anchoring and accessibility features.
+ *
  * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.
  *
+ * ## Setup
+ *
+ * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.
+ * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated
+ * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique
+ * keys for each item in the list.
+ *
+ * ### Render list items
+ *
+ * To keep the component framework-agnostic, the rendering of the list items is left to the consumer.
+ *
+ * We need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.
+ * The event detail contains the `virtualItems` array, which contains the information for the rendering.
+ * List items must have an `data-index` attribute, the indexes are in the `virtualItems` list.
+ *
+ * ## Best practices
+ *
+ * ### List updates
+ *
+ * Tanstack needs only the count of the items in the list and the size of each item to perform virtualization.
+ * List updates happens when
+ * - when `virtualizerProps` property of the component instance changes
+ * - when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)
+ * - when `component.visualiser.measure` called manually.
+ *
+ * ### Header
+ *
+ * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.
+ *
+ * ### Lists with dynamic content
+ *
+ * Unique keys for the list items are critical for dynamically changing list items or item's content.
+ * If the key change with the content it will cause scrollbar and content shuttering.
+ *
  * @tagname mdc-virtualizedlist
  *
  * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ * @event virtualitemschange - (React: onVirtualItemsChange) Event that gets called when the virtual items change.
  *
- * @slot - Client side List with nested list items.
+ * @slot default - This is a default/unnamed slot, where listitems can be placed.
+ * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.
  *
  * @csspart container - The container of the virtualized list.
  * @csspart scroll - The scrollable area of the virtualized list.
  */
-class VirtualizedList extends Component {
+class VirtualizedList extends DataAriaLabelMixin(List) {
+    /**
+     * The current virtual items being rendered.
+     */
+    get virtualItems() {
+        var _a, _b;
+        return (_b = (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.getVirtualItems()) !== null && _b !== void 0 ? _b : [];
+    }
+    /**
+     * @internal
+     */
+    get navItems() {
+        var _a, _b, _c, _d;
+        if (((_a = this.virtualizedNavItems) === null || _a === void 0 ? void 0 : _a.items) !== super.navItems) {
+            const attrName = (_d = (_c = (_b = this.virtualizer) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.indexAttribute) !== null && _d !== void 0 ? _d : 'data-index';
+            this.virtualizedNavItems = new VirtualIndexArray(super.navItems, e => Number(e.getAttribute(attrName)), () => this.virtualizerProps.count);
+        }
+        return this.virtualizedNavItems;
+    }
+    /**
+     * Getter for atBottom
+     * @internal
+     */
+    get atBottom() {
+        return this.atBottomValue;
+    }
+    /**
+     * Setter for atBottom to handle side effects when the value changes.
+     * @param value - new value for atBottom
+     *
+     * @internal
+     */
+    set atBottom(value) {
+        if (this.atBottomValue !== value || (value === 'yes' && this.atBottomTimer === -1)) {
+            this.atBottomValue = value;
+            if (value === 'yes') {
+                this.scrollToBottom();
+            }
+            else {
+                this.clearScrollToBottomTimer();
+            }
+        }
+    }
+    /**
+     * The total height of the list based on the virtualizer's calculations.
+     * @internal
+     */
+    get totalListHeight() {
+        var _a, _b;
+        return (_b = (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.getTotalSize()) !== null && _b !== void 0 ? _b : 0;
+    }
     constructor() {
         super();
         /**
          * Object that sets and updates the virtualizer with any relevant props.
-         * There are two required object props in order to get virtualization to work properly.
-         * count - The length of your list that you are virtualizing.
+         * There are three required object props in order to get virtualization to work properly.
+         *
+         * **count** - The length of your list that you are virtualizing.
          * As your list grows/shrinks, this component must be updated with the appropriate value
          * (Same with any other updated prop).
-         * estimateSize - A function that returns the estimated size of your items.
+         *
+         * **estimateSize** - A function that returns the estimated size of your items.
          * If your list is fixed, this will just be the size of your items.
          * If your list is dynamic, try to return approximate the size of each item.
          *
+         * **getItemKey** - A function that returns a unique key for each item in your list based on its index.
+         *
          * A full list of possible props can be in
          * [Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)
          *
          */
         this.virtualizerProps = DEFAULTS.VIRTUALIZER_PROPS;
-        this.scrollElementRef = createRef();
-        this.virtualItems = [];
+        /**
+         * Whether to loop navigation when reaching the end of the list.
+         * If 'true', pressing the down arrow on the last item will focus the first item,
+         * and pressing the up arrow on the first item will focus the last item.
+         * If 'false', navigation will stop at the first or last item.
+         *
+         * @default 'false'
+         */
+        this.loop = DEFAULTS.LOOP;
+        /**
+         * Enable automatic scroll anchoring when the list size changes.
+         * By default, list does not scroll to the very end it keeps the scroll position otherwise
+         * it try hold the scroll position on the last selected when list updates.
+         *
+         * It is handy when list size or list item sizes change dynamically (e.g., incoming messages in a chat app).
+         *
+         * @default false
+         */
+        this.scrollAnchoring = DEFAULTS.SCROLL_ANCHORING;
+        /**
+         * When true, the list will observe size changes of its items and re-measure them as needed.
+         * This is useful if your list items can change size dynamically (e.g., due to content changes or window resizing).
+         */
+        this.observeSizeChanges = false;
+        /**
+         * When true, the list items will be aligned to the bottom of the list, and it anchors scroll to the bottom
+         * until the first user scroll interaction.
+         *
+         * Note: It does not affect on the rendering order, the first item is still at the top of the list.
+         */
+        this.revertList = false;
+        /**
+         * The maximum gap (in pixels) between the very bottom of the list end the current scroll positioning
+         * It is used to calculate scroll anchoring.
+         */
+        this.atBottomThreshold = DEFAULTS.IS_AT_BOTTOM_THRESHOLD;
+        /**
+         * The virtualizer instance created by the VirtualizerController.
+         */
+        this.virtualizer = null;
+        /**
+         * @internal
+         */
+        this.virtualizedNavItems = null;
+        /**
+         * @internal
+         */
+        this.virtualizerController = null;
+        /**
+         * The currently selected index in the list.
+         * If keyboard navigation is being used, this will be the focused item.
+         * If the list is clicked, this will be the last clicked item.
+         * @internal
+         */
+        this.selectedIndex = this.initialFocus;
+        /**
+         * The key of the currently selected item.
+         * This is used to keep track where the selected item goes when the list changes size.
+         * @internal
+         */
+        this.selectedKey = null;
+        /**
+         * The index of the first item in the current virtual items.
+         * @internal
+         */
+        this.firstIndex = 0;
+        /**
+         * The key of the first item in the current virtual items.
+         * @internal
+         */
+        this.firstKey = null;
+        /**
+         * The indexes of items that are not in the current virtual items, but need to be rendered for focus purposes.
+         * @internal
+         */
+        this.hiddenIndexes = [];
+        /**
+         * Is the scroll position at the bottom of the list?
+         *
+         * - 'no' - The scroll position is not at the bottom of the list.
+         * - 'yes' - The scroll position is at the bottom of the list.
+         * - 're-evaluate' - The scroll position needs to be re-evaluated on the next scroll event.
+         * @internal
+         */
+        this.atBottomValue = 'no';
+        /**
+         * rAF ID for the scroll to bottom action when atBottom is 'yes'.
+         * @internal
+         */
+        this.atBottomTimer = -1;
+        /**
+         * Last recorded scroll position to help determine scroll direction.
+         * @internal
+         */
+        this.lastScrollPosition = 0;
+        /**
+         * List of functions executed aster the virtualizer finishes scrolling.
+         * @internal
+         */
+        this.endOfScrollQueue = [];
+        this.handleElementFirstUpdateCompleted = (event) => {
+            var _a, _b;
+            if (this.observeSizeChanges && this.navItems.find(el => el === event.target) !== undefined) {
+                (_b = (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.measureElement) === null || _b === void 0 ? void 0 : _b.call(_a, event.target);
+            }
+        };
+        this.addEventListener('wheel', this.handleWheelEvent.bind(this));
+        this.addEventListener(LIFE_CYCLE_EVENTS.FIRST_UPDATE_COMPLETED, this.handleElementFirstUpdateCompleted.bind(this));
+    }
+    /**
+     * Create the virtualizer controller and the virtualizer instance when the component is first connected to the DOM.
+     */
+    connectedCallback() {
+        this.virtualizerController = new VirtualizerController(this, {
+            ...this.virtualizerProps,
+            horizontal: false,
+            getScrollElement: () => this.scrollRef,
+            onChange: this.onVListStateChangeHandler.bind(this),
+            rangeExtractor: this.virtualizerRangeExtractor.bind(this),
+        });
+        this.virtualizer = this.virtualizerController.getVirtualizer();
+        super.connectedCallback();
+        // Set the role attribute for accessibility.
+        this.role = null;
+        this.atBottom = this.revertList && this.scrollAnchoring ? 'yes' : 'no';
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.clearScrollToBottomTimer();
         this.virtualizerController = null;
         this.virtualizer = null;
-        this.setlistdata = null;
-        this.onscroll = null;
     }
     /**
      * This override is necessary to update the virtualizer with relevant props
      * if the client updates any props (most commonly, count). Updating the options
      * this way ensures we don't initialize a new virtualizer upon very prop change.
      */
-    update(changedProperties) {
+    async update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.get('virtualizerProps')) {
-            this.setVirtualizerOptions();
+        if (changedProperties.has('virtualizerProps')) {
+            await this.handleVirtualizerPropsUpdate(changedProperties.get('virtualizerProps'));
+        }
+        if (changedProperties.has('observeSizeChanges')) {
+            this.navItems.forEach(item => {
+                var _a, _b;
+                if (this.observeSizeChanges) {
+                    (_b = (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.measureElement) === null || _b === void 0 ? void 0 : _b.call(_a, item);
+                }
+            });
+        }
+        if (changedProperties.has('scrollAnchoring')) {
+            if (this.scrollAnchoring) {
+                this.checkAtBottom();
+            }
+            else {
+                this.atBottom = 'no';
+            }
+        }
+        if (changedProperties.has('revertList') && this.revertList && this.scrollAnchoring) {
+            this.atBottom = 'yes';
+        }
+        if (changedProperties.has('atBottomThreshold') && this.scrollAnchoring) {
+            this.checkAtBottom();
+        }
+    }
+    /**
+     * Handles updates to the virtualizerProps property.
+     * @param prevProps - The previous virtualizerProps before the update.
+     * @internal
+     */
+    async handleVirtualizerPropsUpdate(prevProps) {
+        var _a, _b;
+        const { virtualizer } = this;
+        if (!virtualizer)
+            return;
+        const prevMeasurements = virtualizer.measurementsCache.slice();
+        virtualizer.setOptions({
+            ...virtualizer.options,
+            ...this.virtualizerProps,
+        });
+        // Change in the length of the dataset is, does not count as TanStack Virtual's internal state change
+        // so we need to manually call the onChange handler to ensure the list updates correctly.
+        if (this.virtualizerProps.count !== (prevProps === null || prevProps === void 0 ? void 0 : prevProps.count)) {
+            this.emitChangeEvent();
+            this.syncUI();
+        }
+        if (this.scrollAnchoring && prevMeasurements.length > 0) {
+            const countDiff = Math.abs(this.virtualizerProps.count - ((_a = prevProps === null || prevProps === void 0 ? void 0 : prevProps.count) !== null && _a !== void 0 ? _a : 0));
+            const prevSelectedIndex = this.selectedIndex;
+            const prevFirstKey = this.firstKey;
+            const searchRange = new Interval(prevSelectedIndex - countDiff, prevSelectedIndex + countDiff, {
+                includeEnd: true,
+            });
+            const newSelectedIndex = (_b = Array.from(searchRange).find(i => virtualizer.options.getItemKey(i) === this.selectedKey)) !== null && _b !== void 0 ? _b : this.selectedIndex;
+            this.setSelectedIndex(newSelectedIndex);
+            // Wait for the virtualizer to finish updating before we read the new scrollHeight
+            this.requestUpdate();
+            await this.updateComplete;
+            if (this.atBottom === 'yes') {
+                this.scrollToBottom();
+                return;
+            }
+            // If the user has focus within the list, use the selected index as the anchor point for scroll adjustment.
+            // If the user does not have focus within the list, use the first visible item as the anchor point for scroll adjustment.
+            const shouldAdjustScroll = (this.focusWithin && prevSelectedIndex !== this.selectedIndex) ||
+                (!this.focusWithin && this.firstKey !== prevFirstKey);
+            // Update the scroll position to keep the same items in view (and in roughly the same position)
+            if (shouldAdjustScroll) {
+                const scrollDiff = virtualizer.measurementsCache[this.selectedIndex].end - prevMeasurements[prevSelectedIndex].end;
+                this.scrollRef.scrollTop += scrollDiff;
+            }
         }
     }
     /**
-     * This is needed in order to ensure the initial render happens
+     * Sets the initial focus of the list based on the `initial-focus` prop and scrolls the item into view.
      */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.setVirtualizerOptions();
+    setInitialFocus() {
+        setTimeout(async () => {
+            if (!this.virtualizer)
+                return;
+            const { scrollToIndex } = this.virtualizer;
+            this.setSelectedIndex(this.initialFocus);
+            if (this.selectedIndex >= this.navItems.length) {
+                return;
+            }
+            scrollToIndex(this.selectedIndex, { align: 'center' });
+            // We try to set the tabIndex immediately,
+            // but if the items haven't been rendered, yet we leave the work to onValidElementAdded
+            const selectedElement = this.navItems.find(this.isElementSelected, this);
+            if (selectedElement) {
+                this.resetTabIndexes(this.selectedIndex, false);
+            }
+        }, 0);
+    }
+    emitChangeEvent() {
+        var _a, _b, _c, _d, _e;
+        (_b = (_a = this.virtualizerProps).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.virtualizer, this.virtualizer.isScrolling);
+        const eventDetails = {
+            virtualizer: this.virtualizer,
+            virtualItems: (_e = (_d = (_c = this.virtualizer) === null || _c === void 0 ? void 0 : _c.getVirtualItems) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : [],
+        };
+        this.dispatchEvent(new CustomEvent('virtualitemschange', { detail: eventDetails, bubbles: false, cancelable: false }));
     }
     /**
+     * Calculates the array of indexes to render. We add the selected index (and +1/-1) if it's
+     * outside the current range so the focus can be kept correctly.
+     *
+     * @param range - The current range of items being rendered
+     * @returns An array of indexes to render, including the selected index if it's outside the current range.
      * @internal
-     * Update virtuailzer with the union of the two virtualizer options (current, passed in).
      */
-    setVirtualizerOptions() {
-        var _a;
-        (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.setOptions({ ...this.virtualizer.options, ...this.virtualizerProps });
-        this.requestUpdate();
+    virtualizerRangeExtractor(range) {
+        var _a, _b, _c, _d;
+        const { navItems, virtualizerProps, virtualizer } = this;
+        const defaultIndexes = (_b = (_a = virtualizerProps.rangeExtractor) === null || _a === void 0 ? void 0 : _a.call(virtualizerProps, range)) !== null && _b !== void 0 ? _b : defaultRangeExtractor(range);
+        this.hiddenIndexes.forEach(index => {
+            const el = navItems.at(index);
+            if (el) {
+                el.removeAttribute('data-virtualized-hidden');
+                el.style.removeProperty('--mdc-virtualizedlist-hidden-top');
+            }
+        });
+        this.firstIndex = range.startIndex;
+        this.firstKey = (_d = (_c = this.virtualizer) === null || _c === void 0 ? void 0 : _c.options.getItemKey(this.firstIndex)) !== null && _d !== void 0 ? _d : null;
+        this.hiddenIndexes.length = 0;
+        const stickyIndexes = [this.selectedIndex - 1, this.selectedIndex, this.selectedIndex + 1];
+        stickyIndexes.forEach(index => {
+            var _a;
+            if (!defaultIndexes.includes(index)) {
+                if (index < range.startIndex && index >= 0) {
+                    defaultIndexes.unshift(index);
+                    this.hiddenIndexes.push(index);
+                }
+                if (index > range.endIndex && index < ((_a = virtualizer === null || virtualizer === void 0 ? void 0 : virtualizer.options.count) !== null && _a !== void 0 ? _a : 0)) {
+                    defaultIndexes.push(index);
+                    this.hiddenIndexes.push(index);
+                }
+            }
+        });
+        this.updateHiddenItemsPosition();
+        defaultIndexes.sort((a, b) => a - b);
+        return defaultIndexes;
     }
-    connectedCallback() {
-        var _a;
-        this.virtualizerController = new VirtualizerController(this, {
-            count: this.virtualizerProps.count,
-            estimateSize: (_a = this.virtualizerProps) === null || _a === void 0 ? void 0 : _a.estimateSize,
-            getScrollElement: () => this.scrollElementRef.value || null,
-            ...this.virtualizerProps,
+    /** @internal */
+    updateHiddenItemsPosition() {
+        const { navItems, virtualizerProps, virtualizer } = this;
+        if (!virtualizer || virtualizerProps.count === 0)
+            return;
+        const { measurementsCache, range } = virtualizer;
+        this.hiddenIndexes.forEach(index => {
+            var _a;
+            const el = navItems.at(index);
+            if (el) {
+                const first = measurementsCache[(_a = range === null || range === void 0 ? void 0 : range.startIndex) !== null && _a !== void 0 ? _a : 0];
+                const current = measurementsCache[index];
+                el.setAttribute('data-virtualized-hidden', 'true');
+                el.style.setProperty('--mdc-virtualizedlist-hidden-top', `${current.start - first.start}px`);
+            }
         });
-        super.connectedCallback();
+    }
+    /** @internal */
+    isElementSelected(item) {
+        var _a;
+        return ((_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.indexFromElement(item)) === this.selectedIndex;
+    }
+    /** @internal */
+    setSelectedIndex(newIndex) {
+        if (this.virtualizer) {
+            const { count, getItemKey } = this.virtualizer.options;
+            this.selectedIndex = Math.max(0, Math.min(count - 1, newIndex));
+            this.selectedKey = getItemKey(newIndex);
+            if (this.scrollAnchoring && this.selectedIndex + 1 === count) {
+                this.atBottom = 'yes';
+            }
+        }
+    }
+    onElementStoreUpdate(item, changeType) {
+        if (changeType === 'added') {
+            const tabable = this.isElementSelected(item);
+            // eslint-disable-next-line no-param-reassign
+            item.tabIndex = tabable ? 0 : -1;
+            this.setAriaSetSize(item);
+        }
+        else if (changeType === 'removed') {
+            if (item.tabIndex === 0) {
+                // We must queue the reset because onElementStoreUpdate called before the `navItems` updated,
+                // but `resetTabIndexes` expecting the updated virtual list.
+                queueMicrotask(() => {
+                    this.resetTabIndexes(this.selectedIndex, this.focusWithin);
+                });
+            }
+        }
     }
     /**
+     * Handle the virtualizer's onChange event to emit the virtualitemschange event
+     * This is called when the internal state of the virtualizer changes.
+     *
      * @internal
-     * Renders the list wrapper and invokes the callback which eventually will render in the slot.
-     * Uses getTotalSize to update the height of the wrapper. This value is equal to the total size
-     * OR the total estimated size (if you haven't physically scrolled the entire list)
-     * Passes the virtualItems, measureElement, and listStyle to callback for client to pass in as child
+     */
+    async onVListStateChangeHandler(_, isScrolling) {
+        this.syncUI();
+        // Request an update, this is in Tanstack's VirtualizerController but gets overridden when updating the
+        // virtualizer's options therefore we need to call it here ourselves.
+        await this.updateComplete;
+        this.requestUpdate();
+        if (!isScrolling && this.endOfScrollQueue.length > 0) {
+            this.endOfScrollQueue.forEach(fn => fn());
+            this.endOfScrollQueue.length = 0;
+        }
+        this.checkAtBottom();
+        this.emitChangeEvent();
+    }
+    /**
+     * Refires the scroll event from the internal scroll container to the host element.
+     * Also updates whether the scroll is at the bottom of the list for scroll anchoring purposes.
      *
-     * @returns The template result containing the list wrapper.
+     * @internal
      */
-    getVirtualizedListWrapper(virtualizerController) {
+    onScrollHandler(event) {
+        const scrollEl = event.target;
+        // Skip the current Scroll event to prevent shattering
+        if (this.atBottom === 're-evaluate' || scrollEl.scrollTop < this.lastScrollPosition) {
+            this.atBottom = 'no';
+        }
+        else {
+            // Check if we are at the bottom of the list
+            this.checkAtBottom();
+        }
+        this.lastScrollPosition = scrollEl.scrollTop;
+    }
+    checkAtBottom() {
+        const { clientHeight, scrollHeight, scrollTop } = this.scrollRef;
+        if (this.scrollAnchoring &&
+            this.virtualizer &&
+            this.atBottom === 'no' &&
+            scrollHeight > clientHeight - this.atBottomThreshold &&
+            !this.virtualizer.isScrolling) {
+            this.atBottom = scrollHeight - scrollTop <= clientHeight + this.atBottomThreshold ? 'yes' : 'no';
+        }
+    }
+    handleNavigationKeyDown(event) {
+        var _a, _b, _c, _d;
+        switch (event.key) {
+            case KEYS.HOME: {
+                // Move focus to the first item
+                (_b = (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.scrollToIndex) === null || _b === void 0 ? void 0 : _b.call(_a, 0, { align: 'start' });
+                this.endOfScrollQueue.push(() => this.resetTabIndexes(0));
+                break;
+            }
+            case KEYS.END: {
+                // Move focus to the last item
+                const selectedItem = this.virtualizerProps.count - 1;
+                (_d = (_c = this.virtualizer) === null || _c === void 0 ? void 0 : _c.scrollToIndex) === null || _d === void 0 ? void 0 : _d.call(_c, selectedItem, { align: 'end' });
+                this.endOfScrollQueue.push(() => this.resetTabIndexes(selectedItem));
+                break;
+            }
+            case KEYS.ARROW_UP: {
+                this.atBottom = 're-evaluate';
+                break;
+            }
+            default:
+        }
+        super.handleNavigationKeyDown(event);
+    }
+    resetTabIndexes(index, focusElement = true) {
+        super.resetTabIndexes(index, focusElement);
+        this.setSelectedIndex(index);
+    }
+    resetTabIndexAndSetFocus(newIndex, oldIndex, focusNewItem) {
+        const elementToFocus = this.navItems.find(element => { var _a; return ((_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.indexFromElement(element)) === newIndex; });
+        if (elementToFocus === undefined) {
+            this.scrollToIndex(newIndex, {});
+            this.endOfScrollQueue.push(() => {
+                super.resetTabIndexAndSetFocus(newIndex, oldIndex, focusNewItem);
+                this.setSelectedIndex(newIndex);
+            });
+            return;
+        }
+        super.resetTabIndexAndSetFocus(newIndex, oldIndex, focusNewItem);
+        this.setSelectedIndex(newIndex);
+    }
+    /** @internal */
+    setAriaSetSize(element) {
         var _a, _b;
-        this.virtualizer = virtualizerController.getVirtualizer();
-        const { getTotalSize, getVirtualItems, measureElement } = this.virtualizer;
-        const newVirtualItems = getVirtualItems();
-        // Only update client if there's a difference in virtual items
-        if (newVirtualItems !== this.virtualItems) {
-            this.virtualItems = newVirtualItems;
-            const virtualItems = getVirtualItems();
-            // this style is required to be rendered by the client side list in order to handle scrolling properly
-            const listStyle = {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)`,
-            };
-            // pass back data to client for rendering
-            if (this.setlistdata) {
-                this.setlistdata({ virtualItems, measureElement, listStyle });
-            }
-        }
-        return html `<div part="container" style="height: ${getTotalSize()}px;">
-      <slot></slot>
-    </div>`;
+        element.setAttribute('aria-setsize', `${(_b = (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.options.count) !== null && _b !== void 0 ? _b : -1}`);
     }
     /**
-     * Refires the scroll event from the internal scroll container to the host element
+     * Scrolls to the bottom of the list if `atBottom` is 'yes'.
+     * @internal
      */
-    handleScroll(event) {
-        const EventConstructor = event.constructor;
-        this.dispatchEvent(new EventConstructor(event.type, event));
+    scrollToBottom() {
+        this.clearScrollToBottomTimer();
+        if (this.atBottom === 'yes' && this.scrollRef) {
+            const { clientHeight, scrollHeight, scrollTop } = this.scrollRef;
+            if (this.totalListHeight > clientHeight) {
+                this.scrollRef.scrollTop += scrollHeight - clientHeight - scrollTop;
+            }
+            this.atBottomTimer = requestAnimationFrame(this.scrollToBottom.bind(this));
+        }
+    }
+    clearScrollToBottomTimer() {
+        cancelAnimationFrame(this.atBottomTimer);
+        this.atBottomTimer = -1;
+    }
+    scrollToIndex(index, options) {
+        var _a, _b;
+        (_b = (_a = this.virtualizer).scrollToIndex) === null || _b === void 0 ? void 0 : _b.call(_a, index, options);
+        this.atBottom = this.scrollAnchoring && index + 1 === this.virtualizerProps.count ? 'yes' : 'no';
+    }
+    syncUI() {
+        var _a;
+        const visibleItems = this.virtualItems.find(({ index }) => !this.hiddenIndexes.includes(index));
+        const firstItemOffset = (_a = visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.start) !== null && _a !== void 0 ? _a : 0;
+        window.getComputedStyle(this);
+        let initialOffset = 0;
+        if (this.revertList) {
+            if (this.scrollRef.clientHeight >= this.totalListHeight) {
+                initialOffset = this.scrollRef.clientHeight - this.totalListHeight;
+            }
+        }
+        this.wrapperRef.style.height = `${this.totalListHeight}px`;
+        this.containerRef.style.transform = `translateY(${initialOffset + firstItemOffset}px)`;
+    }
+    handleWheelEvent(e) {
+        if (e.deltaY < 0)
+            this.atBottom = 're-evaluate';
     }
     render() {
-        return html `<div ${ref(this.scrollElementRef)} part="scroll" @scroll=${this.handleScroll}>
-      ${this.virtualizerController ? this.getVirtualizedListWrapper(this.virtualizerController) : html ``}
-    </div>`;
+        var _a;
+        return html `
+      <slot name="list-header"></slot>
+      <div part="scroll" tabindex="-1" @scroll="${this.onScrollHandler}">
+        <div part="wrapper">
+          <div part="container" role="list" aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}">
+            <slot role="presentation"></slot>
+          </div>
+        </div>
+      </div>
+    `;
     }
 }
-VirtualizedList.styles = [...Component.styles, ...styles];
+VirtualizedList.styles = [...List.styles, ...styles];
 __decorate([
-    property({ type: Object, attribute: 'virtualizerprops' }),
+    property({ type: Object }),
     __metadata("design:type", Object)
 ], VirtualizedList.prototype, "virtualizerProps", void 0);
 __decorate([
-    property({ type: Function, attribute: 'setlistdata' }),
-    __metadata("design:type", Object)
-], VirtualizedList.prototype, "setlistdata", void 0);
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], VirtualizedList.prototype, "loop", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'scroll-anchoring', reflect: true }),
+    __metadata("design:type", Boolean)
+], VirtualizedList.prototype, "scrollAnchoring", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'observe-size-changes' }),
+    __metadata("design:type", Boolean)
+], VirtualizedList.prototype, "observeSizeChanges", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'revert-list' }),
+    __metadata("design:type", Boolean)
+], VirtualizedList.prototype, "revertList", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'at-bottom-threshold' }),
+    __metadata("design:type", Number)
+], VirtualizedList.prototype, "atBottomThreshold", void 0);
+__decorate([
+    query('[part="scroll"]', true),
+    __metadata("design:type", HTMLElement)
+], VirtualizedList.prototype, "scrollRef", void 0);
+__decorate([
+    query('[part="wrapper"]', true),
+    __metadata("design:type", HTMLElement)
+], VirtualizedList.prototype, "wrapperRef", void 0);
+__decorate([
+    query('[part="container"]', true),
+    __metadata("design:type", HTMLElement)
+], VirtualizedList.prototype, "containerRef", void 0);
+__decorate([
+    eventOptions({ passive: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], VirtualizedList.prototype, "onScrollHandler", null);
 export default VirtualizedList;