@astral/ui 4.99.2 → 4.101.0

package/components/InfiniteTreeList/useLogic/useLogic.js

@@ -1,51 +1,53 @@
-import { useContext, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useContext, useMemo, useRef } from 'react';
 import { ConfigContext } from '../../ConfigProvider';
-import { useTheme } from '../../theme/hooks/useTheme';
-import { useScrollManagement } from '../../useScrollManagement';
-import { useSet } from '../../useSet';
-import { useStickyButton } from '../../useStickyButton';
-import { infiniteTreeListClassnames, VIRTUOSO_CONTAINER_ID, } from '../constants';
-import { flattenTree, getDescendants, getInitialExpandedIds, sortCollapsed, } from './utils';
-export const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isError, isLoading, scrollRef, isEndReached, onLoadMore, renderItem, itemSkeleton, endOfScrollMsg, noDataImgSrc, errorImgSrc, }) => {
+import { CHILDREN_SKELETON_COUNT } from '../constants';
+import { useChildrenState, useEnterAnimation, useExpandNotifier, useFlatTree, useListScroll, } from '../hooks';
+import { createParentSlots } from '../utils';
+/**
+ * Логика списка: сводит плоский список, данные дочерних элементов, скролл
+ * и анимацию появления строк в props для `Virtuoso` и дочерних компонентов
+ */
+export const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isError, isLoading, scrollRef, isEndReached, onLoadMore, renderItem, renderParent, itemSkeleton, endOfScrollMsg, noDataImgSrc, errorImgSrc, }) => {
     const { imagesMap } = useContext(ConfigContext);
-    const theme = useTheme();
-    const [internalExpanded, internalExpandedActions] = useSet(new Set());
-    // Set из ParentId открытых недавно нод. Используется для контролирования анимации открытия.
-    // ParentId удаляется из Set после завершения анимации на всех Children
-    const recentlyExpandedIds = useRef(new Set());
-    // Добавляет classname для анимации закрытия элемента
-    const startRemoveAnimation = (nodeId) => {
-        const treeItem = document.getElementById(nodeId);
-        treeItem?.classList.add(infiniteTreeListClassnames.removeAnimation);
-    };
-    useEffect(() => {
-        const next = getInitialExpandedIds(internalExpanded, items, initialExpandedLevel);
-        next.forEach((item) => internalExpandedActions.add(item));
-    }, [items]);
-    /**
-     * Дерево, преобразованное в плоский список. Такая структура необходима для полноценной виртуализации
-     */
-    const flatList = useMemo(() => flattenTree(items, internalExpanded), [items, internalExpanded]);
-    const onToggle = ({ id: itemId }) => {
-        const isExpanded = internalExpanded.has(itemId);
-        if (!isExpanded) {
-            recentlyExpandedIds.current.add(itemId);
-            internalExpandedActions.add(itemId);
-        }
-        else {
-            const children = sortCollapsed(getDescendants(flatList, itemId));
-            children.forEach(({ meta }) => startRemoveAnimation(meta.nodeId));
-            const collapseDurationMs = theme.transitions.duration.shorter;
-            setTimeout(() => {
-                internalExpandedActions.remove(itemId);
-                children.forEach(({ id }) => internalExpandedActions.remove(id));
-            }, collapseDurationMs);
-        }
-    };
+    const enterAnimation = useEnterAnimation();
+    const parentSlotsRef = useRef(null);
+    if (!parentSlotsRef.current) {
+        parentSlotsRef.current = createParentSlots();
+    }
+    const acquireParentSlot = useCallback((itemId) => parentSlotsRef.current?.acquire(itemId) ?? null, []);
+    const releaseParentSlot = useCallback((itemId) => {
+        parentSlotsRef.current?.release(itemId);
+    }, []);
+    const { notifyExpand, resetExpandNotification } = useExpandNotifier();
+    const { flatList, flatListRef, expandedIds, expandedIdsRef, insertChildren, syncChildrenPlaceholders, onToggle, } = useFlatTree({
+        items,
+        initialExpandedLevel,
+        enterAnimation,
+        onCollapse: resetExpandNotification,
+    });
+    const { registerChildren, nodePaginationMap, parentItems } = useChildrenState({
+        items,
+        flatList,
+        flatListRef,
+        expandedIds,
+        expandedIdsRef,
+        enterAnimation,
+        insertChildren,
+        syncChildrenPlaceholders,
+        skeletonCount: itemSkeleton ? CHILDREN_SKELETON_COUNT : 1,
+        releaseParentSlot,
+    });
+    const { scrollParent, tailRegistry, isEndReachedWithScroll, virtuosoProps, onTopButtonProps, } = useListScroll({
+        scrollRef,
+        isEndReached,
+        onLoadMore,
+        flatListRef,
+        enterAnimation,
+    });
     const contentStateProps = useMemo(() => {
         const isNoData = !items?.length;
         return {
-            // Проверка на текущие элементы списка необходима для рендера loading состояния при подгрузки данных
+            // Проверка на текущие элементы списка необходима для рендера loading состояния при подгрузке данных
             // вместо общего LoadingPlaceholder на всю страницу
             isLoading: isNoData && isLoading,
             isError: isNoData && isError,
@@ -57,43 +59,36 @@ export const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isErr
                 onRetry,
             },
         };
-    }, [items, isLoading, isError, errorMsg, onRetry, imagesMap]);
-    const { scrollParent, recalculateVerticalScroll, handleEndReach, isEndReachedWithScroll, } = useScrollManagement({
-        scrollRef,
-        isEndReached,
-        onLoadMore,
-        virtuosoId: VIRTUOSO_CONTAINER_ID,
-    });
-    const { virtuoso, isStickyButtonActive, handleRangeChanged, handleScrollToTop, } = useStickyButton(scrollRef);
+    }, [items, isLoading, isError, errorMsg, errorImgSrc, onRetry, imagesMap]);
+    const footerContext = useMemo(() => ({
+        isLoading,
+        isError,
+        isEndReached: isEndReachedWithScroll,
+        endOfScrollMsg,
+        onRetry,
+    }), [isLoading, isError, isEndReachedWithScroll, endOfScrollMsg, onRetry]);
     return {
         flatList,
         onToggle,
+        nodePaginationMap,
+        registerChildren,
+        notifyExpand,
+        parentItems,
+        acquireParentSlot,
         contentStateProps,
         scrollParent,
-        virtuosoProps: {
-            id: VIRTUOSO_CONTAINER_ID,
-            ref: virtuoso,
-            rangeChanged: handleRangeChanged,
-            endReached: handleEndReach,
-            totalListHeightChanged: recalculateVerticalScroll,
-        },
-        footerProps: {
-            isError,
-            isLoading,
-            isEndReached: isEndReachedWithScroll,
-        },
-        onTopButtonProps: {
-            isActive: isStickyButtonActive,
-            handleScrollToTop,
-            scrollRef,
-        },
-        endOfScrollMsg,
+        virtuosoProps,
+        footerContext,
+        onTopButtonProps,
         itemSkeleton,
         renderItem,
+        // Fallback подставляется один раз: ниже по дереву строка выбирает функцию по
+        // типу узла, не проверяя, передал ли потребитель renderParent
+        renderParent: renderParent ?? renderItem,
         items,
-        onLoadMore,
         onRetry,
         noDataImgSrc,
-        recentlyExpandedIds,
+        enterAnimation,
+        tailRegistry,
     };
 };

