@antscorp/antsomi-ui 2.0.3 → 2.0.5

package/es/components/molecules/EditorTab/styled.js

@@ -1,7 +1,5 @@
-var _a, _b, _c;
 import styled from 'styled-components';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-// const token = theme.getDesignToken(THEME);
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const EditorTabStyled = styled.div `
   position: relative;
   height: 40px;
@@ -17,15 +15,15 @@ export const EditorTabStyled = styled.div `
     width: 20px !important;
     height: 20px !important;
     &:hover {
-      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue} !important;
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue} !important;
     }
   }
 
   .left-block {
     position: relative;
     height: 100%;
-    width: 100%;
-    flex-grow: 1;
+    /* width: 100%;
+    flex-grow: 1; */
     flex-flow: nowrap;
     display: flex;
     align-items: center;
@@ -54,17 +52,19 @@ export const EditorTabStyled = styled.div `
       height: 40px;
       padding: 0 10px;
       overflow: hidden;
-      background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw2};
 
       /* &.active button, */
       & button {
-        display: none !important;
+        /* display: none !important; */
+        visibility: hidden;
       }
 
       &:hover {
-        background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue};
+        background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue};
         & button {
-          display: flex !important;
+          /* display: flex !important; */
+          visibility: visible;
         }
       }
 
@@ -132,15 +132,22 @@ export const EditorTabStyled = styled.div `
     display: flex;
     align-items: center;
     justify-content: center;
-    /* border-right: 1px solid #e0e0e0; */
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue7};
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    border: 5px solid transparent;
 
     /* Typography Block */
     font-size: 12px;
 
     cursor: pointer;
 
-    &:last-child {
+    /* &:last-child {
       border-right: 1px solid #e0e0e0;
+    } */
+
+    &:hover {
+      border: 5px solid transparent;
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue};
     }
 
     /* &.--disabled {

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { MatchesAnyProps, MatchesAnySelectProps } from './types';
-export declare function MatchesAny<TItem = Record<string, any>>(props: MatchesAnyProps<TItem>): React.JSX.Element;
-export declare function MatchesAnySelect<TItem = Record<string, any>>(props: MatchesAnySelectProps<TItem>): React.JSX.Element;
+export declare function MatchesAny<TItem = any>(props: MatchesAnyProps<TItem>): React.JSX.Element;
+export declare function MatchesAnySelect<TItem = any>(props: MatchesAnySelectProps<TItem>): React.JSX.Element;

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -13,43 +13,46 @@ var __rest = (this && this.__rest) || function (s, e) {
 /* eslint-disable react/destructuring-assignment */
 // Libraries
 import { ConfigProvider } from 'antd';
-import { uniqBy } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { isEmpty, uniqBy } from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
 // Components
+import { Button, Flex, Icon, Input, Popover, Spin, Tooltip, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { EmptyData, PopoverSelect, Select } from '@antscorp/antsomi-ui/es/components/molecules';
-import { Button, Flex, Icon, Input, Popover, Scrollbars, Spin, Typography, Tooltip, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ExtendValuePopup } from './components/ExtendValuePopup';
 // Styled
-import { MatchesAnyWrapper, ActionButton, StyledTree, TextButton, GroupSelectButton, ExtraValueLabel, } from './styled';
+import { ActionButton, ExtraValueLabel, GroupSelectButton, MatchesAnyWrapper, StyledTree, TextButton, } from './styled';
 // Locales
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Constants
-import { MATCHES_ANY_THEME } from './constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { MATCHES_ANY_THEME } from './constants';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
+import { getSelectedTreeData } from './utils';
+// Icons
 import { DataIcon, WarningIcon } from '../../icons';
-import clsx from 'clsx';
 const initialState = {
     isOpenPopover: false,
 };
 const matchesAnyInitialState = {
     searchValue: '',
     selectedItems: [],
+    selectedTreeData: [],
     isShowLoadMoreEl: false,
 };
 const { t } = i18nInstance;
 const { Text } = Typography;
 export function MatchesAny(props) {
     // Props
-    const { objectName, loading = false, showExtendValue = true, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "listEmptyProps", "selectedListEmptyProps", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
+    const { objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "selectedItems", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
-    const { searchValue, selectedItems, isShowLoadMoreEl } = state;
+    const { searchValue, selectedItems, selectedTreeData, isShowLoadMoreEl } = state;
     const _a = listEmptyProps || {}, { icon: listEmptyIcon, description: listEmptyDescription = t(translations.global.noResultsMatchesKeyWord).toString() } = _a, restListEmptyProps = __rest(_a, ["icon", "description"]);
     const _b = selectedListEmptyProps || {}, { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }) } = _b, restSelectedListEmptyProps = __rest(_b, ["description", "icon"]);
     // Refs
@@ -67,35 +70,31 @@ export function MatchesAny(props) {
      * Updates the `selectedItems` state when the `selectedItems` prop changes.
      */
     useDeepCompareEffect(() => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: props.selectedItems })));
