@momentum-design/components 0.122.5 → 0.122.7

package/dist/components/virtualizedlist/virtualizedlist.constants.d.ts

@@ -1,9 +1,12 @@
-declare const TAG_NAME: "mdc-virtualizedlist";
-declare const VIRTUALIZED_WRAPPER_TAG_NAME: "mdc-virtualizedwrapper";
-declare const DEFAULTS: {
+export declare const TAG_NAME: "mdc-virtualizedlist";
+export declare const VIRTUALIZED_WRAPPER_TAG_NAME: "mdc-virtualizedwrapper";
+export declare const DEFAULTS: {
     readonly VIRTUALIZER_PROPS: {
         readonly count: 0;
         readonly estimateSize: () => number;
+        readonly getItemKey: (index: number) => number;
     };
+    readonly LOOP: "false";
+    readonly SCROLL_ANCHORING: false;
+    readonly IS_AT_BOTTOM_THRESHOLD: 16;
 };
-export { TAG_NAME, DEFAULTS, VIRTUALIZED_WRAPPER_TAG_NAME };

package/dist/components/virtualizedlist/virtualizedlist.constants.js

@@ -1,10 +1,13 @@
 import utils from '../../utils/tag-name';
-const TAG_NAME = utils.constructTagName('virtualizedlist');
-const VIRTUALIZED_WRAPPER_TAG_NAME = utils.constructTagName('virtualizedwrapper');
-const DEFAULTS = {
+export const TAG_NAME = utils.constructTagName('virtualizedlist');
+export const VIRTUALIZED_WRAPPER_TAG_NAME = utils.constructTagName('virtualizedwrapper');
+export const DEFAULTS = {
     VIRTUALIZER_PROPS: {
         count: 0,
         estimateSize: () => 0,
+        getItemKey: (index) => index,
     },
+    LOOP: 'false',
+    SCROLL_ANCHORING: false,
+    IS_AT_BOTTOM_THRESHOLD: 16,
 };
-export { TAG_NAME, DEFAULTS, VIRTUALIZED_WRAPPER_TAG_NAME };

package/dist/components/virtualizedlist/virtualizedlist.styles.js

@@ -1,14 +1,28 @@
 import { css } from 'lit';
 const styles = [
     css `
+    :host {
+      height: 100%;
+    }
+
     :host::part(scroll) {
       height: 100%;
       width: 100%;
       overflow-y: auto;
+      scroll-padding: 0.25rem 0;
+      contain: strict;
+      overflow-anchor: none;
+      scrollbar-gutter: stable;
     }
-    :host::part(container) {
-      position: relative;
-      width: 100%;
+
+    :host::part(wrapper) {
+      padding: 0 0.25rem;
+    }
+
+    ::slotted([data-virtualized-hidden]) {
+      position: absolute !important;
+      top: var(--mdc-virtualizedlist-hidden-top) !important;
+      left: 0 !important;
     }
   `,
 ];

package/dist/components/virtualizedlist/virtualizedlist.types.d.ts

@@ -1,15 +1,17 @@
-import { VirtualItem, VirtualizerOptions } from '@tanstack/virtual-core';
-import { StyleInfo } from 'lit/directives/style-map.js';
+import type { VirtualItem as TanstackVirtualItem, Virtualizer as TanstackVirtualizer, VirtualizerOptions as TanstackVirtualizerOptions } from '@tanstack/virtual-core';
 import type { TypedCustomEvent } from '../../utils/types';
 import type VirtualizedList from './virtualizedlist.component';
-interface SetListDataProps {
+export type VirtualItem = TanstackVirtualItem;
+export type VirtualizedListScrollEvent = TypedCustomEvent<VirtualizedList>;
+export type VirtualizedListVirtualItemsChangeEvent = TypedCustomEvent<VirtualizedList, {
     virtualItems: Array<VirtualItem>;
-    measureElement: (node: Element | null | undefined) => void;
-    listStyle: Readonly<StyleInfo>;
-}
-type VirtualizedListScrollEvent = TypedCustomEvent<VirtualizedList>;
-interface Events {
+}>;
+export type VirtualData = VirtualizedListVirtualItemsChangeEvent['detail'];
+export interface Events {
     onScrollEvent: VirtualizedListScrollEvent;
+    onVirtualItemsChangeEvent: VirtualizedListVirtualItemsChangeEvent;
 }
-type VirtualizerProps = Partial<VirtualizerOptions<Element, Element>>;
-export type { Events, VirtualizedListScrollEvent, VirtualizerProps, SetListDataProps };
+export type Virtualizer = TanstackVirtualizer<Element, Element>;
+export type VirtualizerOptions = TanstackVirtualizerOptions<Element, Element>;
+export type VirtualizerProps = Omit<Partial<VirtualizerOptions>, 'getScrollElement'> & Required<Pick<VirtualizerOptions, 'count' | 'estimateSize' | 'getItemKey'>>;
+export type AtBottomValue = 'no' | 'yes' | 're-evaluate';

package/dist/components/virtualizedlist/virtualizedlist.utils.d.ts

@@ -0,0 +1,11 @@
+import { measureElement } from '@tanstack/virtual-core';
+/**
+ * A custom measureElement function that uses cached measurements when scrolling up to prevent stuttering.
+ *
+ * Solve [Scrolling up with dynamic heights stutters and jumps](https://github.com/TanStack/virtual/issues/659#issuecomment-2915244925)
+ *
+ * @param element - The DOM element to measure.
+ * @param entry - The ResizeObserverEntry for the element.
+ * @param instance - The virtualizer instance.
+ */
+export declare const defaultMeasureElement: typeof measureElement;

package/dist/components/virtualizedlist/virtualizedlist.utils.js

@@ -0,0 +1,23 @@
+import { measureElement } from '@tanstack/virtual-core';
+/**
+ * A custom measureElement function that uses cached measurements when scrolling up to prevent stuttering.
+ *
+ * Solve [Scrolling up with dynamic heights stutters and jumps](https://github.com/TanStack/virtual/issues/659#issuecomment-2915244925)
+ *
+ * @param element - The DOM element to measure.
+ * @param entry - The ResizeObserverEntry for the element.
+ * @param instance - The virtualizer instance.
+ */
+export const defaultMeasureElement = (element, entry, instance) => {
+    var _a;
+    const direction = instance.scrollDirection;
+    if (!(direction === 'forward' || direction === null)) {
+        // When scrolling up, use cached measurement to prevent stuttering
+        const indexKey = Number(element.getAttribute('data-index'));
+        const cachedMeasurement = (_a = instance.measurementsCache[indexKey]) === null || _a === void 0 ? void 0 : _a.size;
+        if (cachedMeasurement) {
+            return cachedMeasurement;
+        }
+    }
+    return measureElement(element, entry, instance);
+};