package/components/InfiniteTreeList/utils/checkHasSkeletonPlaceholders/checkHasSkeletonPlaceholders.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Есть ли у родителя строки-заглушки skeleton
+ */
+export declare const checkHasSkeletonPlaceholders: <TData extends InfiniteTreeListData<TData>>(flatList: FlattenTree<TData>[], parentId: string) => boolean;

package/components/InfiniteTreeList/utils/checkHasSkeletonPlaceholders/checkHasSkeletonPlaceholders.js

@@ -0,0 +1,6 @@
+import { checkIsChildrenPlaceholderOf } from '../checkIsChildrenPlaceholderOf';
+/**
+ * Есть ли у родителя строки-заглушки skeleton
+ */
+export const checkHasSkeletonPlaceholders = (flatList, parentId) => flatList.some((item) => checkIsChildrenPlaceholderOf(item, parentId) &&
+    item.placeholderKind === 'skeleton');

package/components/InfiniteTreeList/utils/checkHasSkeletonPlaceholders/index.d.ts

@@ -0,0 +1 @@
+export * from './checkHasSkeletonPlaceholders';

package/components/InfiniteTreeList/utils/checkHasSkeletonPlaceholders/index.js

@@ -0,0 +1 @@
+export * from './checkHasSkeletonPlaceholders';

