npm - @snack-uikit/list - Versions diffs - 0.29.6-preview-d65ce031.0 → 0.29.6 - Mend

@snack-uikit/list 0.29.6-preview-d65ce031.0 → 0.29.6

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 (5) hide show

package/CHANGELOG.md +10 -0
package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js +50 -67
package/dist/esm/components/Lists/ListPrivate/ListPrivate.js +23 -41
package/package.json +4 -4
package/src/components/Lists/ListPrivate/ListPrivate.tsx +38 -60

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## 0.29.6 (2025-06-19)
+### Only dependencies have been changed
+* [@snack-uikit/info-block@0.6.25](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/info-block/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.6.21](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
 ## 0.29.5 (2025-06-16)
 ### Only dependencies have been changed

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

@@ -20,7 +20,6 @@ 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 merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
 const loaders_1 = require("@snack-uikit/loaders");
 const scroll_1 = require("@snack-uikit/scroll");
@@ -84,47 +83,16 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
     errorDataState
   });
   const hasNoItems = items.length === 0;
-  const memoizedFocusFlattenItems = (0, react_1.useMemo)(() => Object.values(focusFlattenItems), [focusFlattenItems]);
-  const selectedItemIndex = (0, react_1.useMemo)(() => {
-    if (!scrollToSelectedItem || !value) {
-      return -1;
-    }
-    const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
-    if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id)) {
-      return -1;
-    }
-    return memoizedFocusFlattenItems.findIndex(item => item.originalId === selectedItem.id);
-  }, [flattenItems, memoizedFocusFlattenItems, isSelectionSingle, scrollToSelectedItem, value]);
   const virtualizer = (0, react_virtual_1.useVirtualizer)({
     count: itemsJSX.length,
     getScrollElement: () => scroll ? innerScrollRef.current : null,
     estimateSize: () => constants_1.ALL_SIZES[size],
-    enabled: virtualized,
-    overscan: 5 // Amount of elements in DOM before/after visible ones
+    enabled: virtualized
   });
   const virtualItems = virtualizer.getVirtualItems();
   (0, react_1.useEffect)(() => {
     virtualizer.measure();
   }, [virtualizer]);
