@astral/ui 4.0.0-alpha.28 → 4.0.0-alpha.29

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

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Note = exports.Label = exports.LabelWrapper = exports.List = exports.ChevronIcon = exports.CollapseButton = exports.ItemContent = exports.Item = void 0;
+exports.Note = exports.Label = exports.LabelWrapper = exports.ChevronIcon = exports.CollapseButton = exports.ItemContent = exports.Item = void 0;
 const material_1 = require("@mui/material");
 const icons_1 = require("../../../icons");
+const Button_1 = require("../../Button");
 const Description_1 = require("../../Description");
 const IconButton_1 = require("../../IconButton");
 const OverflowTypography_1 = require("../../OverflowTypography");
 const styles_1 = require("../../styles");
-const mixins_1 = require("../../styles/mixins");
 const Typography_1 = require("../../Typography");
 const constants_1 = require("./constants");
-const getBackgroundColorOnHover = (theme, isSelected, isDisabled) => {
+const getBackgroundColor = (theme, isSelected, isDisabled) => {
     if (isDisabled) {
         return 'transparent';
     }
@@ -61,11 +61,11 @@ exports.ItemContent = (0, styles_1.styled)('div', {
 })};
 
   &:hover {
-    background-color: ${({ theme, $isSelected, $isDisabled }) => getBackgroundColorOnHover(theme, $isSelected, $isDisabled)};
+    background-color: ${({ theme, $isSelected, $isDisabled }) => getBackgroundColor(theme, $isSelected, $isDisabled)};
   }
 
   &:focus {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+    background-color: ${({ theme, $isSelected, $isDisabled }) => getBackgroundColor(theme, $isSelected, $isDisabled)};
     border: 0;
     outline: 0;
   }
@@ -82,6 +82,16 @@ exports.CollapseButton = (0, styles_1.styled)(IconButton_1.IconButton, {
 
   color: ${({ theme, $isNotBlockingExpandList }) => $isNotBlockingExpandList ? theme.palette.text.primary : 'inherit'};
 
+  &.${Button_1.buttonClasses.root} .${material_1.svgIconClasses.root}, &.${Button_1.buttonClasses.root} {
+    width: 24px;
+    height: 24px;
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
   &:hover {
     background-color: ${({ theme }) => theme.palette.grey[300]};
   }
@@ -96,9 +106,6 @@ exports.ChevronIcon = (0, styles_1.styled)(icons_1.ChevronROutlineMd, {
     duration: theme.transitions.duration.short,
 })};
 `;
-exports.List = styles_1.styled.ul `
-  ${mixins_1.listContainer};
-`;
 exports.LabelWrapper = (0, styles_1.styled)('div', {
     shouldForwardProp: (prop) => prop !== '$level',
 }) `

package/node/components/TreeAutocomplete/Input/Input.js

@@ -15,12 +15,14 @@ exports.Input = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("../../../icons");
+const IconButton_1 = require("../../IconButton");
 const TextField_1 = require("../../TextField");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const ClearButton = ({ disabled, onClick }) => ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { variant: "text", disabled: disabled, onClick: onClick, children: (0, jsx_runtime_1.jsx)(icons_1.CircleErrorFillSm, {}) }));
+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)(icons_1.CrossOutlineMd, {}) }));
 exports.Input = (0, react_1.forwardRef)((props, forwardedRef) => {
     const { inputRef, isVisibleClearButton, handleClearAll } = (0, useLogic_1.useLogic)(props);
     const { disabled, onChange } = props, restProps = __rest(props, ["disabled", "onChange"]);
-    return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, Object.assign({}, restProps, { ref: forwardedRef, inputRef: inputRef, disabled: disabled, inputProps: { readOnly: true }, endAdornment: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: handleClearAll })), (0, jsx_runtime_1.jsx)(icons_1.ChevronDOutlineMd, {})] }) })));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, Object.assign({}, restProps, { ref: forwardedRef, inputRef: inputRef, disabled: disabled, inputProps: { readOnly: true }, endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.IconWrapper, { children: [isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: handleClearAll })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, children: (0, jsx_runtime_1.jsx)(icons_1.DownOutlineMd, {}) })] }) })));
 });

