@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react/no-danger */
 /* eslint-disable react/function-component-definition */
 /* eslint-disable react/destructuring-assignment */
@@ -16,7 +6,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { ConfigProvider } from 'antd';
 import clsx from 'clsx';
 import { cloneDeep, isEmpty, uniqBy } from 'lodash';
-import React, { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, 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';
@@ -52,13 +42,13 @@ const { t } = i18nInstance;
 const { Text } = Typography;
 export function MatchesAny(props) {
     // Props
-    const { objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, searchValue = '', isExternalSearch, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "selectedItems", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "searchValue", "isExternalSearch", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
+    const { objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, searchValue = '', isExternalSearch, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch, ...restOfProps } = props;
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
     const { selectedItems, selectedTreeData, isShowLoadMoreEl, expandedKeys, selectedExpandedKeys } = state;
-    const _a = listEmptyProps || {}, { icon: listEmptyIcon = React.createElement(LongerIcon, null), description: listEmptyDescription = (React.createElement("div", { dangerouslySetInnerHTML: { __html: t(translations.matchesAnySelect.noData) } })) } = _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"]);
+    const { icon: listEmptyIcon = _jsx(LongerIcon, {}), description: listEmptyDescription = (_jsx("div", { dangerouslySetInnerHTML: { __html: t(translations.matchesAnySelect.noData) } })), ...restListEmptyProps } = listEmptyProps || {};
+    const { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = _jsx(DataIcon, { color: globalToken?.bw5, size: 48 }), ...restSelectedListEmptyProps } = selectedListEmptyProps || {};
     // Refs
     const { ref: loadMoreRef } = useIntersectionObserver({
         threshold: 0,
@@ -75,41 +65,48 @@ export function MatchesAny(props) {
      * Updates the `selectedItems` state when the `selectedItems` prop changes.
      */
     useDeepCompareEffect(() => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: selectedItemsProp })));
+        setState(prev => ({
+            ...prev,
+            selectedItems: selectedItemsProp,
+        }));
     }, [selectedItemsProp]);
     useDeepCompareEffect(() => {
-        var _a;
-        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        searchInputRef.current?.focus();
         // Delay for show load more el
         if (!isEmpty(items)) {
             setTimeout(() => {
-                setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
+                setState(prev => ({ ...prev, isShowLoadMoreEl: true }));
             }, 500);
-            setState(prev => (Object.assign(Object.assign({}, prev), { expandedKeys: items === null || items === void 0 ? void 0 : items.map(item => item.key) })));
+            setState(prev => ({ ...prev, expandedKeys: items?.map(item => item.key) }));
         }
     }, [items]);
     useDeepCompareEffect(() => {
         // If `selectedTreeData` prop is not empty, update the `selectedTreeData` state directly.
         if (!isEmpty(selectedTreeDataProp)) {
-            setState(prev => {
-                var _a, _b;
-                return (Object.assign(Object.assign({}, prev), { selectedTreeData: selectedTreeDataProp, selectedExpandedKeys: (_b = (_a = flatTree(selectedTreeDataProp, 'children')) === null || _a === void 0 ? void 0 : _a.filter(item => !!item.children)) === null || _b === void 0 ? void 0 : _b.map(item => item.key) }));
-            });
+            setState(prev => ({
+                ...prev,
+                selectedTreeData: selectedTreeDataProp,
+                selectedExpandedKeys: flatTree(selectedTreeDataProp, 'children')
+                    ?.filter(item => !!item.children)
+                    ?.map(item => item.key),
+            }));
         }
         // If `selectedTreeData` prop is empty and `selectedItems` prop is not empty,
         // calculate the `selectedTreeData` from the `selectedItems` prop and update the state.
         else if (!isEmpty(selectedItemsProp)) {
             const newSelectedTreeData = getSelectedTreeData(items || [], selectedItemsProp || []);
-            setState(prev => {
-                var _a, _b;
-                return (Object.assign(Object.assign({}, prev), { selectedTreeData: newSelectedTreeData, selectedExpandedKeys: (_b = (_a = flatTree(newSelectedTreeData, 'children')) === null || _a === void 0 ? void 0 : _a.filter(item => !!item.children)) === null || _b === void 0 ? void 0 : _b.map(item => item.key) }));
-            });
+            setState(prev => ({
+                ...prev,
+                selectedTreeData: newSelectedTreeData,
+                selectedExpandedKeys: flatTree(newSelectedTreeData, 'children')
+                    ?.filter(item => !!item.children)
+                    ?.map(item => item.key),
+            }));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedTreeDataProp, selectedItemsProp]);
     // Handlers
     const onSelectItem = (item) => {
-        var _a;
         let newSelectedItems = cloneDeep(selectedItems || []);
         let newSelectedExpandKeys = cloneDeep(selectedExpandedKeys || []);
         if (item.children) {
@@ -123,8 +120,15 @@ export function MatchesAny(props) {
         const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
         // Handle expand keys
         const matchesParents = recursiveFindParents(items || [], item, 'key', 'children');
-        newSelectedExpandKeys = newSelectedExpandKeys.concat(((_a = flatTree(matchesParents, 'children')) === null || _a === void 0 ? void 0 : _a.filter(item => !!item.children).map(item => item.key)) || []);
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedExpandedKeys: newSelectedExpandKeys, selectedTreeData: newSelectedTreeData })));
+        newSelectedExpandKeys = newSelectedExpandKeys.concat(flatTree(matchesParents, 'children')
+            ?.filter(item => !!item.children)
+            .map(item => item.key) || []);
+        setState(prev => ({
+            ...prev,
+            selectedItems: newSelectedItems,
+            selectedExpandedKeys: newSelectedExpandKeys,
+            selectedTreeData: newSelectedTreeData,
+        }));
     };
     /**
      * Removes an item and its descendants from the list of selected items.
@@ -134,64 +138,54 @@ export function MatchesAny(props) {
      *
      */
     const onRemoveItem = (item) => {
-        const newSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(selectedItem => {
+        const newSelectedItems = 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)));
+                    !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 })));
+        setState(prev => ({
+            ...prev,
+            selectedItems: newSelectedItems,
+            selectedTreeData: newSelectedTreeData,
+        }));
     };
     const onRemoveAll = () => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [], selectedTreeData: [] })));
