@astral/ui 4.99.2 → 4.101.0

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

package/node/components/InfiniteTreeList/ParentItems/Item/useLogic/useLogic.d.ts

@@ -0,0 +1,12 @@
+import { type CSSProperties } from 'react';
+import { type ItemProps } from '../types';
+type UseLogicParams = ItemProps;
+export declare const useLogic: ({ parent }: UseLogicParams) => {
+    slot: HTMLDivElement | null;
+    nodeId: string;
+    cssVars: CSSProperties;
+    parent: import("../../../types").FlattenTree<import("../../../types").InfiniteTreeListData>;
+    renderParent: (item: import("../../../types").FlattenTree<import("../../../types").InfiniteTreeListData>) => import("react").ReactNode;
+    onToggle: (item: import("../../../types").InfiniteTreeListData) => void;
+};
+export {};

package/node/components/InfiniteTreeList/ParentItems/Item/useLogic/useLogic.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const InfiniteTreeListContext_1 = require("../../../InfiniteTreeListContext");
+const useLogic = ({ parent }) => {
+    const { renderParent, onToggle, acquireParentSlot } = (0, react_1.useContext)(InfiniteTreeListContext_1.InfiniteTreeListContext);
+    const slot = acquireParentSlot(parent.id);
+    const { nodeId, level, siblingIndex } = parent.meta;
+    const cssVars = {
+        '--level': level,
+        '--sibling-index': siblingIndex,
+    };
+    return { slot, nodeId, cssVars, parent, renderParent, onToggle };
+};
+exports.useLogic = useLogic;

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

@@ -0,0 +1,11 @@
+import type { InfiniteTreeListData } from '../types';
+import type { ParentItemsProps } from './types';
+/**
+ * Постоянный слой строк узлов с подгружаемыми дочерними элементами.
+ *
+ * Разметки на своём месте не даёт: каждая строка рисуется порталом в свой
+ * контейнер, а виртуализация переносит контейнер в строку скролла. Строка
+ * монтируется один раз, поэтому её состояние переживает и уход со скролла, и
+ * сворачивание ветки
+ */
+export declare const ParentItems: <TData extends InfiniteTreeListData<TData>>({ parents, }: ParentItemsProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/node/components/InfiniteTreeList/ParentItems/ParentItems.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParentItems = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Item_1 = require("./Item");
+/**
+ * Постоянный слой строк узлов с подгружаемыми дочерними элементами.
+ *
+ * Разметки на своём месте не даёт: каждая строка рисуется порталом в свой
+ * контейнер, а виртуализация переносит контейнер в строку скролла. Строка
+ * монтируется один раз, поэтому её состояние переживает и уход со скролла, и
+ * сворачивание ветки
+ */
+const ParentItems = ({ parents, }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: parents.map((parent) => ((0, jsx_runtime_1.jsx)(Item_1.Item, { parent: parent }, parent.id))) }));
+exports.ParentItems = ParentItems;

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

@@ -0,0 +1,3 @@
+export * from './ParentItems';
+export * from './Item';
+export * from './types';

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

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

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

@@ -0,0 +1,8 @@
+import type { FlattenTree, InfiniteTreeListData } from '../types';
+export type ParentItemsProps<TData extends InfiniteTreeListData<TData>> = {
+    /**
+     * Узлы с подгружаемыми дочерними элементами, строки которых держатся
+     * смонтированными
+     */
+    parents: FlattenTree<TData>[];
+};

package/node/components/InfiniteTreeList/ParentItems/types.js

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

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

@@ -0,0 +1,9 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+type ChildrenPlaceholderProps<TData extends InfiniteTreeListData<TData>> = {
+    /**
+     * Строка ветки с заполненным `placeholderKind`
+     */
+    item: FlattenTree<TData>;
+};
+export declare const ChildrenPlaceholder: <TData extends InfiniteTreeListData<TData>>({ item, }: ChildrenPlaceholderProps<TData>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChildrenPlaceholder = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Loader_1 = require("../../../Loader");
+const InfiniteTreeListContext_1 = require("../../InfiniteTreeListContext");
+const InfiniteTreeListItem_1 = require("../../InfiniteTreeListItem");
+const NoDataRow_1 = require("./NoDataRow");
+const ChildrenPlaceholder = ({ item, }) => {
+    const { onRetry } = (0, react_1.useContext)(InfiniteTreeListContext_1.InfiniteTreeListContext);
+    const { parentId } = item.meta;
+    switch (item.placeholderKind) {
+        case 'spinner':
+            return (0, jsx_runtime_1.jsx)(Loader_1.Loader, {});
+        case 'skeleton':
+            return (0, jsx_runtime_1.jsx)(InfiniteTreeListItem_1.InfiniteTreeListItem, { isLoading: true, children: null });
+        case 'no-data':
+            return (0, jsx_runtime_1.jsx)(NoDataRow_1.NoDataRow, {});
+        case 'error':
+            return ((0, jsx_runtime_1.jsx)(InfiniteTreeListItem_1.InfiniteTreeListItem, { isError: true, onRetry: () => parentId && onRetry(parentId), children: null }));
+        default:
+            return null;
+    }
+};
+exports.ChildrenPlaceholder = ChildrenPlaceholder;

package/node/components/InfiniteTreeList/TreeItem/ChildrenPlaceholder/NoDataRow/NoDataRow.d.ts

@@ -0,0 +1 @@
+export declare const NoDataRow: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoDataRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Typography_1 = require("../../../../Typography");
+const constants_1 = require("../../../constants");
+const InfiniteTreeListItem_1 = require("../../../InfiniteTreeListItem");
+const NoDataRow = () => ((0, jsx_runtime_1.jsx)(InfiniteTreeListItem_1.InfiniteTreeListItem, { children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { color: "grey", colorIntensity: "600", children: constants_1.CHILDREN_NO_DATA_MSG }) }));
+exports.NoDataRow = NoDataRow;

