@astral/ui 4.92.2 → 4.93.0

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

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TreeItem_1 = require("../../TreeItem");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const TreeItem = (props) => {
-    const { isSelected, isDefaultExpanded, isDisabled, disabledReason, nextLevel, handleChange, } = (0, useLogic_1.useLogic)(props);
+    const { isSelected, isDefaultExpanded, isDisabled, disabledReason, nextLevel, handleChange, formControlLabelProps, } = (0, useLogic_1.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 ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { 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: (0, jsx_runtime_1.jsx)(styles_1.List, { children: children.map((child) => ((0, jsx_runtime_1.jsx)(exports.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 ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { id: id, prefixId: prefixId, isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, component: "li", label: (0, jsx_runtime_1.jsx)(styles_1.StyledFormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledRadio, { checked: isSelected, disabled: isDisabled, value: id }), label: itemLabel, ...formControlLabelProps }), note: renderItem ? null : note, mobileHeaderLabel: itemLabel, mobileHeaderControl: (0, jsx_runtime_1.jsx)(styles_1.StyledRadio, { checked: isSelected, disabled: isDisabled, value: id, onChange: handleChange }), level: level, onClick: handleChange, children: (0, jsx_runtime_1.jsx)(styles_1.List, { children: children.map((child) => ((0, jsx_runtime_1.jsx)(exports.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 ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { id: id, prefixId: prefixId, isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, component: "li", label: label, renderItem: renderItem, note: note, level: level, onClick: handleChange }));
+    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)(styles_1.StyledFormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledRadio, { checked: isSelected, disabled: isDisabled, value: id }), label: itemLabel, ...formControlLabelProps }), level: level, onClick: handleChange }));
 };
 exports.TreeItem = TreeItem;

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

@@ -1,5 +1,24 @@
 /// <reference types="react" />
+export declare const StyledRadio: import("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../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<{
     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("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/FormControlLabel").FormControlLabelProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

@@ -1,8 +1,67 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.List = void 0;
+exports.StyledFormControlLabel = exports.List = exports.StyledTreeItem = exports.StyledRadio = void 0;
+const FormControlLabel_1 = __importStar(require("@mui/material/FormControlLabel"));
+const Radio_1 = require("../../../Radio");
 const styled_1 = require("../../../styled");
 const mixins_1 = require("../../../styled/mixins");
+const TreeItem_1 = require("../../TreeItem");
+exports.StyledRadio = (0, styled_1.styled)(Radio_1.Radio) `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 20px;
+
+    & .${Radio_1.radioClassnames.iconWrapper}, & .${Radio_1.radioClassnames.input} {
+      height: 20px;
+    }
+  }
+`;
+exports.StyledTreeItem = (0, styled_1.styled)(TreeItem_1.TreeItem) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${TreeItem_1.treeClassnames.note} {
+
+      /* Добавляем к отступу ширину контейнера с радио кнопкой */
+      margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + ${Radio_1.MOBILE_RADIO_SIZE})`};
+    }
+  }
+`;
 exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer}
 `;
+exports.StyledFormControlLabel = (0, styled_1.styled)(FormControlLabel_1.default) `
+  margin-left: 0;
+
+  & .${FormControlLabel_1.formControlLabelClasses.label} {
+    margin-left: 0;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(1)};
+  }
+`;

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

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

package/node/components/Tree/TreeList/TreeList.js

@@ -11,6 +11,6 @@ const INITIAL_LEVEL = 0;
 const TreeList = (props) => {
     const { listProps, itemProps } = (0, useLogic_1.useLogic)(props);
     const { data, className, expandedLevel = 10, disabledItems, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.List, { className: (0, cn_1.cn)(className, constants_1.treeListClassnames.list), ...listProps, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ListWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.List, { className: (0, cn_1.cn)(className, constants_1.treeListClassnames.list), ...listProps, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }) }));
 };
 exports.TreeList = TreeList;

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

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+export declare const ListWrapper: 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 List: 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;

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

@@ -1,9 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.List = void 0;
+exports.List = exports.ListWrapper = void 0;
 const styled_1 = require("../../styled");
 const mixins_1 = require("../../styled/mixins");
+exports.ListWrapper = styled_1.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);
+  }
+`;
 exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer};
+  position: relative;
   overflow: hidden;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-grow: 1;
+    min-height: 0;
+
+    overflow-y: auto;
+  }
 `;

package/node/components/TreeAsyncAutocomplete/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/TreeAsyncAutocomplete/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 Tree_1 = require("../../Tree");
 const Typography_1 = require("../../Typography");
 const constants_1 = require("./constants");
@@ -32,6 +31,6 @@ const OptionsModal = (props) => {
         }
         return ((0, jsx_runtime_1.jsx)(Tree_1.TreeList, { ...treeProps, ...treeListProps }));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...modalProps, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { "$size": modalProps.size, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: constants_1.SEARCH_FIELD_HELPER_TEXT }), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(styles_1.TreeListWrapper, { children: [renderComponent(), isShowUserHint && ((0, jsx_runtime_1.jsx)(styles_1.UserHintWrapper, { children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "grey", colorIntensity: "600", children: "\u0423\u0442\u043E\u0447\u043D\u0438\u0442\u0435 \u0437\u0430\u043F\u0440\u043E\u0441 \u0434\u043B\u044F \u0431\u043E\u043B\u0435\u0435 \u043B\u0443\u0447\u0448\u0435\u0433\u043E \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0430 \u043F\u043E\u0438\u0441\u043A\u0430" }) }))] }) })] }), (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, { ...modalProps, 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)(styles_1.StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: constants_1.SEARCH_FIELD_HELPER_TEXT }) }), (0, jsx_runtime_1.jsx)(styles_1.StyledPaper, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(styles_1.TreeListWrapper, { children: [renderComponent(), isShowUserHint && ((0, jsx_runtime_1.jsx)(styles_1.UserHintWrapper, { children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "grey", colorIntensity: "600", children: "\u0423\u0442\u043E\u0447\u043D\u0438\u0442\u0435 \u0437\u0430\u043F\u0440\u043E\u0441 \u0434\u043B\u044F \u0431\u043E\u043B\u0435\u0435 \u043B\u0443\u0447\u0448\u0435\u0433\u043E \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0430 \u043F\u043E\u0438\u0441\u043A\u0430" }) }))] }) })] }), (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/TreeAsyncAutocomplete/OptionsModal/styles.d.ts

@@ -9,9 +9,26 @@ 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 StyledSearchField: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../SearchField").SearchFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+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 UserHintWrapper: 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;

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

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserHintWrapper = exports.StyledSearchField = exports.TreeListWrapper = exports.StyledDialogContent = void 0;
+exports.UserHintWrapper = exports.CancelButton = exports.StyledPaper = exports.StyledSearchField = exports.SearchFieldWrapper = 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 Tree_1 = require("../../Tree");
 exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent, {
@@ -17,29 +24,87 @@ 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.SearchFieldWrapper = styled_1.styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 4, 0)};
+  }
 `;
 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.UserHintWrapper = styled_1.styled.div `
   display: flex;
@@ -47,4 +112,9 @@ exports.UserHintWrapper = styled_1.styled.div `
   justify-content: center;
 
   height: 36px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: auto;