+        setState(prev => ({ ...prev, selectedItems: [], selectedTreeData: [] }));
     };
     const onClickApply = () => {
         onApply(selectedItems || [], selectedTreeData || []);
     };
     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);
+        if (customItemRenders?.error) {
+            return customItemRenders?.error(item);
         }
-        return item.error ? (React.createElement(Tooltip, { title: item.error },
-            React.createElement(WarningIcon, { size: 16 }))) : null;
+        return item.error ? (_jsx(Tooltip, { title: item.error, children: _jsx(WarningIcon, { size: 16 }) })) : null;
     }, [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,
-            React.createElement("div", { className: clsx('title-content', {
-                    'extra-value': !!(renderExtraValues === null || renderExtraValues === void 0 ? void 0 : renderExtraValues.length),
-                }) },
-                React.createElement(Flex, { vertical: true, gap: 5, className: "left-content" },
-                    React.createElement(Text, { ellipsis: { tooltip: `${item.title || ''}` } }, ((_a = customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.title) === null || _a === void 0 ? void 0 : _a.call(customItemRenders, item)) || title),
-                    subTitle && (React.createElement(Text, { className: "sub-title", ellipsis: { tooltip: `${item.subTitle || ''}` }, style: { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 } }, ((_b = customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.subTitle) === null || _b === void 0 ? void 0 : _b.call(customItemRenders, item)) || subTitle))),
-                !!(renderExtraValues === null || renderExtraValues === void 0 ? void 0 : renderExtraValues.length) && (React.createElement(Flex, { align: "center", gap: 10 }, renderExtraValues.map(extraValue => (React.createElement("div", { className: "extra-value-content", key: `${extraValue.key}` },
-                    React.createElement(Text, { ellipsis: { tooltip: true } }, extraValue.render
-                        ? typeof extraValue.render === 'function'
-                            ? extraValue.render(item)
-                            : extraValue.render
-                        : item[extraValue.key]))))))),
-            React.createElement(Flex, { align: "center", gap: 10 },
-                mode === 'select' && renderItemError(item),
-                isExtendValue && (React.createElement(Icon, { type: "icon-ants-empty-flag", size: 20, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary })),
-                React.createElement(ActionButton, { className: "select-button", align: "center", justify: "center", onClick: () => {
-                        // Call onSelectItem function if provided
-                        if (onSelectItem) {
-                            onSelectItem(item);
-                        }
-                        // Call onRemoveItem function if provided
-                        if (onRemoveItem) {
-                            onRemoveItem(item);
-                        }
-                    } },
-                    React.createElement(Icon, { type: `icon-ants-${onSelectItem ? 'double-arrow-up' : 'remove-slim'}`, size: 11 })))));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: clsx('title-content', {
+                        'extra-value': !!renderExtraValues?.length,
+                    }), children: [_jsxs(Flex, { vertical: true, gap: 5, className: "left-content", children: [_jsx(Text, { ellipsis: { tooltip: `${item.title || ''}` }, children: customItemRenders?.title?.(item) || title }), subTitle && (_jsx(Text, { className: "sub-title", ellipsis: { tooltip: `${item.subTitle || ''}` }, style: { color: globalToken?.bw8 }, children: customItemRenders?.subTitle?.(item) || subTitle }))] }), !!renderExtraValues?.length && (_jsx(Flex, { align: "center", gap: 10, children: renderExtraValues.map(extraValue => (_jsx("div", { className: "extra-value-content", children: _jsx(Text, { ellipsis: { tooltip: true }, children: extraValue.render
+                                        ? typeof extraValue.render === 'function'
+                                            ? extraValue.render(item)
+                                            : extraValue.render
+                                        : item[extraValue.key] }) }, `${extraValue.key}`))) }))] }), _jsxs(Flex, { align: "center", gap: 10, children: [mode === 'select' && renderItemError(item), isExtendValue && (_jsx(Icon, { type: "icon-ants-empty-flag", size: 20, color: globalToken?.colorPrimary })), _jsx(ActionButton, { className: "select-button", align: "center", justify: "center", onClick: () => {
+                                // Call onSelectItem function if provided
+                                if (onSelectItem) {
+                                    onSelectItem(item);
+                                }
+                                // Call onRemoveItem function if provided
+                                if (onRemoveItem) {
+                                    onRemoveItem(item);
+                                }
+                            }, children: _jsx(Icon, { type: `icon-ants-${onSelectItem ? 'double-arrow-up' : 'remove-slim'}`, size: 11 }) })] })] }));
     }, [customItemRenders, renderExtraValues, renderItemError]);
     // Memos
     const { treeData } = useDeepCompareMemo(() => {
-        var _a, _b, _c, _d;
         const { results, matchedParents } = recursiveSearchItems({
             list: items || [],
             searchKeys: ['title', 'key'],
@@ -209,19 +203,23 @@ export function MatchesAny(props) {
             const isSelected = item.children
                 ? flatTree(item.children, 'children')
                     .filter(item => !item.children)
-                    .every(item => selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key ||
+                    .every(item => selectedItems?.some(selectedItem => selectedItem.key === item.key ||
                     (selectedItem.isExtendValue && selectedItem.title === item.title)))
-                : selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key ||
+                : selectedItems?.some(selectedItem => selectedItem.key === item.key ||
                     (selectedItem.isExtendValue && selectedItem.title === item.title));
-            return Object.assign(Object.assign(Object.assign({}, item), { disabled: isSelected }), (item.children && {
-                children: serializeTreeData(item.children),
-            }));
+            return {
+                ...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); });
+        if (groupSelectProps && groupSelectProps.selected?.length) {
+            treeData = treeData.filter(item => groupSelectProps.selected?.includes(item.key));
         }
         treeData = treeData.concat({
             key: 'load-more',
@@ -234,7 +232,7 @@ export function MatchesAny(props) {
         let newExpandedKeys = [];
         if (!searchValue) {
             // Expand all items
-            newExpandedKeys = (items === null || items === void 0 ? void 0 : items.map(item => item.key)) || [];
+            newExpandedKeys = items?.map(item => item.key) || [];
         }
         else {
             // If search value is not empty, then only expand the matched parents
@@ -242,29 +240,36 @@ export function MatchesAny(props) {
             if (!isExternalSearch) {
                 // Expand the matched parents of the search result
                 newExpandedKeys =
-                    ((_c = (_b = flatTree(matchedParents, 'children')) === null || _b === void 0 ? void 0 : _b.filter(item => !!item.children)) === null || _c === void 0 ? void 0 : _c.map(item => item.key)) || [];
+                    flatTree(matchedParents, 'children')
+                        ?.filter(item => !!item.children)
+                        ?.map(item => item.key) || [];
             }
             // If search value is not empty and is external search, then expand all items
             // that have children
             if (isExternalSearch) {
                 // Expand all items that have children
                 newExpandedKeys =
-                    ((_d = flatTree(items, 'children')) === null || _d === void 0 ? void 0 : _d.filter(item => !!item.children).map(item => item.key)) || [];
+                    flatTree(items, 'children')
+                        ?.filter(item => !!item.children)
+                        .map(item => item.key) || [];
             }
         }
-        setState(prev => (Object.assign(Object.assign({}, prev), { expandedKeys: newExpandedKeys })));
+        setState(prev => ({
+            ...prev,
+            expandedKeys: newExpandedKeys,
+        }));
         return { treeData, matchedParents };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [items, searchValue, selectedItems, groupSelectProps, onChangeSearch]);
-    const isDisableRemoveAll = useDeepCompareMemo(() => !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length), [selectedTreeData]);
+    const isDisableRemoveAll = useDeepCompareMemo(() => !selectedTreeData?.length, [selectedTreeData]);
     const isDisableSelectAll = useDeepCompareMemo(() => {
         const flattenTreeData = flatTree(treeData, 'children');
-        return !(flattenTreeData === null || flattenTreeData === void 0 ? void 0 : flattenTreeData.some(item => !item.disabled));
+        return !flattenTreeData?.some(item => !item.disabled);
     }, [treeData]);
     // Select tree key for force hard rerender tree when items not full (< 15 items) for handle load more
     // We use the length of items as key to force rerender tree when items length change
     // This is to fix the issue load more not called when items length is less than 15
-    const selectTreeKey = useDeepCompareMemo(() => { var _a; return ((((_a = flatTree(items, 'children', 1)) === null || _a === void 0 ? void 0 : _a.length) || 0) < 15 ? `${(items === null || items === void 0 ? void 0 : items.length) || 0}` : ''); }, [items]);
+    const selectTreeKey = useDeepCompareMemo(() => ((flatTree(items, 'children', 1)?.length || 0) < 15 ? `${items?.length || 0}` : ''), [items]);
     const isDisableApply = useDeepCompareMemo(() => isEmpty(selectedTreeData), [selectedTreeData]);
     const onSelectAll = () => {
         const flattenTreeData = flatTree(treeData, 'children').filter(item => !item.children && !item.disabled);
@@ -273,69 +278,50 @@ export function MatchesAny(props) {
             .map(item => item.key);
         const newSelectedItems = uniqBy([...(state.selectedItems || []), ...flattenTreeData], 'key');
         const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData);
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedExpandedKeys: newSelectedExpandedKeys, selectedTreeData: newSelectedTreeData })));
+        setState(prev => ({
+            ...prev,
+            selectedItems: newSelectedItems,
+            selectedExpandedKeys: newSelectedExpandedKeys,
+            selectedTreeData: newSelectedTreeData,
+        }));
     };
     // Renders
     const renderExtraValueLabels = () => {
-        if (renderExtraValues === null || renderExtraValues === void 0 ? void 0 : renderExtraValues.length) {
-            return renderExtraValues.map((extraValue, index) => (React.createElement(ExtraValueLabel, { key: extraValue.key || index },
-                React.createElement(Text, { strong: true, ellipsis: { tooltip: true } }, extraValue.label))));
+        if (renderExtraValues?.length) {
+            return renderExtraValues.map((extraValue, index) => (_jsx(ExtraValueLabel, { children: _jsx(Text, { strong: true, ellipsis: { tooltip: true }, children: extraValue.label }) }, extraValue.key || index)));
         }
         return null;
     };
-    const renderSelectList = () => {
-        var _a, _b;
-        return (React.createElement("div", { className: "matches-any__section matches-any__section--left" },
-            React.createElement("div", { className: "matches-any__header" },
-                !!groupSelectProps && (React.createElement(PopoverSelect, Object.assign({}, groupSelectProps),
-                    React.createElement(GroupSelectButton, { type: "default", size: "small", shape: "round" },
-                        React.createElement("span", { className: "group-name" }, groupSelectProps === null || groupSelectProps === void 0 ? void 0 :
-                            groupSelectProps.name,
-                            ":"),
-                        `${((_a = groupSelectProps === null || groupSelectProps === void 0 ? void 0 : groupSelectProps.selected) === null || _a === void 0 ? void 0 : _a.length) || 0} ${t(translations.global.selected)}`))),
-                React.createElement("div", { style: { width: '100%' } },
-                    React.createElement(Input.CustomSearch, { ref: searchInputRef, autoFocus: true, value: searchValue, placeholder: `${(_b = t(translations.global.search)) === null || _b === void 0 ? void 0 : _b.toString()}...`, onAfterChange: searchValue => {
-                            if (onChangeSearch) {
-                                onChangeSearch(searchValue);
-                            }
-                        } }))),
-            React.createElement("div", { className: "matches-any__body" },
-                React.createElement(Flex, { align: "center", justify: "space-between" },
-                    React.createElement(Text, { strong: true }, `${objectName} (${flatTree(treeData, 'children').filter(item => !item.children).length - 1})`),
-                    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 }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) > 1 ? (React.createElement(StyledTree, { key: selectTreeKey, expandedKeys: expandedKeys, selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+    const renderSelectList = () => (_jsxs("div", { className: "matches-any__section matches-any__section--left", children: [_jsxs("div", { className: "matches-any__header", children: [!!groupSelectProps && (_jsx(PopoverSelect, { ...groupSelectProps, children: _jsxs(GroupSelectButton, { type: "default", size: "small", shape: "round", children: [_jsxs("span", { className: "group-name", children: [groupSelectProps?.name, ":"] }), `${groupSelectProps?.selected?.length || 0} ${t(translations.global.selected)}`] }) })), _jsx("div", { style: { width: '100%' }, children: _jsx(Input.CustomSearch, { ref: searchInputRef, autoFocus: true, value: searchValue, placeholder: `${t(translations.global.search)?.toString()}...`, onAfterChange: searchValue => {
+                                if (onChangeSearch) {
+                                    onChangeSearch(searchValue);
+                                }
+                            } }) })] }), _jsxs("div", { className: "matches-any__body", children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { strong: true, children: `${objectName} (${flatTree(treeData, 'children').filter(item => !item.children).length - 1})` }), _jsxs(Flex, { align: "center", gap: 10, children: [renderExtraValueLabels(), _jsx(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll, children: t(translations.global.selectAll).toString() })] })] }), _jsx(Spin, { spinning: loading, children: treeData?.length > 1 ? (_jsx(StyledTree, { expandedKeys: expandedKeys, selectable: false, treeData: treeData, switcherIcon: props => (_jsx(Icon, { type: "icon-ants-caret-down", style: {
+                                    transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
+                                    transition: 'transform 0.3s ease',
+                                }, color: globalToken?.bw8 })), titleRender: (item) => isShowLoadMoreEl && item.isLoadMore ? (_jsx("div", { ref: loadMoreRef })) : (renderItemNodeTitle({
+                                item,
+                                onSelectItem,
+                            })), height: 396, onExpand: expandedKeys => setState(prev => ({ ...prev, expandedKeys })) }, selectTreeKey)) : (
+                        /**
+                         * If search value is not empty and no listEmpty props show no results matches key word message empty in case data is empty
+                         */
+                        !loading &&
+                            (!!searchValue && !listEmptyProps ? (_jsx(EmptyData, { showIcon: false, description: t(translations.global.noResultsMatchesKeyWord).toString() })) : (_jsx(EmptyData, { icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription, ...restListEmptyProps })))) })] })] }));
+    const renderSelectedList = () => (_jsxs("div", { className: "matches-any__section", children: [_jsxs(Flex, { className: "matches-any__header", justify: "space-between", children: [_jsx(Text, { strong: true, children: `${t(translations.global.selected)} (${selectedItems?.length || 0})` }), _jsx(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll, children: t(translations.global.removeAll).toString() })] }), _jsx("div", { className: "matches-any__body", children: !selectedItems?.length && !loading ? (_jsx(EmptyData, { icon: selectedListEmptyIcon, description: selectedListEmptyDescription, ...restSelectedListEmptyProps })) : (_jsx(StyledTree, { defaultExpandAll: true, expandedKeys: selectedExpandedKeys, selectable: false, treeData: selectedTreeData, titleRender: item => renderItemNodeTitle({
+                        item: item,
+                        mode: 'select',
+                        onRemoveItem,
+                    }), height: 420, switcherIcon: props => (_jsx(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, onExpand: expandedKeys => setState(prev => (Object.assign(Object.assign({}, prev), { expandedKeys }))) })) : (
-                /**
-                 * If search value is not empty and no listEmpty props show no results matches key word message empty in case data is empty
-                 */
-                !loading &&
-                    (!!searchValue && !listEmptyProps ? (React.createElement(EmptyData, { showIcon: false, description: t(translations.global.noResultsMatchesKeyWord).toString() })) : (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" }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && !loading ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, { defaultExpandAll: true, expandedKeys: selectedExpandedKeys, 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 })), onExpand: selectedExpandedKeys => {
-                setState(prev => (Object.assign(Object.assign({}, prev), { selectedExpandedKeys })));
-            } })))));
+                        }, color: globalToken?.bw8 })), onExpand: selectedExpandedKeys => {
+                        setState(prev => ({ ...prev, selectedExpandedKeys }));
+                    } })) })] }));
     // Handlers
     const onApplyExtendValue = (extendValues) => {
         // Filter out values that are already present in selectedItems
-        const availableExtendValues = extendValues === null || extendValues === void 0 ? void 0 : extendValues.filter(value => !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(item => item.title === value)));
+        const availableExtendValues = extendValues?.filter(value => !selectedItems?.some(item => item.title === value));
         // If there are available values to add
         if (availableExtendValues) {
             // Create new items in the format required (MatchesAnyItem)
@@ -348,55 +334,50 @@ export function MatchesAny(props) {
                 })),
             ];
             const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
