npm - @snack-uikit/list - Versions diffs - 0.22.2 → 0.22.3-preview-0ee176c6.0 - Mend

@snack-uikit/list 0.22.2 → 0.22.3-preview-0ee176c6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js CHANGED Viewed

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ListPrivate = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_virtual_1 = require("@tanstack/react-virtual");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const loaders_1 = require("@snack-uikit/loaders");
@@ -68,6 +69,7 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
     value,
     isSelectionSingle
   } = (0, contexts_1.useSelectionContext)();
+  const innerScrollRef = (0, react_1.useRef)(null);
   const itemsJSX = (0, Items_1.useRenderItems)(items);
   const itemsPinTopJSX = (0, Items_1.useRenderItems)(pinTop);
   const itemsPinBottomJSX = (0, Items_1.useRenderItems)(pinBottom);
@@ -77,6 +79,12 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
     errorDataState
   });
   const hasNoItems = items.length === 0;
+  const virtualizer = (0, react_virtual_1.useVirtualizer)({
+    count: itemsJSX.length,
+    getScrollElement: () => scroll ? innerScrollRef.current : null,
+    estimateSize: () => size === 'm' ? 40 : 32
+  });
+  const virtualItems = virtualizer.getVirtualItems();
   const loadingJSX = (0, react_1.useMemo)(() => loading && (0, jsx_runtime_1.jsx)("div", {
     role: 'spinbutton',
     tabIndex: -1,
@@ -88,18 +96,42 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       size: size === 'l' ? 's' : 'xs'
     })
   }), [hasNoItems, loading, size]);
-  const content = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", {
-    className: styles_module_scss_2.default.content,
-    children: [itemsJSX, loadingJSX, (0, jsx_runtime_1.jsx)(helperComponents_1.ListEmptyState, {
-      loading: loading,
-      dataError: dataError,
-      emptyStates: emptyStates,
-      hasNoItems: hasNoItems,
-      dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value)
-    })]
-  }), [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value]);
+  const content = (0, react_1.useMemo)(() => {
+    var _a, _b;
+    return (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_2.default.content,
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        style: {
+          height: virtualizer.getTotalSize(),
+          width: '100%',
+          position: 'relative'
+        },
+        children: (0, jsx_runtime_1.jsx)("div", {
+          style: {
+            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)`
+          },
+          children: virtualItems.map(virtualRow => (0, jsx_runtime_1.jsx)("div", {
+            "data-index": virtualRow.index,
+            ref: virtualizer.measureElement,
+            children: itemsJSX[virtualRow.index]
+          }, virtualRow.key))
+        })
+      }), loadingJSX, (0, jsx_runtime_1.jsx)(helperComponents_1.ListEmptyState, {
+        loading: loading,
+        dataError: dataError,
+        emptyStates: emptyStates,
+        hasNoItems: hasNoItems,
+        dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value)
+      })]
+    });
+  }, [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value, virtualItems, virtualizer]);
   const onScrollInitialized = () => {
     var _a, _b;
+    virtualizer.measure();
     if (scrollToSelectedItem) {
       if (!value) {
         return;
@@ -136,7 +168,10 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       }, scrollContainerClassName),
       barHideStrategy: 'never',
       size: size === 's' ? 's' : 'm',
-      ref: scrollContainerRef,
+      ref: ref => {
+        innerScrollRef.current = ref;
+        if (scrollContainerRef) scrollContainerRef.current = ref;
+      },
       untouchableScrollbars: untouchableScrollbars,
       onScroll: onScroll,
       onInitialized: onScrollInitialized,

package/dist/esm/components/Lists/ListPrivate/ListPrivate.js CHANGED Viewed

@@ -10,8 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useVirtualizer } from '@tanstack/react-virtual';
 import cn from 'classnames';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -24,15 +25,47 @@ export const ListPrivate = forwardRef((_a, ref) => {
     var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered, scrollToSelectedItem = false, scrollContainerClassName } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem", "scrollContainerClassName"]);
     const { size = 's', flattenItems, focusFlattenItems } = useNewListContext();
     const { value, isSelectionSingle } = useSelectionContext();
+    const innerScrollRef = useRef(null);
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
     const itemsPinBottomJSX = useRenderItems(pinBottom);
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const hasNoItems = items.length === 0;
+    const virtualizer = useVirtualizer({
+        count: itemsJSX.length,
+        getScrollElement: () => (scroll ? innerScrollRef.current : null),
+        estimateSize: () => (size === 'm' ? 40 : 32),
+    });
+    const virtualItems = virtualizer.getVirtualItems();
     const loadingJSX = useMemo(() => loading && (_jsx("div", { role: 'spinbutton', tabIndex: -1, className: styles.loader, "data-size": size, "data-no-items": hasNoItems || undefined, "data-test-id": 'list__loader', children: _jsx(Spinner, { size: size === 'l' ? 's' : 'xs' }) })), [hasNoItems, loading, size]);
-    const content = useMemo(() => (_jsxs("div", { className: styles.content, children: [itemsJSX, loadingJSX, _jsx(ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, hasNoItems: hasNoItems, dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value) })] })), [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value]);
+    const content = useMemo(() => {
+        var _a, _b;
+        return (_jsxs("div", { className: styles.content, children: [_jsx("div", { style: {
+                        height: virtualizer.getTotalSize(),
+                        width: '100%',
+                        position: 'relative',
+                    }, children: _jsx("div", { style: {
+                            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)`,
+                        }, children: virtualItems.map(virtualRow => (_jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, children: itemsJSX[virtualRow.index] }, virtualRow.key))) }) }), loadingJSX, _jsx(ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, hasNoItems: hasNoItems, dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value) })] }));
+    }, [
+        dataError,
+        dataFiltered,
+        emptyStates,
+        hasNoItems,
+        itemsJSX,
+        loading,
+        loadingJSX,
+        search === null || search === void 0 ? void 0 : search.value,
+        virtualItems,
+        virtualizer,
+    ]);
     const onScrollInitialized = () => {
         var _a, _b;
+        virtualizer.measure();
         if (scrollToSelectedItem) {
             if (!value) {
                 return;
@@ -49,7 +82,11 @@ export const ListPrivate = forwardRef((_a, ref) => {
                     [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
                     [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
                     [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
-                }, scrollContainerClassName), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: e => e.stopPropagation(), children: footer }))] })));
+                }, scrollContainerClassName), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: ref => {
+                    innerScrollRef.current = ref;
+                    if (scrollContainerRef)
+                        scrollContainerRef.current = ref;
+                }, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: e => e.stopPropagation(), children: footer }))] })));
     if (!nested) {
         return listJSX;
     }

package/package.json CHANGED Viewed

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.22.2",
+  "version": "0.22.3-preview-0ee176c6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -47,11 +47,12 @@
     "@snack-uikit/toggles": "0.13.3",
     "@snack-uikit/truncate-string": "0.6.4",
     "@snack-uikit/utils": "3.6.0",
+    "@tanstack/react-virtual": "3.11.2",
     "classnames": "2.5.1",
     "merge-refs": "1.3.0"
   },
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "33621b09b3ca6d177fd8f41e5516566dee9f416a"
+  "gitHead": "cea4c91459901820b30d140dba4383987fe86583"
 }

package/src/components/Lists/ListPrivate/ListPrivate.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
 import cn from 'classnames';
-import { ForwardedRef, forwardRef, RefObject, useMemo } from 'react';
+import { ForwardedRef, forwardRef, RefObject, useMemo, useRef } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
@@ -48,6 +49,7 @@ export const ListPrivate = forwardRef(
   ) => {
     const { size = 's', flattenItems, focusFlattenItems } = useNewListContext();
     const { value, isSelectionSingle } = useSelectionContext();
+    const innerScrollRef = useRef<HTMLElement | null>(null);
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
@@ -56,6 +58,13 @@ export const ListPrivate = forwardRef(
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const hasNoItems = items.length === 0;
+    const virtualizer = useVirtualizer({
+      count: itemsJSX.length,
+      getScrollElement: () => (scroll ? innerScrollRef.current : null),
+      estimateSize: () => (size === 'm' ? 40 : 32),
+    });
+    const virtualItems = virtualizer.getVirtualItems();
     const loadingJSX = useMemo(
       () =>
         loading && (
@@ -76,7 +85,29 @@ export const ListPrivate = forwardRef(
     const content = useMemo(
       () => (
         <div className={styles.content}>
-          {itemsJSX}
+          <div
+            style={{
+              height: virtualizer.getTotalSize(),
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                transform: `translateY(${virtualItems[0]?.start ?? 0}px)`,
+              }}
+            >
+              {virtualItems.map(virtualRow => (
+                <div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
+                  {itemsJSX[virtualRow.index]}
+                </div>
+              ))}
+            </div>
+          </div>
           {loadingJSX}
           <ListEmptyState
@@ -88,10 +119,23 @@ export const ListPrivate = forwardRef(
           />
         </div>
       ),
-      [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search?.value],
+      [
+        dataError,
+        dataFiltered,
+        emptyStates,
+        hasNoItems,
+        itemsJSX,
+        loading,
+        loadingJSX,
+        search?.value,
+        virtualItems,
+        virtualizer,
+      ],
     );
     const onScrollInitialized = () => {
+      virtualizer.measure();
       if (scrollToSelectedItem) {
         if (!value) {
           return;
@@ -140,7 +184,10 @@ export const ListPrivate = forwardRef(
             )}
             barHideStrategy='never'
             size={size === 's' ? 's' : 'm'}
-            ref={scrollContainerRef}
+            ref={ref => {
+              innerScrollRef.current = ref;
+              if (scrollContainerRef) (scrollContainerRef as React.MutableRefObject<HTMLElement | null>).current = ref;
+            }}
             untouchableScrollbars={untouchableScrollbars}
             onScroll={onScroll}
             onInitialized={onScrollInitialized}