@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/function-component-definition */
 // Libraries
 import React from 'react';
@@ -29,8 +19,8 @@ import { useDataTableStore } from './hooks/useDataTableStore';
 import clsx from 'clsx';
 const { GRID, TABLE } = GRID_VIEW_KEYS;
 const RENDER_VIEW_COMPONENTS = {
-    [GRID]: React.createElement(GridView, null),
-    [TABLE]: React.createElement(Table, null),
+    [GRID]: _jsx(GridView, {}),
+    [TABLE]: _jsx(Table, {}),
 };
 function DataTableComponent(props) {
     const { contentRender, className } = props || {};
@@ -43,26 +33,20 @@ function DataTableComponent(props) {
         if (contentRender) {
             return contentRender();
         }
-        const modeView = (GRID_VIEW === null || GRID_VIEW === void 0 ? void 0 : GRID_VIEW.mode) || 'TABLE';
-        const renderContentWrapper = (key = 'TABLE', children) => (React.createElement(DataTableContent, { style: {
+        const modeView = GRID_VIEW?.mode || 'TABLE';
+        const renderContentWrapper = (key = 'TABLE', children) => (_jsx(DataTableContent, { style: {
                 display: key === modeView ? 'flex' : 'none',
-            } }, children));
-        return Object.keys(RENDER_VIEW_COMPONENTS).map(key => (React.createElement(React.Fragment, { key: key }, renderContentWrapper(key, RENDER_VIEW_COMPONENTS[key]))));
-    }, [GRID_VIEW === null || GRID_VIEW === void 0 ? void 0 : GRID_VIEW.mode, contentRender]);
-    return (React.createElement(DataTableWrapper, { className: clsx(className, 'antsomi-data-table-root') },
-        !!showToolbar && React.createElement(Toolbar, null),
-        renderModeView,
-        React.createElement(Pagination, Object.assign({ id: "data-table-pagination" }, pagination, { onChange: payload => {
-                var _a;
-                setPagination(payload);
-                (_a = pagination === null || pagination === void 0 ? void 0 : pagination.onChange) === null || _a === void 0 ? void 0 : _a.call(pagination, payload);
-            } }))));
+            }, children: children }));
+        return Object.keys(RENDER_VIEW_COMPONENTS).map(key => (_jsx(React.Fragment, { children: renderContentWrapper(key, RENDER_VIEW_COMPONENTS[key]) }, key)));
+    }, [GRID_VIEW?.mode, contentRender]);
+    return (_jsxs(DataTableWrapper, { className: clsx(className, 'antsomi-data-table-root'), children: [!!showToolbar && _jsx(Toolbar, {}), renderModeView, _jsx(Pagination, { id: "data-table-pagination", ...pagination, onChange: payload => {
+                    setPagination(payload);
+                    pagination?.onChange?.(payload);
+                } })] }));
 }
 export function DataTable(props) {
-    const { store } = props, restOfProps = __rest(props, ["store"]);
+    const { store, ...restOfProps } = props;
     const defaultStore = useDataTableStore(restOfProps);
-    return (React.createElement(AntdTableConfigProvider, null,
-        React.createElement(DataTableProvider, { store: store || defaultStore },
-            React.createElement(DataTableComponent, Object.assign({}, restOfProps)))));
+    return (_jsx(AntdTableConfigProvider, { children: _jsx(DataTableProvider, { store: store || defaultStore, children: _jsx(DataTableComponent, { ...restOfProps }) }) }));
 }
 DataTable.useDataTableStore = useDataTableStore;

package/es/components/organism/DataTable/components/AddButton/index.js

@@ -1,34 +1,24 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 import styled from 'styled-components';
 // Components