package/components/InfiniteTreeList/utils/checkIsChildrenPlaceholder/checkIsChildrenPlaceholder.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Проверяет, является ли элемент строкой-заглушкой ветки
+ */
+export declare const checkIsChildrenPlaceholder: <TData extends InfiniteTreeListData<TData>>(item: FlattenTree<TData>) => boolean;

package/components/InfiniteTreeList/utils/checkIsChildrenPlaceholder/checkIsChildrenPlaceholder.js

@@ -0,0 +1,4 @@
+/**
+ * Проверяет, является ли элемент строкой-заглушкой ветки
+ */
+export const checkIsChildrenPlaceholder = (item) => Boolean(item.placeholderKind);

package/components/InfiniteTreeList/utils/checkIsChildrenPlaceholder/index.d.ts

@@ -0,0 +1 @@
+export * from './checkIsChildrenPlaceholder';

package/components/InfiniteTreeList/utils/checkIsChildrenPlaceholder/index.js

@@ -0,0 +1 @@
+export * from './checkIsChildrenPlaceholder';

package/components/InfiniteTreeList/utils/checkIsChildrenPlaceholderOf/checkIsChildrenPlaceholderOf.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Проверяет, является ли элемент строкой-заглушкой ветки конкретного родителя
+ */
+export declare const checkIsChildrenPlaceholderOf: <TData extends InfiniteTreeListData<TData>>(item: FlattenTree<TData>, parentId: string) => boolean;

package/components/InfiniteTreeList/utils/checkIsChildrenPlaceholderOf/checkIsChildrenPlaceholderOf.js

@@ -0,0 +1,5 @@
+import { checkIsChildrenPlaceholder } from '../checkIsChildrenPlaceholder';
+/**
+ * Проверяет, является ли элемент строкой-заглушкой ветки конкретного родителя
+ */
+export const checkIsChildrenPlaceholderOf = (item, parentId) => item.meta.parentId === parentId && checkIsChildrenPlaceholder(item);

package/components/InfiniteTreeList/utils/checkIsChildrenPlaceholderOf/index.d.ts

@@ -0,0 +1 @@
+export * from './checkIsChildrenPlaceholderOf';

package/components/InfiniteTreeList/utils/checkIsChildrenPlaceholderOf/index.js

@@ -0,0 +1 @@
+export * from './checkIsChildrenPlaceholderOf';

package/components/InfiniteTreeList/utils/checkIsDirectChild/checkIsDirectChild.d.ts

@@ -0,0 +1,6 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Проверяет, является ли элемент прямым дочерним элементом родителя.
+ * Строки-заглушки ветки прямыми дочерними элементами не считаются
+ */
+export declare const checkIsDirectChild: <TData extends InfiniteTreeListData<TData>>(item: FlattenTree<TData>, parentId: string) => boolean;

package/components/InfiniteTreeList/utils/checkIsDirectChild/checkIsDirectChild.js

@@ -0,0 +1,6 @@
+import { checkIsChildrenPlaceholder } from '../checkIsChildrenPlaceholder';
+/**
+ * Проверяет, является ли элемент прямым дочерним элементом родителя.
+ * Строки-заглушки ветки прямыми дочерними элементами не считаются
+ */
+export const checkIsDirectChild = (item, parentId) => item.meta.parentId === parentId && !checkIsChildrenPlaceholder(item);

package/components/InfiniteTreeList/utils/checkIsDirectChild/index.d.ts

@@ -0,0 +1 @@
+export * from './checkIsDirectChild';

package/components/InfiniteTreeList/utils/checkIsDirectChild/index.js

@@ -0,0 +1 @@
+export * from './checkIsDirectChild';

package/components/InfiniteTreeList/utils/checkIsNoDataChildren/checkIsNoDataChildren.d.ts

