@astral/ui 4.99.2 → 4.101.0

package/node/components/FlowButton/styles.js

@@ -17,7 +17,7 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
 
   border-radius: ${({ theme: { shape } }) => shape.medium};
 
-  ${({ theme: { breakpoints } }) => breakpoints.down('sm')} {
+  ${({ theme: { breakpoints } }) => breakpoints.down('mobile')} {
     padding: ${({ theme: { spacing } }) => spacing(4, 5)};
   }
 

package/node/components/GlobalStyles/GlobalStyles.js

@@ -27,7 +27,7 @@ const GlobalStyles = ({ children, withScopedStyles = false, ...props }) => {
                     },
                     html: {
                         fontSize: theme.typography.htmlFontSize,
-                        [theme.breakpoints.down('sm')]: {
+                        [theme.breakpoints.down('mobile')]: {
                             fontSize: 16,
                         },
                     },

package/node/components/HintPopover/styles.js

@@ -28,7 +28,7 @@ exports.Body = styled_1.styled.div `
   width: min(400px, calc(100vw - ${({ theme }) => theme.spacing(8)}));
   padding: ${({ theme }) => theme.spacing(6)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(4)};
   }
 
@@ -47,14 +47,14 @@ exports.Body = styled_1.styled.div `
 exports.Title = (0, styled_1.styled)(Typography_1.Typography) `
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     margin-bottom: ${({ theme }) => theme.spacing(1)};
   }
 `;
 exports.ActionRow = styled_1.styled.div `
   margin-top: ${({ theme }) => theme.spacing(6)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     margin-top: ${({ theme }) => theme.spacing(4)};
   }
 `;
@@ -65,7 +65,7 @@ exports.CloseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
 
   color: inherit;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     top: ${({ theme }) => theme.spacing(2)};
     right: ${({ theme }) => theme.spacing(2)};
   }

package/node/components/IconButton/styles.js

@@ -11,7 +11,7 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button, {
   height: ${MuiButton_1.getButtonHeight};
   padding: 0;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: ${MuiButton_1.getButtonHeightMobile};
   }
 `;

package/node/components/InfiniteDataList/EndData/styles.js

@@ -10,7 +10,7 @@ exports.Item = styled_1.styled.li `
 
   list-style-type: none;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(4)};
   }
 `;

package/node/components/InfiniteDataList/ErrorMessage/styles.js

@@ -11,7 +11,7 @@ exports.Item = styled_1.styled.li `
 
   padding: ${({ theme }) => theme.spacing(3, 5)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.spacing(4)};
     justify-items: normal;
 

package/node/components/InfiniteDataList/Loader/styles.js

@@ -10,7 +10,7 @@ exports.Item = styled_1.styled.li `
 
   list-style-type: none;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(3, 4)};
   }
 `;

package/node/components/InfiniteDataList/styles.js

@@ -22,7 +22,7 @@ exports.Item = styled_1.styled.li `
       background-color: ${({ theme }) => theme.palette.background.element};
     }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       padding: ${({ theme }) => theme.spacing(5, 4)};
 
       border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};

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

@@ -1,2 +1,20 @@
 import type { InfiniteTreeListData, InfiniteTreeListProps } from './types';
+/**
+ * Виртуализированное дерево с бесконечной подгрузкой
+ *
+ * @example
+ * <InfiniteTreeList
+ *   items={items}
+ *   scrollRef={scrollRef}
+ *   onRetry={refetch}
+ *   renderItem={(item) => (
+ *     <InfiniteTreeListItem>{item.name}</InfiniteTreeListItem>
+ *   )}
+ *   renderParent={(item) => (
+ *     <InfiniteTreeListItem childItems={childrenState[item.id]?.data}>
+ *       {item.name}
+ *     </InfiniteTreeListItem>
+ *   )}
+ * />
+ */
 export declare const InfiniteTreeList: <TData extends InfiniteTreeListData<TData>>(props: InfiniteTreeListProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/node/components/InfiniteTreeList/InfiniteTreeList.js

@@ -2,30 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfiniteTreeList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+// cspell:ignore Виртуализированное
 const react_virtuoso_1 = require("react-virtuoso");
 const ContentState_1 = require("../ContentState");
-const Loader_1 = require("../Loader");
-const constants_1 = require("./constants");
-const EndData_1 = require("./EndData");
-const ErrorMessage_1 = require("./ErrorMessage");
 const InfiniteTreeListContext_1 = require("./InfiniteTreeListContext");
-const InfiniteTreeListItem_1 = require("./InfiniteTreeListItem");
+const ListFooter_1 = require("./ListFooter");
 const NoDataPlaceholder_1 = require("./NoDataPlaceholder");
 const OnTopButton_1 = require("./OnTopButton");
-const styles_1 = require("./styles");
+const ParentItems_1 = require("./ParentItems");
 const TreeItem_1 = require("./TreeItem");
 const useLogic_1 = require("./useLogic");
+const computeItemKey = (_, item) => item.id;
+/**
+ * Виртуализированное дерево с бесконечной подгрузкой
+ *
+ * @example
+ * <InfiniteTreeList
+ *   items={items}
+ *   scrollRef={scrollRef}
+ *   onRetry={refetch}
+ *   renderItem={(item) => (
+ *     <InfiniteTreeListItem>{item.name}</InfiniteTreeListItem>
+ *   )}
+ *   renderParent={(item) => (
+ *     <InfiniteTreeListItem childItems={childrenState[item.id]?.data}>
+ *       {item.name}
+ *     </InfiniteTreeListItem>
+ *   )}
+ * />
+ */
 const InfiniteTreeList = (props) => {
-    const { flatList, onToggle, contentStateProps, scrollParent, virtuosoProps, footerProps, onTopButtonProps, endOfScrollMsg, renderItem, items, itemSkeleton, onRetry, onLoadMore, noDataImgSrc, recentlyExpandedIds, } = (0, useLogic_1.useLogic)(props);
-    const renderItemContent = (_index, item) => ((0, jsx_runtime_1.jsx)(InfiniteTreeListItem_1.TreeListItemContextProvider, { item: item, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, renderItem: renderItem, recentlyExpandedIds: recentlyExpandedIds }) }));
-    return ((0, jsx_runtime_1.jsx)(InfiniteTreeListContext_1.InfiniteTreeListContextProvider, { itemSkeleton: itemSkeleton, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, children: items.length && scrollParent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps, data: flatList, customScrollParent: scrollParent, endReached: onLoadMore, itemContent: renderItemContent, computeItemKey: (_, item) => item.id, components: {
-                            Footer: () => {
-                                const { isLoading, isError, isEndReached } = footerProps;
-                                if (!isLoading && !isError && !isEndReached) {
-                                    return (0, jsx_runtime_1.jsx)(styles_1.FooterDummy, {});
-                                }
-                                return ((0, jsx_runtime_1.jsxs)(styles_1.Footer, { children: [isLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isError && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry }), isEndReached && ((0, jsx_runtime_1.jsx)(EndData_1.EndData, { endOfScrollMsg: endOfScrollMsg }))] }));
-                            },
-                        }, overscan: constants_1.OVERSCAN }), (0, jsx_runtime_1.jsx)(OnTopButton_1.OnTopButton, { ...onTopButtonProps })] })) : ((0, jsx_runtime_1.jsx)(NoDataPlaceholder_1.NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) }) }));
+    const { flatList, onToggle, contentStateProps, scrollParent, virtuosoProps, footerContext, onTopButtonProps, renderItem, renderParent, items, itemSkeleton, onRetry, noDataImgSrc, enterAnimation, tailRegistry, nodePaginationMap, registerChildren, notifyExpand, parentItems, acquireParentSlot, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsxs)(InfiniteTreeListContext_1.InfiniteTreeListContextProvider, { itemSkeleton: itemSkeleton, nodePaginationMap: nodePaginationMap, registerChildren: registerChildren, notifyExpand: notifyExpand, onListRetry: onRetry, enterAnimation: enterAnimation, tailRegistry: tailRegistry, renderItem: renderItem, renderParent: renderParent, onToggle: onToggle, acquireParentSlot: acquireParentSlot, children: [(0, jsx_runtime_1.jsx)(ParentItems_1.ParentItems, { parents: parentItems }), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, children: items.length > 0 && scrollParent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps, data: flatList, customScrollParent: scrollParent, computeItemKey: computeItemKey, context: footerContext, components: { Item: TreeItem_1.TreeItem, Footer: ListFooter_1.ListFooter } }), (0, jsx_runtime_1.jsx)(OnTopButton_1.OnTopButton, { ...onTopButtonProps })] })) : ((0, jsx_runtime_1.jsx)(NoDataPlaceholder_1.NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) })] }));
 };
 exports.InfiniteTreeList = InfiniteTreeList;

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

@@ -1,2 +1,11 @@
 import type { InfiniteTreeListActionProps } from './types';
+/**
+ * Действия строки дерева. Блокирующее действие в состоянии загрузки блокирует
+ * строку вместе со всей её веткой
+ *
+ * @example
+ * <InfiniteTreeListActions
+ *   actions={{ main: [{ name: 'Изменить', onClick: handleEdit }] }}
+ * />
+ */
 export declare const InfiniteTreeListActions: <TItem>({ actions, }: InfiniteTreeListActionProps<TItem>) => import("react/jsx-runtime").JSX.Element;

package/node/components/InfiniteTreeList/InfiniteTreeListActions/InfiniteTreeListActions.js

@@ -4,6 +4,15 @@ exports.InfiniteTreeListActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ActionCellBase_1 = require("../../ActionCellBase");
 const useLogic_1 = require("./useLogic");
+/**
+ * Действия строки дерева. Блокирующее действие в состоянии загрузки блокирует
+ * строку вместе со всей её веткой
+ *
+ * @example
+ * <InfiniteTreeListActions
+ *   actions={{ main: [{ name: 'Изменить', onClick: handleEdit }] }}
+ * />
+ */
 const InfiniteTreeListActions = ({ actions, }) => {
     const { isDisabledAction, handleWrapperClick, handleActionClick } = (0, useLogic_1.useLogic)({
         actions,

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

@@ -1,4 +1,9 @@
 import type { Actions } from '../../ActionCellBase';
 export type InfiniteTreeListActionProps<TItem> = {
+    /**
+     * Конфигурация действий строки
+     *
+     * @example actions={{ main: [{ name: 'Изменить', onClick: handleEdit }] }}
+     */
     actions: Actions<TItem>;
 };

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

@@ -10,17 +10,16 @@ const useLogic = ({ actions }) => {
     const { setDisabled } = (0, react_1.useContext)(InfiniteTreeListContext_1.InfiniteTreeListContext);
     const blockingAction = (0, react_1.useMemo)(() => [...main, ...secondary].find((action) => action.isBlockingOperation && action.loading), [main, secondary]);
     const isDisabledAction = Boolean(blockingAction);
+    const loadingNote = blockingAction?.loadingNote;
     (0, react_1.useEffect)(() => {
-        if (blockingAction) {
-            // Добавляем id элемента в Set disabled элементов
+        if (isDisabledAction) {
             setDisabled(item.id, true);
-            setDisabledReason(blockingAction?.loadingNote);
+            setDisabledReason(loadingNote);
             return;
         }
-        // Удаляем id элемента из Set disabled элементов
         setDisabled(item.id, false);
-        setDisabledReason('');
-    }, [blockingAction, item.id]);
+        setDisabledReason(undefined);
+    }, [isDisabledAction, loadingNote, item.id]);
     const handleActionClick = (0, react_1.useCallback)((onClick) => () => {
         onClick?.(item);
     }, [item]);

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

@@ -1,7 +1,88 @@
 import { type ReactNode } from 'react';
+import type { EnterAnimationResult } from '../hooks';
+import type { FlattenTree, InfiniteTreeChildrenPagination, InfiniteTreeListData } from '../types';
+import type { TailRegistry } from '../utils';
+export type NodePagination = {
+    /**
+     * ID последнего загруженного дочернего элемента узла
+     */
+    lastChildId?: string;
+    /**
+     * Все дочерние данные узла загружены
+     */
+    isEndReached?: boolean;
+    /**
+     * Дочерние элементы узла загружаются
+     */
+    isChildrenLoading?: boolean;
+    /**
+     * Загрузка дочерних элементов завершилась ошибкой
+     */
+    isChildrenError?: boolean;
+};
+export type NodeChildrenCallbacks = {
+    /**
+     * Обработчик подгрузки данных
+     */
+    onLoadMore?: () => void;
+    /**
+     * Функция обработки нажатия на кнопку "Повторить запрос"
+     */
+    onRetry?: () => void;
+};
 export type InfiniteTreeListContextProps = {
+    /**
+     * Рендер-функция строки
+     */
+    renderItem: (item: FlattenTree<InfiniteTreeListData>) => ReactNode;
+    /**
+     * Рендер-функция строки узла с подгружаемыми дочерними элементами
+     */
+    renderParent: (item: FlattenTree<InfiniteTreeListData>) => ReactNode;
+    /**
+     * Переключает раскрытие узла
+     */
+    onToggle: (item: InfiniteTreeListData) => void;
+    /**
+     * Строка в состоянии загрузки
+     */
     itemSkeleton: ReactNode;
+    /**
+     * Id заблокированных узлов
+     */
     disabledIdList: Set<string>;
+    /**
+     * Отмечает узел заблокированным или снимает отметку
+     */
     setDisabled: (itemId: string, disabled: boolean) => void;
+    /**
+     * Данные пагинации узлов по parentId
+     */
+    nodePaginationMap: Record<string, NodePagination>;
+    /**
+     * Регистрирует callback-функции загрузки дочерних элементов узла
+     */
+    registerChildrenCallbacks: (itemId: string, callbacks: NodeChildrenCallbacks) => void;
+    /**
+     * Передаёт состояние загрузки дочерних элементов в список. Список
+     * синхронизирует плоский список
+     */
+    registerChildren: (itemId: string, childrenState: InfiniteTreeChildrenPagination) => void;
+    /**
+     * Оповещает список о раскрытии узла
+     */
+    notifyExpand: (itemId: string, onOpen?: () => void) => void;
+    onLoadMore: (parentId: string) => void;
+    onRetry: (parentId: string) => void;
+    enterAnimation: EnterAnimationResult;
+    /**
+     * Реестр хвостов вложенных веток. Переживает размонтирование строки
+     */
+    tailRegistry: TailRegistry;
+    /**
+     * Отдаёт постоянный DOM-контейнер строки узла: строка монтируется вне
+     * виртуализации, а её контейнер переносится в строку скролла
+     */
+    acquireParentSlot: (itemId: string) => HTMLDivElement | null;
 };
 export declare const InfiniteTreeListContext: import("react").Context<InfiniteTreeListContextProps>;

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

@@ -3,7 +3,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfiniteTreeListContext = void 0;
 const react_1 = require("react");
 exports.InfiniteTreeListContext = (0, react_1.createContext)({
+    renderItem: () => null,
+    renderParent: () => null,
+    onToggle: () => undefined,
     itemSkeleton: '',
     disabledIdList: new Set(),
     setDisabled: () => undefined,
+    nodePaginationMap: {},
+    registerChildrenCallbacks: () => undefined,
+    registerChildren: () => undefined,
+    notifyExpand: () => undefined,
+    onLoadMore: () => undefined,
+    onRetry: () => undefined,
+    enterAnimation: {
+        schedule: () => undefined,
+        read: () => ({ shouldAnimate: false }),
+        claim: () => undefined,
+        reset: () => undefined,
+    },
+    tailRegistry: {
+        register: () => undefined,
+        unregister: () => undefined,
+        checkRange: () => undefined,
+    },
+    acquireParentSlot: () => null,
 });

package/node/components/InfiniteTreeList/InfiniteTreeListContext/InfiniteTreeListContextProvider/InfiniteTreeListContextProvider.d.ts

@@ -1,7 +1,8 @@
 import { type ReactNode } from 'react';
 import { type InfiniteTreeListContextProps } from '../InfiniteTreeListContext';
-type Props = Pick<InfiniteTreeListContextProps, 'itemSkeleton'> & {
+type Props = Pick<InfiniteTreeListContextProps, 'itemSkeleton' | 'nodePaginationMap' | 'enterAnimation' | 'tailRegistry' | 'registerChildren' | 'notifyExpand' | 'renderItem' | 'renderParent' | 'onToggle' | 'acquireParentSlot'> & {
     children: ReactNode;
+    onListRetry: () => void;
 };
-export declare const InfiniteTreeListContextProvider: ({ children, itemSkeleton, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const InfiniteTreeListContextProvider: ({ children, itemSkeleton, nodePaginationMap, onListRetry, registerChildren, notifyExpand, enterAnimation, tailRegistry, renderItem, renderParent, onToggle, acquireParentSlot, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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 {};