@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/organism/DataTable/components/Filter/SaveFilterPopover.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 } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Components
 import { Input, Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ApplyPopupContent, Form } from '@antscorp/antsomi-ui/es/components/molecules';
@@ -22,33 +12,29 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 const { t } = i18nInstance;
 export const SaveFilterPopover = memo(props => {
     // Props
-    const { loading, children, onApply = () => { }, onOpenChange, onCancel = () => { } } = props, restProps = __rest(props, ["loading", "children", "onApply", "onOpenChange", "onCancel"]);
+    const { loading, children, onApply = () => { }, onOpenChange, onCancel = () => { }, ...restProps } = props;
     // Form
     const [form] = Form.useForm();
     // Handlers
     const onFinishSubmit = (values) => {
         onApply(values.name);
     };
-    return (React.createElement(Popover, Object.assign({}, restProps, { trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0 }, arrow: false, placement: "bottomRight", content: React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS },
-            React.createElement(ApplyPopupContent, { cancelButtonProps: {
+    return (_jsx(Popover, { ...restProps, trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0 }, arrow: false, placement: "bottomRight", content: _jsx("div", { className: EXCEPTION_OFF_FILTER_CLASS, children: _jsx(ApplyPopupContent, { cancelButtonProps: {
                     disabled: loading,
                 }, applyButtonProps: {
                     loading,
                 }, title: t(translations.dataTableFilter.saveFilterSet), onCancel: () => {
                     form.resetFields();
                     onCancel();
-                }, onApply: () => form.submit() },
-                React.createElement(Form, { form: form, layout: "vertical", onFinish: onFinishSubmit },
-                    React.createElement(Form.Item, { style: { marginBottom: 0 }, name: "name", label: t(translations.name.title).toString(), rules: [
+                }, onApply: () => form.submit(), children: _jsx(Form, { form: form, layout: "vertical", onFinish: onFinishSubmit, children: _jsx(Form.Item, { style: { marginBottom: 0 }, name: "name", label: t(translations.name.title).toString(), rules: [
                             {
                                 required: true,
                                 message: t(translations.messageError.fieldIsRequired.message),
                             },
-                        ] },
-                        React.createElement(Input, { placeholder: t(translations.form.placeholder.enterTextHere) }))))), onOpenChange: open => {
+                        ], children: _jsx(Input, { placeholder: t(translations.form.placeholder.enterTextHere) }) }) }) }) }), onOpenChange: open => {
             if (onOpenChange) {
                 onOpenChange(open);
             }
             form.resetFields();
-        } }), children));
+        }, children: children }));
 });

