@astral/ui 4.92.2 → 4.93.0

package/node/components/Tree/TreeItem/MobileSlidePanel/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/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/node/components/Tree/TreeItem/MobileSlidePanel/useLogic/useLogic.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const MobileSlidePanelContext_1 = require("../MobileSlidePanelContext");
+const hooks_1 = require("./hooks");
+const useLogic = () => {
+    const parentContext = (0, react_1.useContext)(MobileSlidePanelContext_1.MobileSlidePanelContext);
+    const panelStack = (0, hooks_1.usePanelStack)();
+    return {
+        parentContext,
+        ...panelStack,
+    };
+};
+exports.useLogic = useLogic;

package/node/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/node/components/Tree/TreeItem/TreeItem.js

@@ -2,18 +2,57 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Collapse_1 = require("../../Collapse");
+const react_1 = require("react");
 const Tooltip_1 = require("../../Tooltip");
+const classNames_1 = require("../../utils/classNames");
+const cva_1 = require("../../utils/cva");
 const constants_1 = require("./constants");
+const MobileSlidePanel_1 = require("./MobileSlidePanel");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const TreeItem = (props) => {
-    const { isOpen, handleToggle, itemProps, itemContentProps, tooltipProps } = (0, useLogic_1.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 = () => ((0, jsx_runtime_1.jsx)(styles_1.CollapseButton, { "$isNotBlockingExpandList": isNotBlockingExpandList, disabled: !isNotBlockingExpandList && isDisabled, variant: "text", onClick: handleToggle, children: (0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, { "$isActive": isOpen }) }));
+const itemCva = (0, cva_1.cva)(constants_1.treeClassnames.item, {
+    variants: {
+        isOpen: {
+            true: constants_1.treeClassnames.open,
+        },
+    },
+});
+const itemContentCva = (0, cva_1.cva)(constants_1.treeClassnames.itemContent, {
+    variants: {
+        isSelected: {
+            true: constants_1.treeClassnames.selected,
+        },
+        isDisabled: {
+            true: constants_1.treeClassnames.disabled,
+        },
+        hasNested: {
+            true: constants_1.treeClassnames.hasNested,
+        },
+    },
+});
+const collapseButtonCva = (0, cva_1.cva)(constants_1.treeClassnames.collapseButton, {
+    variants: {
+        isNotBlockingExpandList: {
+            true: constants_1.treeClassnames.notBlockingExpandList,
+        },
+        isOpen: {
+            true: constants_1.treeClassnames.open,
+        },
+    },
+});
+exports.TreeItem = (0, react_1.forwardRef)((props, ref) => {
+    const { isOpen, isMobileOpen, isMobile, handleToggle, handleClose, itemProps, itemContentProps, tooltipProps, itemCssVars, mobileSlidePanelProps, } = (0, useLogic_1.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 = () => ((0, jsx_runtime_1.jsx)(styles_1.CollapseButton, { className: collapseButtonCva({
+            isNotBlockingExpandList,
+            isOpen,
+        }), disabled: !isNotBlockingExpandList && isDisabled, variant: "text", onClick: handleToggle, children: (0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, {}) }));
     if (children) {
-        return ((0, jsx_runtime_1.jsxs)(styles_1.Item, { ...restProps, "$level": level, as: component, className: className, ...itemProps, children: [(0, jsx_runtime_1.jsx)(styles_1.ItemContent, { "$isSelected": isSelected, "$isDisabled": isDisabled, "$level": level, ...itemContentProps, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { placement: constants_1.TOOLTIP_PLACEMENT, ...tooltipProps, children: renderItem ? ((0, jsx_runtime_1.jsxs)(styles_1.LabelWrapper, { "$level": level, children: [renderCollapseButton(), renderItem({ label, note, id })] })) : ((0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsxs)(styles_1.LabelWrapper, { "$level": level, children: [renderCollapseButton(), (0, jsx_runtime_1.jsx)(styles_1.Label, { component: "div", children: label })] }), note && ((0, jsx_runtime_1.jsx)(styles_1.Note, { className: constants_1.treeClassnames.note, variant: "caption", color: "textSecondary", children: note }))] })) }) }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isOpen, unmountOnExit: true, children: children })] }));
+        return ((0, jsx_runtime_1.jsxs)(styles_1.Item, { ...restProps, ref: ref, as: component, className: (0, classNames_1.classNames)(className, itemCva({ isOpen })), style: itemCssVars, ...itemProps, children: [(0, jsx_runtime_1.jsx)(styles_1.ItemContent, { ...itemContentProps, className: itemContentCva({
+                        isSelected,
+                        isDisabled,
+                        hasNested: Boolean(children),
+                    }), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { placement: constants_1.TOOLTIP_PLACEMENT, ...tooltipProps, children: renderItem ? ((0, jsx_runtime_1.jsxs)(styles_1.LabelWrapper, { children: [renderCollapseButton(), renderItem({ label, note, id })] })) : ((0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsxs)(styles_1.LabelWrapper, { children: [renderCollapseButton(), (0, jsx_runtime_1.jsx)(styles_1.Label, { component: "div", children: label })] }), note && ((0, jsx_runtime_1.jsx)(styles_1.Note, { className: constants_1.treeClassnames.note, variant: "caption", color: "textSecondary", children: note }))] })) }) }), isMobile ? ((0, jsx_runtime_1.jsx)(MobileSlidePanel_1.MobileSlidePanel, { isOpen: isMobileOpen, onClose: handleClose, ...mobileSlidePanelProps, children: children })) : ((0, jsx_runtime_1.jsx)(styles_1.StyledCollapse, { in: isOpen, unmountOnExit: true, children: children }))] }));
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.Item, { ...restProps, "$level": level, as: component, className: className, ...itemProps, children: (0, jsx_runtime_1.jsx)(styles_1.ItemContent, { "$isSelected": isSelected, "$isDisabled": isDisabled, "$level": level, ...itemContentProps, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { placement: constants_1.TOOLTIP_PLACEMENT, ...tooltipProps, children: renderItem ? ((0, jsx_runtime_1.jsx)(styles_1.LabelWrapper, { "$level": level, children: renderItem({ label, note, id }) })) : ((0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.LabelWrapper, { "$level": level, children: (0, jsx_runtime_1.jsx)(styles_1.Label, { component: "div", children: label }) }), note && ((0, jsx_runtime_1.jsx)(styles_1.Note, { className: constants_1.treeClassnames.note, variant: "caption", color: "textSecondary", children: note }))] })) }) }) }));
-};
-exports.TreeItem = TreeItem;
+    return ((0, jsx_runtime_1.jsx)(styles_1.Item, { ...restProps, ref: ref, as: component, className: (0, classNames_1.classNames)(className, itemCva({ isOpen })), style: itemCssVars, ...itemProps, children: (0, jsx_runtime_1.jsx)(styles_1.ItemContent, { ...itemContentProps, className: itemContentCva({ isSelected, isDisabled }), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { placement: constants_1.TOOLTIP_PLACEMENT, ...tooltipProps, children: renderItem ? ((0, jsx_runtime_1.jsx)(styles_1.LabelWrapper, { children: renderItem({ label, note, id }) })) : ((0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.LabelWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.Label, { component: "div", children: label }) }), note && ((0, jsx_runtime_1.jsx)(styles_1.Note, { className: constants_1.treeClassnames.note, variant: "caption", color: "textSecondary", children: note }))] })) }) }) }));
+});