-  (0, react_1.useEffect)(() => {
-    if (scroll && scrollToSelectedItem && virtualized) {
-      if (selectedItemIndex < 0) {
-        return;
-      }
-      requestAnimationFrame(() => {
-        virtualizer.scrollToIndex(selectedItemIndex, {
-          align: 'center'
-        });
-        requestAnimationFrame(() => {
-          var _a, _b;
-          const itemToScrollTo = memoizedFocusFlattenItems[selectedItemIndex];
-          (_b = (_a = itemToScrollTo === null || itemToScrollTo === void 0 ? void 0 : itemToScrollTo.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
-            block: 'center'
-          });
-        });
-      });
-    }
-  }, [selectedItemIndex, scroll, scrollToSelectedItem, virtualized, virtualizer, memoizedFocusFlattenItems]);
   const loadingJSX = (0, react_1.useMemo)(() => loading && (0, jsx_runtime_1.jsx)("div", {
     role: 'spinbutton',
     tabIndex: -1,
@@ -136,43 +104,55 @@ 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)(jsx_runtime_1.Fragment, {
-    children: [virtualized ? (0, jsx_runtime_1.jsx)("div", {
-      className: styles_module_scss_2.default.virtualizedContainer,
-      style: {
-        height: virtualizer.getTotalSize()
-      },
-      tabIndex: -1,
-      children: virtualItems.map(virtualRow => (0, jsx_runtime_1.jsx)("div", {
-        "data-index": virtualRow.index,
-        ref: virtualizer.measureElement,
-        tabIndex: -1,
-        className: styles_module_scss_2.default.virtualizedPositionBox,
+  const content = (0, react_1.useMemo)(() => {
+    var _a, _b;
+    return (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_2.default.content,
+      children: [virtualized ? (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_2.default.virtualizedContainer,
         style: {
-          height: `${virtualRow.size}px`,
-          transform: `translateY(${virtualRow.start}px)`
+          height: virtualizer.getTotalSize()
         },
-        children: itemsJSX[virtualRow.index]
-      }, virtualRow.key))
-    }) : 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),
-      size: size
-    })]
-  }), [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value, size, virtualItems, virtualized, virtualizer]);
-  const onScrollInitialized = (0, react_1.useCallback)(() => {
+        tabIndex: -1,
+        children: (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_2.default.virtualizedPositionBox,
+          style: {
+            transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)`
+          },
+          tabIndex: -1,
+          children: virtualItems.map(virtualRow => (0, jsx_runtime_1.jsx)("div", {
+            "data-index": virtualRow.index,
+            ref: virtualizer.measureElement,
+            tabIndex: -1,
+            children: itemsJSX[virtualRow.index]
+          }, virtualRow.key))
+        })
+      }) : 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),
+        size: size
+      })]
+    });
+  }, [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value, size, virtualItems, virtualized, virtualizer]);
+  const onScrollInitialized = () => {
     var _a, _b;
-    if (selectedItemIndex < 0) {
-      return;
+    if (scrollToSelectedItem) {
+      if (!value) {
+        return;
+      }
+      const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
+      if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id)) {
+        return;
+      }
+      const itemToScrollTo = Object.values(focusFlattenItems).find(item => item.originalId === selectedItem.id);
+      (_b = (_a = itemToScrollTo === null || itemToScrollTo === void 0 ? void 0 : itemToScrollTo.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+        block: 'center'
+      });
     }
-    const itemToScrollTo = memoizedFocusFlattenItems[selectedItemIndex];
-    (_b = (_a = itemToScrollTo === null || itemToScrollTo === void 0 ? void 0 : itemToScrollTo.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
-      block: 'center'
-    });
-  }, [memoizedFocusFlattenItems, selectedItemIndex]);
+  };
   const listJSX = (0, jsx_runtime_1.jsxs)("ul", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.listContainer, className),
     ref: ref,
@@ -195,7 +175,10 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       }, scrollContainerClassName),
       barHideStrategy: barHideStrategy,
       size: size === 's' ? 's' : 'm',
-      ref: (0, merge_refs_1.default)(innerScrollRef, 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

@@ -9,11 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 mergeRefs from 'merge-refs';
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -34,48 +33,21 @@ export const ListPrivate = forwardRef((_a, ref) => {
     const itemsPinBottomJSX = useRenderItems(pinBottom);
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const hasNoItems = items.length === 0;
-    const memoizedFocusFlattenItems = useMemo(() => Object.values(focusFlattenItems), [focusFlattenItems]);
-    const selectedItemIndex = useMemo(() => {
-        if (!scrollToSelectedItem || !value) {
-            return -1;
-        }
-        const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
-        if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id)) {
-            return -1;
-        }
-        return memoizedFocusFlattenItems.findIndex(item => item.originalId === selectedItem.id);
-    }, [flattenItems, memoizedFocusFlattenItems, isSelectionSingle, scrollToSelectedItem, value]);
     const virtualizer = useVirtualizer({
         count: itemsJSX.length,
         getScrollElement: () => (scroll ? innerScrollRef.current : null),
         estimateSize: () => ALL_SIZES[size],
         enabled: virtualized,
-        overscan: 5, // Amount of elements in DOM before/after visible ones
     });
     const virtualItems = virtualizer.getVirtualItems();
     useEffect(() => {
         virtualizer.measure();
     }, [virtualizer]);
-    useEffect(() => {
-        if (scroll && scrollToSelectedItem && virtualized) {
-            if (selectedItemIndex < 0) {
-                return;
-            }
-            requestAnimationFrame(() => {
-                virtualizer.scrollToIndex(selectedItemIndex, { align: 'center' });
-                requestAnimationFrame(() => {
-                    var _a, _b;
-                    const itemToScrollTo = memoizedFocusFlattenItems[selectedItemIndex];
-                    (_b = (_a = itemToScrollTo === null || itemToScrollTo === void 0 ? void 0 : itemToScrollTo.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'center' });
-                });
-            });
-        }
-    }, [selectedItemIndex, scroll, scrollToSelectedItem, virtualized, virtualizer, memoizedFocusFlattenItems]);
     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(_Fragment, { children: [virtualized ? (_jsx("div", { className: styles.virtualizedContainer, style: { height: virtualizer.getTotalSize() }, tabIndex: -1, children: virtualItems.map(virtualRow => (_jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, tabIndex: -1, className: styles.virtualizedPositionBox, style: {
-                        height: `${virtualRow.size}px`,
-                        transform: `translateY(${virtualRow.start}px)`,
-                    }, children: itemsJSX[virtualRow.index] }, virtualRow.key))) })) : (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), size: size })] })), [
+    const content = useMemo(() => {
+        var _a, _b;
+        return (_jsxs("div", { className: styles.content, children: [virtualized ? (_jsx("div", { className: styles.virtualizedContainer, style: { height: virtualizer.getTotalSize() }, tabIndex: -1, children: _jsx("div", { className: styles.virtualizedPositionBox, style: { transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)` }, tabIndex: -1, children: virtualItems.map(virtualRow => (_jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, tabIndex: -1, children: itemsJSX[virtualRow.index] }, virtualRow.key))) }) })) : (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), size: size })] }));
+    }, [
         dataError,
         dataFiltered,
         emptyStates,
@@ -89,19 +61,29 @@ export const ListPrivate = forwardRef((_a, ref) => {
         virtualized,
         virtualizer,
     ]);
-    const onScrollInitialized = useCallback(() => {
+    const onScrollInitialized = () => {
         var _a, _b;
-        if (selectedItemIndex < 0) {
-            return;
+        if (scrollToSelectedItem) {
+            if (!value) {
+                return;
+            }
+            const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
+            if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id)) {
+                return;
+            }
+            const itemToScrollTo = Object.values(focusFlattenItems).find(item => item.originalId === selectedItem.id);
+            (_b = (_a = itemToScrollTo === null || itemToScrollTo === void 0 ? void 0 : itemToScrollTo.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'center' });
         }
-        const itemToScrollTo = memoizedFocusFlattenItems[selectedItemIndex];
-        (_b = (_a = itemToScrollTo === null || itemToScrollTo === void 0 ? void 0 : itemToScrollTo.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'center' });
-    }, [memoizedFocusFlattenItems, selectedItemIndex]);
+    };
     const listJSX = (_jsxs("ul", Object.assign({ className: cn(commonStyles.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, Object.assign({ search: search }, searchItem)), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({
                     [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
                     [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
                     [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
-                }, scrollContainerClassName), barHideStrategy: barHideStrategy, size: size === 's' ? 's' : 'm', ref: mergeRefs(innerScrollRef, 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: stopPropagation, children: footer }))] })));
+                }, scrollContainerClassName), barHideStrategy: barHideStrategy, 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: stopPropagation, children: footer }))] })));
     if (!nested) {
         return listJSX;
     }

