@astral/ui 4.104.2 → 4.106.0

package/node/components/InfiniteTreeList/TreeItem/useLogic/useLogic.d.ts

@@ -17,7 +17,7 @@ export declare const useLogic: ({ item, context, ...itemProps }: UseLogicParams)
     item: import("../../types").FlattenTree<import("../../types").InfiniteTreeListData>;
     renderItem: (item: import("../../types").FlattenTree<import("../../types").InfiniteTreeListData>) => import("react").ReactNode;
     onToggle: (item: import("../../types").InfiniteTreeListData) => void;
-    memoizedItemProps: {
+    itemProps: {
         style?: CSSProperties | undefined;
         'data-index': number;
         'data-item-group-index'?: number | undefined;
@@ -27,5 +27,6 @@ export declare const useLogic: ({ item, context, ...itemProps }: UseLogicParams)
     cssVars: CSSProperties;
     isSpinner: boolean;
     hasAddAnimation: boolean;
+    isLastRow: boolean;
 };
 export {};

package/node/components/InfiniteTreeList/TreeItem/useLogic/useLogic.js

@@ -17,8 +17,7 @@ const InfiniteTreeListContext_1 = require("../../InfiniteTreeListContext");
  * этого нет
  */
 const useLogic = ({ item, context, ...itemProps }) => {
-    const { renderItem, onToggle, nodePaginationMap, onLoadMore, enterAnimation, tailRegistry, } = (0, react_1.useContext)(InfiniteTreeListContext_1.InfiniteTreeListContext);
-    const memoizedItemProps = (0, react_1.useMemo)(() => itemProps, [itemProps.style]);
+    const { renderItem, onToggle, nodePaginationMap, onLoadMore, enterAnimation, tailRegistry, lastRowId, } = (0, react_1.useContext)(InfiniteTreeListContext_1.InfiniteTreeListContext);
     const { parentId, siblingIndex, level } = item.meta;
     const parentPagination = parentId ? nodePaginationMap[parentId] : undefined;
     const isLastChild = parentPagination?.lastChildId === item.id;
@@ -51,6 +50,7 @@ const useLogic = ({ item, context, ...itemProps }) => {
         };
     }, [shouldRegister, parentId, item.id, tailRegistry, onLoadMore]);
     const isSpinner = item.placeholderKind === 'spinner';
+    const isLastRow = item.id === lastRowId;
     // Уровень вложенности и индекс каскада — динамические значения, поэтому
     // передаются в стили через css vars, а не через styled props
     const cssVars = {
@@ -61,10 +61,11 @@ const useLogic = ({ item, context, ...itemProps }) => {
         item,
         renderItem,
         onToggle,
-        memoizedItemProps,
+        itemProps,
         cssVars,
         isSpinner,
         hasAddAnimation: !isSpinner && shouldAnimate,
+        isLastRow,
     };
 };
 exports.useLogic = useLogic;

package/node/components/InfiniteTreeList/constants.d.ts

@@ -6,13 +6,34 @@ export declare const OVERSCAN = 30;
  * data, поэтому `useLayoutEffect` снимает метку слишком рано
  */
 export declare const ENTER_ANIMATION_MOUNT_WINDOW_MS = 100;
+/**
+ * Предел, после которого переход между уровнями открывает список принудительно.
+ */
+export declare const LEVEL_TRANSITION_TIMEOUT_MS = 200;
 export declare const CHILDREN_SKELETON_COUNT = 3;
 export declare const CHILDREN_NO_DATA_MSG = "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445";
+/**
+ * Ключ корневого уровня в снимках позиции скролла: у корня нет id узла
+ */
+export declare const ROOT_LEVEL_KEY = "root";
+/**
+ * Префикс ключа уровня узла: отделяет id узлов от ключа корневого уровня
+ */
+export declare const NODE_LEVEL_KEY_PREFIX = "node:";
 export declare const infiniteTreeListClassnames: {
+    root: string;
+    loading: string;
+    noData: string;
+    error: string;
+    levelHeader: string;
+    levelHeaderWithBackButton: string;
+    levelHeaderBackButton: string;
+    levelTransition: string;
     row: string;
     rowAddAnimation: string;
     rowRemoveAnimation: string;
     rowSpinner: string;
+    rowLast: string;
     scrollToTopButton: string;
     visibleScrollToTopButton: string;
 };

package/node/components/InfiniteTreeList/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.infiniteTreeListClassnames = exports.CHILDREN_NO_DATA_MSG = exports.CHILDREN_SKELETON_COUNT = exports.ENTER_ANIMATION_MOUNT_WINDOW_MS = exports.OVERSCAN = exports.VIRTUOSO_CONTAINER_ID = void 0;
+exports.infiniteTreeListClassnames = exports.NODE_LEVEL_KEY_PREFIX = exports.ROOT_LEVEL_KEY = exports.CHILDREN_NO_DATA_MSG = exports.CHILDREN_SKELETON_COUNT = exports.LEVEL_TRANSITION_TIMEOUT_MS = exports.ENTER_ANIMATION_MOUNT_WINDOW_MS = exports.OVERSCAN = exports.VIRTUOSO_CONTAINER_ID = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.VIRTUOSO_CONTAINER_ID = 'virtuoso-container';
 exports.OVERSCAN = 30;
@@ -10,13 +10,34 @@ exports.OVERSCAN = 30;
  * data, поэтому `useLayoutEffect` снимает метку слишком рано
  */
 exports.ENTER_ANIMATION_MOUNT_WINDOW_MS = 100;
+/**
+ * Предел, после которого переход между уровнями открывает список принудительно.
+ */
+exports.LEVEL_TRANSITION_TIMEOUT_MS = 200;
 exports.CHILDREN_SKELETON_COUNT = 3;
 exports.CHILDREN_NO_DATA_MSG = 'Нет данных';
+/**
+ * Ключ корневого уровня в снимках позиции скролла: у корня нет id узла
+ */
+exports.ROOT_LEVEL_KEY = 'root';
+/**
+ * Префикс ключа уровня узла: отделяет id узлов от ключа корневого уровня
+ */
+exports.NODE_LEVEL_KEY_PREFIX = 'node:';
 exports.infiniteTreeListClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list'),
+    loading: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list_loading'),
+    noData: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list_no-data'),
+    error: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list_error'),
+    levelHeader: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__level-header'),
+    levelHeaderWithBackButton: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__level-header_with-back-button'),
+    levelHeaderBackButton: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__level-header-back-button'),
+    levelTransition: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list_level-transition'),
     row: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__row'),
     rowAddAnimation: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__row_add-animation'),
     rowRemoveAnimation: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__row_remove-animation'),
     rowSpinner: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__row_spinner'),
+    rowLast: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__row_last'),
     scrollToTopButton: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__scroll-to-top-button'),
     visibleScrollToTopButton: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__scroll-to-top-button_visible'),
 };

package/node/components/InfiniteTreeList/hooks/index.d.ts

@@ -2,4 +2,6 @@ export * from './useChildrenState';
 export * from './useEnterAnimation';
 export * from './useExpandNotifier';
 export * from './useFlatTree';
+export * from './useLevelNavigation';
 export * from './useListScroll';
+export * from './useNodeTitleValidation';

package/node/components/InfiniteTreeList/hooks/index.js

@@ -18,4 +18,6 @@ __exportStar(require("./useChildrenState"), exports);
 __exportStar(require("./useEnterAnimation"), exports);
 __exportStar(require("./useExpandNotifier"), exports);
 __exportStar(require("./useFlatTree"), exports);
+__exportStar(require("./useLevelNavigation"), exports);
 __exportStar(require("./useListScroll"), exports);
+__exportStar(require("./useNodeTitleValidation"), exports);

package/node/components/InfiniteTreeList/hooks/useLevelNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useLevelNavigation';

package/node/components/InfiniteTreeList/hooks/useLevelNavigation/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./useLevelNavigation"), exports);

package/node/components/InfiniteTreeList/hooks/useLevelNavigation/types.d.ts