@@ -0,0 +1,12 @@
+import type { InfiniteTreeChildrenPagination, InfiniteTreeListData } from '../../types';
+/**
+ * Пришли ли раскрытому узлу пустые дочерние элементы, для которых нужно
+ * показать заглушку «Нет данных».
+ *
+ * Пустые дочерние элементы без ошибки — ещё не признак отсутствия данных:
+ * до первого запроса узел отдаёт такое же пустое состояние, и заглушка мигала
+ * бы перед skeleton-строками. Поэтому дочерние элементы считаются
+ * загруженными, только если узел уже побывал в состоянии загрузки либо сам
+ * сообщил `isEndReached`
+ */
+export declare const checkIsNoDataChildren: <TData extends InfiniteTreeListData<TData>>(childrenState: InfiniteTreeChildrenPagination<TData>, hasLoadedOnce: boolean) => boolean;

package/components/InfiniteTreeList/utils/checkIsNoDataChildren/checkIsNoDataChildren.js

@@ -0,0 +1,14 @@
+/**
+ * Пришли ли раскрытому узлу пустые дочерние элементы, для которых нужно
+ * показать заглушку «Нет данных».
+ *
+ * Пустые дочерние элементы без ошибки — ещё не признак отсутствия данных:
+ * до первого запроса узел отдаёт такое же пустое состояние, и заглушка мигала
+ * бы перед skeleton-строками. Поэтому дочерние элементы считаются
+ * загруженными, только если узел уже побывал в состоянии загрузки либо сам
+ * сообщил `isEndReached`
+ */
+export const checkIsNoDataChildren = (childrenState, hasLoadedOnce) => !childrenState.isLoading &&
+    !childrenState.isError &&
+    childrenState.data.length === 0 &&
+    (Boolean(childrenState.isEndReached) || hasLoadedOnce);

package/components/InfiniteTreeList/utils/checkIsNoDataChildren/index.d.ts

@@ -0,0 +1 @@
+export * from './checkIsNoDataChildren';

package/components/InfiniteTreeList/utils/checkIsNoDataChildren/index.js

@@ -0,0 +1 @@
+export * from './checkIsNoDataChildren';

package/components/InfiniteTreeList/utils/checkIsSameChildren/checkIsSameChildren.d.ts

@@ -0,0 +1,5 @@
+import type { InfiniteTreeChildrenPagination, InfiniteTreeListData } from '../../types';
+/**
+ * Сравнивает данные дочерних элементов узла по содержимому
+ */
+export declare const checkIsSameChildren: <TData extends InfiniteTreeListData<TData>>(current?: InfiniteTreeChildrenPagination<TData> | undefined, next?: InfiniteTreeChildrenPagination<TData> | undefined) => boolean;

package/components/InfiniteTreeList/utils/checkIsSameChildren/checkIsSameChildren.js

@@ -0,0 +1,16 @@
+/**
+ * Сравнивает данные дочерних элементов узла по содержимому
+ */
+export const checkIsSameChildren = (current, next) => {
+    if (current === next) {
+        return true;
+    }
+    if (!current || !next) {
+        return false;
+    }
+    return (current.isLoading === next.isLoading &&
+        current.isError === next.isError &&
+        current.isEndReached === next.isEndReached &&
+        current.data.length === next.data.length &&
+        current.data.every((item, index) => item.id === next.data[index]?.id));
+};

package/components/InfiniteTreeList/utils/checkIsSameChildren/index.d.ts

@@ -0,0 +1 @@
+export * from './checkIsSameChildren';

package/components/InfiniteTreeList/utils/checkIsSameChildren/index.js

@@ -0,0 +1 @@
+export * from './checkIsSameChildren';

package/components/InfiniteTreeList/utils/countDirectChildren/countDirectChildren.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Количество прямых дочерних элементов родителя без строк-заглушек
+ */
+export declare const countDirectChildren: <TData extends InfiniteTreeListData<TData>>(flatList: FlattenTree<TData>[], parentId: string) => number;

package/components/InfiniteTreeList/utils/countDirectChildren/countDirectChildren.js

@@ -0,0 +1,5 @@
+import { checkIsDirectChild } from '../checkIsDirectChild';
+/**
+ * Количество прямых дочерних элементов родителя без строк-заглушек
+ */
+export const countDirectChildren = (flatList, parentId) => flatList.filter((item) => checkIsDirectChild(item, parentId)).length;

package/components/InfiniteTreeList/utils/countDirectChildren/index.d.ts

@@ -0,0 +1 @@
+export * from './countDirectChildren';

