@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/organism/ModifyColumnModal/ModifyColumnModal.js

@@ -1,26 +1,7 @@
-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());
-    });
-};
-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 { cloneDeep, isEmpty } from 'lodash';
-import React, { useState } from 'react';
+import { useState } from 'react';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Components
@@ -46,7 +27,7 @@ const initialState = {
 const PATH = 'antsomi-ui/src/components/organism/ModifyColumnModal/ModifyColumnModal.tsx';
 export const ModifyColumnModal = props => {
     // Props
-    const { title = t(translations.modifyColumn.customizeColumns).toString(), metrics, selectedMetrics, savedColumnSets, editedColumnSet, open, onCancel = () => { }, onApply = () => Promise.resolve() } = props, restProps = __rest(props, ["title", "metrics", "selectedMetrics", "savedColumnSets", "editedColumnSet", "open", "onCancel", "onApply"]);
+    const { title = t(translations.modifyColumn.customizeColumns).toString(), metrics, selectedMetrics, savedColumnSets, editedColumnSet, open, onCancel = () => { }, onApply = () => Promise.resolve(), ...restProps } = props;
     // Hooks
     const [modal, context] = Modal.useModal();
     // State
@@ -55,8 +36,7 @@ export const ModifyColumnModal = props => {
     const { parentMetricSelectedId, checkedColumnSet, columnSetName, searchValue, loadingApply, serializeSelectedMetrics, } = state;
     // Memo
     const { results: childMetricTreeData, matchedParents } = useDeepCompareMemo(() => {
-        var _a;
-        const childrenMetrics = (_a = metrics === null || metrics === void 0 ? void 0 : metrics.find(metric => metric.id === parentMetricSelectedId)) === null || _a === void 0 ? void 0 : _a.children;
+        const childrenMetrics = metrics?.find(metric => metric.id === parentMetricSelectedId)?.children;
         const serializeChildMetrics = (metrics) => metrics.map(metric => {
             const { id, name, disabled, children } = metric;
             return {
@@ -76,7 +56,7 @@ export const ModifyColumnModal = props => {
     }, [metrics, parentMetricSelectedId, searchValue]);
     const isDisabledApply = useDeepCompareMemo(() => {
         let isDisable = false;
-        if (!(serializeSelectedMetrics === null || serializeSelectedMetrics === void 0 ? void 0 : serializeSelectedMetrics.length)) {
+        if (!serializeSelectedMetrics?.length) {
             isDisable = true;
         }
         if (checkedColumnSet && !columnSetName) {
@@ -89,16 +69,18 @@ export const ModifyColumnModal = props => {
     // Effects
     useDeepCompareEffect(() => {
         if (!parentMetricSelectedId && !!metrics && open) {
-            setState(prev => { var _a; return (Object.assign(Object.assign({}, prev), { parentMetricSelectedId: (_a = metrics[0]) === null || _a === void 0 ? void 0 : _a.id })); });
+            setState(prev => ({ ...prev, parentMetricSelectedId: metrics[0]?.id }));
         }
     }, [metrics, parentMetricSelectedId, open]);
     useDeepCompareEffect(() => {
         if (open) {
-            const newSelectedMetrics = selectedMetrics === null || selectedMetrics === void 0 ? void 0 : selectedMetrics.map(selectedMetric => {
+            const newSelectedMetrics = selectedMetrics
+                ?.map(selectedMetric => {
                 const metricInfo = flattenMetrics.find(({ id }) => selectedMetric === id);
                 return metricInfo;
-            }).filter(Boolean);
-            setState(prev => (Object.assign(Object.assign({}, prev), { serializeSelectedMetrics: newSelectedMetrics })));
+            })
+                .filter(Boolean);
+            setState(prev => ({ ...prev, serializeSelectedMetrics: newSelectedMetrics }));
         }
     }, [flattenMetrics, selectedMetrics, open]);
     // Handlers
@@ -106,10 +88,10 @@ export const ModifyColumnModal = props => {
         onCancel(e);
         setState(initialState);
     };
-    const handleApply = () => __awaiter(void 0, void 0, void 0, function* () {
+    const handleApply = async () => {
         try {
-            const formattedColumnSetName = columnSetName === null || columnSetName === void 0 ? void 0 : columnSetName.trim();
-            const existColumnSet = savedColumnSets === null || savedColumnSets === void 0 ? void 0 : savedColumnSets.find(({ name }) => name === formattedColumnSetName);
+            const formattedColumnSetName = columnSetName?.trim();
+            const existColumnSet = savedColumnSets?.find(({ name }) => name === formattedColumnSetName);
             if (existColumnSet) {
                 modal.confirm({
                     title: t(translations.modifyColumn.replaceColumnSet.title).toString(),
@@ -117,30 +99,28 @@ export const ModifyColumnModal = props => {
                     content: t(translations.modifyColumn.replaceColumnSet.description, {
                         columnName: formattedColumnSetName,
                     }).toString(),
-                    icon: React.createElement("div", null),
+                    icon: _jsx("div", {}),
                     okText: t(translations.global.replace).toString(),
-                    onOk: () => __awaiter(void 0, void 0, void 0, function* () {
-                        return new Promise((resolve, reject) => {
-                            onApply({
-                                existColumnSet,
-                                selectedMetrics: (serializeSelectedMetrics === null || serializeSelectedMetrics === void 0 ? void 0 : serializeSelectedMetrics.map(({ id }) => id)) || [],
-                                columnSetName: formattedColumnSetName,
-                            })
-                                .then(() => {
-                                resolve(true);
-                                setState(initialState);
-                            })
-                                .catch(() => reject());
-                        });
+                    onOk: async () => new Promise((resolve, reject) => {
+                        onApply({
+                            existColumnSet,
+                            selectedMetrics: serializeSelectedMetrics?.map(({ id }) => id) || [],
+                            columnSetName: formattedColumnSetName,
+                        })
+                            .then(() => {
+                            resolve(true);
+                            setState(initialState);
+                        })
+                            .catch(() => reject());
                     }),
                 });
             }
             else {
-                setState(prev => (Object.assign(Object.assign({}, prev), { loadingApply: true })));
-                yield onApply({
+                setState(prev => ({ ...prev, loadingApply: true }));
+                await onApply({
                     existColumnSet: editedColumnSet,
-                    selectedMetrics: (serializeSelectedMetrics === null || serializeSelectedMetrics === void 0 ? void 0 : serializeSelectedMetrics.map(({ id }) => id)) || [],
-                    columnSetName: (editedColumnSet === null || editedColumnSet === void 0 ? void 0 : editedColumnSet.name) || formattedColumnSetName,
+                    selectedMetrics: serializeSelectedMetrics?.map(({ id }) => id) || [],
+                    columnSetName: editedColumnSet?.name || formattedColumnSetName,
                 });
                 // Close modal and reset state
                 setState(initialState);
@@ -153,23 +133,20 @@ export const ModifyColumnModal = props => {
                 args: {},
             });
         }
-    });
+    };
     const handleSelectParentMetric = (metricId) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { parentMetricSelectedId: metricId })));
+        setState(prev => ({ ...prev, parentMetricSelectedId: metricId }));
     };
     const onClickRemoveSelectedMetric = (index) => {
         const newSelectedMetrics = cloneDeep(serializeSelectedMetrics || []);
         newSelectedMetrics.splice(index, 1);
-        setState(prev => (Object.assign(Object.assign({}, prev), { serializeSelectedMetrics: newSelectedMetrics })));
+        setState(prev => ({ ...prev, serializeSelectedMetrics: newSelectedMetrics }));
     };
     const onSelectChildrenMetrics = (info) => {
         const { node, checked } = info || {};
         let checkedMetrics = [];
         if (!isEmpty(node.children)) {
-            checkedMetrics = flattenMetrics.filter(metric => {
-                var _a;
-                return (_a = flatTree(node.children || [], 'children')) === null || _a === void 0 ? void 0 : _a.some(child => child.key === metric.id && !metric.disabled);
-            });
+            checkedMetrics = flattenMetrics.filter(metric => flatTree(node.children || [], 'children')?.some(child => child.key === metric.id && !metric.disabled));
         }
         else {
             checkedMetrics = flattenMetrics.filter(metric => node.key === metric.id && !metric.disabled);
@@ -183,38 +160,28 @@ export const ModifyColumnModal = props => {
                 cloneSelectedMetrics = cloneSelectedMetrics.filter(colMetric => colMetric.id !== checkedMetric.id);
             }
         });
-        setState(prev => (Object.assign(Object.assign({}, prev), { serializeSelectedMetrics: cloneSelectedMetrics })));
+        setState(prev => ({ ...prev, serializeSelectedMetrics: cloneSelectedMetrics }));
     };
     // Renders
-    const renderParentMetrics = () => (React.createElement(ParentMetricWrapper, null, metrics === null || metrics === void 0 ? void 0 : metrics.map(metric => {
-        const { id, name } = metric;
-        return (React.createElement(Flex, { key: metric.id, className: `metric__item ${id === parentMetricSelectedId ? 'active' : ''}`, onClick: () => handleSelectParentMetric(id) },
-            React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, name)));
-    })));
-    const renderChildrenMetrics = () => (React.createElement(ChildrenMetricWrapper, null,
-        React.createElement("div", { className: "content" },
-            React.createElement(Input.CustomSearch, { value: searchValue, bordered: true, placeholder: `${t(translations.global.search).toString()}...`, onAfterChange: value => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: value }))) }),
-            childMetricTreeData.length ? (React.createElement(Tree, { key: `${searchValue}-${parentMetricSelectedId}`, checkable: true, defaultExpandAll: true, defaultExpandedKeys: matchedParents.map(metric => metric.key), selectable: false, treeData: childMetricTreeData, checkedKeys: serializeSelectedMetrics === null || serializeSelectedMetrics === void 0 ? void 0 : serializeSelectedMetrics.map(metric => metric.id), onCheck: (_values, info) => onSelectChildrenMetrics(info), switcherIcon: info => {
-                    const { expanded } = info || {};
-                    return (React.createElement(Icon, { type: "icon-ants-expand-more", size: 18, style: {
-                            transform: `rotate(${expanded ? 0 : -90}deg)`,
-                            transition: 'all 0.3s',
-                        } }));
-                } })) : (React.createElement(EmptyData, { showIcon: false, title: t(translations.noData).toString() })))));
-    const renderSelectedMetrics = () => {
-        var _a;
-        return (React.createElement(SelectedMetricsWrapper, null,
-            React.createElement(Typography.Text, { className: "selected-metric__title", ellipsis: { tooltip: true } }, t(translations.modifyColumn.columnsSelected, {
-                count: (_a = serializeSelectedMetrics === null || serializeSelectedMetrics === void 0 ? void 0 : serializeSelectedMetrics.length) !== null && _a !== void 0 ? _a : 0,
-            }).toString()),
-            React.createElement(Scrollbars, { style: { height: '100%' } },
-                React.createElement(SelectedMetricsList, { metrics: serializeSelectedMetrics || [], onDragEnd: metrics => setState(prev => (Object.assign(Object.assign({}, prev), { serializeSelectedMetrics: metrics }))), onClickRemove: (_id, index) => onClickRemoveSelectedMetric(index !== null && index !== void 0 ? index : -1) }))));
-    };
-    return (React.createElement(StyledModal, Object.assign({ open: open, title: title, styles: {
+    const renderParentMetrics = () => (_jsx(ParentMetricWrapper, { children: metrics?.map(metric => {
+            const { id, name } = metric;
+            return (_jsx(Flex, { className: `metric__item ${id === parentMetricSelectedId ? 'active' : ''}`, onClick: () => handleSelectParentMetric(id), children: _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: name }) }, metric.id));
+        }) }));
+    const renderChildrenMetrics = () => (_jsx(ChildrenMetricWrapper, { children: _jsxs("div", { className: "content", children: [_jsx(Input.CustomSearch, { value: searchValue, bordered: true, placeholder: `${t(translations.global.search).toString()}...`, onAfterChange: value => setState(prev => ({ ...prev, searchValue: value })) }), childMetricTreeData.length ? (_jsx(Tree, { checkable: true, defaultExpandAll: true, defaultExpandedKeys: matchedParents.map(metric => metric.key), selectable: false, treeData: childMetricTreeData, checkedKeys: serializeSelectedMetrics?.map(metric => metric.id), onCheck: (_values, info) => onSelectChildrenMetrics(info), switcherIcon: info => {
+                        const { expanded } = info || {};
+                        return (_jsx(Icon, { type: "icon-ants-expand-more", size: 18, style: {
+                                transform: `rotate(${expanded ? 0 : -90}deg)`,
+                                transition: 'all 0.3s',
+                            } }));
+                    } }, `${searchValue}-${parentMetricSelectedId}`)) : (_jsx(EmptyData, { showIcon: false, title: t(translations.noData).toString() }))] }) }));
+    const renderSelectedMetrics = () => (_jsxs(SelectedMetricsWrapper, { children: [_jsx(Typography.Text, { className: "selected-metric__title", ellipsis: { tooltip: true }, children: t(translations.modifyColumn.columnsSelected, {
+                    count: serializeSelectedMetrics?.length ?? 0,
+                }).toString() }), _jsx(Scrollbars, { style: { height: '100%' }, children: _jsx(SelectedMetricsList, { metrics: serializeSelectedMetrics || [], onDragEnd: metrics => setState(prev => ({ ...prev, serializeSelectedMetrics: metrics })), onClickRemove: (_id, index) => onClickRemoveSelectedMetric(index ?? -1) }) })] }));
+    return (_jsxs(StyledModal, { open: open, title: title, styles: {
             header: {
                 marginBottom: 0,
                 paddingBottom: 15,
-                borderBottom: `1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3}`,
+                borderBottom: `1px solid ${globalToken?.bw3}`,
             },
             body: {
                 padding: 0,
@@ -225,16 +192,7 @@ export const ModifyColumnModal = props => {
             },
         }, centered: true, width: "65vw", style: {
             height: '70%',
-        }, footer: React.createElement(Flex, { align: "center", justify: "space-between" },
-            React.createElement(Flex, null,
-                React.createElement(Checkbox, { checked: !!editedColumnSet || state.checkedColumnSet, disabled: !!editedColumnSet, onChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { checkedColumnSet: !prev.checkedColumnSet }))) }, checkedColumnSet || !!editedColumnSet ? (React.createElement(Input, { disabled: !!editedColumnSet, value: editedColumnSet ? editedColumnSet.name : columnSetName, maxLength: 255, showCount: true, onChange: e => setState(prev => (Object.assign(Object.assign({}, prev), { columnSetName: e.target.value }))) })) : (t(translations.modifyColumn.saveColumnSet).toString()))),
-            React.createElement(Flex, { align: "center", gap: 10 },
-                React.createElement(Button, { type: "primary", loading: loadingApply, disabled: isDisabledApply, onClick: handleApply }, checkedColumnSet || !!editedColumnSet
-                    ? t(translations.global['save&apply']).toString()
-                    : t(translations.global.apply).toString()),
-                React.createElement(Button, { onClick: handleCancel }, "Cancel"))), onCancel: handleCancel }, restProps),
-        renderParentMetrics(),
-        renderChildrenMetrics(),
-        renderSelectedMetrics(),
-        context));
+        }, footer: _jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Flex, { children: _jsx(Checkbox, { checked: !!editedColumnSet || state.checkedColumnSet, disabled: !!editedColumnSet, onChange: () => setState(prev => ({ ...prev, checkedColumnSet: !prev.checkedColumnSet })), children: checkedColumnSet || !!editedColumnSet ? (_jsx(Input, { disabled: !!editedColumnSet, value: editedColumnSet ? editedColumnSet.name : columnSetName, maxLength: 255, showCount: true, onChange: e => setState(prev => ({ ...prev, columnSetName: e.target.value })) })) : (t(translations.modifyColumn.saveColumnSet).toString()) }) }), _jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", loading: loadingApply, disabled: isDisabledApply, onClick: handleApply, children: checkedColumnSet || !!editedColumnSet
+                                ? t(translations.global['save&apply']).toString()
+                                : t(translations.global.apply).toString() }), _jsx(Button, { onClick: handleCancel, children: "Cancel" })] })] }), onCancel: handleCancel, ...restProps, children: [renderParentMetrics(), renderChildrenMetrics(), renderSelectedMetrics(), context] }));
 };