@@ -0,0 +1,15 @@
+import type { InfiniteTreeListData } from '../../types';
+export type UseLevelNavigationParams<TData extends InfiniteTreeListData<TData>> = {
+    /**
+     * Список элементов дерева: из него выводится базовый уровень
+     */
+    items: TData[];
+    /**
+     * Флаг мобильного отображения
+     */
+    isMobile: boolean;
+    /**
+     * Функция проверки узла в списке
+     */
+    checkNodeExists: (nodeId: string) => boolean;
+};

package/node/components/InfiniteTreeList/hooks/useLevelNavigation/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/InfiniteTreeList/hooks/useLevelNavigation/useLevelNavigation.d.ts

@@ -0,0 +1,15 @@
+import type { InfiniteTreeListData } from '../../types';
+import type { UseLevelNavigationParams } from './types';
+/**
+ * Уровень, который список отображает на мобильной ширине: id текущего узла
+ * и стек пройденных узлов.
+ */
+export declare const useLevelNavigation: <TData extends InfiniteTreeListData<TData>>({ items, isMobile, checkNodeExists, }: UseLevelNavigationParams<TData>) => {
+    currentNodeId: string;
+    baseNodeId: string | undefined;
+    activeLevelKeys: string[];
+    hasUpperLevel: boolean;
+    isRootLevel: boolean;
+    enterNode: (itemId: string) => void;
+    leaveNode: () => void;
+};

package/node/components/InfiniteTreeList/hooks/useLevelNavigation/useLevelNavigation.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLevelNavigation = void 0;
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+/**
+ * Уровень, который список отображает на мобильной ширине: id текущего узла
+ * и стек пройденных узлов.
+ */
+const useLevelNavigation = ({ items, isMobile, checkNodeExists, }) => {
+    const [enteredIds, setEnteredIds] = (0, react_1.useState)([]);
+    const baseNodeId = (0, react_1.useMemo)(() => {
+        if (items.length !== 1) {
+            return undefined;
+        }
+        const [rootItem] = items;
+        return (0, utils_1.checkHasNested)(rootItem) ? rootItem.id : undefined;
+    }, [items]);
+    // Смена ширины в обе стороны возвращает список на базовый уровень
+    (0, react_1.useEffect)(() => {
+        setEnteredIds([]);
+    }, [isMobile]);
+    // Узел мог уйти из данных: показывать его уровень и всё, что ниже, нечем
+    (0, react_1.useEffect)(() => {
+        const lostIndex = enteredIds.findIndex((itemId) => !checkNodeExists(itemId));
+        if (lostIndex === -1) {
+            return;
+        }
+        setEnteredIds(enteredIds.slice(0, lostIndex));
+    }, [enteredIds, checkNodeExists]);
+    const enterNode = (0, react_1.useCallback)((itemId) => {
+        setEnteredIds((prev) => [...prev, itemId]);
+    }, []);
+    const leaveNode = (0, react_1.useCallback)(() => {
+        setEnteredIds((prev) => prev.slice(0, -1));
+    }, []);
+    // Уровни, до которых доберётся возврат
+    const activeLevelKeys = (0, react_1.useMemo)(() => [
+        (0, utils_1.getLevelKey)(isMobile ? baseNodeId : undefined),
+        ...enteredIds.map((itemId) => (0, utils_1.getLevelKey)(itemId)),
+    ], [isMobile, baseNodeId, enteredIds]);
+    return {
+        currentNodeId: enteredIds[enteredIds.length - 1] ?? baseNodeId,
+        baseNodeId,
+        activeLevelKeys,
+        hasUpperLevel: enteredIds.length > 0,
+        isRootLevel: !isMobile || (enteredIds.length === 0 && baseNodeId === undefined),
+        enterNode,
+        leaveNode,
+    };
+};
+exports.useLevelNavigation = useLevelNavigation;

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useLevelSnapshots';
+export * from './useScrollToTopButton';
+export * from './useTailWatcher';

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLevelSnapshots"), exports);
+__exportStar(require("./useScrollToTopButton"), exports);
+__exportStar(require("./useTailWatcher"), exports);

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useLevelSnapshots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useLevelSnapshots';

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useLevelSnapshots/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./useLevelSnapshots"), exports);

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useLevelSnapshots/types.d.ts