-    }, [props.selectedItems]);
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: selectedItemsProp })));
+    }, [selectedItemsProp]);
     useEffect(() => {
         // Delay for show load more el
         setTimeout(() => {
             setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
         }, 500);
     }, []);
+    useDeepCompareEffect(() => {
+        if (!isEmpty(selectedTreeDataProp)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { selectedTreeData: selectedTreeDataProp })));
+        }
+    }, [selectedTreeDataProp]);
     // Handlers
-    /**
-     * Adds an item and, if applicable, its leaf descendants to the list of selected items.
-     *
-     * If the item has children, the function flattens the tree structure and adds only the leaf nodes
-     * (nodes without children) to the selected items list. If the item does not have children, it adds
-     * the item directly to the selected items list.
-     *
-     * @param {MatchesAnyItem} item - The item to be added to the selected items list.
-     *                              This item can have children.
-     */
     const onSelectItem = (item) => {
+        let newSelectedItems = [...(selectedItems || [])];
         if (item.children) {
             const flattenChild = flatTree(item.children, 'children');
-            setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [
-                    ...(prev.selectedItems || []),
-                    ...flattenChild === null || flattenChild === void 0 ? void 0 : flattenChild.filter(item => !item.children),
-                ] })));
-            return;
+            newSelectedItems = newSelectedItems.concat(flattenChild.filter(item => !item.children));
         }
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [...(prev.selectedItems || []), item] })));
+        else {
+            newSelectedItems = newSelectedItems.concat(item);
+        }
+        const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
     };
     /**
      * Removes an item and its descendants from the list of selected items.
@@ -105,34 +104,38 @@ export function MatchesAny(props) {
      *
      */
     const onRemoveItem = (item) => {
-        setState(prev => {
-            var _a;
-            return (Object.assign(Object.assign({}, prev), { selectedItems: (_a = prev.selectedItems) === null || _a === void 0 ? void 0 : _a.filter(selectedItem => {
-                    if (item.children) {
-                        const flattenChild = flatTree(item.children, 'children');
-                        return (selectedItem.key !== item.key &&
-                            !(flattenChild === null || flattenChild === void 0 ? void 0 : flattenChild.some(item => item.key === selectedItem.key)));
-                    }
-                    return selectedItem.key !== item.key;
-                }) }));
+        const newSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(selectedItem => {
+            if (item.children) {
+                const flattenChild = flatTree(item.children, 'children');
+                return (selectedItem.key !== item.key &&
+                    !(flattenChild === null || flattenChild === void 0 ? void 0 : flattenChild.some(item => item.key === selectedItem.key)));
+            }
+            return selectedItem.key !== item.key;
         });
+        const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
     };
     const onSelectAll = () => {
         const flattenTreeData = flatTree(items, 'children').filter(item => !item.children &&
             !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key || selectedItem.title === item.title)));
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: uniqBy([...(prev.selectedItems || []), ...flattenTreeData], 'key') })));
+        const newSelectedItems = uniqBy([...(state.selectedItems || []), ...flattenTreeData], 'key');
+        const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData);
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
     };
     const onRemoveAll = () => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [] })));
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [], selectedTreeData: [] })));
+    };
+    const onClickApply = () => {
+        onApply(selectedItems || [], selectedTreeData || []);
     };
-    const renderItemError = (item) => {
+    const renderItemError = useCallback((item) => {
         if (customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.error) {
             return customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.error(item);
         }
         return item.error ? (React.createElement(Tooltip, { title: item.error },
             React.createElement(WarningIcon, { size: 16 }))) : null;
-    };
-    const renderItemNodeTitle = ({ item, mode = 'unselect', onSelectItem, onRemoveItem, }) => {
+    }, [customItemRenders]);
+    const renderItemNodeTitle = useCallback(({ item, mode = 'unselect', onSelectItem, onRemoveItem, }) => {
         var _a, _b;
         const { isExtendValue, title, subTitle } = item; // Destructure properties from item
         return (React.createElement(React.Fragment, null,
@@ -162,7 +165,7 @@ export function MatchesAny(props) {
                         }
                     } },
                     React.createElement(Icon, { type: `icon-ants-${onSelectItem ? 'double-arrow-up' : 'remove-slim'}`, size: 11 })))));
-    };
+    }, [customItemRenders, renderExtraValues, renderItemError]);
     // Memos
     const { treeData, matchedParents } = useDeepCompareMemo(() => {
         var _a;
@@ -187,46 +190,25 @@ export function MatchesAny(props) {
                     (selectedItem.isExtendValue && selectedItem.title === item.title)))
                 : selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key ||
                     (selectedItem.isExtendValue && selectedItem.title === item.title));
