@astral/ui 4.6.0 → 4.8.0

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

package/node/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/node/components/MenuOrganization/OrganizationButton/OrganizationButton.js

@@ -8,12 +8,14 @@ const personalDataSecurity_1 = require("../../personalDataSecurity");
 const Tooltip_1 = require("../../Tooltip");
 const styles_1 = require("../styles");
 const styles_2 = require("./styles");
-exports.OrganizationButton = (0, react_1.forwardRef)(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, }, ref) => {
+exports.OrganizationButton = (0, react_1.forwardRef)(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, renderPreview, }, ref) => {
     const { name, inn, kpp } = currentOrganization;
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
         isEnabled: isHidePersonalData,
     });
-    const renderButton = () => ((0, jsx_runtime_1.jsx)(styles_2.StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, endIcon: (0, jsx_runtime_1.jsx)(styles_2.StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: (0, jsx_runtime_1.jsxs)(styles_2.Container, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "div", children: name }), (0, jsx_runtime_1.jsxs)(styles_1.OrganizationData, { children: [(0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && ((0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] }) }));
+    const renderButton = () => ((0, jsx_runtime_1.jsx)(styles_2.StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, endIcon: (0, jsx_runtime_1.jsx)(styles_2.StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
+            className: hidePersonalDataClassname,
+        })) : ((0, jsx_runtime_1.jsxs)(styles_2.Container, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "div", children: name }), (0, jsx_runtime_1.jsxs)(styles_1.OrganizationData, { children: [(0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && ((0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
     if (isDisabled && disabledReason) {
         return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: disabledReason, withoutContainer: false, placement: "bottom", children: renderButton() }));
     }

package/node/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/node/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/node/components/MenuOrganization/useLogic/useLogic.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const DashboardLayout_1 = require("../../DashboardLayout");
 const hooks_1 = require("../../hooks");
 const personalDataSecurity_1 = require("../../personalDataSecurity");
-const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, }) => {
+const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, renderPreview, }) => {
     const { isLoading: isDashboardLoading } = (0, react_1.useContext)(DashboardLayout_1.DashboardContext);
     const [searchValue, setSearchValue] = (0, react_1.useState)('');
     const [anchorButtonEl, setAnchorButtonEl] = (0, react_1.useState)(null);
@@ -53,6 +53,9 @@ const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganiz
         }
         return !isError && !isLoading && organizations.length > 10;
     }, [searchValue.length, isError, isLoading, organizations.length]);