@@ -0,0 +1,16 @@
+import type { RefObject } from 'react';
+import type { VirtuosoHandle } from 'react-virtuoso';
+export type UseLevelSnapshotsParams = {
+    /**
+     * Ключ отображаемого уровня
+     */
+    levelKey: string;
+    /**
+     * Ключи уровней, до которых доберётся возврат: снимки остальных не нужны
+     */
+    activeLevelKeys: string[];
+    /**
+     * Ref на список: с него снимаются измеренные высоты строк
+     */
+    virtuosoRef: RefObject<VirtuosoHandle | null>;
+};

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useLevelSnapshots/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useLevelSnapshots/useLevelSnapshots.d.ts

@@ -0,0 +1,12 @@
+import type { StateSnapshot } from 'react-virtuoso';
+import type { UseLevelSnapshotsParams } from './types';
+/**
+ * Память уровней: куда был прокручен уровень и какими он намерил свои строки.
+ * Снимки живут, пока до уровня может добраться возврат
+ */
+export declare const useLevelSnapshots: ({ levelKey, activeLevelKeys, virtuosoRef, }: UseLevelSnapshotsParams) => {
+    rememberLevel: (offset: number) => void;
+    forgetLevel: (targetLevelKey: string) => void;
+    getLevelPosition: (targetLevelKey: string) => number | undefined;
+    levelState: StateSnapshot | undefined;
+};

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useLevelSnapshots/useLevelSnapshots.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLevelSnapshots = void 0;
+const react_1 = require("react");
+/**
+ * Память уровней: куда был прокручен уровень и какими он намерил свои строки.
+ * Снимки живут, пока до уровня может добраться возврат
+ */
+const useLevelSnapshots = ({ levelKey, activeLevelKeys, virtuosoRef, }) => {
+    // Позиция уровня запоминается смещением скролла внутри списка
+    const levelPositionsRef = (0, react_1.useRef)(new Map());
+    // Кеш измеренных высот у `Virtuoso` привязан к индексу строки, а не к её id,
+    // поэтому уровни затирают замеры друг друга. Снимок уровня возвращает его
+    // собственные высоты: иначе после возврата список ниже настоящего, и каждая
+    // строка, домеренная при прокрутке вверх, толкает позицию обратно вниз
+    const levelStatesRef = (0, react_1.useRef)(new Map());
+    const rememberLevel = (0, react_1.useCallback)((offset) => {
+        levelPositionsRef.current.set(levelKey, offset);
+        virtuosoRef.current?.getState((state) => {
+            levelStatesRef.current.set(levelKey, state);
+        });
+    }, [levelKey, virtuosoRef]);
+    const forgetLevel = (0, react_1.useCallback)((targetLevelKey) => {
+        levelPositionsRef.current.delete(targetLevelKey);
+        levelStatesRef.current.delete(targetLevelKey);
+    }, []);
+    const getLevelPosition = (0, react_1.useCallback)((targetLevelKey) => levelPositionsRef.current.get(targetLevelKey), []);
+    // Уровни вне текущего пути возврату недоступны, и их снимки только копятся
+    (0, react_1.useEffect)(() => {
+        const keptKeys = new Set(activeLevelKeys);
+        levelPositionsRef.current.forEach((_, key) => {
+            if (keptKeys.has(key)) {
+                return;
+            }
+            levelPositionsRef.current.delete(key);
+            levelStatesRef.current.delete(key);
+        });
+    }, [activeLevelKeys]);
+    return {
+        rememberLevel,
+        forgetLevel,
+        getLevelPosition,
+        levelState: levelStatesRef.current.get(levelKey),
+    };
+};
+exports.useLevelSnapshots = useLevelSnapshots;

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useScrollToTopButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useScrollToTopButton';

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useScrollToTopButton/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./useScrollToTopButton"), exports);

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useScrollToTopButton/types.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { VirtuosoHandle } from 'react-virtuoso';
+export type UseScrollToTopButtonParams = {
+    /**
+     * Ref на контейнер, в котором должен быть скролл
+     */
+    scrollRef: RefObject<HTMLElement | null>;
+    /**
+     * Ref на список: кнопка возвращает его к первой строке
+     */
+    virtuosoRef: RefObject<VirtuosoHandle | null>;
+};

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useScrollToTopButton/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useScrollToTopButton/useScrollToTopButton.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ListRange } from 'react-virtuoso';
+import type { UseScrollToTopButtonParams } from './types';
+/**
+ * Кнопка «наверх»: показывается, когда список ушёл от начала, и возвращает
+ * его к первой строке
+ */
+export declare const useScrollToTopButton: ({ scrollRef, virtuosoRef, }: UseScrollToTopButtonParams) => {
+    updateVisibility: (range: ListRange) => void;
+    onTopButtonProps: {
+        buttonRef: import("react").RefObject<HTMLButtonElement | null>;
+        handleScrollToTop: () => void;
+        scrollRef: import("react").RefObject<HTMLElement | null>;
+    };
+};

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useScrollToTopButton/useScrollToTopButton.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollToTopButton = void 0;
+const react_1 = require("react");
+const constants_1 = require("../../../../constants");
+/**
+ * Кнопка «наверх»: показывается, когда список ушёл от начала, и возвращает
+ * его к первой строке
+ */
+const useScrollToTopButton = ({ scrollRef, virtuosoRef, }) => {
+    const buttonRef = (0, react_1.useRef)(null);
+    // Класс переключается мимо рендера: кнопка меняется на каждом кадре скролла
+    const updateVisibility = (0, react_1.useCallback)((range) => {
+        buttonRef.current?.classList.toggle(constants_1.infiniteTreeListClassnames.visibleScrollToTopButton, range.startIndex > 2);
+    }, []);
+    const handleScrollToTop = (0, react_1.useCallback)(() => {
+        if (scrollRef.current) {
+            scrollRef.current.style.scrollBehavior = 'auto';
+        }
+        virtuosoRef.current?.scrollToIndex(0);
+    }, [scrollRef, virtuosoRef]);
+    return {
+        updateVisibility,
+        onTopButtonProps: {
+            buttonRef,
+            handleScrollToTop,
+            scrollRef,
+        },
+    };
+};
+exports.useScrollToTopButton = useScrollToTopButton;

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useTailWatcher/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useTailWatcher';

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useTailWatcher/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./useTailWatcher"), exports);

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useTailWatcher/types.d.ts