package/node/components/TreeAutocomplete/Input/constants.d.ts

@@ -0,0 +1 @@
+export declare const CLEAR_TEXT = "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C";

package/node/components/TreeAutocomplete/Input/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLEAR_TEXT = void 0;
+exports.CLEAR_TEXT = 'Очистить';

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

@@ -1,12 +1,5 @@
 /// <reference types="react" />
-export declare const StyledIconButton: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
-    variant?: "link" | "outlined" | "text" | "contained" | "light" | undefined;
-    loading?: boolean | undefined;
-    color?: "grey" | "primary" | "error" | "warning" | "success" | undefined;
-    component?: import("react").ElementType | undefined;
-    selected?: boolean | undefined;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,23 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledIconButton = void 0;
-const IconButton_1 = require("../../IconButton");
+exports.IconWrapper = void 0;
 const styles_1 = require("../../styles");
-exports.StyledIconButton = (0, styles_1.styled)(IconButton_1.IconButton) `
-  background-color: transparent;
-
-  svg {
-    width: 16px;
-    height: 16px;
-
-    fill: ${({ theme }) => theme.palette.grey['500']};
-  }
-
-  &:hover {
-    background-color: transparent;
-
-    svg {
-      fill: ${({ theme }) => theme.palette.grey['700']};
-    }
-  }
+exports.IconWrapper = styles_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
 `;

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

@@ -6,5 +6,5 @@ const Button_1 = require("../../../Button");
 const Typography_1 = require("../../../Typography");
 const styles_1 = require("./styles");
 const DEFAULT_ERROR_MSG = 'Не удалось загрузить данные';
-const ErrorMessage = ({ loadingErrorMsg = DEFAULT_ERROR_MSG, onRetry, }) => ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { color: "textSecondary", children: loadingErrorMsg }), onRetry && (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })] }));
+const ErrorMessage = ({ loadingErrorMsg = DEFAULT_ERROR_MSG, onRetry, }) => ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { color: "grey", children: loadingErrorMsg }), onRetry && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, variant: "light", color: "grey", children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" }))] }));
 exports.ErrorMessage = ErrorMessage;

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

@@ -16,6 +16,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../Button");
 const Dialog_1 = require("../../Dialog");
 const DialogActions_1 = require("../../DialogActions");
+const ScrollWrapper_1 = require("../../ScrollWrapper");
 const SearchField_1 = require("../../SearchField");
 const Tree_1 = require("../../Tree");
 const ErrorMessage_1 = require("./ErrorMessage");
@@ -38,6 +39,6 @@ const OptionsModal = (props) => {
         }
         return (0, jsx_runtime_1.jsx)(Tree_1.TreeList, Object.assign({}, treeProps, treeListProps));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), (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, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), (0, jsx_runtime_1.jsx)(ScrollWrapper_1.ScrollWrapper, { 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, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
 };
 exports.OptionsModal = OptionsModal;

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

@@ -7,17 +7,14 @@ exports.StyledDialogContent = (0, styles_1.styled)(DialogContent_1.DialogContent
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
-  gap: ${({ theme }) => theme.spacing(5)};
+  gap: ${({ theme }) => theme.spacing(4)};
 
   width: 500px;
   height: 500px;
+  padding-bottom: ${({ theme }) => theme.spacing(4)};
 `;
 exports.TreeListWrapper = styles_1.styled.div `
   overflow: auto;
 
-  padding: ${({ theme }) => theme.spacing(2, 0)};
-
-  background-color: ${({ theme }) => theme.palette.background.element};
-  border: 2px solid ${({ theme }) => theme.palette.grey[300]};
-  border-radius: 3px;
+  height: 100%;
 `;

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

@@ -1,59 +1,3 @@
 /// <reference types="react" />
-import { type DialogProps } from '../Dialog';
-import { type TextFieldProps } from '../TextField';
-import { type TreeListData, type TreeListProps } from '../Tree';
-import type { TreeAutocompleteValue } from './types';
-export type TreeAutocompleteTreeProps = Pick<TreeListProps, 'disabledItems' | 'renderItem'>;
-export type TreeAutocompleteProps = {
-    /**
-     * Выбранное значения
-     */
-    value?: TreeAutocompleteValue;
-    /**
-     * Опции, которые необходимо отобразить в виде дерева.
-     */
-    options: TreeListData[];
-    /**
-     * Если true, поля будут недоступны для взаимодействия
-     */
-    isDisabled?: boolean;
-    /**
-     * Если true, поля будут подсвечены, как содержащие ошибку
-     */
-    isError?: boolean;
-    /**
-     * Флаг загрузки options
-     * Если true, вместо дерева options будет отображен лоадер
-     */
-    isLoading?: boolean;
-    /**
-     * Флаг ошибки загрузки options
-     * Если true, вместо дерева options будет отображен плейсхолдер с ошибкой
-     */
-    isLoadingError?: boolean;
-    /**
-     * Текст ошибки при загрузке данных
-     */
-    loadingErrorMsg?: string;
-    /**
-     * Предназначен для конфигурации всплывающего окна
-     */
-    dialogProps: Omit<DialogProps, 'open' | 'onClose'>;
-    /**
-     * Предназначен для конфигурации дерева опций
-     */
-    treeProps?: TreeAutocompleteTreeProps;
-    /**
-     * Функция обработки нажатия на кнопку "Повторить запрос"
-     */
-    onRetry?: () => void;
-    /**
-     * Функция для поиска элементов по дереву, если не определено, то будет использован встроенный поиск
-     */
-    filterOptions?: (node: TreeListData, searchValue: string) => boolean;
-    /**
-     * Функция, которая запускается при выборе item
-     */
-    onChange?: (newValue: TreeAutocompleteValue | undefined) => void;
-} & Omit<TextFieldProps, 'autoComplete' | 'defaultValue' | 'select' | 'error' | 'disabled' | 'multiline' | 'rows' | 'maxRows' | 'minRows' | 'SelectProps' | 'endAdornment' | 'onChange'>;
+import type { TreeAutocompleteProps } from './types';
 export declare const TreeAutocomplete: import("react").ForwardRefExoticComponent<Omit<TreeAutocompleteProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/node/components/TreeAutocomplete/types.d.ts

@@ -1 +1,57 @@
+import type { DialogProps } from '../Dialog';
+import type { TextFieldProps } from '../TextField';
+import type { TreeListData, TreeListProps } from '../Tree';
 export type TreeAutocompleteValue = string;
+export type TreeAutocompleteTreeProps = Pick<TreeListProps, 'disabledItems' | 'renderItem'>;
+export type TreeAutocompleteProps = {
+    /**
+     * Выбранное значения
+     */
+    value?: TreeAutocompleteValue;
+    /**
+     * Опции, которые необходимо отобразить в виде дерева.
+     */
+    options: TreeListData[];
+    /**
+     * Если true, поля будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Если true, поля будут подсвечены, как содержащие ошибку
+     */
+    isError?: boolean;
+    /**
+     * Флаг загрузки options
+     * Если true, вместо дерева options будет отображен лоадер
+     */
+    isLoading?: boolean;
+    /**
+     * Флаг ошибки загрузки options
+     * Если true, вместо дерева options будет отображен плейсхолдер с ошибкой
+     */
+    isLoadingError?: boolean;
+    /**
+     * Текст ошибки при загрузке данных
+     */
+    loadingErrorMsg?: string;
+    /**
+     * Предназначен для конфигурации всплывающего окна
+     */
+    dialogProps: Omit<DialogProps, 'open' | 'onClose'>;
+    /**
+     * Предназначен для конфигурации дерева опций
+     */
+    treeProps?: TreeAutocompleteTreeProps;
+    /**
+     * Функция обработки нажатия на кнопку "Повторить запрос"
+     */
+    onRetry?: () => void;
+    /**
+     * Функция для поиска элементов по дереву, если не определено, то будет использован встроенный поиск
+     */
+    filterOptions?: (node: TreeListData, searchValue: string) => boolean;
+    /**
+     * Функция, которая запускается при выборе item
+     */
+    onChange?: (newValue: TreeAutocompleteValue | undefined) => void;
+} & Omit<TextFieldProps, 'autoComplete' | 'defaultValue' | 'select' | 'error' | 'disabled' | 'multiline' | 'rows' | 'maxRows' | 'minRows' | 'SelectProps' | 'endAdornment' | 'onChange'>;

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

@@ -1,5 +1,5 @@
 import { type FocusEvent, type KeyboardEvent, type SyntheticEvent } from 'react';
-import { type TreeAutocompleteProps } from '../TreeAutocomplete';
+import type { TreeAutocompleteProps } from '../types';
 type UseLogicProps = TreeAutocompleteProps;
 export declare const useLogic: ({ value, options, onBlur }: UseLogicProps) => {
     inputProps: {

package/node/components/TreeLikeAutocomplete/Input/Input.js

@@ -15,13 +15,13 @@ exports.Input = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("../../../icons");
-const Loader_1 = require("../../Loader");
+const IconButton_1 = require("../../IconButton");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const ClearButton = ({ disabled, onClick }) => ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { variant: "text", disabled: disabled, title: constants_1.CLEAR_TEXT, "aria-label": constants_1.CLEAR_TEXT, onClick: onClick, children: (0, jsx_runtime_1.jsx)(styles_1.StyledCircleErrorFillSm, {}) }));
+const ClearButton = ({ disabled, onClick }) => ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, title: constants_1.CLEAR_TEXT, "aria-label": constants_1.CLEAR_TEXT, onClick: onClick, children: (0, jsx_runtime_1.jsx)(icons_1.CrossOutlineMd, {}) }));
 exports.Input = (0, react_1.forwardRef)((props, forwardedRef) => {
     const { textFieldProps, isVisibleTagsList, isVisibleClearButton, handleChange, handleClearAll, } = (0, useLogic_1.useLogic)(props);
     const { value, valueToRender, disabled, isLoading, onChange, onClick } = props, restProps = __rest(props, ["value", "valueToRender", "disabled", "isLoading", "onChange", "onClick"]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, Object.assign({}, restProps, { ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, startAdornment: isVisibleTagsList && ((0, jsx_runtime_1.jsx)(styles_1.StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [isLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: handleClearAll })), (0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { variant: "text", disabled: disabled, children: (0, jsx_runtime_1.jsx)(icons_1.ChevronDOutlineMd, {}) })] }), onClick: onClick }, textFieldProps)));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, Object.assign({}, restProps, { ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, startAdornment: isVisibleTagsList && ((0, jsx_runtime_1.jsx)(styles_1.StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [isLoading && (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}), isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: handleClearAll })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, children: (0, jsx_runtime_1.jsx)(icons_1.DownOutlineMd, {}) })] }), onClick: onClick }, textFieldProps)));
 });

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

@@ -9,30 +9,6 @@ export declare const EndAdornmentWrapper: import("@emotion/styled").StyledCompon
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledIconButton: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
-    variant?: "link" | "outlined" | "text" | "contained" | "light" | undefined;
-    loading?: boolean | undefined;
-    color?: "grey" | "primary" | "error" | "warning" | "success" | undefined;
-    component?: import("react").ElementType | undefined;
-    selected?: boolean | undefined;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const StyledCircleErrorFillSm: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"action" | "inherit" | "info" | "primary" | "secondary" | "error" | "warning" | "success" | "disabled", import("@mui/material").SvgIconPropsColorOverrides> | undefined;
-    fontSize?: import("@mui/types").OverridableStringUnion<"small" | "inherit" | "medium" | "large", import("@mui/material").SvgIconPropsSizeOverrides> | undefined;
-    htmlColor?: string | undefined;
-    inheritViewBox?: boolean | undefined;
-    shapeRendering?: string | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    titleAccess?: string | undefined;
-    viewBox?: string | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "color" | "fontSize" | "shapeRendering" | "children" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & {
+export declare const StyledLoader: import("@emotion/styled").StyledComponent<import("../../Loader").LoaderProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledCircleErrorFillSm = exports.StyledIconButton = exports.EndAdornmentWrapper = exports.StyledTagsList = exports.StyledTextField = void 0;
+exports.StyledLoader = exports.EndAdornmentWrapper = exports.StyledTagsList = exports.StyledTextField = void 0;
 const material_1 = require("@mui/material");
-const icons_1 = require("../../../icons");
-const IconButton_1 = require("../../IconButton");
+const Loader_1 = require("../../Loader");
 const styles_1 = require("../../styles");
 const TagsList_1 = require("../../TagsList");
 const TextField_1 = require("../../TextField");
@@ -17,9 +16,8 @@ const hiddenInputClass = (0, styles_1.css) `
 exports.StyledTextField = (0, styles_1.styled)(TextField_1.TextField, {
     shouldForwardProp: (prop) => !['$isHidden'].includes(prop),
 }) `
-  min-width: 400px;
-
   .${material_1.inputBaseClasses.root} {
+    height: 40px;
     padding-top: ${({ theme }) => theme.spacing(1)};
     padding-bottom: ${({ theme }) => theme.spacing(1)};
   }
@@ -38,24 +36,13 @@ exports.StyledTagsList = (0, styles_1.styled)(TagsList_1.TagsList) `
 `;
 exports.EndAdornmentWrapper = styles_1.styled.div `
   display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
   align-items: center;
 
   margin-left: auto;
+  padding-left: ${({ theme }) => theme.spacing(1)};
 `;
-exports.StyledIconButton = (0, styles_1.styled)(IconButton_1.IconButton) `
-  background-color: transparent;
-
-  &:hover {
-    background-color: transparent;
-
-    svg {
-      fill: ${({ theme }) => theme.palette.grey['700']};
-    }
-  }
-`;
-exports.StyledCircleErrorFillSm = (0, styles_1.styled)(icons_1.CircleErrorFillSm) `
-  width: 16px;
-  height: 16px;
-
-  fill: ${({ theme }) => theme.palette.grey['500']};
+exports.StyledLoader = (0, styles_1.styled)(Loader_1.Loader) `
+  width: 20px;
+  height: 20px;
 `;

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

@@ -6,5 +6,5 @@ const Button_1 = require("../../../Button");
 const Typography_1 = require("../../../Typography");
 const styles_1 = require("./styles");
 const DEFAULT_ERROR_MSG = 'Не удалось загрузить данные';
-const ErrorMessage = ({ loadingErrorMsg = DEFAULT_ERROR_MSG, onRetry, }) => ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { color: "textSecondary", children: loadingErrorMsg }), onRetry && (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })] }));
+const ErrorMessage = ({ loadingErrorMsg = DEFAULT_ERROR_MSG, onRetry, }) => ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { color: "grey", children: loadingErrorMsg }), onRetry && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, variant: "light", color: "grey", children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" }))] }));
 exports.ErrorMessage = ErrorMessage;

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