package/node/components/InfiniteTreeList/TreeItem/ChildrenPlaceholder/NoDataRow/index.d.ts

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

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

package/node/components/InfiniteTreeList/TreeItem/ChildrenPlaceholder/index.d.ts

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

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

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

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+type CustomItemWrapperProps = {
+    /**
+     * Строка плоского списка
+     */
+    item: FlattenTree<InfiniteTreeListData>;
+    /**
+     * Рендер-функция строки из props списка
+     */
+    renderItem: (item: FlattenTree<InfiniteTreeListData>) => ReactNode;
+};
+/**
+ * Изолирует `renderItem` потребителя от ре-рендеров строки: без `memo` каждый
+ * ре-рендер `Item` пересобирал бы разметку строки заново.
+ *
+ * Узлы с подгружаемыми дочерними элементами рисует `CustomParentWrapper`
+ */
+export declare const CustomItemWrapper: import("react").MemoExoticComponent<({ item, renderItem }: CustomItemWrapperProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomItemWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// cspell:ignore пересобирал
+const react_1 = require("react");
+/**
+ * Изолирует `renderItem` потребителя от ре-рендеров строки: без `memo` каждый
+ * ре-рендер `Item` пересобирал бы разметку строки заново.
+ *
+ * Узлы с подгружаемыми дочерними элементами рисует `CustomParentWrapper`
+ */
+exports.CustomItemWrapper = (0, react_1.memo)(({ item, renderItem }) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderItem(item) }));

package/node/components/InfiniteTreeList/TreeItem/CustomItemWrapper/index.d.ts

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

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

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

@@ -0,0 +1,5 @@
+import type { ParentSlotProps } from './types';
+/**
+ * Слот строки родительского узла списка
+ */
+export declare const ParentSlot: ({ itemId }: ParentSlotProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParentSlot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const InfiniteTreeListContext_1 = require("../../InfiniteTreeListContext");
+const styles_1 = require("./styles");
+/**
+ * Слот строки родительского узла списка
+ */
+const ParentSlot = ({ itemId }) => {
+    const { acquireParentSlot, enterAnimation } = (0, react_1.useContext)(InfiniteTreeListContext_1.InfiniteTreeListContext);
+    const hostRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const host = hostRef.current;
+        const slot = acquireParentSlot(itemId);
+        if (!host || !slot) {
+            return;
+        }
+        host.appendChild(slot);
+        const row = slot.firstElementChild;
+        if (row instanceof HTMLElement) {
+            // Без снятия узел вернулся бы в список с анимацией исчезновения от
+            // прошлого сворачивания ветки
+            row.classList.remove(constants_1.infiniteTreeListClassnames.rowRemoveAnimation);
+            const { shouldAnimate, delayIndex } = enterAnimation.read(itemId);
+            row.classList.toggle(constants_1.infiniteTreeListClassnames.rowAddAnimation, shouldAnimate);
+            if (shouldAnimate && delayIndex !== undefined) {
+                row.style.setProperty('--sibling-index', String(delayIndex));
+            }
+        }
+        enterAnimation.claim(itemId);
+        // Контейнер не удаляется, а открепляется: строка остаётся смонтированной и
+        // ждёт следующего появления узла на экране
+        return () => {
+            slot.remove();
+        };
+    }, [itemId, acquireParentSlot, enterAnimation]);
+    return (0, jsx_runtime_1.jsx)(styles_1.Host, { ref: hostRef });
+};
+exports.ParentSlot = ParentSlot;

package/node/components/InfiniteTreeList/TreeItem/ParentSlot/index.d.ts

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

package/node/components/InfiniteTreeList/TreeItem/ParentSlot/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("./ParentSlot"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * Место строки узла в скролле. Своего box не создаёт: отступы и раскладка
+ * перенесённой строки считаются так же, как если бы она была здесь всегда
+ */
+export declare const Host: 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/TreeItem/ParentSlot/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Host = void 0;
+const styled_1 = require("../../../styled");
+/**
+ * Место строки узла в скролле. Своего box не создаёт: отступы и раскладка
+ * перенесённой строки считаются так же, как если бы она была здесь всегда
+ */
+exports.Host = styled_1.styled.div `
+  display: contents;
+`;

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

@@ -0,0 +1,6 @@
+export type ParentSlotProps = {
+    /**
+     * Id узла, чей контейнер занимает строка
+     */
+    itemId: string;
+};

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

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

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

@@ -1,3 +1,6 @@
-import type { InfiniteTreeListData } from '../types';
 import { type TreeItemProps } from './types';
-export declare const TreeItem: <TData extends InfiniteTreeListData<TData>>(props: TreeItemProps<TData>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Строка виртуализации: обёртка, которую `Virtuoso` рендерит вокруг элемента.
+ * Ставит контекст строки, css-переменные уровня и каскада, classname анимации
+ */
+export declare const TreeItem: ({ children, ...props }: TreeItemProps) => import("react/jsx-runtime").JSX.Element;

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