@@ -0,0 +1,11 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../../../types';
+export type UseTailWatcherParams<TData extends InfiniteTreeListData<TData>> = {
+    /**
+     * Строки, отданные `Virtuoso`
+     */
+    displayedList: FlattenTree<TData>[];
+    /**
+     * Ключ отображаемого уровня
+     */
+    levelKey: string;
+};

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useTailWatcher/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useTailWatcher/useTailWatcher.d.ts

@@ -0,0 +1,12 @@
+import type { ListRange } from 'react-virtuoso';
+import type { InfiniteTreeListData } from '../../../../types';
+import { type TailRegistry } from '../../../../utils';
+import type { UseTailWatcherParams } from './types';
+/**
+ * Хвосты вложенных веток: строки регистрируют себя сами, хук создаёт реестр
+ * и на смене видимого диапазона проверяет, попал ли хвост в кадр
+ */
+export declare const useTailWatcher: <TData extends InfiniteTreeListData<TData>>({ displayedList, levelKey, }: UseTailWatcherParams<TData>) => {
+    tailRegistry: TailRegistry;
+    trackRange: (range: ListRange) => void;
+};

package/node/components/InfiniteTreeList/hooks/useListScroll/hooks/useTailWatcher/useTailWatcher.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTailWatcher = void 0;
+const react_1 = require("react");
+const utils_1 = require("../../../../utils");
+/**
+ * Хвосты вложенных веток: строки регистрируют себя сами, хук создаёт реестр
+ * и на смене видимого диапазона проверяет, попал ли хвост в кадр
+ */
+const useTailWatcher = ({ displayedList, levelKey, }) => {
+    const tailRegistryRef = (0, react_1.useRef)(null);
+    if (!tailRegistryRef.current) {
+        tailRegistryRef.current = (0, utils_1.createTailRegistry)();
+    }
+    const tailRegistry = tailRegistryRef.current;
+    const displayedListRef = (0, react_1.useRef)(displayedList);
+    const lastRangeRef = (0, react_1.useRef)(null);
+    const checkTails = (0, react_1.useCallback)(() => {
+        const range = lastRangeRef.current;
+        if (!range) {
+            return;
+        }
+        tailRegistry.checkRange(range.endIndex, (itemId) => displayedListRef.current.findIndex((item) => item.id === itemId));
+    }, [tailRegistry]);
+    // Диапазон прежнего уровня к новому набору строк не относится
+    (0, react_1.useEffect)(() => {
+        lastRangeRef.current = null;
+        tailRegistry.forgetRange();
+    }, [levelKey, tailRegistry]);
+    (0, react_1.useEffect)(() => {
+        displayedListRef.current = displayedList;
+        checkTails();
+    }, [displayedList, checkTails]);
+    const trackRange = (0, react_1.useCallback)((range) => {
+        lastRangeRef.current = range;
+        checkTails();
+    }, [checkTails]);
+    return {
+        tailRegistry,
+        trackRange,
+    };
+};
+exports.useTailWatcher = useTailWatcher;