-            setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
+            setState(prev => ({
+                ...prev,
+                selectedItems: newSelectedItems,
+                selectedTreeData: newSelectedTreeData,
+            }));
         }
     };
-    return (React.createElement(ConfigProvider, { theme: MATCHES_ANY_THEME },
-        React.createElement(MatchesAnyWrapper, Object.assign({}, restOfProps, { vertical: true, justify: "space-between" }),
-            React.createElement(Flex, { style: { width: '100%', height: '100%' } },
-                renderSelectList(),
-                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", disabled: isDisableApply, 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())))))));
+    return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: t(translations.apply.title).toString() }), _jsx(Button, { onClick: () => onCancel(), children: t(translations.cancel.title).toString() })] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: 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, 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"]);
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
     // State
     const [state, setState] = useState(initialState);
     // Variables
     const { isOpenPopover } = state;
-    const value = Array.isArray(selectedItems) && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length)
-        ? `${(_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` : ''}` || []
+    const value = Array.isArray(selectedItems) && selectedItems?.length
+        ? `${selectedItems?.map(item => item.title)?.[0]}${selectedItems?.slice(1)?.length ? `, and +${selectedItems?.slice(1)?.length} more` : ''}` || []
         : undefined;
     // Effects
     useDeepCompareEffect(() => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: props.searchValue || '' })));
+        setState(prev => ({ ...prev, searchValue: props.searchValue || '' }));
     }, [props.searchValue]);
     // Handlers
     const onApplyMatchesAny = (selectedItems, selectedTreeData) => {
         onChange(selectedItems, selectedTreeData);
-        setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
+        setState(prev => ({ ...prev, isOpenPopover: false }));
     };
-    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { isExternalSearch: !!onChangeSearch, searchValue: state.searchValue, className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: searchValue => {
-                setState(prev => (Object.assign(Object.assign({}, prev), { searchValue })));
+    return (_jsx(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: _jsx(MatchesAny, { isExternalSearch: !!onChangeSearch, searchValue: state.searchValue, className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: searchValue => {
+                setState(prev => ({ ...prev, searchValue }));
                 if (onChangeSearch)
                     onChangeSearch(searchValue);
-            }, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
+            }, onApply: onApplyMatchesAny, onCancel: () => setState(prev => ({ ...prev, isOpenPopover: false })), onLoadMore: onLoadMore }), align: {
             overflow: {
                 shiftY: 0,
                 shiftX: 0,
             },
         }, 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(', ') : ''}`, overlayInnerStyle: {
+        }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => ({ ...prev, isOpenPopover: !isOpenPopover })), zIndex: 1400, ...popoverProps, children: _jsx(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? 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)))));
+            }, children: _jsx(Select, { title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: {
+                    ...dropdownStyle,
+                    display: 'none',
+                    padding: 0,
+                }, loading: loading, ...restProps }) }) }));
 }

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