-            return Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({
-                    item,
-                    onSelectItem,
-                }), disabled: isSelected }), (item.children && {
+            return Object.assign(Object.assign(Object.assign({}, item), { disabled: isSelected }), (item.children && {
                 children: serializeTreeData(item.children),
             }));
         });
+        // Handle add load more item for serve load more
         let treeData = serializeTreeData(results);
         // Filter the tree data based on the group selected items
         if (groupSelectProps && ((_a = groupSelectProps.selected) === null || _a === void 0 ? void 0 : _a.length)) {
             treeData = treeData.filter(item => { var _a; return (_a = groupSelectProps.selected) === null || _a === void 0 ? void 0 : _a.includes(item.key); });
         }
+        treeData = treeData.concat({
+            key: 'load-more',
+            title: '',
+            isLoadMore: true,
+            className: 'load-more-node',
+        });
         return { treeData, matchedParents };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [items, searchValue, selectedItems, groupSelectProps, onChangeSearch]);
-    const selectedTreeData = useDeepCompareMemo(() => {
-        var _a;
-        const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
-        const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
-        const lazyLoadSelectedItems = (notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.filter(selectedItem => !flatTree(items || [], 'children').some(item => item.key === selectedItem.key))) || [];
-        const serializeTreeData = (list) => {
-            var _a;
-            return ((_a = list
-                .filter(item => {
-                /**
-                 * Checks if the given item or any of its descendants are selected.
-                 *
-                 * If the item has children, it flattens the children tree structure and checks if any node is selected.
-                 * If the item does not have children, it directly checks if the item is in the selected items list.
-                 *
-                 */
-                const isSelected = item.children
-                    ? flatTree(item.children, 'children').some(item => notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key))
-                    : notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key);
-                return isSelected;
-            })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) }), (item.children && {
-                children: serializeTreeData(item.children),
-            })), (!!item.error && { className: 'error-node' }))))) || [];
-        };
-        return serializeTreeData(items || []).concat(((_a = [...lazyLoadSelectedItems, ...extendValueSelectedItems]) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) })))) || []);
-    }, [items, selectedItems]);
     const isDisableRemoveAll = useDeepCompareMemo(() => !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length), [selectedTreeData]);
     const isDisableSelectAll = useDeepCompareMemo(() => {
         const flattenTreeData = flatTree(treeData, 'children');
@@ -263,23 +245,30 @@ export function MatchesAny(props) {
                     React.createElement(Flex, { align: "center", gap: 10 },
                         renderExtraValueLabels(),
                         React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString()))),
-                React.createElement(Spin, { spinning: loading },
-                    React.createElement(Scrollbars, { style: { height: '100%' } }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React.createElement(React.Fragment, null,
-                        React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: matchedParents.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
-                                    transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
-                                    transition: 'transform 0.3s ease',
-                                }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) }),
-                        isShowLoadMoreEl && React.createElement("div", { ref: loadMoreRef }))) : (React.createElement(EmptyData, Object.assign({ icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription }, restListEmptyProps))))))));
+                React.createElement(Spin, { spinning: loading }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React.createElement(React.Fragment, null,
+                    React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: (matchedParents === null || matchedParents === void 0 ? void 0 : matchedParents.length)
+                            ? matchedParents.map(item => item.key)
+                            : items === null || items === void 0 ? void 0 : items.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                                transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
+                                transition: 'transform 0.3s ease',
+                            }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), titleRender: (item) => isShowLoadMoreEl && item.isLoadMore ? (React.createElement("div", { ref: loadMoreRef })) : (renderItemNodeTitle({
+                            item,
+                            onSelectItem,
+                        })), height: 396 }),
+                    isShowLoadMoreEl && React.createElement("div", { ref: loadMoreRef }))) : (React.createElement(EmptyData, Object.assign({ icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription }, restListEmptyProps)))))));
     };
     const renderSelectedList = () => (React.createElement("div", { className: "matches-any__section" },
         React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },
             React.createElement(Text, { strong: true }, `${t(translations.global.selected)} (${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0})`),
             React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
-        React.createElement("div", { className: "matches-any__body" },
-            React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
-                        transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
-                        transition: 'transform 0.3s ease',
-                    }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) }))))));
+        React.createElement("div", { className: "matches-any__body" }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, { defaultExpandedKeys: selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.map(item => item.key), selectable: false, treeData: selectedTreeData, titleRender: item => renderItemNodeTitle({
+                item: item,
+                mode: 'select',
+                onRemoveItem,
+            }), height: 420, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                    transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
+                    transition: 'transform 0.3s ease',
+                }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) })))));
     // Handlers
     const onApplyExtendValue = (extendValues) => {
         // Filter out values that are already present in selectedItems
@@ -287,12 +276,16 @@ export function MatchesAny(props) {
         // If there are available values to add
         if (availableExtendValues) {
             // Create new items in the format required (MatchesAnyItem)
-            const newSelectedItems = availableExtendValues.map(value => ({
-                key: value,
-                title: value,
-                isExtendValue: true, // Flag to indicate that this item is an extend value
-            }));
-            setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [...(selectedItems || []), ...newSelectedItems] })));
+            const newSelectedItems = [
+                ...(selectedItems || []),
+                ...availableExtendValues.map(value => ({
+                    key: value,
+                    title: value,
+                    isExtendValue: true, // Flag to indicate that this item is an extend value
+                })),
+            ];
+            const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
+            setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
         }
     };
     return (React.createElement(ConfigProvider, { theme: MATCHES_ANY_THEME },
@@ -302,14 +295,14 @@ export function MatchesAny(props) {
                 renderSelectedList()),
             React.createElement(Flex, { className: "matches-any__footer", align: "center", justify: "space-between" },
                 React.createElement(Flex, { align: "center", gap: 10 },
-                    React.createElement(Button, { type: "primary", onClick: () => onApply(selectedItems || []) }, t(translations.apply.title).toString()),
+                    React.createElement(Button, { type: "primary", onClick: onClickApply }, t(translations.apply.title).toString()),
                     React.createElement(Button, { onClick: () => onCancel() }, t(translations.cancel.title).toString())),
                 showExtendValue && (React.createElement(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue },
                     React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-empty-flag" }) }, t(translations.extendValue.title).toString())))))));
 }
 export function MatchesAnySelect(props) {
     var _a, _b, _c;
-    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, onChangeSearch, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "renderExtraValues", "customItemRenders", "popoverProps", "listEmptyProps", "selectedListEmptyProps", "onChangeSearch", "onChange", "onLoadMore"]);
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, onChangeSearch, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "renderExtraValues", "customItemRenders", "popoverProps", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "onChangeSearch", "onChange", "onLoadMore"]);
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -318,11 +311,11 @@ export function MatchesAnySelect(props) {
         ? `${(_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title)) === null || _a === void 0 ? void 0 : _a[0]}${((_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _b === void 0 ? void 0 : _b.length) ? `, and +${(_c = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _c === void 0 ? void 0 : _c.length} more` : ''}` || []
         : undefined;
     // Handlers
-    const onApplyMatchesAny = (selectedItems) => {
-        onChange(selectedItems);
+    const onApplyMatchesAny = (selectedItems, selectedTreeData) => {
+        onChange(selectedItems, selectedTreeData);
         setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
     };
-    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, onChangeSearch: onChangeSearch, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
+    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: onChangeSearch, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
             overflow: {
                 shiftY: 0,
                 shiftX: 0,
@@ -330,6 +323,9 @@ export function MatchesAnySelect(props) {
         }, overlayStyle: { width: 700 }, overlayInnerStyle: {
             padding: 0,
         }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))), zIndex: 1400 }, popoverProps),
