@antscorp/antsomi-ui 1.3.5-beta.490 → 1.3.5-beta.491

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

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import { ConfigProvider } from 'antd';
 import { uniqBy } from 'lodash';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 // Components
 import { EmptyData, 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';
@@ -27,7 +27,7 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { MATCHES_ANY_THEME } from './constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Hooks
-import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
 import { DataIcon } from '../../icons';
@@ -37,16 +37,27 @@ const initialState = {
 const matchesAnyInitialState = {
     searchValue: '',
     selectedItems: [],
+    isShowLoadMoreEl: false,
 };
 const { t } = i18nInstance;
 const { Text } = Typography;
 export const MatchesAny = props => {
     // Props
-    const { objectName, loading = false, showExtendValue = true, items, onApply = () => { }, onCancel = () => { } } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "onApply", "onCancel"]);
+    const { objectName, loading = false, showExtendValue = true, items, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { } } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "onApply", "onCancel", "onLoadMore"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
-    const { searchValue, selectedItems } = state;
+    const { searchValue, selectedItems, isShowLoadMoreEl } = state;
+    // Refs
+    const { ref: loadMoreRef } = useIntersectionObserver({
+        threshold: 0,
+        initialIsIntersecting: false,
+        onChange(isIntersecting) {
+            if (isIntersecting) {
+                onLoadMore();
+            }
+        },
+    });
     // Effects
     /**
      * Updates the `selectedItems` state when the `selectedItems` prop changes.
@@ -54,6 +65,12 @@ export const MatchesAny = props => {
     useDeepCompareEffect(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: props.selectedItems })));
     }, [props.selectedItems]);
+    useEffect(() => {
+        // Delay for show load more el
+        setTimeout(() => {
+            setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
+        }, 500);
+    }, []);
     // Handlers
     /**
      * Adds an item and, if applicable, its leaf descendants to the list of selected items.
@@ -147,7 +164,10 @@ export const MatchesAny = props => {
                     (selectedItem.isExtendValue && selectedItem.title === item.title)))
                 : selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key ||
                     (selectedItem.isExtendValue && selectedItem.title === item.title));
-            return Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, onSelectItem }), disabled: isSelected }), (item.children && {
+            return Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({
+                    item,
+                    onSelectItem,
+                }), disabled: isSelected }), (item.children && {
                 children: serializeTreeData(item.children),
             }));
         });
@@ -155,8 +175,10 @@ export const MatchesAny = props => {
         return { treeData, matchedParents };
     }, [items, searchValue, selectedItems]);
     const selectedTreeData = useMemo(() => {
-        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);
+        var _a;
+        const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
+        const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
+        const lazyLoadSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(selectedItem => !flatTree(items || [], 'children').some(item => item.key === selectedItem.key))) || [];
         const serializeTreeData = (list) => {
             var _a;
             return ((_a = list
@@ -176,7 +198,7 @@ export const MatchesAny = props => {
                 children: serializeTreeData(item.children),
             }))))) || [];
         };
-        return serializeTreeData(items || []).concat((extendValueSelectedItems === null || extendValueSelectedItems === void 0 ? void 0 : extendValueSelectedItems.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, onRemoveItem }) })))) || []);
     }, [items, selectedItems]);
     const isDisableRemoveAll = useDeepCompareMemo(() => !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length), [selectedTreeData]);
     const isDisableSelectAll = useDeepCompareMemo(() => {
@@ -195,21 +217,22 @@ export const MatchesAny = props => {
                     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(Spin, { spinning: loading },
-                    React.createElement(Scrollbars, { style: { height: '100%' } }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (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 })) })) : (React.createElement(EmptyData, { showIcon: false, description: t(translations.global.noResultsMatchesKeyWord).toString() })))))));
+                    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() })))))));
     };
     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(Spin, { spinning: loading },
-                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, width: 48, height: 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: {
-                            transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
-                            transition: 'transform 0.3s ease',
-                        }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) })))))));
+            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, width: 48, height: 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: {
+                        transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
+                        transition: 'transform 0.3s ease',
+                    }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) }))))));
     // Handlers
     const onApplyExtendValue = (extendValues) => {
         // Filter out values that are already present in selectedItems
@@ -239,7 +262,7 @@ export const MatchesAny = props => {
 };
 export const MatchesAnySelect = props => {
     var _a, _b, _c;
-    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, onChange = () => { } } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "onChange"]);
+    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"]);
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -252,7 +275,7 @@ 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 }))) }), overlayStyle: { width: 700 }, overlayInnerStyle: {
+    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 }), overlayStyle: { width: 700 }, overlayInnerStyle: {
             padding: 0,
         }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))) },
         React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ') : ''}` },

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

@@ -20,6 +20,8 @@ export interface MatchesAnySelectProps extends SelectProps {
     selectedItems?: MatchesAnyItem[];
     /** Callback function that is called when the selected items change. */
     onChange?: (selectedItems: MatchesAnyItem[]) => void;
+    /** Callback function that is called when the user scroll */
+    onLoadMore?: () => void;
 }
 export interface MatchesAnyProps extends Omit<FlexProps, 'children'> {
     /** The name of the object, corresponding to the `objectName` property in `MatchesAnySelectProps`. */
@@ -40,4 +42,6 @@ export interface MatchesAnyProps extends Omit<FlexProps, 'children'> {
     onApply?: (selectedItems: MatchesAnyItem[]) => void;
     /** Callback function that is called when the cancel action is triggered. */
     onCancel?: () => void;
+    /** Callback function that is called when the user scroll */
+    onLoadMore?: MatchesAnySelectProps['onLoadMore'];
 }

package/es/components/organism/DataTable/components/Filter/AddFilterButton.js

@@ -13,7 +13,7 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { EXCEPTION_OFF_FILTER_CLASS } from '../../constants/filter';
 export const AddFilterButton = memo(() => {
     const { t } = i18nInstance;
-    const { openPopover, selectedFilterMetric, matchesAny, onSelectFilterMetric, onApplyFilterMetricCondition, onClickAddFilter, onChangeFilterCondition, setState: setAddFilterConditionState, } = useAddFilterCondition();
+    const { openPopover, selectedFilterMetric, matchesAny, onSelectFilterMetric, onApplyFilterMetricCondition, onClickAddFilter, onChangeFilterCondition, onMatchesAnyLoadMore, setState: setAddFilterConditionState, } = useAddFilterCondition();
     return (React.createElement(Popover, { open: openPopover, content: React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS }, selectedFilterMetric ? (React.createElement(FilterCondition, { filterMetric: selectedFilterMetric, matchesAny: matchesAny, onCancel: () => onSelectFilterMetric(undefined), onApply: ({ operator, value }) => {
                 onApplyFilterMetricCondition({
                     filterMetric: selectedFilterMetric,
@@ -22,7 +22,7 @@ export const AddFilterButton = memo(() => {
                 });
                 onSelectFilterMetric(undefined);
                 setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: false })));
-            }, onChange: condition => {
+            }, onLoadMore: () => onMatchesAnyLoadMore(selectedFilterMetric.id), onChange: condition => {
                 const { id, dataType } = selectedFilterMetric;
                 const { operator, value } = condition || {};
                 onChangeFilterCondition({

package/es/components/organism/DataTable/components/Filter/FilterCondition/index.d.ts

@@ -11,6 +11,7 @@ interface FilterConditionProps {
     onCancel?: () => void;
     onApply?: (values: TFormType) => void;
     onChange?: (values: TFormType) => void;
+    onLoadMore?: () => void;
 }
 export declare const FilterCondition: React.FC<FilterConditionProps>;
 export {};

package/es/components/organism/DataTable/components/Filter/FilterCondition/index.js

@@ -11,7 +11,7 @@ import { renderValueField } from '../../../utils';
 const { BETWEEN, EXISTS, NOT_EXISTS } = OPERATORS_OPTION;
 export const FilterCondition = props => {
     // Props
-    const { filterMetric, filterCondition, matchesAny, onChange, onCancel, onApply } = props;
+    const { filterMetric, filterCondition, matchesAny, onChange, onCancel, onApply, onLoadMore } = props;
     // Hooks
     const [form] = Form.useForm();
     // Form
@@ -96,6 +96,7 @@ export const FilterCondition = props => {
                     operator,
                     value,
                     matchesAny,
+                    onLoadMore,
                     onChangeValue: value => {
                         form.setFieldsValue({
                             value,

package/es/components/organism/DataTable/components/Filter/FilterConditionList.js

@@ -22,7 +22,7 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 const { t } = i18nInstance;
 export const FilterConditionList = memo(() => {
     // Store
-    const { filterMetrics, filters, isFilterActive, matchesAny, onChangeFilters = () => { }, onChangeFilterCondition = () => { }, } = useDataTableContext(store => store.filter);
+    const { filterMetrics, filters, isFilterActive, matchesAny, onChangeFilters = () => { }, onChangeFilterCondition = () => { }, onMatchesAnyLoadMore = () => { }, } = useDataTableContext(store => store.filter);
     const setFilter = useDataTableContext(store => store.setFilter);
     // State
     /* Reserve for handle popover open per filter condition */
@@ -80,7 +80,7 @@ export const FilterConditionList = memo(() => {
                             value: condition.value,
                             dataType: metric.dataType,
                         });
-                    }, onCancel: () => handleTogglePopover(index, false) })), trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0, overflow: 'visible' }, arrow: false, placement: "bottomLeft", onOpenChange: open => handleTogglePopover(index, open) },
+                    }, onLoadMore: () => onMatchesAnyLoadMore(metric.id), onCancel: () => handleTogglePopover(index, false) })), trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0, overflow: 'visible' }, arrow: false, placement: "bottomLeft", onOpenChange: open => handleTogglePopover(index, open) },
             React.createElement(FilterItem, { gap: 5, onClick: () => setFilter({
                     isFilterActive: true,
                 }), name: (metric === null || metric === void 0 ? void 0 : metric.name) || column.toString() || '', operator: operator, value: value, onClickRemove: () => onClickRemoveFilter(index) })));

package/es/components/organism/DataTable/hooks/useAddFilterButton.d.ts

@@ -21,6 +21,7 @@ export declare const useAddFilterCondition: () => {
     onApplyFilterMetricCondition: (values: OnApplyFilterMetricConditionValue) => void;
     onClickAddFilter: () => void;
     onChangeFilterCondition: (filterItem: import("../types").FilterItem) => void;
+    onMatchesAnyLoadMore: (metricId?: string | number | undefined) => void;
     openPopover?: boolean | undefined;
     selectedFilterMetric?: FilterMetricItem | undefined;
 };

package/es/components/organism/DataTable/hooks/useAddFilterButton.js

@@ -10,7 +10,7 @@ export const useAddFilterCondition = () => {
         selectedFilterMetric: undefined,
     });
     // Store
-    const { filters, matchesAny, onChangeFilters = () => { }, onChangeFilterCondition = () => { }, } = useDataTableContext(store => store.filter);
+    const { filters, matchesAny, onChangeFilters = () => { }, onChangeFilterCondition = () => { }, onMatchesAnyLoadMore = () => { }, } = useDataTableContext(store => store.filter);
     const setFilter = useDataTableContext(store => store.setFilter);
     // Handlers
     const onSelectFilterMetric = useCallback((filterMetric) => {
@@ -54,5 +54,6 @@ export const useAddFilterCondition = () => {
         onSelectFilterMetric,
         onApplyFilterMetricCondition,
         onClickAddFilter,
-        onChangeFilterCondition });
+        onChangeFilterCondition,
+        onMatchesAnyLoadMore });
 };

