@snack-uikit/list 0.29.6 → 0.29.7-preview-c824da44.0

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

@@ -20,6 +20,7 @@ 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");
@@ -32,6 +33,7 @@ const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const constants_1 = require("./constants");
 const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
 exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
+  var _b;
   var {
       items,
       pinTop,
@@ -77,22 +79,110 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
   const itemsJSX = (0, Items_1.useRenderItems)(items);
   const itemsPinTopJSX = (0, Items_1.useRenderItems)(pinTop);
   const itemsPinBottomJSX = (0, Items_1.useRenderItems)(pinBottom);
+  const [scrollState, setScrollState] = (0, react_1.useState)({
+    virtualizer: null,
+    browser: null,
+    measured: false
+  });
+  console.info('[DEBUG] ScrollState', scrollState);
   const emptyStates = (0, helperComponents_1.useEmptyState)({
     noDataState,
     noResultsState,
     errorDataState
   });
   const hasNoItems = items.length === 0;
+  const {
+    selectedItemIndex,
+    selectedItem
+  } = (0, react_1.useMemo)(() => {
+    const result = {
+      selectedItemIndex: -1,
+      selectedItem: undefined
+    };
+    if (!scrollToSelectedItem || !value) {
+      return result;
+    }
+    const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
+    if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id)) {
+      return result;
+    }
+    const allFocusFlattenItems = Object.values(focusFlattenItems);
+    const index = allFocusFlattenItems.findIndex(item => item.originalId === selectedItem.id);
+    if (index < 0) {
+      return result;
+    }
+    return {
+      selectedItemIndex: index,
+      selectedItem: allFocusFlattenItems[index]
+    };
+  }, [flattenItems, focusFlattenItems, 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
+    enabled: virtualized,
+    overscan: 5 // Amount of elements in DOM before/after visible ones
   });
   const virtualItems = virtualizer.getVirtualItems();
   (0, react_1.useEffect)(() => {
-    virtualizer.measure();
-  }, [virtualizer]);
+    if (scrollState.measured) {
+      return;
+    }
+    virtualizer.measure(); // TODO: перезамерять размер
+    setScrollState(prevState => Object.assign(Object.assign({}, prevState), {
+      measured: true
+    }));
+  }, [scrollState.measured, virtualizer]);
+  const isScrollToItemEnabled = scroll && scrollToSelectedItem && virtualized;
+  (0, react_1.useEffect)(() => {
+    var _a;
+    if (isScrollToItemEnabled) {
+      console.info('[DEBUG] selectedItemIndex', selectedItemIndex);
+      if (!scrollState.measured) {
+        console.info('[DEBUG] Not measured yet');
+        return; // Not measured yet
+      }
+      if (selectedItemIndex < 0 || !selectedItem) {
+        console.info('[DEBUG] Cannot scroll to non-existing item');
+        return; // Cannot scroll to non-existing item
+      }
+      if (scrollState.virtualizer === selectedItemIndex) {
+        console.info('[DEBUG] No need to re-scroll to the same item during re-renders');
+        return; // No need to re-scroll to the same item during re-renders
+      }
+      if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) && ((_a = innerScrollRef.current) === null || _a === void 0 ? void 0 : _a.contains(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef.current))) {
+        console.info('[DEBUG] No need to scroll to manually clicked item currently present in DOM');
+        return; // No need to scroll to manually clicked item currently present in DOM
+      }
+      console.info('[DEBUG] SCROLLING BY VIRTUALIZER');
+      virtualizer.scrollToIndex(selectedItemIndex, {
+        align: 'center'
+      });
+      setScrollState(prevState => Object.assign(Object.assign({}, prevState), {
+        virtualizer: selectedItemIndex
+      }));
+    }
+  }, [isScrollToItemEnabled, scrollState, selectedItem, selectedItemIndex, virtualizer]);
+  const isTargetPresentInDom = Boolean((_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _b === void 0 ? void 0 : _b.current);
+  (0, react_1.useEffect)(() => {
+    var _a, _b, _c;
+    if (scrollState.virtualizer === null) {
+      return; // Not scrolled by virtualizer yet, no need for additional scroll
+    }
+    if (!isTargetPresentInDom) {
+      return; // Target element is not present in DOM yet, additional scroll does not work without it
+    }
+    if (scrollState.virtualizer === scrollState.browser) {
+      return; // Virtualizer scroll has not been executed => no need for additional scroll
+    }
+    console.info('[DEBUG] SCROLLING BY BROWSER', (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current);
+    (_c = (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
+      block: 'center'
+    });
+    setScrollState(prevState => Object.assign(Object.assign({}, prevState), {
+      browser: selectedItemIndex
+    }));
+  }, [scrollState, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef, isTargetPresentInDom, selectedItemIndex]);
   const loadingJSX = (0, react_1.useMemo)(() => loading && (0, jsx_runtime_1.jsx)("div", {
     role: 'spinbutton',
     tabIndex: -1,
@@ -104,55 +194,41 @@ 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: [virtualized ? (0, jsx_runtime_1.jsx)("div", {
-        className: styles_module_scss_2.default.virtualizedContainer,
+  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,
         style: {
-          height: virtualizer.getTotalSize()
+          transform: `translateY(${virtualRow.start}px)`
         },
-        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 = () => {
+        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)(() => {
     var _a, _b;
-    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'
-      });
+    if (!selectedItem) {
+      return;
     }
-  };
+    (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+      block: 'center'
+    });
+  }, [selectedItem]);
   const listJSX = (0, jsx_runtime_1.jsxs)("ul", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.listContainer, className),
     ref: ref,
@@ -175,10 +251,7 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       }, scrollContainerClassName),
       barHideStrategy: barHideStrategy,
       size: size === 's' ? 's' : 'm',
-      ref: ref => {
-        innerScrollRef.current = ref;
-        if (scrollContainerRef) scrollContainerRef.current = ref;
-      },
+      ref: (0, merge_refs_1.default)(innerScrollRef, scrollContainerRef),
       untouchableScrollbars: untouchableScrollbars,
       onScroll: onScroll,
       onInitialized: onScrollInitialized,

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

@@ -9,10 +9,11 @@ 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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cn from 'classnames';
-import { forwardRef, useEffect, useMemo, useRef } from 'react';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -24,6 +25,7 @@ import commonStyles from '../styles.module.css';
 import { ALL_SIZES } from './constants';
 import styles from './styles.module.css';
 export const ListPrivate = forwardRef((_a, ref) => {
+    var _b;
     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, virtualized = false, scrollContainerClassName, barHideStrategy = 'never' } = _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", "virtualized", "scrollContainerClassName", "barHideStrategy"]);
     const { size = 's', flattenItems, focusFlattenItems } = useNewListContext();
     const { value, isSelectionSingle } = useSelectionContext();
@@ -31,23 +33,93 @@ export const ListPrivate = forwardRef((_a, ref) => {
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
     const itemsPinBottomJSX = useRenderItems(pinBottom);
+    const [scrollState, setScrollState] = useState({ virtualizer: null, browser: null, measured: false });
+    console.info('[DEBUG] ScrollState', scrollState);
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const hasNoItems = items.length === 0;
+    const { selectedItemIndex, selectedItem } = useMemo(() => {
+        const result = {
+            selectedItemIndex: -1,
+            selectedItem: undefined,
+        };
+        if (!scrollToSelectedItem || !value) {
+            return result;
+        }
+        const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
+        if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id)) {
+            return result;
+        }
+        const allFocusFlattenItems = Object.values(focusFlattenItems);
+        const index = allFocusFlattenItems.findIndex(item => item.originalId === selectedItem.id);
+        if (index < 0) {
+            return result;
+        }
+        return {
+            selectedItemIndex: index,
+            selectedItem: allFocusFlattenItems[index],
+        };
+    }, [flattenItems, focusFlattenItems, 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]);
+        if (scrollState.measured) {
+            return;
+        }
+        virtualizer.measure(); // TODO: перезамерять размер
+        setScrollState(prevState => (Object.assign(Object.assign({}, prevState), { measured: true })));
+    }, [scrollState.measured, virtualizer]);
+    const isScrollToItemEnabled = scroll && scrollToSelectedItem && virtualized;
+    useEffect(() => {
+        var _a;
+        if (isScrollToItemEnabled) {
+            console.info('[DEBUG] selectedItemIndex', selectedItemIndex);
+            if (!scrollState.measured) {
+                console.info('[DEBUG] Not measured yet');
+                return; // Not measured yet
+            }
+            if (selectedItemIndex < 0 || !selectedItem) {
+                console.info('[DEBUG] Cannot scroll to non-existing item');
+                return; // Cannot scroll to non-existing item
+            }
+            if (scrollState.virtualizer === selectedItemIndex) {
+                console.info('[DEBUG] No need to re-scroll to the same item during re-renders');
+                return; // No need to re-scroll to the same item during re-renders
+            }
+            if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) && ((_a = innerScrollRef.current) === null || _a === void 0 ? void 0 : _a.contains(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef.current))) {
+                console.info('[DEBUG] No need to scroll to manually clicked item currently present in DOM');
+                return; // No need to scroll to manually clicked item currently present in DOM
+            }
+            console.info('[DEBUG] SCROLLING BY VIRTUALIZER');
+            virtualizer.scrollToIndex(selectedItemIndex, { align: 'center' });
+            setScrollState(prevState => (Object.assign(Object.assign({}, prevState), { virtualizer: selectedItemIndex })));
+        }
+    }, [isScrollToItemEnabled, scrollState, selectedItem, selectedItemIndex, virtualizer]);
+    const isTargetPresentInDom = Boolean((_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _b === void 0 ? void 0 : _b.current);
+    useEffect(() => {
+        var _a, _b, _c;
+        if (scrollState.virtualizer === null) {
+            return; // Not scrolled by virtualizer yet, no need for additional scroll
+        }
+        if (!isTargetPresentInDom) {
+            return; // Target element is not present in DOM yet, additional scroll does not work without it
+        }
+        if (scrollState.virtualizer === scrollState.browser) {
+            return; // Virtualizer scroll has not been executed => no need for additional scroll
+        }
+        console.info('[DEBUG] SCROLLING BY BROWSER', (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current);
+        (_c = (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({ block: 'center' });
+        setScrollState(prevState => (Object.assign(Object.assign({}, prevState), { browser: selectedItemIndex })));
+    }, [scrollState, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef, isTargetPresentInDom, selectedItemIndex]);
     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: [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 })] }));
