@astral/ui 4.92.2 → 4.93.0

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

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

package/components/TreeAsyncAutocomplete/OptionsModal/OptionsModal.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Button';
 import { Dialog } from '../../Dialog';
 import { DialogActions } from '../../DialogActions';
-import { Paper } from '../../Paper';
 import { TreeList } from '../../Tree';
 import { Typography } from '../../Typography';
 import { SEARCH_FIELD_HELPER_TEXT } from './constants';
@@ -10,7 +9,7 @@ import { ErrorMessage } from './ErrorMessage';
 import { Loader } from './Loader';
 import { NoData } from './NoData';
 import { SearchSuggestion } from './SearchSuggestion';
-import { StyledDialogContent, StyledSearchField, TreeListWrapper, UserHintWrapper, } from './styles';
+import { CancelButton, SearchFieldWrapper, StyledDialogContent, StyledPaper, StyledSearchField, TreeListWrapper, UserHintWrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const OptionsModal = (props) => {
     const { isNoResult, searchFieldProps, modalProps, treeListProps, cancelButtonProps, confirmButtonProps, handleRetry, isShowUserHint, isShowModalLoader, isShowSearchFieldLoader, isShowSearchSuggestion, isLoadingError, treeProps, loadingErrorMsg, } = useLogic(props);
@@ -29,5 +28,5 @@ export const OptionsModal = (props) => {
         }
         return (_jsx(TreeList, { ...treeProps, ...treeListProps }));
     };
-    return (_jsxs(Dialog, { ...modalProps, children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: SEARCH_FIELD_HELPER_TEXT }), _jsx(Paper, { variant: "outlined", children: _jsxs(TreeListWrapper, { children: [renderComponent(), isShowUserHint && (_jsx(UserHintWrapper, { children: _jsx(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" }) }))] }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return (_jsxs(Dialog, { ...modalProps, children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(SearchFieldWrapper, { children: _jsx(StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: SEARCH_FIELD_HELPER_TEXT }) }), _jsx(StyledPaper, { variant: "outlined", children: _jsxs(TreeListWrapper, { children: [renderComponent(), isShowUserHint && (_jsx(UserHintWrapper, { children: _jsx(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" }) }))] }) })] }), _jsxs(DialogActions, { children: [_jsx(CancelButton, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };

package/components/TreeAsyncAutocomplete/OptionsModal/styles.d.ts

@@ -9,9 +9,26 @@ export declare const TreeListWrapper: 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 SearchFieldWrapper: 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 StyledSearchField: import("../../styled").StyledComponent<Omit<import("../../SearchField").SearchFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const StyledPaper: import("../../styled").StyledComponent<Omit<import("../../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const CancelButton: 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;
+    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("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/TreeAsyncAutocomplete/OptionsModal/styles.js

@@ -1,7 +1,14 @@
 import { formHelperTextClasses } from '@mui/material/FormHelperText';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { paperClasses } from '@mui/material/Paper';
+import { DEFAULT_HEADER_HEIGHT, OFFSET_TOP_SCREEN } from '../../BottomDrawer';
+import { Button } from '../../Button';
 import { DIALOG_SIZES } from '../../Dialog';
 import { DialogContent } from '../../DialogContent';
+import { loaderClassnames } from '../../Loader';
+import { Paper } from '../../Paper';
 import { SearchField } from '../../SearchField';
+import { svgIconClassnames } from '../../SvgIcon';
 import { styled } from '../../styled';
 import { treeListClassnames } from '../../Tree';
 export const StyledDialogContent = styled(DialogContent, {
@@ -14,29 +21,87 @@ export const StyledDialogContent = styled(DialogContent, {
 
   width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
   height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
-  
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;
+    padding: 0;
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    height: calc(100vh - ${OFFSET_TOP_SCREEN} - ${DEFAULT_HEADER_HEIGHT}px - 72px);
+
+    /* Причина игнора: Прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    @supports (height: 100dvh) {
+      height: calc(100dvh - ${OFFSET_TOP_SCREEN} - ${DEFAULT_HEADER_HEIGHT}px - 72px);
+    }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
   }
 `;
 export const TreeListWrapper = styled.div `
-    overflow: auto;
+  overflow: auto;
+
+  height: 100%;
 
-    height: 100%;
-  
   & .${treeListClassnames.list} {
     width: auto;
     min-width: max-content;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${treeListClassnames.list} {
+      min-width: unset;
+    }
+
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    &:not(:has(.${treeListClassnames.list})) {
+      height: 100%;
+    }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
+
+    height: auto;
+  }
+`;
+export const SearchFieldWrapper = styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 4, 0)};
+  }
 `;
 export const StyledSearchField = styled(SearchField) `
   & .${formHelperTextClasses.root} {
     display: flex;
 
     margin-top: ${({ theme }) => theme.spacing(2)};
-    
+
     color: ${({ theme }) => theme.palette.grey[500]};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${formHelperTextClasses.root} {
+      display: none;
+    }
+
+    & .${inputBaseClasses.root}.${inputBaseClasses.adornedEnd} .${loaderClassnames.root} .${svgIconClassnames.root} {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;
+export const StyledPaper = styled(Paper) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &.${paperClasses.root} {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    border: unset;
+
+    overflow: auto;
+  }
+`;
+export const CancelButton = styled(Button) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;
 export const UserHintWrapper = styled.div `
   display: flex;
@@ -44,4 +109,9 @@ export const UserHintWrapper = styled.div `
   justify-content: center;
 
   height: 36px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: auto;
+    padding: ${({ theme }) => theme.spacing(3, 4)};
+  }
 `;

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

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

package/components/TreeAutocomplete/OptionsModal/OptionsModal.js

@@ -2,13 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Button';
 import { Dialog } from '../../Dialog';
 import { DialogActions } from '../../DialogActions';
-import { Paper } from '../../Paper';
 import { SearchField } from '../../SearchField';
 import { TreeList } from '../../Tree';
 import { ErrorMessage } from './ErrorMessage';
 import { Loader } from './Loader';
 import { NoData } from './NoData';
-import { StyledDialogContent, TreeListWrapper } from './styles';
+import { CancelButton, SearchFieldWrapper, StyledDialogContent, StyledPaper, TreeListWrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const OptionsModal = (props) => {
     const { isNoResult, searchFieldProps, modalProps, treeListProps, cancelButtonProps, confirmButtonProps, } = useLogic(props);
@@ -25,5 +24,5 @@ export const OptionsModal = (props) => {
         }
         return _jsx(TreeList, { ...treeProps, ...treeListProps });
     };
-    return (_jsxs(Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(SearchField, { fullWidth: true, ...searchFieldProps }), _jsx(Paper, { variant: "outlined", children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return (_jsxs(Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(SearchFieldWrapper, { children: _jsx(SearchField, { fullWidth: true, ...searchFieldProps }) }), _jsx(StyledPaper, { variant: "outlined", children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(CancelButton, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };

package/components/TreeAutocomplete/OptionsModal/styles.d.ts

@@ -9,4 +9,21 @@ export declare const TreeListWrapper: 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 SearchFieldWrapper: 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 StyledPaper: import("../../styled").StyledComponent<Omit<import("../../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const CancelButton: 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;
+    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/components/TreeAutocomplete/OptionsModal/styles.js

@@ -1,5 +1,9 @@
+import { paperClasses } from '@mui/material/Paper';
+import { DEFAULT_HEADER_HEIGHT, OFFSET_TOP_SCREEN } from '../../BottomDrawer';
+import { Button } from '../../Button';
 import { DIALOG_SIZES } from '../../Dialog';
 import { DialogContent } from '../../DialogContent';
+import { Paper } from '../../Paper';
 import { styled } from '../../styled';
 export const StyledDialogContent = styled(DialogContent, {
     shouldForwardProp: (prop) => !['$size'].includes(prop),
@@ -14,6 +18,17 @@ export const StyledDialogContent = styled(DialogContent, {
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;
+    padding: 0;
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    height: calc(100vh - ${OFFSET_TOP_SCREEN} - ${DEFAULT_HEADER_HEIGHT}px - 72px);
+
+    /* Причина игнора: Прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    @supports (height: 100dvh) {
+      height: calc(100dvh - ${OFFSET_TOP_SCREEN} - ${DEFAULT_HEADER_HEIGHT}px - 72px);
+    }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
   }
 `;
 export const TreeListWrapper = styled.div `
@@ -21,3 +36,24 @@ export const TreeListWrapper = styled.div `
 
   height: 100%;
 `;
+export const SearchFieldWrapper = styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 4, 0)};
+  }
+`;
+export const StyledPaper = styled(Paper) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+
+    &.${paperClasses.root} {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    border: unset;
+  }
+`;
+export const CancelButton = styled(Button) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

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

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/OptionsModal.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '../../Button';
 import { CheckableTag } from '../../CheckableTag';
 import { Dialog } from '../../Dialog';
 import { DialogActions } from '../../DialogActions';
-import { Paper } from '../../Paper';
 import { TagBadge } from '../../TagBadge';
 import { TreeLikeList } from '../../TreeLikeList';
 import { Typography } from '../../Typography';
@@ -12,10 +11,10 @@ import { ErrorMessage } from './ErrorMessage';
 import { Loader } from './Loader';
 import { NoData } from './NoData';
 import { SearchSuggestion } from './SearchSuggestion';
-import { StyledDialogContent, StyledSearchField, TreeListWrapper, UserHintWrapper, } from './styles';
+import { CancelButton, CheckableTagWrapper, ResetButton, SearchFieldWrapper, StyledDialogContent, StyledPaper, StyledSearchField, TreeListWrapper, TreeViewSlot, UserHintWrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const OptionsModal = (props) => {
-    const { isNoResult, searchFieldProps, modalProps, treeListProps, cancelButtonProps, confirmButtonProps, handleRetry, isShowUserHint, isShowModalLoader, isShowSearchFieldLoader, isShowSearchSuggestion, isLoadingError, treeProps, loadingErrorMsg, badgeContent, checkableTagProps, isShowSelectedTree, selectedTreeProps, } = useLogic(props);
+    const { isNoResult, searchFieldProps, modalProps, treeListProps, cancelButtonProps, confirmButtonProps, resetButtonProps, handleRetry, isShowUserHint, isShowModalLoader, isShowSearchFieldLoader, isShowSearchSuggestion, isLoadingError, treeProps, loadingErrorMsg, badgeContent, checkableTagProps, isShowSelectedTree, selectedTreeProps, } = useLogic(props);
     const renderComponent = () => {
         if (isShowSearchSuggestion) {
             return _jsx(SearchSuggestion, {});
@@ -29,10 +28,7 @@ export const OptionsModal = (props) => {
         if (isNoResult) {
             return _jsx(NoData, {});
         }
-        if (isShowSelectedTree) {
-            return (_jsx(TreeLikeList, { ...treeProps, ...selectedTreeProps }));
-        }
-        return (_jsx(TreeLikeList, { ...treeProps, ...treeListProps }));
+        return (_jsx(TreeViewSlot, { children: _jsx(TreeLikeList, { ...treeProps, ...(isShowSelectedTree ? selectedTreeProps : treeListProps) }, isShowSelectedTree ? 'selected-tree' : 'options-tree') }));
     };
-    return (_jsxs(Dialog, { ...modalProps, children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: SEARCH_FIELD_HELPER_TEXT }), _jsx(CheckableTag, { ...checkableTagProps, endAddon: (badgeProps) => (_jsx(TagBadge, { ...badgeProps, badgeContent: badgeContent, showZero: true })) }), _jsx(Paper, { variant: "outlined", children: _jsxs(TreeListWrapper, { children: [renderComponent(), isShowUserHint && (_jsx(UserHintWrapper, { children: _jsx(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" }) }))] }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return (_jsxs(Dialog, { ...modalProps, headerContent: _jsxs(_Fragment, { children: [_jsx(ResetButton, { variant: "text", color: "primary", ...resetButtonProps, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }), modalProps.headerContent] }), children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(SearchFieldWrapper, { children: _jsx(StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: SEARCH_FIELD_HELPER_TEXT }) }), _jsx(CheckableTagWrapper, { children: _jsx(CheckableTag, { ...checkableTagProps, endAddon: (badgeProps) => (_jsx(TagBadge, { ...badgeProps, badgeContent: badgeContent, showZero: true })) }) }), _jsx(StyledPaper, { variant: "outlined", children: _jsxs(TreeListWrapper, { children: [renderComponent(), isShowUserHint && (_jsx(UserHintWrapper, { children: _jsx(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" }) }))] }) })] }), _jsxs(DialogActions, { children: [_jsx(CancelButton, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };

package/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.d.ts

@@ -9,9 +9,44 @@ export declare const TreeListWrapper: 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 TreeViewSlot: 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 SearchFieldWrapper: 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 CheckableTagWrapper: 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 StyledSearchField: import("../../styled").StyledComponent<Omit<import("../../SearchField").SearchFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const StyledPaper: import("../../styled").StyledComponent<Omit<import("../../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const CancelButton: 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;
+    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("../../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;
+    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("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.js

@@ -1,8 +1,16 @@
 import { formHelperTextClasses } from '@mui/material/FormHelperText';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { paperClasses } from '@mui/material/Paper';
+import { DEFAULT_HEADER_HEIGHT, OFFSET_TOP_SCREEN } from '../../BottomDrawer';
+import { Button } from '../../Button';
 import { DIALOG_SIZES } from '../../Dialog';
 import { DialogContent } from '../../DialogContent';
+import { loaderClassnames } from '../../Loader';
+import { Paper } from '../../Paper';
 import { SearchField } from '../../SearchField';
+import { svgIconClassnames } from '../../SvgIcon';
 import { styled } from '../../styled';
+import { tagClassnames } from '../../Tag';
 import { treeListClassnames } from '../../Tree';
 export const StyledDialogContent = styled(DialogContent, {
     shouldForwardProp: (prop) => !['$size'].includes(prop),
@@ -14,29 +22,107 @@ export const StyledDialogContent = styled(DialogContent, {
 
   width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
   height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
-  
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;
+    padding: 0;
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    height: calc(100vh - ${OFFSET_TOP_SCREEN} - ${DEFAULT_HEADER_HEIGHT}px - 72px);
+
+    /* Причина игнора: Прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    @supports (height: 100dvh) {
+      height: calc(100dvh - ${OFFSET_TOP_SCREEN} - ${DEFAULT_HEADER_HEIGHT}px - 72px);
+    }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
   }
 `;
 export const TreeListWrapper = styled.div `
-    overflow: auto;
+  overflow: auto;
+
+  height: 100%;
 
-    height: 100%;
-  
   & .${treeListClassnames.list} {
     width: auto;
     min-width: max-content;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${treeListClassnames.list} {
+      min-width: unset;
+    }
+    
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    &:not(:has(.${treeListClassnames.list})) {
+      height: 100%;
+    }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
+
+    height: auto;
+  }
+`;
+export const TreeViewSlot = styled.div `
+  height: 100%;
+`;
+export const SearchFieldWrapper = styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 4, 0)};
+  }
+`;
+export const CheckableTagWrapper = styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+
+    & .${tagClassnames.root} {
+      width: 100%;
+    }
+  }
 `;
 export const StyledSearchField = styled(SearchField) `
   & .${formHelperTextClasses.root} {
     display: flex;
 
     margin-top: ${({ theme }) => theme.spacing(2)};
-    
+
     color: ${({ theme }) => theme.palette.grey[500]};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${formHelperTextClasses.root} {
+      display: none;
+    }
+
+    & .${inputBaseClasses.root}.${inputBaseClasses.adornedEnd} .${loaderClassnames.root} .${svgIconClassnames.root} {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;
+export const StyledPaper = styled(Paper) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &.${paperClasses.root} {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    border: unset;
+
+    overflow: auto;
+  }
+`;
+export const CancelButton = styled(Button) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+export const ResetButton = styled(Button) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    margin-left: auto;
+  }
 `;
 export const UserHintWrapper = styled.div `
   display: flex;
@@ -44,4 +130,9 @@ export const UserHintWrapper = styled.div `
   justify-content: center;
 
   height: 36px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 4)};
+    height: auto;
+  }
 `;

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

@@ -1,7 +1,10 @@
 import { useEffect, useMemo, useState, } from 'react';
+import { useViewportType } from '../../../useViewportType';
 import { deepMap } from '../../../utils/array';
+import { checkIsDeepEqual } from '../../../utils/checkIsDeepEqual';
 import { useSelectedTreeView } from './hooks';
 export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInputChange, onRetry, meta, onShowUserHint, isLoadingModal, minSymbolsToFetch = 0, isLoading, isLoadingError, loadingErrorMsg, treeProps, }) => {
+    const { isMobile } = useViewportType();
     const [value, setValue] = useState(initialValue);
     const [searchValue, setSearchValue] = useState();
     const { onClose, ...restDialogProps } = dialogProps;
@@ -58,6 +61,14 @@ export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps,
         onChange?.(value);
         onClose?.(event, 'escapeKeyDown');
     };
+    const handleReset = () => {
+        const isSameAsInitial = checkIsDeepEqual((value ?? []).map(({ id }) => id).sort(), (initialValue ?? []).map(({ id }) => id).sort());
+        if (!isSameAsInitial) {
+            setValue(initialValue);
+            return;
+        }
+        setValue(undefined);
+    };
     // Определяем isNoResult в зависимости от режима
     const isNoResult = useMemo(() => {
         if (!searchValue) {
@@ -75,7 +86,7 @@ export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps,
         isNoResultInSelectedTree,
         options.length,
     ]);
-    const isDisabledButton = !value || isNoResult;
+    const isDisabledButton = isNoResult || (!value?.length && !initialValue?.length);
     const handleRetry = () => {
         onRetry?.(searchValue);
     };
@@ -113,7 +124,7 @@ export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps,
             data: selectedTreeDataToRender,
             onChange: handleChange,
             isObjectMode: true,
-            isInitialExpanded: true,
+            isInitialExpanded: !isMobile,
         },
         modalProps: {
             onClose: handleClose,
@@ -139,5 +150,9 @@ export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps,
             disabled: isDisabledButton,
             onClick: handleClick,
         },
+        resetButtonProps: {
+            disabled: !value?.length,
+            onClick: handleReset,
+        },
     };
 };

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

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

package/components/TreeLikeAutocomplete/OptionsModal/OptionsModal.js

@@ -1,18 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '../../Button';
 import { Dialog } from '../../Dialog';
 import { DialogActions } from '../../DialogActions';
-import { Paper } from '../../Paper';
 import { SearchField } from '../../SearchField';
 import { TreeLikeList } from '../../TreeLikeList';
 import { ErrorMessage } from './ErrorMessage';
 import { Loader } from './Loader';
 import { NoData } from './NoData';
-import { StyledDialogContent, TreeListWrapper } from './styles';
+import { CancelButton, ResetButton, SearchFieldWrapper, StyledDialogContent, StyledPaper, TreeListWrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const OptionsModal = (props) => {
-    const { isNoResult, searchFieldProps, modalProps, treeLikeListProps, cancelButtonProps, confirmButtonProps, } = 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, } = useLogic(props);
+    const { isOpen, initialValue, options, isConfirmChildrenSelection, isLoading, isLoadingError, loadingErrorMsg, treeProps, filterOptions, onChange, onRetry, onClose, headerContent, ...externalDialogProps } = props;
     const renderComponent = () => {
         if (isLoading) {
             return _jsx(Loader, {});
@@ -25,5 +24,5 @@ export const OptionsModal = (props) => {
         }
         return (_jsx(TreeLikeList, { isConfirmChildrenSelection: isConfirmChildrenSelection, ...treeProps, ...treeLikeListProps }));
     };
-    return (_jsxs(Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(SearchField, { fullWidth: true, ...searchFieldProps }), _jsx(Paper, { variant: "outlined", children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return (_jsxs(Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, headerContent: _jsxs(_Fragment, { children: [_jsx(ResetButton, { variant: "text", color: "primary", ...resetButtonProps, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }), headerContent] }), children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(SearchFieldWrapper, { children: _jsx(SearchField, { fullWidth: true, ...searchFieldProps }) }), _jsx(StyledPaper, { variant: "outlined", children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(CancelButton, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };