@snack-uikit/list 0.22.3-preview-e49c63bb.0 → 0.22.3-preview-38cf19d9.0

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

@@ -18,7 +18,6 @@ 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");
@@ -69,7 +68,6 @@ 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);
@@ -79,12 +77,6 @@ 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,
@@ -96,42 +88,18 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       size: size === 'l' ? 's' : 'xs'
     })
   }), [hasNoItems, loading, size]);
-  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 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 onScrollInitialized = () => {
     var _a, _b;
-    virtualizer.measure();
     if (scrollToSelectedItem) {
       if (!value) {
         return;
@@ -168,10 +136,7 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       }, scrollContainerClassName),
       barHideStrategy: 'never',
       size: size === 's' ? 's' : 'm',
-      ref: ref => {
-        innerScrollRef.current = ref;
-        if (scrollContainerRef) scrollContainerRef.current = ref;
-      },
+      ref: scrollContainerRef,
       untouchableScrollbars: untouchableScrollbars,
       onScroll: onScroll,
       onInitialized: onScrollInitialized,

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

@@ -10,9 +10,8 @@ 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, useRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -25,47 +24,15 @@ 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(() => {
-        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 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 onScrollInitialized = () => {
         var _a, _b;
-        virtualizer.measure();
         if (scrollToSelectedItem) {
             if (!value) {
                 return;
@@ -82,11 +49,7 @@ 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: 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 }))] })));
+                }, 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 }))] })));
     if (!nested) {
         return listJSX;
     }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.22.3-preview-e49c63bb.0",
+  "version": "0.22.3-preview-38cf19d9.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -40,19 +40,18 @@
     "@snack-uikit/divider": "3.2.2",
     "@snack-uikit/dropdown": "0.4.2",
     "@snack-uikit/icons": "0.24.1",
-    "@snack-uikit/info-block": "0.6.7",
+    "@snack-uikit/info-block": "0.6.8-preview-38cf19d9.0",
     "@snack-uikit/loaders": "0.9.0",
     "@snack-uikit/scroll": "0.9.2",
     "@snack-uikit/search-private": "0.4.8",
-    "@snack-uikit/toggles": "0.13.3",
-    "@snack-uikit/truncate-string": "0.6.4",
+    "@snack-uikit/toggles": "0.13.4-preview-38cf19d9.0",
+    "@snack-uikit/truncate-string": "0.6.5-preview-38cf19d9.0",
     "@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": "416ce7ad5f712c6934aba2374bce1d2c68618499"
+  "gitHead": "18ce28eb282143fa2bc0e9a8ed2ff63c63e3cc11"
 }

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

@@ -1,6 +1,5 @@
-import { useVirtualizer } from '@tanstack/react-virtual';
 import cn from 'classnames';
-import { ForwardedRef, forwardRef, RefObject, useMemo, useRef } from 'react';
+import { ForwardedRef, forwardRef, RefObject, useMemo } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
@@ -49,7 +48,6 @@ 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);
@@ -58,13 +56,6 @@ 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 && (
@@ -85,29 +76,7 @@ export const ListPrivate = forwardRef(
     const content = useMemo(
       () => (
         <div className={styles.content}>
-          <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>
+          {itemsJSX}
           {loadingJSX}
 
           <ListEmptyState
@@ -119,23 +88,10 @@ export const ListPrivate = forwardRef(
           />
         </div>
       ),
-      [
-        dataError,
-        dataFiltered,
-        emptyStates,
-        hasNoItems,
-        itemsJSX,
-        loading,
-        loadingJSX,
-        search?.value,
-        virtualItems,
-        virtualizer,
-      ],
+      [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search?.value],
     );
 
     const onScrollInitialized = () => {
-      virtualizer.measure();
-
       if (scrollToSelectedItem) {
         if (!value) {
           return;
@@ -184,10 +140,7 @@ export const ListPrivate = forwardRef(
             )}
             barHideStrategy='never'
             size={size === 's' ? 's' : 'm'}
-            ref={ref => {
-              innerScrollRef.current = ref;
-              if (scrollContainerRef) (scrollContainerRef as React.MutableRefObject<HTMLElement | null>).current = ref;
-            }}
+            ref={scrollContainerRef}
             untouchableScrollbars={untouchableScrollbars}
             onScroll={onScroll}
             onInitialized={onScrollInitialized}