@astral/ui 4.4.1 → 4.6.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/components/index.d.ts

@@ -94,6 +94,7 @@ export { MinimalisticPagination, type MinimalisticPaginationProps, } from './Min
 export * from './NavMenu';
 export { type DataGridColumns, type DataGridRow, type DataGridRowOptions, type DataGridSort, DataGrid, type DataGridProps, } from './DataGrid';
 export { DataGridInfinite, type DataGridInfiniteProps, } from './DataGridInfinite';
+export { DataGridColumnHintIcon, type DataGridColumnHintIconProps, } from './DataGridColumnHintIcon';
 export { type DateItemProps, type DateRangePickerProps, type DateRangePickerValue, DateRangePicker, } from './DateRangePicker';
 export { MenuOrganization, type MenuOrganizationProps, MenuOrganizationSkeleton, } from './MenuOrganization';
 export { NotFoundPage, type NotFoundPageProps, notFoundPageClassnames, } from './NotFoundPage';

package/components/index.js

@@ -94,6 +94,7 @@ export { MinimalisticPagination, } from './MinimalisticPagination';
 export * from './NavMenu';
 export { DataGrid, } from './DataGrid';
 export { DataGridInfinite, } from './DataGridInfinite';
+export { DataGridColumnHintIcon, } from './DataGridColumnHintIcon';
 export { DateRangePicker, } from './DateRangePicker';
 export { MenuOrganization, MenuOrganizationSkeleton, } from './MenuOrganization';
 export { NotFoundPage, notFoundPageClassnames, } from './NotFoundPage';

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/DataGrid/Head/Head.js

@@ -12,13 +12,14 @@ const Head = (props) => {
     const { checkboxProps, handleSort } = (0, useLogic_1.useLogic)(props);
     const { columns, gridColumns, isSelectable, sorting, onSelectAllRows, isHideSelectAll, } = props;
     const renderColumns = (0, react_1.useMemo)(() => {
-        return columns.map(({ field, label, sortable, align }, index) => {
+        return columns.map(({ field, label, sortable, align, columnHint }, index) => {
             const isFirstCell = !index;
             const startAdornmentRender = () => {
-                if (isHideSelectAll || !isFirstCell || !isSelectable) {
+                const showCheckbox = isFirstCell && isSelectable && !isHideSelectAll;
+                if (!showCheckbox && !columnHint) {
                     return null;
                 }
-                return ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps, onChange: onSelectAllRows }) }));
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCheckbox && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps, onChange: onSelectAllRows }) })), columnHint] }));
             };
             return ((0, jsx_runtime_1.jsx)(HeadCell_1.HeadCell, { sorting: sorting, field: field, label: label, isSortable: sortable, align: align, startAdornment: startAdornmentRender(), onSort: handleSort }, label));
         });

package/node/components/DataGrid/HeadCell/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
+const HintIcon_1 = require("../../HintIcon");
 const styles_1 = require("../../styles");
 const utils_1 = require("../utils");
 exports.Wrapper = (0, styles_1.styled)('div', {
@@ -23,4 +24,8 @@ exports.Wrapper = (0, styles_1.styled)('div', {
     width: 16px;
     height: 16px;
   }
+
+  .${HintIcon_1.hintIconClassnames.iconWrapper}  {
+    margin-right: ${({ theme }) => theme.spacing(1)};
+  }
 `;

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

@@ -223,6 +223,10 @@ export type DataGridColumns<TData extends Record<string, CellValue>> = {
      * Скрывает содержимое столбца от инструментов мониторинга
      */
     isHidePersonalData?: boolean;
+    /**
+     * Принимает компонент DataGridColumnHintIcon - подсказка в шапке колонки
+     */
+    columnHint?: ReactNode;
 };
 export type DataGridRowOptionColumns<TData extends Record<string, CellValue>> = {
     /**

package/node/components/DataGridColumnHintIcon/DataGridColumnHintIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type HintIconProps } from '../HintIcon';
+export type DataGridColumnHintIconProps = Omit<HintIconProps, 'renderIcon' | 'variant' | 'iconOption'>;
+export declare const DataGridColumnHintIcon: (props: DataGridColumnHintIconProps) => JSX.Element;

package/node/components/DataGridColumnHintIcon/DataGridColumnHintIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridColumnHintIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("../../icons");
+const HintIcon_1 = require("../HintIcon");
+const DataGridColumnHintIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)(HintIcon_1.HintIcon, { renderIcon: () => (0, jsx_runtime_1.jsx)(icons_1.InfoOutlineSm, {}), variant: "info", ...props }));
+};
+exports.DataGridColumnHintIcon = DataGridColumnHintIcon;

package/node/components/DataGridColumnHintIcon/index.d.ts

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

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

package/node/components/HintIcon/HintIcon.d.ts

@@ -1,36 +1,3 @@
 /// <reference types="react" />
-import { type TooltipPlacement } from './types';
-export type HintIconProps = {
-    /**
-     * Определяет иконку отображения
-     */
-    variant: 'question' | 'info';
-    /**
-     * Опции для иконки
-     */
-    iconOption?: {
-        /**
-         * Определяет тип иконки
-         * @default fill
-         */
-        variant?: 'fill' | 'outline';
-        /**
-         * Определяет цвет иконки
-         * @default lightGrey
-         */
-        color?: 'warning' | 'grey' | 'lightGrey';
-    };
-    /**
-     *  Текст заголовка BottomDrawer
-     */
-    title: string;
-    /**
-     *  Текст тултипа или контента BottomDrawer
-     */
-    note: string;
-    /**
-     *  Положение тултипа
-     */
-    tooltipPlacement?: TooltipPlacement;
-};
-export declare const HintIcon: ({ variant, title, note, iconOption, tooltipPlacement, }: HintIconProps) => JSX.Element;
+import { type HintIconProps } from './types';
+export declare const HintIcon: ({ variant, title, note, iconOption, tooltipPlacement, renderIcon, }: HintIconProps) => JSX.Element;

package/node/components/HintIcon/HintIcon.js

@@ -6,8 +6,8 @@ const BottomDrawer_1 = require("../BottomDrawer");
 const Icon_1 = require("./Icon");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const HintIcon = ({ variant, title, note, iconOption, tooltipPlacement = 'bottom', }) => {
+const HintIcon = ({ variant, title, note, iconOption, tooltipPlacement = 'bottom', renderIcon, }) => {
     const { handleClose, handleOpen, open } = (0, useLogic_1.useLogic)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { onClick: handleOpen, variant: variant, iconOption: iconOption, note: note, tooltipPlacement: tooltipPlacement }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, open: open, onClose: handleClose, children: (0, jsx_runtime_1.jsx)(styles_1.DrawerContent, { children: note }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { onClick: handleOpen, variant: variant, iconOption: iconOption, note: note, tooltipPlacement: tooltipPlacement, renderIcon: renderIcon }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, open: open, onClose: handleClose, children: (0, jsx_runtime_1.jsx)(styles_1.DrawerContent, { children: note }) })] }));
 };
 exports.HintIcon = HintIcon;

package/node/components/HintIcon/Icon/Icon.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { type HintIconProps } from '../HintIcon';
-import type { TooltipPlacement } from '../types';
-export type IconProps = Pick<HintIconProps, 'variant' | 'iconOption' | 'note'> & {
-    onClick: () => void;
+import type { SyntheticEvent } from 'react';
+import type { HintIconProps, TooltipPlacement } from '../types';
+export type IconProps = Pick<HintIconProps, 'variant' | 'iconOption' | 'note' | 'renderIcon'> & {
+    onClick: (e: SyntheticEvent) => void;
     tooltipPlacement: TooltipPlacement;
 };
 export declare const Icon: (props: IconProps) => JSX.Element;

package/node/components/HintIcon/Icon/Icon.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tooltip_1 = require("../../Tooltip");
+const constants_1 = require("../constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const Icon = (props) => {
     const { getIcon, iconColor } = (0, useLogic_1.useLogic)(props);
     const { onClick, note, tooltipPlacement } = props;
-    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: note, placement: tooltipPlacement, children: (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { onClick: onClick, "$color": iconColor, children: getIcon() }) }));
+    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: note, placement: tooltipPlacement, children: (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { onClick: onClick, "$color": iconColor, className: constants_1.hintIconClassnames.iconWrapper, children: getIcon() }) }));
 };
 exports.Icon = Icon;

package/node/components/HintIcon/Icon/useLogic/hooks/useIconColor/useIconColor.d.ts

@@ -1,5 +1,7 @@
+import { type ReactNode } from 'react';
 type UseIconColorParams = {
     color?: 'warning' | 'grey' | 'lightGrey';
+    renderIcon?: () => ReactNode;
 };
-export declare const useIconColor: ({ color }: UseIconColorParams) => string;
+export declare const useIconColor: ({ color, renderIcon }: UseIconColorParams) => string;
 export {};

package/node/components/HintIcon/Icon/useLogic/hooks/useIconColor/useIconColor.js

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIconColor = void 0;
 const theme_1 = require("../../../../../theme");
-const useIconColor = ({ color }) => {
+const useIconColor = ({ color, renderIcon }) => {
     const theme = (0, theme_1.useTheme)();
     const colorMap = {
         warning: theme.palette.yellow[800],
         grey: theme.palette.grey[800],
         lightGrey: theme.palette.grey[400],
     };
+    if (renderIcon) {
+        return 'currentColor';
+    }
     if (color) {
         return colorMap[color];
     }

package/node/components/HintIcon/Icon/useLogic/useLogic.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { type ReactNode } from 'react';
 import { type IconProps } from '../Icon';
 type UseLogicParams = IconProps;
-export declare const useLogic: ({ iconOption, variant }: UseLogicParams) => {
-    getIcon: () => JSX.Element;
+export declare const useLogic: ({ iconOption, variant, renderIcon, }: UseLogicParams) => {
+    getIcon: () => ReactNode;
     iconColor: string;
 };
 export {};

package/node/components/HintIcon/Icon/useLogic/useLogic.js

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const constants_1 = require("../../constants");
 const hooks_1 = require("./hooks");
-const useLogic = ({ iconOption, variant }) => {
-    const iconColor = (0, hooks_1.useIconColor)({ color: iconOption?.color });
+const useLogic = ({ iconOption, variant, renderIcon, }) => {
+    const iconColor = (0, hooks_1.useIconColor)({ color: iconOption?.color, renderIcon });
     const { variant: iconOptionVariant = 'fill' } = iconOption || {};
     const getIcon = () => {
+        if (renderIcon) {
+            return renderIcon();
+        }
         const icon = constants_1.ICONS[variant][iconOptionVariant];
         if (icon) {
             return icon;

package/node/components/HintIcon/constants.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+export declare const hintIconClassnames: {
+    iconWrapper: string;
+};
 export declare const ICONS: {
     question: {
         fill: JSX.Element;

package/node/components/HintIcon/constants.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ICONS = void 0;
+exports.ICONS = exports.hintIconClassnames = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("../../icons");
+const utils_1 = require("../utils");
+exports.hintIconClassnames = {
+    iconWrapper: (0, utils_1.createUIKitClassname)('hint-icon__icon-wrapper'),
+};
 exports.ICONS = {
     question: {
         fill: (0, jsx_runtime_1.jsx)(icons_1.QuestionFillMd, {}),

package/node/components/HintIcon/index.d.ts

@@ -1 +1,3 @@
 export * from './HintIcon';
+export type { HintIconProps } from './types';
+export { hintIconClassnames } from './constants';

package/node/components/HintIcon/index.js

@@ -14,4 +14,7 @@ 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 });
+exports.hintIconClassnames = void 0;
 __exportStar(require("./HintIcon"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "hintIconClassnames", { enumerable: true, get: function () { return constants_1.hintIconClassnames; } });

package/node/components/HintIcon/styles.d.ts

@@ -3,9 +3,3 @@ export declare const DrawerContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    $color: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/HintIcon/styles.js

@@ -1,14 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconWrapper = exports.DrawerContent = void 0;
+exports.DrawerContent = void 0;
 const styles_1 = require("../styles");
 exports.DrawerContent = styles_1.styled.div `
   padding: ${({ theme }) => theme.spacing(5, 4)};
 `;
-exports.IconWrapper = (0, styles_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$color'].includes(prop),
-}) `
-  display: flex;
-
-  color: ${({ $color }) => $color};
-`;

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

@@ -1 +1,39 @@
+import { type ReactNode } from 'react';
 export type TooltipPlacement = 'left' | 'top' | 'right' | 'bottom';
+export type HintIconProps = {
+    /**
+     * Определяет иконку отображения
+     */
+    variant: 'question' | 'info';
+    /**
+     * Опции для иконки
+     */
+    iconOption?: {
+        /**
+         * Определяет тип иконки
+         * @default fill
+         */
+        variant?: 'fill' | 'outline';
+        /**
+         * Определяет цвет иконки
+         * @default lightGrey
+         */
+        color?: 'warning' | 'grey' | 'lightGrey';
+    };
+    /**
+     *  Текст заголовка BottomDrawer
+     */
+    title: string;
+    /**
+     *  Текст тултипа или контента BottomDrawer
+     */
+    note: string;
+    /**
+     *  Положение тултипа
+     */
+    tooltipPlacement?: TooltipPlacement;
+    /**
+     * Задание кастомной иконки
+     */
+    renderIcon?: () => ReactNode;
+};

package/node/components/HintIcon/useLogic/useLogic.d.ts

@@ -1,5 +1,6 @@
+import { type SyntheticEvent } from 'react';
 export declare const useLogic: () => {
     open: boolean;
-    handleOpen: () => void;
-    handleClose: () => void;
+    handleOpen: (e: SyntheticEvent) => void;
+    handleClose: (e: SyntheticEvent) => void;
 };

package/node/components/HintIcon/useLogic/useLogic.js

@@ -6,12 +6,14 @@ const hooks_1 = require("../../hooks");
 const useLogic = () => {
     const [open, setOpen] = (0, react_1.useState)(false);
     const { isMobile } = (0, hooks_1.useViewportType)();
-    const handleOpen = () => {
+    const handleOpen = (e) => {
+        e.stopPropagation();
         if (isMobile) {
             setOpen((prevState) => !prevState);
         }
     };
-    const handleClose = () => {
+    const handleClose = (e) => {
+        e.stopPropagation();
         if (isMobile) {
             setOpen(false);
         }

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,