@antscorp/antsomi-ui 1.3.5-beta.472 → 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/RowSelectedControl.js

@@ -19,7 +19,7 @@ export const RowSelectedControl = memo(() => {
         }
         return (dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.menu) ? (React.createElement(Dropdown, Object.assign({ key: key, trigger: ['click'], arrow: false, placement: "bottomLeft", overlayStyle: { minWidth: 200 } }, dropdownProps), buttonComponent)) : (buttonComponent);
     };
-    return (React.createElement(RowSelectedControlWrapper, { align: "center" },
+    return (React.createElement(RowSelectedControlWrapper, { className: "selected-control", align: "center" },
         React.createElement(Flex, { className: "selected-count-label", align: "center" },
             (selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length) || 0,
             " selected"),

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

@@ -38,6 +38,7 @@ export const FilterSection = styled(Flex) `
   cursor: pointer;
 `;
 export const RowSelectedControlWrapper = styled(Flex) `
+  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 {};