@@ -16,6 +16,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../Button");
 const Dialog_1 = require("../../Dialog");
 const DialogActions_1 = require("../../DialogActions");
+const ScrollWrapper_1 = require("../../ScrollWrapper");
 const SearchField_1 = require("../../SearchField");
 const TreeLikeList_1 = require("../../TreeLikeList");
 const ErrorMessage_1 = require("./ErrorMessage");
@@ -38,6 +39,6 @@ const OptionsModal = (props) => {
         }
         return ((0, jsx_runtime_1.jsx)(TreeLikeList_1.TreeLikeList, Object.assign({ isConfirmChildrenSelection: isConfirmChildrenSelection }, treeProps, treeLikeListProps)));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), (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, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), (0, jsx_runtime_1.jsx)(ScrollWrapper_1.ScrollWrapper, { 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, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
 };
 exports.OptionsModal = OptionsModal;

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

@@ -7,7 +7,7 @@ exports.StyledDialogContent = (0, styles_1.styled)(DialogContent_1.DialogContent
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
-  gap: ${({ theme }) => theme.spacing(5)};
+  gap: ${({ theme }) => theme.spacing(4)};
 
   width: 100%;
   height: 500px;
@@ -16,9 +16,5 @@ exports.TreeListWrapper = styles_1.styled.div `
   overflow: auto;
 
   min-width: 500px;
-  padding: ${({ theme }) => theme.spacing(2, 0)};
-
-  background-color: ${({ theme }) => theme.palette.background.element};
-  border: 2px solid ${({ theme }) => theme.palette.grey[300]};
-  border-radius: 3px;
+  height: 100%;
 `;

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

@@ -1,64 +1,3 @@
 /// <reference types="react" />
-import { type DialogProps } from '../Dialog';
-import { type TextFieldProps } from '../TextField';
-import { type TreeListData, type TreeListProps } from '../Tree';
-import type { TreeLikeAutocompleteValue, TreeLikeListAutocompleteData } from './types';
-export type TreeLikeAutocompleteTreeProps = Pick<TreeListProps, 'disabledItems' | 'renderItem'>;
-export type TreeLikeAutocompleteProps = {
-    /**
-     * Выбранное значения
-     */
-    value?: TreeLikeAutocompleteValue;
-    /**
-     * Опции, которые необходимо отобразить в виде дерева.
-     */
-    options: TreeLikeListAutocompleteData[];
-    /**
-     * Если true, при выборе родителя будет возможность выбора дочерних элементов
-     * @default true
-     */
-    isConfirmChildrenSelection?: boolean;
-    /**
-     * Если true, поля будут недоступны для взаимодействия
-     */
-    isDisabled?: boolean;
-    /**
-     * Если true, поля будут подсвечены, как содержащие ошибку
-     */
-    isError?: boolean;
-    /**
-     * Флаг загрузки options
-     * Если true, вместо дерева options будет отображен лоадер
-     */
-    isLoading?: boolean;
-    /**
-     * Флаг ошибки загрузки options
-     * Если true, вместо дерева options будет отображен плейсхолдер с ошибкой
-     */
-    isLoadingError?: boolean;
-    /**
-     * Текст ошибки при загрузке данных
-     */
-    loadingErrorMsg?: string;
-    /**
-     * Предназначен для конфигурации всплывающего окна
-     */
-    dialogProps: Omit<DialogProps, 'open' | 'onClose'>;
-    /**
-     * Предназначен для конфигурации дерева опций
-     */
-    treeProps?: TreeLikeAutocompleteTreeProps;
-    /**
-     * Функция обработки нажатия на кнопку "Повторить запрос"
-     */
-    onRetry?: () => void;
-    /**
-     * Функция для поиска элементов по дереву, если не определено, то будет использован встроенный поиск
-     */
-    filterOptions?: (node: TreeListData, searchValue: string) => boolean;
-    /**
-     * Функция, которая запускается при выборе item
-     */
-    onChange?: (newValue: TreeLikeAutocompleteValue | undefined) => void;
-} & Omit<TextFieldProps, 'autoComplete' | 'defaultValue' | 'select' | 'error' | 'disabled' | 'multiline' | 'rows' | 'maxRows' | 'minRows' | 'SelectProps' | 'endAdornment' | 'onChange'>;
+import type { TreeLikeAutocompleteProps } from './types';
 export declare const TreeLikeAutocomplete: import("react").ForwardRefExoticComponent<Omit<TreeLikeAutocompleteProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/node/components/TreeLikeAutocomplete/types.d.ts

@@ -1,4 +1,6 @@
-import { type TreeListData } from '../Tree';
+import type { DialogProps } from '../Dialog';
+import type { TextFieldProps } from '../TextField';
+import { type TreeListData, type TreeListProps } from '../Tree';
 export type TreeLikeAutocompleteValue = string[];
 export type TreeLikeListAutocompleteData = Omit<TreeListData, 'label' | 'children'> & {
     /**
@@ -10,3 +12,61 @@ export type TreeLikeListAutocompleteData = Omit<TreeListData, 'label' | 'childre
      */
     children?: TreeLikeListAutocompleteData[];
 };
+export type TreeLikeAutocompleteTreeProps = Pick<TreeListProps, 'disabledItems' | 'renderItem'>;
+export type TreeLikeAutocompleteProps = {
+    /**
+     * Выбранное значения
+     */
+    value?: TreeLikeAutocompleteValue;
+    /**
+     * Опции, которые необходимо отобразить в виде дерева.
+     */
+    options: TreeLikeListAutocompleteData[];
+    /**
+     * Если true, при выборе родителя будет возможность выбора дочерних элементов
+     * @default true
+     */
+    isConfirmChildrenSelection?: boolean;
+    /**
+     * Если true, поля будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Если true, поля будут подсвечены, как содержащие ошибку
+     */
+    isError?: boolean;
+    /**
+     * Флаг загрузки options
+     * Если true, вместо дерева options будет отображен лоадер
+     */
+    isLoading?: boolean;
+    /**
+     * Флаг ошибки загрузки options
+     * Если true, вместо дерева options будет отображен плейсхолдер с ошибкой
+     */
+    isLoadingError?: boolean;
+    /**
+     * Текст ошибки при загрузке данных
+     */
+    loadingErrorMsg?: string;
+    /**
+     * Предназначен для конфигурации всплывающего окна
+     */
+    dialogProps: Omit<DialogProps, 'open' | 'onClose'>;
+    /**
+     * Предназначен для конфигурации дерева опций
+     */
+    treeProps?: TreeLikeAutocompleteTreeProps;
+    /**
+     * Функция обработки нажатия на кнопку "Повторить запрос"
+     */
+    onRetry?: () => void;
+    /**
+     * Функция для поиска элементов по дереву, если не определено, то будет использован встроенный поиск
+     */
+    filterOptions?: (node: TreeListData, searchValue: string) => boolean;
+    /**
+     * Функция, которая запускается при выборе item
+     */
+    onChange?: (newValue: TreeLikeAutocompleteValue | undefined) => void;
+} & Omit<TextFieldProps, 'autoComplete' | 'defaultValue' | 'select' | 'error' | 'disabled' | 'multiline' | 'rows' | 'maxRows' | 'minRows' | 'SelectProps' | 'endAdornment' | 'onChange'>;

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

@@ -1,9 +1,9 @@
 import { type FocusEvent, type KeyboardEvent, type SyntheticEvent } from 'react';
-import { type TreeLikeAutocompleteProps } from '../TreeLikeAutocomplete';
+import type { TreeLikeAutocompleteProps } from '../types';
 type UseLogicProps = TreeLikeAutocompleteProps;
 export declare const useLogic: ({ value, options, onBlur }: UseLogicProps) => {
     inputProps: {
-        valueToRender: import("..").TreeLikeListAutocompleteData[] | undefined;
+        valueToRender: import("../types").TreeLikeListAutocompleteData[] | undefined;
         onBlur: (event: FocusEvent<HTMLInputElement>) => void;
         onClick: () => void;
         onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.0.0-alpha.28",
+  "version": "4.0.0-alpha.29",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {