@antscorp/antsomi-ui 2.0.2 → 2.0.3

package/es/components/icons/LazyIcon/LazyIcon.d.ts

@@ -204,6 +204,7 @@ export declare const LazyIcon: {
         backgroundColor?: string | undefined;
     } & import("react").RefAttributes<SVGSVGElement>>>;
     LocalMallIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    LongerIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MapIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MarkAsReadIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MarketingHub30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -208,6 +208,7 @@ export const LazyIcon = {
     ListIcon: lazy(() => import('../ListIcon').then(m => ({ default: m.ListIcon }))),
     LoadingIcon: lazy(() => import('../LoadingIcon').then(m => ({ default: m.LoadingIcon }))),
     LocalMallIcon: lazy(() => import('../LocalMallIcon').then(m => ({ default: m.LocalMallIcon }))),
+    LongerIcon: lazy(() => import('../LongerIcon').then(m => ({ default: m.LongerIcon }))),
     MapIcon: lazy(() => import('../MapIcon').then(m => ({ default: m.MapIcon }))),
     MarkAsReadIcon: lazy(() => import('../MarkAsReadIcon').then(m => ({ default: m.MarkAsReadIcon }))),
     MarketingHub30Icon: lazy(() => import('../MarketingHub30Icon').then(m => ({ default: m.MarketingHub30Icon }))),

package/es/components/icons/LongerIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const LongerIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/LongerIcon.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const LongerIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("path", { d: "M14.0156 17.0156V18.9844H3.98438V17.0156H14.0156ZM20.0156 9V11.0156H3.98438V9H20.0156ZM3.98438 15V12.9844H20.0156V15H3.98438ZM3.98438 5.01562H20.0156V6.98438H3.98438V5.01562Z", fill: "currentColor" })));
+});

package/es/components/icons/index.d.ts

@@ -200,6 +200,7 @@ export { LinkManagementIcon } from './LinkManagementIcon';
 export { ListIcon } from './ListIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { LocalMallIcon } from './LocalMallIcon';
+export { LongerIcon } from './LongerIcon';
 export { MapIcon } from './MapIcon';
 export { MarkAsReadIcon } from './MarkAsReadIcon';
 export { MarketingHub30Icon } from './MarketingHub30Icon';

package/es/components/icons/index.js

@@ -200,6 +200,7 @@ export { LinkManagementIcon } from './LinkManagementIcon';
 export { ListIcon } from './ListIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { LocalMallIcon } from './LocalMallIcon';
+export { LongerIcon } from './LongerIcon';
 export { MapIcon } from './MapIcon';
 export { MarkAsReadIcon } from './MarkAsReadIcon';
 export { MarketingHub30Icon } from './MarketingHub30Icon';

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -64,6 +64,8 @@ export const AdvancedPicker = props => {
         },
         date: dayjs().tz(timezone).format(format),
         dateDisplay: dayjs().tz(timezone).format(format),
+        // date: dayjs(propsDate).tz(timezone).format(format),
+        // dateDisplay: dayjs(propsDate).tz(timezone).format(format),
     });
     const { isOpen, option, date, dateDisplay } = state;
     const isShowFixed = option.dateType.value === 'fixed' || onlyShowFixed;
