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

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

@@ -33,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,
@@ -78,7 +79,12 @@ 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 lastScrolledItemIndex = (0, react_1.useRef)(null);
+  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,
@@ -119,38 +125,64 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
   });
   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 (lastScrolledItemIndex.current === selectedItemIndex) {
+      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
       }
-      setTimeout(() => {
-        // Scroll to item by virtualizer method => required item will appear in DOM, but not perfectly centered
-        virtualizer.scrollToIndex(selectedItemIndex, {
-          align: 'center'
-        });
-        setTimeout(() => {
-          var _a, _b;
-          // Scroll to item already present in DOM by browser method – fixes imperfect virtualizer centering.
-          // We need perfect centering to avoid desired item from being overlapped by pinned groups (top or bottom)
-          (_b = (_a = selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
-            block: 'center'
-          });
-          lastScrolledItemIndex.current = selectedItemIndex;
-        }, 0);
-      }, 0);
+      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
     }
-  }, [isScrollToItemEnabled, selectedItem, selectedItemIndex, virtualizer]);
+    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,

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

@@ -13,7 +13,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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, 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';
@@ -25,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();
@@ -32,7 +33,8 @@ export const ListPrivate = forwardRef((_a, ref) => {
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
     const itemsPinBottomJSX = useRenderItems(pinBottom);
-    const lastScrolledItemIndex = useRef(null);
+    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(() => {
@@ -66,34 +68,54 @@ export const ListPrivate = forwardRef((_a, ref) => {
     });
     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 (lastScrolledItemIndex.current === selectedItemIndex) {
+            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
             }
-            setTimeout(() => {
-                // Scroll to item by virtualizer method => required item will appear in DOM, but not perfectly centered
-                virtualizer.scrollToIndex(selectedItemIndex, { align: 'center' });
-                setTimeout(() => {
-                    var _a, _b;
-                    // Scroll to item already present in DOM by browser method – fixes imperfect virtualizer centering.
-                    // We need perfect centering to avoid desired item from being overlapped by pinned groups (top or bottom)
-                    (_b = (_a = selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'center' });
-                    lastScrolledItemIndex.current = selectedItemIndex;
-                }, 0);
-            }, 0);
+            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
         }
-    }, [isScrollToItemEnabled, selectedItem, selectedItemIndex, virtualizer]);
+        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(() => (_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)`,

package/package.json

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

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

@@ -1,7 +1,7 @@
 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, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
@@ -16,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(
   (
     {
@@ -60,7 +66,8 @@ export const ListPrivate = forwardRef(
     const itemsPinTopJSX = useRenderItems(pinTop);
     const itemsPinBottomJSX = useRenderItems(pinBottom);
 
-    const lastScrolledItemIndex = useRef<number | null>(null);
+    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;
@@ -102,36 +109,74 @@ export const ListPrivate = forwardRef(
     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 (lastScrolledItemIndex.current === selectedItemIndex) {
+        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
         }
 
-        setTimeout(() => {
-          // Scroll to item by virtualizer method => required item will appear in DOM, but not perfectly centered
-          virtualizer.scrollToIndex(selectedItemIndex, { align: 'center' });
-
-          setTimeout(() => {
-            // Scroll to item already present in DOM by browser method – fixes imperfect virtualizer centering.
-            // We need perfect centering to avoid desired item from being overlapped by pinned groups (top or bottom)
-            selectedItem.itemRef?.current?.scrollIntoView({ block: 'center' });
-            lastScrolledItemIndex.current = selectedItemIndex;
-          }, 0);
-        }, 0);
+        console.info('[DEBUG] SCROLLING BY VIRTUALIZER');
+        virtualizer.scrollToIndex(selectedItemIndex, { align: 'center' });
+
+        setScrollState(prevState => ({
+          ...prevState,
+          virtualizer: selectedItemIndex,
+        }));
       }
-    }, [isScrollToItemEnabled, selectedItem, selectedItemIndex, virtualizer]);
+    }, [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(
       () =>