@astral/ui 4.36.0 → 4.36.1

package/components/TreeAsyncAutocomplete/OptionsModal/styles.js

@@ -13,7 +13,7 @@ export const StyledDialogContent = styled(DialogContent, {
   gap: ${({ theme }) => theme.spacing(4)};
 
   width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
-  height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${DIALOG_SIZES[$size].minWidth} - 50px)`)};
+  height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

package/components/TreeAutocomplete/OptionsModal/OptionsModal.js

@@ -25,5 +25,5 @@ export const OptionsModal = (props) => {
         }
         return _jsx(TreeList, { ...treeProps, ...treeListProps });
     };
-    return (_jsxs(Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [_jsxs(StyledDialogContent, { 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(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" })] })] }));
 };

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

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const StyledDialogContent: import("../../styled").StyledComponent<import("../../DialogContent").DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $size: Size;
 }, {}, {}>;
 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 {};

package/components/TreeAutocomplete/OptionsModal/styles.js

@@ -1,13 +1,20 @@
+import { DIALOG_SIZES } from '../../Dialog';
 import { DialogContent } from '../../DialogContent';
 import { styled } from '../../styled';
-export const StyledDialogContent = styled(DialogContent) `
+export const StyledDialogContent = styled(DialogContent, {
+    shouldForwardProp: (prop) => !['$size'].includes(prop),
+}) `
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
   gap: ${({ theme }) => theme.spacing(4)};
 
-  width: 500px;
-  height: 500px;
+  width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
+  height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: auto;
+  }
 `;
 export const TreeListWrapper = styled.div `
   overflow: auto;

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

@@ -1,15 +1,17 @@
 import { type ButtonProps } from '../../../Button';
-import { type DialogProps } from '../../../Dialog';
+import { type DialogProps, type DialogSize } from '../../../Dialog';
 import { type SearchFieldProps } from '../../../SearchField';
 import { type TreeListProps } from '../../../Tree';
 import { type OptionsModalProps } from '../types';
 type UseLogicResult = {
     isNoResult: boolean;
     searchFieldProps: SearchFieldProps;
-    modalProps: Partial<DialogProps>;
+    modalProps: Partial<DialogProps> & {
+        size: DialogSize;
+    };
     treeListProps: TreeListProps;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
 };
-export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }: OptionsModalProps) => UseLogicResult;
+export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size, }: OptionsModalProps) => UseLogicResult;
 export {};

package/components/TreeAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState, } from 'react';
 import { deepMap } from '../../../utils/array';
 import { findInTree } from './utils';
-export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }) => {
+export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size = 'md', }) => {
     const [value, setValue] = useState(initialValue);
     const [searchValue, setSearchValue] = useState();
     useEffect(() => {
@@ -47,6 +47,7 @@ export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, opti
         isNoResult,
         modalProps: {
             onClose: handleClose,
+            size,
         },
         searchFieldProps: {
             value: searchValue,

package/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.js

@@ -13,7 +13,7 @@ export const StyledDialogContent = styled(DialogContent, {
   gap: ${({ theme }) => theme.spacing(4)};
 
   width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
-  height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${DIALOG_SIZES[$size].minWidth} - 50px)`)};
+  height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

package/components/TreeLikeAutocomplete/OptionsModal/OptionsModal.js

@@ -25,5 +25,5 @@ export const OptionsModal = (props) => {
         }
         return (_jsx(TreeLikeList, { isConfirmChildrenSelection: isConfirmChildrenSelection, ...treeProps, ...treeLikeListProps }));
     };
-    return (_jsxs(Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [_jsxs(StyledDialogContent, { 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(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" })] })] }));
 };

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

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const StyledDialogContent: import("../../styled").StyledComponent<import("../../DialogContent").DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $size: Size;
 }, {}, {}>;
 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 {};

package/components/TreeLikeAutocomplete/OptionsModal/styles.js

@@ -1,13 +1,20 @@
+import { DIALOG_SIZES } from '../../Dialog';
 import { DialogContent } from '../../DialogContent';
 import { styled } from '../../styled';
-export const StyledDialogContent = styled(DialogContent) `
+export const StyledDialogContent = styled(DialogContent, {
+    shouldForwardProp: (prop) => !['$size'].includes(prop),
+}) `
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
   gap: ${({ theme }) => theme.spacing(4)};
 
-  width: 100%;
-  height: 500px;
+  width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
+  height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: auto;
+  }
 `;
 export const TreeListWrapper = styled.div `
   overflow: auto;

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

@@ -1,5 +1,5 @@
 import { type ButtonProps } from '../../../Button';
-import { type DialogProps } from '../../../Dialog';
+import { type DialogProps, type DialogSize } from '../../../Dialog';
 import { type SearchFieldProps } from '../../../SearchField';
 import { type TreeLikeListProps } from '../../../TreeLikeList';
 import { type OptionsModalProps } from '../types';
@@ -7,10 +7,12 @@ type UseLogicParams = OptionsModalProps;
 type UseLogicResult = {
     isNoResult: boolean;
     searchFieldProps: SearchFieldProps;
-    modalProps: Partial<DialogProps>;
+    modalProps: Partial<DialogProps> & {
+        size: DialogSize;
+    };
     treeLikeListProps: TreeLikeListProps;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
 };
-export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }: UseLogicParams) => UseLogicResult;
+export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size, }: UseLogicParams) => UseLogicResult;
 export {};

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

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState, } from 'react';
 import { deepMap } from '../../../utils/array';
 import { findInTree } from './utils';
