@antscorp/antsomi-ui 1.3.5-beta.473 → 1.3.5-beta.474

package/es/components/icons/EventIcon.js

@@ -14,5 +14,5 @@ export const EventIcon = (_a) => {
     var props = __rest(_a, []);
     return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "currentColor" }, props),
         React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-        React.createElement("path", { d: "M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-7 5h5v5h-5z" })));
+        React.createElement("path", { d: "M16 13h-3c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1zm0-10v1H8V3c0-.55-.45-1-1-1s-1 .45-1 1v1H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-1V3c0-.55-.45-1-1-1s-1 .45-1 1zm2 17H6c-.55 0-1-.45-1-1V9h14v10c0 .55-.45 1-1 1z" })));
 };

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

@@ -1,8 +1,14 @@
 // Libraries
+import React from 'react';
 import { DatePicker as AntdDatePicker } from 'antd';
 // Components
 import { AdvancedPicker } from './components/AdvancedPicker';
 import { AdvancedRangePicker } from './components/AdvancedRangePicker';
+import { EventIcon } from '../../icons';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const DatePicker = AntdDatePicker;
+DatePicker.defaultProps = {
+    suffixIcon: React.createElement(EventIcon, { width: 20, height: 20, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }),
+};
 DatePicker.AdvancedPicker = AdvancedPicker;
 DatePicker.AdvancedRangePicker = AdvancedRangePicker;

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

@@ -41,7 +41,7 @@ const { t } = i18nInstance;
 const { Text } = Typography;
 export const MatchesAny = props => {
     // Props
-    const { objectName, isLoading = false, showExtendValue = true, items, onApply = () => { }, onCancel = () => { } } = props, restOfProps = __rest(props, ["objectName", "isLoading", "showExtendValue", "items", "onApply", "onCancel"]);
+    const { objectName, loading = false, showExtendValue = true, items, onApply = () => { }, onCancel = () => { } } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "onApply", "onCancel"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
@@ -104,9 +104,11 @@ export const MatchesAny = props => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [] })));
     };
     const renderItemNodeTitle = ({ item, onSelectItem, onRemoveItem, }) => {
-        const { isExtendValue, title } = item; // Destructure properties from item
+        const { isExtendValue, title, subTitle } = item; // Destructure properties from item
         return (React.createElement(React.Fragment, null,
-            React.createElement(Text, { ellipsis: { tooltip: true } }, title),
+            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 },
                 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: () => {
@@ -191,18 +193,18 @@ export const MatchesAny = props => {
                 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(Spin, { spinning: isLoading },
+                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, title: t(translations.noData).toString() })))))));
+                            }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) })) : (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: isLoading },
+            React.createElement(Spin, { spinning: loading },
                 React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: "icon-ants-database", 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',
@@ -236,12 +238,11 @@ export const MatchesAny = props => {
 };
 export const MatchesAnySelect = props => {
     var _a, _b, _c;
-    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, isLoading, onChange = () => { } } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "isLoading", "onChange"]);
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, onChange = () => { } } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "onChange"]);
     // State
     const [state, setState] = useState(initialState);
     // Variables
     const { isOpenPopover } = state;
-    // Memo
     const value = Array.isArray(selectedItems) && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length)
         ? `${(_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title)) === null || _a === void 0 ? void 0 : _a[0]}${((_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _b === void 0 ? void 0 : _b.length) ? `, and +${(_c = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _c === void 0 ? void 0 : _c.length} more` : ''}` || []
         : undefined;
@@ -250,7 +251,9 @@ 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, { items: items, selectedItems: selectedItems, isLoading: isLoading, objectName: objectName, style: { margin: '-8px 0px' }, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))) }), overlayStyle: { width: 700 }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))) },
-        React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${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 }) }, restProps)))));
+    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: {
+            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(', ') : ''}` },
+            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/styled.js

@@ -90,6 +90,19 @@ export const MatchesAnyWrapper = styled(Flex) `
           align-items: center;
           justify-content: space-between;
           gap: 10px;
+
+          .title-content {
+            padding: 5px 0px;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+
+            .sub-title {
+              font-size: 11px;
+            }
+          }
         }
       }
 
@@ -113,7 +126,7 @@ export const MatchesAnyWrapper = styled(Flex) `
 
       &.antsomi-tree-treenode-disabled {
         .antsomi-typography {
-          color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw6};
+          color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw6} !important;
         }
 
         .select-button {

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

@@ -2,14 +2,16 @@ import { TreeDataNode } from 'antd';
 import type { SelectProps } from '@antscorp/antsomi-ui/es/components/molecules';
 import type { FlexProps } from '@antscorp/antsomi-ui/es/components/atoms';
 export type MatchesAnyItem = TreeDataNode & {
+    /**  Addition title of the item. */
+    subTitle?: string;
+    /** Indicates whether the item is extended */
     isExtendValue?: boolean;
+    /** An array of children items. */
     children?: MatchesAnyItem[];
 };
 export interface MatchesAnySelectProps extends SelectProps {
     /** The name of object to be displayed in Popover */
     objectName?: string;
-    /** Indicates whether the component is loading */
-    isLoading?: boolean;
     /** Indicates whether show the extend value button */
     showExtendValue?: boolean;
     /** An array of items. */
@@ -23,7 +25,7 @@ export interface MatchesAnyProps extends Omit<FlexProps, 'children'> {
     /** The name of the object, corresponding to the `objectName` property in `MatchesAnySelectProps`. */
     objectName?: MatchesAnySelectProps['objectName'];
     /** Indicates whether the component is in a loading state, corresponding to the `isLoading` property in `MatchesAnySelectProps`. */
-    isLoading?: MatchesAnySelectProps['isLoading'];
+    loading?: MatchesAnySelectProps['loading'];
     /** Determines whether to show the extended value, corresponding to the `showExtendValue` property in `MatchesAnySelectProps`. */
     showExtendValue?: MatchesAnySelectProps['showExtendValue'];
     /** An array of items. */

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

@@ -13,8 +13,8 @@ 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, onSelectFilterMetric, onApplyFilterMetricCondition, onClickAddFilter, setState: setAddFilterConditionState, } = useAddFilterCondition();
-    return (React.createElement(Popover, { open: openPopover, content: React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS }, selectedFilterMetric ? (React.createElement(FilterCondition, { filterMetric: selectedFilterMetric, onCancel: () => onSelectFilterMetric(undefined), onApply: ({ operator, value }) => {
+    const { openPopover, selectedFilterMetric, matchesAny, onSelectFilterMetric, onApplyFilterMetricCondition, onClickAddFilter, onChangeFilterCondition, 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,
                     operator,
@@ -22,6 +22,15 @@ export const AddFilterButton = memo(() => {
                 });
                 onSelectFilterMetric(undefined);
                 setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: false })));
+            }, onChange: condition => {
+                const { id, dataType } = selectedFilterMetric;
+                const { operator, value } = condition || {};
+                onChangeFilterCondition({
+                    column: id,
+                    operator,
+                    value,
+                    dataType,
+                });
             } })) : (React.createElement(SavedFilterAndMetrics, { onSelectFilterMetric: onSelectFilterMetric, onSelectSavedFilter: () => {
                 setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: false })));
             } }))), trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0 }, arrow: false, placement: "bottomLeft", destroyTooltipOnHide: true, onOpenChange: open => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FilterItem, FilterMetricItem } from '../../../types';
+import { FilterItem, FilterMetricItem, FilterProps } from '../../../types';
 type TFormType = {
     operator: string;
     value: any;
@@ -7,8 +7,10 @@ type TFormType = {
 interface FilterConditionProps {
     filterMetric: FilterMetricItem;
     filterCondition?: FilterItem;
+    matchesAny?: FilterProps['matchesAny'];
     onCancel?: () => void;
     onApply?: (values: TFormType) => void;
+    onChange?: (values: TFormType) => void;
 }
 export declare const FilterCondition: React.FC<FilterConditionProps>;
 export {};

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

@@ -10,12 +10,12 @@ import { EXCEPTION_OFF_FILTER_CLASS } from '../../../constants/filter';
 const { BETWEEN, EXISTS, NOT_EXISTS } = OPERATORS_OPTION;
 export const FilterCondition = props => {
     // Props
-    const { filterMetric, filterCondition, onCancel, onApply } = props;
+    const { filterMetric, filterCondition, matchesAny, onChange, onCancel, onApply } = props;
     // Hooks
     const [form] = Form.useForm();
     // Form
-    const operator = Form.useWatch('operator', form);
-    const value = Form.useWatch('value', form);
+    const formValues = Form.useWatch([], form);
+    const { operator, value } = formValues || {};
     // Variables
     const { name, dataType, operators } = filterMetric;
     // Memos
@@ -53,6 +53,12 @@ export const FilterCondition = props => {
             operator: ((_a = operatorList[0]) === null || _a === void 0 ? void 0 : _a.value) || '',
         });
     }, [form, operatorList]);
+    /** Handle callback change values */
+    useEffect(() => {
+        if (formValues) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(formValues);
+        }
+    }, [formValues, onChange]);
     /* Update filter condition values */
     useEffect(() => {
         if (filterCondition) {
@@ -82,12 +88,13 @@ export const FilterCondition = props => {
                 React.createElement(Form.Item, { name: "operator", noStyle: true },
                     React.createElement(Select, { value: operator, options: operatorList, onChange: () => form.setFieldsValue({
                             value: '',
-                        }), getPopupContainer: node => node.parentElement, dropdownRender: menu => (React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS, onClick: e => e.stopPropagation() }, menu)) })),
+                        }), dropdownRender: menu => (React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS, onClick: e => e.stopPropagation() }, menu)) })),
                 React.createElement(Form.Item, { name: "value", noStyle: true }),
                 renderValueField({
                     filterMetric,
                     operator,
                     value,
+                    matchesAny,
                     onChangeValue: value => {
                         form.setFieldsValue({
                             value,

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

@@ -6,7 +6,7 @@ import { Button, Flex, Icon, Popover } from '@antscorp/antsomi-ui/es/components/
 import { FilterCondition } from './FilterCondition';
 // Constants
 import { EXCEPTION_OFF_FILTER_CLASS, FILTER_SHOW_MAX } from '../../constants/filter';
-import { OPERATORS_OPTION, globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Contexts
 import { useDataTableContext } from '../../contexts/DataTableContext';
 // Hooks
@@ -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, onChangeFilters = () => { }, } = useDataTableContext(store => store.filter);
+    const { filterMetrics, filters, isFilterActive, matchesAny, onChangeFilters = () => { }, onChangeFilterCondition = () => { }, } = useDataTableContext(store => store.filter);
     const setFilter = useDataTableContext(store => store.setFilter);
     // State
     /* Reserve for handle popover open per filter condition */
@@ -60,36 +60,38 @@ export const FilterConditionList = memo(() => {
         onChangeFilters(cloneFilters || []);
     };
     const renderFilterItem = () => serializeFilters === null || serializeFilters === void 0 ? void 0 : serializeFilters.map((filter, index) => {
-        var _a;
         const { column, operator, value, isOpenPopover } = filter;
         const metric = flattenFilterMetrics === null || flattenFilterMetrics === void 0 ? void 0 : flattenFilterMetrics.find(filterMetric => filterMetric.id === column);
-        const operatorLabel = ((_a = Object.values(OPERATORS_OPTION).find(({ value }) => value === operator)) === null || _a === void 0 ? void 0 : _a.label) || '';
         // Hide too many filter when filter is active
         if (!metric || (!isFilterActive && index + 1 > FILTER_SHOW_MAX))
             return null;
         return (React.createElement(Popover, { key: `${column}-${operator}-${value}-${index}`, open: isOpenPopover, content: React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS },
-                React.createElement(FilterCondition, { filterMetric: metric, filterCondition: filter, onApply: ({ operator, value }) => {
+                React.createElement(FilterCondition, { matchesAny: matchesAny, filterMetric: metric, filterCondition: filter, onApply: ({ operator, value }) => {
                         onApplyFilterMetricCondition({
                             operator,
                             value,
                             existMetricIdx: index,
                         });
                         handleTogglePopover(index, false);
+                    }, onChange: condition => {
+                        onChangeFilterCondition({
+                            column: metric.id,
+                            operator: condition.operator,
+                            value: condition.value,
+                            dataType: metric.dataType,
+                        });
                     }, onCancel: () => handleTogglePopover(index, false) })), trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0 }, 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: operatorLabel, value: value, onClickRemove: () => onClickRemoveFilter(index) })));
+                }), name: (metric === null || metric === void 0 ? void 0 : metric.name) || column.toString() || '', operator: operator, value: value, onClickRemove: () => onClickRemoveFilter(index) })));
     });
     const renderViewAll = () => {
         var _a;
         if (isFilterActive || (serializeFilters === null || serializeFilters === void 0 ? void 0 : serializeFilters.length) <= FILTER_SHOW_MAX)
             return null;
         return (React.createElement(Popover, { open: isOpenViewAllPopover, content: React.createElement(Flex, { vertical: true, gap: 5 }, (_a = serializeFilters === null || serializeFilters === void 0 ? void 0 : serializeFilters.slice(3)) === null || _a === void 0 ? void 0 : _a.map((filter, index) => {
-                var _a;
                 const { column, operator, value } = filter;
                 const metric = flattenFilterMetrics === null || flattenFilterMetrics === void 0 ? void 0 : flattenFilterMetrics.find(filterMetric => filterMetric.id === column);
-                const operatorLabel = ((_a = Object.values(OPERATORS_OPTION).find(({ value }) => value === operator)) === null || _a === void 0 ? void 0 : _a.label) ||
-                    '';
                 if (!metric)
                     return null;
                 return (React.createElement(FilterItem, { key: `${column}-${operator}-${value}-${index}`, gap: 5, onClick: () => {
@@ -100,7 +102,7 @@ export const FilterConditionList = memo(() => {
                         handleTogglePopover(FILTER_SHOW_MAX + index, true);
                         // Close popover view all
                         setState(prev => (Object.assign(Object.assign({}, prev), { isOpenViewAllPopover: false })));
-                    }, name: (metric === null || metric === void 0 ? void 0 : metric.name) || column.toString() || '', operator: operatorLabel, value: value, onClickRemove: () => onClickRemoveFilter(index) }));
+                    }, name: (metric === null || metric === void 0 ? void 0 : metric.name) || column.toString() || '', operator: operator, value: value, onClickRemove: () => onClickRemoveFilter(index) }));
             })), trigger: ['click'], overlayInnerStyle: { width: 300, padding: 15 }, arrow: false, onOpenChange: open => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenViewAllPopover: open }))) },
             React.createElement(Button, { type: "text", style: Object.assign({}, (isOpenViewAllPopover && { backgroundColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1 })) },
                 t(translations.viewAll).toString(),

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

@@ -10,22 +10,52 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React from 'react';
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
 // Components
 import { Icon, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
 import { StyledFilterItem } from './styled';
+// Constants
+import { DATE_TIME_FORMAT, OPERATORS_CODE, OPERATORS_OPTION, } from '@antscorp/antsomi-ui/es/constants';
+const { MATCHES_ANY, MATCHES, NOT_MATCHES, IS } = OPERATORS_CODE;
 const { Text } = Typography;
 export const FilterItem = props => {
     const { name, operator, value, onClickRemove } = props, restProps = __rest(props, ["name", "operator", "value", "onClickRemove"]);
-    const tooltipContent = `${name} ${operator} ${value}`;
+    // Memo
+    const serializeValue = useMemo(() => {
+        // Check type of value is valid date
+        if (dayjs(value).isValid()) {
+            return dayjs(value).format(DATE_TIME_FORMAT.FILTER_CONDITION);
+        }
+        // Check value is an array and operator is MATCHES_ANY
+        if (Array.isArray(value) && operator === MATCHES_ANY) {
+            return value.map(item => item.title).join(', ');
+        }
+        return value;
+    }, [operator, value]);
+    const serializeOperator = useMemo(() => {
+        var _a;
+        const operatorLabel = ((_a = Object.values(OPERATORS_OPTION).find(({ value }) => value === operator)) === null || _a === void 0 ? void 0 : _a.label) || '';
+        switch (operator) {
+            case MATCHES_ANY:
+            case NOT_MATCHES:
+            case MATCHES:
+            case IS:
+                return null;
+            default:
+                return operatorLabel;
+        }
+    }, [operator]);
+    const tooltipContent = `${name} ${operator} ${serializeValue}`;
     return (React.createElement(StyledFilterItem, Object.assign({ gap: 5 }, restProps),
         React.createElement(Text, { ellipsis: { tooltip: tooltipContent } },
-            React.createElement(Text, { strong: true }, name),
-            " \u00A0",
-            React.createElement(Text, null, operator),
+            React.createElement(Text, null, name),
             " \u00A0",
-            React.createElement(Text, { strong: true, className: "filter-item__value" }, value)),
+            serializeOperator && React.createElement(Text, null,
+                serializeOperator,
+                " \u00A0"),
+            React.createElement(Text, { strong: true, className: "filter-item__value" }, serializeValue)),
         React.createElement("div", { className: "filter-item__close-btn", onClick: e => {
                 e.stopPropagation();
                 if (onClickRemove) {

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

@@ -38,7 +38,7 @@ export const FilterSection = styled(Flex) `
   cursor: pointer;
 `;
 export const RowSelectedControlWrapper = styled(Flex) `
-  flex: 1;
+  flex-shrink: 0;
   height: ${toolbarHeight}px;
   background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
   color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};

package/es/components/organism/DataTable/constants/theme.js

@@ -20,6 +20,8 @@ export const DATA_TABLE_THEME = {
             rowHoverBg: '#DEEFFE',
             borderRadius: 0,
             headerBorderRadius: 0,
+            rowSelectedBg: '#DEEFFE',
+            rowSelectedHoverBg: '#F2F9FF',
         },
         Menu: {
             itemBorderRadius: 0,

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

@@ -12,10 +12,15 @@ type OnApplyFilterMetricConditionValue = {
 };
 export declare const useAddFilterCondition: () => {
     filters: import("../types").FilterItem[] | undefined;
+    matchesAny: {
+        list?: import("../../..").MatchesAnyItem[] | undefined;
+        isLoading?: boolean | undefined;
+    } | undefined;
     setState: import("react").Dispatch<import("react").SetStateAction<TState>>;
     onSelectFilterMetric: (filterMetric?: FilterMetricItem) => void;
     onApplyFilterMetricCondition: (values: OnApplyFilterMetricConditionValue) => void;
     onClickAddFilter: () => void;
+    onChangeFilterCondition: (filterItem: import("../types").FilterItem) => 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, onChangeFilters = () => { } } = useDataTableContext(store => store.filter);
+    const { filters, matchesAny, onChangeFilters = () => { }, onChangeFilterCondition = () => { }, } = useDataTableContext(store => store.filter);
     const setFilter = useDataTableContext(store => store.setFilter);
     // Handlers
     const onSelectFilterMetric = useCallback((filterMetric) => {
@@ -48,9 +48,11 @@ export const useAddFilterCondition = () => {
     return Object.assign(Object.assign({}, state), { 
         // Filter
         filters,
+        matchesAny,
         // Handlers
         setState,
         onSelectFilterMetric,
         onApplyFilterMetricCondition,
-        onClickAddFilter });
+        onClickAddFilter,
+        onChangeFilterCondition });
 };

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

@@ -7,9 +7,14 @@ import { PaginationProps } from '../../components';
 import { ColumnType } from 'antd/es/table';
 import { SorterResult } from 'antd/es/table/interface';
 import { TGetColumnMetrics, TGetFilterMetricList, TGetModifyColumnList, TGetSavedFilterList, TGetSearchListing, TGetTableListing } from '@antscorp/antsomi-ui/es/queries';
+import { MatchesAnyItem } from '@antscorp/antsomi-ui/es/components/molecules';
 export type TApiGlobal = AxiosRequestConfig<any> & {
     enabled?: boolean;
 };
+type TMatchesAnyParams = (filterItem?: FilterItem) => any | any;
+type TMatchesAnyProps = {
+    formatData: (response: any) => MatchesAnyItem[];
+};
 export type TConfig<TTableType = any> = {
     env?: TEnv;
     auth?: TServiceAuth;
@@ -19,8 +24,12 @@ export type TConfig<TTableType = any> = {
         filter?: TApiGlobal;
         search?: TApiGlobal;
         matchesAny?: {
-            general: TApiGlobal;
-        } & Partial<Record<keyof TTableType, TApiGlobal>>;
+            general: Omit<TApiGlobal, 'params'> & {
+                params?: TMatchesAnyParams;
+            };
+        } & Partial<Record<keyof TTableType, Omit<TApiGlobal, 'params'> & {
+            params?: TMatchesAnyParams;
+        }>>;
     };
     object?: {
         type: number;
@@ -48,7 +57,7 @@ type TSearchProps<TSearchType> = Partial<Pick<TSearchActionButton, 'addFilterInf
 };
 export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
     name?: string;
-    config: TConfig;
+    config: TConfig<TTableType>;
     queryOptions?: {
         getTableListing?: TGetTableListing['options'];
         getColumnMetricList?: TGetColumnMetrics['options'];
@@ -68,6 +77,9 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
     filter?: {
         externalFilters?: FilterItem[];
         includeDataType?: boolean;
+        matchesAny?: {
+            general: TMatchesAnyProps;
+        } & Partial<Record<keyof TTableType, TMatchesAnyProps>>;
     };
 }
 export interface DataTableLocalStorage<TTableType = any> {

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

@@ -47,6 +47,7 @@ type TState<TTableType = any> = {
     };
     searchValue?: string;
     sorter?: SorterResult<TTableType>;
+    selectedFilterItem?: FilterItem;
 };
 export declare function useDataTableListing<TTableType = Record<string, any>, TSearchType = any>(props: UseDataTableListingProps<TTableType, TSearchType>): TUseDataTableListing<TTableType>;
 export {};

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

@@ -28,17 +28,18 @@ import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Components
 import { Typography, Switch, Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
-import { COLUMN_DOMAIN, QUERY_KEYS, globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { COLUMN_DOMAIN, OPERATORS_CODE, QUERY_KEYS, globalToken, } from '@antscorp/antsomi-ui/es/constants';
 import { MODIFY_COLUMN_DISABLE_EDITABLE, MODIFY_COLUMN_DISABLE_REMOVE, SAVED_FILTER_DEFAULT, TABLE_LISTING_PREFIX, } from './constants';
 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, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing, useSaveFilter, useUpdateFilter, useUpdateModifyColumn, } from '@antscorp/antsomi-ui/es/queries';
+import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, useGetColumnMetrics, useGetFilterMetricList, useGetMatchesAnyList, 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';
 import { mapFiltersToApiFilters, mapFiltersToRules, mapRulesToFilters } from '../../utils';
 const { Text } = Typography;
+const { MATCHES, MATCHES_ANY, NOT_MATCHES } = OPERATORS_CODE;
 const initialState = {
     filters: [],
     selectedFilterId: SAVED_FILTER_DEFAULT[0].id,
@@ -58,9 +59,10 @@ const initialState = {
     },
     searchValue: '',
     sorter: {},
+    selectedFilterItem: undefined,
 };
 export function useDataTableListing(props) {
-    var _a, _b;
+    var _a, _b, _c;
     // Props
     const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, queryOptions, } = props || {};
     // Hooks
@@ -70,18 +72,25 @@ export function useDataTableListing(props) {
     const [state, setState] = useState(initialState);
     // Variables
     const { env = appConfig === null || appConfig === void 0 ? void 0 : appConfig.env, auth = appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth, api, object } = config;
-    const { column: apiColumn, filter: apiFilter, listing: apiListing, search: apiSearch, } = api || {};
-    const _c = apiColumn || {}, { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column`, enabled: enabledApiColumn = true } = _c, restOfApiColumnRequest = __rest(_c, ["url", "enabled"]);
-    const _d = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _d, restOfApiFilterRequest = __rest(_d, ["url", "enabled"]);
-    const _e = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _e, restOfApiListingRequest = __rest(_e, ["url", "enabled"]);
-    const _f = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _f, restOfApiSearchRequest = __rest(_f, ["url", "enabled"]);
-    const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, } = state;
-    const { externalFilters, includeDataType = false } = filterProps || {};
+    const { column: apiColumn, filter: apiFilter, listing: apiListing, search: apiSearch, matchesAny: apiMatchesAny, } = api || {};
+    const _d = apiColumn || {}, { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column`, enabled: enabledApiColumn = true } = _d, restOfApiColumnRequest = __rest(_d, ["url", "enabled"]);
+    const _e = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _e, restOfApiFilterRequest = __rest(_e, ["url", "enabled"]);
+    const _f = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _f, restOfApiListingRequest = __rest(_f, ["url", "enabled"]);
+    const _g = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _g, restOfApiSearchRequest = __rest(_g, ["url", "enabled"]);
+    const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, } = state;
+    const { externalFilters, includeDataType = false, matchesAny } = filterProps || {};
     const { sortDirectionKey = 'az', mainColumnKey } = tableProps || {};
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
     const listingAuth = Object.assign(Object.assign({}, auth), { url: listingUrl });
     const searchAuth = Object.assign(Object.assign({}, auth), { url: searchUrl });
+    /**
+     * If has api config for specific selectedFilterItem, use it
+     * Otherwise use general api config
+     */
+    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;
     // Memos
     const mapObject = useMemo(() => ({
         objType: object === null || object === void 0 ? void 0 : object.type,
@@ -122,13 +131,26 @@ export function useDataTableListing(props) {
         },
         options: Object.assign({ enabled: enabledApiFilter }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getFilterMetricList),
     });
+    const getMatchesAnyList = useGetMatchesAnyList({
+        args: {
+            auth,
+            params: (_a = matchesAnyRequest === null || matchesAnyRequest === void 0 ? void 0 : matchesAnyRequest.params) === null || _a === void 0 ? void 0 : _a.call(matchesAnyRequest, selectedFilterItem),
+            request: matchesAnyRequest,
+        },
+        options: {
+            enabled: !!selectedFilterItem &&
+                [MATCHES_ANY, NOT_MATCHES, MATCHES].includes(selectedFilterItem.operator),
+            keepPreviousData: true,
+            retry: false,
+        },
+    });
     // Variables
     const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = getModifyColumnList || {};
     const modifyColumnSelected = useDeepCompareMemo(() => { var _a; return ((_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(({ isLasted }) => +isLasted === 1)) === null || _a === void 0 ? void 0 : _a.modifyColId) || ''; }, [modifyColumnsData]);
     const getTableListing = useGetTableListing({
         args: {
             auth: listingAuth,
-            params: Object.assign({ limit: pagination.pageSize, page: pagination.page, filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])], includeDataType)), columns: JSON.stringify(((_b = (_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumnItem => modifyColumnItem.modifyColId === modifyColumnSelected)) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.map(col => { var _a; return (_a = col.metricCode) === null || _a === void 0 ? void 0 : _a.toUpperCase(); })) || []) }, ((sorter === null || sorter === void 0 ? void 0 : sorter.order) &&
+            params: Object.assign({ limit: pagination.pageSize, page: pagination.page, filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])], includeDataType)), columns: JSON.stringify(((_c = (_b = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumnItem => modifyColumnItem.modifyColId === modifyColumnSelected)) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c.map(col => { var _a; return (_a = col.metricCode) === null || _a === void 0 ? void 0 : _a.toUpperCase(); })) || []) }, ((sorter === null || sorter === void 0 ? void 0 : sorter.order) &&
                 (sorter === null || sorter === void 0 ? void 0 : sorter.columnKey) && {
                 sort: sorter.columnKey.toString(),
                 [sortDirectionKey]: SORT_MAP[sorter.order],
@@ -154,6 +176,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 } = getMatchesAnyList || {};
     // 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.
@@ -272,6 +295,20 @@ export function useDataTableListing(props) {
         const { itemMapKeys, icon, link } = searchProps || {};
         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 = useMemo(() => {
+        /**
+         * 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;
+        if (matchesAnyListData) {
+            return matchesAnyProps.formatData(matchesAnyListData);
+        }
+        return [];
+    }, [matchesAny, matchesAnyListData, selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column]);
     // Effects
     /**
      * Update values from local storage to state
@@ -314,7 +351,7 @@ export function useDataTableListing(props) {
         });
     }, [mapObject, updateModifyColumn]);
     const onApplyModifyColumn = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
-        var _g;
+        var _h;
         const { selectedMetrics, columnSetName, existColumnSet } = args || {};
         const flattenMetrics = flatTree(columnMetricsData, 'child');
         const selectedColumnMetrics = selectedMetrics
@@ -327,7 +364,7 @@ export function useDataTableListing(props) {
             exitModifyColumnId = (existColumnSet === null || existColumnSet === void 0 ? void 0 : existColumnSet.id) || '';
             if (columnSetName === '') {
                 exitModifyColumnId =
-                    ((_g = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _g === void 0 ? void 0 : _g.modifyColId) || '';
+                    ((_h = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _h === void 0 ? void 0 : _h.modifyColId) || '';
             }
         }
         /**
@@ -379,12 +416,16 @@ export function useDataTableListing(props) {
         // Set Local Storage
         localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { sorter })));
     }, [localStorageKey]);
+    /* Filter */
     const onChangeFilters = useCallback((filters) => {
         handleUpdateFilter({
             filters,
             selectedFilterId: SAVED_FILTER_DEFAULT[0].id,
         });
     }, [handleUpdateFilter]);
+    const onChangeFilterCondition = useCallback((filterItem) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterItem: filterItem })));
+    }, []);
     const onSaveFilter = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
         const { filters, name, existSavedFilter } = args;
         // Update exits filter
@@ -483,8 +524,13 @@ export function useDataTableListing(props) {
             },
             filters,
             filterMetrics,
+            matchesAny: {
+                list: matchesAnyList,
+                isLoading: isMatchesAnyListLoading,
+            },
             onSaveFilter,
             onChangeFilters,
+            onChangeFilterCondition,
         },
         /* Pagination */
         pagination: Object.assign(Object.assign({}, pagination), { total, onChange: onChangePagination }),

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

@@ -1,3 +1,4 @@
+import { MatchesAnyItem } from '../../../molecules';
 import { FILTER_ACTION_KEYS } from '../constants/filter';
 import { TActionButton, TConfirmResponse } from '@antscorp/antsomi-ui/es/types';
 export type TActionFilterButtonKey<T extends string[] = []> = (typeof FILTER_ACTION_KEYS)[keyof typeof FILTER_ACTION_KEYS] | T[number];
@@ -40,8 +41,14 @@ export interface FilterProps<TActionKey extends string[] = []> {
     savedFilter?: SavedFilter;
     filterMetrics?: FilterMetricItem[];
     filters?: FilterItem[];
+    matchesAny?: {
+        list?: MatchesAnyItem[];
+        isLoading?: boolean;
+    };
     actionButtons?: Partial<Record<TActionFilterButtonKey<TActionKey>, TActionButton>>;
     onChangeFilters?: (filters: FilterItem[]) => void;
     onSaveFilter?: (args: TOnSaveFilterArgs) => Promise<TConfirmResponse>;
+    /** Handle callback when filter condition changed */
+    onChangeFilterCondition?: (filterItem: FilterItem) => void;
 }
 export type TApiFilter = Record<string, any>[];

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { MenuProps } from 'antd';
 import { FilterItem, FilterMetricItem, TApiFilter } from '../types';
 import { SavedFilter } from '@antscorp/antsomi-ui/es/models/DataTable/SavedFilter';
+import { FilterProps } from '../..';
 type MenuItem = Required<MenuProps>['items'][number];
 type TSerializeFilterMetricsToMenuItems = {
     filterMetrics: FilterMetricItem[];
@@ -12,7 +13,8 @@ type TSerializeFilterMetricsToMenuItems = {
 type TRenderValueField = {
     filterMetric: FilterMetricItem;
     operator: string;
-    value?: string;
+    value?: any;
+    matchesAny?: FilterProps['matchesAny'];
     onChangeValue?: (value: any) => void;
 };
 type TGetFilterMetricByName = {
@@ -71,7 +73,7 @@ export declare const serializeFilterMetricsToMenuItems: ({ filterMetrics, level,
  * // ]
  */
 export declare const flatFilterMetrics: (filterMetrics: FilterMetricItem[]) => FilterMetricItem[];
-export declare const renderValueField: ({ filterMetric, operator, value, onChangeValue, }: TRenderValueField) => React.JSX.Element | null;
+export declare const renderValueField: ({ filterMetric, operator, value, matchesAny, 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

@@ -2,17 +2,19 @@
 import React from 'react';
 import { isEmpty } from 'lodash';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import dayjs from 'dayjs';
 // Components
 import { Popover, Typography, Icon, FormatInputNumber, Flex, Input } from '../../../atoms';
-import { METRIC_TYPE } from '@antscorp/antsomi-ui/es/constants';
+import { DATE_TIME_FORMAT, DATE_TIME_FORMAT_DISPLAY, METRIC_TYPE, } from '@antscorp/antsomi-ui/es/constants';
 import { Menu } from '../..';
+import { DatePicker, MatchesAnySelect } from '../../../molecules';
 // Styled
 import { FilterMetricLabel } from '../styled';
 import { OPERATORS_CODE } from '@antscorp/antsomi-ui/es/constants/condition';
 // Translations
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-import { METRIC_MAP_NUMBER_TYPE, METRIC_MAP_STRING_TYPE } from '../constants/filter';
-import { MatchesAnySelect } from '../../../molecules';
+import { EXCEPTION_OFF_FILTER_CLASS, METRIC_MAP_NUMBER_TYPE, METRIC_MAP_STRING_TYPE, } from '../constants/filter';
+const { MATCHES, MATCHES_ANY, NOT_MATCHES, ON, BEFORE, BEFORE_DATE, AFTER, AFTER_DATE } = OPERATORS_CODE;
 const { t } = i18nInstance;
 const { Text } = Typography;
 /* Filter */
@@ -102,9 +104,8 @@ export const flatFilterMetrics = (filterMetrics) => filterMetrics.reduce((acc, c
     return [...acc, cur];
 }, []);
 /* Render Value Field */
-export const renderValueField = ({ filterMetric, operator, value, onChangeValue = () => { }, }) => {
-    const { dataType } = filterMetric;
-    console.log('🚀 ~ filterMetric:', filterMetric);
+export const renderValueField = ({ filterMetric, operator, value, matchesAny, onChangeValue = () => { }, }) => {
+    const { dataType, name } = filterMetric;
     switch (operator) {
         case OPERATORS_CODE.GREATER_THAN:
         case OPERATORS_CODE.GREATER_THAN_EQUAL:
@@ -143,7 +144,15 @@ export const renderValueField = ({ filterMetric, operator, value, onChangeValue
         case OPERATORS_CODE.MATCHES:
         case OPERATORS_CODE.MATCHES_ANY:
         case OPERATORS_CODE.NOT_MATCHES: {
-            return React.createElement(MatchesAnySelect, null);
+            const { list, isLoading } = matchesAny || {};
+            return (React.createElement(MatchesAnySelect, { selectedItems: value, popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue }));
+        }
+        case OPERATORS_CODE.AFTER:
+        case OPERATORS_CODE.AFTER_DATE:
+        case OPERATORS_CODE.BEFORE:
+        case OPERATORS_CODE.ON:
+        case OPERATORS_CODE.BEFORE_DATE: {
+            return (React.createElement(DatePicker, { placeholder: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, format: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, allowClear: false, popupClassName: EXCEPTION_OFF_FILTER_CLASS, value: dayjs(value).isValid() ? dayjs(value) : undefined, onChange: onChangeValue }));
         }
         default:
             return null;
@@ -179,6 +188,33 @@ export const mapRulesToFilters = (rules) => rules.map(({ dataType, metricCode, o
     operator: operatorValue,
     value: filterValue,
 }));
-export const mapFiltersToApiFilters = (filters, includeDataType = false) => filters.map(({ column, operator, value, dataType }) => ({
-    [column]: Object.assign({ [operator]: value }, (includeDataType && { dataType: METRIC_MAP_STRING_TYPE[dataType || 'string'] })),
-}));
+export const mapFiltersToApiFilters = (filters, includeDataType = false) => filters.map(({ column, operator, value, dataType }) => {
+    let serializeValue = '';
+    switch (operator) {
+        case MATCHES:
+        case MATCHES_ANY:
+        case NOT_MATCHES: {
+            if (Array.isArray(value)) {
+                serializeValue = value.map(item => item.key);
+            }
+            break;
+        }
+        /** Date time */
+        case AFTER:
+        case AFTER_DATE:
+        case BEFORE:
+        case ON:
+        case BEFORE_DATE: {
+            if (dayjs(value).isValid()) {
+                serializeValue = dayjs(value).format(DATE_TIME_FORMAT.FILTER_CONDITION);
+            }
+            break;
+        }
+        default:
+            serializeValue = value;
+            break;
+    }
+    return {
+        [column]: Object.assign({ [operator]: serializeValue }, (includeDataType && { dataType: METRIC_MAP_STRING_TYPE[dataType || 'string'] })),
+    };
+});

package/es/constants/condition.d.ts

@@ -29,6 +29,9 @@ export declare const OPERATORS_CODE: {
     readonly CONTAIN: "contain";
     readonly DOES_NOT_CONTAIN: "does_not_contain";
     readonly IS: "is";
+    readonly ON: "on";
+    readonly AFTER: "after";
+    readonly BEFORE: "before";
 };
 export declare const OPERATORS_OPTION: {
     GREATER_THAN: {
@@ -151,6 +154,18 @@ export declare const OPERATORS_OPTION: {
         label: string;
         value: "is";
     };
+    ON: {
+        label: string;
+        value: "on";
+    };
+    AFTER: {
+        label: string;
+        value: "after";
+    };
+    BEFORE: {
+        label: string;
+        value: "before";
+    };
 };
 export declare const OPERATORS: {
     number: {

package/es/constants/condition.js

@@ -29,6 +29,9 @@ export const OPERATORS_CODE = {
     CONTAIN: 'contain',
     DOES_NOT_CONTAIN: 'does_not_contain',
     IS: 'is',
+    ON: 'on',
+    AFTER: 'after',
+    BEFORE: 'before',
 };
 const { GREATER_THAN, GREATER_THAN_EQUAL, LESS_THAN, LESS_THAN_EQUAL, NOT_EQUALS, EQUALS, BETWEEN, EXISTS, NOT_EXISTS, CONTAINS, DOESNT_CONTAIN, START_WITH, NOT_START_WITH, END_WITH, NOT_END_WITH, BEFORE_DATE, } = OPERATORS_CODE;
 export const OPERATORS_OPTION = {
@@ -152,6 +155,18 @@ export const OPERATORS_OPTION = {
         label: 'is',
         value: OPERATORS_CODE.IS,
     },
+    ON: {
+        label: 'on',
+        value: OPERATORS_CODE.ON,
+    },
+    AFTER: {
+        label: 'is',
+        value: OPERATORS_CODE.AFTER,
+    },
+    BEFORE: {
+        label: 'before',
+        value: OPERATORS_CODE.BEFORE,
+    },
 };
 export const OPERATORS = {
     number: {

package/es/constants/datetime.d.ts

@@ -5,4 +5,8 @@ export declare const TIME_ZONES: {
 export declare const DATE_TIME_FORMAT: {
     TITLE_DATE_TIME: string;
     DATE_TIME: string;
+    FILTER_CONDITION: string;
+};
+export declare const DATE_TIME_FORMAT_DISPLAY: {
+    FILTER_CONDITION: string;
 };

package/es/constants/datetime.js

@@ -1591,4 +1591,8 @@ export const TIME_ZONES = [
 export const DATE_TIME_FORMAT = {
     TITLE_DATE_TIME: 'YYYY-MM-DD HH:mm:ss',
     DATE_TIME: 'DD/MM/YYYY - HH:mm:ss',
+    FILTER_CONDITION: 'DD/MM/YYYY',
+};
+export const DATE_TIME_FORMAT_DISPLAY = {
+    FILTER_CONDITION: 'MM/DD/YYYY',
 };

package/es/constants/queries.d.ts

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

package/es/constants/queries.js

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

package/es/constants/theme.js

@@ -152,6 +152,7 @@ THEME.components = {
         borderRadiusSM: 0,
         borderRadiusOuter: 0,
         borderRadiusXS: 0,
+        paddingInline: 5,
         colorBorder: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.blue1,
         controlItemBgActive: '#E0EBF7',
         colorBgContainerDisabled: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw2,

package/es/locales/en/translation.json

@@ -9,7 +9,8 @@
         "removeAll": "Remove All",
         "selectAll": "Select All",
         "selected": "Selected",
-        "selectItemsFromList": "Select items from the list"
+        "selectItemsFromList": "Select items from the list",
+        "noResultsMatchesKeyWord": "No result matches for your keyword"
     },
     "form": {
         "placeholder": {

package/es/locales/i18n.d.ts

@@ -12,6 +12,7 @@ export declare const translationsJson: {
                 selectAll: string;
                 selected: string;
                 selectItemsFromList: string;
+                noResultsMatchesKeyWord: string;
             };
             form: {
                 placeholder: {
@@ -610,6 +611,7 @@ export declare const translationsJson: {
                 selectAll: string;
                 selected: string;
                 selectItemsFromList: string;
+                noResultsMatchesKeyWord: string;
             };
             form: {
                 placeholder: {

package/es/locales/translations.d.ts

@@ -12,6 +12,7 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
         selectAll: string;
         selected: string;
         selectItemsFromList: string;
+        noResultsMatchesKeyWord: string;
     };
     form: {
         placeholder: {

package/es/locales/vi/translation.json

@@ -9,7 +9,8 @@
         "removeAll": "Xóa tất cả",
         "selectAll": "Chọn tất cả",
         "selected": "Đã chọn",
-        "selectItemsFromList": "Chọn các mục từ danh sách"
+        "selectItemsFromList": "Chọn các mục từ danh sách",
+        "noResultsMatchesKeyWord": "Không có kết quả nào phù hợp với từ khóa của bạn"
     },
     "form": {
         "placeholder": {

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

@@ -1,5 +1,5 @@
 import { UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
-import { TCreateModifyColumnArgs, TDeleteModifyColumnArgs, TDeleteSavedFilterArgs, TGetFilterMetricListArgs, TGetMetricListArgs, TGetModifyColumnListArgs, TGetSavedFilterListArgs, TGetSearchListingArgs, TGetTableListingArgs, TSaveFilterArgs, TUpdateFilterArgs, TUpdateModifyColumnArgs } from '../../services/DataTable';
+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';
 import { DataTableListing } from '../../models/DataTable/DataTableListing';
@@ -37,6 +37,10 @@ export type TGetFilterMetricList = {
     args: TGetFilterMetricListArgs;
     options?: UseQueryOptions<FilterMetric[], any, FilterMetric[], any[]>;
 };
+export type TGetMatchesAnyList = {
+    args: TGetMatchesAnyListArgs;
+    options?: UseQueryOptions<any, any, any, any[]>;
+};
 export type TSaveFilter = {
     auth: TSaveFilterArgs['auth'];
     options?: UseMutationOptions<{
@@ -87,3 +91,4 @@ export declare const useDeleteSavedFilter: (params?: TDeleteSavedFilter) => impo
 }, any, TDeleteSavedFilterArgs, unknown>;
 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>;

package/es/queries/DataTable/index.js

@@ -5,7 +5,7 @@ import { omit } from 'lodash';
 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_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, } = QUERY_KEYS;
 /* Column */
 export const useGetColumnMetrics = (params) => {
     const { args, options } = params;
@@ -87,3 +87,7 @@ export const useGetSearchListing = (params) => {
     const { args, options } = params || {};
     return useQuery(Object.assign({ queryKey: [GET_SEARCH_LIST, args], queryFn: ({ signal }) => dataTableServices.search.getSearchListing(Object.assign(Object.assign({}, args), { request: Object.assign(Object.assign({}, args.request), { signal }) })) }, options));
 };
+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));
+};

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

@@ -8,6 +8,7 @@ export type TGlobalApiParams = {
     objType?: number;
     objId?: number;
     actionType?: number;
+    [key: string]: any;
 };
 export type TGetMetricListArgs = {
     auth?: TServiceAuth;
@@ -51,6 +52,11 @@ export type TGetFilterMetricListArgs = {
     params?: TGlobalApiParams;
     request?: AxiosRequestConfig<any>;
 };
+export type TGetMatchesAnyListArgs = {
+    auth?: TServiceAuth;
+    params?: TGlobalApiParams;
+    request?: AxiosRequestConfig<any>;
+};
 export type TSaveFilterArgs = {
     auth?: TServiceAuth;
     data?: TGlobalApiParams & {
@@ -118,6 +124,7 @@ export declare const dataTableServices: {
         deleteSavedFilter: ({ auth, params, }: TDeleteSavedFilterArgs) => Promise<{
             status: number;
         }>;
+        getMatchesAnyList: ({ auth, params, request }: TGetMatchesAnyListArgs) => Promise<any>;
     };
     listing: {
         getTableListing<T = any>({ auth, params, request, }: TGetTableListingArgs): Promise<DataTableListing<T>>;

package/es/services/DataTable/index.js

@@ -104,7 +104,7 @@ export const dataTableServices = {
             try {
                 const { url } = auth || {};
                 const { type = GET_SAVED_FILTER, objType: object, objId } = params || {};
-                const response = yield axios(Object.assign(Object.assign({}, request), { url, method: 'GET', params: Object.assign(Object.assign({ type,
+                const response = yield axios(Object.assign(Object.assign({ url, method: 'GET' }, request), { params: Object.assign(Object.assign({ type,
                         object,
                         objId }, mapAuth(auth)), request === null || request === void 0 ? void 0 : request.params) }));
                 return get(response, 'data.data.filters', []);
@@ -117,7 +117,7 @@ export const dataTableServices = {
             try {
                 const { url } = auth || {};
                 const { type = GET_LIST_FILTER, objType: object, objId } = params || {};
-                const response = yield axios(Object.assign(Object.assign({}, request), { url, method: 'GET', params: Object.assign(Object.assign({ type,
+                const response = yield axios(Object.assign(Object.assign({ url, method: 'GET' }, request), { params: Object.assign(Object.assign({ type,
                         object,
                         objId }, mapAuth(auth)), request === null || request === void 0 ? void 0 : request.params) }));
                 return get(response, 'data.data.filters', []);
@@ -180,12 +180,24 @@ export const dataTableServices = {
                 return Promise.reject(error);
             }
         }),
+        getMatchesAnyList: (_r) => __awaiter(void 0, [_r], void 0, function* ({ auth, params, request }) {
+            try {
+                const { url } = auth || {};
+                const _s = request || {}, { method = 'GET' } = _s, restOfRequest = __rest(_s, ["method"]);
+                const response = yield axios(Object.assign(Object.assign({ url,
+                    method }, restOfRequest), { params: Object.assign(Object.assign(Object.assign({}, mapAuth(auth)), params), request === null || request === void 0 ? void 0 : request.params) }));
+                return get(response, 'data.data', {});
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
     },
     listing: {
         getTableListing(_a) {
             return __awaiter(this, arguments, void 0, function* ({ auth, params, request, }) {
                 try {
-                    const response = yield axios(Object.assign(Object.assign({}, request), { url: `${auth === null || auth === void 0 ? void 0 : auth.url}`, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, params), mapAuth(auth)), request === null || request === void 0 ? void 0 : request.params) }));
+                    const response = yield axios(Object.assign(Object.assign({ url: `${auth === null || auth === void 0 ? void 0 : auth.url}`, method: 'GET' }, request), { params: Object.assign(Object.assign(Object.assign({}, params), mapAuth(auth)), request === null || request === void 0 ? void 0 : request.params) }));
                     return mapResponseListingToGeneral(get(response, 'data.data', {}));
                 }
                 catch (error) {
@@ -200,7 +212,7 @@ export const dataTableServices = {
                 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) }));
+                    const response = yield axios(Object.assign(Object.assign({ method, url: `${auth === null || auth === void 0 ? void 0 : auth.url}` }, restOfRequest), { params: Object.assign(Object.assign({ search }, mapAuth(auth)), request === null || request === void 0 ? void 0 : request.params) }));
                     return get(response, 'data.data', {});
                 }
                 catch (error) {

package/es/tests/DataTableTest.js

@@ -5,11 +5,11 @@ import { BrowserRouter } from 'react-router-dom';
 import { DataTable } from '../components/organism/DataTable';
 // Styled
 import { TableTestWrapper } from './styled';
+// Constants
 import { useDataTableListing } from '../components/organism/DataTable/hooks/useDataTableListing';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 export const DataTableTest = () => {
     // Hooks
-    const { filter, modifyColumn, pagination, table, search, queries, refetchTableListing } = useDataTableListing({
+    const { filter, modifyColumn, pagination, table, search } = useDataTableListing({
         name: 'survey-project',
         config: {
             //  NOTES: This is no need pass auth props when had
@@ -38,15 +38,33 @@ export const DataTableTest = () => {
                         page: 1,
                     },
                 },
+                matchesAny: {
+                    general: {
+                        url: `https://sandbox-survey.antsomi.com/api/v1/survey/filter/get-value-matches-any`,
+                        params(filterItem) {
+                            var _a;
+                            return {
+                                metric_code: (_a = filterItem === null || filterItem === void 0 ? void 0 : filterItem.column) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase(),
+                            };
+                        },
+                    },
+                    survey_id: {
+                        url: 'https://sandbox-survey.antsomi.com/api/v1/survey/filter/get-value-matches-any',
+                        params(filterItem) {
+                            var _a;
+                            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(),
+                            };
+                        },
+                    },
+                },
             },
             object: {
                 type: 5, // Survey,
                 objectId: -1, // NOTES: will note detail when to use objectId, current is no need
             },
         },
-        // table: {
-        //   sortDirectionKey: 'sortDirection',
-        // },
         search: {
             itemMapKeys: {
                 id: 'survey_id',
@@ -64,20 +82,36 @@ export const DataTableTest = () => {
             formatData(response) {
                 return (response === null || response === void 0 ? void 0 : response.body) || [];
             },
-            onClickSearchItem(item) {
-                console.log(item);
-            },
         },
         queryOptions: {
             getTableListing: {
                 refetchOnMount: 'always',
             },
         },
+        filter: {
+            matchesAny: {
+                general: {
+                    formatData(response) {
+                        return response === null || response === void 0 ? void 0 : response.rows.map(record => ({
+                            key: record.value,
+                            title: record.label,
+                        }));
+                    },
+                },
+                survey_id: {
+                    formatData(response) {
+                        return response === null || response === void 0 ? void 0 : response.rows.map(record => ({
+                            key: record.value,
+                            title: record.value,
+                        }));
+                    },
+                },
+            },
+        },
     });
     return (React.createElement(BrowserRouter, null,
         React.createElement(TableTestWrapper, null,
-            React.createElement(DataTable, { table: Object.assign(Object.assign({}, table), { rowSelection: undefined }), filter: filter, toolbar: {
-                    addButton: {},
+            React.createElement(DataTable, { table: table, filter: filter, toolbar: {
                     actionButtons: {
                         SEARCH: search,
                         COLUMN: modifyColumn,
@@ -97,6 +131,5 @@ export const DataTableTest = () => {
                             },
                         },
                     },
-                }, pagination: pagination })),
-        React.createElement(ReactQueryDevtools, { initialIsOpen: false })));
+                }, pagination: pagination }))));
 };

package/package.json

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