package/node/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/node/components/Tree/TreeItem/constants.js

@@ -1,13 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.treeClassnames = exports.TOOLTIP_PLACEMENT = exports.HALF_PADDING_COLLAPSE_BUTTON_WIDTH = exports.GAP_WIDTH = exports.TREE_LINE_WIDTH = exports.COLLAPSE_BUTTON_WIDTH = void 0;
+exports.treeClassnames = exports.TOOLTIP_PLACEMENT = exports.HALF_PADDING_COLLAPSE_BUTTON_WIDTH = exports.GAP_WIDTH = exports.TREE_LINE_WIDTH = exports.MOBILE_COLLAPSE_BUTTON_WIDTH = exports.COLLAPSE_BUTTON_WIDTH = void 0;
 const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
 exports.COLLAPSE_BUTTON_WIDTH = '24px';
+exports.MOBILE_COLLAPSE_BUTTON_WIDTH = '72px';
 exports.TREE_LINE_WIDTH = '10px';
 exports.GAP_WIDTH = '4px';
 exports.HALF_PADDING_COLLAPSE_BUTTON_WIDTH = '14px';
 exports.TOOLTIP_PLACEMENT = 'bottom-start';
 exports.treeClassnames = {
+    item: (0, createUIKitClassname_1.createUIKitClassname)('tree-item'),
+    itemContent: (0, createUIKitClassname_1.createUIKitClassname)('tree-item__content'),
     note: (0, createUIKitClassname_1.createUIKitClassname)('tree-item__note'),
     label: (0, createUIKitClassname_1.createUIKitClassname)('tree-item__label'),
+    collapseButton: (0, createUIKitClassname_1.createUIKitClassname)('tree-item__collapse-button'),
+    hasNested: (0, createUIKitClassname_1.createUIKitClassname)('tree-item_has-nested'),
+    open: (0, createUIKitClassname_1.createUIKitClassname)('tree-item_open'),
+    disabled: (0, createUIKitClassname_1.createUIKitClassname)('tree-item_disabled'),
+    selected: (0, createUIKitClassname_1.createUIKitClassname)('tree-item_selected'),
+    notBlockingExpandList: (0, createUIKitClassname_1.createUIKitClassname)('tree-item_not-blocking-expand-list'),
 };

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

