@astral/ui 4.100.0 → 4.102.0

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

@@ -1,18 +1,68 @@
-import { useCallback, useContext, useEffect, useState, } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState, } from 'react';
 import { InfiniteTreeListContext } from '../../InfiniteTreeListContext';
 import { TreeListItemContext } from '../TreeListItemContext';
-export const useLogic = ({ isDisabled, disabledReason, }) => {
-    const { itemSkeleton, setDisabled } = useContext(InfiniteTreeListContext);
+/**
+ * Логика строки: отдаёт списку данные дочерних элементов и callback-функции
+ * пагинации, сообщает о раскрытии узла и собирает состояние блокировки строки
+ */
+export const useLogic = ({ isDisabled, disabledReason, isLoading, isError, isEndReached, childItems, onOpen, onLoadMore, onRetry, }) => {
+    const { itemSkeleton, setDisabled, registerChildrenCallbacks, registerChildren, notifyExpand, } = useContext(InfiniteTreeListContext);
     const { item, onToggle, isDisabled: isDisabledByActions, disabledReason: disabledReasonByActions, } = useContext(TreeListItemContext);
+    const isChildrenControl = childItems !== undefined || onLoadMore !== undefined;
     useEffect(() => {
         if (isDisabled) {
             setDisabled(item.id, isDisabled);
         }
     }, [isDisabled]);
-    const [isChevronActive, setChevronActive] = useState(item.meta.isExpanded);
+    useEffect(() => {
+        registerChildrenCallbacks(item.id, {
+            onLoadMore,
+            onRetry,
+        });
+    }, [item.id, onLoadMore, onRetry, registerChildrenCallbacks]);
+    useEffect(() => {
+        if (!isChildrenControl) {
+            return;
+        }
+        registerChildren(item.id, {
+            data: childItems ?? [],
+            isLoading,
+            isError,
+            isEndReached,
+        });
+    }, [
+        item.id,
+        isChildrenControl,
+        childItems,
+        isLoading,
+        isError,
+        isEndReached,
+        registerChildren,
+    ]);
+    // onOpen вызывается на раскрытии узла, а не на клике: узел раскрывается и
+    // через initialExpandedLevel, где клика не было. Повторные вызовы блокируются
+    const onOpenRef = useRef(onOpen);
+    useEffect(() => {
+        onOpenRef.current = onOpen;
+    });
+    useEffect(() => {
+        if (!item.meta.isExpanded) {
+            return;
+        }
+        notifyExpand(item.id, () => onOpenRef.current?.());
+    }, [item.meta.isExpanded, item.id, notifyExpand]);
+    const [optimisticExpanded, setOptimisticExpanded] = useState(null);
+    const isChevronActive = optimisticExpanded ?? item.meta.isExpanded;
+    useEffect(() => {
+        setOptimisticExpanded(null);
+    }, [item.meta.isExpanded]);
     const handleClick = 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
@@ -33,5 +83,7 @@ export const useLogic = ({ isDisabled, disabledReason, }) => {
         tooltipProps,
         isDisabledByActions,
         isChevronActive,
+        isRowLoading: Boolean(isLoading && !isChildrenControl),
+        isRowError: Boolean(isError && !isChildrenControl),
     };
 };

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from '../../Typography';
+import { Typography } from '../../../Typography';
 import { END_OF_SCROLL_MESSAGE } from './constants';
 export const EndData = ({ endOfScrollMsg = END_OF_SCROLL_MESSAGE }) => (_jsx(Typography, { children: endOfScrollMsg }));

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../Button';
-import { Typography } from '../../Typography';
+import { Button } from '../../../Button';
+import { Typography } from '../../../Typography';
 import { ERROR_MESSAGE } from './constants';
 import { Wrapper } from './styles';
 export const ErrorMessage = ({ onRetry }) => (_jsxs(Wrapper, { children: [_jsx(Typography, { align: "center", children: ERROR_MESSAGE }), _jsx(Button, { onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })] }));

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../../../styled").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/components/InfiniteTreeList/{ErrorMessage → ListFooter/ErrorMessage}/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../../styled';
+import { styled } from '../../../styled';
 export const Wrapper = styled.div `
   display: grid;
   grid-template-columns: 100%;

package/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/components/InfiniteTreeList/ListFooter/ListFooter.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader } from '../../Loader';
+import { EndData } from './EndData';
+import { ErrorMessage } from './ErrorMessage';
+import { Footer, FooterDummy } from './styles';
+/**
+ * Футер списка для Virtuoso.
+ *
+ * Вынесен в модуль и передаётся в `components.Footer`: inline-компонент в
+ * `components` на каждый рендер даёт новый тип, и React размонтирует футер.
+ * Данные приходят через `context` Virtuoso
+ */
+export const ListFooter = ({ context }) => {
+    const { isLoading, isError, isEndReached, endOfScrollMsg, onRetry } = context;
+    if (isLoading) {
+        return (_jsx(Footer, { children: _jsx(Loader, {}) }));
+    }
+    if (isError) {
+        return (_jsx(Footer, { children: _jsx(ErrorMessage, { onRetry: onRetry }) }));
+    }
+    if (isEndReached) {
+        return (_jsx(Footer, { children: _jsx(EndData, { endOfScrollMsg: endOfScrollMsg }) }));
+    }
+    return _jsx(FooterDummy, {});
+};

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

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

package/components/InfiniteTreeList/ListFooter/index.js

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

package/components/InfiniteTreeList/{styles.d.ts → ListFooter/styles.d.ts}

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const Footer: import("../styled").StyledComponent<{
+export declare const Footer: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const FooterDummy: import("../styled").StyledComponent<{
+export declare const FooterDummy: import("../../styled").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/components/InfiniteTreeList/{styles.js → ListFooter/styles.js}

@@ -1,4 +1,4 @@
-import { styled } from '../styled';
+import { styled } from '../../styled';
 export const Footer = styled.footer `
   display: flex;
   flex-shrink: 0;

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

@@ -0,0 +1,22 @@
+export type ListFooterContext = {
+    /**
+     * Флаг состояния загрузки
+     */
+    isLoading?: boolean;
+    /**
+     * Флаг состояния ошибки
+     */
+    isError?: boolean;
+    /**
+     * Флаг достижения конца списка
+     */
+    isEndReached?: boolean;
+    /**
+     * Сообщение, отображаемое при достижении конца списка
+     */
+    endOfScrollMsg?: string;
+    /**
+     * Функция обработки нажатия на кнопку "Повторить запрос"
+     */
+    onRetry: () => void;
+};

package/components/InfiniteTreeList/ListFooter/types.js

@@ -0,0 +1 @@
+export {};

package/components/InfiniteTreeList/OnTopButton/OnTopButton.d.ts

@@ -1,8 +1,14 @@
 import { type RefObject } from 'react';
 type Props = {
-    isActive: boolean;
+    /**
+     * Контейнер со скроллом
+     */
     scrollRef: RefObject<HTMLElement | null>;
+    /**
+     * Ref кнопки. Скролл списка переключает её видимость через classname
+     */
+    buttonRef: RefObject<HTMLButtonElement | null>;
     handleScrollToTop: () => void;
 };
-export declare const OnTopButton: ({ isActive, scrollRef, handleScrollToTop, }: Props) => import("react").ReactPortal | null;
+export declare const OnTopButton: ({ scrollRef, buttonRef, handleScrollToTop, }: Props) => import("react").ReactPortal | null;
 export {};

package/components/InfiniteTreeList/OnTopButton/OnTopButton.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
-import { ScrollToTopButton } from '../../ScrollToTopButton';
-export const OnTopButton = ({ isActive, scrollRef, handleScrollToTop, }) => {
+import { infiniteTreeListClassnames } from '../constants';
+import { StyledScrollToTopButton } from './styles';
+export const OnTopButton = ({ scrollRef, buttonRef, handleScrollToTop, }) => {
     const parentElement = scrollRef?.current?.parentElement;
-    if (isActive && parentElement) {
-        return createPortal(_jsx(ScrollToTopButton, { onClick: handleScrollToTop }), parentElement);
+    if (!parentElement) {
+        return null;
     }
-    return null;
+    return createPortal(_jsx(StyledScrollToTopButton, { ref: buttonRef, className: infiniteTreeListClassnames.scrollToTopButton, onClick: handleScrollToTop }), parentElement);
 };

package/components/InfiniteTreeList/OnTopButton/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledScrollToTopButton: import("../../styled").StyledComponent<import("../../ScrollToTopButton").ScrollToTopButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/InfiniteTreeList/OnTopButton/styles.js

@@ -0,0 +1,10 @@
+import { ScrollToTopButton } from '../../ScrollToTopButton';
+import { styled } from '../../styled';
+import { infiniteTreeListClassnames } from '../constants';
+export const StyledScrollToTopButton = styled(ScrollToTopButton) `
+  display: none;
+
+  &.${infiniteTreeListClassnames.visibleScrollToTopButton} {
+    display: inline-flex;
+  }
+`;

package/components/InfiniteTreeList/ParentItems/Item/CustomParentWrapper/CustomParentWrapper.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import type { FlattenTree, InfiniteTreeListData } from '../../../types';
+type CustomParentWrapperProps = {
+    /**
+     * Строка узла с подгружаемыми дочерними элементами
+     */
+    item: FlattenTree<InfiniteTreeListData>;
+    /**
+     * Рендер-функция строки родителя из props списка
+     */
+    renderParent: (item: FlattenTree<InfiniteTreeListData>) => ReactNode;
+};
+/**
+ * То же, что `CustomItemWrapper`, но для узлов с подгружаемыми дочерними
+ * элементами.
+ *
+ * Отдельный компонент, а не ветка внутри `CustomItemWrapper`: хуки из
+ * `renderItem` и `renderParent` ложатся в hook-list вызвавшего компонента, и
+ * смена ветки меняла бы их количество между рендерами — React упал бы с
+ * `Rendered fewer hooks than expected`
+ */
+export declare const CustomParentWrapper: import("react").MemoExoticComponent<({ item, renderParent }: CustomParentWrapperProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/components/InfiniteTreeList/ParentItems/Item/CustomParentWrapper/CustomParentWrapper.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+/**
+ * То же, что `CustomItemWrapper`, но для узлов с подгружаемыми дочерними
+ * элементами.
+ *
+ * Отдельный компонент, а не ветка внутри `CustomItemWrapper`: хуки из
+ * `renderItem` и `renderParent` ложатся в hook-list вызвавшего компонента, и
+ * смена ветки меняла бы их количество между рендерами — React упал бы с
+ * `Rendered fewer hooks than expected`
+ */
+export const CustomParentWrapper = memo(({ item, renderParent }) => (_jsx(_Fragment, { children: renderParent(item) })));

package/components/InfiniteTreeList/ParentItems/Item/CustomParentWrapper/index.d.ts

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

package/components/InfiniteTreeList/ParentItems/Item/CustomParentWrapper/index.js

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ItemProps } from './types';
+/**
+ * Строка одного узла с подгружаемыми дочерними элементами.
+ *
+ * В строке виртуализации не живёт: рисуется порталом в свой постоянный
+ * контейнер, а контейнер `TreeItem` переносит в строку скролла, пока узел на
+ * экране
+ */
+export declare const Item: import("react").MemoExoticComponent<(props: ItemProps) => import("react").ReactPortal | null>;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { createPortal } from 'react-dom';
+import { infiniteTreeListClassnames } from '../../constants';
+import { TreeListItemContextProvider } from '../../InfiniteTreeListItem';
+import { Wrapper } from '../../TreeItem/styles';
+import { CustomParentWrapper } from './CustomParentWrapper';
+import { useLogic } from './useLogic';
+/**
+ * Строка одного узла с подгружаемыми дочерними элементами.
+ *
+ * В строке виртуализации не живёт: рисуется порталом в свой постоянный
+ * контейнер, а контейнер `TreeItem` переносит в строку скролла, пока узел на
+ * экране
+ */
+export const Item = memo((props) => {
+    const { nodeId, slot, cssVars, parent, renderParent, onToggle } = useLogic(props);
+    if (!slot) {
+        return null;
+    }
+    return createPortal(_jsx(TreeListItemContextProvider, { item: parent, onToggle: onToggle, children: _jsx(Wrapper, { id: nodeId, className: infiniteTreeListClassnames.row, style: cssVars, children: _jsx(CustomParentWrapper, { item: parent, renderParent: renderParent }) }) }), slot);
+});

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

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

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

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

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

@@ -0,0 +1,8 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+export type ItemProps = {
+    /**
+     * Узел с подгружаемыми дочерними элементами, строку которого нужно держать
+     * смонтированной
+     */
+    parent: FlattenTree<InfiniteTreeListData>;
+};

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

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/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/components/InfiniteTreeList/ParentItems/Item/useLogic/useLogic.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { InfiniteTreeListContext } from '../../../InfiniteTreeListContext';
+export const useLogic = ({ parent }) => {
+    const { renderParent, onToggle, acquireParentSlot } = useContext(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 };
+};

package/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/components/InfiniteTreeList/ParentItems/ParentItems.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Item } from './Item';
+/**
+ * Постоянный слой строк узлов с подгружаемыми дочерними элементами.
+ *
+ * Разметки на своём месте не даёт: каждая строка рисуется порталом в свой
+ * контейнер, а виртуализация переносит контейнер в строку скролла. Строка
+ * монтируется один раз, поэтому её состояние переживает и уход со скролла, и
+ * сворачивание ветки
+ */
+export const ParentItems = ({ parents, }) => (_jsx(_Fragment, { children: parents.map((parent) => (_jsx(Item, { parent: parent }, parent.id))) }));

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

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

package/components/InfiniteTreeList/ParentItems/index.js

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

package/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/components/InfiniteTreeList/ParentItems/types.js

@@ -0,0 +1 @@
+export {};

package/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/components/InfiniteTreeList/TreeItem/ChildrenPlaceholder/ChildrenPlaceholder.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { Loader } from '../../../Loader';
+import { InfiniteTreeListContext } from '../../InfiniteTreeListContext';
+import { InfiniteTreeListItem } from '../../InfiniteTreeListItem';
+import { NoDataRow } from './NoDataRow';
+export const ChildrenPlaceholder = ({ item, }) => {
+    const { onRetry } = useContext(InfiniteTreeListContext);
+    const { parentId } = item.meta;
+    switch (item.placeholderKind) {
+        case 'spinner':
+            return _jsx(Loader, {});
+        case 'skeleton':
+            return _jsx(InfiniteTreeListItem, { isLoading: true, children: null });
+        case 'no-data':
+            return _jsx(NoDataRow, {});
+        case 'error':
+            return (_jsx(InfiniteTreeListItem, { isError: true, onRetry: () => parentId && onRetry(parentId), children: null }));
+        default:
+            return null;
+    }
+};

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '../../../../Typography';
+import { CHILDREN_NO_DATA_MSG } from '../../../constants';
+import { InfiniteTreeListItem } from '../../../InfiniteTreeListItem';
+export const NoDataRow = () => (_jsx(InfiniteTreeListItem, { children: _jsx(Typography, { color: "grey", colorIntensity: "600", children: CHILDREN_NO_DATA_MSG }) }));

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

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

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

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

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

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

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

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

package/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/components/InfiniteTreeList/TreeItem/CustomItemWrapper/CustomItemWrapper.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// cspell:ignore пересобирал
+import { memo } from 'react';
+/**
+ * Изолирует `renderItem` потребителя от ре-рендеров строки: без `memo` каждый
+ * ре-рендер `Item` пересобирал бы разметку строки заново.
+ *
+ * Узлы с подгружаемыми дочерними элементами рисует `CustomParentWrapper`
+ */
+export const CustomItemWrapper = memo(({ item, renderItem }) => _jsx(_Fragment, { children: renderItem(item) }));

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

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

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

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

package/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/components/InfiniteTreeList/TreeItem/ParentSlot/ParentSlot.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useLayoutEffect, useRef } from 'react';
+import { infiniteTreeListClassnames } from '../../constants';
+import { InfiniteTreeListContext } from '../../InfiniteTreeListContext';
+import { Host } from './styles';
+/**
+ * Слот строки родительского узла списка
+ */
+export const ParentSlot = ({ itemId }) => {
+    const { acquireParentSlot, enterAnimation } = useContext(InfiniteTreeListContext);
+    const hostRef = useRef(null);
+    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(infiniteTreeListClassnames.rowRemoveAnimation);
+            const { shouldAnimate, delayIndex } = enterAnimation.read(itemId);
+            row.classList.toggle(infiniteTreeListClassnames.rowAddAnimation, shouldAnimate);
+            if (shouldAnimate && delayIndex !== undefined) {
+                row.style.setProperty('--sibling-index', String(delayIndex));
+            }
+        }
+        enterAnimation.claim(itemId);
+        // Контейнер не удаляется, а открепляется: строка остаётся смонтированной и
+        // ждёт следующего появления узла на экране
+        return () => {
+            slot.remove();
+        };
+    }, [itemId, acquireParentSlot, enterAnimation]);
+    return _jsx(Host, { ref: hostRef });
+};

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { styled } from '../../../styled';
+/**
+ * Место строки узла в скролле. Своего box не создаёт: отступы и раскладка
+ * перенесённой строки считаются так же, как если бы она была здесь всегда
+ */
+export const Host = styled.div `
+  display: contents;
+`;