@astral/ui 4.92.3 → 4.93.0

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/usePanelHeader/index.d.ts

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

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/usePanelHeader/index.js

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

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/usePanelHeader/usePanelHeader.d.ts

@@ -0,0 +1,24 @@
+import { type MouseEvent } from 'react';
+import { type MobileSlidePanelContextProps } from '../../../../MobileSlidePanelContext';
+import { type MobilePanelHeader } from '../../../../types';
+type UsePanelHeaderParams = MobilePanelHeader & {
+    id: string;
+    isOpen: boolean;
+    activeHeader?: MobilePanelHeader | null;
+    setHeader?: MobileSlidePanelContextProps['setHeader'];
+    removeHeader?: MobileSlidePanelContextProps['removeHeader'];
+};
+/**
+ * Публикует заголовок слоя в стек и снимает его при закрытии.
+ */
+export declare const usePanelHeader: ({ id, isOpen, activeHeader, setHeader, removeHeader, parentLabel, parentNote, parentControl, parentAdditionalContent, isParentSelected, isParentDisabled, onParentClick, }: UsePanelHeaderParams) => {
+    handleParentClick: (event: MouseEvent<HTMLDivElement>) => void;
+    parentLabel?: import("react").ReactNode;
+    parentNote?: import("react").ReactNode;
+    parentControl?: import("react").ReactNode;
+    parentAdditionalContent?: import("react").ReactNode;
+    isParentSelected?: boolean | undefined;
+    isParentDisabled?: boolean | undefined;
+    onParentClick?: ((event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+};
+export {};

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/usePanelHeader/usePanelHeader.js

@@ -0,0 +1,50 @@
+import { useLayoutEffect, useMemo } from 'react';
+/**
+ * Публикует заголовок слоя в стек и снимает его при закрытии.
+ */
+export const usePanelHeader = ({ id, isOpen, activeHeader, setHeader, removeHeader, parentLabel, parentNote, parentControl, parentAdditionalContent, isParentSelected, isParentDisabled, onParentClick, }) => {
+    const localHeader = useMemo(() => ({
+        parentLabel,
+        parentNote,
+        parentControl,
+        parentAdditionalContent,
+        isParentSelected,
+        isParentDisabled,
+        onParentClick,
+    }), [
+        parentLabel,
+        parentNote,
+        parentControl,
+        parentAdditionalContent,
+        isParentSelected,
+        isParentDisabled,
+        onParentClick,
+    ]);
+    const displayedHeader = activeHeader ?? localHeader;
+    const { isParentDisabled: isDisplayedParentDisabled, onParentClick: onDisplayedParentClick, } = displayedHeader;
+    const handleParentClick = (event) => {
+        if (isDisplayedParentDisabled) {
+            return;
+        }
+        onDisplayedParentClick?.(event);
+    };
+    useLayoutEffect(() => {
+        if (!setHeader || !isOpen) {
+            return;
+        }
+        setHeader(id, localHeader);
+    }, [setHeader, isOpen, id, localHeader]);
+    // Второй useLayoutEffect нужен, чтобы изменение localHeader не повлияло на cleanup функцию
+    useLayoutEffect(() => {
+        if (!removeHeader || !isOpen) {
+            return;
+        }
+        return () => {
+            removeHeader(id);
+        };
+    }, [removeHeader, isOpen, id]);
+    return {
+        ...displayedHeader,
+        handleParentClick,
+    };
+};

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/useRegisterClose/index.d.ts

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

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/useRegisterClose/index.js

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

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/useRegisterClose/useRegisterClose.d.ts

@@ -0,0 +1,13 @@
+import { type MouseEvent } from 'react';
+import { type MobileSlidePanelContextProps } from '../../../../MobileSlidePanelContext';
+type UseRegisterCloseParams = {
+    isMounted: boolean;
+    register?: MobileSlidePanelContextProps['register'];
+    onClose: (event: MouseEvent<HTMLElement>) => void;
+};
+/**
+ * Кладёт актуальный onClose в стек, не перерегистрируя слой при смене обработчика закрытия.
+ * Нужен, чтобы вложенность не ломалась: новый onClose не должен выталкивать слой в конец стека.
+ */
+export declare const useRegisterClose: ({ isMounted, register, onClose, }: UseRegisterCloseParams) => void;
+export {};

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/useRegisterClose/useRegisterClose.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Кладёт актуальный onClose в стек, не перерегистрируя слой при смене обработчика закрытия.
+ * Нужен, чтобы вложенность не ломалась: новый onClose не должен выталкивать слой в конец стека.
+ */
+export const useRegisterClose = ({ isMounted, register, onClose, }) => {
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    useEffect(() => {
+        if (!isMounted || !register) {
+            return;
+        }
+        return register((event) => {
+            onCloseRef.current(event);
+        });
+    }, [isMounted, register]);
+};

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/index.d.ts

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

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/index.js

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

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/useLogic.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type MobileSlidePanelContentProps } from '../types';
+type UseLogicParams = MobileSlidePanelContentProps;
+/**
+ * Собирает жизненный цикл панели: присутствие в DOM, закрытие и шапку стека.
+ */
+export declare const useLogic: ({ id, isOpen, onClose, activeHeader, parentLabel, parentNote, parentControl, parentAdditionalContent, isParentSelected, isParentDisabled, onParentClick, }: UseLogicParams) => {
+    handleParentClick: (event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    parentLabel?: import("react").ReactNode;
+    parentNote?: import("react").ReactNode;
+    parentControl?: import("react").ReactNode;
+    parentAdditionalContent?: import("react").ReactNode;
+    isParentSelected?: boolean | undefined;
+    isParentDisabled?: boolean | undefined;
+    onParentClick?: ((event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+    isMobileMounted: boolean;
+    closeTop: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
+};
+export {};

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/useLogic.js

@@ -0,0 +1,39 @@
+import { useContext } from 'react';
+import { useTheme } from '../../../../../theme/hooks';
+import { MobileSlidePanelContext } from '../../MobileSlidePanelContext';
+import { useDelayedUnmount, usePanelHeader, useRegisterClose } from './hooks';
+/**
+ * Собирает жизненный цикл панели: присутствие в DOM, закрытие и шапку стека.
+ */
+export const useLogic = ({ id, isOpen, onClose, activeHeader, parentLabel, parentNote, parentControl, parentAdditionalContent, isParentSelected, isParentDisabled, onParentClick, }) => {
+    const { transitions: { duration: { standard: transitionDuration }, }, } = useTheme();
+    const { register, closeTop, setHeader, removeHeader } = useContext(MobileSlidePanelContext) ?? {};
+    const { isMounted: isMobileMounted } = useDelayedUnmount({
+        isOpen,
+        duration: transitionDuration,
+    });
+    useRegisterClose({
+        isMounted: isMobileMounted,
+        register,
+        onClose,
+    });
+    const header = usePanelHeader({
+        id,
+        isOpen,
+        activeHeader,
+        setHeader,
+        removeHeader,
+        parentLabel,
+        parentNote,
+        parentControl,
+        parentAdditionalContent,
+        isParentSelected,
+        isParentDisabled,
+        onParentClick,
+    });
+    return {
+        isMobileMounted,
+        closeTop,
+        ...header,
+    };
+};

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContext/MobileSlidePanelContext.d.ts

@@ -0,0 +1,13 @@
+import { type MouseEvent } from 'react';
+import { type MobilePanelHeader } from '../types';
+export type MobileSlidePanelContextProps = {
+    register: (close: (event: MouseEvent<HTMLElement>) => void) => () => void;
+    closeTop: (event: MouseEvent<HTMLElement>) => void;
+    setHeader: (headerId: string, header: MobilePanelHeader) => void;
+    removeHeader: (headerId: string) => void;
+};
+/**
+ * Общий стек закрытия и заголовков вложенных мобильных панелей.
+ * Нужен, чтобы back и шапка всегда относились к верхнему слою, а не к каждому по отдельности.
+ */
+export declare const MobileSlidePanelContext: import("react").Context<MobileSlidePanelContextProps | null>;

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContext/MobileSlidePanelContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+/**
+ * Общий стек закрытия и заголовков вложенных мобильных панелей.
+ * Нужен, чтобы back и шапка всегда относились к верхнему слою, а не к каждому по отдельности.
+ */
+export const MobileSlidePanelContext = createContext(null);

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContext/MobileSlidePanelContextProvider/MobileSlidePanelContextProvider.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type MobileSlidePanelContextProps } from '../MobileSlidePanelContext';
+type Props = MobileSlidePanelContextProps & {
+    children: ReactNode;
+};
+export declare const MobileSlidePanelContextProvider: ({ children, register, closeTop, setHeader, removeHeader, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContext/MobileSlidePanelContextProvider/MobileSlidePanelContextProvider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { MobileSlidePanelContext, } from '../MobileSlidePanelContext';
+export const MobileSlidePanelContextProvider = ({ children, register, closeTop, setHeader, removeHeader, }) => {
+    const contextValue = useMemo(() => ({
+        register,
+        closeTop,
+        setHeader,
+        removeHeader,
+    }), [register, closeTop, setHeader, removeHeader]);
+    return (_jsx(MobileSlidePanelContext.Provider, { value: contextValue, children: children }));
+};

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContext/MobileSlidePanelContextProvider/index.d.ts

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

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContext/MobileSlidePanelContextProvider/index.js

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

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MobileSlidePanelContext';
+export * from './MobileSlidePanelContextProvider';

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContext/index.js

@@ -0,0 +1,2 @@
+export * from './MobileSlidePanelContext';
+export * from './MobileSlidePanelContextProvider';

package/components/Tree/TreeItem/MobileSlidePanel/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const mobileSlidePanelClassnames: {
+    root: string;
+    nested: string;
+    content: string;
+    header: string;
+    headerParent: string;
+    headerControl: string;
+    headerAdditionalContent: string;
+    backButton: string;
+    slidePanel: string;
+};

package/components/Tree/TreeItem/MobileSlidePanel/constants.js

@@ -0,0 +1,12 @@
+import { createUIKitClassname } from '../../../utils/createUIKitClassname';
+export const mobileSlidePanelClassnames = {
+    root: createUIKitClassname('tree-item__mobile-panel'),
+    nested: createUIKitClassname('tree-item__mobile-panel_nested'),
+    content: createUIKitClassname('tree-item__mobile-panel-content'),
+    header: createUIKitClassname('tree-item__mobile-header'),
+    headerParent: createUIKitClassname('tree-item__mobile-header-parent'),
+    headerControl: createUIKitClassname('tree-item__mobile-header-control'),
+    headerAdditionalContent: createUIKitClassname('tree-item__mobile-header-additional-content'),
+    backButton: createUIKitClassname('tree-item__mobile-back-button'),
+    slidePanel: createUIKitClassname('tree-item__slide-panel'),
+};

package/components/Tree/TreeItem/MobileSlidePanel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './MobileSlidePanel';

package/components/Tree/TreeItem/MobileSlidePanel/index.js

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './MobileSlidePanel';

package/components/Tree/TreeItem/MobileSlidePanel/types.d.ts

@@ -0,0 +1,49 @@
+import { type MouseEvent, type ReactNode, type SyntheticEvent } from 'react';
+/**
+ * Данные родителя для шапки мобильной панели.
+ */
+export type MobilePanelHeader = {
+    /**
+     * Заголовок родителя в шапке.
+     */
+    parentLabel?: ReactNode;
+    /**
+     * Подзаголовок родителя в шапке.
+     */
+    parentNote?: ReactNode;
+    parentControl?: ReactNode;
+    /**
+     * Дополнительное содержимое под родителем в шапке.
+     */
+    parentAdditionalContent?: ReactNode;
+    /**
+     * Если `true`, родитель в шапке отображается как выбранный.
+     */
+    isParentSelected?: boolean;
+    /**
+     * Если `true`, клик по родителю в шапке недоступен.
+     */
+    isParentDisabled?: boolean;
+    /**
+     * Обработчик клика по родителю в шапке.
+     */
+    onParentClick?: (event: SyntheticEvent) => void;
+};
+export type MobileSlidePanelProps = {
+    /**
+     * Идентификатор слоя.
+     */
+    id: string;
+    /**
+     * Если `true`, панель открыта.
+     */
+    isOpen: boolean;
+    /**
+     * Закрывает текущий слой панели.
+     */
+    onClose: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Вложенные элементы дерева, отображаемые внутри панели.
+     */
+    children?: ReactNode;
+} & MobilePanelHeader;

package/components/Tree/TreeItem/MobileSlidePanel/types.js

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

package/components/Tree/TreeItem/MobileSlidePanel/useLogic/hooks/index.d.ts

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

package/components/Tree/TreeItem/MobileSlidePanel/useLogic/hooks/index.js

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

package/components/Tree/TreeItem/MobileSlidePanel/useLogic/hooks/usePanelStack/index.d.ts

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

package/components/Tree/TreeItem/MobileSlidePanel/useLogic/hooks/usePanelStack/index.js

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

package/components/Tree/TreeItem/MobileSlidePanel/useLogic/hooks/usePanelStack/usePanelStack.d.ts

@@ -0,0 +1,14 @@
+import { type MouseEvent } from 'react';
+import { type MobilePanelHeader } from '../../../types';
+/**
+ * Хранит стеки закрытия и заголовков вложенных панелей.
+ * Нужен, чтобы общий UI (закрытие и шапка) всегда относился к верхнему уровню вложенности,
+ * а не к каждому по отдельности.
+ */
+export declare const usePanelStack: () => {
+    register: (close: (event: MouseEvent<HTMLElement>) => void) => () => void;
+    closeTop: (event: MouseEvent<HTMLElement>) => void;
+    setHeader: (headerId: string, header: MobilePanelHeader) => void;
+    removeHeader: (headerId: string) => void;
+    activeHeader: MobilePanelHeader | null;
+};

package/components/Tree/TreeItem/MobileSlidePanel/useLogic/hooks/usePanelStack/usePanelStack.js

@@ -0,0 +1,62 @@
+import { useCallback, useRef, useState } from 'react';
+/**
+ * Хранит стеки закрытия и заголовков вложенных панелей.
+ * Нужен, чтобы общий UI (закрытие и шапка) всегда относился к верхнему уровню вложенности,
+ * а не к каждому по отдельности.
+ */
+export const usePanelStack = () => {
+    const stackRef = useRef([]);
+    const headersRef = useRef(new Map());
+    const headerOrderRef = useRef([]);
+    const [activeHeader, setActiveHeader] = useState(null);
+    /**
+     * Добавляет обработчик закрытия в стек и возвращает функцию снятия.
+     * Нужен, чтобы текущим считался последний зарегистрированный слой.
+     */
+    const register = useCallback((close) => {
+        stackRef.current.push(close);
+        return () => {
+            stackRef.current = stackRef.current.filter((registeredClose) => registeredClose !== close);
+        };
+    }, []);
+    /**
+     * Вызывает обработчик закрытия верхнего слоя.
+     * Нужен, чтобы снимать слои по одному, с конца стека.
+     */
+    const closeTop = useCallback((event) => {
+        stackRef.current[stackRef.current.length - 1]?.(event);
+    }, []);
+    /**
+     * Записывает или обновляет заголовок слоя. Если слой верхний — публикует его.
+     * Нужен, чтобы общий заголовок отражал текущий слой без смены порядка стека
+     * при повторной записи того же id.
+     */
+    const setHeader = useCallback((headerId, header) => {
+        const isNew = !headersRef.current.has(headerId);
+        headersRef.current.set(headerId, header);
+        if (isNew) {
+            headerOrderRef.current.push(headerId);
+        }
+        const topId = headerOrderRef.current[headerOrderRef.current.length - 1];
+        if (topId === headerId) {
+            setActiveHeader(header);
+        }
+    }, []);
+    /**
+     * Удаляет заголовок слоя и публикует предыдущий верхний.
+     * Нужен, чтобы заголовок следовал за разбором стека.
+     */
+    const removeHeader = useCallback((headerId) => {
+        headersRef.current.delete(headerId);
+        headerOrderRef.current = headerOrderRef.current.filter((headerItemId) => headerItemId !== headerId);
+        const topId = headerOrderRef.current[headerOrderRef.current.length - 1];
+        setActiveHeader(topId ? (headersRef.current.get(topId) ?? null) : null);
+    }, []);
+    return {
+        register,
+        closeTop,
+        setHeader,
+        removeHeader,
+        activeHeader,
+    };
+};

package/components/Tree/TreeItem/MobileSlidePanel/useLogic/index.d.ts

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

package/components/Tree/TreeItem/MobileSlidePanel/useLogic/index.js

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

package/components/Tree/TreeItem/MobileSlidePanel/useLogic/useLogic.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const useLogic: () => {
+    register: (close: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) => () => void;
+    closeTop: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
+    setHeader: (headerId: string, header: import("../types").MobilePanelHeader) => void;
+    removeHeader: (headerId: string) => void;
+    activeHeader: import("../types").MobilePanelHeader | null;
+    parentContext: import("../MobileSlidePanelContext").MobileSlidePanelContextProps | null;
+};

package/components/Tree/TreeItem/MobileSlidePanel/useLogic/useLogic.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { MobileSlidePanelContext } from '../MobileSlidePanelContext';
+import { usePanelStack } from './hooks';
+export const useLogic = () => {
+    const parentContext = useContext(MobileSlidePanelContext);
+    const panelStack = usePanelStack();
+    return {
+        parentContext,
+        ...panelStack,
+    };
+};

package/components/Tree/TreeItem/TreeItem.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { type TreeItemProps } from './types';
-export declare const TreeItem: (props: TreeItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TreeItem: import("react").ForwardRefExoticComponent<Omit<TreeItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/components/Tree/TreeItem/TreeItem.js

@@ -1,15 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Collapse } from '../../Collapse';
+import { forwardRef } from 'react';
 import { Tooltip } from '../../Tooltip';
+import { classNames } from '../../utils/classNames';
+import { cva } from '../../utils/cva';
 import { TOOLTIP_PLACEMENT, treeClassnames } from './constants';
-import { ChevronIcon, CollapseButton, Item, ItemContent, ItemWrapper, Label, LabelWrapper, Note, } from './styles';
+import { MobileSlidePanel } from './MobileSlidePanel';
+import { ChevronIcon, CollapseButton, Item, ItemContent, ItemWrapper, Label, LabelWrapper, Note, StyledCollapse, } from './styles';
 import { useLogic } from './useLogic';
-export const TreeItem = (props) => {
-    const { isOpen, handleToggle, itemProps, itemContentProps, tooltipProps } = useLogic(props);
-    const { id, prefixId, label, note, renderItem, children, className, isSelected, isDisabled = false, disabledReason, isDefaultExpanded, isForceExpanded, isNotBlockingExpandList = false, level = 0, component = 'div', onClick, ...restProps } = props;
-    const renderCollapseButton = () => (_jsx(CollapseButton, { "$isNotBlockingExpandList": isNotBlockingExpandList, disabled: !isNotBlockingExpandList && isDisabled, variant: "text", onClick: handleToggle, children: _jsx(ChevronIcon, { "$isActive": isOpen }) }));
+const itemCva = cva(treeClassnames.item, {
+    variants: {
+        isOpen: {
+            true: treeClassnames.open,
+        },
+    },
+});
+const itemContentCva = cva(treeClassnames.itemContent, {
+    variants: {
+        isSelected: {
+            true: treeClassnames.selected,
+        },
+        isDisabled: {
+            true: treeClassnames.disabled,
+        },
+        hasNested: {
+            true: treeClassnames.hasNested,
+        },
+    },
+});
+const collapseButtonCva = cva(treeClassnames.collapseButton, {
+    variants: {
+        isNotBlockingExpandList: {
+            true: treeClassnames.notBlockingExpandList,
+        },
+        isOpen: {
+            true: treeClassnames.open,
+        },
+    },
+});
+export const TreeItem = forwardRef((props, ref) => {
+    const { isOpen, isMobileOpen, isMobile, handleToggle, handleClose, itemProps, itemContentProps, tooltipProps, itemCssVars, mobileSlidePanelProps, } = useLogic(props);
+    const { id, prefixId, label, note, renderItem, children, className, isSelected, isDisabled = false, disabledReason, isDefaultExpanded, isForceExpanded, isNotBlockingExpandList = false, level = 0, component = 'div', onClick, mobileHeaderLabel, mobileHeaderControl, mobileHeaderAdditionalContent, onMobilePanelOpenChange, ...restProps } = props;
+    const renderCollapseButton = () => (_jsx(CollapseButton, { className: collapseButtonCva({
+            isNotBlockingExpandList,
+            isOpen,
+        }), disabled: !isNotBlockingExpandList && isDisabled, variant: "text", onClick: handleToggle, children: _jsx(ChevronIcon, {}) }));
     if (children) {
-        return (_jsxs(Item, { ...restProps, "$level": level, as: component, className: className, ...itemProps, children: [_jsx(ItemContent, { "$isSelected": isSelected, "$isDisabled": isDisabled, "$level": level, ...itemContentProps, children: _jsx(Tooltip, { placement: TOOLTIP_PLACEMENT, ...tooltipProps, children: renderItem ? (_jsxs(LabelWrapper, { "$level": level, children: [renderCollapseButton(), renderItem({ label, note, id })] })) : (_jsxs(ItemWrapper, { children: [_jsxs(LabelWrapper, { "$level": level, children: [renderCollapseButton(), _jsx(Label, { component: "div", children: label })] }), note && (_jsx(Note, { className: treeClassnames.note, variant: "caption", color: "textSecondary", children: note }))] })) }) }), _jsx(Collapse, { in: isOpen, unmountOnExit: true, children: children })] }));
+        return (_jsxs(Item, { ...restProps, ref: ref, as: component, className: classNames(className, itemCva({ isOpen })), style: itemCssVars, ...itemProps, children: [_jsx(ItemContent, { ...itemContentProps, className: itemContentCva({
+                        isSelected,
+                        isDisabled,
+                        hasNested: Boolean(children),
+                    }), children: _jsx(Tooltip, { placement: TOOLTIP_PLACEMENT, ...tooltipProps, children: renderItem ? (_jsxs(LabelWrapper, { children: [renderCollapseButton(), renderItem({ label, note, id })] })) : (_jsxs(ItemWrapper, { children: [_jsxs(LabelWrapper, { children: [renderCollapseButton(), _jsx(Label, { component: "div", children: label })] }), note && (_jsx(Note, { className: treeClassnames.note, variant: "caption", color: "textSecondary", children: note }))] })) }) }), isMobile ? (_jsx(MobileSlidePanel, { isOpen: isMobileOpen, onClose: handleClose, ...mobileSlidePanelProps, children: children })) : (_jsx(StyledCollapse, { in: isOpen, unmountOnExit: true, children: children }))] }));
     }
-    return (_jsx(Item, { ...restProps, "$level": level, as: component, className: className, ...itemProps, children: _jsx(ItemContent, { "$isSelected": isSelected, "$isDisabled": isDisabled, "$level": level, ...itemContentProps, children: _jsx(Tooltip, { placement: TOOLTIP_PLACEMENT, ...tooltipProps, children: renderItem ? (_jsx(LabelWrapper, { "$level": level, children: renderItem({ label, note, id }) })) : (_jsxs(ItemWrapper, { children: [_jsx(LabelWrapper, { "$level": level, children: _jsx(Label, { component: "div", children: label }) }), note && (_jsx(Note, { className: treeClassnames.note, variant: "caption", color: "textSecondary", children: note }))] })) }) }) }));
-};
+    return (_jsx(Item, { ...restProps, ref: ref, as: component, className: classNames(className, itemCva({ isOpen })), style: itemCssVars, ...itemProps, children: _jsx(ItemContent, { ...itemContentProps, className: itemContentCva({ isSelected, isDisabled }), children: _jsx(Tooltip, { placement: TOOLTIP_PLACEMENT, ...tooltipProps, children: renderItem ? (_jsx(LabelWrapper, { children: renderItem({ label, note, id }) })) : (_jsxs(ItemWrapper, { children: [_jsx(LabelWrapper, { children: _jsx(Label, { component: "div", children: label }) }), note && (_jsx(Note, { className: treeClassnames.note, variant: "caption", color: "textSecondary", children: note }))] })) }) }) }));
+});

package/components/Tree/TreeItem/constants.d.ts

@@ -1,9 +1,18 @@
 export declare const COLLAPSE_BUTTON_WIDTH = "24px";
+export declare const MOBILE_COLLAPSE_BUTTON_WIDTH = "72px";
 export declare const TREE_LINE_WIDTH = "10px";
 export declare const GAP_WIDTH = "4px";
 export declare const HALF_PADDING_COLLAPSE_BUTTON_WIDTH = "14px";
 export declare const TOOLTIP_PLACEMENT = "bottom-start";
 export declare const treeClassnames: {
+    item: string;
+    itemContent: string;
     note: string;
     label: string;
+    collapseButton: string;
+    hasNested: string;
+    open: string;
+    disabled: string;
+    selected: string;
+    notBlockingExpandList: string;
 };

package/components/Tree/TreeItem/constants.js

@@ -1,10 +1,19 @@
 import { createUIKitClassname } from '../../utils/createUIKitClassname';
 export const COLLAPSE_BUTTON_WIDTH = '24px';
+export const MOBILE_COLLAPSE_BUTTON_WIDTH = '72px';
 export const TREE_LINE_WIDTH = '10px';
 export const GAP_WIDTH = '4px';
 export const HALF_PADDING_COLLAPSE_BUTTON_WIDTH = '14px';
 export const TOOLTIP_PLACEMENT = 'bottom-start';
 export const treeClassnames = {
+    item: createUIKitClassname('tree-item'),
+    itemContent: createUIKitClassname('tree-item__content'),
     note: createUIKitClassname('tree-item__note'),
     label: createUIKitClassname('tree-item__label'),
+    collapseButton: createUIKitClassname('tree-item__collapse-button'),
+    hasNested: createUIKitClassname('tree-item_has-nested'),
+    open: createUIKitClassname('tree-item_open'),
+    disabled: createUIKitClassname('tree-item_disabled'),
+    selected: createUIKitClassname('tree-item_selected'),
+    notBlockingExpandList: createUIKitClassname('tree-item_not-blocking-expand-list'),
 };