@@ -3,16 +3,10 @@
 export declare const Item: 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;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const ItemContent: 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;
-} & {
-    $isSelected: boolean;
-    $isDisabled: boolean;
-    $level: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CollapseButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
@@ -23,8 +17,6 @@ export declare const CollapseButton: import("@emotion/styled/dist/declarations/s
     size?: "large" | "medium" | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isNotBlockingExpandList?: boolean | undefined;
 }, {}, {}>;
 export declare const ChevronIcon: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     children?: import("react").ReactNode;
@@ -33,14 +25,10 @@ export declare const ChevronIcon: import("@emotion/styled/dist/declarations/src/
     size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isActive?: boolean | undefined;
 }, {}, {}>;
 export declare const LabelWrapper: 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;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Label: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
     color?: import("../../Typography").TypographyColor | undefined;
@@ -344,7 +332,7 @@ export declare const Note: import("@emotion/styled/dist/declarations/src/types")
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         open?: boolean | undefined;
         width?: import("csstype").Property.Width<string | number> | undefined;
-        size?: import("../..").TooltipSize | undefined;
+        size?: import("../../Tooltip").TooltipSize | undefined;
         componentsProps?: {
             popper?: (Partial<import("@mui/material").PopperProps> & import("@mui/material").TooltipComponentsPropsOverrides) | undefined;
             transition?: (import("@mui/material/transitions").TransitionProps & import("@mui/material").TooltipComponentsPropsOverrides) | undefined;
@@ -406,3 +394,6 @@ export declare const ItemWrapper: import("@emotion/styled/dist/declarations/src/
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCollapse: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Collapse").CollapseProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/Tree/TreeItem/styles.js

@@ -1,27 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemWrapper = exports.Note = exports.Label = exports.LabelWrapper = exports.ChevronIcon = exports.CollapseButton = exports.ItemContent = exports.Item = void 0;
+exports.StyledCollapse = exports.ItemWrapper = exports.Note = exports.Label = exports.LabelWrapper = exports.ChevronIcon = exports.CollapseButton = exports.ItemContent = exports.Item = void 0;
 const Typography_1 = require("@mui/material/Typography");
 const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
 const Button_1 = require("../../Button");
+const Collapse_1 = require("../../Collapse");
 const Description_1 = require("../../Description");
 const IconButton_1 = require("../../IconButton");
 const OverflowTypography_1 = require("../../OverflowTypography");
 const SvgIcon_1 = require("../../SvgIcon");
 const styled_1 = require("../../styled");
+const Tooltip_1 = require("../../Tooltip");
 const Typography_2 = require("../../Typography");
 const constants_1 = require("./constants");
-const getBackgroundColor = (theme, isSelected, isDisabled) => {
-    if (isDisabled) {
-        return 'transparent';
-    }
-    return isSelected
-        ? theme.palette.primary[100]
-        : theme.palette.background.elementHover;
-};
 exports.Item = (0, styled_1.styled)('li', {
-    shouldForwardProp: (prop) => !['as', '$level'].includes(prop),
+    shouldForwardProp: (prop) => !['as'].includes(prop),
 }) `
+  --tree-item-level: 0;
+
   position: relative;
 
   &:not(:last-of-type)::before {
@@ -30,18 +26,29 @@ exports.Item = (0, styled_1.styled)('li', {
     position: absolute;
     z-index: 1;
     top: 0;
-    transform: ${({ $level }) => `translateX(calc(((${constants_1.COLLAPSE_BUTTON_WIDTH} + ${constants_1.GAP_WIDTH}) * ${$level}) - ${constants_1.HALF_PADDING_COLLAPSE_BUTTON_WIDTH}))`};
+    transform: translateX(
+      calc(
+        ((${constants_1.COLLAPSE_BUTTON_WIDTH} + ${constants_1.GAP_WIDTH}) * var(--tree-item-level)) -
+          ${constants_1.HALF_PADDING_COLLAPSE_BUTTON_WIDTH}
+      )
+    );
 
     width: 0;
     height: 100%;
 
     border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: static;
+
+    &:not(:last-of-type)::before {
+      display: none;
+    }
+  }
 `;
-exports.ItemContent = (0, styled_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$isSelected', '$isDisabled', '$level'].includes(prop),
-}) `
-  cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
+exports.ItemContent = (0, styled_1.styled)('div') `
+  cursor: pointer;
 
   position: relative;
 
@@ -49,11 +56,14 @@ exports.ItemContent = (0, styled_1.styled)('div', {
 
   min-height: 32px;
   padding: ${({ theme }) => theme.spacing(0, 4, 1, 0)};
-  padding-left: ${({ theme, $level }) => `calc(${theme.spacing($level * 7)} + ${theme.spacing(7)})`};
 
-  color: ${({ theme, $isDisabled }) => $isDisabled ? theme.palette.text.disabled : theme.palette.text.primary};
+  padding-left: ${({ theme }) => `calc(
+    var(--tree-item-level) * ${theme.spacing(7)} + ${theme.spacing(7)}`}
+  );
+
+  color: ${({ theme }) => theme.palette.text.primary};
 
-  background-color: ${({ theme, $isSelected }) => $isSelected ? theme.palette.primary[100] : 'transparent'};
+  background-color: transparent;
 
   transition: ${({ theme }) => theme.transitions.create('background-color', {
     easing: theme.transitions.easing.easeIn,
@@ -61,54 +71,124 @@ exports.ItemContent = (0, styled_1.styled)('div', {
 })};
 
   &:hover {
-    background-color: ${({ theme, $isSelected, $isDisabled }) => getBackgroundColor(theme, $isSelected, $isDisabled)};
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  }
+
+  &.${constants_1.treeClassnames.selected} {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+
+    &:hover, &:focus {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+  }
+
+  &.${constants_1.treeClassnames.disabled} {
+    cursor: default;
+    color: ${({ theme }) => theme.palette.text.disabled};
+
+    &:hover, &:focus {
+      background-color: transparent;
+    }
   }
 
   &:focus {
-    background-color: ${({ theme, $isSelected, $isDisabled }) => getBackgroundColor(theme, $isSelected, $isDisabled)};
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
     border: 0;
     outline: 0;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.microSpacing(6, 3)};
+
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+
+    
+    &.${constants_1.treeClassnames.hasNested} {
+      padding-right: ${({ theme }) => theme.spacing(11)};
+    }
+
+    & .${Tooltip_1.tooltipClassnames.contentWrapper} {
+      width: 100%;
+    }
+
+    &:focus {
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    }
+  }
 `;
-exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton, {
-    shouldForwardProp: (prop) => !['$isNotBlockingExpandList'].includes(prop),
-}) `
+exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
   position: relative;
   z-index: 1;
 
   width: ${constants_1.COLLAPSE_BUTTON_WIDTH};
-  height: 24px;
+  height: ${constants_1.COLLAPSE_BUTTON_WIDTH};
   margin-left: -${constants_1.COLLAPSE_BUTTON_WIDTH};
 
-  color: ${({ theme, $isNotBlockingExpandList }) => $isNotBlockingExpandList ? theme.palette.text.primary : 'inherit'};
+  color: inherit;
+
+  &.${constants_1.treeClassnames.notBlockingExpandList} {
+    color: ${({ theme }) => theme.palette.text.primary};
+  }
 
-  &.${Button_1.buttonClasses.root} .${SvgIcon_1.svgIconClassnames.root}, &.${Button_1.buttonClasses.root} {
-    width: 24px;
-    height: 24px;
+  &.${Button_1.buttonClasses.root} {
+    width: ${constants_1.COLLAPSE_BUTTON_WIDTH};
+    height: ${constants_1.COLLAPSE_BUTTON_WIDTH};
+  }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      width: 24px;
-      height: 24px;
-    }
+  &.${Button_1.buttonClasses.root} .${SvgIcon_1.svgIconClassnames.root} {
+    width: ${constants_1.COLLAPSE_BUTTON_WIDTH};
+    height: ${constants_1.COLLAPSE_BUTTON_WIDTH};
   }
 
   &:hover {
     background-color: ${({ theme }) => theme.palette.grey[300]};
   }
+
+  &.${constants_1.treeClassnames.open} .${SvgIcon_1.svgIconClassnames.root} {
+    transform: rotateZ(90deg);
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+
+    width: ${constants_1.MOBILE_COLLAPSE_BUTTON_WIDTH};
+    height: auto;
+    margin-left: 0;
+    padding: ${({ theme }) => theme.spacing(0, 4, 0, 8)};
+
+    border-radius: 0;
+
+    &.${constants_1.treeClassnames.open} .${SvgIcon_1.svgIconClassnames.root} {
+      transform: rotateZ(0deg);
+    }
+
+    &.${Button_1.buttonClasses.root} {
+      width: ${constants_1.MOBILE_COLLAPSE_BUTTON_WIDTH};
+      height: auto;
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
 `;
-exports.ChevronIcon = (0, styled_1.styled)(ChevronROutlineMd_1.ChevronROutlineMd, {
-    shouldForwardProp: (prop) => prop !== '$isActive',
-}) `
-  transform: rotateZ(${({ $isActive }) => ($isActive ? 90 : 0)}deg);
+exports.ChevronIcon = (0, styled_1.styled)(ChevronROutlineMd_1.ChevronROutlineMd) `
+  transform: rotateZ(0deg);
 
   transition: ${({ theme }) => theme.transitions.create('transform', {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.short,
 })};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    transition: none;
+  }
 `;
-exports.LabelWrapper = (0, styled_1.styled)('div', {
-    shouldForwardProp: (prop) => prop !== '$level',
-}) `
+exports.LabelWrapper = styled_1.styled.div `
   position: relative;
 
   display: flex;
@@ -137,12 +217,33 @@ exports.LabelWrapper = (0, styled_1.styled)('div', {
     border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: static;
+
+    &::before {
+      display: none;
+    }
+
+    padding-top: 0;
+
+    gap: ${({ theme }) => theme.spacing(1)};
+    width: 100%;
+
+    justify-content: space-between;
+  }
 `;
 exports.Label = (0, styled_1.styled)(Typography_2.Typography) `
   display: flex;
   align-items: center;
 
   margin-left: ${({ theme }) => theme.spacing(1)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-left: 0;
+    order: 1;
+    padding: ${({ theme }) => theme.microSpacing(1, 0)};
+  }
 `;
 exports.Note = (0, styled_1.styled)(OverflowTypography_1.OverflowTypography) `
   margin-left: ${({ theme }) => theme.spacing(1)};
@@ -153,8 +254,21 @@ exports.Note = (0, styled_1.styled)(OverflowTypography_1.OverflowTypography) `
       color: inherit;
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-left: 0;
+  }
 `;
 exports.ItemWrapper = styled_1.styled.div `
   display: flex;
   flex-direction: column;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
+  }
+`;
+exports.StyledCollapse = (0, styled_1.styled)(Collapse_1.Collapse) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;

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

@@ -67,4 +67,22 @@ export type TreeItemProps<TComponent extends ElementType = ElementType> = {
      * Функция, которая запускается при нажатии на элемент списка.
      */
     onClick?: (event: SyntheticEvent) => void;
+    /**
+     * Содержимое родителя в шапке мобильной панели.
+     * По умолчанию используется `label` / `renderItem`.
+     */
+    mobileHeaderLabel?: ReactNode;
+    /**
+     * Элемент справа от родителя в шапке мобильной панели.
+     */
+    mobileHeaderControl?: ReactNode;
+    /**
+     * Дополнительное содержимое под родителем в шапке мобильной панели.
+     */
+    mobileHeaderAdditionalContent?: ReactNode;
+    /**
+     * Вызывается при открытии и закрытии мобильной панели вложенных элементов.
+     * На десктопе не вызывается: там список раскрывается через Collapse.
+     */
+    onMobilePanelOpenChange?: (isOpen: boolean) => void;
 } & Omit<ComponentProps<TComponent>, ''>;

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

@@ -1,22 +1,36 @@
-import { type MouseEvent, type SyntheticEvent } from 'react';
+import { type CSSProperties, type MouseEvent, type SyntheticEvent } from 'react';
 import { type TreeItemProps } from '../types';
-type UseLogicProps = TreeItemProps;
-export declare const useLogic: ({ id, prefixId, isDefaultExpanded, isForceExpanded, isDisabled, disabledReason, onClick, }: UseLogicProps) => {
+type UseLogicProps = Omit<TreeItemProps, 'ref'>;
+export declare const useLogic: ({ id, prefixId, label, note, renderItem, mobileHeaderLabel, mobileHeaderControl, mobileHeaderAdditionalContent, isDefaultExpanded, isForceExpanded, isDisabled, isSelected, disabledReason, level, onClick, onMobilePanelOpenChange, }: UseLogicProps) => {
     isOpen: boolean;
+    isMobileOpen: boolean;
+    isMobile: boolean;
     handleToggle: (event: MouseEvent<HTMLElement>) => void;
-    handleClick: (event: SyntheticEvent<HTMLDivElement>) => void;
+    handleClose: (event: MouseEvent<HTMLElement>) => void;
+    handleClick: (event: SyntheticEvent<HTMLDivElement>) => any;
+    itemCssVars: CSSProperties;
     itemProps: {
         id: any;
     };
     itemContentProps: {
         tabIndex: number;
-        onClick: (event: SyntheticEvent<HTMLDivElement>) => void;
-        onKeyDown: (event: SyntheticEvent<HTMLDivElement>) => void;
+        onClick: (event: SyntheticEvent<HTMLDivElement>) => any;
+        onKeyDown: (event: SyntheticEvent<HTMLDivElement>) => any;
     };
     tooltipProps: {
-        title: string | undefined;
+        title: any;
         withoutContainer: boolean;
         disableInteractive: boolean;
     };
+    mobileSlidePanelProps: {
+        id: any;
+        parentLabel: any;
+        parentNote: any;
+        parentControl: any;
+        parentAdditionalContent: any;
+        isParentSelected: any;
+        isParentDisabled: any;
+        onParentClick: any;
+    };
 };
 export {};

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

@@ -2,8 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
-const useLogic = ({ id, prefixId, isDefaultExpanded = false, isForceExpanded, isDisabled, disabledReason, onClick, }) => {
+const useViewportType_1 = require("../../../useViewportType");
+const useLogic = ({ id, prefixId, label, note, renderItem, mobileHeaderLabel, mobileHeaderControl, mobileHeaderAdditionalContent, isDefaultExpanded = false, isForceExpanded, isDisabled, isSelected, disabledReason, level = 0, onClick, onMobilePanelOpenChange, }) => {
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const [isOpen, setOpen] = (0, react_1.useState)(isDefaultExpanded);
+    const [isMobileOpen, setMobileOpen] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         setOpen(isDefaultExpanded);
     }, []);
@@ -26,14 +29,39 @@ const useLogic = ({ id, prefixId, isDefaultExpanded = false, isForceExpanded, is
     };
     const handleToggle = (event) => {
         event.stopPropagation();
+        if (isMobile) {
+            const nextState = !isMobileOpen;
+            setMobileOpen(nextState);
+            onMobilePanelOpenChange?.(nextState);
+            return;
+        }
         setOpen((currentState) => !currentState);
     };
+    const handleClose = (event) => {
+        event.stopPropagation();
+        setMobileOpen(false);
+        onMobilePanelOpenChange?.(false);
+    };
     const idAttr = prefixId ? `${prefixId}${id}` : id;
     const tabIndex = isDisabled ? -1 : 0;
+    const itemCssVars = { '--tree-item-level': level };
+    const parentLabel = (0, react_1.useMemo)(() => {
+        if (mobileHeaderLabel != null) {
+            return mobileHeaderLabel;
+        }
+        if (renderItem) {
+            return renderItem({ label, note, id });
+        }
+        return label;
+    }, [mobileHeaderLabel, renderItem, label, note, id]);
     return {
         isOpen,
+        isMobileOpen,
+        isMobile,
         handleToggle,
+        handleClose,
         handleClick,
+        itemCssVars,
         itemProps: {
             id: idAttr,
         },
@@ -47,6 +75,16 @@ const useLogic = ({ id, prefixId, isDefaultExpanded = false, isForceExpanded, is
             withoutContainer: !isDisabled,
             disableInteractive: true,
         },
+        mobileSlidePanelProps: {
+            id,
+            parentLabel,
+            parentNote: note,
+            parentControl: mobileHeaderControl,
+            parentAdditionalContent: mobileHeaderAdditionalContent,
+            isParentSelected: isSelected,
+            isParentDisabled: isDisabled,
+            onParentClick: onClick,
+        },
     };
 };
 exports.useLogic = useLogic;