+    padding: ${({ theme }) => theme.spacing(3, 4)};
+  }
 `;

package/node/components/TreeAutocomplete/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/TreeAutocomplete/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 Tree_1 = require("../../Tree");
 const ErrorMessage_1 = require("./ErrorMessage");
@@ -28,6 +27,6 @@ const OptionsModal = (props) => {
         }
         return (0, jsx_runtime_1.jsx)(Tree_1.TreeList, { ...treeProps, ...treeListProps });
     };
-    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, 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/TreeAutocomplete/OptionsModal/styles.d.ts

@@ -9,4 +9,21 @@ 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 {};

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

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeListWrapper = exports.StyledDialogContent = void 0;
+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),
@@ -17,6 +21,17 @@ exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent
 
   ${({ 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,24 @@ 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;
+  }
+`;

package/node/components/TreeLikeAsyncAutocomplete/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/TreeLikeAsyncAutocomplete/OptionsModal/OptionsModal.js

@@ -6,7 +6,6 @@ const Button_1 = require("../../Button");
 const CheckableTag_1 = require("../../CheckableTag");
 const Dialog_1 = require("../../Dialog");
 const DialogActions_1 = require("../../DialogActions");
-const Paper_1 = require("../../Paper");
 const TagBadge_1 = require("../../TagBadge");
 const TreeLikeList_1 = require("../../TreeLikeList");
 const Typography_1 = require("../../Typography");