@@ -146,9 +148,17 @@ export const AdvancedPicker = props => {
         }
     }, [option, format, timezone]);
     useDeepCompareEffect(() => {
+        const DEFAULT_OPTION = onlyShowFixed
+            ? {
+                dateType: 'fixed',
+                calculationDate: 'days',
+                calculationType: 'minus',
+                value: 0,
+            }
+            : {};
         try {
-            if (propsOption) {
-                const { dateType, calculationType, calculationDate, value = 0 } = propsOption || {};
+            if (propsOption || onlyShowFixed) {
+                const { dateType, calculationType, calculationDate, value = 0, } = propsOption || DEFAULT_OPTION;
                 const newDateTypes = DATE_TYPES;
                 const newDateType = newDateTypes.find(dType => dType.value === dateType);
                 const newCalculationType = CALCULATION_TYPES.find(calType => calType.value === calculationType);

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

@@ -19,7 +19,7 @@ import { EditorTabStyled } from './styled';
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/components/EditorTab/index.jsx';
 export const EditorTab = props => {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const { listTab = [], activeId = '', showArrow, showDropdown, editNameOnConfigure, 
     // disabledScroll,
     onCloseTab, onClickRemoveTab, onConfirmRemove, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab, modalFuncProps, } = props;
@@ -28,7 +28,17 @@ export const EditorTab = props => {
     const [isEditable, setIsEditable] = useState();
     const [modal, contextModal] = Modal.useModal();
     // Ref
+    const [offsetWidth, setOffsetWidth] = useState(0);
+    const [scrollWidth, setScrollWidth] = useState(0);
     const leftBlockRef = useRef(null);
+    const isLeftBlockOverflow = ((_b = leftBlockRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) && ((_c = leftBlockRef.current) === null || _c === void 0 ? void 0 : _c.scrollWidth)
+        ? ((_d = leftBlockRef.current) === null || _d === void 0 ? void 0 : _d.offsetWidth) < ((_e = leftBlockRef.current) === null || _e === void 0 ? void 0 : _e.scrollWidth)
+        : offsetWidth < scrollWidth;
+    useEffect(() => {
+        var _a, _b;
+        setOffsetWidth(((_a = leftBlockRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+        setScrollWidth(((_b = leftBlockRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) || 0);
+    }, []);
     useEffect(() => {
         if (listTab.length - arrTabs.length === 1) {
             setActiveTabId(listTab[listTab.length - 1].id);
@@ -94,7 +104,7 @@ export const EditorTab = props => {
             onActiveTab(tabId);
     }, [onActiveTab]);
     const handleCloseTab = (e, tab, idx) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c;
+        var _f, _g;
         e.stopPropagation();
         // if (arrTabs.length < 2) {
         //   return;
@@ -110,10 +120,10 @@ export const EditorTab = props => {
             return;
         if (activeTabId === tab.id) {
             if (idx === arrTabs.length - 1) {
-                handleActiveTab((_b = arrTabs[idx - 1]) === null || _b === void 0 ? void 0 : _b.id);
+                handleActiveTab((_f = arrTabs[idx - 1]) === null || _f === void 0 ? void 0 : _f.id);
             }
             else if (arrTabs.length > 1) {
-                handleActiveTab((_c = arrTabs[idx + 1]) === null || _c === void 0 ? void 0 : _c.id);
+                handleActiveTab((_g = arrTabs[idx + 1]) === null || _g === void 0 ? void 0 : _g.id);
             }
         }
         onCloseTab === null || onCloseTab === void 0 ? void 0 : onCloseTab(tab, idx, newTabs);
@@ -153,7 +163,7 @@ export const EditorTab = props => {
     }, [activeTabId, arrTabs, handleActiveTab]);
     return (React.createElement(EditorTabStyled, { className: className || '' },
         contextModal,
-        showArrow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('left') },
+        showArrow && isLeftBlockOverflow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('left') },
             React.createElement(Icon, { type: "icon-ants-angle-left" }))),
         React.createElement("div", { ref: leftBlockRef, className: classnames('left-block', leftBlockClassName), onWheel: onWheelLeftBlock }, arrTabs && arrTabs.length
             ? arrTabs.map((tab, idx) => {
@@ -192,7 +202,7 @@ export const EditorTab = props => {
                         React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", overlayStyle: { fontSize: 12 } }), size: "small" }))) : closable ? (React.createElement(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: React.createElement(Icon, { type: "icon-ants-remove-slim", overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
             })
             : null),
-        showArrow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('right') },
+        showArrow && isLeftBlockOverflow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('right') },
             React.createElement(Icon, { type: "icon-ants-angle-right" }))),
         showComposeNewQuery || newTabText ? (React.createElement(Button, { onClick: handleAddNew, className: "new-query-button" },
             React.createElement(Icon, { type: "icon-ants-add-square", style: { fontSize: '16px' } }),

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

@@ -47,11 +47,13 @@ export const EditorTabStyled = styled.div `
       align-items: center;
       flex-shrink: 0;
       gap: 7px;
-      width: 150px;
+      /* width: 150px; */
+      min-width: 150px;
+      max-width: 300px;
+
       height: 40px;
       padding: 0 10px;
       overflow: hidden;
-      max-width: 200px;
       background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
 
       /* &.active button, */

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

@@ -9,7 +9,8 @@ import { EMPTY_ICON_SIZE, EMPTY_WRAPPER_SIZE } from './constants';
 export const EmptyWrapper = styled(Flex) `
   width: 100%;
   height: 100%;
-  padding: 20px;
+  padding: 20px 0px;
+  text-align: center;
 
   .title {
     font-size: 14px;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { MatchesAnyProps, MatchesAnySelectProps } from './types';
-export declare const MatchesAny: React.FC<MatchesAnyProps>;
-export declare const MatchesAnySelect: React.FC<MatchesAnySelectProps>;
+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;

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

@@ -9,17 +9,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+/* eslint-disable react/function-component-definition */
 /* eslint-disable react/destructuring-assignment */
 // Libraries
 import { ConfigProvider } from 'antd';
 import { uniqBy } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 // Components
-import { EmptyData, Select } from '@antscorp/antsomi-ui/es/components/molecules';
+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 } from './styled';
+import { MatchesAnyWrapper, ActionButton, StyledTree, TextButton, GroupSelectButton, ExtraValueLabel, } from './styled';
 // Locales
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
@@ -30,7 +31,8 @@ import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
-import { DataIcon } from '../../icons';
+import { DataIcon, WarningIcon } from '../../icons';
+import clsx from 'clsx';
 const initialState = {
     isOpenPopover: false,
 };
@@ -41,13 +43,15 @@ const matchesAnyInitialState = {
 };
 const { t } = i18nInstance;
 const { Text } = Typography;
-export const MatchesAny = props => {
+export function MatchesAny(props) {
     // Props
-    const { objectName, loading = false, showExtendValue = true, items, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { } } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "onApply", "onCancel", "onLoadMore"]);
+    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"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
     const { searchValue, selectedItems, 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
     const { ref: loadMoreRef } = useIntersectionObserver({
         threshold: 0,
@@ -121,13 +125,31 @@ export const MatchesAny = props => {
     const onRemoveAll = () => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [] })));
     };
-    const renderItemNodeTitle = ({ item, onSelectItem, onRemoveItem, }) => {
+    const renderItemError = (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, }) => {
+        var _a, _b;
         const { isExtendValue, title, subTitle } = item; // Destructure properties from item
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "title-content" },
-                React.createElement(Text, { ellipsis: { tooltip: true } }, title),
-                subTitle && (React.createElement(Text, { className: "sub-title", ellipsis: { tooltip: true }, style: { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 } }, subTitle))),
-            React.createElement(Flex, { align: "center", gap: 5 },
+            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
@@ -142,11 +164,12 @@ export const MatchesAny = props => {
                     React.createElement(Icon, { type: `icon-ants-${onSelectItem ? 'double-arrow-up' : 'remove-slim'}`, size: 11 })))));
     };
     // Memos
-    const { treeData, matchedParents } = useMemo(() => {
+    const { treeData, matchedParents } = useDeepCompareMemo(() => {
+        var _a;
         const { results, matchedParents } = recursiveSearchItems({
             list: items || [],
             searchKeys: ['title', 'key'],
-            searchValue,
+            searchValue: !onChangeSearch ? searchValue : '',
             childrenKey: 'children',
         });
         const serializeTreeData = (list) => list.map(item => {
@@ -171,10 +194,14 @@ export const MatchesAny = props => {
                 children: serializeTreeData(item.children),
             }));
         });
-        const treeData = serializeTreeData(results);
+        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); });
+        }
         return { treeData, matchedParents };
-    }, [items, searchValue, selectedItems]);
-    const selectedTreeData = useMemo(() => {
+    }, [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)) || [];
@@ -194,11 +221,11 @@ export const MatchesAny = props => {
                     ? 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({}, item), { title: renderItemNodeTitle({ item, onRemoveItem }) }), (item.children && {
+            })) === 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, onRemoveItem }) })))) || []);
+        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(() => {
@@ -206,30 +233,50 @@ export const MatchesAny = props => {
         return !(flattenTreeData === null || flattenTreeData === void 0 ? void 0 : flattenTreeData.some(item => !item.disabled));
     }, [treeData]);
     // 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))));
+        }
+        return null;
+    };
     const renderSelectList = () => {
-        var _a;
+        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, { placeholder: `${(_a = t(translations.global.search)) === null || _a === void 0 ? void 0 : _a.toString()}...`, onAfterChange: searchValue => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue }))) }))),
+                    React.createElement(Input.CustomSearch, { placeholder: `${(_b = t(translations.global.search)) === null || _b === void 0 ? void 0 : _b.toString()}...`, onAfterChange: searchValue => {
+                            setState(prev => (Object.assign(Object.assign({}, prev), { 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(items, 'children').filter(item => !item.children).length})`),
-                    React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString())),
+                    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, { showIcon: false, description: t(translations.global.noResultsMatchesKeyWord).toString() })))))));
+                        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, { icon: React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }), description: t(translations.global.selectItemsFromList).toString() })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+            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 })) }))))));
@@ -257,12 +304,12 @@ export const MatchesAny = props => {
                 React.createElement(Flex, { align: "center", gap: 10 },
                     React.createElement(Button, { type: "primary", onClick: () => onApply(selectedItems || []) }, t(translations.apply.title).toString()),
                     React.createElement(Button, { onClick: () => onCancel() }, t(translations.cancel.title).toString())),
-                showExtendValue && (React.createElement(ExtendValuePopup, { onApply: onApplyExtendValue },
+                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 const MatchesAnySelect = props => {
+}
+export function MatchesAnySelect(props) {
     var _a, _b, _c;
-    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "onChange", "onLoadMore"]);
+    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"]);
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -275,14 +322,14 @@ export const MatchesAnySelect = props => {
         onChange(selectedItems);
         setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
     };
-    return (React.createElement(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, 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, onChangeSearch: onChangeSearch, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, 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 }))) },
+        }, 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(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.d.ts

@@ -1,3 +1,22 @@
 import { ThemeConfig, TreeDataNode } from 'antd';
+/** The width of the extra value */
+export declare const EXTRA_VALUE_WIDTH = 70;
+/** The shift width of the extra value */
+export declare const EXTRA_VALUE_SHIFT_WIDTH = 54;
 export declare const SAMPLE_DATA: TreeDataNode[];
 export declare const MATCHES_ANY_THEME: ThemeConfig;
+export declare const EXTRA_VALUE_SAMPLE_DATA: {
+    rowCount: string;
+    portalId: number;
+    itemTypeId: number;
+    status: number;
+    isSort: number;
+    isFilter: number;
+    preDefined: number;
+    segmentSize: string;
+    utime: string;
+    processStatus: string;
+    id: number;
+    name: string;
+    code: string;
+}[];

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

@@ -1,3 +1,7 @@
+/** The width of the extra value */
+export const EXTRA_VALUE_WIDTH = 70;
+/** The shift width of the extra value */
+export const EXTRA_VALUE_SHIFT_WIDTH = 54;
 export const SAMPLE_DATA = [
     {
         key: '12179',
@@ -302,3 +306,80 @@ export const MATCHES_ANY_THEME = {
         },
     },
 };
+export const EXTRA_VALUE_SAMPLE_DATA = [
+    {
+        rowCount: '5',
+        portalId: 564890051,
+        itemTypeId: -1003,
+        status: 3,
+        isSort: 1,
+        isFilter: 1,
+        preDefined: 0,
+        segmentSize: '91',
+        utime: '2024-03-06T18:00:03.336Z',
+        processStatus: '2',
+        id: 5110110,
+        name: 'ANTSOMI',
+        code: 'sgmt_5110110',
+    },
+    {
+        rowCount: '5',
+        portalId: 564890051,
+        itemTypeId: -1003,
+        status: 4,
+        isSort: 1,
+        isFilter: 1,
+        preDefined: 0,
+        segmentSize: '686',
+        utime: '2024-08-12T07:56:53.750Z',
+        processStatus: '2',
+        id: 5562963,
+        name: 'CLIENT',
+        code: 'sgmt_5562963',
+    },
+    {
+        rowCount: '5',
+        portalId: 564890051,
+        itemTypeId: -1003,
+        status: 2,
+        isSort: 1,
+        isFilter: 1,
+        preDefined: 0,
+        segmentSize: '265',
+        utime: '2024-05-14T09:48:16.678Z',
+        processStatus: '2',
+        id: 16368074,
+        name: 'Lead BSS send to client 14/5',
+        code: 'sgmt_16368074',
+    },
+    {
+        rowCount: '5',
+        portalId: 564890051,
+        itemTypeId: -1003,
+        status: 1,
+        isSort: 1,
+        isFilter: 1,
+        preDefined: 0,
+        segmentSize: '49',
+        utime: '2024-06-24T10:48:40.007Z',
+        processStatus: '2',
+        id: 17172749,
+        name: 'Customer - Antsomian',
+        code: 'sgmt_17172749',
+    },
+    {
+        rowCount: '5',
+        portalId: 564890051,
+        itemTypeId: -1003,
+        status: 1,
+        isSort: 1,
+        isFilter: 1,
+        preDefined: 0,
+        segmentSize: '534',
+        utime: '2024-06-26T08:57:01.839Z',
+        processStatus: '2',
+        id: 17190312,
+        name: 'Ba thang chua quay lai App OCB',
+        code: 'sgmt_17190312',
+    },
+];

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

@@ -3,15 +3,11 @@ export declare const MatchesAnyWrapper: import("styled-components").StyledCompon
 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 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 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>>) & {
-    TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("rc-tree/lib/interface").DataNode>>;
-    DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("rc-tree/lib/interface").DataNode = import("rc-tree/lib/interface").DataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
-        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>>) & {
-        displayName?: string | undefined;
-    };
+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 StyledTree: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 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 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>;