@@ -1,17 +1,7 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import { uniq } from 'lodash';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 // Components
 import { ApplyPopupContent, Form } from '@antscorp/antsomi-ui/es/components/molecules';
@@ -25,7 +15,7 @@ import { splitTextByNewline } from '@antscorp/antsomi-ui/es/utils';
 const { borderRadius, blue1 } = globalToken || {};
 const { t } = i18nInstance;
 // Styled
-const TextArea = styled(Input.TextArea) `
+const TextArea = styled(props => _jsx(Input.TextArea, { ...props })) `
   &.antsomi-input-borderless {
     border: 1px solid ${blue1} !important;
     border-radius: ${borderRadius}px;
@@ -33,7 +23,7 @@ const TextArea = styled(Input.TextArea) `
 `;
 export const ExtendValuePopup = props => {
     // Props
-    const { children, onApply = () => { } } = props, restProps = __rest(props, ["children", "onApply"]);
+    const { children, onApply = () => { }, ...restProps } = props;
     // State
     const [state, setState] = useState({
         isOpenPopover: false,
@@ -46,7 +36,7 @@ export const ExtendValuePopup = props => {
     const extendValues = Form.useWatch('extendValues', form);
     // Handlers
     const onClosePopover = () => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
+        setState(prev => ({ ...prev, isOpenPopover: false }));
         form.resetFields();
     };
     const onFinishSubmit = (values) => {
@@ -54,13 +44,10 @@ export const ExtendValuePopup = props => {
         onApply(extendValues);
         onClosePopover();
     };
-    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, overlayInnerStyle: {
+    return (_jsx(Popover, { open: isOpenPopover, overlayInnerStyle: {
             padding: 0,
             width: 500,
-        }, trigger: ['click'], arrow: false, placement: "topRight", onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))) }, restProps, { content: React.createElement(ApplyPopupContent, { title: t(translations.extendValue.title).toString(), applyButtonProps: {
-                disabled: !(extendValues === null || extendValues === void 0 ? void 0 : extendValues.trim()),
-            }, onCancel: onClosePopover, onApply: () => form.submit() },
-            React.createElement(Form, { form: form, onFinish: onFinishSubmit },
-                React.createElement(Form.Item, { noStyle: true, name: "extendValues" },
-                    React.createElement(TextArea, { autoSize: false, bordered: false, rows: 9, placeholder: t(translations.extendValue.placeholder).toString() })))) }), children));
+        }, trigger: ['click'], arrow: false, placement: "topRight", onOpenChange: () => setState(prev => ({ ...prev, isOpenPopover: !isOpenPopover })), ...restProps, content: _jsx(ApplyPopupContent, { title: t(translations.extendValue.title).toString(), applyButtonProps: {
+                disabled: !extendValues?.trim(),
+            }, onCancel: onClosePopover, onApply: () => form.submit(), children: _jsx(Form, { form: form, onFinish: onFinishSubmit, children: _jsx(Form.Item, { noStyle: true, name: "extendValues", children: _jsx(TextArea, { autoSize: false, bordered: false, rows: 9, placeholder: t(translations.extendValue.placeholder).toString() }) }) }) }), children: children }));
 };

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

@@ -1,12 +1,10 @@
 /// <reference types="react" />
-export declare const MatchesAnyWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const MatchesAnyWrapper: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const TextButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
     disabled?: boolean | undefined;
 }, never>;
-export declare const GroupSelectButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
-export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const GroupSelectButton: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StyledTree: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("rc-tree/lib/interface").DataNode = import("rc-tree/lib/interface").DataNode>(props: import("antd/es/tree/Tree").TreeProps<T> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<import("rc-tree").default<import("rc-tree/lib/interface").DataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
@@ -24,6 +22,6 @@ export declare const StyledTree: import("styled-components").StyledComponent<(<T
     };
     Standard: import("react").FC<import("antd/es/tree/Tree").TreeProps<import("rc-tree/lib/interface").DataNode>>;
 }, any, {}, never>;
-export declare const TextArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>, any, {}, never>;
+export declare const TextArea: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const ExtraValueLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemStatus: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const ItemStatus: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;