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

package/components/Checkbox/Checkbox.js

@@ -6,5 +6,5 @@ import { IconWrapper, Input, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const Checkbox = forwardRef((props, ref) => {
     const { onChange, color, isChecked, indeterminate, isError, disabled, restProps, className, role, style, name, inputRef, value, id, } = useLogic(props);
-    return (_jsxs(Wrapper, Object.assign({ role: role, "$isDisabled": disabled, "$isError": isError, "$isChecked": isChecked, "$isIndeterminate": indeterminate, className: className, style: style, ref: ref }, restProps, { children: [_jsx(Input, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: onChange, "aria-checked": indeterminate ? 'mixed' : isChecked, "aria-disabled": disabled, name: name, ref: inputRef, value: value, id: id }), _jsx(IconWrapper, { className: checkboxClassnames.iconWrapper, children: _jsx(Icon, { className: checkboxClassnames.icon, color: color }) })] })));
+    return (_jsxs(Wrapper, Object.assign({ role: role, "$isDisabled": disabled, "$isError": isError, "$isChecked": isChecked, "$isIndeterminate": indeterminate, className: className, style: style, ref: ref }, restProps, { children: [_jsx(Input, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: onChange, "aria-checked": indeterminate ? 'mixed' : isChecked, "aria-disabled": disabled, name: name, ref: inputRef, value: value, id: id, className: checkboxClassnames.input }), _jsx(IconWrapper, { className: checkboxClassnames.iconWrapper, children: _jsx(Icon, { className: checkboxClassnames.icon, color: color }) })] })));
 });

package/components/Checkbox/constants.d.ts

@@ -9,4 +9,7 @@ export declare const checkboxClassnames: {
     symbol: string;
     iconChecked: string;
     iconIndeterminate: string;
+    input: string;
 };
+export declare const CHECKBOX_SIZE = "32px";
+export declare const MOBILE_CHECKBOX_SIZE = "40px";

package/components/Checkbox/constants.js

@@ -10,4 +10,7 @@ export const checkboxClassnames = {
     symbol: createUIKitClassname('checkbox__symbol'),
     iconChecked: createUIKitClassname('checkbox__icon_checked'),
     iconIndeterminate: createUIKitClassname('checkbox__icon_indeterminate'),
+    input: createUIKitClassname('checkbox__input'),
 };
+export const CHECKBOX_SIZE = '32px';
+export const MOBILE_CHECKBOX_SIZE = '40px';

package/components/Checkbox/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Checkbox';
 export type { CheckboxProps } from './types';
-export { checkboxClassnames } from './constants';
+export { checkboxClassnames, CHECKBOX_SIZE, MOBILE_CHECKBOX_SIZE, } from './constants';

package/components/Checkbox/index.js

@@ -1,2 +1,2 @@
 export * from './Checkbox';
-export { checkboxClassnames } from './constants';
+export { checkboxClassnames, CHECKBOX_SIZE, MOBILE_CHECKBOX_SIZE, } from './constants';

package/components/Checkbox/styles.js

@@ -1,6 +1,6 @@
 import { styled } from '../styles';
 import { easeOutBackTransition } from '../styles/mixins';