package/es/components/organism/DataTable/hooks/useDataTable.js

@@ -1,6 +1,7 @@
 // Context
 import { useDataTableContext } from '../contexts/DataTableContext';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { omit } from 'lodash';
 export const useDataTable = (props) => {
     // Props
     const { table, toolbar, filter, pagination } = props || {};
@@ -25,7 +26,7 @@ export const useDataTable = (props) => {
     /* Handle update filter */
     useDeepCompareEffect(() => {
         if (filter) {
-            setFilter(filter);
+            setFilter(omit(filter, 'onMatchesAnyLoadMore'));
         }
     }, [setFilter, filter]);
     /* Handle update pagination */

package/es/components/organism/DataTable/hooks/useDataTableListing/types.d.ts

@@ -14,6 +14,7 @@ export type TApiGlobal = AxiosRequestConfig<any> & {
 type TMatchesAnyParams = (filterItem?: FilterItem) => any | any;
 type TMatchesAnyProps = {
     formatData: (response: any) => MatchesAnyItem[];
+    total?: (response: any) => number | number;
 };
 export type TConfig<TTableType = any> = {
     env?: TEnv;

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { isEmpty, pick } from 'lodash';
+import { flatMap, isEmpty, pick } from 'lodash';
 import { useQueryClient } from '@tanstack/react-query';
 // Types
 import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
@@ -33,7 +33,7 @@ import { MODIFY_COLUMN_DISABLE_EDITABLE, MODIFY_COLUMN_DISABLE_REMOVE, SAVED_FIL
 import { DEFAULT_CELL_EMPTY, DEFAULT_TOGGLE_WIDTH, SORT_MAP } from '../../constants';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
-import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, useGetColumnMetrics, useGetFilterMetricList, useGetMatchesAnyList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing, useSaveFilter, useUpdateFilter, useUpdateModifyColumn, } from '@antscorp/antsomi-ui/es/queries';
+import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, useGetColumnMetrics, useGetFilterMetricList, useGetInfiniteMatchesAnyList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing, useSaveFilter, useUpdateFilter, useUpdateModifyColumn, } from '@antscorp/antsomi-ui/es/queries';
 // Utils
 import { flatTree, mapResponseSearchToGeneral, parseJSONFromLocalStorage, } from '@antscorp/antsomi-ui/es/utils';
 import { METRIC_MAP_NUMBER_TYPE } from '../../constants/filter';
@@ -91,6 +91,14 @@ export function useDataTableListing(props) {
     const matchesAnyRequest = (apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()])
         ? apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()]
         : apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny.general;
+    /**
+     * If `selectedFilterItem` has a column, the function will attempt to find a matching property in the `matchesAny`
+     * object by converting the column name to lowercase. If such a property does not exist, it will default to using
+     * the `general` property from the `matchesAny` object.
+     */
+    const matchesAnyProps = (matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()])
+        ? matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()]
+        : matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny.general;
     // Memos
     const mapObject = useDeepCompareMemo(() => ({
         objType: object === null || object === void 0 ? void 0 : object.type,
@@ -131,7 +139,7 @@ export function useDataTableListing(props) {
         },
         options: Object.assign({ enabled: enabledApiFilter }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getFilterMetricList),
     });
-    const getMatchesAnyList = useGetMatchesAnyList({
+    const getInfiniteMatchesAnyList = useGetInfiniteMatchesAnyList({
         args: {
             auth,
             params: (_a = matchesAnyRequest === null || matchesAnyRequest === void 0 ? void 0 : matchesAnyRequest.params) === null || _a === void 0 ? void 0 : _a.call(matchesAnyRequest, selectedFilterItem),
@@ -140,9 +148,27 @@ export function useDataTableListing(props) {
         options: {
             enabled: !!selectedFilterItem &&
                 [MATCHES_ANY, NOT_MATCHES, MATCHES].includes(selectedFilterItem.operator) &&
-                !!matchesAnyRequest,
+                !!matchesAnyRequest &&
+                (typeof matchesAnyRequest.enabled === 'boolean' ? matchesAnyRequest.enabled : true),
             keepPreviousData: true,
             retry: false,
+            getNextPageParam(lastPage, allPages) {
+                // Extract the total number of items from the last fetched page
+                const total = (typeof (matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.total) === 'function'
+                    ? matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.total(lastPage)
+                    : matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.total) || lastPage.total;
+                // Check if the total number of items is defined
+                if (total) {
+                    // Calculate the current total number of items retrieved so far
+                    // Process all pages and their data using formatData function and flatten the results
+                    const currentTotalItems = flatMap(allPages === null || allPages === void 0 ? void 0 : allPages.map(page => { var _a; return ((_a = matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.formatData) === null || _a === void 0 ? void 0 : _a.call(matchesAnyProps, page)) || []; }));
+                    // If the total number of items fetched is less than the total available,
+                    // return the next page number (allPages.length + 1). Otherwise, return undefined.
+                    return ((currentTotalItems === null || currentTotalItems === void 0 ? void 0 : currentTotalItems.length) || 0) < total ? (allPages === null || allPages === void 0 ? void 0 : allPages.length) + 1 : undefined;
+                }
+                // If the total number of items is not defined, return undefined
+                return undefined;
+            },
         },
     });
     // Variables
@@ -177,7 +203,7 @@ export function useDataTableListing(props) {
     const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, } = getTableListing || {};
     const { body: tableBody, header: tableHeader, total } = tableListing || {};
     const { data: searchListingData, isLoading: isSearchListingLoading, isFetching: isSearchListingFetching, } = getSearchListing || {};
-    const { data: matchesAnyListData, isLoading: isMatchesAnyListLoading = false } = getMatchesAnyList || {};
+    const { data: infiniteMatchesAnyData, isFetchingNextPage, isLoading: isMatchesAnyListLoading = false, isFetching: isMatchesAnyListFetching = false, fetchNextPage, } = getInfiniteMatchesAnyList || {};
     // Conditionally format search listing data based on the presence of a formatData function in searchProps.
     // If formatData is defined, use it to format searchListingData.
     // Otherwise, use the mapResponseSearchToGeneral function to format searchListingData.
@@ -299,16 +325,16 @@ export function useDataTableListing(props) {
         return ((searchListingBody === null || searchListingBody === void 0 ? void 0 : searchListingBody.map(searchItem => (Object.assign(Object.assign({}, Object.entries(itemMapKeys || {}).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [key]: searchItem[value] })), {})), { icon: typeof icon === 'function' ? icon(searchItem) : icon, link: typeof link === 'function' ? link(searchItem) : link })))) || []);
     }, [searchListingData, searchProps]);
     const matchesAnyList = useDeepCompareMemo(() => {
-        /**
-         * If `selectedFilterItem` has a column, the function will attempt to find a matching property in the `matchesAny`
-         * object by converting the column name to lowercase. If such a property does not exist, it will default to using
-         * the `general` property from the `matchesAny` object.
-         */
-        const matchesAnyProps = (matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()])
-            ? matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()]
-            : matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny.general;
-        return (matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.formatData(matchesAnyListData)) || [];
-    }, [matchesAny, matchesAnyListData, selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column]);
+        var _a;
+        const { formatData } = matchesAnyProps || {};
+        let matchesAnyList = [];
+        if (formatData) {
+            (_a = infiniteMatchesAnyData === null || infiniteMatchesAnyData === void 0 ? void 0 : infiniteMatchesAnyData.pages) === null || _a === void 0 ? void 0 : _a.forEach(page => {
+                matchesAnyList = matchesAnyList.concat((formatData === null || formatData === void 0 ? void 0 : formatData(page)) || []);
+            });
+        }
+        return matchesAnyList;
+    }, [matchesAny, infiniteMatchesAnyData, selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column]);
     // Effects
     /**
      * Update values from local storage to state
@@ -501,6 +527,11 @@ export function useDataTableListing(props) {
             exact: false,
         });
     }, [name, queryClient]);
+    const onMatchesAnyLoadMore = useCallback(() => {
+        if (!isFetchingNextPage) {
+            fetchNextPage();
+        }
+    }, [fetchNextPage, isFetchingNextPage]);
     return {
         /* Modify Column */
         modifyColumn: {
@@ -526,11 +557,12 @@ export function useDataTableListing(props) {
             filterMetrics,
             matchesAny: {
                 list: matchesAnyList,
-                isLoading: isMatchesAnyListLoading && !!matchesAnyRequest,
+                isLoading: (isMatchesAnyListLoading || isMatchesAnyListFetching) && !!matchesAnyRequest,
             },
             onSaveFilter,
             onChangeFilters,
             onChangeFilterCondition,
+            onMatchesAnyLoadMore,
         },
         /* Pagination */
         pagination: Object.assign(Object.assign({}, pagination), { total, onChange: onChangePagination }),

package/es/components/organism/DataTable/types/filter.d.ts

@@ -50,5 +50,7 @@ export interface FilterProps<TActionKey extends string[] = []> {
     onSaveFilter?: (args: TOnSaveFilterArgs) => Promise<TConfirmResponse>;
     /** Handle callback when filter condition changed */
     onChangeFilterCondition?: (filterItem: FilterItem) => void;
+    /** Handle callback when matches any load more */
+    onMatchesAnyLoadMore?: (metricId?: FilterMetricItem['id']) => void;
 }
 export type TApiFilter = Record<string, any>[];

package/es/components/organism/DataTable/utils/filter.d.ts

@@ -17,6 +17,7 @@ type TRenderValueField = {
     value?: any;
     matchesAny?: FilterProps['matchesAny'];
     onChangeValue?: (value: any) => void;
+    onLoadMore?: () => void;
 };
 type TGetFilterMetricByName = {
     filterMetrics: FilterMetricItem[];
@@ -74,7 +75,7 @@ export declare const serializeFilterMetricsToMenuItems: ({ filterMetrics, level,
  * // ]
  */
 export declare const flatFilterMetrics: (filterMetrics: FilterMetricItem[]) => FilterMetricItem[];
-export declare const renderValueField: ({ filterMetric, operator, value, matchesAny, onChangeValue, }: TRenderValueField) => React.JSX.Element | null;
+export declare const renderValueField: ({ filterMetric, operator, value, matchesAny, onLoadMore, onChangeValue, }: TRenderValueField) => React.JSX.Element | null;
 /**
  * Retrieves a filter metric by its name from a collection of filter metrics.
  *

package/es/components/organism/DataTable/utils/filter.js

@@ -104,7 +104,7 @@ export const flatFilterMetrics = (filterMetrics) => filterMetrics.reduce((acc, c
     return [...acc, cur];
 }, []);
 /* Render Value Field */
-export const renderValueField = ({ filterMetric, operator, value, matchesAny, onChangeValue = () => { }, }) => {
+export const renderValueField = ({ filterMetric, operator, value, matchesAny, onLoadMore = () => { }, onChangeValue = () => { }, }) => {
     const { dataType, name } = filterMetric;
     switch (operator) {
         case OPERATORS_CODE.GREATER_THAN:
@@ -160,7 +160,7 @@ export const renderValueField = ({ filterMetric, operator, value, matchesAny, on
         case OPERATORS_CODE.MATCHES_ANY:
         case OPERATORS_CODE.NOT_MATCHES: {
             const { list, isLoading } = matchesAny || {};
-            return (React.createElement(MatchesAnySelect, { selectedItems: Array.isArray(value) ? value : [], popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue }));
+            return (React.createElement(MatchesAnySelect, { selectedItems: Array.isArray(value) ? value : [], popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue, onLoadMore: onLoadMore }));
         }
         case OPERATORS_CODE.AFTER:
         case OPERATORS_CODE.AFTER_DATE:

package/es/components/template/TemplateListing/hooks/useTemplateListing.js

@@ -102,6 +102,7 @@ export const useTemplateListing = (options) => {
         //   enabled: false,
         // },
     });
+    console.log('infiniteObjectTemplate', infiniteObjectTemplate);
     // useDeepCompareEffect(() => {
     //   refetchTemplateList();
     // }, [getTemplateListParams]);

package/es/constants/queries.d.ts

@@ -34,4 +34,5 @@ export declare const QUERY_KEYS: {
     GET_FILTER_METRIC_LIST: string;
     GET_SEARCH_LIST: string;
     GET_MATCHES_ANY_LIST: string;
+    GET_INFINITE_MATCHES_ANY_LIST: string;
 };

package/es/constants/queries.js

@@ -47,4 +47,5 @@ export const QUERY_KEYS = {
     GET_FILTER_METRIC_LIST: 'GET_FILTER_METRIC_LIST',
     GET_SEARCH_LIST: 'GET_SEARCH_LIST',
     GET_MATCHES_ANY_LIST: 'GET_MATCHES_ANY_LIST',
+    GET_INFINITE_MATCHES_ANY_LIST: 'GET_INFINITE_MATCHES_ANY_LIST',
 };

package/es/queries/DataTable/index.d.ts

@@ -1,4 +1,4 @@
-import { UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
+import { UseInfiniteQueryOptions, UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
 import { TCreateModifyColumnArgs, TDeleteModifyColumnArgs, TDeleteSavedFilterArgs, TGetFilterMetricListArgs, TGetMatchesAnyListArgs, TGetMetricListArgs, TGetModifyColumnListArgs, TGetSavedFilterListArgs, TGetSearchListingArgs, TGetTableListingArgs, TSaveFilterArgs, TUpdateFilterArgs, TUpdateModifyColumnArgs } from '../../services/DataTable';
 import { ColumnMetric, FilterMetric, ModifyColumn } from '../../models/DataTable';
 import { SavedFilter } from '../../models/DataTable/SavedFilter';
@@ -41,6 +41,10 @@ export type TGetMatchesAnyList = {
     args: TGetMatchesAnyListArgs;
     options?: UseQueryOptions<any, any, any, any[]>;
 };
+export type TGetInfiniteMatchesAnyList = {
+    args: TGetMatchesAnyListArgs;
+    options?: UseInfiniteQueryOptions<any, any, any, any[]>;
+};
 export type TSaveFilter = {
     auth: TSaveFilterArgs['auth'];
     options?: UseMutationOptions<{
@@ -92,3 +96,4 @@ export declare const useDeleteSavedFilter: (params?: TDeleteSavedFilter) => impo
 export declare const useGetTableListing: <T>(params: TGetTableListing<T>) => import("@tanstack/react-query").UseQueryResult<DataTableListing<T>, any>;
 export declare const useGetSearchListing: (params: TGetSearchListing) => import("@tanstack/react-query").UseQueryResult<any, any>;
 export declare const useGetMatchesAnyList: (params: TGetMatchesAnyList) => import("@tanstack/react-query").UseQueryResult<any, any>;
+export declare const useGetInfiniteMatchesAnyList: (params: TGetMatchesAnyList) => import("@tanstack/react-query").UseInfiniteQueryResult<any, any>;

package/es/queries/DataTable/index.js

@@ -1,11 +1,11 @@
 // Types
-import { useMutation, useQuery, useQueryClient, } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient, } from '@tanstack/react-query';
 import { omit } from 'lodash';
 // Services
 import { dataTableServices, } from '../../services/DataTable';
 // Constants
 import { QUERY_KEYS } from '../../constants';
-const { GET_COLUMN_METRICS, GET_MODIFY_COLUMN_LIST, GET_SAVED_FILTER_LIST, GET_FILTER_METRIC_LIST, GET_SEARCH_LIST, GET_MATCHES_ANY_LIST, GET_DATA_TABLE_LISTING, } = QUERY_KEYS;
+const { GET_COLUMN_METRICS, GET_MODIFY_COLUMN_LIST, GET_SAVED_FILTER_LIST, GET_FILTER_METRIC_LIST, GET_SEARCH_LIST, GET_MATCHES_ANY_LIST, GET_DATA_TABLE_LISTING, GET_INFINITE_MATCHES_ANY_LIST, } = QUERY_KEYS;
 /* Column */
 export const useGetColumnMetrics = (params) => {
     const { args, options } = params;
@@ -91,3 +91,7 @@ export const useGetMatchesAnyList = (params) => {
     const { args, options } = params || {};
     return useQuery(Object.assign({ queryKey: [GET_MATCHES_ANY_LIST, args], queryFn: ({ signal }) => dataTableServices.filter.getMatchesAnyList(Object.assign(Object.assign({}, args), { request: Object.assign(Object.assign({}, args.request), { signal }) })) }, options));
 };
+export const useGetInfiniteMatchesAnyList = (params) => {
+    const { args, options } = params || {};
+    return useInfiniteQuery(Object.assign({ queryKey: [GET_INFINITE_MATCHES_ANY_LIST, args], queryFn: ({ signal, pageParam = 1 }) => dataTableServices.filter.getMatchesAnyList(Object.assign(Object.assign({}, args), { request: Object.assign(Object.assign({}, args.request), { signal }), params: Object.assign(Object.assign({}, args.params), { page: pageParam }) })), getNextPageParam: () => undefined }, options));
+};

package/es/tests/DataTableTest.js

@@ -49,12 +49,11 @@ export const DataTableTest = () => {
                         },
                     },
                     survey_id: {
-                        url: 'https://sandbox-survey.antsomi.com/api/v1/survey/filter/get-value-matches-any',
-                        params(filterItem) {
-                            var _a;
+                        url: 'https://sandbox-survey.antsomi.com/api/v1/survey/performance',
+                        params() {
                             return {
-                                test: 'survey_id',
-                                metric_code: (_a = filterItem === null || filterItem === void 0 ? void 0 : filterItem.column) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase(),
+                                page: 1,
+                                limit: 20,
                             };
                         },
                     },
@@ -100,24 +99,24 @@ export const DataTableTest = () => {
                 },
                 survey_id: {
                     formatData(response) {
-                        return response === null || response === void 0 ? void 0 : response.rows.map(record => ({
-                            key: record.value,
-                            title: record.value,
+                        return response === null || response === void 0 ? void 0 : response.body.map(record => ({
+                            key: record.survey_id,
+                            title: record.survey_id,
                         }));
                     },
                 },
             },
-            formatFilterValue: {
-                matches(value) {
-                    return Array.isArray(value) && value.map(item => item.key).join(',');
-                },
-                matches_any(value) {
-                    return Array.isArray(value) && value.map(item => item.key).join(',');
-                },
-                not_matches(value) {
-                    return Array.isArray(value) && value.map(item => item.key).join(',');
-                },
-            },
+            // formatFilterValue: {
+            //   matches(value) {
+            //     return Array.isArray(value) && value.map(item => item.key).join(',');
+            //   },
+            //   matches_any(value) {
+            //     return Array.isArray(value) && value.map(item => item.key).join(',');
+            //   },
+            //   not_matches(value) {
+            //     return Array.isArray(value) && value.map(item => item.key).join(',');
+            //   },
+            // },
         },
     });
     return (React.createElement(BrowserRouter, null,

package/package.json

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