-export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }) => {
+export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size = 'md', }) => {
     const [value, setValue] = useState(initialValue);
     const [searchValue, setSearchValue] = useState();
     useEffect(() => {
@@ -47,6 +47,7 @@ export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, opti
         isNoResult,
         modalProps: {
             onClose: handleClose,
+            size,
         },
         searchFieldProps: {
             value: searchValue,

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

@@ -16,7 +16,7 @@ exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent
   gap: ${({ theme }) => theme.spacing(4)};
 
   width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
-  height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${Dialog_1.DIALOG_SIZES[$size].minWidth} - 50px)`)};
+  height: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

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

@@ -28,6 +28,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, { 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)(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" })] })] }));
 };
 exports.OptionsModal = OptionsModal;

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

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const StyledDialogContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../DialogContent").DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $size: Size;
 }, {}, {}>;
 export declare const TreeListWrapper: 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 {};

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

@@ -1,16 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeListWrapper = exports.StyledDialogContent = void 0;
+const Dialog_1 = require("../../Dialog");
 const DialogContent_1 = require("../../DialogContent");
 const styled_1 = require("../../styled");
-exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent) `
+exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent, {
+    shouldForwardProp: (prop) => !['$size'].includes(prop),
+}) `
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
   gap: ${({ theme }) => theme.spacing(4)};
 
-  width: 500px;
-  height: 500px;
+  width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
+  height: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: auto;
+  }
 `;
 exports.TreeListWrapper = styled_1.styled.div `
   overflow: auto;

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

@@ -1,15 +1,17 @@
 import { type ButtonProps } from '../../../Button';
-import { type DialogProps } from '../../../Dialog';
+import { type DialogProps, type DialogSize } from '../../../Dialog';
 import { type SearchFieldProps } from '../../../SearchField';
 import { type TreeListProps } from '../../../Tree';
 import { type OptionsModalProps } from '../types';
 type UseLogicResult = {
     isNoResult: boolean;
     searchFieldProps: SearchFieldProps;
-    modalProps: Partial<DialogProps>;
+    modalProps: Partial<DialogProps> & {
+        size: DialogSize;
+    };
     treeListProps: TreeListProps;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
 };
-export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }: OptionsModalProps) => UseLogicResult;
+export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size, }: OptionsModalProps) => UseLogicResult;
 export {};

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

@@ -4,7 +4,7 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const array_1 = require("../../../utils/array");
 const utils_1 = require("./utils");
-const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }) => {
+const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size = 'md', }) => {
     const [value, setValue] = (0, react_1.useState)(initialValue);
     const [searchValue, setSearchValue] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
@@ -50,6 +50,7 @@ const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, fi
         isNoResult,
         modalProps: {
             onClose: handleClose,
+            size,
         },
         searchFieldProps: {
             value: searchValue,

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

@@ -16,7 +16,7 @@ exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent
   gap: ${({ theme }) => theme.spacing(4)};
 
   width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
-  height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${Dialog_1.DIALOG_SIZES[$size].minWidth} - 50px)`)};
+  height: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

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

@@ -28,6 +28,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, { 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)(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" })] })] }));
 };
 exports.OptionsModal = OptionsModal;

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

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const StyledDialogContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../DialogContent").DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $size: Size;
 }, {}, {}>;
 export declare const TreeListWrapper: 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 {};

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

@@ -1,16 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeListWrapper = exports.StyledDialogContent = void 0;
+const Dialog_1 = require("../../Dialog");
 const DialogContent_1 = require("../../DialogContent");
 const styled_1 = require("../../styled");
-exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent) `
+exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent, {
+    shouldForwardProp: (prop) => !['$size'].includes(prop),
+}) `
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
   gap: ${({ theme }) => theme.spacing(4)};
 
-  width: 100%;
-  height: 500px;
+  width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
+  height: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: auto;
+  }
 `;
 exports.TreeListWrapper = styled_1.styled.div `
   overflow: auto;

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

@@ -1,5 +1,5 @@
 import { type ButtonProps } from '../../../Button';
-import { type DialogProps } from '../../../Dialog';
+import { type DialogProps, type DialogSize } from '../../../Dialog';
 import { type SearchFieldProps } from '../../../SearchField';
 import { type TreeLikeListProps } from '../../../TreeLikeList';
 import { type OptionsModalProps } from '../types';
@@ -7,10 +7,12 @@ type UseLogicParams = OptionsModalProps;
 type UseLogicResult = {
     isNoResult: boolean;
     searchFieldProps: SearchFieldProps;
-    modalProps: Partial<DialogProps>;
+    modalProps: Partial<DialogProps> & {
+        size: DialogSize;
+    };
     treeLikeListProps: TreeLikeListProps;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
 };
-export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }: UseLogicParams) => UseLogicResult;
+export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size, }: UseLogicParams) => UseLogicResult;
 export {};

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

@@ -4,7 +4,7 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const array_1 = require("../../../utils/array");
 const utils_1 = require("./utils");
-const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }) => {
+const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size = 'md', }) => {
     const [value, setValue] = (0, react_1.useState)(initialValue);
     const [searchValue, setSearchValue] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
@@ -50,6 +50,7 @@ const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, fi
         isNoResult,
         modalProps: {
             onClose: handleClose,
+            size,
         },
         searchFieldProps: {
             value: searchValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.36.0",
+  "version": "4.36.1",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {