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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.30.0 (2025-06-23)
+
+
+### Features
+
+* **PDS-2461:** list virtualization scroll to initial value ([9ff5a87](https://github.com/cloud-ru-tech/snack-uikit/commit/9ff5a8781367fd3ea0bdc879fb4f5484228459be))
+
+
+
+
+
 ## 0.29.6 (2025-06-19)
 
 ### Only dependencies have been changed

package/dist/cjs/components/Lists/ListPrivate/ListPrivate.d.ts

@@ -1,3 +1,4 @@
+import { ItemId } from '../../Items';
 export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "hasListInFocusChain" | "pinTop" | "pinBottom"> & {
     nested?: boolean;
     active?: boolean;
@@ -8,7 +9,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
     limitedScrollHeight?: boolean;
     searchItem?: import("../../Items").FlattenBaseItem;
-    pinTop?: import("../../Items").ItemId[];
-    items: import("../../Items").ItemId[];
-    pinBottom?: import("../../Items").ItemId[];
+    pinTop?: ItemId[];
+    items: ItemId[];
+    pinBottom?: ItemId[];
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -84,7 +84,6 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
     browser: null,
     measured: false
   });
-  console.info('[DEBUG] ScrollState', scrollState);
   const emptyStates = (0, helperComponents_1.useEmptyState)({
     noDataState,
     noResultsState,
@@ -137,35 +136,32 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
   (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');
+      if (scrollState.virtualizer === selectedItem.originalId) {
         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
+        virtualizer: selectedItem.originalId
       }));
     }
   }, [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;
+    var _a, _b;
+    if (!selectedItem) {
+      return;
+    }
     if (scrollState.virtualizer === null) {
       return; // Not scrolled by virtualizer yet, no need for additional scroll
     }
@@ -175,14 +171,13 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
     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({
+    (_b = (_a = selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
       block: 'center'
     });
     setScrollState(prevState => Object.assign(Object.assign({}, prevState), {
-      browser: selectedItemIndex
+      browser: selectedItem.originalId
     }));
-  }, [scrollState, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef, isTargetPresentInDom, selectedItemIndex]);
+  }, [scrollState, selectedItem, 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.d.ts

@@ -1,3 +1,4 @@
+import { ItemId } from '../../Items';
 export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "hasListInFocusChain" | "pinTop" | "pinBottom"> & {
     nested?: boolean;
     active?: boolean;
@@ -8,7 +9,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
     limitedScrollHeight?: boolean;
     searchItem?: import("../../Items").FlattenBaseItem;
-    pinTop?: import("../../Items").ItemId[];
-    items: import("../../Items").ItemId[];
-    pinBottom?: import("../../Items").ItemId[];
+    pinTop?: ItemId[];
+    items: ItemId[];
+    pinBottom?: ItemId[];
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -34,7 +34,6 @@ export const ListPrivate = forwardRef((_a, ref) => {
     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(() => {
@@ -78,31 +77,28 @@ export const ListPrivate = forwardRef((_a, ref) => {
     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');
+            if (scrollState.virtualizer === selectedItem.originalId) {
                 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 })));
+            setScrollState(prevState => (Object.assign(Object.assign({}, prevState), { virtualizer: selectedItem.originalId })));
         }
     }, [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;
+        var _a, _b;
+        if (!selectedItem) {
+            return;
+        }
         if (scrollState.virtualizer === null) {
             return; // Not scrolled by virtualizer yet, no need for additional scroll
         }
@@ -112,10 +108,9 @@ export const ListPrivate = forwardRef((_a, ref) => {
         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]);
+        (_b = (_a = selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'center' });
+        setScrollState(prevState => (Object.assign(Object.assign({}, prevState), { browser: selectedItem.originalId })));
+    }, [scrollState, selectedItem, 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-c824da44.0",
+  "version": "0.30.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "edea7e461de9f4f112e73ed1de8c1063240d3164"
+  "gitHead": "cab80a84247484f1f7a06635d6d3d15ae7628aac"
 }

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

@@ -9,7 +9,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 
 import { ListEmptyState, useEmptyState } from '../../../helperComponents';
 import { stopPropagation } from '../../../utils';
-import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
+import { ItemId, PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
 import { useNewListContext, useSelectionContext } from '../contexts';
 import commonStyles from '../styles.module.scss';
 import { ListPrivateProps } from '../types';
@@ -17,8 +17,8 @@ import { ALL_SIZES } from './constants';
 import styles from './styles.module.scss';
 
 type ScrollState = {
-  virtualizer: number | null;
-  browser: number | null;
+  virtualizer: ItemId | null;
+  browser: ItemId | null;
   measured: boolean;
 };
 
@@ -67,7 +67,6 @@ export const ListPrivate = forwardRef(
     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;
@@ -125,30 +124,24 @@ export const ListPrivate = forwardRef(
 
     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');
+        if (scrollState.virtualizer === selectedItem.originalId) {
           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,
+          virtualizer: selectedItem.originalId,
         }));
       }
     }, [isScrollToItemEnabled, scrollState, selectedItem, selectedItemIndex, virtualizer]);
@@ -156,27 +149,26 @@ export const ListPrivate = forwardRef(
     const isTargetPresentInDom = Boolean(selectedItem?.itemRef?.current);
 
     useEffect(() => {
+      if (!selectedItem) {
+        return;
+      }
       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' });
+      selectedItem.itemRef?.current?.scrollIntoView({ block: 'center' });
 
       setScrollState(prevState => ({
         ...prevState,
-        browser: selectedItemIndex,
+        browser: selectedItem.originalId,
       }));
-    }, [scrollState, selectedItem?.itemRef, isTargetPresentInDom, selectedItemIndex]);
+    }, [scrollState, selectedItem, isTargetPresentInDom, selectedItemIndex]);
 
     const loadingJSX = useMemo(
       () =>