@astral/ui 4.92.3 → 4.94.0

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.js

@@ -1,11 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserHintWrapper = exports.StyledSearchField = exports.TreeListWrapper = exports.StyledDialogContent = void 0;
+exports.UserHintWrapper = exports.ResetButton = exports.CancelButton = exports.StyledPaper = exports.StyledSearchField = exports.CheckableTagWrapper = exports.SearchFieldWrapper = exports.TreeViewSlot = exports.TreeListWrapper = exports.StyledDialogContent = void 0;
 const FormHelperText_1 = require("@mui/material/FormHelperText");
+const InputBase_1 = require("@mui/material/InputBase");
+const Paper_1 = require("@mui/material/Paper");
+const BottomDrawer_1 = require("../../BottomDrawer");
+const Button_1 = require("../../Button");
 const Dialog_1 = require("../../Dialog");
 const DialogContent_1 = require("../../DialogContent");
+const Loader_1 = require("../../Loader");
+const Paper_2 = require("../../Paper");
 const SearchField_1 = require("../../SearchField");
+const SvgIcon_1 = require("../../SvgIcon");
 const styled_1 = require("../../styled");
+const Tag_1 = require("../../Tag");
 const Tree_1 = require("../../Tree");
 exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent, {
     shouldForwardProp: (prop) => !['$size'].includes(prop),
@@ -17,29 +25,107 @@ exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent
 
   width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
   height: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
-  
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;
+    padding: 0;
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    height: calc(100vh - ${BottomDrawer_1.OFFSET_TOP_SCREEN} - ${BottomDrawer_1.DEFAULT_HEADER_HEIGHT}px - 72px);
+
+    /* Причина игнора: Прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    @supports (height: 100dvh) {
+      height: calc(100dvh - ${BottomDrawer_1.OFFSET_TOP_SCREEN} - ${BottomDrawer_1.DEFAULT_HEADER_HEIGHT}px - 72px);
+    }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
   }
 `;
 exports.TreeListWrapper = styled_1.styled.div `
-    overflow: auto;
+  overflow: auto;
+
+  height: 100%;
 
-    height: 100%;
-  
   & .${Tree_1.treeListClassnames.list} {
     width: auto;
     min-width: max-content;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${Tree_1.treeListClassnames.list} {
+      min-width: unset;
+    }
+    
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    &:not(:has(.${Tree_1.treeListClassnames.list})) {
+      height: 100%;
+    }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
+
+    height: auto;
+  }
+`;
+exports.TreeViewSlot = styled_1.styled.div `
+  height: 100%;
+`;
+exports.SearchFieldWrapper = styled_1.styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 4, 0)};
+  }
+`;
+exports.CheckableTagWrapper = styled_1.styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+
+    & .${Tag_1.tagClassnames.root} {
+      width: 100%;
+    }
+  }
 `;
 exports.StyledSearchField = (0, styled_1.styled)(SearchField_1.SearchField) `
   & .${FormHelperText_1.formHelperTextClasses.root} {
     display: flex;
 
     margin-top: ${({ theme }) => theme.spacing(2)};
-    
+
     color: ${({ theme }) => theme.palette.grey[500]};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${FormHelperText_1.formHelperTextClasses.root} {
+      display: none;
+    }
+
+    & .${InputBase_1.inputBaseClasses.root}.${InputBase_1.inputBaseClasses.adornedEnd} .${Loader_1.loaderClassnames.root} .${SvgIcon_1.svgIconClassnames.root} {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;
+exports.StyledPaper = (0, styled_1.styled)(Paper_2.Paper) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &.${Paper_1.paperClasses.root} {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    border: unset;
+
+    overflow: auto;
+  }
+`;
+exports.CancelButton = (0, styled_1.styled)(Button_1.Button) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+exports.ResetButton = (0, styled_1.styled)(Button_1.Button) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    margin-left: auto;
+  }
 `;
 exports.UserHintWrapper = styled_1.styled.div `
   display: flex;
@@ -47,4 +133,9 @@ exports.UserHintWrapper = styled_1.styled.div `
   justify-content: center;
 
   height: 36px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 4)};
+    height: auto;
+  }
 `;

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/useLogic.d.ts

@@ -16,6 +16,7 @@ type UseLogicResult = {
     treeListProps: TreeLikeListProps<TreeLikeAsyncAutocompleteValue>;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
+    resetButtonProps: ButtonProps;
     handleRetry: () => void;
     isShowUserHint?: boolean;
     isShowModalLoader: boolean;

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const useViewportType_1 = require("../../../useViewportType");
 const array_1 = require("../../../utils/array");
+const checkIsDeepEqual_1 = require("../../../utils/checkIsDeepEqual");
 const hooks_1 = require("./hooks");
 const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInputChange, onRetry, meta, onShowUserHint, isLoadingModal, minSymbolsToFetch = 0, isLoading, isLoadingError, loadingErrorMsg, treeProps, }) => {
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const [value, setValue] = (0, react_1.useState)(initialValue);
     const [searchValue, setSearchValue] = (0, react_1.useState)();
     const { onClose, ...restDialogProps } = dialogProps;
@@ -61,6 +64,14 @@ const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInpu
         onChange?.(value);
         onClose?.(event, 'escapeKeyDown');
     };
+    const handleReset = () => {
+        const isSameAsInitial = (0, checkIsDeepEqual_1.checkIsDeepEqual)((value ?? []).map(({ id }) => id).sort(), (initialValue ?? []).map(({ id }) => id).sort());
+        if (!isSameAsInitial) {
+            setValue(initialValue);
+            return;
+        }
+        setValue(undefined);
+    };
     // Определяем isNoResult в зависимости от режима
     const isNoResult = (0, react_1.useMemo)(() => {
         if (!searchValue) {
@@ -78,7 +89,7 @@ const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInpu
         isNoResultInSelectedTree,
         options.length,
     ]);
-    const isDisabledButton = !value || isNoResult;
+    const isDisabledButton = isNoResult || (!value?.length && !initialValue?.length);
     const handleRetry = () => {
         onRetry?.(searchValue);
     };
@@ -116,7 +127,7 @@ const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInpu
             data: selectedTreeDataToRender,
             onChange: handleChange,
             isObjectMode: true,
-            isInitialExpanded: true,
+            isInitialExpanded: !isMobile,
         },
         modalProps: {
             onClose: handleClose,
@@ -142,6 +153,10 @@ const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInpu
             disabled: isDisabledButton,
             onClick: handleClick,
         },
+        resetButtonProps: {
+            disabled: !value?.length,
+            onClick: handleReset,
+        },
     };
 };
 exports.useLogic = useLogic;

package/node/components/TreeLikeAutocomplete/OptionsModal/NoData/styles.js

@@ -8,4 +8,9 @@ exports.Wrapper = styled_1.styled.div `
   justify-content: center;
 
   height: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+    text-align: center;
+  }
 `;

package/node/components/TreeLikeAutocomplete/OptionsModal/OptionsModal.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../Button");
 const Dialog_1 = require("../../Dialog");
 const DialogActions_1 = require("../../DialogActions");
-const Paper_1 = require("../../Paper");
 const SearchField_1 = require("../../SearchField");
 const TreeLikeList_1 = require("../../TreeLikeList");
 const ErrorMessage_1 = require("./ErrorMessage");
@@ -14,8 +13,8 @@ const NoData_1 = require("./NoData");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const OptionsModal = (props) => {
-    const { isNoResult, searchFieldProps, modalProps, treeLikeListProps, cancelButtonProps, confirmButtonProps, } = (0, useLogic_1.useLogic)(props);
-    const { isOpen, initialValue, options, isConfirmChildrenSelection, isLoading, isLoadingError, loadingErrorMsg, treeProps, filterOptions, onChange, onRetry, onClose, ...externalDialogProps } = props;
+    const { isNoResult, searchFieldProps, modalProps, treeLikeListProps, cancelButtonProps, confirmButtonProps, resetButtonProps, } = (0, useLogic_1.useLogic)(props);
+    const { isOpen, initialValue, options, isConfirmChildrenSelection, isLoading, isLoadingError, loadingErrorMsg, treeProps, filterOptions, onChange, onRetry, onClose, headerContent, ...externalDialogProps } = props;
     const renderComponent = () => {
         if (isLoading) {
             return (0, jsx_runtime_1.jsx)(Loader_1.Loader, {});
@@ -28,6 +27,6 @@ const OptionsModal = (props) => {
         }
         return ((0, jsx_runtime_1.jsx)(TreeLikeList_1.TreeLikeList, { isConfirmChildrenSelection: isConfirmChildrenSelection, ...treeProps, ...treeLikeListProps }));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { "$size": modalProps.size, children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { fullWidth: true, ...searchFieldProps }), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.TreeListWrapper, { children: renderComponent() }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, headerContent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.ResetButton, { variant: "text", color: "primary", ...resetButtonProps, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }), headerContent] }), children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { "$size": modalProps.size, children: [(0, jsx_runtime_1.jsx)(styles_1.SearchFieldWrapper, { children: (0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { fullWidth: true, ...searchFieldProps }) }), (0, jsx_runtime_1.jsx)(styles_1.StyledPaper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.TreeListWrapper, { children: renderComponent() }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(styles_1.CancelButton, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };
 exports.OptionsModal = OptionsModal;

package/node/components/TreeLikeAutocomplete/OptionsModal/styles.d.ts

@@ -9,4 +9,31 @@ export declare const TreeListWrapper: import("@emotion/styled/dist/declarations/
     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 SearchFieldWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledPaper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const CancelButton: 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;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ResetButton: 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;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export {};

package/node/components/TreeLikeAutocomplete/OptionsModal/styles.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeListWrapper = exports.StyledDialogContent = void 0;
+exports.ResetButton = exports.CancelButton = exports.StyledPaper = exports.SearchFieldWrapper = exports.TreeListWrapper = exports.StyledDialogContent = void 0;
+const Paper_1 = require("@mui/material/Paper");
+const BottomDrawer_1 = require("../../BottomDrawer");
+const Button_1 = require("../../Button");
 const Dialog_1 = require("../../Dialog");
 const DialogContent_1 = require("../../DialogContent");
+const Paper_2 = require("../../Paper");
 const styled_1 = require("../../styled");
 exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent, {
     shouldForwardProp: (prop) => !['$size'].includes(prop),
@@ -14,9 +18,20 @@ exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent
 
   width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
   height: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
-  
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;
+    padding: 0;
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    height: calc(100vh - ${BottomDrawer_1.OFFSET_TOP_SCREEN} - ${BottomDrawer_1.DEFAULT_HEADER_HEIGHT}px - 72px);
+
+    /* Причина игнора: Прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    @supports (height: 100dvh) {
+      height: calc(100dvh - ${BottomDrawer_1.OFFSET_TOP_SCREEN} - ${BottomDrawer_1.DEFAULT_HEADER_HEIGHT}px - 72px);
+    }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
   }
 `;
 exports.TreeListWrapper = styled_1.styled.div `
@@ -24,3 +39,31 @@ exports.TreeListWrapper = styled_1.styled.div `
 
   height: 100%;
 `;
+exports.SearchFieldWrapper = styled_1.styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 4, 0)};
+  }
+`;
+exports.StyledPaper = (0, styled_1.styled)(Paper_2.Paper) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &.${Paper_1.paperClasses.root} {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    border: unset;
+  }
+`;
+exports.CancelButton = (0, styled_1.styled)(Button_1.Button) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+exports.ResetButton = (0, styled_1.styled)(Button_1.Button) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    margin-left: auto;
+  }
+`;

package/node/components/TreeLikeAutocomplete/OptionsModal/useLogic/useLogic.d.ts

@@ -13,6 +13,7 @@ type UseLogicResult = {
     treeLikeListProps: TreeLikeListProps;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
+    resetButtonProps: ButtonProps;
 };
 export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size, }: UseLogicParams) => UseLogicResult;
 export {};

package/node/components/TreeLikeAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const array_1 = require("../../../utils/array");
+const checkIsDeepEqual_1 = require("../../../utils/checkIsDeepEqual");
 const utils_1 = require("./utils");
 const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size = 'md', }) => {
     const [value, setValue] = (0, react_1.useState)(initialValue);
@@ -44,8 +45,16 @@ const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, fi
         onChange?.(value);
         onClose?.(event, 'escapeKeyDown');
     };
+    const handleReset = () => {
+        const isSameAsInitial = (0, checkIsDeepEqual_1.checkIsDeepEqual)([...(value ?? [])].sort(), [...(initialValue ?? [])].sort());
+        if (!isSameAsInitial) {
+            setValue(initialValue);
+            return;
+        }
+        setValue(undefined);
+    };
     const isNoResult = Boolean(searchValue) && !filteredOptions.length;
-    const isDisabledButton = !value || !value.length || isNoResult;
+    const isDisabledButton = isNoResult || (!value?.length && !initialValue?.length);
     return {
         isNoResult,
         modalProps: {
@@ -69,6 +78,10 @@ const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, fi
             disabled: isDisabledButton,
             onClick: handleClick,
         },
+        resetButtonProps: {
+            disabled: !value?.length,
+            onClick: handleReset,
+        },
     };
 };
 exports.useLogic = useLogic;

package/node/components/TreeLikeList/TreeItem/TreeItem.js

@@ -3,15 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../Button");
+const ClickAwayListener_1 = require("../../ClickAwayListener");
 const FormControlLabel_1 = require("../../FormControlLabel");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const TreeItem = (props) => {
-    const { isSelected, isDefaultExpanded, disabledReason, isDisabled, nextLevel, formControlLabelProps, tooltipProps, confirmChildrenButtonProps, handleChange, } = (0, useLogic_1.useLogic)(props);
+    const { isSelected, isDefaultExpanded, disabledReason, isDisabled, nextLevel, formControlLabelProps, confirmChildrenProps, confirmChildrenButtonProps, handleChange, handleMobileOpenChange, isMobile, isMobilePanelOpen, isConfirmChildrenAvailable, itemRef, confirmChildrenExcludeNodes, } = (0, useLogic_1.useLogic)(props);
     const { item, prefixId, level, renderItem, value, isConfirmChildrenSelection, isInitialExpanded, expandedLevel, chainsToSelectedItem, disabledItems, onChange, isObjectMode, } = props;
     const { id, label, note, children = [], options } = item;
+    const itemLabel = renderItem ? renderItem({ label, note, id }) : label;
+    const confirmChildrenButtonLabel = !isSelected
+        ? 'Исключить дочерние'
+        : 'Выбрать дочерние';
+    const renderConfirmChildrenCollapse = () => ((0, jsx_runtime_1.jsx)(styles_1.ConfirmChildrenCollapse, { in: confirmChildrenProps.open, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(styles_1.ConfirmChildrenButton, { variant: "light", ...confirmChildrenButtonProps, children: confirmChildrenButtonLabel }) }));
     if (children.length) {
-        return ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { id: id, prefixId: prefixId, isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, disabledReason: disabledReason, isDisabled: isDisabled, note: renderItem ? null : note, isNotBlockingExpandList: true, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledTooltip, { arrow: false, placement: "right", leaveDelay: 250, title: (0, jsx_runtime_1.jsx)(styles_1.PopoverContent, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "light", ...confirmChildrenButtonProps, children: !isSelected ? 'Исключить дочерние' : 'Выбрать дочерние' }) }), ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected }) }), label: renderItem ? renderItem({ label, note, id }) : label, ...formControlLabelProps }), level: level, onClick: handleChange, children: (0, jsx_runtime_1.jsx)(styles_1.List, { children: children.map((child) => ((0, jsx_runtime_1.jsx)(exports.TreeItem, { isObjectMode: isObjectMode, prefixId: prefixId, item: child, renderItem: renderItem, level: nextLevel, isConfirmChildrenSelection: isConfirmChildrenSelection, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, chainsToSelectedItem: chainsToSelectedItem, disabledItems: disabledItems, value: value, onChange: onChange }, child.id))) }) }));
+        const checkbox = (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected });
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { ref: itemRef, id: id, prefixId: prefixId, isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, disabledReason: disabledReason, isDisabled: isDisabled, note: renderItem ? null : note, isNotBlockingExpandList: true, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: isMobile ? (checkbox) : ((0, jsx_runtime_1.jsx)(styles_1.StyledTooltip, { arrow: false, placement: "right", leaveDelay: 250, title: (0, jsx_runtime_1.jsx)(styles_1.PopoverContent, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "light", ...confirmChildrenButtonProps, children: confirmChildrenButtonLabel }) }), ...confirmChildrenProps, children: checkbox })), label: itemLabel, ...formControlLabelProps }), mobileHeaderLabel: itemLabel, mobileHeaderControl: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected, disabled: isDisabled, onChange: handleChange }), mobileHeaderAdditionalContent: isConfirmChildrenAvailable && isMobilePanelOpen ? ((0, jsx_runtime_1.jsx)(ClickAwayListener_1.ClickAwayListener, { isActive: confirmChildrenProps.open, onClickAway: confirmChildrenProps.onClose, children: renderConfirmChildrenCollapse() })) : undefined, level: level, onClick: handleChange, onMobilePanelOpenChange: handleMobileOpenChange, children: (0, jsx_runtime_1.jsx)(styles_1.List, { children: children.map((child) => ((0, jsx_runtime_1.jsx)(exports.TreeItem, { isObjectMode: isObjectMode, prefixId: prefixId, item: child, renderItem: renderItem, level: nextLevel, isConfirmChildrenSelection: isConfirmChildrenSelection, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, chainsToSelectedItem: chainsToSelectedItem, disabledItems: disabledItems, value: value, onChange: onChange }, child.id))) }) }), isConfirmChildrenAvailable && !isMobilePanelOpen && ((0, jsx_runtime_1.jsx)(ClickAwayListener_1.ClickAwayListener, { isActive: confirmChildrenProps.open, excludeNodes: confirmChildrenExcludeNodes, onClickAway: confirmChildrenProps.onClose, children: (0, jsx_runtime_1.jsx)("li", { children: renderConfirmChildrenCollapse() }) }))] }));
     }
     return ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { id: id, prefixId: prefixId, isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected }), label: renderItem ? renderItem({ label, note, id }) : label, ...formControlLabelProps }), level: level, onClick: handleChange }));
 };

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

@@ -14,23 +14,7 @@ export declare const StyledCheckbox: import("@emotion/styled/dist/declarations/s
 } & import("react").RefAttributes<HTMLInputElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledTreeItem: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    className?: string | undefined;
-    prefixId?: string | undefined;
-    isSelected: boolean;
-    label: import("react").ReactNode;
-    note?: import("react").ReactNode;
-    renderItem?: import("../..").SyncFunctionComponent<Omit<import("../../Tree").TreeListData, "children">> | undefined;
-    children?: import("react").ReactNode;
-    component?: import("react").ElementType | undefined;
-    level: number;
-    isDisabled?: boolean | undefined;
-    disabledReason?: string | undefined;
-    isNotBlockingExpandList?: boolean | undefined;
-    isDefaultExpanded?: boolean | undefined;
-    isForceExpanded?: boolean | undefined;
-    onClick?: ((event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
-} & Omit<any, ""> & {
+export declare const StyledTreeItem: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../Tree/TreeItem").TreeItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const List: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
@@ -44,3 +28,16 @@ export declare const PopoverContent: import("@emotion/styled/dist/declarations/s
     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 ConfirmChildrenCollapse: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Collapse").CollapseProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ConfirmChildrenButton: 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;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopoverContent = exports.StyledTooltip = exports.List = exports.StyledTreeItem = exports.StyledCheckbox = void 0;
+exports.ConfirmChildrenButton = exports.ConfirmChildrenCollapse = exports.PopoverContent = exports.StyledTooltip = exports.List = exports.StyledTreeItem = exports.StyledCheckbox = void 0;
+const FormControlLabel_1 = require("@mui/material/FormControlLabel");
 const Tooltip_1 = require("@mui/material/Tooltip");
+const Button_1 = require("../../Button");
 const Checkbox_1 = require("../../Checkbox");
+const Collapse_1 = require("../../Collapse");
 const styled_1 = require("../../styled");
 const mixins_1 = require("../../styled/mixins");
 const Tooltip_2 = require("../../Tooltip");
@@ -10,6 +13,14 @@ const Tree_1 = require("../../Tree");
 exports.StyledCheckbox = (0, styled_1.styled)(Checkbox_1.Checkbox) `
   padding-top: 0;
   padding-bottom: 0;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 20px;
+
+    & .${Checkbox_1.checkboxClassnames.iconWrapper}, & .${Checkbox_1.checkboxClassnames.input} {
+      height: 20px;
+    }
+  }
 `;
 exports.StyledTreeItem = (0, styled_1.styled)(Tree_1.TreeItem) `
   .${Tree_1.treeClassnames.note} {
@@ -18,6 +29,21 @@ exports.StyledTreeItem = (0, styled_1.styled)(Tree_1.TreeItem) `
     /* Добавляем к отступу ширину контейнера с чекбоксом */
     margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + 32px)`};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${FormControlLabel_1.formControlLabelClasses.root} {
+      margin-left: 0;
+      gap: ${({ theme }) => theme.spacing(1)};
+    }
+
+    & .${FormControlLabel_1.formControlLabelClasses.root} .${FormControlLabel_1.formControlLabelClasses.label} {
+      margin-left: 0;
+    }
+
+    & .${Tree_1.treeClassnames.note} {
+      margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + ${Checkbox_1.MOBILE_CHECKBOX_SIZE})`};
+    }
+  }
 `;
 exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer};
@@ -32,4 +58,25 @@ exports.StyledTooltip = (0, styled_1.styled)(Tooltip_2.Tooltip) `
 `;
 exports.PopoverContent = styled_1.styled.div `
   padding: ${({ theme }) => theme.spacing(1)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 2)};
