@astral/ui 4.4.0 → 4.5.0

package/components/Checkbox/Icon/Icon.js

@@ -2,4 +2,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SvgIcon } from '../../SvgIcon';
 import { classNames } from '../../utils';
 import { checkboxClassnames } from '../constants';
-export const Icon = ({ ...props }) => (_jsxs(SvgIcon, { size: "sm", ...props, children: [_jsx("rect", { className: checkboxClassnames.outline, x: "0.5", y: "0.5", width: "15", height: "15", rx: "3.5" }), _jsx("path", { className: classNames(checkboxClassnames.symbol, checkboxClassnames.iconChecked), d: "M3.892 8.64a.75.75 0 0 1 1.003-1.112l.058.052 1.97 1.97 4.469-4.47.056-.052a.75.75 0 0 1 1.056 1.056l-.051.056-5 5a.75.75 0 0 1-1.061 0l-2.5-2.5Z" }), _jsx("path", { className: classNames(checkboxClassnames.symbol, checkboxClassnames.iconIndeterminate), d: "M12 7.25a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1 0-1.5h8Z" })] }));
+export const Icon = ({ ...props }) => (_jsxs(SvgIcon, { size: "sm", viewBox: "0 0 16 16", ...props, children: [_jsx("rect", { className: checkboxClassnames.outline, x: "0.5", y: "0.5", width: "15", height: "15", rx: "3.5" }), _jsx("path", { className: classNames(checkboxClassnames.symbol, checkboxClassnames.iconChecked), d: "M3.892 8.64a.75.75 0 0 1 1.003-1.112l.058.052 1.97 1.97 4.469-4.47.056-.052a.75.75 0 0 1 1.056 1.056l-.051.056-5 5a.75.75 0 0 1-1.061 0l-2.5-2.5Z" }), _jsx("path", { className: classNames(checkboxClassnames.symbol, checkboxClassnames.iconIndeterminate), d: "M12 7.25a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1 0-1.5h8Z" })] }));

package/components/Radio/Icon/Icon.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SvgIcon } from '../../SvgIcon';
 import { radioClassnames } from '../constants';
-export const Icon = ({ ...props }) => (_jsxs(SvgIcon, { size: "sm", ...props, children: [_jsx("circle", { cx: "8", cy: "8", r: "7.5", className: radioClassnames.outerCircle }), _jsx("circle", { cx: "8", cy: "8", r: "4", className: radioClassnames.dot, fill: "#fff" })] }));
+export const Icon = ({ ...props }) => (_jsxs(SvgIcon, { size: "sm", viewBox: "0 0 16 16", ...props, children: [_jsx("circle", { cx: "8", cy: "8", r: "7.5", className: radioClassnames.outerCircle }), _jsx("circle", { cx: "8", cy: "8", r: "4", className: radioClassnames.dot, fill: "#fff" })] }));

package/components/SvgIcon/SvgIcon.js

@@ -3,6 +3,6 @@ import { classNames } from '../utils';
 import { SIZES, svgIconClassnames } from './constants';
 import { StyledSvg } from './styles';
 export const SvgIcon = (props) => {
-    const { children, color = 'inherit', titleAccess, size, width, height, viewBox = size === 'sm' ? '0 0 16 16' : '0 0 24 24', xmlns = 'http://www.w3.org/2000/svg', className, ...restProps } = props;
+    const { children, color = 'inherit', titleAccess, size, width, height, viewBox = '0 0 24 24', xmlns = 'http://www.w3.org/2000/svg', className, ...restProps } = props;
     return (_jsxs(StyledSvg, { className: classNames(className, svgIconClassnames.root), viewBox: viewBox, "aria-hidden": titleAccess ? undefined : true, role: titleAccess ? 'img' : undefined, xmlns: xmlns, color: color, width: SIZES[size] || width || '1em', height: SIZES[size] || height || '1em', ...restProps, children: [children, titleAccess ? _jsx("title", { children: titleAccess }) : null] }));
 };

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { type MultipleTreeListProps } from './types';
+import { type MultipleTreeListProps, type MultipleValue } from './types';
 export type { MultipleTreeListProps };
