@astral/ui 4.92.3 → 4.94.0

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

@@ -3,16 +3,10 @@
 export declare const Item: import("../../styled").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("../../styled").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("../../styled").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("../../styled").StyledComponent<Omit
     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("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
@@ -33,14 +25,10 @@ export declare const ChevronIcon: import("../../styled").StyledComponent<{
     size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isActive?: boolean | undefined;
 }, {}, {}>;
 export declare const LabelWrapper: import("../../styled").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("../../styled").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
     color?: import("../../Typography").TypographyColor | undefined;
@@ -344,7 +332,7 @@ export declare const Note: import("../../styled").StyledComponent<import("../../
         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("../../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>, {}>;
+export declare const StyledCollapse: import("../../styled").StyledComponent<import("../../Collapse").CollapseProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/Tree/TreeItem/styles.js

@@ -1,24 +1,20 @@
 import { typographyClasses } from '@mui/material/Typography';
 import { ChevronROutlineMd } from '../../../icons/ChevronROutlineMd';
 import { buttonClasses } from '../../Button';
+import { Collapse } from '../../Collapse';
 import { descriptionClassnames } from '../../Description';
 import { IconButton } from '../../IconButton';
 import { OverflowTypography } from '../../OverflowTypography';
 import { svgIconClassnames } from '../../SvgIcon';
 import { styled } from '../../styled';
+import { tooltipClassnames } from '../../Tooltip';
 import { Typography } from '../../Typography';
-import { COLLAPSE_BUTTON_WIDTH, GAP_WIDTH, HALF_PADDING_COLLAPSE_BUTTON_WIDTH, TREE_LINE_WIDTH, } from './constants';
-const getBackgroundColor = (theme, isSelected, isDisabled) => {
-    if (isDisabled) {
-        return 'transparent';
-    }
-    return isSelected
-        ? theme.palette.primary[100]
-        : theme.palette.background.elementHover;
-};
+import { COLLAPSE_BUTTON_WIDTH, GAP_WIDTH, HALF_PADDING_COLLAPSE_BUTTON_WIDTH, MOBILE_COLLAPSE_BUTTON_WIDTH, TREE_LINE_WIDTH, treeClassnames, } from './constants';
 export const Item = styled('li', {
-    shouldForwardProp: (prop) => !['as', '$level'].includes(prop),
+    shouldForwardProp: (prop) => !['as'].includes(prop),
 }) `
+  --tree-item-level: 0;
+
   position: relative;
 
   &:not(:last-of-type)::before {
@@ -27,18 +23,29 @@ export const Item = styled('li', {
     position: absolute;
     z-index: 1;
     top: 0;
-    transform: ${({ $level }) => `translateX(calc(((${COLLAPSE_BUTTON_WIDTH} + ${GAP_WIDTH}) * ${$level}) - ${HALF_PADDING_COLLAPSE_BUTTON_WIDTH}))`};
+    transform: translateX(
+      calc(
+        ((${COLLAPSE_BUTTON_WIDTH} + ${GAP_WIDTH}) * var(--tree-item-level)) -
+          ${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;
+    }
+  }
 `;
-export const ItemContent = styled('div', {
-    shouldForwardProp: (prop) => !['$isSelected', '$isDisabled', '$level'].includes(prop),
-}) `
-  cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
+export const ItemContent = styled('div') `
+  cursor: pointer;
 
   position: relative;
 
@@ -46,11 +53,14 @@ export const ItemContent = 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,
@@ -58,54 +68,124 @@ export const ItemContent = styled('div', {
 })};
 
   &:hover {
-    background-color: ${({ theme, $isSelected, $isDisabled }) => getBackgroundColor(theme, $isSelected, $isDisabled)};
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  }
+
+  &.${treeClassnames.selected} {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+
+    &:hover, &:focus {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+  }
+
+  &.${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};
+
+    
+    &.${treeClassnames.hasNested} {
+      padding-right: ${({ theme }) => theme.spacing(11)};
+    }
+
+    & .${tooltipClassnames.contentWrapper} {
+      width: 100%;
+    }
+
+    &:focus {
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    }
+  }
 `;
-export const CollapseButton = styled(IconButton, {
-    shouldForwardProp: (prop) => !['$isNotBlockingExpandList'].includes(prop),
-}) `
+export const CollapseButton = styled(IconButton) `
   position: relative;
   z-index: 1;
 
   width: ${COLLAPSE_BUTTON_WIDTH};
-  height: 24px;
+  height: ${COLLAPSE_BUTTON_WIDTH};
   margin-left: -${COLLAPSE_BUTTON_WIDTH};
 
-  color: ${({ theme, $isNotBlockingExpandList }) => $isNotBlockingExpandList ? theme.palette.text.primary : 'inherit'};
+  color: inherit;
+
+  &.${treeClassnames.notBlockingExpandList} {
+    color: ${({ theme }) => theme.palette.text.primary};
+  }
 
-  &.${buttonClasses.root} .${svgIconClassnames.root}, &.${buttonClasses.root} {
-    width: 24px;
-    height: 24px;
+  &.${buttonClasses.root} {
+    width: ${COLLAPSE_BUTTON_WIDTH};
+    height: ${COLLAPSE_BUTTON_WIDTH};
+  }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      width: 24px;
-      height: 24px;
-    }
+  &.${buttonClasses.root} .${svgIconClassnames.root} {
+    width: ${COLLAPSE_BUTTON_WIDTH};
+    height: ${COLLAPSE_BUTTON_WIDTH};
   }
 
   &:hover {
     background-color: ${({ theme }) => theme.palette.grey[300]};
   }
+
+  &.${treeClassnames.open} .${svgIconClassnames.root} {
+    transform: rotateZ(90deg);
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+
+    width: ${MOBILE_COLLAPSE_BUTTON_WIDTH};
+    height: auto;
+    margin-left: 0;
+    padding: ${({ theme }) => theme.spacing(0, 4, 0, 8)};
+
+    border-radius: 0;
+
+    &.${treeClassnames.open} .${svgIconClassnames.root} {
+      transform: rotateZ(0deg);
+    }
+
+    &.${buttonClasses.root} {
+      width: ${MOBILE_COLLAPSE_BUTTON_WIDTH};
+      height: auto;
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
 `;
-export const ChevronIcon = styled(ChevronROutlineMd, {
-    shouldForwardProp: (prop) => prop !== '$isActive',
-}) `
-  transform: rotateZ(${({ $isActive }) => ($isActive ? 90 : 0)}deg);
+export const ChevronIcon = styled(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;
+  }
 `;
-export const LabelWrapper = styled('div', {
-    shouldForwardProp: (prop) => prop !== '$level',
-}) `
+export const LabelWrapper = styled.div `
   position: relative;
 
   display: flex;
@@ -134,12 +214,33 @@ export const LabelWrapper = 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;
+  }
 `;
 export const Label = styled(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)};
+  }
 `;
 export const Note = styled(OverflowTypography) `
   margin-left: ${({ theme }) => theme.spacing(1)};
@@ -150,8 +251,21 @@ export const Note = styled(OverflowTypography) `
       color: inherit;
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-left: 0;
+  }
 `;
 export const ItemWrapper = styled.div `
   display: flex;
   flex-direction: column;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