@@ -18,7 +17,7 @@ const SearchSuggestion_1 = require("./SearchSuggestion");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const OptionsModal = (props) => {
-    const { isNoResult, searchFieldProps, modalProps, treeListProps, cancelButtonProps, confirmButtonProps, handleRetry, isShowUserHint, isShowModalLoader, isShowSearchFieldLoader, isShowSearchSuggestion, isLoadingError, treeProps, loadingErrorMsg, badgeContent, checkableTagProps, isShowSelectedTree, selectedTreeProps, } = (0, useLogic_1.useLogic)(props);
+    const { isNoResult, searchFieldProps, modalProps, treeListProps, cancelButtonProps, confirmButtonProps, resetButtonProps, handleRetry, isShowUserHint, isShowModalLoader, isShowSearchFieldLoader, isShowSearchSuggestion, isLoadingError, treeProps, loadingErrorMsg, badgeContent, checkableTagProps, isShowSelectedTree, selectedTreeProps, } = (0, useLogic_1.useLogic)(props);
     const renderComponent = () => {
         if (isShowSearchSuggestion) {
             return (0, jsx_runtime_1.jsx)(SearchSuggestion_1.SearchSuggestion, {});
@@ -32,11 +31,8 @@ const OptionsModal = (props) => {
         if (isNoResult) {
             return (0, jsx_runtime_1.jsx)(NoData_1.NoData, {});
         }
-        if (isShowSelectedTree) {
-            return ((0, jsx_runtime_1.jsx)(TreeLikeList_1.TreeLikeList, { ...treeProps, ...selectedTreeProps }));
-        }
-        return ((0, jsx_runtime_1.jsx)(TreeLikeList_1.TreeLikeList, { ...treeProps, ...treeListProps }));
+        return ((0, jsx_runtime_1.jsx)(styles_1.TreeViewSlot, { children: (0, jsx_runtime_1.jsx)(TreeLikeList_1.TreeLikeList, { ...treeProps, ...(isShowSelectedTree ? selectedTreeProps : treeListProps) }, isShowSelectedTree ? 'selected-tree' : 'options-tree') }));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...modalProps, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { "$size": modalProps.size, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: constants_1.SEARCH_FIELD_HELPER_TEXT }), (0, jsx_runtime_1.jsx)(CheckableTag_1.CheckableTag, { ...checkableTagProps, endAddon: (badgeProps) => ((0, jsx_runtime_1.jsx)(TagBadge_1.TagBadge, { ...badgeProps, badgeContent: badgeContent, showZero: true })) }), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(styles_1.TreeListWrapper, { children: [renderComponent(), isShowUserHint && ((0, jsx_runtime_1.jsx)(styles_1.UserHintWrapper, { children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "grey", colorIntensity: "600", children: "\u0423\u0442\u043E\u0447\u043D\u0438\u0442\u0435 \u0437\u0430\u043F\u0440\u043E\u0441 \u0434\u043B\u044F \u0431\u043E\u043B\u0435\u0435 \u043B\u0443\u0447\u0448\u0435\u0433\u043E \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0430 \u043F\u043E\u0438\u0441\u043A\u0430" }) }))] }) })] }), (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, { ...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" }), modalProps.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)(styles_1.StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: constants_1.SEARCH_FIELD_HELPER_TEXT }) }), (0, jsx_runtime_1.jsx)(styles_1.CheckableTagWrapper, { children: (0, jsx_runtime_1.jsx)(CheckableTag_1.CheckableTag, { ...checkableTagProps, endAddon: (badgeProps) => ((0, jsx_runtime_1.jsx)(TagBadge_1.TagBadge, { ...badgeProps, badgeContent: badgeContent, showZero: true })) }) }), (0, jsx_runtime_1.jsx)(styles_1.StyledPaper, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(styles_1.TreeListWrapper, { children: [renderComponent(), isShowUserHint && ((0, jsx_runtime_1.jsx)(styles_1.UserHintWrapper, { children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "grey", colorIntensity: "600", children: "\u0423\u0442\u043E\u0447\u043D\u0438\u0442\u0435 \u0437\u0430\u043F\u0440\u043E\u0441 \u0434\u043B\u044F \u0431\u043E\u043B\u0435\u0435 \u043B\u0443\u0447\u0448\u0435\u0433\u043E \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0430 \u043F\u043E\u0438\u0441\u043A\u0430" }) }))] }) })] }), (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/TreeLikeAsyncAutocomplete/OptionsModal/styles.d.ts

@@ -9,9 +9,44 @@ 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 TreeViewSlot: 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 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 CheckableTagWrapper: 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 StyledSearchField: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../SearchField").SearchFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+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 declare const UserHintWrapper: 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;