package/es/components/organism/ModifyColumnModal/SelectedMetricsList.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, { memo, useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { SortableContext, useSortable } from '@dnd-kit/sortable';
@@ -32,7 +22,7 @@ import { IconButton } from '@antscorp/antsomi-ui/es/styled';
 const { t } = i18nInstance;
 const SortableItem = memo((props) => {
     // Props
-    const { id, name, disabled, onClickRemove } = props, restOfProps = __rest(props, ["id", "name", "disabled", "onClickRemove"]);
+    const { id, name, disabled, onClickRemove, ...restOfProps } = props;
     // Dnd kits
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
         id,
@@ -45,18 +35,12 @@ const SortableItem = memo((props) => {
         transition,
     };
     // Renders
-    const renderMetricItem = (setNodeRef, attributes, listeners) => (React.createElement(SelectedMetricItem, Object.assign({ key: id, ref: setNodeRef, style: style, disabled: disabled }, restOfProps),
-        React.createElement(Flex, Object.assign({ align: "center", style: { width: '100%', overflow: 'auto' } }, attributes, listeners),
-            !disabled && (React.createElement("div", { className: "drag-handle" },
-                React.createElement(Icon, { type: "icon-ants-double-three-dots", size: 14 }))),
-            React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, name)),
-        !!onClickRemove && !disabled && (React.createElement(IconButton, { className: "remove-btn", onClick: e => {
-                e.stopPropagation();
-                if (onClickRemove) {
-                    onClickRemove(id);
-                }
-            } },
-            React.createElement(Icon, { type: "icon-ants-remove-slim", size: 12 })))));
+    const renderMetricItem = (setNodeRef, attributes, listeners) => (_jsxs(SelectedMetricItem, { ref: setNodeRef, style: style, disabled: disabled, ...restOfProps, children: [_jsxs(Flex, { align: "center", style: { width: '100%', overflow: 'auto' }, ...attributes, ...listeners, children: [!disabled && (_jsx("div", { className: "drag-handle", children: _jsx(Icon, { type: "icon-ants-double-three-dots", size: 14 }) })), _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: name })] }), !!onClickRemove && !disabled && (_jsx(IconButton, { className: "remove-btn", onClick: e => {
+                    e.stopPropagation();
+                    if (onClickRemove) {
+                        onClickRemove(id);
+                    }
+                }, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 12 }) }))] }, id));
     return disabled ? renderMetricItem() : renderMetricItem(setNodeRef, attributes, listeners);
 });
 export const SelectedMetricsList = memo(props => {
@@ -70,16 +54,16 @@ export const SelectedMetricsList = memo(props => {
     // Variables
     const { activeId } = state;
     // Memo
-    const sortableItems = useDeepCompareMemo(() => (metrics === null || metrics === void 0 ? void 0 : metrics.map(metric => metric.id.toString())) || [], [metrics]);
+    const sortableItems = useDeepCompareMemo(() => metrics?.map(metric => metric.id.toString()) || [], [metrics]);
     const activeName = useMemo(() => {
         let label = '';
         if (activeId) {
-            const { name, selectedName } = (metrics === null || metrics === void 0 ? void 0 : metrics.find(metric => metric.id.toString() === activeId)) || {};
+            const { name, selectedName } = metrics?.find(metric => metric.id.toString() === activeId) || {};
             label = selectedName || name || '';
         }
         return label;
     }, [activeId, metrics]);
-    return (metrics === null || metrics === void 0 ? void 0 : metrics.length) ? (React.createElement(DndContext, { sensors: sensors, modifiers: [restrictToVerticalAxis, restrictToFirstScrollableAncestor], onDragStart: ({ active }) => {
+    return metrics?.length ? (_jsx(DndContext, { sensors: sensors, modifiers: [restrictToVerticalAxis, restrictToFirstScrollableAncestor], onDragStart: ({ active }) => {
             setState({
                 activeId: active.id,
             });
@@ -92,14 +76,10 @@ export const SelectedMetricsList = memo(props => {
                     onDragEnd(newMetrics);
                 }
             }
-        } },
-        React.createElement(SortableContext, { items: sortableItems },
-            React.createElement(Flex, { vertical: true, gap: 8 }, metrics === null || metrics === void 0 ? void 0 :
-                metrics.map((metric, index) => {
-                    const { id, name, selectedName, disabled } = metric;
-                    return (React.createElement(SortableItem, { key: id.toString(), id: id.toString(), name: selectedName || name, disabled: disabled, onClickRemove: () => onClickRemove(id.toString(), index) }));
-                }),
-                React.createElement(DragOverlay, null, activeId ? (React.createElement(SortableItem, { id: activeId.toString(), name: activeName, style: {
-                        cursor: 'grabbing',
-                    } })) : null))))) : (React.createElement(EmptyData, { showIcon: false, title: t(translations.noData).toString() }));
+        }, children: _jsx(SortableContext, { items: sortableItems, children: _jsxs(Flex, { vertical: true, gap: 8, children: [metrics?.map((metric, index) => {
+                        const { id, name, selectedName, disabled } = metric;
+                        return (_jsx(SortableItem, { id: id.toString(), name: selectedName || name, disabled: disabled, onClickRemove: () => onClickRemove(id.toString(), index) }, id.toString()));
+                    }), _jsx(DragOverlay, { children: activeId ? (_jsx(SortableItem, { id: activeId.toString(), name: activeName, style: {
+                                cursor: 'grabbing',
+                            } })) : null })] }) }) })) : (_jsx(EmptyData, { showIcon: false, title: t(translations.noData).toString() }));
 });

package/es/components/organism/ModifyColumnModal/styled.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("../../molecules/ModalV2").ModalV2Props>, any, {}, never>;
+import { ModalV2Props } from '../../molecules/ModalV2';
+export declare const StyledModal: import("styled-components").StyledComponent<(props: ModalV2Props) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const ParentMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../atoms/Scrollbars").ScrollbarsProps>, any, {}, never>;
 export declare const ChildrenMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../atoms/Scrollbars").ScrollbarsProps>, any, {}, never>;
 export declare const SelectedMetricsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/organism/ModifyColumnModal/styled.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import styled, { css } from 'styled-components';
 // Components
@@ -6,7 +7,7 @@ import { ModalV2 } from '../../molecules/ModalV2';
 import { Scrollbars } from '../../atoms/Scrollbars';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const StyledModal = styled(ModalV2) `
+export const StyledModal = styled((props) => _jsx(ModalV2, { ...props })) `
   .antsomi-modal-content {
     height: 100%;
     display: flex;
@@ -27,7 +28,7 @@ export const ParentMetricWrapper = styled(Scrollbars) `
   width: 250px !important;
   height: 100%;
   padding: 5px 0px;
-  border-right: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+  border-right: 1px solid ${globalToken?.bw3};
   box-sizing: border-box;
 
   .metric {
@@ -37,16 +38,16 @@ export const ParentMetricWrapper = styled(Scrollbars) `
       height: 34px;
       padding: 0 15px;
       margin: 0 5px;
-      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      border-radius: ${globalToken?.borderRadius}px;
       transition: background-color 300ms;
       cursor: pointer;
 
       &:hover {
-        background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue};
+        background-color: ${globalToken?.blue};
       }
 
       &.active {
-        background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
+        background-color: ${globalToken?.blue1_1};
         font-weight: 600;
       }
 
@@ -91,13 +92,13 @@ export const SelectedMetricsWrapper = styled(Flex) `
   width: 300px !important;
   height: 100%;
   box-sizing: border-box;
-  border-left: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
-  padding: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.padding}px;
+  border-left: 1px solid ${globalToken?.bw3};
+  padding: ${globalToken?.padding}px;
   cursor: grab;
 
   .selected-metric__title {
-    font-size: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontSizeXL}px;
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+    font-size: ${globalToken?.fontSizeXL}px;
+    color: ${globalToken?.colorPrimary};
   }
 `;
 SelectedMetricsWrapper.defaultProps = {
@@ -106,10 +107,10 @@ SelectedMetricsWrapper.defaultProps = {
 };
 export const SelectedMetricItem = styled(Flex) `
   height: 36px;
-  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+  border-radius: ${globalToken?.borderRadius}px;
   padding: 0 5px;
-  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw4};
-  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
+  border: 1px solid ${globalToken?.bw4};
+  background-color: ${globalToken?.bw0};
   transition: all 300ms;
 
   .drag-handle {
@@ -118,7 +119,7 @@ export const SelectedMetricItem = styled(Flex) `
     justify-content: center;
     width: 20px;
     height: 20px;
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    color: ${globalToken?.bw8};
     opacity: 0.5;
     transition: all 300ms;
   }
@@ -136,8 +137,8 @@ export const SelectedMetricItem = styled(Flex) `
   ${props => !props.disabled
     ? css `
           &:hover {
-            border-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue3};
-            background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue};
+            border-color: ${globalToken?.blue3};
+            background-color: ${globalToken?.blue};
 
             .drag-handle,
             .remove-btn {