-    }, [
+    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: {
+                        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 })] })), [
         dataError,
         dataFiltered,
         emptyStates,
@@ -61,29 +133,18 @@ export const ListPrivate = forwardRef((_a, ref) => {
         virtualized,
         virtualizer,
     ]);
-    const onScrollInitialized = () => {
+    const onScrollInitialized = useCallback(() => {
         var _a, _b;
-        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' });
+        if (!selectedItem) {
+            return;
         }
-    };
+        (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'center' });
+    }, [selectedItem]);
     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: 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 }))] })));
+                }, 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 }))] })));
     if (!nested) {
         return listJSX;
     }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.29.6",
+  "version": "0.29.7-preview-c824da44.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "30ce13048847439dad862be32ab65379adc107c0"
+  "gitHead": "edea7e461de9f4f112e73ed1de8c1063240d3164"
 }

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

@@ -1,6 +1,7 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cn from 'classnames';
-import { ForwardedRef, forwardRef, RefObject, useEffect, useMemo, useRef } from 'react';
+import mergeRefs from 'merge-refs';
+import { ForwardedRef, forwardRef, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
@@ -15,6 +16,12 @@ import { ListPrivateProps } from '../types';
 import { ALL_SIZES } from './constants';
 import styles from './styles.module.scss';
 
+type ScrollState = {
+  virtualizer: number | null;
+  browser: number | null;
+  measured: boolean;
+};
+
 export const ListPrivate = forwardRef(
   (
     {
@@ -59,20 +66,117 @@ export const ListPrivate = forwardRef(
     const itemsPinTopJSX = useRenderItems(pinTop);
     const itemsPinBottomJSX = useRenderItems(pinBottom);
 
+    const [scrollState, setScrollState] = useState<ScrollState>({ virtualizer: null, browser: null, measured: false });
+    console.info('[DEBUG] ScrollState', scrollState);
+
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const hasNoItems = items.length === 0;
 
+    const { selectedItemIndex, selectedItem } = useMemo(() => {
+      const result = {
+        selectedItemIndex: -1,
+        selectedItem: undefined,
+      };
+
+      if (!scrollToSelectedItem || !value) {
+        return result;
+      }
+
+      const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
+      if (!selectedItem?.id) {
+        return result;
+      }
+
+      const allFocusFlattenItems = Object.values(focusFlattenItems);
+      const index = allFocusFlattenItems.findIndex(item => item.originalId === selectedItem.id);
+      if (index < 0) {
+        return result;
+      }
+
+      return {
+        selectedItemIndex: index,
+        selectedItem: allFocusFlattenItems[index],
+      };
+    }, [flattenItems, focusFlattenItems, 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]);
+      if (scrollState.measured) {
+        return;
+      }
+
+      virtualizer.measure(); // TODO: перезамерять размер
+
+      setScrollState(prevState => ({
+        ...prevState,
+        measured: true,
+      }));
+    }, [scrollState.measured, virtualizer]);
+
+    const isScrollToItemEnabled = scroll && scrollToSelectedItem && virtualized;
+
+    useEffect(() => {
+      if (isScrollToItemEnabled) {
+        console.info('[DEBUG] selectedItemIndex', selectedItemIndex);
+        if (!scrollState.measured) {
+          console.info('[DEBUG] Not measured yet');
+          return; // Not measured yet
+        }
+        if (selectedItemIndex < 0 || !selectedItem) {
+          console.info('[DEBUG] Cannot scroll to non-existing item');
+          return; // Cannot scroll to non-existing item
+        }
+        if (scrollState.virtualizer === selectedItemIndex) {
+          console.info('[DEBUG] No need to re-scroll to the same item during re-renders');
+          return; // No need to re-scroll to the same item during re-renders
+        }
+        if (selectedItem?.itemRef && innerScrollRef.current?.contains(selectedItem?.itemRef.current)) {
+          console.info('[DEBUG] No need to scroll to manually clicked item currently present in DOM');
+          return; // No need to scroll to manually clicked item currently present in DOM
+        }
+
+        console.info('[DEBUG] SCROLLING BY VIRTUALIZER');
+        virtualizer.scrollToIndex(selectedItemIndex, { align: 'center' });
+
+        setScrollState(prevState => ({
+          ...prevState,
+          virtualizer: selectedItemIndex,
+        }));
+      }
+    }, [isScrollToItemEnabled, scrollState, selectedItem, selectedItemIndex, virtualizer]);
+
+    const isTargetPresentInDom = Boolean(selectedItem?.itemRef?.current);
+
+    useEffect(() => {
+      if (scrollState.virtualizer === null) {
+        return; // Not scrolled by virtualizer yet, no need for additional scroll
+      }
+
+      if (!isTargetPresentInDom) {
+        return; // Target element is not present in DOM yet, additional scroll does not work without it
+      }
+
+      if (scrollState.virtualizer === scrollState.browser) {
+        return; // Virtualizer scroll has not been executed => no need for additional scroll
+      }
+
+      console.info('[DEBUG] SCROLLING BY BROWSER', selectedItem?.itemRef?.current);
+
+      selectedItem?.itemRef?.current?.scrollIntoView({ block: 'center' });
+
+      setScrollState(prevState => ({
+        ...prevState,
+        browser: selectedItemIndex,
+      }));
+    }, [scrollState, selectedItem?.itemRef, isTargetPresentInDom, selectedItemIndex]);
 
     const loadingJSX = useMemo(
       () =>
@@ -93,25 +197,23 @@ export const ListPrivate = forwardRef(
 
     const content = useMemo(
       () => (
-        <div className={styles.content}>
+        <>
           {virtualized ? (
             <div className={styles.virtualizedContainer} style={{ height: virtualizer.getTotalSize() }} tabIndex={-1}>
-              <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>
+              {virtualItems.map(virtualRow => (
+                <div
+                  key={virtualRow.key}
+                  data-index={virtualRow.index}
+                  ref={virtualizer.measureElement}
+                  tabIndex={-1}
+                  className={styles.virtualizedPositionBox}
+                  style={{
+                    transform: `translateY(${virtualRow.start}px)`,
+                  }}
+                >
+                  {itemsJSX[virtualRow.index]}
+                </div>
+              ))}
             </div>
           ) : (
             itemsJSX
@@ -126,7 +228,7 @@ export const ListPrivate = forwardRef(
             dataFiltered={dataFiltered ?? Boolean(search?.value)}
             size={size}
           />
-        </div>
+        </>
       ),
       [
         dataError,
@@ -144,22 +246,13 @@ export const ListPrivate = forwardRef(
       ],
     );
 
-    const onScrollInitialized = () => {
-      if (scrollToSelectedItem) {
-        if (!value) {
-          return;
-        }
-
-        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 onScrollInitialized = useCallback(() => {
+      if (!selectedItem) {
+        return;
       }
-    };
+
+      selectedItem?.itemRef?.current?.scrollIntoView({ block: 'center' });
+    }, [selectedItem]);
 
     const listJSX = (
       <ul
@@ -193,10 +286,7 @@ export const ListPrivate = forwardRef(
             )}
             barHideStrategy={barHideStrategy}
             size={size === 's' ? 's' : 'm'}
-            ref={ref => {
-              innerScrollRef.current = ref;
-              if (scrollContainerRef) (scrollContainerRef as React.MutableRefObject<HTMLElement | null>).current = ref;
-            }}
+            ref={mergeRefs(innerScrollRef, scrollContainerRef)}
             untouchableScrollbars={untouchableScrollbars}
             onScroll={onScroll}
             onInitialized={onScrollInitialized}