@astral/ui 4.100.0 → 4.101.0

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

@@ -2,11 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const cva_1 = require("../../utils/cva");
+const constants_1 = require("../constants");
+const InfiniteTreeListItem_1 = require("../InfiniteTreeListItem");
+const ChildrenPlaceholder_1 = require("./ChildrenPlaceholder");
+const CustomItemWrapper_1 = require("./CustomItemWrapper");
+const ParentSlot_1 = require("./ParentSlot");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const TreeItem = (props) => {
-    const { item, renderItem, classname, onAnimationEnd } = (0, useLogic_1.useLogic)(props);
-    const { nodeId, level, siblingIndex } = item.meta;
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { id: nodeId, className: classname, "$level": level, "$siblingIndex": siblingIndex, onAnimationEnd: onAnimationEnd, children: renderItem(item) }));
+const treeItemCva = (0, cva_1.cva)(constants_1.infiniteTreeListClassnames.row, {
+    variants: {
+        isSpinner: {
+            true: constants_1.infiniteTreeListClassnames.rowSpinner,
+        },
+        hasAddAnimation: {
+            true: constants_1.infiniteTreeListClassnames.rowAddAnimation,
+        },
+    },
+});
+/**
+ * Строка виртуализации: обёртка, которую `Virtuoso` рендерит вокруг элемента.
+ * Ставит контекст строки, css-переменные уровня и каскада, classname анимации
+ */
+const TreeItem = ({ children, ...props }) => {
+    const { item, renderItem, onToggle, memoizedItemProps, cssVars, isSpinner, hasAddAnimation, } = (0, useLogic_1.useLogic)(props);
+    const { nodeId, isChildrenAsync } = item.meta;
+    // Строку узла с подгружаемыми дочерними элементами рисует не список,
+    // а постоянный слой: сюда она приезжает готовым DOM-узлом. Иначе store,
+    // заведённый потребителем внутри renderParent, умирал бы на каждом уходе
+    // строки со скролла
+    if (isChildrenAsync && !item.placeholderKind) {
+        return ((0, jsx_runtime_1.jsx)("div", { ...memoizedItemProps, children: (0, jsx_runtime_1.jsx)(ParentSlot_1.ParentSlot, { itemId: item.id }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ...memoizedItemProps, children: (0, jsx_runtime_1.jsx)(InfiniteTreeListItem_1.TreeListItemContextProvider, { item: item, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { id: nodeId, className: treeItemCva({ isSpinner, hasAddAnimation }), style: cssVars, children: item.placeholderKind ? ((0, jsx_runtime_1.jsx)(ChildrenPlaceholder_1.ChildrenPlaceholder, { item: item })) : ((0, jsx_runtime_1.jsx)(CustomItemWrapper_1.CustomItemWrapper, { item: item, renderItem: renderItem })) }) }) }));
 };
 exports.TreeItem = TreeItem;

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

@@ -1 +1,4 @@
+/**
+ * Задержка каскадной анимации между соседними строками, мс
+ */
 export declare const ANIMATION_DELAY = 30;

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

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ANIMATION_DELAY = void 0;
-// Задержка для каскадной анимации элементов в ms
+/**
+ * Задержка каскадной анимации между соседними строками, мс
+ */
 exports.ANIMATION_DELAY = 30;

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

@@ -2,7 +2,4 @@
 export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $level: number;
-    $siblingIndex?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -6,6 +6,9 @@ const Tooltip_1 = require("../../Tooltip");
 const constants_1 = require("../constants");
 const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
+  --level: 0;
+  --sibling-index: 0;
+
   @keyframes slide-in-from-left {
     0% {
       transform: translateX(-16px);
@@ -42,21 +45,33 @@ exports.Wrapper = styled_1.styled.div `
 
   min-height: 60px;
   margin-top: ${({ theme }) => theme.spacing(1)};
-  margin-left: ${({ $level }) => `calc(${$level} * 20px)`};
+  margin-left: calc(var(--level) * ${({ theme }) => theme.spacing(5)});
 
   border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
-  
-  &.${constants_1.infiniteTreeListClassnames.addAnimation} {
-    animation: slide-in-from-left ${({ theme }) => theme.transitions.duration.short}ms ease-out;
+
+  &.${constants_1.infiniteTreeListClassnames.rowAddAnimation} {
+    animation: slide-in-from-left
+      ${({ theme }) => theme.transitions.duration.short}ms ease-out;
     animation-fill-mode: both;
-    animation-delay: ${({ $siblingIndex = 0 }) => $siblingIndex * constants_2.ANIMATION_DELAY}ms;
+    animation-delay: calc(var(--sibling-index) * ${constants_2.ANIMATION_DELAY}ms);
   }
 
-  &.${constants_1.infiniteTreeListClassnames.removeAnimation} {
-    animation: slide-out-to-left ${({ theme }) => theme.transitions.duration.shorter}ms ease-in forwards;
+  &.${constants_1.infiniteTreeListClassnames.rowRemoveAnimation} {
+    animation: slide-out-to-left
+      ${({ theme }) => theme.transitions.duration.shorter}ms ease-in forwards;
     animation-fill-mode: both;
-    animation-delay: ${({ $siblingIndex = 0 }) => $siblingIndex * constants_2.ANIMATION_DELAY}ms;
+    animation-delay: calc(var(--sibling-index) * ${constants_2.ANIMATION_DELAY}ms);
+  }
+
+  &.${constants_1.infiniteTreeListClassnames.rowSpinner} {
+    justify-content: center;
+
+    width: 100%;
+    min-height: 64px;
+
+    background: transparent;
+    border: none;
   }
 
   & > .${Tooltip_1.tooltipClassnames.contentWrapper} {

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

@@ -1,9 +1,4 @@
-import type { ReactNode, RefObject } from 'react';
-import { type FlattenTree, type InfiniteTreeItemMeta, type InfiniteTreeListData } from '../types';
-export type TreeItemProps<TData extends InfiniteTreeListData<TData>> = {
-    item: FlattenTree<TData>;
-    renderItem: (item: TData & {
-        meta: InfiniteTreeItemMeta;
-    }) => ReactNode;
-    recentlyExpandedIds: RefObject<Set<string>>;
-};
+import type { ContextProp, ItemProps as VirtuosoItemProps } from 'react-virtuoso';
+import { type ListFooterContext } from '../ListFooter';
+import type { FlattenTree, InfiniteTreeListData } from '../types';
+export type TreeItemProps = VirtuosoItemProps<FlattenTree<InfiniteTreeListData>> & ContextProp<ListFooterContext>;

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

@@ -1,11 +1,31 @@
-/// <reference types="react" />
-import type { InfiniteTreeListData } from '../../types';
+import { type CSSProperties } from 'react';
 import { type TreeItemProps } from '../types';
-export declare const useLogic: <TData extends InfiniteTreeListData<TData>>({ item, renderItem, recentlyExpandedIds, }: TreeItemProps<TData>) => {
-    item: import("../../types").FlattenTree<TData>;
-    renderItem: (item: TData & {
-        meta: import("../../types").InfiniteTreeItemMeta;
-    }) => import("react").ReactNode;
-    classname: string;
-    onAnimationEnd: () => void;
+type UseLogicParams = Omit<TreeItemProps, 'children'>;
+/**
+ * Логика строки виртуализации: регистрирует хвост ветки в реестре, один раз
+ * на mount читает метку enter-анимации и считает css-переменные строки.
+ *
+ * Про хвост: `Virtuoso` виртуализирует плоский список, и его `endReached` —
+ * это конец всего списка, то есть корневая пагинация. У вложенной пагинации
+ * свой признак конца: последний загруженный дочерний элемент раскрытой
+ * ветки. Такая строка пишет себя в `tailRegistry`, а `useListScroll` на смене
+ * видимого диапазона зовёт `checkRange` — попал хвост в кадр, ветка просит
+ * `onLoadMore(parentId)`. Отдельного элемента-sentinel в разметке для
+ * этого нет
+ */
+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: {
+        style?: CSSProperties | undefined;
+        'data-index': number;
+        'data-item-group-index'?: number | undefined;
+        'data-item-index': number;
+        'data-known-size': number;
+    };
+    cssVars: CSSProperties;
+    isSpinner: boolean;
+    hasAddAnimation: boolean;
 };
+export {};

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

@@ -1,28 +1,70 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
+// cspell:ignore виртуализирует
 const react_1 = require("react");
-const constants_1 = require("../../constants");
-const useLogic = ({ item, renderItem, recentlyExpandedIds, }) => {
-    const deleteRecentlyExpandedId = () => {
-        item.meta.parentId &&
-            recentlyExpandedIds.current?.delete(item.meta.parentId);
-    };
+const InfiniteTreeListContext_1 = require("../../InfiniteTreeListContext");
+/**
+ * Логика строки виртуализации: регистрирует хвост ветки в реестре, один раз
+ * на mount читает метку enter-анимации и считает css-переменные строки.
+ *
+ * Про хвост: `Virtuoso` виртуализирует плоский список, и его `endReached` —
+ * это конец всего списка, то есть корневая пагинация. У вложенной пагинации
+ * свой признак конца: последний загруженный дочерний элемент раскрытой
+ * ветки. Такая строка пишет себя в `tailRegistry`, а `useListScroll` на смене
+ * видимого диапазона зовёт `checkRange` — попал хвост в кадр, ветка просит
+ * `onLoadMore(parentId)`. Отдельного элемента-sentinel в разметке для
+ * этого нет
+ */
+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 { parentId, siblingIndex, level } = item.meta;
+    const parentPagination = parentId ? nodePaginationMap[parentId] : undefined;
+    const isLastChild = parentPagination?.lastChildId === item.id;
+    const shouldRegister = Boolean(isLastChild &&
+        parentId &&
+        !parentPagination?.isEndReached &&
+        !parentPagination?.isChildrenLoading &&
+        !parentPagination?.isChildrenError);
+    // Решение об анимации принимается один раз, на mount строки. Чтение метки
+    // не меняет состояние, поэтому отброшенный рендер ничего не ломает
+    const enterState = (0, react_1.useRef)(null);
+    if (!enterState.current) {
+        enterState.current = enterAnimation.read(item.id);
+    }
+    const { shouldAnimate, delayIndex } = enterState.current;
+    // Метка забирается после коммита: повторный mount строки при скролле
+    // виртуализации анимации уже не получит
+    (0, react_1.useEffect)(() => {
+        enterAnimation.claim(item.id);
+    }, []);
     (0, react_1.useEffect)(() => {
+        if (!shouldRegister || !parentId) {
+            return;
+        }
+        const registeredParentId = parentId;
+        const registeredItemId = item.id;
+        tailRegistry.register(registeredParentId, registeredItemId, () => onLoadMore(registeredParentId));
         return () => {
-            deleteRecentlyExpandedId();
+            tailRegistry.unregister(registeredParentId, registeredItemId);
         };
-    }, []);
-    const onAnimationEnd = () => {
-        deleteRecentlyExpandedId();
+    }, [shouldRegister, parentId, item.id, tailRegistry, onLoadMore]);
+    const isSpinner = item.placeholderKind === 'spinner';
+    // Уровень вложенности и индекс каскада — динамические значения, поэтому
+    // передаются в стили через css vars, а не через styled props
+    const cssVars = {
+        '--level': level,
+        '--sibling-index': delayIndex ?? siblingIndex,
+    };
+    return {
+        item,
+        renderItem,
+        onToggle,
+        memoizedItemProps,
+        cssVars,
+        isSpinner,
+        hasAddAnimation: !isSpinner && shouldAnimate,
     };
-    const classname = (0, react_1.useMemo)(() => {
-        if (item?.meta.parentId &&
-            recentlyExpandedIds.current?.has(item?.meta.parentId)) {
-            return constants_1.infiniteTreeListClassnames.addAnimation;
-        }
-        return '';
-    }, [item.id]);
-    return { item, renderItem, classname, onAnimationEnd };
 };
 exports.useLogic = useLogic;

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

@@ -1,6 +1,18 @@
 export declare const VIRTUOSO_CONTAINER_ID = "virtuoso-container";
 export declare const OVERSCAN = 30;
+/**
+ * Окно ожидания mount строки, помеченной для enter-анимации.
+ * Virtuoso монтирует видимые дочерние строки в следующем кадре после смены
+ * data, поэтому `useLayoutEffect` снимает метку слишком рано
+ */
+export declare const ENTER_ANIMATION_MOUNT_WINDOW_MS = 100;
+export declare const CHILDREN_SKELETON_COUNT = 3;
+export declare const CHILDREN_NO_DATA_MSG = "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445";
 export declare const infiniteTreeListClassnames: {
-    addAnimation: string;
-    removeAnimation: string;
+    row: string;
+    rowAddAnimation: string;
+    rowRemoveAnimation: string;
+    rowSpinner: string;
+    scrollToTopButton: string;
+    visibleScrollToTopButton: string;
 };

package/node/components/InfiniteTreeList/constants.js

@@ -1,10 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.infiniteTreeListClassnames = exports.OVERSCAN = exports.VIRTUOSO_CONTAINER_ID = void 0;
+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;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.VIRTUOSO_CONTAINER_ID = 'virtuoso-container';
 exports.OVERSCAN = 30;
+/**
+ * Окно ожидания mount строки, помеченной для enter-анимации.
+ * Virtuoso монтирует видимые дочерние строки в следующем кадре после смены
+ * data, поэтому `useLayoutEffect` снимает метку слишком рано
+ */
+exports.ENTER_ANIMATION_MOUNT_WINDOW_MS = 100;
+exports.CHILDREN_SKELETON_COUNT = 3;
+exports.CHILDREN_NO_DATA_MSG = 'Нет данных';
 exports.infiniteTreeListClassnames = {
-    addAnimation: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list_add-animation'),
-    removeAnimation: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list_remove-animation'),
+    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'),
+    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

@@ -0,0 +1,5 @@
+export * from './useChildrenState';
+export * from './useEnterAnimation';
+export * from './useExpandNotifier';
+export * from './useFlatTree';
+export * from './useListScroll';

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

@@ -0,0 +1,21 @@
+"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("./useChildrenState"), exports);
+__exportStar(require("./useEnterAnimation"), exports);
+__exportStar(require("./useExpandNotifier"), exports);
+__exportStar(require("./useFlatTree"), exports);
+__exportStar(require("./useListScroll"), exports);

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

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

package/node/components/InfiniteTreeList/hooks/useChildrenState/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("./useChildrenState"), exports);

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

@@ -0,0 +1,43 @@
+import type { RefObject } from 'react';
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+import type { EnterAnimationResult } from '../useEnterAnimation';
+export type UseChildrenStateParams<TData extends InfiniteTreeListData<TData>> = {
+    /**
+     * Данные списка
+     */
+    items: TData[];
+    /**
+     * Плоский список строк
+     */
+    flatList: FlattenTree<TData>[];
+    /**
+     * Список для синхронного чтения
+     */
+    flatListRef: RefObject<FlattenTree<TData>[]>;
+    /**
+     * Набор раскрытых узлов
+     */
+    expandedIds: Set<string>;
+    /**
+     * Набор раскрытых узлов для синхронного чтения
+     */
+    expandedIdsRef: RefObject<Set<string>>;
+    /**
+     * Контроллер enter-анимации: метит новые дочерние элементы
+     * и skeleton-узлы
+     */
+    enterAnimation: EnterAnimationResult;
+    /**
+     * Вставляет дочерние элементы узла в плоский список
+     */
+    insertChildren: (parentId: string, childrenData: TData[]) => void;
+    /**
+     * Функция управления placeholder ветки родителя
+     */
+    syncChildrenPlaceholders: (parentId: string, isChildrenLoading: boolean, skeletonCount: number, isChildrenError?: boolean, isChildrenNoData?: boolean) => void;
+    skeletonCount: number;
+    /**
+     * Выбрасывает контейнер строки узла, которого больше нет в данных
+     */
+    releaseParentSlot: (itemId: string) => void;
+};

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

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

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

@@ -0,0 +1,20 @@
+import type { NodePagination } from '../../InfiniteTreeListContext';
+import type { FlattenTree, InfiniteTreeChildrenPagination, InfiniteTreeListData } from '../../types';
+import type { UseChildrenStateParams } from './types';
+/**
+ * Сводит данные дочерних элементов раскрытых узлов в плоский список:
+ * вставляет их, ставит заглушки ветки, собирает пагинацию узлов и метит новые
+ * строки для enter-анимации. Дочерние элементы отдаёт строка узла
+ * (`childItems`, `isLoading`, `isError`), не props списка.
+ *
+ * Дочерние элементы смонтированными хук не держит — их строки живут
+ * по правилам виртуализации. Строки узлов с подгружаемыми дочерними
+ * элементами, наоборот, монтируются один раз и живут, пока жив список:
+ * их состояние не должно умирать ни от ухода строки со скролла,
+ * ни от сворачивания ветки
+ */
+export declare const useChildrenState: <TData extends InfiniteTreeListData<TData>>({ items, flatList, flatListRef, expandedIds, expandedIdsRef, enterAnimation, insertChildren, syncChildrenPlaceholders, skeletonCount, releaseParentSlot, }: UseChildrenStateParams<TData>) => {
+    registerChildren: (itemId: string, childrenState: InfiniteTreeChildrenPagination) => void;
+    nodePaginationMap: Record<string, NodePagination>;
+    parentItems: FlattenTree<TData>[];
+};

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

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChildrenState = void 0;
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+/**
+ * Сводит данные дочерних элементов раскрытых узлов в плоский список:
+ * вставляет их, ставит заглушки ветки, собирает пагинацию узлов и метит новые
+ * строки для enter-анимации. Дочерние элементы отдаёт строка узла
+ * (`childItems`, `isLoading`, `isError`), не props списка.
+ *
+ * Дочерние элементы смонтированными хук не держит — их строки живут
+ * по правилам виртуализации. Строки узлов с подгружаемыми дочерними
+ * элементами, наоборот, монтируются один раз и живут, пока жив список:
+ * их состояние не должно умирать ни от ухода строки со скролла,
+ * ни от сворачивания ветки
+ */
+const useChildrenState = ({ items, flatList, flatListRef, expandedIds, expandedIdsRef, enterAnimation, insertChildren, syncChildrenPlaceholders, skeletonCount, releaseParentSlot, }) => {
+    const [childrenStateMap, setChildrenStateMap] = (0, react_1.useState)({});
+    const childrenStateMapRef = (0, react_1.useRef)(childrenStateMap);
+    // Синхронизация после коммита: запись в ref во время рендера — side effect,
+    // отброшенный рендер оставил бы в ref значение из дерева, которое
+    // не попало в коммит
+    (0, react_1.useEffect)(() => {
+        childrenStateMapRef.current = childrenStateMap;
+    });
+    const loadedOnceIdsRef = (0, react_1.useRef)(new Set());
+    const registerChildren = (0, react_1.useCallback)((itemId, childrenState) => {
+        const nextChildren = childrenState;
+        setChildrenStateMap((prev) => {
+            if ((0, utils_1.checkIsSameChildren)(prev[itemId], nextChildren)) {
+                return prev;
+            }
+            return { ...prev, [itemId]: nextChildren };
+        });
+    }, []);
+    const resolveNoData = (0, react_1.useCallback)((parentId, childrenState) => {
+        const hasLoadedOnce = loadedOnceIdsRef.current.has(parentId);
+        if (childrenState.isLoading) {
+            loadedOnceIdsRef.current.add(parentId);
+        }
+        return (0, utils_1.checkIsNoDataChildren)(childrenState, hasLoadedOnce);
+    }, []);
+    const syncChildren = (0, react_1.useCallback)((parentId, childrenState) => {
+        const existingDirectCount = (0, utils_1.countDirectChildren)(flatListRef.current, parentId);
+        const hasSkeletons = (0, utils_1.checkHasSkeletonPlaceholders)(flatListRef.current, parentId);
+        insertChildren(parentId, childrenState.data);
+        syncChildrenPlaceholders(parentId, Boolean(childrenState.isLoading), skeletonCount, childrenState.isError, resolveNoData(parentId, childrenState));
+        if (childrenState.isLoading) {
+            // Первая загрузка необходима для skeleton-элементов
+            const firstLoading = existingDirectCount === 0 && !hasSkeletons;
+            if (firstLoading) {
+                enterAnimation.schedule((0, utils_1.getChildrenPlaceholderIds)(parentId, skeletonCount));
+            }
+            return;
+        }
+        if (childrenState.isError ||
+            childrenState.data.length <= existingDirectCount) {
+            return;
+        }
+        const { itemIds, startDelayIndex } = (0, utils_1.getEnteringChildren)(childrenState.data.map((item) => item.id), existingDirectCount, hasSkeletons ? skeletonCount : 0);
+        enterAnimation.schedule(itemIds, startDelayIndex);
+    }, [
+        enterAnimation,
+        flatListRef,
+        insertChildren,
+        resolveNoData,
+        skeletonCount,
+        syncChildrenPlaceholders,
+    ]);
+    (0, react_1.useEffect)(() => {
+        Object.entries(childrenStateMap).forEach(([parentId, childrenState]) => {
+            if (expandedIdsRef.current.has(parentId)) {
+                syncChildren(parentId, childrenState);
+            }
+        });
+    }, [childrenStateMap, expandedIds]);
+    const nodePaginationMap = (0, react_1.useMemo)(() => Object.entries(childrenStateMap).reduce((acc, [parentId, childrenState]) => {
+        acc[parentId] = {
+            lastChildId: childrenState.data[childrenState.data.length - 1]?.id,
+            isEndReached: childrenState.isEndReached,
+            isChildrenLoading: childrenState.isLoading,
+            isChildrenError: childrenState.isError,
+        };
+        return acc;
+    }, {}), [childrenStateMap]);
+    const parentItemsRef = (0, react_1.useRef)(new Map());
+    const parentItems = (0, react_1.useMemo)(() => {
+        flatList.forEach((item) => {
+            if (item.meta.isChildrenAsync) {
+                parentItemsRef.current.set(item.id, item);
+            }
+        });
+        return [...parentItemsRef.current.values()];
+    }, [flatList]);
+    (0, react_1.useEffect)(() => {
+        const idsToKeep = (0, utils_1.getIdsToKeep)(items, childrenStateMapRef.current);
+        parentItemsRef.current.forEach((_, itemId) => {
+            if (!idsToKeep.has(itemId)) {
+                parentItemsRef.current.delete(itemId);
+                releaseParentSlot(itemId);
+            }
+        });
+        loadedOnceIdsRef.current.forEach((itemId) => {
+            if (!idsToKeep.has(itemId)) {
+                loadedOnceIdsRef.current.delete(itemId);
+            }
+        });
+        setChildrenStateMap((prev) => {
+            const entriesToKeep = Object.entries(prev).filter(([itemId]) => idsToKeep.has(itemId));
+            if (entriesToKeep.length === Object.keys(prev).length) {
+                return prev;
+            }
+            return Object.fromEntries(entriesToKeep);
+        });
+    }, [items, releaseParentSlot]);
+    return { registerChildren, nodePaginationMap, parentItems };
+};
+exports.useChildrenState = useChildrenState;

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

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

package/node/components/InfiniteTreeList/hooks/useEnterAnimation/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("./useEnterAnimation"), exports);

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

@@ -0,0 +1,29 @@
+export type EnterAnimationState = {
+    /**
+     * Строка должна появиться с enter-анимацией
+     */
+    shouldAnimate: boolean;
+    /**
+     * Индекс каскадной задержки анимации
+     */
+    delayIndex?: number;
+};
+export type EnterAnimationResult = {
+    /**
+     * Планирует появление элементов с enter-анимацией.
+     * Порядок id задаёт каскад, `startDelayIndex` сдвигает его начало
+     */
+    schedule: (itemIds: string[], startDelayIndex?: number) => void;
+    /**
+     * Возвращает состояние анимации, не изменяя метку. Безопасно для рендера
+     */
+    read: (itemId: string) => EnterAnimationState;
+    /**
+     * Забирает метку элемента: повторный mount при скролле анимации не получит
+     */
+    claim: (itemId: string) => void;
+    /**
+     * Сбрасывает все метки
+     */
+    reset: () => void;
+};

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

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

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

@@ -0,0 +1,6 @@
+import type { EnterAnimationResult } from './types';
+/**
+ * Управляет enter-анимацией строк дерева: метка живёт до первого mount строки
+ * и потребляется им
+ */
+export declare const useEnterAnimation: () => EnterAnimationResult;