package/node/components/InfiniteTreeList/hooks/useListScroll/types.d.ts

@@ -15,11 +15,23 @@ export type UseListScrollParams<TData extends InfiniteTreeListData<TData>> = {
      */
     onLoadMore?: () => void;
     /**
-     * Плоский список: реестр хвостов ищет в нём позицию строки
+     * Строки, отданные `Virtuoso`
      */
-    flatListRef: RefObject<FlattenTree<TData>[]>;
+    displayedList: FlattenTree<TData>[];
     /**
      * Контроллер enter-анимации: скролл снимает метки со строк
      */
     enterAnimation: EnterAnimationResult;
+    /**
+     * Флаг корневого уровня
+     */
+    isRootLevel: boolean;
+    /**
+     * Ключ отображаемого уровня
+     */
+    levelKey: string;
+    /**
+     * Ключи активных узлов
+     */
+    activeLevelKeys: string[];
 };

package/node/components/InfiniteTreeList/hooks/useListScroll/useListScroll.d.ts

@@ -1,21 +1,24 @@
 /// <reference types="react" />
 import type { ListRange, VirtuosoHandle } from 'react-virtuoso';
 import type { InfiniteTreeListData } from '../../types';
-import { type TailRegistry } from '../../utils';
 import type { UseListScrollParams } from './types';
 /**
- * Скролл-обвязка списка: props для `Virtuoso`, кнопка «наверх» и реестр хвостов
- * вложенных веток. Хвосты регистрируют сами строки, хук создаёт реестр и на
- * смене видимого диапазона проверяет, попал ли хвост в кадр
+ * Скролл-обвязка списка: props для `Virtuoso`, переход между уровнями
+ * и сборка кнопки «наверх», реестра хвостов и памяти уровней
  */
-export declare const useListScroll: <TData extends InfiniteTreeListData<TData>>({ scrollRef, isEndReached, onLoadMore, flatListRef, enterAnimation, }: UseListScrollParams<TData>) => {
+export declare const useListScroll: <TData extends InfiniteTreeListData<TData>>({ scrollRef, isEndReached, onLoadMore, displayedList, enterAnimation, isRootLevel, levelKey, activeLevelKeys, }: UseListScrollParams<TData>) => {
     scrollParent: HTMLElement | null;
-    tailRegistry: TailRegistry;
+    listRef: import("react").RefObject<HTMLDivElement | null>;
+    tailRegistry: import("../../utils").TailRegistry;
     isEndReachedWithScroll: boolean | undefined;
+    saveLevelSnapshot: () => void;
+    dropLevelSnapshot: (targetLevelKey: string) => void;
     virtuosoProps: {
         id: string;
         ref: import("react").RefObject<VirtuosoHandle | null>;
         overscan: number;
+        restoreStateFrom: import("react-virtuoso").StateSnapshot | undefined;
+        initialTopMostItemIndex: number;
         rangeChanged: (range: ListRange) => void;
         endReached: () => void;
         totalListHeightChanged: () => void;