package/components/InfiniteTreeList/utils/countDirectChildren/index.js

@@ -0,0 +1 @@
+export * from './countDirectChildren';

package/components/InfiniteTreeList/utils/createParentSlots/createParentSlots.d.ts

@@ -0,0 +1,24 @@
+export type ParentSlots = {
+    /**
+     * Отдаёт контейнер строки узла, создавая его при первом обращении
+     */
+    acquire: (itemId: string) => HTMLDivElement | null;
+    /**
+     * Выбрасывает контейнер узла вместе с его поддеревом
+     */
+    release: (itemId: string) => void;
+};
+/**
+ * Реестр постоянных контейнеров строк узлов с подгружаемыми дочерними
+ * элементами.
+ *
+ * Такая строка монтируется один раз, вне виртуализации, и живёт, пока жив
+ * список: виртуализация переносит её готовый DOM-узел в строку скролла и
+ * обратно, а React-поддерево при этом не размонтируется. Иначе состояние
+ * строки — store, query, локальный state — умирало бы на каждом скролле.
+ *
+ * Контейнер обязан быть стабильным: смена контейнера в `createPortal` — для
+ * React другой узел, он размонтирует поддерево и состояние потеряется. Поэтому
+ * переносится сам контейнер, а не содержимое портала
+ */
+export declare const createParentSlots: () => ParentSlots;

package/components/InfiniteTreeList/utils/createParentSlots/createParentSlots.js

@@ -0,0 +1,35 @@
+/**
+ * Реестр постоянных контейнеров строк узлов с подгружаемыми дочерними
+ * элементами.
+ *
+ * Такая строка монтируется один раз, вне виртуализации, и живёт, пока жив
+ * список: виртуализация переносит её готовый DOM-узел в строку скролла и
+ * обратно, а React-поддерево при этом не размонтируется. Иначе состояние
+ * строки — store, query, локальный state — умирало бы на каждом скролле.
+ *
+ * Контейнер обязан быть стабильным: смена контейнера в `createPortal` — для
+ * React другой узел, он размонтирует поддерево и состояние потеряется. Поэтому
+ * переносится сам контейнер, а не содержимое портала
+ */
+export const createParentSlots = () => {
+    const slots = new Map();
+    return {
+        acquire: (itemId) => {
+            if (typeof document === 'undefined') {
+                return null;
+            }
+            const slot = slots.get(itemId);
+            if (slot) {
+                return slot;
+            }
+            const created = document.createElement('div');
+            created.style.display = 'contents';
+            slots.set(itemId, created);
+            return created;
+        },
+        release: (itemId) => {
+            slots.get(itemId)?.remove();
+            slots.delete(itemId);
+        },
+    };
+};

package/components/InfiniteTreeList/utils/createParentSlots/index.d.ts

@@ -0,0 +1 @@
+export * from './createParentSlots';

package/components/InfiniteTreeList/utils/createParentSlots/index.js

@@ -0,0 +1 @@
+export * from './createParentSlots';

package/components/InfiniteTreeList/utils/createTailRegistry/createTailRegistry.d.ts

@@ -0,0 +1,21 @@
+export type TailRegistry = {
+    /**
+     * Регистрирует хвост ветки. Тот же `parentId` и `itemId` — обновляет callback.
+     * Новый `itemId` сбрасывает `isLoadMoreRequested`
+     */
+    register: (parentId: string, itemId: string, endReached: () => void) => void;
+    /**
+     * Удаляет запись. Без `itemId` — всегда. С `itemId` — только если совпал хвост
+     */
+    unregister: (parentId: string, itemId?: string) => void;
+    /**
+     * Вызывает `endReached` для хвостов, чей индекс попадает в видимый диапазон.
+     * `getIndex === -1` пропускает запись
+     */
+    checkRange: (endIndex: number, getIndex: (itemId: string) => number) => void;
+};
+/**
+ * Реестр хвостов вложенных веток. Живёт на экземпляре списка и переживает
+ * размонтирование строки виртуализацией
+ */
+export declare const createTailRegistry: () => TailRegistry;

package/components/InfiniteTreeList/utils/createTailRegistry/createTailRegistry.js