-        React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ') : ''}` },
+        React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ') : ''}`, overlayInnerStyle: {
+                maxHeight: 300,
+                overflow: 'auto',
+            } },
             React.createElement(Select, Object.assign({ title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: Object.assign(Object.assign({}, dropdownStyle), { display: 'none', padding: 0 }), loading: loading }, restProps)))));
 }

package/es/components/molecules/MatchAnySelect/constants.js

@@ -6,26 +6,6 @@ export const SAMPLE_DATA = [
     {
         key: '12179',
         title: 'Untitled Project#2024-06-27 09:40:18',
-        children: [
-            {
-                key: '3j2i',
-                title: 'dsjfioasdjf',
-                children: [
-                    {
-                        key: '3j2323i323',
-                        title: 'fewfwe',
-                    },
-                    {
-                        key: '3j2323i',
-                        title: 'me owi',
-                    },
-                ],
-            },
-            {
-                key: '3j2i-1',
-                title: 'dsjfioasdjf',
-            },
-        ],
     },
     {
         key: '11923',

package/es/components/molecules/MatchAnySelect/mock.d.ts

@@ -0,0 +1,21 @@
+export declare const countryItems: {
+    name: string;
+    countryId: number;
+    countryName: string;
+    provinces: {
+        provinceId: number;
+        provinceName: string;
+    }[];
+    value: string;
+    label: string;
+    title: string;
+    key: string;
+    id: number;
+    children: {
+        provinceId: number;
+        provinceName: string;
+        key: string;
+        title: string;
+        value: string;
+    }[];
+}[];