@antscorp/antsomi-ui 1.3.5-beta.670 → 1.3.5-beta.671

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,6 +9,7 @@ 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';
@@ -19,7 +20,7 @@ import { EmptyData, PopoverSelect, Select } from '@antscorp/antsomi-ui/es/compon
 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, } 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';
@@ -31,6 +32,7 @@ import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } fr
 // Utils
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
 import { DataIcon } from '../../icons';
+import clsx from 'clsx';
 const initialState = {
     isOpenPopover: false,
 };
@@ -41,9 +43,9 @@ const matchesAnyInitialState = {
 };
 const { t } = i18nInstance;
 const { Text } = Typography;
-export const MatchesAny = props => {
+export function MatchesAny(props) {
     // Props
-    const { objectName, loading = false, showExtendValue = true, items, groupSelectProps, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "groupSelectProps", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
+    const { objectName, loading = false, showExtendValue = true, items, groupSelectProps, renderExtraValues, customItemRenders, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
@@ -121,13 +123,24 @@ export const MatchesAny = props => {
     const onRemoveAll = () => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [] })));
     };
-    const renderItemNodeTitle = ({ item, onSelectItem, onRemoveItem, }) => {
+    const renderItemNodeTitle = ({ item, mode = 'unselect', onSelectItem, onRemoveItem, }) => {
+        var _a, _b, _c;
         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' && ((_c = customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.status) === null || _c === void 0 ? void 0 : _c.call(customItemRenders, 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
@@ -199,13 +212,13 @@ 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({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) }), (item.children
                 ? {
                     children: serializeTreeData(item.children),
                 }
                 : { className: 'leaf-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(() => {
@@ -213,6 +226,13 @@ 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, _b;
         return (React.createElement("div", { className: "matches-any__section matches-any__section--left" },
@@ -224,11 +244,18 @@ export const MatchesAny = props => {
                             ":"),
                         `${((_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: `${(_b = t(translations.global.search)) === null || _b === void 0 ? void 0 : _b.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: {
@@ -272,10 +299,10 @@ export const MatchesAny = props => {
                     React.createElement(Button, { onClick: () => onCancel() }, t(translations.cancel.title).toString())),
                 showExtendValue && (React.createElement(ExtendValuePopup, { 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, groupSelectProps, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "onChange", "onLoadMore"]);
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, onChangeSearch, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "renderExtraValues", "customItemRenders", "popoverProps", "onChangeSearch", "onChange", "onLoadMore"]);
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -288,14 +315,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, groupSelectProps: groupSelectProps, 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, 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: 3000 }, 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

@@ -18,3 +18,5 @@ export declare const StyledTree: import("styled-components").StyledComponent<(<T
     };
 }, 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 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>;

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

@@ -5,6 +5,7 @@ import { Button, Flex, Input, Typography } from '@antscorp/antsomi-ui/es/compone
 import { Tree } from '@antscorp/antsomi-ui/es/components/molecules';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { EXTRA_VALUE_SHIFT_WIDTH, EXTRA_VALUE_WIDTH } from './constants';
 const { borderRadius, bw3, bw6, blue, blue1, colorPrimary } = globalToken || {};
 export const MatchesAnyWrapper = styled(Flex) `
   width: 100%;
@@ -94,14 +95,32 @@ export const MatchesAnyWrapper = styled(Flex) `
           .title-content {
             padding: 5px 0px;
             display: flex;
-            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
             width: 100%;
             height: 100%;
             overflow: auto;
 
+            > .left-content {
+              width: 100%;
+              overflow: auto;
+            }
+
             .sub-title {
               font-size: 11px;
             }
+
+            .extra-value-content {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: ${EXTRA_VALUE_WIDTH}px;
+            }
+
+            &.extra-value {
+              width: calc(100% - ${EXTRA_VALUE_SHIFT_WIDTH}px);
+            }
           }
         }
       }
@@ -169,6 +188,7 @@ export const MatchesAnyWrapper = styled(Flex) `
 `;
 export const TextButton = styled(Typography.Text) `
   color: ${colorPrimary} !important;
+  font-weight: 500;
   cursor: pointer;
 
   ${props => props.disabled &&
@@ -201,3 +221,10 @@ export const TextArea = styled(Input.TextArea) `
     border-radius: ${borderRadius}px;
   }
 `;
+export const ExtraValueLabel = styled.div `
+  width: ${EXTRA_VALUE_WIDTH}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const ItemStatus = styled(Flex) ``;

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

@@ -1,44 +1,61 @@
 import { TreeDataNode } from 'antd';
+import { ReactNode } from 'react';
 import type { SelectProps } from '@antscorp/antsomi-ui/es/components/molecules';
-import type { FlexProps } from '@antscorp/antsomi-ui/es/components/atoms';
+import type { FlexProps, PopoverProps } from '@antscorp/antsomi-ui/es/components/atoms';
 import { PopoverSelectProps } from '../SearchPopover/types';
-export type MatchesAnyItem = TreeDataNode & {
+export type MatchesAnyItem<TItem = Record<string, any>> = TreeDataNode & {
     /**  Addition title of the item. */
     subTitle?: string;
     /** Indicates whether the item is extended */
     isExtendValue?: boolean;
     /** An array of children items. */
-    children?: MatchesAnyItem[];
-};
+    children?: MatchesAnyItem<TItem>[];
+} & TItem;
 export type GroupSelectProps = PopoverSelectProps & {
     /** Name of the group select to be displayed */
     name?: string;
 };
-export interface MatchesAnySelectProps extends SelectProps {
+export type RenderExtraValue<TItem = Record<string, any>> = {
+    key: keyof MatchesAnyItem<TItem>;
+    label: string;
+    render?: (item: MatchesAnyItem<TItem>) => ReactNode | ReactNode;
+};
+export type CustomItemRenders<TItem> = {
+    title?: (item: MatchesAnyItem<TItem>) => ReactNode;
+    subTitle?: (item: MatchesAnyItem<TItem>) => ReactNode;
+    status?: (item: MatchesAnyItem<TItem>) => ReactNode;
+};
+export interface MatchesAnySelectProps<TItem = Record<string, any>> extends SelectProps {
     /** The name of object to be displayed in Popover */
     objectName?: string;
     /** Indicates whether show the extend value button */
     showExtendValue?: boolean;
     /** An array of items. */
-    items?: MatchesAnyItem[];
+    items?: MatchesAnyItem<TItem>[];
     /** An array of selected items. */
-    selectedItems?: MatchesAnyItem[];
+    selectedItems?: MatchesAnyItem<TItem>[];
     /** The properties of the group select */
     groupSelectProps?: GroupSelectProps;
+    /** An array of render extra values */
+    renderExtraValues?: RenderExtraValue<TItem>[];
+    /** Custom item renders */
+    customItemRenders?: CustomItemRenders<TItem>;
+    /** Popover Props */
+    popoverProps?: Partial<PopoverProps>;
     /** Callback function that is called when the selected items change. */
-    onChange?: (selectedItems: MatchesAnyItem[]) => void;
+    onChange?: (selectedItems: MatchesAnyItem<TItem>[]) => void;
     /** Callback function that is called when the search value changes */
     onChangeSearch?: (searchValue: string) => void;
     /** Callback function that is called when the user scroll */
     onLoadMore?: () => void;
 }
-export interface MatchesAnyProps extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch'> {
+export interface MatchesAnyProps<TItem = Record<string, any>> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders'> {
     /**
      * Callback function that is called when the apply action is triggered.
      *
      * @param selectedItems - The array of selected items.
      */
-    onApply?: (selectedItems: MatchesAnyItem[]) => void;
+    onApply?: (selectedItems: MatchesAnyItem<TItem>[]) => void;
     /** Callback function that is called when the cancel action is triggered. */
     onCancel?: () => void;
 }

package/es/test.js

@@ -19,7 +19,9 @@ import { GET_LIST_TYPE, OBJECT_TYPES, PUBLIC_LEVEL } from './constants';
 import axios from 'axios';
 import { get } from 'lodash';
 import { MENU_PERMISSION } from './components/molecules/ShareAccess/constants';
+import { QueryClientProviderAntsomiUI, queryClientAntsomiUI } from './queries';
 import { ConfigProvider } from './providers';
+import { MatchesAnySelectTest } from './tests';
 const SHARE_ACCESS_DEFAULT_VALUE = {
     ownerId: 1600085510,
     isPublic: 1,
@@ -106,7 +108,7 @@ export const App = () => {
         console.log({ type, data });
     };
     /* MatchesAnySelect */
-    // return <MatchesAnySelectTest />;
+    return React.createElement(MatchesAnySelectTest, null);
     /* Data Table */
     return (React.createElement("div", null,
         "THIS IS TEST VITE BUILD",
@@ -213,7 +215,6 @@ export const App = () => {
 };
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(
-// <QueryClientProviderAntsomiUI client={queryClientAntsomiUI}>
-React.createElement(ConfigProvider, { locale: "en" },
-    React.createElement(App, null)));
+root.render(React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
+    React.createElement(ConfigProvider, { locale: "en" },
+        React.createElement(App, null))));

package/es/tests/MatchesAnySelect.js

@@ -1,10 +1,77 @@
 // Libraries
-import React, { useState } from 'react';
-import { MATCHES_ANY_SAMPLE_DATA, MatchesAnySelect } from '../components';
+import React, { useMemo, useState } from 'react';
+import { MatchesAnySelect, Tooltip, Typography } from '../components';
+import { EXTRA_VALUE_SAMPLE_DATA } from '../components/molecules/MatchAnySelect/constants';
+import { WarningIcon } from '../components/icons';
+import { recursiveSearchItems } from '../utils';
 export const MatchesAnySelectTest = () => {
     const [state, setState] = useState({
         selectedItems: [],
-        items: MATCHES_ANY_SAMPLE_DATA,
+        items: EXTRA_VALUE_SAMPLE_DATA.map(item => {
+            var _a;
+            return ({
+                key: item.id,
+                title: item.name,
+                segmentSize: item.segmentSize,
+                rowCount: item.rowCount,
+                subTitle: (_a = item.id) === null || _a === void 0 ? void 0 : _a.toString(),
+                status: item.status,
+            });
+        }),
+        searchValue: '',
     });
-    return (React.createElement(MatchesAnySelect, { items: state.items, selectedItems: state.selectedItems, onChange: selectedItems => setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems }))) }));
+    const memoItems = useMemo(() => recursiveSearchItems({
+        list: state.items || [],
+        searchValue: state.searchValue || '',
+        searchKeys: ['title', 'key'],
+        childrenKey: 'children',
+    }).results, [state.items, state.searchValue]);
+    console.log('matchesAnyItems:: ', state.items);
+    console.log('selectedItems:: ', state.selectedItems);
+    return (React.createElement(MatchesAnySelect, { items: memoItems, objectName: "Is member of", selectedItems: state.selectedItems, 
+        /** Support for render extra values */
+        renderExtraValues: [
+            {
+                key: 'rowCount',
+                label: 'Rows',
+            },
+            {
+                key: 'segmentSize',
+                label: 'Members',
+                render(item) {
+                    const parseNumber = parseInt(item.segmentSize);
+                    return isNaN(parseNumber) ? null : parseNumber.toLocaleString();
+                },
+            },
+        ], 
+        /** Support for custom item renders such as title, subtitle, status */
+        customItemRenders: {
+            title(item) {
+                var _a;
+                return (React.createElement(Typography.Link, { href: item.key.toString() }, (_a = item.title) === null || _a === void 0 ? void 0 : _a.toString()));
+            },
+            status(item) {
+                let tooltip = '';
+                switch (item.status) {
+                    case 3:
+                        tooltip = 'This segment is archived';
+                        break;
+                    case 4:
+                        tooltip = 'This segment does not exist';
+                        break;
+                    default:
+                        break;
+                }
+                return (!!tooltip && (React.createElement(Tooltip, { title: tooltip },
+                    React.createElement(WarningIcon, { size: 16 }))));
+            },
+        }, 
+        /** Support for handle search outside  */
+        onChangeSearch: searchValue => {
+            console.log({ searchValue });
+            setState(prev => (Object.assign(Object.assign({}, prev), { searchValue })));
+        }, onChange: selectedItems => {
+            console.log({ selectedItems });
+            setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems })));
+        } }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.670",
+  "version": "1.3.5-beta.671",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",