@@ -0,0 +1,40 @@
+/**
+ * Реестр хвостов вложенных веток. Живёт на экземпляре списка и переживает
+ * размонтирование строки виртуализацией
+ */
+export const createTailRegistry = () => {
+    const entries = new Map();
+    return {
+        register(parentId, itemId, endReached) {
+            const existing = entries.get(parentId);
+            if (existing && existing.itemId === itemId) {
+                existing.endReached = endReached;
+                return;
+            }
+            entries.set(parentId, { itemId, endReached, isLoadMoreRequested: false });
+        },
+        unregister(parentId, itemId) {
+            if (itemId === undefined) {
+                entries.delete(parentId);
+                return;
+            }
+            const existing = entries.get(parentId);
+            if (existing?.itemId === itemId) {
+                entries.delete(parentId);
+            }
+        },
+        checkRange(endIndex, getIndex) {
+            entries.forEach((entry) => {
+                if (entry.isLoadMoreRequested) {
+                    return;
+                }
+                const index = getIndex(entry.itemId);
+                if (index === -1 || endIndex < index) {
+                    return;
+                }
+                entry.isLoadMoreRequested = true;
+                entry.endReached();
+            });
+        },
+    };
+};

package/components/InfiniteTreeList/utils/createTailRegistry/index.d.ts

@@ -0,0 +1 @@
+export { createTailRegistry, type TailRegistry } from './createTailRegistry';

package/components/InfiniteTreeList/utils/createTailRegistry/index.js

@@ -0,0 +1 @@
+export { createTailRegistry } from './createTailRegistry';

package/components/InfiniteTreeList/utils/flattenChildren/flattenChildren.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, FlattenTreeParent, InfiniteTreeListData } from '../../types';
+/**
+ * Строит плоский список дочерних элементов относительно родителя
+ */
+export declare const flattenChildren: <TData extends InfiniteTreeListData<TData>>(children: TData[], parent: FlattenTreeParent, expandedIds: Set<string>) => FlattenTree<TData>[];

package/components/InfiniteTreeList/utils/flattenChildren/flattenChildren.js

@@ -0,0 +1,5 @@
+import { flattenTree } from '../flattenTree';
+/**
+ * Строит плоский список дочерних элементов относительно родителя
+ */
+export const flattenChildren = (children, parent, expandedIds) => flattenTree(children, expandedIds, parent.meta.path, parent.meta.level + 1, parent.id);

package/components/InfiniteTreeList/utils/flattenChildren/index.d.ts

@@ -0,0 +1 @@
+export * from './flattenChildren';

package/components/InfiniteTreeList/utils/flattenChildren/index.js

@@ -0,0 +1 @@
+export * from './flattenChildren';

package/components/InfiniteTreeList/utils/flattenTree/flattenTree.d.ts

@@ -0,0 +1,6 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Преобразует дерево в плоский список для виртуализации.
+ * Можно вызвать для всего дерева или для ветки относительно родителя
+ */
+export declare const flattenTree: <TData extends InfiniteTreeListData<TData>>(items: TData[], expandedIds: Set<string>, parentPath?: string[], level?: number, parentId?: string) => FlattenTree<TData>[];

package/components/InfiniteTreeList/{useLogic/utils → utils}/flattenTree/flattenTree.js