-import { checkboxClassnames } from './constants';
+import { CHECKBOX_SIZE, checkboxClassnames, MOBILE_CHECKBOX_SIZE, } from './constants';
 const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, isIndeterminate, }) => {
     if (isDisabled) {
         return theme.palette.grey[300];
@@ -19,19 +19,18 @@ export const Wrapper = styled('span', {
   display: flex;
   justify-content: center;
 
-  .${checkboxClassnames.icon} {    
+  .${checkboxClassnames.icon} {
     fill: ${({ $isDisabled, theme }) => $isDisabled && theme.palette.components.disabled};
   }
 
   .${checkboxClassnames.symbol} {
-    fill: ${({ $isDisabled, theme }) => ($isDisabled ? theme.palette.grey[500] : 'white')};
+    fill: ${({ $isDisabled, theme }) => $isDisabled ? theme.palette.grey[500] : 'white'};
 
     ${easeOutBackTransition};
-
   }
-  
+
   .${checkboxClassnames.outline} {
-    fill: ${({ $isDisabled, $isChecked, $isIndeterminate }) => (!$isDisabled && !$isChecked && !$isIndeterminate) && 'white'};
+    fill: ${({ $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled && !$isChecked && !$isIndeterminate && 'white'};
     stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
     theme,
     isHover: false,
@@ -42,30 +41,31 @@ export const Wrapper = styled('span', {
 })};
 
     ${easeOutBackTransition};
-
   }
 
   .${checkboxClassnames.iconChecked} {
     transform-origin: bottom;
-    transform: ${({ $isChecked, $isIndeterminate }) => ($isChecked && !$isIndeterminate ? 'scale(1)' : 'scale(0)')};
+    transform: ${({ $isChecked, $isIndeterminate }) => $isChecked && !$isIndeterminate ? 'scale(1)' : 'scale(0)'};
 
-    opacity: ${({ $isChecked, $isIndeterminate }) => ($isChecked && !$isIndeterminate ? 1 : 0)};
+    opacity: ${({ $isChecked, $isIndeterminate }) => $isChecked && !$isIndeterminate ? 1 : 0};
   }
-  
+
   .${checkboxClassnames.iconIndeterminate} {
     transform-origin: bottom;
-    transform: ${({ $isIndeterminate }) => ($isIndeterminate ? 'scale(1)' : 'scale(0)')};
+    transform: ${({ $isIndeterminate }) => $isIndeterminate ? 'scale(1)' : 'scale(0)'};
 
     opacity: ${({ $isIndeterminate }) => ($isIndeterminate ? 1 : 0)};
   }
-  
+
   &:hover {
     .${checkboxClassnames.icon} {
-      color: ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.primary[700]}
+      color: ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.primary[700]};
     }
-    
+
     .${checkboxClassnames.outline} {
-      fill: ${({ theme, $isDisabled, $isChecked, $isIndeterminate }) => (!$isDisabled && !$isChecked && !$isIndeterminate) &&
+      fill: ${({ theme, $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled &&
+    !$isChecked &&
+    !$isIndeterminate &&
     theme.palette.background.elementHover};
       stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
     theme,
@@ -80,22 +80,22 @@ export const Wrapper = styled('span', {
 `;
 export const Input = styled.input `
   cursor: ${({ disabled }) => !disabled && 'pointer'};
-  
+
   position: absolute;
 
-  width: 32px;
-  height: 32px;
+  width: ${CHECKBOX_SIZE};
+  height: ${CHECKBOX_SIZE};
   margin: 0;
 
   opacity: 0;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    width: 40px;
-    height: 40px;
+    width: ${MOBILE_CHECKBOX_SIZE};
+    height: ${MOBILE_CHECKBOX_SIZE};
   }
 
   &:focus-visible {
-    ~.${checkboxClassnames.iconWrapper} > .${checkboxClassnames.icon} {
+    ~ .${checkboxClassnames.iconWrapper} > .${checkboxClassnames.icon} {
       border-radius: ${({ theme }) => theme.shape.small};
       outline: 2px solid ${({ theme }) => theme.palette.components.focused};
       outline-offset: -2px;
@@ -107,12 +107,12 @@ export const IconWrapper = styled.span `
   align-items: center;
   justify-content: center;
 
-  width: 32px;
-  height: 32px;
+  width: ${CHECKBOX_SIZE};
+  height: ${CHECKBOX_SIZE};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    width: 40px;
-    height: 40px;
+    width: ${MOBILE_CHECKBOX_SIZE};
+    height: ${MOBILE_CHECKBOX_SIZE};
 
     .${checkboxClassnames.icon} {
       width: 20px;

package/components/ScrollWrapper/ScrollWrapper.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+type ScrollWrapperProps = {
+    children: ReactNode;
+    shape?: 'small' | 'medium' | 'large';
+};
+export declare const ScrollWrapper: ({ children, shape, }: ScrollWrapperProps) => JSX.Element;
+export {};

package/components/ScrollWrapper/ScrollWrapper.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Wrapper } from './styles';
+export const ScrollWrapper = ({ children, shape = 'medium', }) => _jsx(Wrapper, { "$shape": shape, children: children });

package/components/ScrollWrapper/index.d.ts

@@ -0,0 +1 @@
+export * from './ScrollWrapper';

package/components/ScrollWrapper/index.js

@@ -0,0 +1 @@
+export * from './ScrollWrapper';

package/components/ScrollWrapper/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $shape: 'small' | 'medium' | 'large';
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/ScrollWrapper/styles.js

@@ -0,0 +1,7 @@
+import { styled } from '../styles';
+export const Wrapper = styled.div `
+  overflow: hidden;
+
+  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-radius: ${({ theme, $shape }) => theme.shape[$shape]};
+`;

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

@@ -1,17 +1,31 @@
-import { Checkbox } from '../../../Checkbox';
+import { formControlLabelClasses } from '@mui/material';
+import { CHECKBOX_SIZE, Checkbox, checkboxClassnames } from '../../../Checkbox';
 import { styled } from '../../../styles';
 import { listContainer } from '../../../styles/mixins';
 import { TreeItem, treeClassnames } from '../../TreeItem';
 export const StyledCheckbox = styled(Checkbox) `
   padding-top: 0;
   padding-bottom: 0;
+
+  & > .${checkboxClassnames.input}, .${checkboxClassnames.iconWrapper} {
+    width: 32px;
+    height: 16px;
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      height: 20px;
+    }
+  }
 `;
 export const StyledTreeItem = styled(TreeItem) `
+  .${formControlLabelClasses.root} .${formControlLabelClasses.label} {
+    margin-left: 0;
+  }
+
   .${treeClassnames.note} {
     /* cSpell:ignore чекбоксом */
 
     /* Добавляем к отступу ширину контейнера с чекбоксом */
-    margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + 32px)`};
+    margin-left: ${CHECKBOX_SIZE};
   }
 `;
 export const List = styled.ul `

package/components/Tree/MultipleTreeList/styles.d.ts

@@ -3,9 +3,3 @@ export declare const List: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const InnerList: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/components/Tree/MultipleTreeList/styles.js

@@ -4,6 +4,3 @@ export const List = styled.ul `
   ${listContainer};
   overflow: hidden;
 `;
-export const InnerList = styled(List) `
-  overflow: unset;
-`;

package/components/Tree/TreeItem/constants.d.ts

@@ -5,4 +5,5 @@ export declare const HALF_PADDING_COLLAPSE_BUTTON_WIDTH = "14px";
 export declare const TOOLTIP_PLACEMENT = "bottom-start";
 export declare const treeClassnames: {
     note: string;
+    label: string;
 };

package/components/Tree/TreeItem/constants.js

@@ -5,5 +5,6 @@ export const GAP_WIDTH = '4px';
 export const HALF_PADDING_COLLAPSE_BUTTON_WIDTH = '14px';
 export const TOOLTIP_PLACEMENT = 'bottom-start';
 export const treeClassnames = {
-    note: createUIKitClassname('tree__item__note'),
+    note: createUIKitClassname('tree-item__note'),
+    label: createUIKitClassname('tree-item__label'),
 };

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

@@ -45,10 +45,6 @@ export declare const ChevronIcon: import("@emotion/styled").StyledComponent<{
 } & {
     $isActive?: boolean | undefined;
 }, {}, {}>;
-export declare const List: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export declare const LabelWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/components/Tree/TreeItem/styles.js

@@ -1,13 +1,13 @@
-import { typographyClasses } from '@mui/material';
+import { svgIconClasses, typographyClasses } from '@mui/material';
 import { ChevronROutlineMd } from '../../../icons';
+import { buttonClasses } from '../../Button';
 import { descriptionClassnames } from '../../Description';
 import { IconButton } from '../../IconButton';
 import { OverflowTypography } from '../../OverflowTypography';
 import { styled } from '../../styles';
-import { listContainer } from '../../styles/mixins';
 import { Typography } from '../../Typography';
 import { COLLAPSE_BUTTON_WIDTH, GAP_WIDTH, HALF_PADDING_COLLAPSE_BUTTON_WIDTH, TREE_LINE_WIDTH, } from './constants';
-const getBackgroundColorOnHover = (theme, isSelected, isDisabled) => {
+const getBackgroundColor = (theme, isSelected, isDisabled) => {
     if (isDisabled) {
         return 'transparent';
     }
@@ -58,11 +58,11 @@ export const ItemContent = 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;
   }
@@ -79,6 +79,16 @@ export const CollapseButton = styled(IconButton, {
 
   color: ${({ theme, $isNotBlockingExpandList }) => $isNotBlockingExpandList ? theme.palette.text.primary : 'inherit'};
 
+  &.${buttonClasses.root} .${svgIconClasses.root}, &.${buttonClasses.root} {
+    width: 24px;
+    height: 24px;
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
   &:hover {
     background-color: ${({ theme }) => theme.palette.grey[300]};
   }
@@ -93,9 +103,6 @@ export const ChevronIcon = styled(ChevronROutlineMd, {
     duration: theme.transitions.duration.short,
 })};
 `;
-export const List = styled.ul `
-  ${listContainer};
-`;
 export const LabelWrapper = styled('div', {
     shouldForwardProp: (prop) => prop !== '$level',
 }) `

package/components/TreeAutocomplete/Input/Input.js

@@ -9,15 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { ChevronDOutlineMd, CircleErrorFillSm } from '../../../icons';
+import { CrossOutlineMd, DownOutlineMd } from '../../../icons';
+import { IconButton } from '../../IconButton';
 import { TextField } from '../../TextField';
-import { StyledIconButton } from './styles';
+import { CLEAR_TEXT } from './constants';
+import { IconWrapper } from './styles';
 import { useLogic } from './useLogic';
-const ClearButton = ({ disabled, onClick }) => (_jsx(StyledIconButton, { variant: "text", disabled: disabled, onClick: onClick, children: _jsx(CircleErrorFillSm, {}) }));
+const ClearButton = ({ disabled, onClick }) => (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, onClick: onClick, title: CLEAR_TEXT, "aria-label": CLEAR_TEXT, children: _jsx(CrossOutlineMd, {}) }));
 export const Input = forwardRef((props, forwardedRef) => {
     const { inputRef, isVisibleClearButton, handleClearAll } = useLogic(props);
     const { disabled, onChange } = props, restProps = __rest(props, ["disabled", "onChange"]);
-    return (_jsx(TextField, Object.assign({}, restProps, { ref: forwardedRef, inputRef: inputRef, disabled: disabled, inputProps: { readOnly: true }, endAdornment: _jsxs(_Fragment, { children: [isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: handleClearAll })), _jsx(ChevronDOutlineMd, {})] }) })));
+    return (_jsx(TextField, Object.assign({}, restProps, { ref: forwardedRef, inputRef: inputRef, disabled: disabled, inputProps: { readOnly: true }, endAdornment: _jsxs(IconWrapper, { children: [isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: handleClearAll })), _jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, children: _jsx(DownOutlineMd, {}) })] }) })));
 });

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

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

package/components/TreeAutocomplete/Input/constants.js

@@ -0,0 +1 @@
+export const CLEAR_TEXT = 'Очистить';

package/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/components/TreeAutocomplete/Input/styles.js

@@ -1,20 +1,5 @@
-import { IconButton } from '../../IconButton';
 import { styled } from '../../styles';
-export const StyledIconButton = styled(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']};
-    }
-  }
+export const IconWrapper = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
 `;

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

@@ -3,4 +3,4 @@ import { Button } from '../../../Button';
 import { Typography } from '../../../Typography';
 import { Wrapper } from './styles';
 const DEFAULT_ERROR_MSG = 'Не удалось загрузить данные';
-export const ErrorMessage = ({ loadingErrorMsg = DEFAULT_ERROR_MSG, onRetry, }) => (_jsxs(Wrapper, { children: [_jsx(Typography, { color: "textSecondary", children: loadingErrorMsg }), onRetry && _jsx(Button, { onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })] }));
+export const ErrorMessage = ({ loadingErrorMsg = DEFAULT_ERROR_MSG, onRetry, }) => (_jsxs(Wrapper, { children: [_jsx(Typography, { color: "grey", children: loadingErrorMsg }), onRetry && (_jsx(Button, { onClick: onRetry, variant: "light", color: "grey", children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" }))] }));

package/components/TreeAutocomplete/OptionsModal/OptionsModal.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Button';
 import { Dialog } from '../../Dialog';
 import { DialogActions } from '../../DialogActions';
+import { ScrollWrapper } from '../../ScrollWrapper';
 import { SearchField } from '../../SearchField';
 import { TreeList } from '../../Tree';
 import { ErrorMessage } from './ErrorMessage';
@@ -35,5 +36,5 @@ export const OptionsModal = (props) => {
         }
         return _jsx(TreeList, Object.assign({}, treeProps, treeListProps));
     };
-    return (_jsxs(Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [_jsxs(StyledDialogContent, { children: [_jsx(SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), _jsx(TreeListWrapper, { children: renderComponent() })] }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), _jsx(Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
+    return (_jsxs(Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [_jsxs(StyledDialogContent, { children: [_jsx(SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), _jsx(ScrollWrapper, { children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), _jsx(Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
 };

package/components/TreeAutocomplete/OptionsModal/styles.js

@@ -4,17 +4,14 @@ export const StyledDialogContent = styled(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)};
 `;
 export const TreeListWrapper = 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/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/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/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/components/TreeLikeAutocomplete/Input/Input.js

@@ -11,14 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { ChevronDOutlineMd } from '../../../icons';
-import { Loader } from '../../Loader';
+import { CrossOutlineMd, DownOutlineMd } from '../../../icons';
+import { IconButton } from '../../IconButton';
 import { CLEAR_TEXT } from './constants';
-import { EndAdornmentWrapper, StyledCircleErrorFillSm, StyledIconButton, StyledTagsList, StyledTextField, } from './styles';
+import { EndAdornmentWrapper, StyledLoader, StyledTagsList, StyledTextField, } from './styles';
 import { useLogic } from './useLogic';
-const ClearButton = ({ disabled, onClick }) => (_jsx(StyledIconButton, { variant: "text", disabled: disabled, title: CLEAR_TEXT, "aria-label": CLEAR_TEXT, onClick: onClick, children: _jsx(StyledCircleErrorFillSm, {}) }));
+const ClearButton = ({ disabled, onClick }) => (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, title: CLEAR_TEXT, "aria-label": CLEAR_TEXT, onClick: onClick, children: _jsx(CrossOutlineMd, {}) }));
 export const Input = forwardRef((props, forwardedRef) => {
     const { textFieldProps, isVisibleTagsList, isVisibleClearButton, handleChange, handleClearAll, } = useLogic(props);
     const { value, valueToRender, disabled, isLoading, onChange, onClick } = props, restProps = __rest(props, ["value", "valueToRender", "disabled", "isLoading", "onChange", "onClick"]);
-    return (_jsx(StyledTextField, Object.assign({}, restProps, { ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, startAdornment: isVisibleTagsList && (_jsx(StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: _jsxs(EndAdornmentWrapper, { children: [isLoading && _jsx(Loader, {}), isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: handleClearAll })), _jsx(StyledIconButton, { variant: "text", disabled: disabled, children: _jsx(ChevronDOutlineMd, {}) })] }), onClick: onClick }, textFieldProps)));
+    return (_jsx(StyledTextField, Object.assign({}, restProps, { ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, startAdornment: isVisibleTagsList && (_jsx(StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: _jsxs(EndAdornmentWrapper, { children: [isLoading && _jsx(StyledLoader, {}), isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: handleClearAll })), _jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, children: _jsx(DownOutlineMd, {}) })] }), onClick: onClick }, textFieldProps)));
 });