@astral/ui 4.100.0 → 4.101.0

package/node/components/InfiniteTreeList/InfiniteTreeListContext/InfiniteTreeListContextProvider/InfiniteTreeListContextProvider.js

@@ -2,19 +2,75 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfiniteTreeListContextProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useSet_1 = require("../../../useSet");
+const react_1 = require("react");
 const InfiniteTreeListContext_1 = require("../InfiniteTreeListContext");
-const InfiniteTreeListContextProvider = ({ children, itemSkeleton, }) => {
-    const [disabledIdList, disabledIdListActions] = (0, useSet_1.useSet)(new Set());
-    const setDisabled = (itemId, disabled) => {
-        disabled
-            ? disabledIdListActions.add(itemId)
-            : disabledIdListActions.remove(itemId);
-    };
-    return ((0, jsx_runtime_1.jsx)(InfiniteTreeListContext_1.InfiniteTreeListContext.Provider, { value: {
-            itemSkeleton,
-            disabledIdList,
-            setDisabled,
-        }, children: children }));
+const InfiniteTreeListContextProvider = ({ children, itemSkeleton, nodePaginationMap, onListRetry, registerChildren, notifyExpand, enterAnimation, tailRegistry, renderItem, renderParent, onToggle, acquireParentSlot, }) => {
+    const [disabledIdList, setDisabledIdList] = (0, react_1.useState)(new Set());
+    const childrenCallbacksRef = (0, react_1.useRef)({});
+    const setDisabled = (0, react_1.useCallback)((itemId, disabled) => {
+        setDisabledIdList((prev) => {
+            // Сохранение ссылки на Set при отсутствии изменений предотвращает
+            // бесконечный ре-рендер потребителей контекста
+            if (prev.has(itemId) === disabled) {
+                return prev;
+            }
+            const next = new Set(prev);
+            if (disabled) {
+                next.add(itemId);
+            }
+            else {
+                next.delete(itemId);
+            }
+            return next;
+        });
+    }, []);
+    const registerChildrenCallbacks = (0, react_1.useCallback)((itemId, callbacks) => {
+        childrenCallbacksRef.current[itemId] = callbacks;
+    }, []);
+    const onLoadMore = (0, react_1.useCallback)((parentId) => {
+        childrenCallbacksRef.current[parentId]?.onLoadMore?.();
+    }, []);
+    const onRetry = (0, react_1.useCallback)((parentId) => {
+        const retryChildren = childrenCallbacksRef.current[parentId]?.onRetry;
+        if (retryChildren) {
+            retryChildren();
+            return;
+        }
+        onListRetry();
+    }, [onListRetry]);
+    const value = (0, react_1.useMemo)(() => ({
+        renderItem,
+        renderParent,
+        onToggle,
+        itemSkeleton,
+        disabledIdList,
+        setDisabled,
+        nodePaginationMap,
+        registerChildrenCallbacks,
+        registerChildren,
+        notifyExpand,
+        onLoadMore,
+        onRetry,
+        enterAnimation,
+        tailRegistry,
+        acquireParentSlot,
+    }), [
+        renderItem,
+        renderParent,
+        onToggle,
+        itemSkeleton,
+        disabledIdList,
+        setDisabled,
+        nodePaginationMap,
+        registerChildrenCallbacks,
+        registerChildren,
+        notifyExpand,
+        onLoadMore,
+        onRetry,
+        enterAnimation,
+        tailRegistry,
+        acquireParentSlot,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(InfiniteTreeListContext_1.InfiniteTreeListContext.Provider, { value: value, children: children }));
 };
 exports.InfiniteTreeListContextProvider = InfiniteTreeListContextProvider;

package/node/components/InfiniteTreeList/InfiniteTreeListItem/ErrorPlaceholder/ErrorPlaceholder.d.ts

@@ -0,0 +1,6 @@
+type ErrorPlaceholderProps = {
+    onRetry: () => void;
+    errorMsg?: string;
+};
+export declare const ErrorPlaceholder: ({ onRetry, errorMsg, }: ErrorPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/node/components/InfiniteTreeList/InfiniteTreeListItem/ErrorPlaceholder/ErrorPlaceholder.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorPlaceholder = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../../Button");
+const Typography_1 = require("../../../Typography");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const ErrorPlaceholder = ({ onRetry, errorMsg = constants_1.DEFAULT_ERROR_MESSAGE, }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { color: "grey", colorIntensity: "600", children: errorMsg }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, variant: "link", children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })] }));
+};
+exports.ErrorPlaceholder = ErrorPlaceholder;

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

@@ -0,0 +1 @@
+export declare const DEFAULT_ERROR_MESSAGE = "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435";

package/node/components/InfiniteTreeList/InfiniteTreeListItem/ErrorPlaceholder/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_ERROR_MESSAGE = void 0;
+exports.DEFAULT_ERROR_MESSAGE = 'Не удалось загрузить данные';

package/node/components/InfiniteTreeList/InfiniteTreeListItem/ErrorPlaceholder/index.d.ts

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

package/node/components/InfiniteTreeList/InfiniteTreeListItem/ErrorPlaceholder/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorPlaceholder = void 0;
+var ErrorPlaceholder_1 = require("./ErrorPlaceholder");
+Object.defineProperty(exports, "ErrorPlaceholder", { enumerable: true, get: function () { return ErrorPlaceholder_1.ErrorPlaceholder; } });

package/node/components/InfiniteTreeList/InfiniteTreeListItem/ErrorPlaceholder/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const styled_1 = require("../../../styled");
+exports.Wrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(5)};
+  align-items: center;
+
+  padding: ${({ theme }) => theme.spacing(0, 4)};
+`;

package/node/components/InfiniteTreeList/InfiniteTreeListItem/InfiniteTreeListItem.js

@@ -4,16 +4,38 @@ exports.InfiniteTreeListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Chevron_1 = require("../../Chevron");
 const ContentState_1 = require("../../ContentState");
+const Loader_1 = require("../../Loader");
 const Tooltip_1 = require("../../Tooltip");
+const cn_1 = require("../../utils/cn");
+const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
+const constants_1 = require("./constants");
+const ErrorPlaceholder_1 = require("./ErrorPlaceholder");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const infiniteTreeListItemCva = (0, cva_1.cva)(constants_1.infiniteTreeListItemClassnames.root, {
+    variants: {
+        isDisabled: {
+            true: constants_1.infiniteTreeListItemClassnames.disabled,
+        },
+        isLoading: {
+            true: constants_1.infiniteTreeListItemClassnames.loading,
+        },
+        hasNested: {
+            true: constants_1.infiniteTreeListItemClassnames.hasNested,
+        },
+    },
+});
 const InfiniteTreeListItem = (props) => {
-    const { itemSkeleton, item, handleClick, isDisabledByActions, tooltipProps, isChevronActive, } = (0, useLogic_1.useLogic)(props);
-    const { isDisabled, className, onRetry = () => undefined, actions, errorMsg, isError, isLoading, children, } = props;
-    return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, loadingContent: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isLoading": true, children: itemSkeleton }), isError: isError, errorState: {
-            onRetry,
-            errorList: [errorMsg || ''],
-        }, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onClick: handleClick, className: className, "$isDisabled": isDisabled || isDisabledByActions, "$isLoading": isLoading, "$hasNested": item.meta.hasNested, ...(0, getInertProps_1.getInertProps)(isDisabled || isDisabledByActions), children: [item.meta.hasNested && (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { isActive: isChevronActive }), children, actions && (0, jsx_runtime_1.jsx)(styles_1.ActionsWrapper, { children: actions })] }, `infinite-tree-list-item-${item.id}`) }) }));
+    const { itemSkeleton, item, handleClick, isDisabledByActions, tooltipProps, isChevronActive, isRowLoading, isRowError, } = (0, useLogic_1.useLogic)(props);
+    const { isDisabled, className, onRetry = () => undefined, actions, errorMsg, children, } = props;
+    if (isRowError) {
+        return (0, jsx_runtime_1.jsx)(ErrorPlaceholder_1.ErrorPlaceholder, { onRetry: onRetry, errorMsg: errorMsg });
+    }
+    return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isRowLoading, isSmoothLoading: false, loadingContent: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: infiniteTreeListItemCva({ isLoading: true }), children: itemSkeleton || ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}) })) }), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onClick: handleClick, className: (0, cn_1.cn)(infiniteTreeListItemCva({
+                    isDisabled: Boolean(isDisabled || isDisabledByActions),
+                    isLoading: isRowLoading,
+                    hasNested: item.meta.hasNested,
+                }), className), ...(0, getInertProps_1.getInertProps)(isDisabled || isDisabledByActions), children: [item.meta.hasNested && (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { isActive: isChevronActive }), children, actions && (0, jsx_runtime_1.jsx)(styles_1.ActionsWrapper, { children: actions })] }, `infinite-tree-list-item-${item.id}`) }) }));
 };
 exports.InfiniteTreeListItem = InfiniteTreeListItem;

package/node/components/InfiniteTreeList/InfiniteTreeListItem/TreeListItemContext/TreeListItemContext.d.ts

@@ -1,10 +1,29 @@
 /// <reference types="react" />
 import type { FlattenTree, InfiniteTreeListData } from '../../types';
 export type TreeListItemContextProps = {
+    /**
+     * Строка плоского списка, для которой рендерится содержимое
+     */
     item: FlattenTree<InfiniteTreeListData>;
+    /**
+     * Переключает раскрытие узла строки
+     */
     onToggle: (item: InfiniteTreeListData) => void;
+    /**
+     * Строка заблокирована: своим действием или действием родителя
+     */
     isDisabled: boolean;
+    /**
+     * Причина блокировки. Показывается в tooltip строки
+     */
     disabledReason?: string;
+    /**
+     * Записывает причину блокировки
+     */
     setDisabledReason: (disabledReason?: string) => void;
 };
+/**
+ * Контекст одной строки дерева: сама строка и её состояние блокировки.
+ * Отделён от контекста списка — значение у каждой строки своё
+ */
 export declare const TreeListItemContext: import("react").Context<TreeListItemContextProps>;

package/node/components/InfiniteTreeList/InfiniteTreeListItem/TreeListItemContext/TreeListItemContext.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeListItemContext = void 0;
 const react_1 = require("react");
+/**
+ * Контекст одной строки дерева: сама строка и её состояние блокировки.
+ * Отделён от контекста списка — значение у каждой строки своё
+ */
 exports.TreeListItemContext = (0, react_1.createContext)({
     item: {},
     onToggle: () => undefined,

package/node/components/InfiniteTreeList/InfiniteTreeListItem/TreeListItemContext/TreeListItemContextProvider/TreeListItemContextProvider.d.ts

@@ -3,5 +3,9 @@ import { type TreeListItemContextProps } from '../TreeListItemContext';
 type Props = Pick<TreeListItemContextProps, 'item' | 'onToggle'> & {
     children: ReactNode;
 };
+/**
+ * Ставит контекст строки: считает блокировку по пути узла и отдаёт вниз
+ * саму строку с её причиной блокировки
+ */
 export declare const TreeListItemContextProvider: ({ item, children, onToggle, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/InfiniteTreeList/InfiniteTreeListItem/TreeListItemContext/TreeListItemContextProvider/TreeListItemContextProvider.js

@@ -5,18 +5,23 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InfiniteTreeListContext_1 = require("../../../InfiniteTreeListContext");
 const TreeListItemContext_1 = require("../TreeListItemContext");
+/**
+ * Ставит контекст строки: считает блокировку по пути узла и отдаёт вниз
+ * саму строку с её причиной блокировки
+ */
 const TreeListItemContextProvider = ({ item, children, onToggle, }) => {
     const [disabledReason, setDisabledReason] = (0, react_1.useState)();
     const { disabledIdList } = (0, react_1.useContext)(InfiniteTreeListContext_1.InfiniteTreeListContext);
     const isDisabled = (0, react_1.useMemo)(() => {
         return item.meta.path.some((id) => disabledIdList.has(id));
-    }, [item.path, disabledIdList]);
-    return ((0, jsx_runtime_1.jsx)(TreeListItemContext_1.TreeListItemContext.Provider, { value: {
-            item,
-            onToggle,
-            isDisabled,
-            disabledReason,
-            setDisabledReason,
-        }, children: children }));
+    }, [item.meta.path, disabledIdList]);
+    const value = (0, react_1.useMemo)(() => ({
+        item,
+        onToggle,
+        isDisabled,
+        disabledReason,
+        setDisabledReason,
+    }), [item, onToggle, isDisabled, disabledReason]);
+    return ((0, jsx_runtime_1.jsx)(TreeListItemContext_1.TreeListItemContext.Provider, { value: value, children: children }));
 };
 exports.TreeListItemContextProvider = TreeListItemContextProvider;

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

@@ -0,0 +1,6 @@
+export declare const infiniteTreeListItemClassnames: {
+    root: string;
+    disabled: string;
+    loading: string;
+    hasNested: string;
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.infiniteTreeListItemClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.infiniteTreeListItemClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__item'),
+    disabled: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__item_disabled'),
+    loading: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__item_loading'),
+    hasNested: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__item_has-nested'),
+};

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

@@ -2,12 +2,12 @@
 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;
-} & {
-    $isDisabled?: boolean | undefined;
-    $isLoading?: boolean | undefined;
-    $hasNested?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ActionsWrapper: 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;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LoaderWrapper: 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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionsWrapper = exports.Wrapper = void 0;
+exports.LoaderWrapper = exports.ActionsWrapper = exports.Wrapper = void 0;
 const styled_1 = require("../../styled");
+const constants_1 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
-  cursor: ${({ $isDisabled, $isLoading, $hasNested }) => $hasNested && !$isLoading && !$isDisabled ? 'pointer' : 'default'};
+  cursor: default;
 
   display: flex;
   gap: ${({ theme }) => theme.spacing(3)};
@@ -13,7 +14,6 @@ exports.Wrapper = styled_1.styled.div `
   min-height: 60px;
   padding: ${({ theme }) => theme.spacing(3, 4)};
 