+  }
+`;
+export const StyledCollapse = styled(Collapse) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;

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

@@ -1,6 +1,9 @@
-import { useEffect, useState, } from 'react';
-export const useLogic = ({ id, prefixId, isDefaultExpanded = false, isForceExpanded, isDisabled, disabledReason, onClick, }) => {
+import { useEffect, useMemo, useState, } from 'react';
+import { useViewportType } from '../../../useViewportType';
+export const useLogic = ({ id, prefixId, label, note, renderItem, mobileHeaderLabel, mobileHeaderControl, mobileHeaderAdditionalContent, isDefaultExpanded = false, isForceExpanded, isDisabled, isSelected, disabledReason, level = 0, onClick, onMobilePanelOpenChange, }) => {
+    const { isMobile } = useViewportType();
     const [isOpen, setOpen] = useState(isDefaultExpanded);
+    const [isMobileOpen, setMobileOpen] = useState(false);
     useEffect(() => {
         setOpen(isDefaultExpanded);
     }, []);
@@ -23,14 +26,39 @@ export const useLogic = ({ id, prefixId, isDefaultExpanded = false, isForceExpan
     };
     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 = 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,
         },
@@ -44,5 +72,15 @@ export const useLogic = ({ id, prefixId, isDefaultExpanded = false, isForceExpan
             withoutContainer: !isDisabled,
             disableInteractive: true,
         },
+        mobileSlidePanelProps: {
+            id,
+            parentLabel,
+            parentNote: note,
+            parentControl: mobileHeaderControl,
+            parentAdditionalContent: mobileHeaderAdditionalContent,
+            isParentSelected: isSelected,
+            isParentDisabled: isDisabled,
+            onParentClick: onClick,
+        },
     };
 };

package/components/Tree/TreeList/TreeItem/TreeItem.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TreeItem as BaseTreeItem } from '../../TreeItem';
-import { List } from './styles';
+import { List, StyledFormControlLabel, StyledRadio, StyledTreeItem, } from './styles';
 import { useLogic } from './useLogic';
 export const TreeItem = (props) => {
-    const { isSelected, isDefaultExpanded, isDisabled, disabledReason, nextLevel, handleChange, } = useLogic(props);
+    const { isSelected, isDefaultExpanded, isDisabled, disabledReason, nextLevel, handleChange, formControlLabelProps, } = useLogic(props);
     const { item, prefixId, level, renderItem, value, isInitialExpanded, expandedLevel, chainToSelectedItem, disabledItems, onChange, isObjectMode, } = props;
     const { id, label, note, children = [], options } = item;
+    const itemLabel = renderItem ? renderItem({ label, note, id }) : label;
     if (children.length) {
-        return (_jsx(BaseTreeItem, { id: id, prefixId: prefixId, isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, component: "li", label: label, renderItem: renderItem, note: note, level: level, onClick: handleChange, children: _jsx(List, { children: children.map((child) => (_jsx(TreeItem, { item: child, prefixId: prefixId, renderItem: renderItem, level: nextLevel, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, chainToSelectedItem: chainToSelectedItem, disabledItems: disabledItems, value: value, onChange: onChange, isObjectMode: isObjectMode }, child.id))) }) }));
+        return (_jsx(StyledTreeItem, { id: id, prefixId: prefixId, isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, component: "li", label: _jsx(StyledFormControlLabel, { control: _jsx(StyledRadio, { checked: isSelected, disabled: isDisabled, value: id }), label: itemLabel, ...formControlLabelProps }), note: renderItem ? null : note, mobileHeaderLabel: itemLabel, mobileHeaderControl: _jsx(StyledRadio, { checked: isSelected, disabled: isDisabled, value: id, onChange: handleChange }), level: level, onClick: handleChange, children: _jsx(List, { children: children.map((child) => (_jsx(TreeItem, { item: child, prefixId: prefixId, renderItem: renderItem, level: nextLevel, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, chainToSelectedItem: chainToSelectedItem, disabledItems: disabledItems, value: value, onChange: onChange, isObjectMode: isObjectMode }, child.id))) }) }));
     }
-    return (_jsx(BaseTreeItem, { id: id, prefixId: prefixId, isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, component: "li", label: label, renderItem: renderItem, note: note, level: level, onClick: handleChange }));
+    return (_jsx(StyledTreeItem, { id: id, prefixId: prefixId, isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: _jsx(StyledFormControlLabel, { control: _jsx(StyledRadio, { checked: isSelected, disabled: isDisabled, value: id }), label: itemLabel, ...formControlLabelProps }), level: level, onClick: handleChange }));
 };

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

@@ -1,5 +1,24 @@
 /// <reference types="react" />
+export declare const StyledRadio: import("../../../styled").StyledComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+    checked?: boolean | undefined;
+    isError?: boolean | undefined;
+    onChange?: ((event: import("react").ChangeEvent<HTMLInputElement, Element>, checked: boolean) => void) | undefined;
+    name?: string | undefined;
+    value?: string | undefined;
+    autoFocus?: boolean | undefined;
+    disabled?: boolean | undefined;
+    style?: import("react").CSSProperties | undefined;
+    inputRef?: import("react").RefObject<HTMLInputElement> | undefined;
+} & import("react").RefAttributes<HTMLInputElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledTreeItem: import("../../../styled").StyledComponent<Omit<import("../../TreeItem").TreeItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export declare const List: 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<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const StyledFormControlLabel: import("../../../styled").StyledComponent<import("@mui/material/FormControlLabel").FormControlLabelProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

@@ -1,5 +1,41 @@
+import FormControlLabel, { formControlLabelClasses, } from '@mui/material/FormControlLabel';
+import { MOBILE_RADIO_SIZE, Radio, radioClassnames } from '../../../Radio';
 import { styled } from '../../../styled';
 import { listContainer } from '../../../styled/mixins';
+import { TreeItem, treeClassnames } from '../../TreeItem';
+export const StyledRadio = styled(Radio) `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 20px;
+
+    & .${radioClassnames.iconWrapper}, & .${radioClassnames.input} {
+      height: 20px;
+    }
+  }
+`;
+export const StyledTreeItem = styled(TreeItem) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${treeClassnames.note} {
+
+      /* Добавляем к отступу ширину контейнера с радио кнопкой */
+      margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + ${MOBILE_RADIO_SIZE})`};
+    }
+  }
+`;
 export const List = styled.ul `
   ${listContainer}
 `;
+export const StyledFormControlLabel = styled(FormControlLabel) `
+  margin-left: 0;
+
+  & .${formControlLabelClasses.label} {
+    margin-left: 0;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(1)};
+  }
+`;

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

@@ -1,3 +1,4 @@
+import { type SyntheticEvent } from 'react';
 import type { TreeListItemValue } from '../../types';
 import { type TreeItemProps } from '../types';
 type UseLogicProps<TValue extends TreeListItemValue = string> = TreeItemProps<TValue>;
@@ -8,5 +9,10 @@ export declare const useLogic: <TValue extends TreeListItemValue = string>({ val
     disabledReason: string | undefined;
     nextLevel: number;
     handleChange: () => void | undefined;
+    formControlLabelProps: {
+        disabled: boolean;
+        onChange: () => void | undefined;
+        onClick: (event: SyntheticEvent) => void;
+    };
 };
 export {};

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

@@ -27,6 +27,12 @@ export const useLogic = ({ value, level, item, isInitialExpanded, expandedLevel,
         }
         return onChange?.(id);
     };
+    /**
+     * Предотвращаем всплытие события, так как клик в области radio или label вызывает обработчик на уровне всего item
+     */
+    const handleClick = (event) => {
+        event.stopPropagation();
+    };
     return {
         isSelected,
         isDefaultExpanded,
@@ -34,5 +40,10 @@ export const useLogic = ({ value, level, item, isInitialExpanded, expandedLevel,
         disabledReason,
         nextLevel,
         handleChange,
+        formControlLabelProps: {
+            disabled: isDisabled,
+            onChange: handleChange,
+            onClick: handleClick,
+        },
     };
 };

package/components/Tree/TreeList/TreeList.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/cn';
 import { treeListClassnames } from './constants';
-import { List } from './styles';
+import { List, ListWrapper } from './styles';
 import { TreeItem } from './TreeItem';
 import { useLogic } from './useLogic';
 const INITIAL_LEVEL = 0;
 export const TreeList = (props) => {
     const { listProps, itemProps } = useLogic(props);
     const { data, className, expandedLevel = 10, disabledItems, ...restProps } = props;
-    return (_jsx(List, { className: cn(className, treeListClassnames.list), ...listProps, children: data.map((item) => (_jsx(TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
+    return (_jsx(ListWrapper, { children: _jsx(List, { className: cn(className, treeListClassnames.list), ...listProps, children: data.map((item) => (_jsx(TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }) }));
 };

package/components/Tree/TreeList/styles.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+export declare const ListWrapper: 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>, {}>;
 export declare const List: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/Tree/TreeList/styles.js

@@ -1,6 +1,32 @@
 import { styled } from '../../styled';
 import { listContainer } from '../../styled/mixins';
+export const ListWrapper = styled.div `
+  display: contents;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: relative;
+    z-index: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    min-height: 0;
+
+    overflow: hidden;
+
+    transform: translateZ(0);
+  }
+`;
 export const List = styled.ul `
   ${listContainer};
+  position: relative;
   overflow: hidden;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-grow: 1;
+    min-height: 0;
+
+    overflow-y: auto;
+  }
 `;