@astral/ui 4.4.1 → 4.5.0

package/components/TreeLikeList/useLogic/useLogic.js

@@ -2,14 +2,15 @@ import { useEffect, useMemo, useRef } from 'react';
 import { useId } from '../../hooks/useId';
 import { getFormatDisabledItems } from '../../Tree/utils';
 import { getChainsId } from './utils';
-export const useLogic = ({ data, value, disabledItems }) => {
+export const useLogic = ({ data, value, disabledItems, }) => {
     const prefixId = useId();
     const listRef = useRef(null);
     useEffect(() => {
         if (listRef.current && value?.length) {
             // Выбираем первый элемент из списка value
+            const firstItemId = typeof value[0] === 'string' ? value[0] : value[0].id;
             const targetItem = listRef.current.querySelector(`
-        li[id="${prefixId}${value[0]}"]`);
+        li[id="${prefixId}${firstItemId}"]`);
             if (targetItem) {
                 targetItem.scrollIntoView({ block: 'center' });
             }

package/components/TreeLikeList/useLogic/utils/getChainsId/getChainsId.js

@@ -1,17 +1,24 @@
+/*
+ * Возвращает цепочки идентификаторов до целевых элементов
+ */
 export const getChainsId = (tree, targetId) => {
     const chainIds = [];
+    if (!targetId || targetId.length === 0) {
+        return [];
+    }
+    // Создаем набор идентификаторов для быстрого поиска
+    const targetIdsSet = new Set(targetId.map((item) => (typeof item === 'string' ? item : item.id)));
     const findChain = (node, chainId) => {
-        chainId.push(node.id);
-        if (targetId?.includes(node.id)) {
-            chainIds.push([...chainId]);
-            return;
-        }
-        if (node.children) {
-            for (const child of node.children) {
-                findChain(child, [...chainId]);
-            }
+        const currentChain = [...chainId, node.id];
+        // Проверяем по набору идентификаторов
+        if (targetIdsSet.has(node.id)) {
+            chainIds.push(currentChain);
+            // Не делаем return, так как элемент может иметь дочерние элементы с целевыми id
         }
+        node.children?.forEach((child) => findChain(child, currentChain));
     };
-    tree.forEach((node) => findChain(node, []));
+    for (const node of tree) {
+        findChain(node, []);
+    }
     return chainIds;
 };

package/hook-form/FormTreeLikeAsyncAutocomplete/FormTreeLikeAsyncAutocomplete.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { type FetchOptionsResult, type TreeLikeAsyncAutocompleteProps, type TreeLikeAsyncAutocompleteValue } from '../../components/TreeLikeAsyncAutocomplete';
+import { type WithFormFieldProps } from '../types';
+/**
+ * Тип значения, которое сетится в state формы
+ */
+export type FormTreeLikeAsyncAutocompleteValue = TreeLikeAsyncAutocompleteValue;
+export type FormFetchOptionsResult = FetchOptionsResult;
+export type FormTreeLikeAutocompleteProps<TFieldValues extends object> = WithFormFieldProps<TreeLikeAsyncAutocompleteProps, TFieldValues>;
+/**
+ * Обертка TreeLikeAsyncAutocomplete для формы
+ */
+export declare const FormTreeLikeAsyncAutocomplete: <TFieldValues extends object>(props: FormTreeLikeAutocompleteProps<TFieldValues>) => JSX.Element;

package/hook-form/FormTreeLikeAsyncAutocomplete/FormTreeLikeAsyncAutocomplete.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TreeLikeAsyncAutocomplete, } from '../../components/TreeLikeAsyncAutocomplete';
+import { useFormFieldProps } from '../hooks';
+/**
+ * Обертка TreeLikeAsyncAutocomplete для формы
+ */
+export const FormTreeLikeAsyncAutocomplete = (props) => {
+    const { error, ...fieldProps } = useFormFieldProps({
+        ...props,
+        defaultValue: props.defaultValue || '',
+    });
+    return _jsx(TreeLikeAsyncAutocomplete, { isError: error, ...fieldProps });
+};

package/hook-form/FormTreeLikeAsyncAutocomplete/index.js

@@ -0,0 +1 @@
+"use strict";

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

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

package/node/components/Tree/MultipleTreeList/MultipleTreeList.js

@@ -8,6 +8,6 @@ const useLogic_1 = require("./useLogic");
 const INITIAL_LEVEL = 0;
 const MultipleTreeList = ({ data, value, className, expandedLevel = 10, disabledItems, ...props }) => {
     const { formattedDisabledItems } = (0, useLogic_1.useLogic)({ disabledItems });
-    return ((0, jsx_runtime_1.jsx)(styles_1.List, { className: className, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { value: value, ...item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, disabledItems: formattedDisabledItems, ...props }, item.id))) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.List, { className: className, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, value: value, level: INITIAL_LEVEL, expandedLevel: expandedLevel, disabledItems: formattedDisabledItems, ...props }, item.id))) }));
 };
 exports.MultipleTreeList = MultipleTreeList;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkIsIndeterminate = void 0;
+const getIdFromValue_1 = require("../getIdFromValue");
 const checkIsIndeterminate = (value, childrenIds) => {
     if (!value || !childrenIds) {
         return false;
     }
-    return value.some((item) => childrenIds.includes(item));
+    return value.some((item) => childrenIds.includes((0, getIdFromValue_1.getIdFromValue)(item)));
 };
 exports.checkIsIndeterminate = checkIsIndeterminate;

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

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

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

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkIsSelected = void 0;
+const getIdFromValue_1 = require("../getIdFromValue");
 const checkIsSelected = (value, optionId) => {
     if (!value || !value.length) {
         return false;
     }
-    return value.includes(optionId);
+    return value.some((item) => (0, getIdFromValue_1.getIdFromValue)(item) === optionId);
 };
 exports.checkIsSelected = checkIsSelected;

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

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

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

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

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

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

package/node/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/findObjectsByIds/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("./findObjectsByIds"), exports);

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

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

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIdFromValue = void 0;
+/**
+ * Получает Id из значения, которое может быть строкой или объектом TreeListData
+ */
+const getIdFromValue = (item) => {
+    return typeof item === 'string' ? item : item.id;
+};
+exports.getIdFromValue = getIdFromValue;

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

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

package/node/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/getIdFromValue/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("./getIdFromValue"), exports);

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemsToAdd = void 0;
+const findObjectsByIds_1 = require("../findObjectsByIds");
+/**
+ * Формирует массив элементов для добавления в зависимости от режима работы
+ */
+const getItemsToAdd = (item, children, childrenIds, isObjectMode) => {
+    if (!children) {
+        return isObjectMode ? [item] : [item.id];
+    }
+    if (isObjectMode) {
+        const childrenObjects = (0, findObjectsByIds_1.findObjectsByIds)(children, childrenIds);
+        return [item, ...childrenObjects];
+    }
+    return [item.id, ...childrenIds];
+};
+exports.getItemsToAdd = getItemsToAdd;

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

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

package/node/components/Tree/MultipleTreeList/TreeItem/useLogic/utils/getItemsToAdd/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("./getItemsToAdd"), exports);

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

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

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

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAllChildrenId = exports.checkIsSelected = exports.checkIsIndeterminate = void 0;
+exports.getItemsToAdd = exports.getIdFromValue = exports.findObjectsByIds = exports.getAllChildrenId = exports.checkIsSelected = exports.checkIsIndeterminate = void 0;
 var checkIsIndeterminate_1 = require("./checkIsIndeterminate");
 Object.defineProperty(exports, "checkIsIndeterminate", { enumerable: true, get: function () { return checkIsIndeterminate_1.checkIsIndeterminate; } });
 var checkIsSelected_1 = require("./checkIsSelected");
 Object.defineProperty(exports, "checkIsSelected", { enumerable: true, get: function () { return checkIsSelected_1.checkIsSelected; } });
 var getAllChildrenId_1 = require("./getAllChildrenId");
 Object.defineProperty(exports, "getAllChildrenId", { enumerable: true, get: function () { return getAllChildrenId_1.getAllChildrenId; } });
+var findObjectsByIds_1 = require("./findObjectsByIds");
+Object.defineProperty(exports, "findObjectsByIds", { enumerable: true, get: function () { return findObjectsByIds_1.findObjectsByIds; } });
+var getIdFromValue_1 = require("./getIdFromValue");
+Object.defineProperty(exports, "getIdFromValue", { enumerable: true, get: function () { return getIdFromValue_1.getIdFromValue; } });
+var getItemsToAdd_1 = require("./getItemsToAdd");
+Object.defineProperty(exports, "getItemsToAdd", { enumerable: true, get: function () { return getItemsToAdd_1.getItemsToAdd; } });

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

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

package/node/components/TreeAsyncAutocomplete/types.d.ts

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

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

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

package/node/components/TreeLikeAsyncAutocomplete/Input/Input.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("../../../icons");
+const IconButton_1 = require("../../IconButton");
+const Loader_1 = require("../../Loader");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const ClearButton = ({ disabled, onClick }) => ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, onClick: onClick, title: constants_1.CLEAR_TEXT, "aria-label": constants_1.CLEAR_TEXT, children: (0, jsx_runtime_1.jsx)(icons_1.CrossOutlineMd, {}) }));
+exports.Input = (0, react_1.forwardRef)(({ disabled, onChange: propsOnChange, value, inputRef, hideHelperText = false, onClick, isLoading, ...restProps }, forwardedRef) => {
+    const { isVisibleClearButton, onChange, isVisibleTagsList, textFieldProps, onClearAll, } = (0, useLogic_1.useLogic)({
+        inputRef,
+        value,
+        onChange: propsOnChange,
+        disabled,
+        onClick,
+        isLoading,
+    });
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, { ...restProps, hideHelperText: hideHelperText, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, ...textFieldProps, startAdornment: isVisibleTagsList && ((0, jsx_runtime_1.jsx)(styles_1.StyledTagsList, { data: value, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: onChange })), endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.IconWrapper, { children: [isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: onClearAll })), isLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "small" })) : ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, children: (0, jsx_runtime_1.jsx)(icons_1.DownOutlineMd, {}) }))] }) }));
+});

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

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

package/node/components/TreeLikeAsyncAutocomplete/Input/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLEAR_TEXT = void 0;
+exports.CLEAR_TEXT = 'Очистить';

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

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

package/node/components/TreeLikeAsyncAutocomplete/Input/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("./Input"), exports);

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledTextField: import("@emotion/styled").StyledComponent<Omit<import("../../TextField").TextFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isHidden: boolean;
+}, {}, {}>;
+export declare const StyledTagsList: <TData extends import("../../TagsList").TagValue>(props: import("../../TagsList").TagsListProps<TData>) => JSX.Element;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;