-  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
   background: ${({ theme }) => theme.palette.background.default};
 
   transition: ${({ theme }) => theme.transitions.create('background-color', {
@@ -22,9 +22,26 @@ exports.Wrapper = styled_1.styled.div `
 })};
 
   &:hover {
-    background-color: ${({ theme, $isDisabled, $isLoading }) => $isDisabled || $isLoading
-    ? theme.palette.background.default
-    : theme.palette.background.elementHover};
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  }
+
+  &.${constants_1.infiniteTreeListItemClassnames.hasNested} {
+    cursor: pointer;
+  }
+
+  &.${constants_1.infiniteTreeListItemClassnames.loading} {
+    cursor: default;
+  }
+
+  &.${constants_1.infiniteTreeListItemClassnames.disabled} {
+    cursor: default;
+
+    opacity: 0.5;
+  }
+
+  &.${constants_1.infiniteTreeListItemClassnames.loading}:hover,
+  &.${constants_1.infiniteTreeListItemClassnames.disabled}:hover {
+    background-color: ${({ theme }) => theme.palette.background.default};
   }
 `;
 exports.ActionsWrapper = styled_1.styled.div `
@@ -32,3 +49,9 @@ exports.ActionsWrapper = styled_1.styled.div `
 
   margin-left: auto;
 `;
+exports.LoaderWrapper = styled_1.styled.div `
+  display: flex;
+  justify-content: center;
+
+  width: 100%;
+`;

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { InfiniteTreeListData } from '../types';
 export type InfiniteTreeListItemProps = {
     children: ReactNode;
     /**
@@ -10,15 +11,23 @@ export type InfiniteTreeListItemProps = {
      */
     actions?: ReactNode;
     /**
-     * Если `true`, компонент будет отображаться в состоянии ошибки
+     * Загруженные дочерние элементы узла.
+     */
+    childItems?: InfiniteTreeListData[];
+    /**
+     * Флаг достижения конца списка
+     */
+    isEndReached?: boolean;
+    /**
+     * Флаг ошибки загрузки дочерних элементов узла
      */
     isError?: boolean;
     /**
-     * Если `true`, покажется itemSkeleton переданный в корневой компонент
+     * Флаг загрузки дочерних элементов
      */
     isLoading?: boolean;
     /**
-     * Если `true`, элемент будет заблокирован для взаимодействия
+     * Элемент заблокирован для взаимодействия
      */
     isDisabled?: boolean;
     /**
@@ -33,4 +42,12 @@ export type InfiniteTreeListItemProps = {
      * Текст ошибки
      */
     errorMsg?: string;
+    /**
+     * Обработчик раскрытия узла
+     */
+    onOpen?: () => void;
+    /**
+     * Обработчик подгрузки данных
+     */
+    onLoadMore?: () => void;
 };

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

@@ -1,7 +1,11 @@
 import { type MouseEvent } from 'react';
 import { type TooltipProps } from '../../../Tooltip';
 import { type InfiniteTreeListItemProps } from '../types';
-export declare const useLogic: ({ isDisabled, disabledReason, }: InfiniteTreeListItemProps) => {
+/**
+ * Логика строки: отдаёт списку данные дочерних элементов и callback-функции
+ * пагинации, сообщает о раскрытии узла и собирает состояние блокировки строки
+ */
+export declare const useLogic: ({ isDisabled, disabledReason, isLoading, isError, isEndReached, childItems, onOpen, onLoadMore, onRetry, }: InfiniteTreeListItemProps) => {
     item: import("../../types").FlattenTree<import("../../types").InfiniteTreeListData>;
     handleClick: (event: MouseEvent) => void;
     itemSkeleton: import("react").ReactNode;
@@ -10,4 +14,6 @@ export declare const useLogic: ({ isDisabled, disabledReason, }: InfiniteTreeLis
     tooltipProps: Omit<TooltipProps, "children" | "ref">;
     isDisabledByActions: boolean;
     isChevronActive: boolean;
+    isRowLoading: boolean;
+    isRowError: boolean;
 };

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

@@ -4,18 +4,68 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const InfiniteTreeListContext_1 = require("../../InfiniteTreeListContext");
 const TreeListItemContext_1 = require("../TreeListItemContext");
-const useLogic = ({ isDisabled, disabledReason, }) => {
-    const { itemSkeleton, setDisabled } = (0, react_1.useContext)(InfiniteTreeListContext_1.InfiniteTreeListContext);
+/**
+ * Логика строки: отдаёт списку данные дочерних элементов и callback-функции
+ * пагинации, сообщает о раскрытии узла и собирает состояние блокировки строки
+ */
+const useLogic = ({ isDisabled, disabledReason, isLoading, isError, isEndReached, childItems, onOpen, onLoadMore, onRetry, }) => {
+    const { itemSkeleton, setDisabled, registerChildrenCallbacks, registerChildren, notifyExpand, } = (0, react_1.useContext)(InfiniteTreeListContext_1.InfiniteTreeListContext);
     const { item, onToggle, isDisabled: isDisabledByActions, disabledReason: disabledReasonByActions, } = (0, react_1.useContext)(TreeListItemContext_1.TreeListItemContext);
+    const isChildrenControl = childItems !== undefined || onLoadMore !== undefined;
     (0, react_1.useEffect)(() => {
         if (isDisabled) {
             setDisabled(item.id, isDisabled);
         }
     }, [isDisabled]);
-    const [isChevronActive, setChevronActive] = (0, react_1.useState)(item.meta.isExpanded);
+    (0, react_1.useEffect)(() => {
+        registerChildrenCallbacks(item.id, {
+            onLoadMore,
+            onRetry,
+        });
+    }, [item.id, onLoadMore, onRetry, registerChildrenCallbacks]);
+    (0, react_1.useEffect)(() => {
+        if (!isChildrenControl) {
+            return;
+        }
+        registerChildren(item.id, {
+            data: childItems ?? [],
+            isLoading,
+            isError,
+            isEndReached,
+        });
+    }, [
+        item.id,
+        isChildrenControl,
+        childItems,
+        isLoading,
+        isError,
+        isEndReached,
+        registerChildren,
+    ]);
+    // onOpen вызывается на раскрытии узла, а не на клике: узел раскрывается и
+    // через initialExpandedLevel, где клика не было. Повторные вызовы блокируются
+    const onOpenRef = (0, react_1.useRef)(onOpen);
+    (0, react_1.useEffect)(() => {
+        onOpenRef.current = onOpen;
+    });
+    (0, react_1.useEffect)(() => {
+        if (!item.meta.isExpanded) {
+            return;
+        }
+        notifyExpand(item.id, () => onOpenRef.current?.());
+    }, [item.meta.isExpanded, item.id, notifyExpand]);
+    const [optimisticExpanded, setOptimisticExpanded] = (0, react_1.useState)(null);
+    const isChevronActive = optimisticExpanded ?? item.meta.isExpanded;
+    (0, react_1.useEffect)(() => {
+        setOptimisticExpanded(null);
+    }, [item.meta.isExpanded]);
     const handleClick = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        setChevronActive((prev) => !prev);
+        // Лист не раскрывается: клик не должен заводить его в набор раскрытых узлов
+        if (!item.meta.hasNested) {
+            return;
+        }
+        setOptimisticExpanded((prev) => !(prev ?? item.meta.isExpanded));
         onToggle(item);
     }, [item, onToggle]);
     // Omit ref для избежания ошибки типов у Tooltip
@@ -36,6 +86,8 @@ const useLogic = ({ isDisabled, disabledReason, }) => {
         tooltipProps,
         isDisabledByActions,
         isChevronActive,
+        isRowLoading: Boolean(isLoading && !isChildrenControl),
+        isRowError: Boolean(isError && !isChildrenControl),
     };
 };
 exports.useLogic = useLogic;

package/node/components/InfiniteTreeList/{EndData → ListFooter/EndData}/EndData.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EndData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Typography_1 = require("../../Typography");
+const Typography_1 = require("../../../Typography");
 const constants_1 = require("./constants");
 const EndData = ({ endOfScrollMsg = constants_1.END_OF_SCROLL_MESSAGE }) => ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: endOfScrollMsg }));
 exports.EndData = EndData;

package/node/components/InfiniteTreeList/{ErrorMessage → ListFooter/ErrorMessage}/ErrorMessage.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorMessage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_1 = require("../../Button");
-const Typography_1 = require("../../Typography");
+const Button_1 = require("../../../Button");
+const Typography_1 = require("../../../Typography");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const ErrorMessage = ({ onRetry }) => ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { align: "center", children: constants_1.ERROR_MESSAGE }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })] }));

package/node/components/InfiniteTreeList/ListFooter/ErrorMessage/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/InfiniteTreeList/{ErrorMessage → ListFooter/ErrorMessage}/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styled_1 = require("../../styled");
+const styled_1 = require("../../../styled");
 exports.Wrapper = styled_1.styled.div `
   display: grid;
   grid-template-columns: 100%;

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

@@ -0,0 +1,10 @@
+import type { ContextProp } from 'react-virtuoso';
+import type { ListFooterContext } from './types';
+/**
+ * Футер списка для Virtuoso.
+ *
+ * Вынесен в модуль и передаётся в `components.Footer`: inline-компонент в
+ * `components` на каждый рендер даёт новый тип, и React размонтирует футер.
+ * Данные приходят через `context` Virtuoso
+ */
+export declare const ListFooter: ({ context }: ContextProp<ListFooterContext>) => import("react/jsx-runtime").JSX.Element;

package/node/components/InfiniteTreeList/ListFooter/ListFooter.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListFooter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Loader_1 = require("../../Loader");
+const EndData_1 = require("./EndData");
+const ErrorMessage_1 = require("./ErrorMessage");
+const styles_1 = require("./styles");
+/**
+ * Футер списка для Virtuoso.
+ *
+ * Вынесен в модуль и передаётся в `components.Footer`: inline-компонент в
+ * `components` на каждый рендер даёт новый тип, и React размонтирует футер.
+ * Данные приходят через `context` Virtuoso
+ */
+const ListFooter = ({ context }) => {
+    const { isLoading, isError, isEndReached, endOfScrollMsg, onRetry } = context;
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}) }));
+    }
+    if (isError) {
+        return ((0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry }) }));
+    }
+    if (isEndReached) {
+        return ((0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(EndData_1.EndData, { endOfScrollMsg: endOfScrollMsg }) }));
+    }
+    return (0, jsx_runtime_1.jsx)(styles_1.FooterDummy, {});
+};
+exports.ListFooter = ListFooter;

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

@@ -0,0 +1,2 @@
+export * from './ListFooter';
+export type { ListFooterContext } from './types';

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

@@ -0,0 +1,17 @@
+"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("./ListFooter"), exports);

package/node/components/InfiniteTreeList/{styles.js → ListFooter/styles.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterDummy = exports.Footer = void 0;
-const styled_1 = require("../styled");
+const styled_1 = require("../../styled");
 exports.Footer = styled_1.styled.footer `
   display: flex;
   flex-shrink: 0;