@antscorp/antsomi-ui 1.3.5-beta.460 → 1.3.5-beta.461

package/es/components/molecules/SearchPopover/components/PopoverAddField/PopoverAddField.js

@@ -20,12 +20,12 @@ import { Icon } from '../../../../atoms';
 import Scrollbars from 'react-custom-scrollbars';
 export const PopoverAddField = (props) => {
     var _a, _b;
-    const { open: openProp, selected, fields = [], onCancel, onApply, inputSearchProps = {}, children } = props, rest = __rest(props, ["open", "selected", "fields", "onCancel", "onApply", "inputSearchProps", "children"]);
+    const { open: openProp, selected, fields = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all' } = props, rest = __rest(props, ["open", "selected", "fields", "onCancel", "onApply", "inputSearchProps", "children", "showAllLabel", "showSelectedLabel", "selectAllLabel", "deselectAllLabel"]);
     const { value: searchValue } = inputSearchProps, restInputSearchProps = __rest(inputSearchProps, ["value"]);
     const [open, setOpen] = useState(openProp);
     const [selectedKeys, setSelectedKeys] = useState(new Set());
     const [search, setSearch] = useState('');
-    const [showChecked, setShowChecked] = useState(false);
+    const [showSelected, setShowSelected] = useState(false);
     const applyDisabled = selectedKeys.size === 0;
     useEffect(() => {
         if (openProp !== undefined) {
@@ -48,11 +48,11 @@ export const PopoverAddField = (props) => {
             const keyIncluded = searchStringQuery(field.key, search);
             return labelIncluded || keyIncluded;
         });
-        if (showChecked) {
+        if (showSelected) {
             result = result.filter(field => selectedKeys.has(field.key));
         }
         return result;
-    }, [fields, search, showChecked, selectedKeys]);
+    }, [fields, search, showSelected, selectedKeys]);
     const handleToggleField = (field, checked) => {
         const newSelectedKeys = new Set(selectedKeys);
         if (checked) {
@@ -79,7 +79,10 @@ export const PopoverAddField = (props) => {
             inputSearchProps.onAfterChange(searchValue);
         }
     };
-    const handleUncheckAll = () => {
+    const handleSelectAll = () => {
+        setSelectedKeys(new Set(fields.map(field => field.key)));
+    };
+    const handleDeselectAll = () => {
         setSelectedKeys(new Set());
     };
     const handleAfterOpenChange = (visible) => {
@@ -96,8 +99,8 @@ export const PopoverAddField = (props) => {
     };
     return (React.createElement(SearchPopover, Object.assign({}, rest, { content: React.createElement(React.Fragment, null,
             !!fields.length && (React.createElement("div", { className: "actions" },
-                React.createElement(Button, { type: "link", size: "small", onClick: () => setShowChecked(current => !current) }, showChecked ? 'Show all' : 'Show checked'),
-                !!selectedKeys.size && (React.createElement(Button, { type: "link", onClick: handleUncheckAll }, "Uncheck all")))),
+                React.createElement(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current) }, showSelected ? showAllLabel : showSelectedLabel),
+                selectedKeys.size === fields.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
             !!filteredField.length && (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 260 },
                 React.createElement(Menu, { className: "list-fields", selectable: false, items: filteredField.map(field => ({
                         key: field.key,

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

@@ -15,4 +15,8 @@ export type PopoverAddFieldProps = SearchPopoverProps & Partial<{
     onCancel: () => void;
     onApply: (selected: string[]) => void;
     children: React.ReactNode;
+    showAllLabel: string;
+    showSelectedLabel: string;
+    deselectAllLabel: string;
+    selectAllLabel: string;
 }>;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.js

@@ -22,7 +22,7 @@ const innerElementType = forwardRef((_a, ref) => {
     return React.createElement("div", Object.assign({ ref: ref, style: style }, rest));
 });
 export const MenuInline = (props) => {
-    const { width, height, items = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, openKeys: openKeysProp = [], onClick, selectable = false, className, } = props;
+    const { items = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, openKeys: openKeysProp = [], onClick, selectable = false, className, } = props;
     const [openKeys, setOpenKeys] = useState(new Set());
     const [selectedKeys, setSelectedKeys] = useState(new Set());
     useDeepCompareEffect(() => {
@@ -93,12 +93,11 @@ export const MenuInline = (props) => {
         const { index, style } = args;
         const item = flattenItems[index];
         const indentSize = ((item.level || 0) - 1) * inlineIndent;
-        const itemStyle = Object.assign(Object.assign({}, style), { paddingLeft: indentSize + inlinePadding, paddingRight: inlinePadding, marginTop: itemSpacing, marginBottom: itemSpacing });
+        const itemStyle = Object.assign(Object.assign({}, style), { paddingLeft: indentSize + inlinePadding, paddingRight: inlinePadding, top: Number(style.top) + itemSpacing, height: Number(style.height) - itemSpacing });
         return (React.createElement(Item, { className: clsx({
                 'item-selected': selectedKeys.has(item.key),
             }, item.className), onClick: handleClickItem(item, index), style: itemStyle, item: item }));
     }, [flattenItems, handleClickItem, inlinePadding, inlineIndent, itemSpacing, selectedKeys]);
     // console.log('render');
-    return (React.createElement("div", { className: className, style: { width: width || '100%', height: height || '100%' } },
-        React.createElement(AutoSizer, null, autoSize => (React.createElement(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: autoSize.scaledHeight, width: autoSize.scaledWidth, innerElementType: innerElementType, useIsScrolling: true }, renderItem)))));
+    return (React.createElement(AutoSizer, null, autoSize => (React.createElement(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: autoSize.scaledHeight, width: autoSize.scaledWidth, innerElementType: innerElementType, useIsScrolling: true }, renderItem))));
 };

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

@@ -12,8 +12,6 @@ export type VirtualizedMenuProps = Partial<{
     items: ItemType[];
     mode: (typeof MODE)[keyof typeof MODE];
     expandIcon: ReactNode;
-    height: number;
-    width: number;
     inlineIndent: number;
     inlinePadding: number;
     itemSpacing: number;

package/es/components/organism/DataTable/components/Toolbar/SearchPopover.js

@@ -72,7 +72,7 @@ export const SearchPopover = props => {
             const { id, label, link, icon } = searchItem;
             const Label = (React.createElement(React.Fragment, null,
                 icon && React.createElement(IconWrapper, null, icon),
-                React.createElement(Typography.Text, { className: `${link ? 'text-link' : ''}`, ellipsis: { tooltip: true } }, link && !itemSearchRender && !onClickSearchItem && !isAddFilterFromSearchItem ? (React.createElement(Link, { to: link }, label)) : (label))));
+                React.createElement(Typography.Text, { className: `${link ? 'text-link' : ''}`, ellipsis: { tooltip: label } }, link && !itemSearchRender && !onClickSearchItem && !isAddFilterFromSearchItem ? (React.createElement(Link, { to: link }, label)) : (label))));
             return (React.createElement(StyledSearchItem, { key: id, align: "center", gap: 6, onClick: () => {
                     onClick(searchItem);
                     setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));

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

@@ -1,11 +1,12 @@
+import { ReactNode } from 'react';
+import { AxiosRequestConfig } from 'axios';
 import { TServiceAuth } from '@antscorp/antsomi-ui/es/types';
 import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
-import { AxiosRequestConfig } from 'axios';
 import { FilterItem, TSearchActionButton, TSearchItem, TableProps } from '../../types';
 import { PaginationProps } from '../../components';
 import { ColumnType } from 'antd/es/table';
-import { ReactNode } from 'react';
 import { SorterResult } from 'antd/es/table/interface';
+import { TGetColumnMetrics, TGetFilterMetricList, TGetModifyColumnList, TGetSavedFilterList, TGetSearchListing, TGetTableListing } from '@antscorp/antsomi-ui/es/queries';
 export type TApiGlobal = AxiosRequestConfig<any> & {
     enabled?: boolean;
 };
@@ -34,9 +35,24 @@ type TToggleColumnType<TTableType> = TGeneralTableColumnType<TTableType> & {
     onChange?: (checked: boolean, record: TTableType) => void;
 };
 type TTableColumnType<TTableType, K extends keyof TTableType | 'toggle'> = K extends 'toggle' ? TToggleColumnType<TTableType> : TGeneralTableColumnType<TTableType>;
+type TSearchProps<TSearchType> = Partial<Pick<TSearchActionButton, 'addFilterInfo' | 'isClientSearch' | 'isAddFilterFromSearchItem' | 'onClickSearchItem'>> & {
+    link?: ((record: Partial<TSearchType>) => string) | string;
+    icon?: (record: Partial<TSearchType>) => ReactNode | ReactNode;
+    itemMapKeys: Record<keyof Omit<TSearchItem, 'icon' | 'link'>, keyof TSearchType>;
+    render?: (record: TSearchType, index: number, node: ReactNode) => ReactNode;
+    formatData?: (response: any) => Partial<TSearchType>[];
+};
 export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
-    config: TConfig;
     name?: string;
+    config: TConfig;
+    queryOptions?: {
+        getTableListing?: TGetTableListing['options'];
+        getColumnMetricList?: TGetColumnMetrics['options'];
+        getModifyColumnList?: TGetModifyColumnList['options'];
+        getSavedFilterList?: TGetSavedFilterList['options'];
+        getFilterMetricList?: TGetFilterMetricList['options'];
+        getSearchListing?: TGetSearchListing['options'];
+    };
     table?: Omit<TableProps<TTableType>, 'columns'> & {
         mainColumnKey: keyof TTableType;
         columns?: {
@@ -44,12 +60,7 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
         };
         sortDirectionKey?: string;
     };
-    search?: Partial<Pick<TSearchActionButton, 'addFilterInfo' | 'isClientSearch' | 'isAddFilterFromSearchItem' | 'onClickSearchItem'>> & {
-        link?: ((record: TSearchType) => string) | string;
-        icon?: (record: TSearchType) => ReactNode | ReactNode;
-        itemMapKeys: Record<keyof Omit<TSearchItem, 'icon' | 'link'>, keyof TSearchType>;
-        render?: (record: TSearchType, index: number, node: ReactNode) => ReactNode;
-    };
+    search?: TSearchProps<TSearchType>;
     filter?: {
         externalFilters?: FilterItem[];
         includeDataType?: boolean;

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

@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useCallback, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { isEmpty, pick } from 'lodash';
+import { useQueryClient } from '@tanstack/react-query';
 // Types
 import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Components
@@ -34,10 +35,9 @@ import { DEFAULT_CELL_EMPTY, DEFAULT_TOGGLE_WIDTH, SORT_MAP } from '../../consta
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, useGetColumnMetrics, useGetFilterMetricList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing, useSaveFilter, useUpdateFilter, useUpdateModifyColumn, } from '@antscorp/antsomi-ui/es/queries';
 // Utils
-import { flatTree, parseJSONFromLocalStorage } from '@antscorp/antsomi-ui/es/utils';
+import { flatTree, mapResponseSearchToGeneral, parseJSONFromLocalStorage, } from '@antscorp/antsomi-ui/es/utils';
 import { METRIC_MAP_NUMBER_TYPE } from '../../constants/filter';
 import { mapFiltersToApiFilters, mapFiltersToRules, mapRulesToFilters } from '../../utils';
-import { useQueryClient } from '@tanstack/react-query';
 const { Text } = Typography;
 const initialState = {
     filters: [],
@@ -62,7 +62,7 @@ const initialState = {
 export function useDataTableListing(props) {
     var _a, _b;
     // Props
-    const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, } = props || {};
+    const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, queryOptions, } = props || {};
     // Hooks
     const queryClient = useQueryClient();
     const { appConfig } = useAppConfigContext();
@@ -96,9 +96,7 @@ export function useDataTableListing(props) {
             params: mapObject,
             request: restOfApiColumnRequest,
         },
-        options: {
-            enabled: enabledApiColumn,
-        },
+        options: Object.assign({ enabled: enabledApiColumn }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getColumnMetricList),
     });
     const getModifyColumnList = useGetModifyColumnList({
         args: {
@@ -106,9 +104,7 @@ export function useDataTableListing(props) {
             params: mapObject,
             request: restOfApiColumnRequest,
         },
-        options: {
-            enabled: enabledApiColumn,
-        },
+        options: Object.assign({ enabled: enabledApiColumn }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getModifyColumnList),
     });
     const getSavedFilterList = useGetSavedFilterList({
         args: {
@@ -116,9 +112,7 @@ export function useDataTableListing(props) {
             params: mapObject,
             request: restOfApiFilterRequest,
         },
-        options: {
-            enabled: enabledApiFilter,
-        },
+        options: Object.assign({ enabled: enabledApiFilter }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getSavedFilterList),
     });
     const getFilterMetricList = useGetFilterMetricList({
         args: {
@@ -126,9 +120,7 @@ export function useDataTableListing(props) {
             params: mapObject,
             request: restOfApiFilterRequest,
         },
-        options: {
-            enabled: enabledApiFilter,
-        },
+        options: Object.assign({ enabled: enabledApiFilter }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getFilterMetricList),
     });
     // Variables
     const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = getModifyColumnList || {};
@@ -143,11 +135,7 @@ export function useDataTableListing(props) {
             })),
             request: restOfApiListingRequest,
         },
-        options: {
-            queryKey: [name],
-            keepPreviousData: true,
-            enabled: !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.url) && !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.token) && enabledApiListing,
-        },
+        options: Object.assign({ queryKey: [name], keepPreviousData: true, enabled: !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.url) && !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.token) && enabledApiListing }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getTableListing),
     });
     const getSearchListing = useGetSearchListing({
         args: {
@@ -157,10 +145,7 @@ export function useDataTableListing(props) {
             },
             request: restOfApiSearchRequest,
         },
-        options: {
-            keepPreviousData: true,
-            enabled: !!(searchAuth === null || searchAuth === void 0 ? void 0 : searchAuth.url) && !!(searchAuth === null || searchAuth === void 0 ? void 0 : searchAuth.token) && enabledApiSearch,
-        },
+        options: Object.assign({ keepPreviousData: true, enabled: !!(searchAuth === null || searchAuth === void 0 ? void 0 : searchAuth.url) && !!(searchAuth === null || searchAuth === void 0 ? void 0 : searchAuth.token) && enabledApiSearch }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getSearchListing),
     });
     // Variables
     const { data: columnMetricsData } = getColumnMetrics || {};
@@ -169,7 +154,12 @@ 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 { body: searchListingBody } = searchListingData || {};
+    // 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.
+    const searchListingBody = (searchProps === null || searchProps === void 0 ? void 0 : searchProps.formatData)
+        ? searchProps.formatData(searchListingData)
+        : mapResponseSearchToGeneral(searchListingData).body || {};
     // Mutations
     const { mutateAsync: updateModifyColumn } = useUpdateModifyColumn({
         auth: modifyColumnAuth,
@@ -371,9 +361,11 @@ export function useDataTableListing(props) {
     const handleUpdateFilter = useCallback((filter) => {
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
         // Set State
-        setState(prev => (Object.assign(Object.assign({}, prev), filter)));
+        setState(prev => (Object.assign(Object.assign(Object.assign({}, prev), filter), { pagination: Object.assign(Object.assign({}, prev.pagination), { page: 1 }) })));
         // Set Local Storage
-        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { filter: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.filter), filter) })));
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { filter: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.filter), filter), 
+            // Reset page to 1
+            pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), { page: 1 }) })));
     }, [localStorageKey]);
     const handleUpdateTable = useCallback((table) => {
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};

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

@@ -12,6 +12,7 @@ export type TSearchItem = {
     label: string;
     link?: string;
     icon?: ReactNode;
+    [key: string]: any;
 };
 export type TSelectedRowButton = TActionButton & {
     dropdownProps?: DropdownProps;

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

@@ -1,6 +1,6 @@
 import { UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
 import { TCreateModifyColumnArgs, TDeleteModifyColumnArgs, TDeleteSavedFilterArgs, TGetFilterMetricListArgs, TGetMetricListArgs, TGetModifyColumnListArgs, TGetSavedFilterListArgs, TGetSearchListingArgs, TGetTableListingArgs, TSaveFilterArgs, TUpdateFilterArgs, TUpdateModifyColumnArgs } from '../../services/DataTable';
-import { ColumnMetric, FilterMetric, ModifyColumn, SearchListing } from '../../models/DataTable';
+import { ColumnMetric, FilterMetric, ModifyColumn } from '../../models/DataTable';
 import { SavedFilter } from '../../models/DataTable/SavedFilter';
 import { DataTableListing } from '../../models/DataTable/DataTableListing';
 export type TGetColumnMetrics = {
@@ -59,9 +59,9 @@ export type TGetTableListing<T = any> = {
     args: TGetTableListingArgs;
     options?: UseQueryOptions<any, any, DataTableListing<T>, any[]>;
 };
-export type TGetSearchListing<T = any> = {
+export type TGetSearchListing = {
     args: TGetSearchListingArgs;
-    options?: UseQueryOptions<any, any, SearchListing<T>, any[]>;
+    options?: UseQueryOptions<any, any, any, any[]>;
 };
 export declare const useGetColumnMetrics: (params: TGetColumnMetrics) => import("@tanstack/react-query").UseQueryResult<ColumnMetric[], any>;
 export declare const useGetModifyColumnList: (params: TGetModifyColumnList) => import("@tanstack/react-query").UseQueryResult<ModifyColumn[], any>;
@@ -86,4 +86,4 @@ export declare const useDeleteSavedFilter: (params?: TDeleteSavedFilter) => impo
     status: number;
 }, any, TDeleteSavedFilterArgs, unknown>;
 export declare const useGetTableListing: <T>(params: TGetTableListing<T>) => import("@tanstack/react-query").UseQueryResult<DataTableListing<T>, any>;
-export declare const useGetSearchListing: <T>(params: TGetSearchListing<T>) => import("@tanstack/react-query").UseQueryResult<SearchListing<T>, any>;
+export declare const useGetSearchListing: (params: TGetSearchListing) => import("@tanstack/react-query").UseQueryResult<any, any>;

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

@@ -1,6 +1,6 @@
 import { AxiosRequestConfig } from 'axios';
 import { TServiceAuth } from '../../types';
-import { ColumnMetric, FilterMetric, ModifyColumn, SearchListing } from '../../models/DataTable';
+import { ColumnMetric, FilterMetric, ModifyColumn } from '../../models/DataTable';
 import { SavedFilter } from '../../models/DataTable/SavedFilter';
 import { DataTableListing } from '../../models/DataTable/DataTableListing';
 export type TGlobalApiParams = {
@@ -122,6 +122,6 @@ export declare const dataTableServices: {
         getTableListing<T = any>({ auth, params, request, }: TGetTableListingArgs): Promise<DataTableListing<T>>;
     };
     search: {
-        getSearchListing<T_1 = any>({ auth, params, request, }: TGetSearchListingArgs): Promise<SearchListing<T_1>>;
+        getSearchListing({ auth, params, request }: TGetSearchListingArgs): Promise<any>;
     };
 };

package/es/services/DataTable/index.js

@@ -23,7 +23,7 @@ import axios from 'axios';
 import { get } from 'lodash';
 // Constants
 import { COLUMN_API_TYPE, FILTER_API_TYPE } from '../../constants/dataTable';
-import { mapResponseListingToGeneral, mapResponseSearchToGeneral } from '../../utils';
+import { mapResponseListingToGeneral } from '../../utils';
 const { GET_COLUMNS, GET_LIST_MODIFY_COLUMN, UPDATE_MODIFY_COLUMN, ADD_MODIFY_COLUMN } = COLUMN_API_TYPE;
 const { GET_SAVED_FILTER, GET_LIST_FILTER, SAVE_FILTER, UPDATE_FILTER } = FILTER_API_TYPE;
 const mapAuth = (auth) => {
@@ -195,12 +195,12 @@ export const dataTableServices = {
     },
     search: {
         getSearchListing(_a) {
-            return __awaiter(this, arguments, void 0, function* ({ auth, params, request, }) {
+            return __awaiter(this, arguments, void 0, function* ({ auth, params, request }) {
                 const { search } = params || {};
                 const _b = request || {}, { method = 'GET' } = _b, restOfRequest = __rest(_b, ["method"]);
                 try {
                     const response = yield axios(Object.assign(Object.assign({}, restOfRequest), { method, url: `${auth === null || auth === void 0 ? void 0 : auth.url}`, params: Object.assign(Object.assign({ search }, mapAuth(auth)), request === null || request === void 0 ? void 0 : request.params) }));
-                    return mapResponseSearchToGeneral(get(response, 'data.data', {}));
+                    return get(response, 'data.data', {});
                 }
                 catch (error) {
                     return Promise.reject(error);

package/es/tests/DataTableTest.js

@@ -56,6 +56,14 @@ export const DataTableTest = () => {
             link(record) {
                 return `/survey/${record.survey_id}`;
             },
+            formatData(response) {
+                return (response === null || response === void 0 ? void 0 : response.body) || [];
+            },
+        },
+        queryOptions: {
+            getTableListing: {
+                refetchOnMount: 'always',
+            },
         },
     });
     return (React.createElement(BrowserRouter, null,

package/es/utils/dataTable.d.ts

@@ -5,7 +5,7 @@ export declare const mapResponseListingToGeneral: (response: Record<string, any>
     header: any;
     total: any;
 };
-export declare const mapResponseSearchToGeneral: (response: Record<string, any>) => {
-    body: any;
-    total: any;
+export declare const mapResponseSearchToGeneral: <T = any>(response: Record<string, any>) => {
+    body: T[];
+    total: number;
 };

package/package.json

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