-export declare const MultipleTreeList: ({ data, value, className, expandedLevel, disabledItems, ...props }: MultipleTreeListProps) => JSX.Element;
+export declare const MultipleTreeList: <TValue extends MultipleValue = string[]>({ data, value, className, expandedLevel, disabledItems, ...props }: MultipleTreeListProps<TValue>) => JSX.Element;

package/components/Tree/MultipleTreeList/MultipleTreeList.js

@@ -5,5 +5,5 @@ import { useLogic } from './useLogic';
 const INITIAL_LEVEL = 0;
 export const MultipleTreeList = ({ data, value, className, expandedLevel = 10, disabledItems, ...props }) => {
     const { formattedDisabledItems } = useLogic({ disabledItems });
-    return (_jsx(List, { className: className, children: data.map((item) => (_jsx(TreeItem, { value: value, ...item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, disabledItems: formattedDisabledItems, ...props }, item.id))) }));
+    return (_jsx(List, { className: className, children: data.map((item) => (_jsx(TreeItem, { item: item, value: value, level: INITIAL_LEVEL, expandedLevel: expandedLevel, disabledItems: formattedDisabledItems, ...props }, item.id))) }));
 };

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

@@ -1,15 +1,16 @@
 import { type FunctionComponent } from 'react';
 import type { TreeListData } from '../../types';
 import type { MultipleValue } from '../types';