-import { Flex, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+import { Icon } from '@antscorp/antsomi-ui/es/components/atoms/Icon';
 // Providers
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const StyledAddButton = styled(Flex) `
   border-radius: 100%;
   width: 30px;
   height: 30px;
-  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+  background-color: ${globalToken?.colorPrimary};
   color: #fff;
   flex-shrink: 0;
   cursor: pointer;
 `;
 export const AddButton = memo(props => {
-    const { show = true } = props, restProps = __rest(props, ["show"]);
+    const { show = true, ...restProps } = props;
     if (!show)
         return null;
-    return (React.createElement(StyledAddButton, Object.assign({ align: "center", justify: "center" }, restProps),
-        React.createElement(Icon, { type: "icon-ants-plus-square", size: 14 })));
+    return (_jsx(StyledAddButton, { align: "center", justify: "center", ...restProps, children: _jsx(Icon, { type: "icon-ants-plus-square", size: 14 }) }));
 });

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Components
 import { Button, Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import { FilterCondition } from './FilterCondition';
@@ -14,35 +15,34 @@ import { EXCEPTION_OFF_FILTER_CLASS } from '../../constants/filter';
 export const AddFilterButton = memo(() => {
     const { t } = i18nInstance;
     const { openPopover, selectedFilterMetric, matchesAny, onSelectFilterMetric, onApplyFilterMetricCondition, onClickAddFilter, onChangeFilterCondition, onMatchesAnyLoadMore, setState: setAddFilterConditionState, } = useAddFilterCondition();
-    return (React.createElement(Popover, { open: openPopover, content: React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS }, selectedFilterMetric ? (React.createElement(FilterCondition, { filterMetric: selectedFilterMetric, matchesAny: matchesAny, onCancel: () => onSelectFilterMetric(undefined), onApply: ({ operator, value }) => {
-                onApplyFilterMetricCondition({
-                    filterMetric: selectedFilterMetric,
-                    operator,
-                    value,
-                });
-                onSelectFilterMetric(undefined);
-                setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: false })));
-            }, onLoadMore: () => onMatchesAnyLoadMore(selectedFilterMetric.id), 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: {
+    return (_jsx(Popover, { open: openPopover, content: _jsx("div", { className: EXCEPTION_OFF_FILTER_CLASS, children: selectedFilterMetric ? (_jsx(FilterCondition, { filterMetric: selectedFilterMetric, matchesAny: matchesAny, onCancel: () => onSelectFilterMetric(undefined), onApply: ({ operator, value }) => {
+                    onApplyFilterMetricCondition({
+                        filterMetric: selectedFilterMetric,
+                        operator,
+                        value,
+                    });
+                    onSelectFilterMetric(undefined);
+                    setAddFilterConditionState(prev => ({ ...prev, openPopover: false }));
+                }, onLoadMore: () => onMatchesAnyLoadMore(selectedFilterMetric.id), onChange: condition => {
+                    const { id, dataType } = selectedFilterMetric;
+                    const { operator, value } = condition || {};
+                    onChangeFilterCondition({
+                        column: id,
+                        operator,
+                        value,
+                        dataType,
+                    });
+                } })) : (_jsx(SavedFilterAndMetrics, { onSelectFilterMetric: onSelectFilterMetric, onSelectSavedFilter: () => {
+                    setAddFilterConditionState(prev => ({ ...prev, openPopover: false }));
+                } })) }), trigger: ['click'], overlayInnerStyle: {
             width: 300,
             padding: 0,
             overflow: selectedFilterMetric ? 'visible' : 'hidden',
         }, arrow: false, placement: "bottomLeft", destroyTooltipOnHide: true, onOpenChange: open => {
-            setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: open })));
+            setAddFilterConditionState(prev => ({ ...prev, openPopover: open }));
             if (!open) {
                 /* Reset filter metric */
                 onSelectFilterMetric(undefined);
             }
-        } },
-        React.createElement(Button, { type: "text", onClick: () => onClickAddFilter() }, t(translations.filter.addFilter).toString())));
+        }, children: _jsx(Button, { type: "text", onClick: () => onClickAddFilter(), children: t(translations.filter.addFilter).toString() }) }));
 });

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

@@ -1,14 +1,6 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 // Components
 import { Flex, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Modal } from '@antscorp/antsomi-ui/es/components/molecules';
@@ -56,26 +48,22 @@ export const FilterActionButton = memo(() => {
     };
     /* Handle render action buttons */
     const renderComponent = ({ key, label, buttonProps, icon, customRender }, option) => {
-        const actionButton = (React.createElement(ActionButton, Object.assign({ key: key, type: "text" }, buttonProps, { 
+        const actionButton = (_jsxs(ActionButton, { type: "text", ...buttonProps, 
             // Handle hide action button except close button when filter is active
             onClick: e => {
                 if (buttonProps && buttonProps.onClick) {
                     buttonProps.onClick(e);
                 }
                 handleClickActionButton(key);
-            }, "$hide": key !== 'CLOSE' && !(filters === null || filters === void 0 ? void 0 : filters.length) }),
-            React.createElement(Flex, { align: "center", justify: "center", style: { height: 24, width: 24, flexShrink: 0 } },
-                React.createElement(Icon, { type: icon, size: (option === null || option === void 0 ? void 0 : option.iconSize) || 18 })),
-            `${label}`.toUpperCase()));
+            }, "$hide": key !== 'CLOSE' && !filters?.length, children: [_jsx(Flex, { align: "center", justify: "center", style: { height: 24, width: 24, flexShrink: 0 }, children: _jsx(Icon, { type: icon, size: option?.iconSize || 18 }) }), `${label}`.toUpperCase()] }, key));
         // If action has customer render props then return it not handle more
         if (customRender) {
             return actionButton;
         }
         switch (key) {
             case 'SAVE': {
-                return (React.createElement(SaveFilterPopover, { open: openSaveFilterPopover, onApply: (name) => __awaiter(void 0, void 0, void 0, function* () {
-                        var _a;
-                        const existSavedFilter = (_a = savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.list) === null || _a === void 0 ? void 0 : _a.find(savedFilter => savedFilter.name.trim() === name);
+                return (_jsx(SaveFilterPopover, { open: openSaveFilterPopover, onApply: async (name) => {
+                        const existSavedFilter = savedFilter?.list?.find(savedFilter => savedFilter.name.trim() === name);
                         if (existSavedFilter) {
                             modal.confirm({
                                 title: t(translations.dataTableFilter.replaceFilterSet.title).toString(),
@@ -83,42 +71,42 @@ export const FilterActionButton = memo(() => {
                                 content: t(translations.dataTableFilter.replaceFilterSet.description, {
                                     filterName: name,
                                 }).toString(),
-                                icon: React.createElement("div", null),
+                                icon: _jsx("div", {}),
                                 wrapClassName: EXCEPTION_OFF_FILTER_CLASS,
                                 okText: t(translations.global.replace).toString(),
-                                onOk: () => __awaiter(void 0, void 0, void 0, function* () {
-                                    return new Promise((resolve, reject) => {
-                                        onSaveFilter({
-                                            filters: filters || [],
-                                            name,
-                                            existSavedFilter,
-                                        })
-                                            .then(() => resolve(true))
-                                            .catch(() => reject());
-                                    });
+                                onOk: async () => new Promise((resolve, reject) => {
+                                    onSaveFilter({
+                                        filters: filters || [],
+                                        name,
+                                        existSavedFilter,
+                                    })
+                                        .then(() => resolve(true))
+                                        .catch(() => reject());
                                 }),
                             });
                         }
                         else {
-                            setState(prev => (Object.assign(Object.assign({}, prev), { saveFilterLoading: true })));
-                            yield onSaveFilter({
+                            setState(prev => ({ ...prev, saveFilterLoading: true }));
+                            await onSaveFilter({
                                 filters: filters || [],
                                 name,
                             });
-                            setState(prev => (Object.assign(Object.assign({}, prev), { saveFilterLoading: false, openSaveFilterPopover: false })));
+                            setState(prev => ({
+                                ...prev,
+                                saveFilterLoading: false,
+                                openSaveFilterPopover: false,
+                            }));
                         }
-                    }), onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { openSaveFilterPopover: false }))), loading: saveFilterLoading, onOpenChange: open => setState(prev => (Object.assign(Object.assign({}, prev), { openSaveFilterPopover: open }))) }, actionButton));
+                    }, onCancel: () => setState(prev => ({ ...prev, openSaveFilterPopover: false })), loading: saveFilterLoading, onOpenChange: open => setState(prev => ({ ...prev, openSaveFilterPopover: open })), children: actionButton }));
             }
             default:
                 return actionButton;
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { align: "center", gap: 2 }, renderActionButtons({
-            renderComponent,
-            // CLOSE ACTION ALWAYS VISIBLE
-            actionButtons: Object.assign(Object.assign({}, actionButtons), { CLOSE: Object.assign({}, actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.CLOSE) }),
-            defaultActionOptions: FILTER_ACTION_OPTIONS,
-        })),
-        context));
+    return (_jsxs(_Fragment, { children: [_jsx(Flex, { align: "center", gap: 2, children: renderActionButtons({
+                    renderComponent,
+                    // CLOSE ACTION ALWAYS VISIBLE
+                    actionButtons: { ...actionButtons, CLOSE: { ...actionButtons?.CLOSE } },
+                    defaultActionOptions: FILTER_ACTION_OPTIONS,
+                }) }), context] }));
 });

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Select, Form, ApplyPopupContent } from '@antscorp/antsomi-ui/es/components/molecules';
@@ -20,12 +21,12 @@ export const FilterCondition = props => {
     // Variables
     const { name, dataType, operators } = filterMetric;
     // Memos
-    const operatorList = useMemo(() => { var _a; return operators || Object.values(((_a = OPERATORS[dataType || '']) === null || _a === void 0 ? void 0 : _a.list) || []); }, [dataType, operators]);
+    const operatorList = useMemo(() => operators || Object.values(OPERATORS[dataType || '']?.list || []), [dataType, operators]);
     const isDisableApply = useMemo(() => {
         let isDisable = false;
         switch (operator) {
             case BETWEEN.value: {
-                const [firstValue, secondValue] = (value === null || value === void 0 ? void 0 : value.split('AND')) || [];
+                const [firstValue, secondValue] = value?.split('AND') || [];
                 isDisable = isNaN(parseInt(firstValue)) || isNaN(parseInt(secondValue));
                 break;
             }
@@ -49,15 +50,14 @@ export const FilterCondition = props => {
     // Effects
     /* Handle set default operator when mount */
     useEffect(() => {
-        var _a;
         form.setFieldsValue({
-            operator: ((_a = operatorList[0]) === null || _a === void 0 ? void 0 : _a.value) || '',
+            operator: operatorList[0]?.value || '',
         });
     }, [form, operatorList]);
     /** Handle callback change values */
     useEffect(() => {
         if (formValues) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(formValues);
+            onChange?.(formValues);
         }
     }, [formValues, onChange]);
     /* Update filter condition values */
@@ -81,26 +81,20 @@ export const FilterCondition = props => {
             onCancel();
         }
     };
-    return (React.createElement(ApplyPopupContent, { title: name, applyButtonProps: {
+    return (_jsx(ApplyPopupContent, { title: name, applyButtonProps: {
             disabled: isDisableApply,
-        }, onCancel: handleCancel, onApply: () => form.submit() },
-        React.createElement(Form, { form: form, layout: "vertical", onFinish: onFinishForm },
-            React.createElement(Flex, { vertical: true, gap: 20 },
-                React.createElement(Form.Item, { name: "operator", noStyle: true },
-                    React.createElement(Select, { value: operator, options: operatorList, onChange: () => form.setFieldsValue({
-                            value: '',
-                        }), getPopupContainer: triggerNode => triggerNode.parentElement, 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,
-                    onLoadMore,
-                    onChangeValue: value => {
-                        form.setFieldsValue({
-                            value,
-                        });
-                    },
-                })))));
+        }, onCancel: handleCancel, onApply: () => form.submit(), children: _jsx(Form, { form: form, layout: "vertical", onFinish: onFinishForm, children: _jsxs(Flex, { vertical: true, gap: 20, children: [_jsx(Form.Item, { name: "operator", noStyle: true, children: _jsx(Select, { value: operator, options: operatorList, onChange: () => form.setFieldsValue({
+                                value: '',
+                            }), getPopupContainer: triggerNode => triggerNode.parentElement, dropdownRender: menu => (_jsx("div", { className: EXCEPTION_OFF_FILTER_CLASS, onClick: e => e.stopPropagation(), children: menu })) }) }), _jsx(Form.Item, { name: "value", noStyle: true }), renderValueField({
+                        filterMetric,
+                        operator,
+                        value,
+                        matchesAny,
+                        onLoadMore,
+                        onChangeValue: value => {
+                            form.setFieldsValue({
+                                value,
+                            });
+                        },
+                    })] }) }) }));
 };

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

@@ -11,7 +11,7 @@ export const FilterConditionWrapper = styled.div `
     }
 
     &__title {
-      font-size: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontSizeXL}px;
+      font-size: ${globalToken?.fontSizeXL}px;
       font-weight: 500;
     }
 
@@ -21,19 +21,19 @@ export const FilterConditionWrapper = styled.div `
       justify-content: flex-end;
       padding: 15px;
       gap: 10px;
-      border-top: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+      border-top: 1px solid ${globalToken?.bw3};
     }
   }
 `;
 export const CloseButton = styled(Flex) `
   width: 24px;
   height: 24px;
-  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  color: ${globalToken?.bw8};
   transition: all 0.3s;
   cursor: pointer;
 
   &:hover {
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw10};
+    color: ${globalToken?.bw10};
   }
 
   i {

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

@@ -1,6 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react/no-array-index-key */
 // Libraries
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 // Components
 import { Button, Flex, Icon, Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import { FilterCondition } from './FilterCondition';
@@ -36,14 +37,17 @@ export const FilterConditionList = memo(() => {
     const flattenFilterMetrics = useDeepCompareMemo(() => flatFilterMetrics(filterMetrics || []), [filterMetrics]);
     // Effects
     useDeepCompareEffect(() => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { serializeFilters: filters || [] })));
+        setState(prev => ({ ...prev, serializeFilters: filters || [] }));
     }, [filters]);
     // Handlers
     const onApplyFilterMetricCondition = ({ value, operator, existMetricIdx, }) => {
         const cloneFilters = cloneDeep(filters);
         if (existMetricIdx !== -1 && cloneFilters) {
-            cloneFilters[existMetricIdx || 0] = Object.assign(Object.assign({}, cloneFilters[existMetricIdx || 0]), { value,
-                operator });
+            cloneFilters[existMetricIdx || 0] = {
+                ...cloneFilters[existMetricIdx || 0],
+                value,
+                operator,
+            };
         }
         onChangeFilters(cloneFilters || []);
     };
@@ -52,21 +56,23 @@ export const FilterConditionList = memo(() => {
         if (cloneSerializeFilters[filterIdx]) {
             cloneSerializeFilters[filterIdx].isOpenPopover = isOpenPopover;
         }
-        setState(prev => (Object.assign(Object.assign({}, prev), { serializeFilters: cloneSerializeFilters })));
+        setState(prev => ({
+            ...prev,
+            serializeFilters: cloneSerializeFilters,
+        }));
     };
     const onClickRemoveFilter = (filterIdx) => {
         const cloneFilters = cloneDeep(filters) || [];
         cloneFilters.splice(filterIdx, 1);
         onChangeFilters(cloneFilters || []);
     };
-    const renderFilterItem = () => serializeFilters === null || serializeFilters === void 0 ? void 0 : serializeFilters.map((filter, index) => {
+    const renderFilterItem = () => serializeFilters?.map((filter, index) => {
         const { column, operator, value, isOpenPopover } = filter;
-        const metric = flattenFilterMetrics === null || flattenFilterMetrics === void 0 ? void 0 : flattenFilterMetrics.find(filterMetric => filterMetric.id === column);
+        const metric = flattenFilterMetrics?.find(filterMetric => filterMetric.id === column);
         // 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, { matchesAny: matchesAny, filterMetric: metric, filterCondition: filter, onApply: ({ operator, value }) => {
+        return (_jsx(Popover, { open: isOpenPopover, content: _jsx("div", { className: EXCEPTION_OFF_FILTER_CLASS, children: _jsx(FilterCondition, { matchesAny: matchesAny, filterMetric: metric, filterCondition: filter, onApply: ({ operator, value }) => {
                         onApplyFilterMetricCondition({
                             operator,
                             value,
@@ -80,38 +86,31 @@ export const FilterConditionList = memo(() => {
                             value: condition.value,
                             dataType: metric.dataType,
                         });
-                    }, onLoadMore: () => onMatchesAnyLoadMore(metric.id), onCancel: () => handleTogglePopover(index, false) })), trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0, overflow: 'visible' }, arrow: false, placement: "bottomLeft", onOpenChange: open => handleTogglePopover(index, open) },
-            React.createElement(FilterItem, { gap: 5, onClick: () => setFilter({
+                    }, onLoadMore: () => onMatchesAnyLoadMore(metric.id), onCancel: () => handleTogglePopover(index, false) }) }), trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0, overflow: 'visible' }, arrow: false, placement: "bottomLeft", onOpenChange: open => handleTogglePopover(index, open), children: _jsx(FilterItem, { gap: 5, onClick: () => setFilter({
                     isFilterActive: true,
-                }), name: (metric === null || metric === void 0 ? void 0 : metric.name) || column.toString() || '', operator: operator, value: value, onClickRemove: () => onClickRemoveFilter(index) })));
+                }), name: metric?.name || column.toString() || '', operator: operator, value: value, onClickRemove: () => onClickRemoveFilter(index) }) }, `${column}-${operator}-${value}-${index}`));
     });
     const renderViewAll = () => {
-        var _a;
-        if (isFilterActive || (serializeFilters === null || serializeFilters === void 0 ? void 0 : serializeFilters.length) <= FILTER_SHOW_MAX)
+        if (isFilterActive || 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) => {
-                const { column, operator, value } = filter;
-                const metric = flattenFilterMetrics === null || flattenFilterMetrics === void 0 ? void 0 : flattenFilterMetrics.find(filterMetric => filterMetric.id === column);
-                if (!metric)
-                    return null;
-                return (React.createElement(FilterItem, { key: `${column}-${operator}-${value}-${index}`, gap: 5, onClick: () => {
-                        setFilter({
-                            isFilterActive: true,
-                        });
-                        // Handle open popover in filter active mode
-                        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: 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(),
-                React.createElement(Icon, { type: "icon-ants-expand-more", style: {
-                        transform: isOpenViewAllPopover ? 'rotate(180deg)' : 'none',
-                        transition: 'all 200ms',
-                    } }))));
+        return (_jsx(Popover, { open: isOpenViewAllPopover, content: _jsx(Flex, { vertical: true, gap: 5, children: serializeFilters?.slice(3)?.map((filter, index) => {
+                    const { column, operator, value } = filter;
+                    const metric = flattenFilterMetrics?.find(filterMetric => filterMetric.id === column);
+                    if (!metric)
+                        return null;
+                    return (_jsx(FilterItem, { gap: 5, onClick: () => {
+                            setFilter({
+                                isFilterActive: true,
+                            });
+                            // Handle open popover in filter active mode
+                            handleTogglePopover(FILTER_SHOW_MAX + index, true);
+                            // Close popover view all
+                            setState(prev => ({ ...prev, isOpenViewAllPopover: false }));
+                        }, name: metric?.name || column.toString() || '', operator: operator, value: value, onClickRemove: () => onClickRemoveFilter(index) }, `${column}-${operator}-${value}-${index}`));
+                }) }), trigger: ['click'], overlayInnerStyle: { width: 300, padding: 15 }, arrow: false, onOpenChange: open => setState(prev => ({ ...prev, isOpenViewAllPopover: open })), children: _jsxs(Button, { type: "text", style: { ...(isOpenViewAllPopover && { backgroundColor: globalToken?.blue1_1 }) }, children: [t(translations.viewAll).toString(), _jsx(Icon, { type: "icon-ants-expand-more", style: {
+                            transform: isOpenViewAllPopover ? 'rotate(180deg)' : 'none',
+                            transition: 'all 200ms',
+                        } })] }) }));
     };
-    return (React.createElement(React.Fragment, null,
-        renderFilterItem(),
-        renderViewAll()));
+    return (_jsxs(_Fragment, { children: [renderFilterItem(), renderViewAll()] }));
 });

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

@@ -1,16 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import dayjs from 'dayjs';
 // Components
 import { Icon, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -22,7 +12,7 @@ const { MATCHES_ANY, MATCHES, NOT_MATCHES, IS, AFTER, BEFORE, AFTER_DATE, BEFORE
 const { DATE, DATE_TIME } = METRIC_TYPE;
 const { Text } = Typography;
 export const FilterItem = props => {
-    const { name, operator, datatype, value, onClickRemove } = props, restProps = __rest(props, ["name", "operator", "datatype", "value", "onClickRemove"]);
+    const { name, operator, datatype, value, onClickRemove, ...restProps } = props;
     // Memo
     const serializeValue = useMemo(() => {
         // Check type of value is valid date
@@ -37,8 +27,7 @@ export const FilterItem = props => {
         return value;
     }, [value, operator]);
     const serializeOperator = useMemo(() => {
-        var _a;
-        const operatorLabel = ((_a = Object.values(OPERATORS_OPTION).find(({ value }) => value === operator)) === null || _a === void 0 ? void 0 : _a.label) || '';
+        const operatorLabel = Object.values(OPERATORS_OPTION).find(({ value }) => value === operator)?.label || '';
         switch (operator) {
             case MATCHES_ANY:
             case NOT_MATCHES:
@@ -50,19 +39,10 @@ export const FilterItem = props => {
         }
     }, [operator]);
     const tooltipContent = `${name} ${operator} ${serializeValue}`;
-    return (React.createElement(StyledFilterItem, Object.assign({ gap: 5 }, restProps),
-        React.createElement(Text, { ellipsis: { tooltip: tooltipContent } },
-            React.createElement(Text, null, name),
-            " \u00A0",
-            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) {
-                    onClickRemove();
-                }
-            } },
-            React.createElement(Icon, { type: "icon-ants-remove-slim", size: 10 }))));
+    return (_jsxs(StyledFilterItem, { gap: 5, ...restProps, children: [_jsxs(Text, { ellipsis: { tooltip: tooltipContent }, children: [_jsx(Text, { children: name }), " \u00A0", serializeOperator && _jsxs(Text, { children: [serializeOperator, " \u00A0"] }), _jsx(Text, { strong: true, className: "filter-item__value", children: `${serializeValue}` })] }), _jsx("div", { className: "filter-item__close-btn", onClick: e => {
+                    e.stopPropagation();
+                    if (onClickRemove) {
+                        onClickRemove();
+                    }
+                }, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 10 }) })] }));
 };