package/es/components/organism/DataTable/components/Filter/SavedFilterAndMetrics.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 } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { isEmpty } from 'lodash';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Components
@@ -47,7 +39,7 @@ export const SavedFilterAndMetrics = memo(props => {
     // Refs
     const searchInputRef = useRef();
     // Memos
-    const savedFilterList = useDeepCompareMemo(() => (list === null || list === void 0 ? void 0 : list.filter(({ name }) => searchStringQuery(name, searchValue))) || [], [list, searchValue]);
+    const savedFilterList = useDeepCompareMemo(() => list?.filter(({ name }) => searchStringQuery(name, searchValue)) || [], [list, searchValue]);
     const { matchedParents, results: filterMetricList } = useDeepCompareMemo(() => recursiveSearchItems({
         list: filterMetrics || [],
         childrenKey: 'children',
@@ -59,33 +51,29 @@ export const SavedFilterAndMetrics = memo(props => {
         setState(initialState);
         // Handle auto focus input search when component is mount
         setTimeout(() => {
-            var _a;
-            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            searchInputRef.current?.focus();
         }, 200);
     }, []);
     // Handlers
     const renderSavedFilter = () => {
-        if (savedFilterList === null || savedFilterList === void 0 ? void 0 : savedFilterList.length) {
-            return (React.createElement(Menu, { selectedKeys: [(selected === null || selected === void 0 ? void 0 : selected.toString()) || ''], items: savedFilterList.map(savedFilter => {
+        if (savedFilterList?.length) {
+            return (_jsx(Menu, { selectedKeys: [selected?.toString() || ''], items: savedFilterList.map(savedFilter => {
                     const { id, name, removable } = savedFilter || {};
                     return {
                         key: id,
-                        label: (React.createElement(Flex, { className: "saved-filter__item", align: "center", justify: "space-between", onClick: () => {
+                        label: (_jsxs(Flex, { className: "saved-filter__item", align: "center", justify: "space-between", onClick: () => {
                                 onSelect(savedFilter);
                                 onSelectSavedFilter(savedFilter);
-                            } },
-                            name,
-                            !!removable && (React.createElement(IconButton, { className: "remove-btn", onClick: e => {
-                                    e.stopPropagation();
-                                    modal.confirm({
-                                        title: t(translations.dataTableFilter.deleteFilterSet.title).toString(),
-                                        content: t(translations.dataTableFilter.deleteFilterSet.description, {
-                                            filterName: name,
-                                        }).toString(),
-                                        icon: React.createElement("div", null),
-                                        okText: t(translations.remove).toString(),
-                                        onOk: () => __awaiter(void 0, void 0, void 0, function* () {
-                                            return new Promise((resolve, reject) => {
+                            }, children: [name, !!removable && (_jsx(IconButton, { className: "remove-btn", onClick: e => {
+                                        e.stopPropagation();
+                                        modal.confirm({
+                                            title: t(translations.dataTableFilter.deleteFilterSet.title).toString(),
+                                            content: t(translations.dataTableFilter.deleteFilterSet.description, {
+                                                filterName: name,
+                                            }).toString(),
+                                            icon: _jsx("div", {}),
+                                            okText: t(translations.remove).toString(),
+                                            onOk: async () => new Promise((resolve, reject) => {
                                                 if (onRemove) {
                                                     onRemove(savedFilter)
                                                         .then(() => {
@@ -96,11 +84,9 @@ export const SavedFilterAndMetrics = memo(props => {
                                                 else {
                                                     resolve(true);
                                                 }
-                                            });
-                                        }),
-                                    });
-                                } },
-                                React.createElement(Icon, { type: "icon-ants-outline-delete" }))))),
+                                            }),
+                                        });
+                                    }, children: _jsx(Icon, { type: "icon-ants-outline-delete" }) }))] })),
                     };
                 }) }));
         }
@@ -114,15 +100,8 @@ export const SavedFilterAndMetrics = memo(props => {
             }
         },
     }), [filterMetricList, onSelectFilterMetric]);
-    const renderFilterMetrics = () => (React.createElement(Menu, { key: matchedParents.map(item => `${item.id}`).join(','), mode: "inline", inlineIndent: 10, defaultOpenKeys: searchValue
+    const renderFilterMetrics = () => (_jsx(Menu, { mode: "inline", inlineIndent: 10, defaultOpenKeys: searchValue
             ? matchedParents.map(item => `${item.id}`)
-            : filterMetricItems === null || filterMetricItems === void 0 ? void 0 : filterMetricItems.map(item => `${item === null || item === void 0 ? void 0 : item.key}`), items: filterMetricItems }));
-    return (React.createElement(FilterSelectFieldsContent, null,
-        React.createElement(Input.CustomSearch, { ref: searchInputRef, value: searchValue, className: "search-input", autoFocus: true, onAfterChange: value => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: value }))) }),
-        React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '8px 0 2px 0' } }),
-        isEmpty(savedFilterList) && isEmpty(filterMetricList) ? (React.createElement(EmptyData, { showIcon: false, title: "No data" })) : (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 300, autoHide: true },
-            renderSavedFilter(),
-            !isEmpty(filterMetricList) && !isEmpty(savedFilterList) && (React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '0 0 2px 0' } })),
-            renderFilterMetrics())),
-        context));
+            : filterMetricItems?.map(item => `${item?.key}`), items: filterMetricItems }, matchedParents.map(item => `${item.id}`).join(',')));
+    return (_jsxs(FilterSelectFieldsContent, { children: [_jsx(Input.CustomSearch, { ref: searchInputRef, value: searchValue, className: "search-input", autoFocus: true, onAfterChange: value => setState(prev => ({ ...prev, searchValue: value })) }), _jsx(Divider, { style: { borderColor: globalToken?.bw3, margin: '8px 0 2px 0' } }), isEmpty(savedFilterList) && isEmpty(filterMetricList) ? (_jsx(EmptyData, { showIcon: false, title: "No data" })) : (_jsxs(Scrollbars, { autoHeight: true, autoHeightMax: 300, autoHide: true, children: [renderSavedFilter(), !isEmpty(filterMetricList) && !isEmpty(savedFilterList) && (_jsx(Divider, { style: { borderColor: globalToken?.bw3, margin: '0 0 2px 0' } })), renderFilterMetrics()] })), context] }));
 });

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Styled
 import { FilterWrapper } from './styled';
 import { FilterButton } from '../../styled';