-type FormatDisableItem = {
+export type FormatDisableItem = {
     id: string;
     disabledReason?: string;
 };
-export type TreeItemProps = TreeListData & {
+export type TreeItemProps<TValue extends MultipleValue = string[]> = {
+    item: TreeListData;
     /**
      * Выбранные значения
      */
-    value?: MultipleValue;
+    value?: TValue;
     /**
      * Render-props, позволяет более гибко настраивать содержимое item
      */
@@ -34,7 +35,10 @@ export type TreeItemProps = TreeListData & {
     /**
      * Функция, которая запускается при выборе item
      */
-    onChange: (value: MultipleValue) => void;
+    onChange: (value: TValue) => void;
+    /**
+     *  Переключает компонент в режим работы с объектами а не с id элементов
+     */
+    isObjectMode?: boolean;
 };
-export declare const TreeItem: (props: TreeItemProps) => JSX.Element;
-export {};
+export declare const TreeItem: <TValue extends MultipleValue = string[]>(props: TreeItemProps<TValue>) => JSX.Element;

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

@@ -4,12 +4,13 @@ import { List, StyledCheckbox, StyledTreeItem } from './styles';
 import { useLogic } from './useLogic';
 export const TreeItem = (props) => {
     const { isSelected, isIndeterminate, isDefaultExpanded, disabledReason, isDisabled, handleChange, } = useLogic(props);
-    const { id, label, note, level, renderItem, children = [], value, isInitialExpanded, expandedLevel, disabledItems, options, onChange, } = props;
+    const { level, renderItem, value, isInitialExpanded, expandedLevel, disabledItems, onChange, item, isObjectMode, } = props;
+    const { id, label, note, children = [], options } = item;
     const handleClick = (event) => {
         event.stopPropagation();
     };
     if (children.length) {
-        return (_jsx(StyledTreeItem, { isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: _jsx(FormControlLabel, { control: _jsx(StyledCheckbox, { checked: isSelected, indeterminate: isSelected ? false : isIndeterminate }), label: renderItem ? renderItem({ label, note, id }) : label, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange, children: _jsx(List, { children: children.map((child) => (_jsx(TreeItem, { ...child, renderItem: renderItem, level: level + 1, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, disabledItems: disabledItems, value: value, onChange: onChange }, child.id))) }) }));
+        return (_jsx(StyledTreeItem, { isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: _jsx(FormControlLabel, { control: _jsx(StyledCheckbox, { checked: isSelected, indeterminate: isSelected ? false : isIndeterminate }), label: renderItem ? renderItem({ label, note, id }) : label, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange, children: _jsx(List, { children: children.map((child) => (_jsx(TreeItem, { item: child, renderItem: renderItem, level: level + 1, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, disabledItems: disabledItems, value: value, onChange: onChange, isObjectMode: isObjectMode }, child.id))) }) }));
     }
     return (_jsx(StyledTreeItem, { isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: _jsx(FormControlLabel, { control: _jsx(StyledCheckbox, { checked: isSelected }), label: renderItem ? renderItem({ label, note, id }) : label, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange }));
 };

package/components/Tree/MultipleTreeList/TreeItem/useLogic/useLogic.d.ts

@@ -1,6 +1,7 @@
+import type { MultipleValue } from '../../types';
 import { type TreeItemProps } from '../TreeItem';
-type UseLogicProps = TreeItemProps;
-export declare const useLogic: ({ id, value, children, level, isInitialExpanded, expandedLevel, disabledItems, onChange, }: UseLogicProps) => {
+type UseLogicProps<TValue extends MultipleValue = string[]> = TreeItemProps<TValue>;
+export declare const useLogic: <TValue extends MultipleValue = string[]>({ item, value, level, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }: UseLogicProps<TValue>) => {
     isSelected: boolean;
     isIndeterminate: boolean;
     isDefaultExpanded: boolean | undefined;

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

@@ -1,38 +1,44 @@
 import { useEffect, useMemo } from 'react';
-import { checkIsIndeterminate, checkIsSelected, getAllChildrenId, } from './utils';
-export const useLogic = ({ id, value = [], children, level, isInitialExpanded, expandedLevel, disabledItems, onChange, }) => {
+import { checkIsIndeterminate, checkIsSelected, getAllChildrenId, getIdFromValue, getItemsToAdd, } from './utils';
+export const useLogic = ({ item, value = [], level, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }) => {
+    const { id, children } = item;
     const childrenIds = useMemo(() => getAllChildrenId(children, disabledItems), [children, disabledItems]);
     const isSelected = checkIsSelected(value, id);
     const isIndeterminate = checkIsIndeterminate(value, childrenIds);
     const isDefaultExpanded = isInitialExpanded && level <= expandedLevel - 1;
-    const disabledItem = disabledItems?.find((item) => item.id === id);
+    const disabledItem = disabledItems?.find((formatDisableItem) => formatDisableItem.id === id);
     const isDisabled = Boolean(disabledItem);
     const disabledReason = disabledItem?.disabledReason;
     useEffect(() => {
         if (!childrenIds.length) {
             return undefined;
         }
-        const isEveryChildChecked = childrenIds.every((childrenId) => value?.includes(childrenId));
+        const isEveryChildChecked = childrenIds.every((childrenId) => value?.some((treeItem) => getIdFromValue(treeItem) === childrenId));
         if (!isSelected && isEveryChildChecked) {
-            onChange([...value, id]);
+            const addItem = isObjectMode ? item : id;
+            const newValue = value ? [...value, addItem] : [addItem];
+            onChange(newValue);
         }
         if (isSelected && !isEveryChildChecked) {
-            onChange(value.filter((selectedId) => selectedId !== id));
+            const removeItem = value?.filter((selectedItem) => getIdFromValue(selectedItem) !== id);
+            onChange(removeItem);
         }
-    }, [value, childrenIds]);
+    }, [value, childrenIds, isSelected]);
     const handleChange = () => {
-        if (children) {
-            if (value.includes(id)) {
-                return onChange(value.filter((selectedId) => ![id, ...childrenIds].includes(selectedId)));
-            }
-            onChange([...value, id, ...childrenIds]);
-        }
-        else {
-            if (value.includes(id)) {
-                return onChange(value.filter((selectedId) => selectedId !== id));
-            }
-            onChange([...value, id]);
+        const isValueIncludesId = value?.some((treeItem) => getIdFromValue(treeItem) === id);
+        if (isValueIncludesId) {
+            // Удаление элемента и всех его дочерних элементов
+            const idsToRemove = children ? [id, ...childrenIds] : [id];
+            const filteredValue = value?.filter((selectedItem) => {
+                const selectedId = getIdFromValue(selectedItem);
+                return !idsToRemove.includes(selectedId);
+            });
+            return onChange(filteredValue);
         }
+        // Добавление элемента и всех его дочерних элементов
+        const itemsToAdd = getItemsToAdd(item, children, childrenIds, isObjectMode);
+        const newValue = value ? [...value, ...itemsToAdd] : itemsToAdd;
+        onChange(newValue);
     };
     return {
         isSelected,

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/checkIsIndeterminate/checkIsIndeterminate.d.ts

@@ -1 +1,2 @@
-export declare const checkIsIndeterminate: (value: string[] | undefined, childrenIds: string[] | undefined) => boolean;
+import type { MultipleValue } from '../../../../types';
+export declare const checkIsIndeterminate: <TValue extends MultipleValue = string[]>(value: TValue, childrenIds: string[] | undefined) => boolean;

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/checkIsIndeterminate/checkIsIndeterminate.js

@@ -1,6 +1,7 @@
+import { getIdFromValue } from '../getIdFromValue';
 export const checkIsIndeterminate = (value, childrenIds) => {
     if (!value || !childrenIds) {
         return false;
     }
-    return value.some((item) => childrenIds.includes(item));
+    return value.some((item) => childrenIds.includes(getIdFromValue(item)));
 };

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/checkIsSelected/checkIsSelected.d.ts

@@ -1 +1,2 @@
-export declare const checkIsSelected: (value: string[] | undefined, optionId: string) => boolean;
+import type { MultipleValue } from '../../../../types';
+export declare const checkIsSelected: <TValue extends MultipleValue = string[]>(value: TValue, optionId: string) => boolean;

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/checkIsSelected/checkIsSelected.js

@@ -1,6 +1,7 @@
+import { getIdFromValue } from '../getIdFromValue';
 export const checkIsSelected = (value, optionId) => {
     if (!value || !value.length) {
         return false;
     }
-    return value.includes(optionId);
+    return value.some((item) => getIdFromValue(item) === optionId);
 };

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/findObjectsByIds/findObjectsByIds.d.ts

@@ -0,0 +1,5 @@
+import type { TreeListData } from '../../../../../types';
+/**
+ * Находит объекты TreeListData в дереве по массиву ID
+ */
+export declare const findObjectsByIds: (nodes: TreeListData[], ids: string[]) => TreeListData[];

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/findObjectsByIds/findObjectsByIds.js

@@ -0,0 +1,22 @@
+/**
+ * Находит объекты TreeListData в дереве по массиву ID
+ */
+export const findObjectsByIds = (nodes, ids) => {
+    if (!ids.length) {
+        return [];
+    }
+    // Создаем Map для быстрого поиска объектов по ID
+    const idToObjectMap = new Map();
+    const traverse = (items) => {
+        for (const item of items) {
+            idToObjectMap.set(item.id, item);
+            if (item.children) {
+                traverse(item.children);
+            }
+        }
+    };
+    traverse(nodes);
+    return ids
+        .map((id) => idToObjectMap.get(id))
+        .filter((obj) => obj !== undefined);
+};

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/findObjectsByIds/index.d.ts

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

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/findObjectsByIds/index.js

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

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/getIdFromValue/getIdFromValue.d.ts

@@ -0,0 +1,5 @@
+import type { TreeListData } from '../../../../../types';
+/**
+ * Получает Id из значения, которое может быть строкой или объектом TreeListData
+ */
+export declare const getIdFromValue: (item: string | TreeListData) => string;

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/getIdFromValue/getIdFromValue.js

@@ -0,0 +1,6 @@
+/**
+ * Получает Id из значения, которое может быть строкой или объектом TreeListData
+ */
+export const getIdFromValue = (item) => {
+    return typeof item === 'string' ? item : item.id;
+};

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/getIdFromValue/index.d.ts

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

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/getIdFromValue/index.js

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

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/getItemsToAdd/getItemsToAdd.d.ts

@@ -0,0 +1,5 @@
+import type { TreeListData } from '../../../../../types';
+/**
+ * Формирует массив элементов для добавления в зависимости от режима работы
+ */
+export declare const getItemsToAdd: (item: TreeListData, children: TreeListData[] | undefined, childrenIds: string[], isObjectMode: boolean | undefined) => (string | TreeListData)[];

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/getItemsToAdd/getItemsToAdd.js

@@ -0,0 +1,14 @@
+import { findObjectsByIds } from '../findObjectsByIds';
+/**
+ * Формирует массив элементов для добавления в зависимости от режима работы
+ */
+export const getItemsToAdd = (item, children, childrenIds, isObjectMode) => {
+    if (!children) {
+        return isObjectMode ? [item] : [item.id];
+    }
+    if (isObjectMode) {
+        const childrenObjects = findObjectsByIds(children, childrenIds);
+        return [item, ...childrenObjects];
+    }
+    return [item.id, ...childrenIds];
+};

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/getItemsToAdd/index.d.ts

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

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/getItemsToAdd/index.js

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

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/index.d.ts

@@ -1,3 +1,6 @@
 export { checkIsIndeterminate } from './checkIsIndeterminate';
 export { checkIsSelected } from './checkIsSelected';
 export { getAllChildrenId } from './getAllChildrenId';
+export { findObjectsByIds } from './findObjectsByIds';
+export { getIdFromValue } from './getIdFromValue';
+export { getItemsToAdd } from './getItemsToAdd';

package/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/index.js

@@ -1,3 +1,6 @@
 export { checkIsIndeterminate } from './checkIsIndeterminate';
 export { checkIsSelected } from './checkIsSelected';
 export { getAllChildrenId } from './getAllChildrenId';
+export { findObjectsByIds } from './findObjectsByIds';
+export { getIdFromValue } from './getIdFromValue';
+export { getItemsToAdd } from './getItemsToAdd';

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

@@ -1,15 +1,15 @@
 import { type FunctionComponent } from 'react';
 import type { TreeListData } from '../types';
-export type MultipleValue = string[] | undefined;
+export type MultipleValue = TreeListData[] | string[] | undefined;
 export type DisabledItemValue = string | {
     id: string;
     disabledReason?: string;
 };
-export type MultipleTreeListProps = {
+export type MultipleTreeListProps<TValue extends MultipleValue = string[]> = {
     /**
      * Выбранные значения
      */
-    value?: MultipleValue;
+    value?: TValue;
     /**
      * Данные, которые необходимо отобразить в виде дерева.
      */
@@ -39,5 +39,9 @@ export type MultipleTreeListProps = {
     /**
      * Функция, которая запускается при изменении состояния.
      */
-    onChange: (value: MultipleValue) => void;
+    onChange: (value: TValue) => void;
+    /**
+     *  Переключает компонент в режим работы с объектами а не с id элементов
+     */
+    isObjectMode?: boolean;
 };

package/components/TreeAsyncAutocomplete/types.d.ts

@@ -1,5 +1,8 @@
 import type { TreeListData } from '../Tree';
 import type { TreeAutocompleteProps } from '../TreeAutocomplete';
+/**
+ * Значение элемента дерева для TreeAsyncAutocomplete
+ */
 export type TreeAsyncAutocompleteValue = Omit<TreeListData, 'label' | 'note' | 'children'> & {
     /**
      * Заголовок элемента дерева
@@ -14,12 +17,21 @@ export type TreeAsyncAutocompleteValue = Omit<TreeListData, 'label' | 'note' | '
      */
     children?: TreeAsyncAutocompleteValue[];
 };
+/**
+ * Результат функции загрузки опций
+ */
 export type FetchOptionsResult = {
     /**
      * Элементы дерева
      */
     options: TreeAsyncAutocompleteValue[];
+    /**
+     * Метаданные результата загрузки
+     */
     meta?: {
+        /**
+         * Флаг, указывающий, что все данные загружены
+         */
         isAllDataLoaded: boolean;
     };
 };
@@ -47,13 +59,13 @@ export type TreeAsyncAutocompleteProps = Omit<TreeAutocompleteProps, 'options' |
      * @example
      ```typescript
      * const fetchOptions = async (search: string, signal?: AbortSignal) => {
-     *   const response = await fetch(`/api/nodes/search?query=${search}`, {
+     *   const response = await fetch(`/api/options/search?query=${search}`, {
      *     signal
      *   });
      *   const data = await response.json();
      *
      *   return {
-     *     nodes: data.items,
+     *     options: data.items,
      *     meta: {
      *       isAllDataLoaded: data.isAllDataLoaded,
      *     }

package/components/TreeLikeAsyncAutocomplete/Input/Input.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { InputProps } from './types';
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/components/TreeLikeAsyncAutocomplete/Input/Input.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { CrossOutlineMd, DownOutlineMd } from '../../../icons';
+import { IconButton } from '../../IconButton';
+import { Loader } from '../../Loader';
+import { CLEAR_TEXT } from './constants';
+import { IconWrapper, StyledTagsList, StyledTextField } from './styles';
+import { useLogic } from './useLogic';
+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(({ disabled, onChange: propsOnChange, value, inputRef, hideHelperText = false, onClick, isLoading, ...restProps }, forwardedRef) => {
+    const { isVisibleClearButton, onChange, isVisibleTagsList, textFieldProps, onClearAll, } = useLogic({
+        inputRef,
+        value,
+        onChange: propsOnChange,
+        disabled,
+        onClick,
+        isLoading,
+    });
+    return (_jsx(StyledTextField, { ...restProps, hideHelperText: hideHelperText, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, ...textFieldProps, startAdornment: isVisibleTagsList && (_jsx(StyledTagsList, { data: value, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: onChange })), endAdornment: _jsxs(IconWrapper, { children: [isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: onClearAll })), isLoading ? (_jsx(Loader, { size: "small" })) : (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, children: _jsx(DownOutlineMd, {}) }))] }) }));
+});

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

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

package/components/TreeLikeAsyncAutocomplete/Input/constants.js

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

package/components/TreeLikeAsyncAutocomplete/Input/index.d.ts

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

package/components/TreeLikeAsyncAutocomplete/Input/index.js

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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledTextField: import("@emotion/styled").StyledComponent<Omit<import("../../TextField").TextFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isHidden: boolean;
+}, {}, {}>;
+export declare const StyledTagsList: <TData extends import("../../TagsList").TagValue>(props: import("../../TagsList").TagsListProps<TData>) => JSX.Element;
+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/TreeLikeAsyncAutocomplete/Input/styles.js

@@ -0,0 +1,27 @@
+import { formControlClasses, inputBaseClasses } from '@mui/material';
+import { loaderClassnames } from '../../Loader';
+import { svgIconClassnames } from '../../SvgIcon';
+import { styled } from '../../styles';
+import { TagsList } from '../../TagsList';
+import { TextField } from '../../TextField';
+export const StyledTextField = styled(TextField, {
+    shouldForwardProp: (prop) => !['$isHidden'].includes(prop),
+}) `
+  .${inputBaseClasses.input} {
+    width: ${({ $isHidden }) => $isHidden && 0};
+  }
+
+  &.${formControlClasses.root} .${inputBaseClasses.adornedEnd} .${loaderClassnames.root} .${svgIconClassnames.root} {
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const StyledTagsList = styled(TagsList) `
+  overflow: hidden;
+
+  width: 100%;
+`;
+export const IconWrapper = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;

package/components/TreeLikeAsyncAutocomplete/Input/types.d.ts

@@ -0,0 +1,7 @@
+import type { TextFieldProps } from '../../TextField';
+import type { TreeLikeAsyncAutocompleteValue } from '../types';
+export type InputProps = Omit<TextFieldProps, 'onChange' | 'value'> & {
+    onChange?: (value?: TreeLikeAsyncAutocompleteValue) => void;
+    value?: TreeLikeAsyncAutocompleteValue;
+    isLoading?: boolean;
+};

package/components/TreeLikeAsyncAutocomplete/Input/types.js

@@ -0,0 +1 @@
+export {};

package/components/TreeLikeAsyncAutocomplete/Input/useLogic/index.d.ts

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

package/components/TreeLikeAsyncAutocomplete/Input/useLogic/index.js

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

package/components/TreeLikeAsyncAutocomplete/Input/useLogic/useLogic.d.ts

@@ -0,0 +1,18 @@
+import { type MouseEvent, type SyntheticEvent } from 'react';
+import { type TreeLikeAsyncAutocompleteValue } from '../../types';
+import type { InputProps } from '../types';
+type UseLogicParams = Pick<InputProps, 'value' | 'disabled' | 'inputRef' | 'onChange' | 'isLoading' | 'onClick'>;
+export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, onChange: propsOnChange, onClick: propsOnClick, }: UseLogicParams) => {
+    isVisibleClearButton: boolean;
+    onClearAll: (event: SyntheticEvent<HTMLButtonElement>) => void;
+    onChange: (newValue: TreeLikeAsyncAutocompleteValue | undefined) => void;
+    onClick: (event: MouseEvent<HTMLDivElement>) => void;
+    isVisibleTagsList: boolean;
+    textFieldProps: {
+        value: string;
+        $isHidden: boolean;
+        inputRef: import("react").RefObject<HTMLInputElement>;
+        onClick: (event: MouseEvent<HTMLDivElement>) => void;
+    };
+};
+export {};

package/components/TreeLikeAsyncAutocomplete/Input/useLogic/useLogic.js

@@ -0,0 +1,50 @@
+import { useEffect, useRef, } from 'react';
+import { useForwardedRef } from '../../../hooks';
+export const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onChange: propsOnChange, onClick: propsOnClick, }) => {
+    const inputRef = useForwardedRef(externalInputRef);
+    const prevValue = useRef(undefined);
+    useEffect(() => {
+        if (value && !prevValue.current) {
+            prevValue.current = value;
+        }
+        if (!value && prevValue.current) {
+            inputRef.current?.focus();
+            prevValue.current = undefined;
+        }
+    }, [value]);
+    const prepareValue = () => {
+        if (!value || (Array.isArray(value) && !value.length)) {
+            return '';
+        }
+        return value.map((item) => item.label).join(', ');
+    };
+    const preparedValue = prepareValue();
+    const hasValue = Boolean(preparedValue);
+    const onChange = (newValue) => {
+        propsOnChange?.(newValue);
+    };
+    const onClearAll = (event) => {
+        event.stopPropagation();
+        onChange?.([]);
+        inputRef.current?.focus();
+    };
+    const onClick = (event) => {
+        if (!isLoading) {
+            propsOnClick?.(event);
+        }
+    };
+    const isVisibleClearButton = !disabled && !isLoading && Boolean(value?.length);
+    return {
+        isVisibleClearButton,
+        onClearAll,
+        onChange,
+        onClick,
+        isVisibleTagsList: hasValue,
+        textFieldProps: {
+            value: preparedValue,
+            $isHidden: hasValue,
+            inputRef,
+            onClick,
+        },
+    };
+};

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type Props = {
+    /**
+     * Текст ошибки при загрузке данных
+     */
+    loadingErrorMsg?: string;
+    /**
+     * Функция обработки нажатия на кнопку "Повторить запрос"
+     */
+    onRetry?: () => void;
+};
+export declare const ErrorMessage: ({ loadingErrorMsg, onRetry, }: Props) => JSX.Element;
+export {};

package/components/TreeLikeAsyncAutocomplete/OptionsModal/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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" })] }));

package/components/TreeLikeAsyncAutocomplete/OptionsModal/ErrorMessage/index.d.ts

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/ErrorMessage/index.js

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Wrapper: 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/TreeLikeAsyncAutocomplete/OptionsModal/ErrorMessage/styles.js

@@ -0,0 +1,10 @@
+import { styled } from '../../../styles';
+export const Wrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+`;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Loader: () => JSX.Element;

package/components/TreeLikeAsyncAutocomplete/OptionsModal/Loader/Loader.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader as AstralUILoader } from '../../../Loader';
+import { Wrapper } from './styles';
+export const Loader = () => (_jsx(Wrapper, { children: _jsx(AstralUILoader, {}) }));