+  }
+`;
+exports.ConfirmChildrenCollapse = (0, styled_1.styled)(Collapse_1.Collapse) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border-bottom: 1px solid
+      ${({ theme }) => theme.palette.components.border.default};
+  }
+`;
+exports.ConfirmChildrenButton = (0, styled_1.styled)(Button_1.Button) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    justify-content: flex-start;
+
+    width: 100%;
+    height: auto;
+    padding: ${({ theme }) => theme.spacing(3, 4)};
+
+    border-radius: 0;
+  }
 `;

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

@@ -8,18 +8,24 @@ export declare const useLogic: <TValue extends MultipleValue = string[]>({ item,
     isDisabled: boolean;
     disabledReason: string | undefined;
     nextLevel: number;
+    confirmChildrenExcludeNodes: import("react").RefObject<HTMLLIElement | null>[];
+    itemRef: import("react").RefObject<HTMLLIElement | null>;
     formControlLabelProps: {
         disabled: boolean;
         onChange: () => void;
         onClick: (event: SyntheticEvent) => void;
     };
-    tooltipProps: {
+    confirmChildrenProps: {
         open: boolean;
         onClose: (...a: unknown[]) => void;
     };
     confirmChildrenButtonProps: {
-        onClick: () => void;
+        onClick: (event: SyntheticEvent) => void;
     };
     handleChange: () => void;
+    handleMobileOpenChange: (isOpen: boolean) => void;
+    isMobile: boolean;
+    isMobilePanelOpen: boolean;
+    isConfirmChildrenAvailable: boolean | undefined;
 };
 export {};