@astral/ui 4.6.0 → 4.8.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/MenuOrganization/OrganizationButton/OrganizationButton.d.ts

@@ -1,4 +1,4 @@
-import { type SyntheticEvent } from 'react';
+import { type ReactNode, type SyntheticEvent } from 'react';
 import { type Organization } from '../types';
 export type OrganizationButtonProps = {
     onClick: (event: SyntheticEvent) => void;
@@ -10,5 +10,11 @@ export type OrganizationButtonProps = {
      * Скрытие персональных данных от инструментов мониторинга
      */
     isHidePersonalData?: boolean;
+    /**
+     * Render-props, позволяет кастомизировать содержимое кнопки
+     */
+    renderPreview?: (organization: Organization & Record<string, unknown>, params: {
+        className?: string;
+    }) => ReactNode;
 };
 export declare const OrganizationButton: import("react").ForwardRefExoticComponent<OrganizationButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/MenuOrganization/OrganizationButton/OrganizationButton.js

@@ -5,12 +5,14 @@ import { useHidePersonalData } from '../../personalDataSecurity';
 import { Tooltip } from '../../Tooltip';
 import { OrganizationData } from '../styles';
 import { Container, StyledButton, StyledChevron, StyledTypography, } from './styles';
-export const OrganizationButton = forwardRef(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, }, ref) => {
+export const OrganizationButton = forwardRef(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, renderPreview, }, ref) => {
     const { name, inn, kpp } = currentOrganization;
     const hidePersonalDataClassname = useHidePersonalData({
         isEnabled: isHidePersonalData,
     });
-    const renderButton = () => (_jsx(StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, endIcon: _jsx(StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: _jsxs(Container, { className: hidePersonalDataClassname, children: [_jsx(OverflowTypography, { variant: "h6", component: "div", children: name }), _jsxs(OrganizationData, { children: [_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && (_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] }) }));
+    const renderButton = () => (_jsx(StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, endIcon: _jsx(StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
+            className: hidePersonalDataClassname,
+        })) : (_jsxs(Container, { className: hidePersonalDataClassname, children: [_jsx(OverflowTypography, { variant: "h6", component: "div", children: name }), _jsxs(OrganizationData, { children: [_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && (_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
     if (isDisabled && disabledReason) {
         return (_jsx(Tooltip, { title: disabledReason, withoutContainer: false, placement: "bottom", children: renderButton() }));
     }

package/components/MenuOrganization/types.d.ts

@@ -113,4 +113,17 @@ export type MenuOrganizationProps<TData extends Organization = Organization> = {
      * )}
      */
     renderItem?: (params: RenderItemParams<TData>) => ReactNode;
+    /**
+     * Render-props, позволяет кастомизировать содержимое кнопки OrganizationButton
+     *
+     * @example
+     * renderPreview={(organization) => (
+     *   <Avatar color="#EC4899" size="md">
+     *     {getInitials(organization.name)}
+     *   </Avatar>
+     * )}
+     */
+    renderPreview?: (organization: TData, params: {
+        className?: string;
+    }) => ReactNode;
 };

package/components/MenuOrganization/useLogic/useLogic.d.ts

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type SyntheticEvent } from 'react';
 import { type MenuOrganizationProps, type Organization } from '../types';
 type UseLogicParams<TData extends Organization & Record<string, unknown>> = MenuOrganizationProps<TData>;
-export declare const useLogic: <TData extends Organization & Record<string, unknown>>({ organizations, onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Organization & Record<string, unknown>>({ organizations, onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, renderPreview, }: UseLogicParams<TData>) => {
     action: ({
         text: string;
     } & Pick<import("../..").ButtonProps, "onClick" | "href" | "endIcon" | "startIcon" | "variant" | "component">) | undefined;
@@ -19,6 +19,9 @@ export declare const useLogic: <TData extends Organization & Record<string, unkn
         isDisabled: boolean | undefined;
         disabledReason: string | undefined;
         isHidePersonalData: boolean | undefined;
+        renderPreview: ((organization: Organization & Record<string, unknown>, params: {
+            className?: string;
+        }) => import("react").ReactNode) | undefined;
         ref: (node: HTMLButtonElement | null) => void;
     };
     searchProps: {

package/components/MenuOrganization/useLogic/useLogic.js

@@ -2,7 +2,7 @@ import { useCallback, useContext, useMemo, useState, } from 'react';
 import { DashboardContext } from '../../DashboardLayout';
 import { usePopover } from '../../hooks';
 import { useHidePersonalData } from '../../personalDataSecurity';
-export const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, }) => {
+export const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, renderPreview, }) => {
     const { isLoading: isDashboardLoading } = useContext(DashboardContext);
     const [searchValue, setSearchValue] = useState('');
     const [anchorButtonEl, setAnchorButtonEl] = useState(null);
@@ -50,6 +50,9 @@ export const useLogic = ({ organizations = [], onChangeSearch, onChange, current
         }
         return !isError && !isLoading && organizations.length > 10;
     }, [searchValue.length, isError, isLoading, organizations.length]);
+    const renderPreviewWrapper = useMemo(() => renderPreview
+        ? (organization, params) => renderPreview(organization, params)
+        : undefined, [renderPreview]);
     return {
         action,
         isLoading,
@@ -64,6 +67,7 @@ export const useLogic = ({ organizations = [], onChangeSearch, onChange, current
             isDisabled,
             disabledReason,
             isHidePersonalData,
+            renderPreview: renderPreviewWrapper,
             ref: buttonRef,
         },
         searchProps: {

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);
+};