@@ -1,16 +1,22 @@
 /**
- * Преобразует древовидную структуру в плоский список для виртуализации
+ * Проверяет, подгружаются ли дочерние элементы узла отдельно.
+ */
+const getIsChildrenAsync = (item) => item.hasChildren === true || item.children?.length === 0;
+/**
+ * Преобразует дерево в плоский список для виртуализации.
+ * Можно вызвать для всего дерева или для ветки относительно родителя
  */
 export const flattenTree = (items, expandedIds, parentPath = [], level = 0, parentId) => {
     const result = [];
     items.forEach((item, index) => {
         const path = [...parentPath, item.id];
         const isExpanded = expandedIds.has(item.id);
-        // Создаем flattened item с правильной типизацией
+        const isChildrenAsync = Boolean(getIsChildrenAsync(item));
         const flattenedItem = {
             ...item,
             meta: {
-                hasNested: Boolean(item.children),
+                hasNested: Boolean(item.children) || item.hasChildren === true,
+                isChildrenAsync,
                 level,
                 path,
                 isExpanded,
@@ -20,7 +26,6 @@ export const flattenTree = (items, expandedIds, parentPath = [], level = 0, pare
             },
         };
         result.push(flattenedItem);
-        // Рекурсивно обрабатываем детей с сохранением типизации
         if (isExpanded && item.children && item.children.length > 0) {
             const childItems = flattenTree(item.children, expandedIds, path, level + 1, item.id);
             result.push(...childItems);

package/components/InfiniteTreeList/utils/getEnteringChildren/getEnteringChildren.d.ts

@@ -0,0 +1,17 @@
+type EnteringChildren = {
+    /**
+     * id дочерних элементов, которые должны появиться с enter-анимацией
+     */
+    itemIds: string[];
+    /**
+     * Индекс каскадной задержки первого анимируемого дочернего элемента
+     */
+    startDelayIndex: number;
+};
+/**
+ * Определяет, какие дочерние элементы родителя должны появиться
+ * с enter-анимацией. Уже показанные дочерние элементы и занятые места
+ * skeleton-узлов анимацию не получают
+ */
+export declare const getEnteringChildren: (childIds: string[], existingDirectCount: number, skeletonCount: number) => EnteringChildren;
+export {};

package/components/InfiniteTreeList/utils/getEnteringChildren/getEnteringChildren.js

@@ -0,0 +1,14 @@
+// cspell:ignore анимируемого
+/**
+ * Определяет, какие дочерние элементы родителя должны появиться
+ * с enter-анимацией. Уже показанные дочерние элементы и занятые места
+ * skeleton-узлов анимацию не получают
+ */
+export const getEnteringChildren = (childIds, existingDirectCount, skeletonCount) => {
+    const isReplacingSkeletons = existingDirectCount === 0 && skeletonCount > 0;
+    const skipCount = isReplacingSkeletons ? skeletonCount : existingDirectCount;
+    return {
+        itemIds: childIds.slice(skipCount),
+        startDelayIndex: isReplacingSkeletons ? skipCount : 0,
+    };
+};

package/components/InfiniteTreeList/utils/getEnteringChildren/index.d.ts

@@ -0,0 +1 @@
+export * from './getEnteringChildren';

package/components/InfiniteTreeList/utils/getEnteringChildren/index.js

@@ -0,0 +1 @@
+export * from './getEnteringChildren';

package/components/InfiniteTreeList/utils/getIdsToKeep/getIdsToKeep.d.ts

@@ -0,0 +1,10 @@
+import type { InfiniteTreeChildrenPagination, InfiniteTreeListData } from '../../types';
+/**
+ * Собирает id узлов, которые нужно оставить при очистке: те, до которых можно
+ * дойти по данным списка.
+ *
+ * Обход идёт сверху вниз: от `items` к их загруженным дочерним элементам и
+ * дальше вглубь. Поэтому ветка, отрезанная сменой набора данных, в результат
+ * не попадёт, даже если её дочерние элементы ещё лежат в загруженных
+ */
+export declare const getIdsToKeep: <TData extends InfiniteTreeListData<TData>>(items: TData[], childrenStateMap: Record<string, InfiniteTreeChildrenPagination<TData>>) => Set<string>;

package/components/InfiniteTreeList/utils/getIdsToKeep/getIdsToKeep.js

@@ -0,0 +1,27 @@
+/**
+ * Собирает id узлов, которые нужно оставить при очистке: те, до которых можно
+ * дойти по данным списка.
+ *
+ * Обход идёт сверху вниз: от `items` к их загруженным дочерним элементам и
+ * дальше вглубь. Поэтому ветка, отрезанная сменой набора данных, в результат
+ * не попадёт, даже если её дочерние элементы ещё лежат в загруженных
+ */
+export const getIdsToKeep = (items, childrenStateMap) => {
+    const idsToKeep = new Set();
+    const queue = [...items];
+    while (queue.length > 0) {
+        const item = queue.pop();
+        if (!item || idsToKeep.has(item.id)) {
+            continue;
+        }
+        idsToKeep.add(item.id);
+        if (item.children?.length) {
+            queue.push(...item.children);
+        }
+        const loadedChildren = childrenStateMap[item.id]?.data;
+        if (loadedChildren?.length) {
+            queue.push(...loadedChildren);
+        }
+    }
+    return idsToKeep;
+};