@@ -7,9 +8,4 @@ import { FilterButton } from '../../styled';
 import { AddFilterButton } from './AddFilterButton';
 import { FilterConditionList } from './FilterConditionList';
 import { Flex, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
-export const Filter = memo(() => (React.createElement(FilterWrapper, { align: "center", gap: 10 },
-    React.createElement(FilterButton, null,
-        React.createElement(Icon, { type: "icon-ants-filter-slim", size: 18 })),
-    React.createElement(Flex, { align: "center", gap: 5, wrap: "wrap", style: { width: '100%', overflow: 'auto' } },
-        React.createElement(FilterConditionList, null),
-        React.createElement(AddFilterButton, null)))));
+export const Filter = memo(() => (_jsxs(FilterWrapper, { align: "center", gap: 10, children: [_jsx(FilterButton, { children: _jsx(Icon, { type: "icon-ants-filter-slim", size: 18 }) }), _jsxs(Flex, { align: "center", gap: 5, wrap: "wrap", style: { width: '100%', overflow: 'auto' }, children: [_jsx(FilterConditionList, {}), _jsx(AddFilterButton, {})] })] })));

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

@@ -1,7 +1,7 @@
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const FilterWrapper = styled(Flex) `
@@ -14,7 +14,7 @@ export const FilterSelectFieldsContent = styled.div `
     margin-top: 8px;
 
     i {
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+      color: ${globalToken?.bw8};
     }
   }
 