package/package.json CHANGED Viewed

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.29.6-preview-d65ce031.0",
+  "version": "0.29.6",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -40,12 +40,12 @@
     "@snack-uikit/divider": "3.2.6",
     "@snack-uikit/dropdown": "0.4.8",
     "@snack-uikit/icons": "0.26.4",
-    "@snack-uikit/info-block": "0.6.24",
+    "@snack-uikit/info-block": "0.6.25",
     "@snack-uikit/loaders": "0.9.5",
     "@snack-uikit/scroll": "0.10.1",
     "@snack-uikit/search-private": "0.4.21",
     "@snack-uikit/toggles": "0.13.15",
-    "@snack-uikit/truncate-string": "0.6.20",
+    "@snack-uikit/truncate-string": "0.6.21",
     "@snack-uikit/utils": "3.8.2",
     "@tanstack/react-virtual": "3.11.2",
     "classnames": "2.5.1",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "a386d9f07e235eb470eec71f8b3ee9baf3cb4e5a"
+  "gitHead": "30ce13048847439dad862be32ab65379adc107c0"
 }

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

@@ -1,7 +1,6 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cn from 'classnames';
-import mergeRefs from 'merge-refs';
-import { ForwardedRef, forwardRef, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
+import { ForwardedRef, forwardRef, RefObject, useEffect, useMemo, useRef } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
@@ -63,27 +62,11 @@ export const ListPrivate = forwardRef(
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const hasNoItems = items.length === 0;
-    const memoizedFocusFlattenItems = useMemo(() => Object.values(focusFlattenItems), [focusFlattenItems]);
-    const selectedItemIndex = useMemo(() => {
-      if (!scrollToSelectedItem || !value) {
-        return -1;
-      }
-      const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
-      if (!selectedItem?.id) {
-        return -1;
-      }
-      return memoizedFocusFlattenItems.findIndex(item => item.originalId === selectedItem.id);
-    }, [flattenItems, memoizedFocusFlattenItems, isSelectionSingle, scrollToSelectedItem, value]);
     const virtualizer = useVirtualizer({
       count: itemsJSX.length,
       getScrollElement: () => (scroll ? innerScrollRef.current : null),
       estimateSize: () => ALL_SIZES[size],
       enabled: virtualized,
-      overscan: 5, // Amount of elements in DOM before/after visible ones
     });
     const virtualItems = virtualizer.getVirtualItems();
@@ -91,23 +74,6 @@ export const ListPrivate = forwardRef(
       virtualizer.measure();
     }, [virtualizer]);
-    useEffect(() => {
-      if (scroll && scrollToSelectedItem && virtualized) {
-        if (selectedItemIndex < 0) {
-          return;
-        }
-        requestAnimationFrame(() => {
-          virtualizer.scrollToIndex(selectedItemIndex, { align: 'center' });
-          requestAnimationFrame(() => {
-            const itemToScrollTo = memoizedFocusFlattenItems[selectedItemIndex];
-            itemToScrollTo?.itemRef?.current?.scrollIntoView({ block: 'center' });
-          });
-        });
-      }
-    }, [selectedItemIndex, scroll, scrollToSelectedItem, virtualized, virtualizer, memoizedFocusFlattenItems]);
     const loadingJSX = useMemo(
       () =>
         loading && (
@@ -127,24 +93,25 @@ export const ListPrivate = forwardRef(
     const content = useMemo(
       () => (
-        <>
+        <div className={styles.content}>
           {virtualized ? (
             <div className={styles.virtualizedContainer} style={{ height: virtualizer.getTotalSize() }} tabIndex={-1}>
-              {virtualItems.map(virtualRow => (
-                <div
-                  key={virtualRow.key}
-                  data-index={virtualRow.index}
-                  ref={virtualizer.measureElement}
-                  tabIndex={-1}
-                  className={styles.virtualizedPositionBox}
-                  style={{
-                    height: `${virtualRow.size}px`,
-                    transform: `translateY(${virtualRow.start}px)`,
-                  }}
-                >
-                  {itemsJSX[virtualRow.index]}
-                </div>
-              ))}
+              <div
+                className={styles.virtualizedPositionBox}
+                style={{ transform: `translateY(${virtualItems[0]?.start ?? 0}px)` }}
+                tabIndex={-1}
+              >
+                {virtualItems.map(virtualRow => (
+                  <div
+                    key={virtualRow.key}
+                    data-index={virtualRow.index}
+                    ref={virtualizer.measureElement}
+                    tabIndex={-1}
+                  >
+                    {itemsJSX[virtualRow.index]}
+                  </div>
+                ))}
+              </div>
             </div>
           ) : (
             itemsJSX
@@ -159,7 +126,7 @@ export const ListPrivate = forwardRef(
             dataFiltered={dataFiltered ?? Boolean(search?.value)}
             size={size}
           />
-        </>
+        </div>
       ),
       [
         dataError,
@@ -177,14 +144,22 @@ export const ListPrivate = forwardRef(
       ],
     );
-    const onScrollInitialized = useCallback(() => {
-      if (selectedItemIndex < 0) {
-        return;
-      }
+    const onScrollInitialized = () => {
+      if (scrollToSelectedItem) {
+        if (!value) {
+          return;
+        }
-      const itemToScrollTo = memoizedFocusFlattenItems[selectedItemIndex];
-      itemToScrollTo?.itemRef?.current?.scrollIntoView({ block: 'center' });
-    }, [memoizedFocusFlattenItems, selectedItemIndex]);
+        const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
+        if (!selectedItem?.id) {
+          return;
+        }
+        const itemToScrollTo = Object.values(focusFlattenItems).find(item => item.originalId === selectedItem.id);
+        itemToScrollTo?.itemRef?.current?.scrollIntoView({ block: 'center' });
+      }
+    };
     const listJSX = (
       <ul
@@ -218,7 +193,10 @@ export const ListPrivate = forwardRef(
             )}
             barHideStrategy={barHideStrategy}
             size={size === 's' ? 's' : 'm'}
-            ref={mergeRefs(innerScrollRef, scrollContainerRef)}
+            ref={ref => {
+              innerScrollRef.current = ref;
+              if (scrollContainerRef) (scrollContainerRef as React.MutableRefObject<HTMLElement | null>).current = ref;
+            }}
             untouchableScrollbars={untouchableScrollbars}
             onScroll={onScroll}
             onInitialized={onScrollInitialized}