@astral/ui 4.36.0 → 4.37.0

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/Input/Input.js

@@ -12,7 +12,7 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const ClearButton = ({ disabled, onClick }) => ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, onClick: onClick, title: constants_1.CLEAR_TEXT, "aria-label": constants_1.CLEAR_TEXT, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }));
 exports.Input = (0, react_1.forwardRef)(({ disabled, onChange: propsOnChange, value, inputRef, hideHelperText = false, onClick, isLoading, ...restProps }, forwardedRef) => {
-    const { isVisibleClearButton, onChange, isVisibleTagsList, textFieldProps, onClearAll, } = (0, useLogic_1.useLogic)({
+    const { isVisibleClearButton, isVisibleTagsList, onChange, textFieldProps, onClearAll, } = (0, useLogic_1.useLogic)({
         inputRef,
         value,
         onChange: propsOnChange,

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.37.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {

package/components/TagsList/public.d.ts

@@ -1,2 +0,0 @@
-export * from './TagsList';
-export * from './types';

package/components/TagsList/public.js

@@ -1,2 +0,0 @@
-export * from './TagsList';
-export * from './types';

package/node/components/TagsList/public.d.ts

@@ -1,2 +0,0 @@
-export * from './TagsList';
-export * from './types';