@@ -38,7 +38,7 @@ export const FilterConditionListWrapper = styled(Flex) ``;
 export const StyledFilterItem = styled(Flex) `
   position: relative;
   height: 30px;
-  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1};
+  border: 1px solid ${globalToken?.blue1};
   border-radius: 30px;
   padding: 0 10px;
   box-sizing: border-box;
@@ -52,7 +52,7 @@ export const StyledFilterItem = styled(Flex) `
   }
 
   * {
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
+    color: ${globalToken?.colorPrimary} !important;
   }
 
   .filter-item {
@@ -65,7 +65,7 @@ export const StyledFilterItem = styled(Flex) `
       width: 20px;
       height: 20px;
       right: 5px;
-      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue};
+      background-color: ${globalToken?.blue};
       display: flex;
       align-items: center;
       justify-content: center;

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

@@ -1,13 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Components
 import { TemplateListing } from '@antscorp/antsomi-ui/es/components/template';
 import { useDataTableContext } from '../../contexts/DataTableContext';
 export const GridView = memo(() => {
-    const gridView = useDataTableContext(store => { var _a; return (_a = store.toolbar.actionButtons) === null || _a === void 0 ? void 0 : _a.GRID_VIEW; });
+    const gridView = useDataTableContext(store => store.toolbar.actionButtons?.GRID_VIEW);
     if (gridView) {
         const { templateListingProps } = gridView;
-        return React.createElement(TemplateListing, Object.assign({}, templateListingProps));
+        return _jsx(TemplateListing, { ...templateListingProps });
     }
     return null;
 });

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

@@ -1,13 +1,5 @@
-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 React, { memo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useState } from 'react';
 // Components
 import { ModifyColumnModal } from '../../../ModifyColumnModal';
 import { Divider, Flex, Icon, Popover, Scrollbars, Spin, Typography, message, } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -32,7 +24,7 @@ export const ModifyColumn = memo(props => {
     const [modal, context] = Modal.useModal();
     const [messageApi, messageContext] = message.useMessage();
     // Store
-    const { savedModifyColumn, metrics, modalTitle, onApply } = useDataTableContext(store => { var _a; return (_a = store.toolbar.actionButtons) === null || _a === void 0 ? void 0 : _a.COLUMN; }) || {};
+    const { savedModifyColumn, metrics, modalTitle, onApply } = useDataTableContext(store => store.toolbar.actionButtons?.COLUMN) || {};
     // State
     const [state, setState] = useState({
         isOpenModal: false,
@@ -43,96 +35,76 @@ export const ModifyColumn = memo(props => {
     const { list, selected, loading = false, onRemove, onSelect = () => { }, } = savedModifyColumn || {};
     const { isOpenModal, isOpenPopover, editedColumnSet } = state;
     // Memo
-    const savedModifyColumns = useDeepCompareMemo(() => (list === null || list === void 0 ? void 0 : list.map(item => ({
+    const savedModifyColumns = useDeepCompareMemo(() => list?.map(item => ({
         key: item.id,
-        label: (React.createElement(SavedModifyColumnOption, { align: "center", justify: "space-between", gap: 5, onClick: () => onSelect(item) },
-            React.createElement(Typography.Text, { ellipsis: { tooltip: true }, style: { width: '100%' } }, item.name),
-            React.createElement(Flex, { align: "center", className: "action-buttons", onClick: e => {
-                    e.stopPropagation();
-                    setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
-                } },
-                !!item.editable && (React.createElement(IconButton, { onClick: () => {
-                        setState(Object.assign(Object.assign({}, state), { isOpenModal: true, editedColumnSet: item }));
-                    } },
-                    React.createElement(Icon, { type: "icon-ants-pencil", size: 18 }))),
-                !!item.removable && (React.createElement(IconButton, { onClick: () => {
-                        modal.confirm({
-                            title: t(translations.modifyColumn.deleteColumnSet.title).toString(),
-                            content: t(translations.modifyColumn.deleteColumnSet.description, {
-                                columnName: item.name,
-                            }).toString(),
-                            okText: t(translations.remove).toString(),
-                            icon: React.createElement("div", null),
-                            onOk: () => __awaiter(void 0, void 0, void 0, function* () {
-                                return new Promise((resolve, reject) => {
-                                    if (onRemove) {
-                                        onRemove(item)
-                                            .then(response => {
-                                            const { success, message } = response || {};
-                                            messageApi.open({
-                                                type: success ? 'success' : 'error',
-                                                content: message ||
-                                                    t(translations.modifyColumn.deleteColumnSet[success ? 'messageSuccess' : 'messageError']).toString(),
+        label: (_jsxs(SavedModifyColumnOption, { align: "center", justify: "space-between", gap: 5, onClick: () => onSelect(item), children: [_jsx(Typography.Text, { ellipsis: { tooltip: true }, style: { width: '100%' }, children: item.name }), _jsxs(Flex, { align: "center", className: "action-buttons", onClick: e => {
+                        e.stopPropagation();
+                        setState(prev => ({ ...prev, isOpenPopover: false }));
+                    }, children: [!!item.editable && (_jsx(IconButton, { onClick: () => {
+                                setState({ ...state, isOpenModal: true, editedColumnSet: item });
+                            }, children: _jsx(Icon, { type: "icon-ants-pencil", size: 18 }) })), !!item.removable && (_jsx(IconButton, { onClick: () => {
+                                modal.confirm({
+                                    title: t(translations.modifyColumn.deleteColumnSet.title).toString(),
+                                    content: t(translations.modifyColumn.deleteColumnSet.description, {
+                                        columnName: item.name,
+                                    }).toString(),
+                                    okText: t(translations.remove).toString(),
+                                    icon: _jsx("div", {}),
+                                    onOk: async () => new Promise((resolve, reject) => {
+                                        if (onRemove) {
+                                            onRemove(item)
+                                                .then(response => {
+                                                const { success, message } = response || {};
+                                                messageApi.open({
+                                                    type: success ? 'success' : 'error',
+                                                    content: message ||
+                                                        t(translations.modifyColumn.deleteColumnSet[success ? 'messageSuccess' : 'messageError']).toString(),
+                                                });
+                                                resolve(true);
+                                            })
+                                                .catch(err => {
+                                                messageApi.error({
+                                                    content: err?.message ||
+                                                        t(translations.modifyColumn.deleteColumnSet.messageError).toString(),
+                                                });
+                                                reject(err);
                                             });
+                                        }
+                                        else {
                                             resolve(true);
-                                        })
-                                            .catch(err => {
-                                            messageApi.error({
-                                                content: (err === null || err === void 0 ? void 0 : err.message) ||
-                                                    t(translations.modifyColumn.deleteColumnSet.messageError).toString(),
-                                            });
-                                            reject(err);
-                                        });
-                                    }
-                                    else {
-                                        resolve(true);
-                                    }
+                                        }
+                                    }),
                                 });
-                            }),
-                        });
-                    } },
-                    React.createElement(Icon, { type: "icon-ants-outline-delete" })))))),
-    }))) || [], [list, messageApi, modal, onRemove, onSelect, selected]);
+                            }, children: _jsx(Icon, { type: "icon-ants-outline-delete" }) }))] })] })),
+    })) || [], [list, messageApi, modal, onRemove, onSelect, selected]);
     /**
      * If editedColumnSet exists, get the metrics of this editedColumnSet
      * If editedColumnSet is not selected, use metrics of the selected modified column
      */
-    const selectedMetrics = useDeepCompareMemo(() => {
-        var _a;
-        return editedColumnSet
-            ? editedColumnSet === null || editedColumnSet === void 0 ? void 0 : editedColumnSet.metrics
-            : ((_a = list === null || list === void 0 ? void 0 : list.find(item => item.id === selected)) === null || _a === void 0 ? void 0 : _a.metrics) || [];
-    }, [list, selected, editedColumnSet]);
+    const selectedMetrics = useDeepCompareMemo(() => editedColumnSet
+        ? editedColumnSet?.metrics
+        : list?.find(item => item.id === selected)?.metrics || [], [list, selected, editedColumnSet]);
     // Handlers
     const onCancelModal = () => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { isOpenModal: false, editedColumnSet: undefined })));
+        setState(prev => ({ ...prev, isOpenModal: false, editedColumnSet: undefined }));
     };
-    const handleApplyModifyColumn = (args) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleApplyModifyColumn = async (args) => {
         if (onApply) {
-            yield onApply(args);
-            setState(prev => (Object.assign(Object.assign({}, prev), { isOpenModal: false, editedColumnSet: undefined })));
+            await onApply(args);
+            setState(prev => ({ ...prev, isOpenModal: false, editedColumnSet: undefined }));
         }
-    });
+    };
     // Renders
-    const SavedModifyColumnContent = (React.createElement(Spin, { spinning: loading },
-        React.createElement(Flex, { vertical: true },
-            React.createElement(Menu, { items: [
-                    {
-                        key: 'modify-column',
-                        label: 'Modify column',
-                    },
-                ], onClick: () => {
-                    // If not modify column is selected then do nothing
-                    if (!selected)
-                        return;
-                    setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false, isOpenModal: true })));
-                } }),
-            React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: 0 } }),
-            React.createElement(YourColumnSet, null, t(translations.modifyColumn.yourColumnSets).toString()),
-            React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 300 }, !(savedModifyColumns === null || savedModifyColumns === void 0 ? void 0 : savedModifyColumns.length) ? (React.createElement(EmptyData, { showIcon: false, title: t(translations.noData).toString() })) : (React.createElement(Menu, { selectedKeys: [(selected === null || selected === void 0 ? void 0 : selected.toString()) || ''], items: savedModifyColumns }))))));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Popover, { content: SavedModifyColumnContent, open: isOpenPopover, trigger: ['click'], placement: "bottomRight", arrow: false, overlayInnerStyle: { width: 250, padding: 0 }, onOpenChange: isOpen => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: isOpen }))), destroyTooltipOnHide: true }, children),
-        React.createElement(ModifyColumnModal, { title: modalTitle, open: isOpenModal, metrics: metrics, selectedMetrics: selectedMetrics, savedColumnSets: (savedModifyColumn === null || savedModifyColumn === void 0 ? void 0 : savedModifyColumn.list) || [], editedColumnSet: editedColumnSet, onCancel: onCancelModal, onApply: handleApplyModifyColumn }, t(translations.cancel.title).toString()),
-        context,
-        messageContext));
+    const SavedModifyColumnContent = (_jsx(Spin, { spinning: loading, children: _jsxs(Flex, { vertical: true, children: [_jsx(Menu, { items: [
+                        {
+                            key: 'modify-column',
+                            label: 'Modify column',
+                        },
+                    ], onClick: () => {
+                        // If not modify column is selected then do nothing
+                        if (!selected)
+                            return;
+                        setState(prev => ({ ...prev, isOpenPopover: false, isOpenModal: true }));
+                    } }), _jsx(Divider, { style: { borderColor: globalToken?.bw3, margin: 0 } }), _jsx(YourColumnSet, { children: t(translations.modifyColumn.yourColumnSets).toString() }), _jsx(Scrollbars, { autoHeight: true, autoHeightMax: 300, children: !savedModifyColumns?.length ? (_jsx(EmptyData, { showIcon: false, title: t(translations.noData).toString() })) : (_jsx(Menu, { selectedKeys: [selected?.toString() || ''], items: savedModifyColumns })) })] }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Popover, { content: SavedModifyColumnContent, open: isOpenPopover, trigger: ['click'], placement: "bottomRight", arrow: false, overlayInnerStyle: { width: 250, padding: 0 }, onOpenChange: isOpen => setState(prev => ({ ...prev, isOpenPopover: isOpen })), destroyTooltipOnHide: true, children: children }), _jsx(ModifyColumnModal, { title: modalTitle, open: isOpenModal, metrics: metrics, selectedMetrics: selectedMetrics, savedColumnSets: savedModifyColumn?.list || [], editedColumnSet: editedColumnSet, onCancel: onCancelModal, onApply: handleApplyModifyColumn, children: t(translations.cancel.title).toString() }), context, messageContext] }));
 });

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

@@ -1,7 +1,8 @@
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Flex, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms/Typography';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { bw8 } = globalToken || {};

package/es/components/organism/DataTable/components/Pagination/index.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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 // Components
 import { Select } from '@antscorp/antsomi-ui/es/components/molecules';
 import { Flex, Icon, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -25,7 +15,7 @@ import { DEFAULT_PAGE, DEFAULT_PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../../consta
 const { Text } = Typography;
 export const Pagination = props => {
     // Props
-    const { pageSize = DEFAULT_PAGE_SIZE, page = DEFAULT_PAGE, total = 0, extraContent, onChange } = props, restProps = __rest(props, ["pageSize", "page", "total", "extraContent", "onChange"]);
+    const { pageSize = DEFAULT_PAGE_SIZE, page = DEFAULT_PAGE, total = 0, extraContent, onChange, ...restProps } = props;
     // Instance
     const { t } = i18nInstance;
     // Memo
@@ -36,26 +26,12 @@ export const Pagination = props => {
     // Handlers
     const onChangePagination = (payload) => {
         if (onChange) {
-            onChange(Object.assign({ page,
-                pageSize }, payload));
+            onChange({
+                page,
+                pageSize,
+                ...payload,
+            });
         }
     };
-    return (React.createElement(PaginationWrapper, Object.assign({ align: "center", justify: extraContent ? 'space-between' : 'flex-end', gap: 10 }, restProps),
-        extraContent,
-        React.createElement(Flex, { align: "center", gap: 10, style: { flexShrink: 0, height: 'fit-content', alignSelf: 'flex-end' } },
-            React.createElement(Flex, { align: "center", gap: 10 },
-                React.createElement(Text, null,
-                    t(translations.pagination.showRow).toString(),
-                    ":"),
-                React.createElement(Select, { defaultValue: DEFAULT_PAGE_SIZE, value: pageSize, className: "show-row-select", options: paginationSizeOptions, popupMatchSelectWidth: 70, onChange: value => onChangePagination({ pageSize: value, page: 1 }) })),
-            React.createElement(Text, null, `${total ? page * pageSize - pageSize + 1 : 0} - ${Math.min(page * pageSize, total).toLocaleString()} of ${total === null || total === void 0 ? void 0 : total.toLocaleString()}`),
-            React.createElement(Flex, { align: "center", gap: 10 },
-                React.createElement(ActionButton, { onClick: () => onChangePagination({ page: 1 }), disabled: disabledPrevious },
-                    React.createElement(Icon, { type: "icon-ants-first-page", size: 12 })),
-                React.createElement(ActionButton, { disabled: disabledPrevious, onClick: () => onChangePagination({ page: page - 1 }) },
-                    React.createElement(Icon, { type: "icon-ants-angle-left", size: 12 })),
-                React.createElement(ActionButton, { disabled: disabledNext, onClick: () => onChangePagination({ page: page + 1 }) },
-                    React.createElement(Icon, { type: "icon-ants-angle-right", size: 12 })),
-                React.createElement(ActionButton, { onClick: () => onChangePagination({ page: Math.ceil(total / pageSize) }), disabled: disabledNext },
-                    React.createElement(Icon, { type: "icon-ants-last-page", size: 12 }))))));
+    return (_jsxs(PaginationWrapper, { align: "center", justify: extraContent ? 'space-between' : 'flex-end', gap: 10, ...restProps, children: [extraContent, _jsxs(Flex, { align: "center", gap: 10, style: { flexShrink: 0, height: 'fit-content', alignSelf: 'flex-end' }, children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsxs(Text, { children: [t(translations.pagination.showRow).toString(), ":"] }), _jsx(Select, { defaultValue: DEFAULT_PAGE_SIZE, value: pageSize, className: "show-row-select", options: paginationSizeOptions, popupMatchSelectWidth: 70, onChange: value => onChangePagination({ pageSize: value, page: 1 }) })] }), _jsx(Text, { children: `${total ? page * pageSize - pageSize + 1 : 0} - ${Math.min(page * pageSize, total).toLocaleString()} of ${total?.toLocaleString()}` }), _jsxs(Flex, { align: "center", gap: 10, children: [_jsx(ActionButton, { onClick: () => onChangePagination({ page: 1 }), disabled: disabledPrevious, children: _jsx(Icon, { type: "icon-ants-first-page", size: 12 }) }), _jsx(ActionButton, { disabled: disabledPrevious, onClick: () => onChangePagination({ page: page - 1 }), children: _jsx(Icon, { type: "icon-ants-angle-left", size: 12 }) }), _jsx(ActionButton, { disabled: disabledNext, onClick: () => onChangePagination({ page: page + 1 }), children: _jsx(Icon, { type: "icon-ants-angle-right", size: 12 }) }), _jsx(ActionButton, { onClick: () => onChangePagination({ page: Math.ceil(total / pageSize) }), disabled: disabledNext, children: _jsx(Icon, { type: "icon-ants-last-page", size: 12 }) })] })] })] }));
 };

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

@@ -1,7 +1,7 @@
 // Libraries
 import styled, { css } from 'styled-components';
 // Components
-import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const PaginationWrapper = styled(Flex) `
@@ -18,17 +18,17 @@ export const ActionButton = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  color: ${globalToken?.bw8};
   transition: all 0.3s;
 
   ${props => props.disabled &&
     css `
       pointer-events: none;
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5};
+      color: ${globalToken?.bw5};
     `}
 
   &:hover {
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText};
+    color: ${globalToken?.colorText};
   }
 
   cursor: pointer;