+    const renderPreviewWrapper = (0, react_1.useMemo)(() => renderPreview
+        ? (organization, params) => renderPreview(organization, params)
+        : undefined, [renderPreview]);
     return {
         action,
         isLoading,
@@ -67,6 +70,7 @@ const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganiz
             isDisabled,
             disabledReason,
             isHidePersonalData,
+            renderPreview: renderPreviewWrapper,
             ref: buttonRef,
         },
         searchProps: {

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/OptionsModal.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionsModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../Button");
+const CheckableTag_1 = require("../../CheckableTag");
 const Dialog_1 = require("../../Dialog");
 const DialogActions_1 = require("../../DialogActions");
 const Paper_1 = require("../../Paper");
+const TagBadge_1 = require("../../TagBadge");
 const TreeLikeList_1 = require("../../TreeLikeList");
 const Typography_1 = require("../../Typography");
 const constants_1 = require("./constants");
@@ -16,7 +18,7 @@ const SearchSuggestion_1 = require("./SearchSuggestion");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const OptionsModal = (props) => {
-    const { isNoResult, searchFieldProps, modalProps, treeListProps, cancelButtonProps, confirmButtonProps, handleRetry, isShowUserHint, isShowModalLoader, isShowSearchFieldLoader, isShowSearchSuggestion, isLoadingError, treeProps, loadingErrorMsg, } = (0, useLogic_1.useLogic)(props);
+    const { isNoResult, searchFieldProps, modalProps, treeListProps, cancelButtonProps, confirmButtonProps, handleRetry, isShowUserHint, isShowModalLoader, isShowSearchFieldLoader, isShowSearchSuggestion, isLoadingError, treeProps, loadingErrorMsg, badgeContent, checkableTagProps, isShowSelectedTree, selectedTreeProps, } = (0, useLogic_1.useLogic)(props);
     const renderComponent = () => {
         if (isShowSearchSuggestion) {
             return (0, jsx_runtime_1.jsx)(SearchSuggestion_1.SearchSuggestion, {});
@@ -30,8 +32,11 @@ const OptionsModal = (props) => {
         if (isNoResult) {
             return (0, jsx_runtime_1.jsx)(NoData_1.NoData, {});
         }
+        if (isShowSelectedTree) {
+            return ((0, jsx_runtime_1.jsx)(TreeLikeList_1.TreeLikeList, { ...treeProps, ...selectedTreeProps }));
+        }
         return ((0, jsx_runtime_1.jsx)(TreeLikeList_1.TreeLikeList, { ...treeProps, ...treeListProps }));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...modalProps, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { "$size": modalProps.size, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: constants_1.SEARCH_FIELD_HELPER_TEXT }), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(styles_1.TreeListWrapper, { children: [renderComponent(), isShowUserHint && ((0, jsx_runtime_1.jsx)(styles_1.UserHintWrapper, { children: (0, jsx_runtime_1.jsx)(Typography_1.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" }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...modalProps, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { "$size": modalProps.size, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledSearchField, { fullWidth: true, ...searchFieldProps, isLoading: isShowSearchFieldLoader, helperText: constants_1.SEARCH_FIELD_HELPER_TEXT }), (0, jsx_runtime_1.jsx)(CheckableTag_1.CheckableTag, { ...checkableTagProps, endAddon: (badgeProps) => ((0, jsx_runtime_1.jsx)(TagBadge_1.TagBadge, { ...badgeProps, badgeContent: badgeContent, showZero: true })) }), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(styles_1.TreeListWrapper, { children: [renderComponent(), isShowUserHint && ((0, jsx_runtime_1.jsx)(styles_1.UserHintWrapper, { children: (0, jsx_runtime_1.jsx)(Typography_1.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" }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };
 exports.OptionsModal = OptionsModal;

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

@@ -12,7 +12,7 @@ exports.StyledDialogContent = (0, styles_1.styled)(DialogContent_1.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_1.DIALOG_SIZES[$size].minWidth};

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useSelectedTreeView"), exports);

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useSelectedTreeView"), exports);

package/node/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/node/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/hooks/useSelectedTreeView/useSelectedTreeView.js

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

package/node/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/node/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const array_1 = require("../../../utils/array");
+const hooks_1 = require("./hooks");
 const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInputChange, onRetry, meta, onShowUserHint, isLoadingModal, minSymbolsToFetch = 0, isLoading, isLoadingError, loadingErrorMsg, treeProps, }) => {
     const [value, setValue] = (0, react_1.useState)(initialValue);
     const [searchValue, setSearchValue] = (0, react_1.useState)();
@@ -16,6 +17,15 @@ const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInpu
             setSearchValue('');
         }
     }, [isOpen]);
+    const onClearSearch = () => {
+        setSearchValue('');
+    };
+    const { isShowSelectedTree, selectedTreeDataToRender, onChangeTreeView, isNoResultInSelectedTree, } = (0, hooks_1.useSelectedTreeView)({
+        value,
+        searchValue,
+        onInputChange,
+        onClearSearch,
+    });
     const addIsForceExpandedFlag = (item) => {
         if (item.children) {
             return {
@@ -30,8 +40,13 @@ const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInpu
         ? (0, array_1.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) => {
@@ -46,7 +61,23 @@ const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInpu
         onChange?.(value);
         onClose?.(event, 'escapeKeyDown');
     };
-    const isNoResult = Boolean(searchValue) && !options.length;
+    // Определяем isNoResult в зависимости от режима
+    const isNoResult = (0, react_1.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);
@@ -55,8 +86,10 @@ const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInpu
     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,
@@ -67,6 +100,24 @@ const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInpu
         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/node/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/node/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/utils/buildSelectedTree/buildSelectedTree.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildSelectedTree = void 0;
+/**
+ * Создает 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
+ * Если несколько элементов имеют общего родителя, они объединяются в один узел
+ */
+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);
+};
+exports.buildSelectedTree = buildSelectedTree;

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

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