@astral/ui 4.7.0 → 4.9.0

package/components/CheckableTag/styles.js

@@ -76,11 +76,11 @@ const getColor = ({ theme, isChecked, disabled, }) => {
     }
     return 'inherit';
 };
-const getBorder = ({ isChecked, variant, color, theme, tagState = 'default', }) => {
+const getBorder = ({ isChecked, variant, color, theme, disabled, tagState = 'default', }) => {
     if (variant === 'text' || color !== 'default') {
         return 'none';
     }
-    if (isChecked) {
+    if (isChecked || (disabled && variant === 'light')) {
         return '1px solid transparent';
     }
     if (tagState === 'default') {
@@ -104,7 +104,7 @@ export const StyledTag = styled(Tag, {
     `
     background-color: ${disabled ? theme.palette.grey[100] : theme.palette.grey[900]};
   `}
-  border: ${({ theme, variant, $isChecked, color }) => getBorder({ theme, variant, isChecked: $isChecked, color })};
+  border: ${({ theme, variant, $isChecked, color, disabled }) => getBorder({ theme, variant, isChecked: $isChecked, color, disabled })};
 
   .${tagClassnames.label} {
     color: ${({ theme, disabled, $isChecked }) => getColor({ theme, isChecked: $isChecked, disabled })};

package/components/NavMenu/Item/ItemButton/styles.js

@@ -17,8 +17,8 @@ export const StyledListItemButton = styled(ListItemButton, {
   overflow: hidden;
 
   box-sizing: border-box;
-  min-height: 36px;
-  padding: ${({ theme }) => theme.microSpacing(4, 4, 4, 5)};
+  min-height: 44px;
+  padding: ${({ theme }) => theme.microSpacing(6, 5)};
   
   border-radius: ${({ theme }) => theme.shape.small};
   
@@ -65,8 +65,8 @@ export const StyledListItemButton = styled(ListItemButton, {
   ${({ theme }) => theme.breakpoints.down('sm')} {
     overflow: hidden;
 
-    min-height: 44px;
-    padding: ${({ theme }) => theme.spacing(0, 4)};
+    min-height: 48px;
+    padding: ${({ theme }) => theme.spacing(3, 2, 3, 4)};
 
     border-radius: ${({ theme }) => theme.shape.small};
     

package/components/TreeLikeAsyncAutocomplete/OptionsModal/OptionsModal.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Button';
+import { CheckableTag } from '../../CheckableTag';
 import { Dialog } from '../../Dialog';
 import { DialogActions } from '../../DialogActions';
 import { Paper } from '../../Paper';
+import { TagBadge } from '../../TagBadge';
 import { TreeLikeList } from '../../TreeLikeList';
 import { Typography } from '../../Typography';
 import { SEARCH_FIELD_HELPER_TEXT } from './constants';
@@ -13,7 +15,7 @@ import { SearchSuggestion } from './SearchSuggestion';
 import { StyledDialogContent, StyledSearchField, TreeListWrapper, UserHintWrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const OptionsModal = (props) => {
-    const { isNoResult, searchFieldProps, modalProps, treeListProps, cancelButtonProps, confirmButtonProps, handleRetry, isShowUserHint, isShowModalLoader, isShowSearchFieldLoader, isShowSearchSuggestion, isLoadingError, treeProps, loadingErrorMsg, } = useLogic(props);
+    const { isNoResult, searchFieldProps, modalProps, treeListProps, cancelButtonProps, confirmButtonProps, handleRetry, isShowUserHint, isShowModalLoader, isShowSearchFieldLoader, isShowSearchSuggestion, isLoadingError, treeProps, loadingErrorMsg, badgeContent, checkableTagProps, isShowSelectedTree, selectedTreeProps, } = useLogic(props);
     const renderComponent = () => {
         if (isShowSearchSuggestion) {
             return _jsx(SearchSuggestion, {});
@@ -27,7 +29,10 @@ export const OptionsModal = (props) => {
         if (isNoResult) {
             return _jsx(NoData, {});
         }
+        if (isShowSelectedTree) {
+            return (_jsx(TreeLikeList, { ...treeProps, ...selectedTreeProps }));
+        }
         return (_jsx(TreeLikeList, { ...treeProps, ...treeListProps }));
     };
-    return (_jsxs(Dialog, { ...modalProps, children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: SEARCH_FIELD_HELPER_TEXT }), _jsx(Paper, { variant: "outlined", children: _jsxs(TreeListWrapper, { children: [renderComponent(), isShowUserHint && (_jsx(UserHintWrapper, { children: _jsx(Typography, { variant: "caption", color: "grey", colorIntensity: "600", children: "\u0423\u0442\u043E\u0447\u043D\u0438\u0442\u0435 \u0437\u0430\u043F\u0440\u043E\u0441 \u0434\u043B\u044F \u0431\u043E\u043B\u0435\u0435 \u043B\u0443\u0447\u0448\u0435\u0433\u043E \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0430 \u043F\u043E\u0438\u0441\u043A\u0430" }) }))] }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return (_jsxs(Dialog, { ...modalProps, children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: SEARCH_FIELD_HELPER_TEXT }), _jsx(CheckableTag, { ...checkableTagProps, endAddon: (badgeProps) => (_jsx(TagBadge, { ...badgeProps, badgeContent: badgeContent, showZero: true })) }), _jsx(Paper, { variant: "outlined", children: _jsxs(TreeListWrapper, { children: [renderComponent(), isShowUserHint && (_jsx(UserHintWrapper, { children: _jsx(Typography, { variant: "caption", color: "grey", colorIntensity: "600", children: "\u0423\u0442\u043E\u0447\u043D\u0438\u0442\u0435 \u0437\u0430\u043F\u0440\u043E\u0441 \u0434\u043B\u044F \u0431\u043E\u043B\u0435\u0435 \u043B\u0443\u0447\u0448\u0435\u0433\u043E \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0430 \u043F\u043E\u0438\u0441\u043A\u0430" }) }))] }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };

package/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.js

@@ -9,7 +9,7 @@ export const StyledDialogContent = styled(DialogContent, {
 }) `
   display: grid;
   grid-template-columns: 100%;
-  grid-template-rows: max-content 1fr;
+  grid-template-rows: max-content 32px 1fr;
   gap: ${({ theme }) => theme.spacing(4)};
 
   width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/hooks/index.d.ts

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/hooks/index.js

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/hooks/useSelectedTreeView/index.d.ts

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/hooks/useSelectedTreeView/index.js

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/hooks/useSelectedTreeView/useSelectedTreeView.d.ts

@@ -0,0 +1,20 @@
+import { type ChangeEvent } from 'react';
+import { type TreeListData } from '../../../../../Tree';
+import type { TreeLikeAsyncAutocompleteValue } from '../../../../types';
+type UseSelectedTreeViewParams = {
+    value?: TreeLikeAsyncAutocompleteValue;
+    searchValue?: string;
+    onInputChange: (value: string) => void;
+    onClearSearch: () => void;
+};
+type UseSelectedTreeViewResult = {
+    isShowSelectedTree: boolean;
+    setIsShowSelectedTree: (value: boolean) => void;
+    selectedTreeData: TreeLikeAsyncAutocompleteValue;
+    filteredSelectedTreeData: TreeListData[];
+    selectedTreeDataToRender: TreeListData[];
+    onChangeTreeView: (event: ChangeEvent<HTMLInputElement>) => void;
+    isNoResultInSelectedTree: boolean;
+};
+export declare const useSelectedTreeView: ({ value, searchValue, onInputChange, onClearSearch, }: UseSelectedTreeViewParams) => UseSelectedTreeViewResult;
+export {};

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/hooks/useSelectedTreeView/useSelectedTreeView.js

@@ -0,0 +1,67 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { deepMap } from '../../../../../utils/array';
+import { buildSelectedTree, findInTree, preserveNodeOrder } from '../../utils';
+const addIsForceExpandedFlag = (item) => {
+    if (item.children) {
+        return {
+            ...item,
+            options: { ...(item.options || {}), isForceExpanded: true },
+        };
+    }
+    return item;
+};
+export const useSelectedTreeView = ({ value, searchValue, onInputChange, onClearSearch, }) => {
+    const [isShowSelectedTree, setIsShowSelectedTree] = useState();
+    // Сохраняем порядок узлов
+    const nodeOrderRef = useRef(new Map());
+    // Строим дерево из выбранных элементов
+    const selectedTreeData = useMemo(() => {
+        if (!value || value.length === 0) {
+            nodeOrderRef.current.clear();
+            return [];
+        }
+        const tree = buildSelectedTree(value);
+        return preserveNodeOrder(tree, nodeOrderRef.current);
+    }, [value]);
+    // Применяем клиентский поиск к выбранным элементам
+    const filteredSelectedTreeData = useMemo(() => {
+        if (!isShowSelectedTree || !searchValue) {
+            return selectedTreeData;
+        }
+        return findInTree(selectedTreeData, searchValue);
+    }, [selectedTreeData, searchValue, isShowSelectedTree]);
+    // Определяем isNoResult для режима выбранных элементов
+    const isNoResultInSelectedTree = !searchValue || !isShowSelectedTree
+        ? false
+        : filteredSelectedTreeData.length === 0;
+    // Применяем флаг раскрытия для отфильтрованного дерева выбранных элементов
+    const selectedTreeDataToRender = useMemo(() => {
+        if (!searchValue || !isShowSelectedTree) {
+            return filteredSelectedTreeData;
+        }
+        return deepMap(filteredSelectedTreeData, 'children', addIsForceExpandedFlag);
+    }, [filteredSelectedTreeData, searchValue, isShowSelectedTree]);
+    const onChangeTreeView = (event) => {
+        const newIsShowSelectedTree = event.target.checked;
+        setIsShowSelectedTree(newIsShowSelectedTree);
+        onClearSearch();
+        if (!newIsShowSelectedTree) {
+            onInputChange('');
+        }
+    };
+    useEffect(() => {
+        // Когда все элементы убраны из выбранного дерева, возвращаемся на основное дерево
+        if (!value?.length) {
+            setIsShowSelectedTree(false);
+        }
+    }, [value]);
+    return {
+        isShowSelectedTree: isShowSelectedTree ?? false,
+        setIsShowSelectedTree,
+        selectedTreeData,
+        filteredSelectedTreeData,
+        selectedTreeDataToRender,
+        onChangeTreeView,
+        isNoResultInSelectedTree,
+    };
+};

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

@@ -1,4 +1,5 @@
 import { type ButtonProps } from '../../../Button';
+import { type CheckableTagProps } from '../../../CheckableTag';
 import { type DialogProps, type DialogSize } from '../../../Dialog';
 import { type SearchFieldProps } from '../../../SearchField';
 import { type TreeLikeListProps } from '../../../TreeLikeList';
@@ -22,6 +23,10 @@ type UseLogicResult = {
     treeProps?: Pick<TreeLikeListProps, 'disabledItems' | 'renderItem'>;
     isLoadingError?: boolean;
     loadingErrorMsg?: string;
+    badgeContent: number;
+    selectedTreeProps: TreeLikeListProps<TreeLikeAsyncAutocompleteValue>;
+    isShowSelectedTree?: boolean;
+    checkableTagProps: CheckableTagProps;
 };
 export declare const useLogic: ({ isOpen, initialValue, options, onChange, dialogProps, onInputChange, onRetry, meta, onShowUserHint, isLoadingModal, minSymbolsToFetch, isLoading, isLoadingError, loadingErrorMsg, treeProps, }: UseLogicParams) => UseLogicResult;
 export {};

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState, } from 'react';
 import { deepMap } from '../../../utils/array';
+import { useSelectedTreeView } from './hooks';
 export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInputChange, onRetry, meta, onShowUserHint, isLoadingModal, minSymbolsToFetch = 0, isLoading, isLoadingError, loadingErrorMsg, treeProps, }) => {
     const [value, setValue] = useState(initialValue);
     const [searchValue, setSearchValue] = useState();
@@ -13,6 +14,15 @@ export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps,
             setSearchValue('');
         }
     }, [isOpen]);
+    const onClearSearch = () => {
+        setSearchValue('');
+    };
+    const { isShowSelectedTree, selectedTreeDataToRender, onChangeTreeView, isNoResultInSelectedTree, } = useSelectedTreeView({
+        value,
+        searchValue,
+        onInputChange,
+        onClearSearch,
+    });
     const addIsForceExpandedFlag = (item) => {
         if (item.children) {
             return {
@@ -27,8 +37,13 @@ export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps,
         ? deepMap(options, 'children', addIsForceExpandedFlag)
         : options, [options, searchValue, isLoading]);
     const handleChangeSearchField = (event) => {
-        setSearchValue(event.target.value);
-        onInputChange(event.target.value);
+        const newSearchValue = event.target.value;
+        setSearchValue(newSearchValue);
+        // В режиме выбранных элементов используем клиентский поиск, не вызываем onInputChange
+        // В обычном режиме используем асинхронный поиск через запросы
+        if (!isShowSelectedTree) {
+            onInputChange(newSearchValue);
+        }
     };
     const handleChange = (newValue) => setValue(newValue);
     const handleClose = (event) => {
@@ -43,7 +58,23 @@ export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps,
         onChange?.(value);
         onClose?.(event, 'escapeKeyDown');
     };
-    const isNoResult = Boolean(searchValue) && !options.length;
+    // Определяем isNoResult в зависимости от режима
+    const isNoResult = useMemo(() => {
+        if (!searchValue) {
+            return false;
+        }
+        // В режиме выбранных элементов проверяем отфильтрованное дерево
+        if (isShowSelectedTree) {
+            return isNoResultInSelectedTree;
+        }
+        // В обычном режиме проверяем options
+        return !options.length;
+    }, [
+        searchValue,
+        isShowSelectedTree,
+        isNoResultInSelectedTree,
+        options.length,
+    ]);
     const isDisabledButton = !value || isNoResult;
     const handleRetry = () => {
         onRetry?.(searchValue);
@@ -52,8 +83,10 @@ export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps,
     const isShowModalLoader = isLoadingModal && options.length === 0;
     const isShowSearchFieldLoader = (isLoading && !isLoadingModal) ||
         (isLoading && isLoadingModal && options.length > 0);
-    const isShowSearchSuggestion = Boolean((!searchValue && minSymbolsToFetch > 0) ||
-        (searchValue && searchValue.length < minSymbolsToFetch));
+    // Подсказка о минимальном количестве символов показывается только в обычном режиме
+    const isShowSearchSuggestion = Boolean(!isShowSelectedTree &&
+        ((!searchValue && minSymbolsToFetch > 0) ||
+            (searchValue && searchValue.length < minSymbolsToFetch)));
     return {
         isShowModalLoader,
         isShowSearchFieldLoader,
@@ -64,6 +97,24 @@ export const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps,
         treeProps,
         loadingErrorMsg,
         isLoadingError,
+        badgeContent: value?.length ?? 0,
+        isShowSelectedTree,
+        checkableTagProps: {
+            onChange: onChangeTreeView,
+            checked: isShowSelectedTree,
+            disabled: !value?.length,
+            size: 'large',
+            variant: 'light',
+            label: 'Показать выбранные',
+            color: 'default',
+        },
+        selectedTreeProps: {
+            value,
+            data: selectedTreeDataToRender,
+            onChange: handleChange,
+            isObjectMode: true,
+            isInitialExpanded: true,
+        },
         modalProps: {
             onClose: handleClose,
             disableRestoreFocus: true,

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/buildSelectedTree/buildSelectedTree.d.ts

@@ -0,0 +1,6 @@
+import type { TreeLikeAsyncAutocompleteValue } from '../../../../types';
+/**
+ * Строит дерево из выбранных элементов с учетом breadcrumbs
+ * Если несколько элементов имеют общего родителя, они объединяются в один узел
+ */
+export declare const buildSelectedTree: (selectedItems: TreeLikeAsyncAutocompleteValue) => TreeLikeAsyncAutocompleteValue;

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/buildSelectedTree/buildSelectedTree.js

@@ -0,0 +1,101 @@
+/**
+ * Создает breadcrumbs для элемента на основе его позиции в пути
+ */
+const createBreadcrumbs = (path, currentIndex) => {
+    if (currentIndex === 0) {
+        return undefined;
+    }
+    // Берем все элементы до текущего индекса и создаем breadcrumbs
+    // Breadcrumbs должны содержать только id, label, note (без children и options)
+    return path.slice(0, currentIndex).map((item) => ({
+        id: item.id,
+        label: item.label,
+        note: item.note,
+    }));
+};
+/**
+ * Получает или создает Map для дочернего узла
+ */
+const getOrCreateChildrenMap = (node, nodeChildrenMaps) => {
+    const existingMap = nodeChildrenMaps.get(node);
+    if (existingMap) {
+        return existingMap;
+    }
+    const childrenMap = new Map();
+    nodeChildrenMaps.set(node, childrenMap);
+    // Если у узла уже есть children, добавляем их в Map
+    if (node.children) {
+        node.children.forEach((child) => {
+            childrenMap.set(child.id, child);
+        });
+    }
+    return childrenMap;
+};
+/**
+ * Преобразует Map в массив TreeLikeAsyncAutocompleteValue
+ */
+const convertToArray = (level, nodeChildrenMaps) => {
+    const result = [];
+    level.forEach((node) => {
+        const childrenMap = nodeChildrenMaps.get(node);
+        const children = childrenMap && childrenMap.size > 0
+            ? convertToArray(childrenMap, nodeChildrenMaps)
+            : undefined;
+        result.push({
+            ...node,
+            children: children && children.length > 0 ? children : undefined,
+        });
+    });
+    return result;
+};
+/**
+ * Строит дерево из выбранных элементов с учетом breadcrumbs
+ * Если несколько элементов имеют общего родителя, они объединяются в один узел
+ */
+export const buildSelectedTree = (selectedItems) => {
+    if (!selectedItems || selectedItems.length === 0) {
+        return [];
+    }
+    const rootLevel = new Map();
+    const nodeChildrenMaps = new WeakMap();
+    // Обрабатываем каждый выбранный элемент
+    selectedItems.forEach((item) => {
+        // Строим путь от корня к элементу: breadcrumbs + сам элемент
+        const path = [
+            ...(item.breadcrumbs ?? []),
+            item,
+        ];
+        // Проходим по пути и создаем/обновляем узлы дерева
+        path.reduce((currentLevel, pathItem, index) => {
+            const existingNode = currentLevel.get(pathItem.id);
+            const restoredBreadcrumbs = createBreadcrumbs(path, index);
+            if (existingNode) {
+                // Если узел уже существует, обновляем его поля из pathItem
+                const existingChildren = existingNode.children;
+                Object.assign(existingNode, pathItem, {
+                    children: existingChildren,
+                    breadcrumbs: restoredBreadcrumbs,
+                    options: {
+                        ...existingNode.options,
+                        ...pathItem.options,
+                        isDefaultExpanded: true,
+                    },
+                });
+                return getOrCreateChildrenMap(existingNode, nodeChildrenMaps);
+            }
+            // Создаем новый узел с восстановленными breadcrumbs
+            const newNode = {
+                ...pathItem,
+                breadcrumbs: restoredBreadcrumbs,
+                children: undefined,
+                options: {
+                    ...pathItem.options,
+                    isDefaultExpanded: true,
+                },
+            };
+            currentLevel.set(pathItem.id, newNode);
+            return getOrCreateChildrenMap(newNode, nodeChildrenMaps);
+        }, rootLevel);
+    });
+    return convertToArray(rootLevel, nodeChildrenMaps);
+};

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/buildSelectedTree/index.d.ts

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/buildSelectedTree/index.js

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/findInTree/findInTree.d.ts

@@ -0,0 +1,2 @@
+import { type TreeListData } from '../../../../../Tree';
+export declare const findInTree: (tree: TreeListData[], searchValue: string, filterOptions?: ((node: TreeListData, filterSearchValue: string) => boolean) | undefined) => TreeListData[];

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/findInTree/findInTree.js

@@ -0,0 +1,43 @@
+const defaultFilterOptions = (node, searchValue) => {
+    if (typeof node.label !== 'string') {
+        return;
+    }
+    const preparedSearchValue = searchValue.trim().toLowerCase();
+    const preparedLabel = node.label.toLowerCase();
+    const resultByLabel = preparedLabel.includes(preparedSearchValue);
+    if (resultByLabel) {
+        return resultByLabel;
+    }
+    if (typeof node.note !== 'string') {
+        return;
+    }
+    const preparedNote = node.note.toLowerCase();
+    return preparedNote.includes(preparedSearchValue);
+};
+export const findInTree = (tree, searchValue, filterOptions) => {
+    const compareFunc = filterOptions || defaultFilterOptions;
+    const search = (nodes) => {
+        const results = [];
+        for (const node of nodes) {
+            // Если label включает искомый термин, добавляем узел в результаты
+            if (compareFunc(node, searchValue)) {
+                results.push({ ...node, options: { isDefaultExpanded: false } });
+                // Если узел соответствует поиску, пропускаем обработку его потомков
+                continue;
+            }
+            // Если у узла есть потомки, рекурсивно ищем в них
+            if (node.children) {
+                const childResults = search(node.children);
+                if (childResults.length > 0) {
+                    // Добавляем узел только один раз с найденными потомками
+                    results.push({
+                        ...node,
+                        children: childResults,
+                    });
+                }
+            }
+        }
+        return results;
+    };
+    return search(tree);
+};

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/findInTree/index.d.ts

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/findInTree/index.js

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './buildSelectedTree';
+export * from './findInTree';
+export * from './preserveNodeOrder';

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/index.js

@@ -0,0 +1,3 @@
+export * from './buildSelectedTree';
+export * from './findInTree';
+export * from './preserveNodeOrder';

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/preserveNodeOrder/index.d.ts

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/preserveNodeOrder/index.js

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

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/preserveNodeOrder/preserveNodeOrder.d.ts

@@ -0,0 +1,7 @@
+import type { TreeLikeAsyncAutocompleteValue } from '../../../../types';
+type NodeOrderMap = Map<string, number>;
+/**
+ * Гарантирует неизменность порядка узлов при операциях выбора элементов в дереве
+ */
+export declare const preserveNodeOrder: (tree: TreeLikeAsyncAutocompleteValue, nodeOrderRef: NodeOrderMap) => TreeLikeAsyncAutocompleteValue;
+export {};

package/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/preserveNodeOrder/preserveNodeOrder.js

@@ -0,0 +1,31 @@
+/**
+ * Гарантирует неизменность порядка узлов при операциях выбора элементов в дереве
+ */
+export const preserveNodeOrder = (tree, nodeOrderRef) => {
+    // Обновляем порядок узлов: сохраняем существующий или используем порядок из дерева
+    const updateNodeOrder = (nodes) => {
+        nodes.forEach((node) => {
+            const nodeWithOrder = node;
+            const orderFromTree = nodeWithOrder.options?.order;
+            if (!nodeOrderRef.has(node.id)) {
+                nodeOrderRef.set(node.id, orderFromTree ?? nodeOrderRef.size);
+            }
+            if (node.children) {
+                updateNodeOrder(node.children);
+            }
+        });
+    };
+    updateNodeOrder(tree);
+    // Сортируем дерево по сохраненному порядку
+    const sortByOrder = (nodes) => [...nodes]
+        .sort((a, b) => {
+        const orderA = nodeOrderRef.get(a.id) ?? Infinity;
+        const orderB = nodeOrderRef.get(b.id) ?? Infinity;
+        return orderA - orderB;
+    })
+        .map((node) => ({
+        ...node,
+        children: node.children ? sortByOrder(node.children) : undefined,
+    }));
+    return sortByOrder(tree);
+};

package/components/TreeLikeAsyncAutocomplete/types.d.ts

@@ -1,10 +1,56 @@
-import type { FetchOptionsResult, TreeAsyncAutocompleteValue } from '../TreeAsyncAutocomplete';
+import type { TreeAsyncAutocompleteValue } from '../TreeAsyncAutocomplete';
 import type { TreeAutocompleteProps } from '../TreeAutocomplete';
+type TreeBreadcrumbs = Omit<TreeAsyncAutocompleteValue, 'children' | 'options'>[];
+type TreeLikeAsyncAutocompleteItem = Omit<TreeAsyncAutocompleteValue, 'children'> & {
+    /**
+     * Путь от корня дерева к текущему элементу в виде цепочки родительских узлов.
+     *
+     * Используется для отображения иерархической структуры выбранных элементов.
+     * Текущий элемент не включается в breadcrumbs.
+     *
+     * Структура breadcrumbs:
+     * - Первый элемент массива - корневой элемент дерева
+     * - Последний элемент массива - непосредственный родитель текущего элемента
+     *
+     * @example
+     * {
+     *   id: '511',
+     *   label: 'Отдел бухгалтерии',
+     *   breadcrumbs: [
+     *     { id: '5', label: 'ЗАО "ТехноИнновации"' }, // Первый элемент - корневой
+     *     { id: '51', label: 'Департамент финансов' }  // Последний элемент - родитель
+     *   ]
+     * }
+     *
+     */
+    breadcrumbs?: TreeBreadcrumbs;
+    /**
+     * Дочерние узлы дерева
+     */
+    children?: TreeLikeAsyncAutocompleteItem[];
+};
 /**
  * Значение для TreeLikeAsyncAutocomplete - массив элементов дерева
  */
-export type TreeLikeAsyncAutocompleteValue = TreeAsyncAutocompleteValue[];
-export type { FetchOptionsResult };
+export type TreeLikeAsyncAutocompleteValue = TreeLikeAsyncAutocompleteItem[];
+/**
+ * Результат функции загрузки опций
+ */
+export type FetchOptionsResult = {
+    /**
+     * Элементы дерева
+     */
+    options: TreeLikeAsyncAutocompleteValue;
+    /**
+     * Метаданные результата загрузки
+     */
+    meta?: {
+        /**
+         * Флаг, указывающий, что все данные загружены
+         */
+        isAllDataLoaded: boolean;
+    };
+};
 export type TreeLikeAsyncAutocompleteProps = Omit<TreeAutocompleteProps, 'options' | 'isLoading' | 'isLoadingError' | 'value' | 'onChange' | 'filterOptions' | 'trimmed' | 'maxLength' | 'type'> & {
     /**
      * Выбранное значения
@@ -67,3 +113,4 @@ export type TreeLikeAsyncAutocompleteProps = Omit<TreeAutocompleteProps, 'option
      */
     isLoading?: boolean;
 };
+export {};

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

@@ -614,7 +614,10 @@ export declare const useLogic: ({ onBlur, isError, value, isDisabled, fetchDelay
             fullScreen?: boolean | undefined;
             disableBackdropClick?: boolean | undefined;
         };
-        options: import("../../TreeAsyncAutocomplete").TreeAsyncAutocompleteValue[];
+        options: (Omit<import("../../TreeAsyncAutocomplete").TreeAsyncAutocompleteValue, "children"> & {
+            breadcrumbs?: Omit<import("../../TreeAsyncAutocomplete").TreeAsyncAutocompleteValue, "children" | "options">[] | undefined;
+            children?: (Omit<import("../../TreeAsyncAutocomplete").TreeAsyncAutocompleteValue, "children"> & any)[] | undefined;
+        })[];
         onRetry: (search?: string) => void;
         onChange: ((newValue?: import("../types").TreeLikeAsyncAutocompleteValue | undefined) => void) | undefined;
         onInputChange: (search: string) => void;

package/node/components/CheckableTag/styles.js

@@ -79,11 +79,11 @@ const getColor = ({ theme, isChecked, disabled, }) => {
     }
     return 'inherit';
 };
-const getBorder = ({ isChecked, variant, color, theme, tagState = 'default', }) => {
+const getBorder = ({ isChecked, variant, color, theme, disabled, tagState = 'default', }) => {
     if (variant === 'text' || color !== 'default') {
         return 'none';
     }
-    if (isChecked) {
+    if (isChecked || (disabled && variant === 'light')) {
         return '1px solid transparent';
     }
     if (tagState === 'default') {
@@ -107,7 +107,7 @@ exports.StyledTag = (0, styles_1.styled)(Tag_1.Tag, {
     `
     background-color: ${disabled ? theme.palette.grey[100] : theme.palette.grey[900]};
   `}
-  border: ${({ theme, variant, $isChecked, color }) => getBorder({ theme, variant, isChecked: $isChecked, color })};
+  border: ${({ theme, variant, $isChecked, color, disabled }) => getBorder({ theme, variant, isChecked: $isChecked, color, disabled })};
 
   .${Tag_1.tagClassnames.label} {
     color: ${({ theme, disabled, $isChecked }) => getColor({ theme, isChecked: $isChecked, disabled })};