@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/molecules/EditorScript/EditorScript.js

@@ -1,28 +1,19 @@
-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, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import React, { useState } from 'react';
+import { useState } from 'react';
 import AceEditor from 'react-ace';
 // Translations
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Atoms
-import { Button, Icon } from '../../atoms';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { Icon } from '@antscorp/antsomi-ui/es/components/atoms/Icon';
 // Molecules
-import { Modal } from '../Modal';
+import { Modal } from '@antscorp/antsomi-ui/es/components/molecules/Modal';
 // Styled
 import { EditorScriptWrapper } from './styled';
 // Ace editor
-import 'ace-builds/webpack-resolver';
+// import 'ace-builds/webpack-resolver';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/mode-css';
 import 'ace-builds/src-noconflict/theme-tomorrow';
@@ -32,13 +23,20 @@ import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/components/molecules/EditorScript/EditorScript.tsx';
 export const EditorScript = props => {
     // Props
-    const { label, expandModalLabel, className, height, setOptions, hideExpand } = props, restOf = __rest(props, ["label", "expandModalLabel", "className", "height", "setOptions", "hideExpand"]);
+    const { label, expandModalLabel, className, height, setOptions, hideExpand, ...restOf } = props;
     // State
     const [isExpandEditor, setExpandEditor] = useState(false);
     const { t } = i18nInstance;
     const renderAceEditor = (aceHeight = height) => {
         try {
-            return (React.createElement(AceEditor, Object.assign({ setOptions: Object.assign({ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true, tabSize: 2 }, setOptions) }, restOf, { style: { width: '100%', height: aceHeight } })));
+            return (_jsx(AceEditor, { setOptions: {
+                    enableBasicAutocompletion: true,
+                    enableLiveAutocompletion: true,
+                    enableSnippets: true,
+                    showLineNumbers: true,
+                    tabSize: 2,
+                    ...setOptions,
+                }, ...restOf, style: { width: '100%', height: aceHeight } }));
         }
         catch (error) {
             handleError(error, {
@@ -60,18 +58,11 @@ export const EditorScript = props => {
             });
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(EditorScriptWrapper, { className: className },
-            label && React.createElement("div", { className: "ants-mb-5" }, label),
-            renderAceEditor(),
-            !hideExpand && (React.createElement(Button, { type: "text", className: "ants-mt-5px", onClick: () => {
-                    setExpandEditor(true);
-                } },
-                React.createElement(Icon, { type: "icon-ants-expand", size: 14, style: {
-                        transform: 'scaleX(-1)',
-                    } }),
-                t(translations.expandEditor.title)))),
-        React.createElement(Modal, { visible: isExpandEditor, title: expandModalLabel, onCancel: onCancelModal, centered: true, width: 1000, footer: React.createElement(Button, { onClick: onCancelModal }, t(translations.close.title)) }, renderAceEditor('500px'))));
+    return (_jsxs(_Fragment, { children: [_jsxs(EditorScriptWrapper, { className: className, children: [label && _jsx("div", { className: "ants-mb-5", children: label }), renderAceEditor(), !hideExpand && (_jsxs(Button, { type: "text", className: "ants-mt-5px", onClick: () => {
+                            setExpandEditor(true);
+                        }, children: [_jsx(Icon, { type: "icon-ants-expand", size: 14, style: {
+                                    transform: 'scaleX(-1)',
+                                } }), t(translations.expandEditor.title)] }))] }), _jsx(Modal, { visible: isExpandEditor, title: expandModalLabel, onCancel: onCancelModal, centered: true, width: 1000, footer: _jsx(Button, { onClick: onCancelModal, children: t(translations.close.title) }), children: renderAceEditor('500px') })] }));
 };
 EditorScript.defaultProps = {
     expandModalLabel: 'Editor Script',

package/es/components/molecules/EditorTab/EditorTab.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";
 // Lib
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { useInView } from 'react-intersection-observer';
 // Components
@@ -21,11 +13,10 @@ import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { CloseIcon, MoreIcon } from '../../icons';
 const PATH = 'src/components/EditorTab/index.jsx';
 export const EditorTab = props => {
-    var _a;
     const { listTab = [], activeId = '', showArrow, showDropdown, editNameOnConfigure, 
     // disabledScroll,
     onCloseTab, onClickRemoveTab, onConfirmRemove, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab, modalFuncProps, } = props;
-    const [activeTabId, setActiveTabId] = useState(activeId || ((_a = listTab === null || listTab === void 0 ? void 0 : listTab[0]) === null || _a === void 0 ? void 0 : _a.id));
+    const [activeTabId, setActiveTabId] = useState(activeId || listTab?.[0]?.id);
     const [arrTabs, setArrTabs] = useState(listTab || []);
     const [isEditable, setIsEditable] = useState();
     const [modal, contextModal] = Modal.useModal();
@@ -42,8 +33,7 @@ export const EditorTab = props => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [listTab]);
     useEffect(() => {
-        var _a;
-        const tabEl = (_a = leftBlockRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-item.active');
+        const tabEl = leftBlockRef.current?.querySelector('.tab-item.active');
         if (tabEl) {
             tabEl.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' });
         }
@@ -54,14 +44,23 @@ export const EditorTab = props => {
     const handleAddNew = () => {
         onAddTab();
     };
-    const modalConfirmAsync = useCallback((tab) => __awaiter(void 0, void 0, void 0, function* () {
+    const modalConfirmAsync = useCallback(async (tab) => {
         // let isConfirm = false;
-        const modalInstance = modal.confirm(Object.assign({ title: 'Remove this tab', content: 'Removing this tab will delete it permanently. Are you sure you want to perform this action?', okText: 'Confirm', icon: React.createElement("span", { style: { display: 'none' } }), onOk: () => {
+        const modalInstance = modal.confirm({
+            title: 'Remove this tab',
+            content: 'Removing this tab will delete it permanently. Are you sure you want to perform this action?',
+            okText: 'Confirm',
+            icon: _jsx("span", { style: { display: 'none' } }),
+            onOk: () => {
                 if (onConfirmRemove)
                     return onConfirmRemove(tab);
-            }, className: 'editor-tab__modal-confirm', centered: true }, modalFuncProps));
+            },
+            className: 'editor-tab__modal-confirm',
+            centered: true,
+            ...modalFuncProps,
+        });
         return modalInstance;
-    }), [modalFuncProps, modal, onConfirmRemove]);
+    }, [modalFuncProps, modal, onConfirmRemove]);
     // NOTE: Archive(1 - START): use async function to handle confirm
     // const [modalState, setModalState] = useState<any>();
     // const modalRef = useRef(null);
@@ -98,8 +97,7 @@ export const EditorTab = props => {
         if (onActiveTab)
             onActiveTab(tabId);
     }, [onActiveTab]);
-    const handleCloseTab = (e, tab, idx) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c;
+    const handleCloseTab = async (e, tab, idx) => {
         e.stopPropagation();
         // if (arrTabs.length < 2) {
         //   return;
@@ -110,20 +108,20 @@ export const EditorTab = props => {
         // const isConfirm = confirmOnRemoveTab ? await testAsync() : true;
         // const isConfirm = await testAsync();
         // const isConfirm = await modalConfirmAsync(tab);
-        const isConfirm = confirmOnRemoveTab ? yield modalConfirmAsync(tab) : true;
+        const isConfirm = confirmOnRemoveTab ? await modalConfirmAsync(tab) : true;
         if (!isConfirm)
             return;
         if (activeTabId === tab.id) {
             if (idx === arrTabs.length - 1) {
-                handleActiveTab((_b = arrTabs[idx - 1]) === null || _b === void 0 ? void 0 : _b.id);
+                handleActiveTab(arrTabs[idx - 1]?.id);
             }
             else if (arrTabs.length > 1) {
-                handleActiveTab((_c = arrTabs[idx + 1]) === null || _c === void 0 ? void 0 : _c.id);
+                handleActiveTab(arrTabs[idx + 1]?.id);
             }
         }
-        onCloseTab === null || onCloseTab === void 0 ? void 0 : onCloseTab(tab, idx, newTabs);
+        onCloseTab?.(tab, idx, newTabs);
         setArrTabs(newTabs);
-    });
+    };
     const onWheelLeftBlock = useCallback(event => {
         try {
             if (!event.deltaY) {
@@ -156,53 +154,37 @@ export const EditorTab = props => {
             }
         }
     }, [activeTabId, arrTabs, handleActiveTab]);
-    return (React.createElement(EditorTabStyled, { className: className || '' },
-        contextModal,
-        showArrow && isLeftBlockOverflow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('left') },
-            React.createElement(Icon, { type: "icon-ants-angle-left" }))),
-        React.createElement("div", { ref: leftBlockRef, className: classnames('left-block', leftBlockClassName), onWheel: onWheelLeftBlock },
-            React.createElement("div", { ref: anchorLeftElRef }),
-            arrTabs && arrTabs.length
-                ? arrTabs.map((tab, idx) => {
-                    const { showIcon = true, showDropdown = true, hideRemoveOption, closable = true, } = tab;
-                    return (React.createElement("div", { key: tab.id, onClick: () => handleActiveTab(tab.id), className: classnames('tab-item', tabItemClassName, {
-                            active: tab.id === activeTabId,
-                        }) },
-                        showIcon &&
-                            (tab.type === 'query' ? (React.createElement(Icon, { type: "icon-ants-material-outline-manage-search", overlayStyle: { fontSize: 21 } })) : (React.createElement(Icon, { type: "icon-ants-table-vertical", overlayStyle: { fontSize: 21 } }))),
-                        isEditable === tab.id ? (React.createElement(ContentEditable, { value: tab.name, onSave: newValue => {
-                                setIsEditable(undefined);
-                                onSaveName === null || onSaveName === void 0 ? void 0 : onSaveName(tab.id, newValue);
-                            } })) : (React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, tab.name)),
-                        showDropdown ? (React.createElement(Dropdown, { menu: {
-                                items: [
-                                    { label: 'Configure', key: 'configure', style: { minWidth: '135px' } },
-                                    ...(hideRemoveOption
-                                        ? []
-                                        : [{ label: 'Remove', key: 'remove', style: { minWidth: '135px' } }]),
-                                ],
-                                onClick: (_a) => __awaiter(void 0, [_a], void 0, function* ({ key, domEvent }) {
-                                    switch (key) {
-                                        case 'configure':
-                                            if (editNameOnConfigure)
-                                                setIsEditable(tab.id);
-                                            onConfigure === null || onConfigure === void 0 ? void 0 : onConfigure(tab.id);
-                                            break;
-                                        case 'remove':
-                                            yield handleCloseTab(domEvent, tab, idx);
-                                            break;
-                                        default:
-                                            break;
-                                    }
-                                }),
-                            }, placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true },
-                            React.createElement(Button, { icon: React.createElement(MoreIcon, { size: 20 }), size: "small" }))) : closable ? (React.createElement(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: React.createElement(CloseIcon, { size: 20 }), size: "small" })) : null));
-                })
-                : null,
-            React.createElement("div", { ref: anchorRightElRef })),
-        showArrow && isLeftBlockOverflow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('right') },
-            React.createElement(Icon, { type: "icon-ants-angle-right" }))),
-        showComposeNewQuery || newTabText ? (React.createElement(Button, { onClick: handleAddNew, className: "new-query-button" },
-            React.createElement(Icon, { type: "icon-ants-add-square", style: { fontSize: '16px' } }),
-            newTabText || 'New query')) : null));
+    return (_jsxs(EditorTabStyled, { className: className || '', children: [contextModal, showArrow && isLeftBlockOverflow && (_jsx("div", { className: "navigate-button", onClick: () => onClickArrow('left'), children: _jsx(Icon, { type: "icon-ants-angle-left" }) })), _jsxs("div", { ref: leftBlockRef, className: classnames('left-block', leftBlockClassName), onWheel: onWheelLeftBlock, children: [_jsx("div", { ref: anchorLeftElRef }), arrTabs && arrTabs.length
+                        ? arrTabs.map((tab, idx) => {
+                            const { showIcon = true, showDropdown = true, hideRemoveOption, closable = true, } = tab;
+                            return (_jsxs("div", { onClick: () => handleActiveTab(tab.id), className: classnames('tab-item', tabItemClassName, {
+                                    active: tab.id === activeTabId,
+                                }), children: [showIcon &&
+                                        (tab.type === 'query' ? (_jsx(Icon, { type: "icon-ants-material-outline-manage-search", overlayStyle: { fontSize: 21 } })) : (_jsx(Icon, { type: "icon-ants-table-vertical", overlayStyle: { fontSize: 21 } }))), isEditable === tab.id ? (_jsx(ContentEditable, { value: tab.name, onSave: newValue => {
+                                            setIsEditable(undefined);
+                                            onSaveName?.(tab.id, newValue);
+                                        } })) : (_jsx(Typography.Text, { ellipsis: { tooltip: true }, children: tab.name })), showDropdown ? (_jsx(Dropdown, { menu: {
+                                            items: [
+                                                { label: 'Configure', key: 'configure', style: { minWidth: '135px' } },
+                                                ...(hideRemoveOption
+                                                    ? []
+                                                    : [{ label: 'Remove', key: 'remove', style: { minWidth: '135px' } }]),
+                                            ],
+                                            onClick: async ({ key, domEvent }) => {
+                                                switch (key) {
+                                                    case 'configure':
+                                                        if (editNameOnConfigure)
+                                                            setIsEditable(tab.id);
+                                                        onConfigure?.(tab.id);
+                                                        break;
+                                                    case 'remove':
+                                                        await handleCloseTab(domEvent, tab, idx);
+                                                        break;
+                                                    default:
+                                                        break;
+                                                }
+                                            },
+                                        }, placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, children: _jsx(Button, { icon: _jsx(MoreIcon, { size: 20 }), size: "small" }) })) : closable ? (_jsx(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: _jsx(CloseIcon, { size: 20 }), size: "small" })) : null] }, tab.id));
+                        })
+                        : null, _jsx("div", { ref: anchorRightElRef })] }), showArrow && isLeftBlockOverflow && (_jsx("div", { className: "navigate-button", onClick: () => onClickArrow('right'), children: _jsx(Icon, { type: "icon-ants-angle-right" }) })), showComposeNewQuery || newTabText ? (_jsxs(Button, { onClick: handleAddNew, className: "new-query-button", children: [_jsx(Icon, { type: "icon-ants-add-square", style: { fontSize: '16px' } }), newTabText || 'New query'] })) : null] }));
 };

package/es/components/molecules/EditorTab/styled.js

@@ -15,7 +15,7 @@ export const EditorTabStyled = styled.div `
     width: 20px !important;
     height: 20px !important;
     &:hover {
-      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue} !important;
+      background-color: ${globalToken?.blue} !important;
     }
   }
 
@@ -52,7 +52,7 @@ export const EditorTabStyled = styled.div `
       height: 40px;
       padding: 0 10px;
       overflow: hidden;
-      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw2};
+      background-color: ${globalToken?.bw2};
 
       /* &.active button, */
       & button {
@@ -61,7 +61,7 @@ export const EditorTabStyled = styled.div `
       }
 
       &:hover {
-        background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue};
+        background-color: ${globalToken?.blue};
         & button {
           /* display: flex !important; */
           visibility: visible;
@@ -132,8 +132,8 @@ export const EditorTabStyled = styled.div `
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue7};
-    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    color: ${globalToken?.blue7};
+    border-radius: ${globalToken?.borderRadius}px;
     border: 5px solid transparent;
 
     /* Typography Block */
@@ -147,7 +147,7 @@ export const EditorTabStyled = styled.div `
 
     &:hover {
       border: 5px solid transparent;
-      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue};
+      background-color: ${globalToken?.blue};
     }
 
     /* &.--disabled {

package/es/components/molecules/EmptyData/EmptyData.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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import React from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -22,18 +12,8 @@ import { EmptyIcon, EmptyWrapper, ImageWrapper } from './styled';
 import { EMPTY_ICON_SIZE } from './constants';
 const { Text } = Typography;
 export const EmptyData = props => {
-    const { size = 'medium', icon = 'icon-ants-media', showIcon = true, title, subTitle, description, loading, className, image, imageClassName, imageStyle, children } = props, restOfProps = __rest(props, ["size", "icon", "showIcon", "title", "subTitle", "description", "loading", "className", "image", "imageClassName", "imageStyle", "children"]);
-    return (React.createElement(EmptyWrapper, Object.assign({ className: className }, restOfProps),
-        React.createElement(Flex, { vertical: true, align: "center", justify: "center", gap: 15 },
-            !!showIcon && (React.createElement(React.Fragment, null,
-                !image && (React.createElement(EmptyIcon, { className: "animate__animated animate__tada", "$size": size }, isString(icon) ? (React.createElement(Icon, { type: icon })) : (React.cloneElement(icon, {
-                    size: EMPTY_ICON_SIZE[size],
-                })))),
-                image && (React.createElement(ImageWrapper, { className: imageClassName, style: imageStyle },
-                    React.createElement("img", { src: image, alt: "" }))))),
-            loading ? (React.createElement(Spin, { indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (React.createElement(Flex, { gap: 5, align: "center", justify: "center", vertical: true },
-                title && React.createElement(Text, { className: "title animate__animated animate__fadeInUp" }, title),
-                subTitle && (React.createElement(Text, { className: "subTitle animate__animated animate__fadeInUp" }, subTitle)),
-                description && (React.createElement(Text, { className: "description animate__animated animate__fadeInUp" }, description))))),
-        children));
+    const { size = 'medium', icon = 'icon-ants-media', showIcon = true, title, subTitle, description, loading, className, image, imageClassName, imageStyle, children, ...restOfProps } = props;
+    return (_jsxs(EmptyWrapper, { className: className, ...restOfProps, children: [_jsxs(Flex, { vertical: true, align: "center", justify: "center", gap: 15, children: [!!showIcon && (_jsxs(_Fragment, { children: [!image && (_jsx(EmptyIcon, { className: "animate__animated animate__tada", "$size": size, children: isString(icon) ? (_jsx(Icon, { type: icon })) : (React.cloneElement(icon, {
+                                    size: EMPTY_ICON_SIZE[size],
+                                })) })), image && (_jsx(ImageWrapper, { className: imageClassName, style: imageStyle, children: _jsx("img", { src: image, alt: "" }) }))] })), loading ? (_jsx(Spin, { indicator: _jsx(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (_jsxs(Flex, { gap: 5, align: "center", justify: "center", vertical: true, children: [title && _jsx(Text, { className: "title animate__animated animate__fadeInUp", children: title }), subTitle && (_jsx(Text, { className: "subTitle animate__animated animate__fadeInUp", children: subTitle })), description && (_jsx(Text, { className: "description animate__animated animate__fadeInUp", children: description }))] }))] }), children] }));
 };

package/es/components/molecules/EmptyData/styled.js

@@ -1,8 +1,7 @@
-var _a, _b, _c, _d;
 // 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 { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { EMPTY_ICON_SIZE, EMPTY_WRAPPER_SIZE } from './constants';
@@ -30,7 +29,7 @@ export const EmptyWrapper = styled(Flex) `
     font-size: 11px;
     font-weight: 400;
     line-height: 13px;
-    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+    color: ${THEME.token?.bw8};
   }
 `;
 EmptyWrapper.defaultProps = {
@@ -44,8 +43,8 @@ export const EmptyIcon = styled.div `
   align-items: center;
   justify-content: center;
   border-radius: 100%;
-  background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
-  color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw5};
+  background-color: ${THEME.token?.bw2};
+  color: ${THEME.token?.bw5};
 
   /* Handle Size */
   ${({ $size }) => {
@@ -62,7 +61,7 @@ export const EmptyIcon = styled.div `
 }}
 
   i {
-    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw5};
+    color: ${THEME.token?.bw5};
   }
 `;
 export const ImageWrapper = styled.div `

package/es/components/molecules/FontFamilySelect/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 { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 // Molecules
 import { Select } from '../Select';
 import { SettingWrapper } from '../SettingWrapper';
@@ -24,7 +14,7 @@ import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
  * @return {ReactNode} The rendered React node.
  */
 export const FontFamilySelect = (props) => {
-    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const { defaultValue, label, value, showOptions, onChange, ...selectProps } = props;
     const [selected, setSelected] = useState(defaultValue || value);
     useEffect(() => {
         setSelected(value);
@@ -32,7 +22,7 @@ export const FontFamilySelect = (props) => {
     const { t } = i18nInstance;
     const filteredFontFamilyOptions = useMemo(() => {
         let filteredOptions = [...OPTION_FONT_FAMILY];
-        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+        if (showOptions?.length) {
             filteredOptions = OPTION_FONT_FAMILY.filter(({ value }) => showOptions.some(font => font === value));
         }
         return filteredOptions;
@@ -42,11 +32,10 @@ export const FontFamilySelect = (props) => {
             onChange(value);
         }
     };
-    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
-        React.createElement(Select, Object.assign({ value: selected, options: [...filteredFontFamilyOptions], style: { fontFamily: value, width: '100%' }, onChange: select => {
+    return (_jsx(SettingWrapper, { label: label ?? '', containerStyle: { width: '100%' }, vertical: true, children: _jsx(Select, { value: selected, options: [...filteredFontFamilyOptions], style: { fontFamily: value, width: '100%' }, onChange: select => {
                 setSelected(select);
                 handleChange(select);
-            }, showSearch: true }, selectProps))));
+            }, showSearch: true, ...selectProps }) }));
 };
 FontFamilySelect.defaultProps = {
     showOptions: [],

package/es/components/molecules/FontSetting/index.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { PopoverProps } from 'antd';
-import { SettingWrapperProps } from '../SettingWrapper';
+import type { SettingWrapperProps } from '@antscorp/antsomi-ui/es/components/molecules/SettingWrapper';
 import { TFontSettings, TFontStyles } from './types';
 type TFontSettingOptions = 'fontFamily' | 'color' | 'fontSize' | 'fontWeight' | 'textTransform' | 'textDecoration' | 'italic' | 'lineHeight' | 'letterSpacing';
 export type TFontSettingProps = {
     label?: string;
-    settings: Partial<TFontSettings>;
-    styles: Partial<TFontStyles>;
+    settings?: Partial<TFontSettings>;
+    styles?: Partial<TFontStyles>;
     showSettings?: TFontSettingOptions[];
     wrapperProps?: Omit<SettingWrapperProps, 'label'>;
     popoverProps?: Omit<PopoverProps, 'content'>;

package/es/components/molecules/FontSetting/index.js

@@ -1,54 +1,47 @@
-import React, { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 /* Components */
-import { Space, Switch } from '../../atoms';
-import { ColorSetting } from '../ColorSetting';
-import { SliderWithInputNumber } from '../SliderWithInputNumber';
-import { SettingWrapper } from '../SettingWrapper';
-import { SettingWrapperPopover } from '../SettingWrapperPopover';
-import { FontFamilySelect } from '../FontFamilySelect';
-import { FontWeightSelect } from '../FontWeightSelect';
-import { TextTransformSelect } from '../TextTransformSelect';
-import { TextDecorationSelect } from '../TextDecorationSelect';
+import { Space } from '@antscorp/antsomi-ui/es/components/atoms/Space';
+import { Switch } from '@antscorp/antsomi-ui/es/components/atoms/Switch';
+import { ColorSetting } from '@antscorp/antsomi-ui/es/components/molecules/ColorSetting';
+import { SliderWithInputNumber } from '@antscorp/antsomi-ui/es/components/molecules/SliderWithInputNumber';
+import { SettingWrapper } from '@antscorp/antsomi-ui/es/components/molecules/SettingWrapper';
+import { SettingWrapperPopover } from '@antscorp/antsomi-ui/es/components/molecules/SettingWrapperPopover';
+import { FontFamilySelect } from '@antscorp/antsomi-ui/es/components/molecules/FontFamilySelect';
+import { FontWeightSelect } from '@antscorp/antsomi-ui/es/components/molecules/FontWeightSelect';
+import { TextTransformSelect } from '@antscorp/antsomi-ui/es/components/molecules/TextTransformSelect';
+import { TextDecorationSelect } from '@antscorp/antsomi-ui/es/components/molecules/TextDecorationSelect';
 import { FONT_SETTING_DEFAULT, FONT_STYLE_DEFAULT } from './constants';
 export const FontSettingEdit = ({ settings, styles, showSettings, onChange, }) => {
     const handleChange = (setting, style) => {
         if (typeof onChange === 'function') {
-            const newSettings = Object.assign(Object.assign({}, settings), setting);
-            const newStyles = Object.assign(Object.assign({}, styles), style);
+            const newSettings = { ...settings, ...setting };
+            const newStyles = { ...styles, ...style };
             onChange(newSettings, newStyles);
         }
     };
     const settingMap = useMemo(() => ({
-        fontFamily: (React.createElement(FontFamilySelect, { label: "Font Family", value: settings === null || settings === void 0 ? void 0 : settings.fontFamily, onChange: fontFamily => handleChange({ fontFamily }, { fontFamily }) })),
-        color: (React.createElement(ColorSetting, { label: "Font Color", color: settings === null || settings === void 0 ? void 0 : settings.fontColor, onChange: fontColor => handleChange({ fontColor }, { color: fontColor }) })),
-        fontSize: (React.createElement(SettingWrapper, { label: "Font Size", vertical: true },
-            React.createElement(SliderWithInputNumber, { value: typeof (settings === null || settings === void 0 ? void 0 : settings.fontSize) !== 'undefined' ? +settings.fontSize : 0, onAfterChange: fontSize => handleChange({ fontSize }, { fontSize }) }))),
-        fontWeight: (React.createElement(FontWeightSelect, { label: "Font Weight", value: settings === null || settings === void 0 ? void 0 : settings.fontWeight, onChange: fontWeight => handleChange({ fontWeight }, { fontWeight }) })),
-        lineHeight: (React.createElement(SettingWrapper, { label: "Line Height", vertical: true },
-            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.lineHeight) !== 'undefined' ? +settings.lineHeight : 0, min: 1, max: 5, step: 0.1, onAfterChange: lineHeight => handleChange({ lineHeight }, { lineHeight }) }))),
-        letterSpacing: (React.createElement(SettingWrapper, { label: "Letter Spacing", vertical: true },
-            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.letterSpacing) !== 'undefined' ? +settings.letterSpacing : 0, min: -10, max: 10, onAfterChange: letterSpacing => handleChange({ letterSpacing }, { letterSpacing }) }))),
-        textTransform: (React.createElement(TextTransformSelect, { label: "Text Transform", value: settings === null || settings === void 0 ? void 0 : settings.textTransform, onChange: textTransform => handleChange({ textTransform }, { textTransform }) })),
-        textDecoration: (React.createElement(TextDecorationSelect, { label: "Text Decoration", value: settings === null || settings === void 0 ? void 0 : settings.textDecoration, onChange: textDecoration => handleChange({ textDecoration }, { textDecoration }) })),
-        italic: (React.createElement(SettingWrapper, { label: "Font Style Italic" },
-            React.createElement(Switch, { checked: settings === null || settings === void 0 ? void 0 : settings.fontItalic, onChange: fontItalic => handleChange({ fontItalic }, { fontStyle: fontItalic ? 'italic' : 'normal' }) }))),
+        fontFamily: (_jsx(FontFamilySelect, { label: "Font Family", value: settings?.fontFamily, onChange: fontFamily => handleChange({ fontFamily }, { fontFamily }) })),
+        color: (_jsx(ColorSetting, { label: "Font Color", color: settings?.fontColor, onChange: fontColor => handleChange({ fontColor }, { color: fontColor }) })),
+        fontSize: (_jsx(SettingWrapper, { label: "Font Size", vertical: true, children: _jsx(SliderWithInputNumber, { value: typeof settings?.fontSize !== 'undefined' ? +settings.fontSize : 0, onAfterChange: fontSize => handleChange({ fontSize }, { fontSize }) }) })),
+        fontWeight: (_jsx(FontWeightSelect, { label: "Font Weight", value: settings?.fontWeight, onChange: fontWeight => handleChange({ fontWeight }, { fontWeight }) })),
+        lineHeight: (_jsx(SettingWrapper, { label: "Line Height", vertical: true, children: _jsx(SliderWithInputNumber, { defaultValue: typeof settings?.lineHeight !== 'undefined' ? +settings.lineHeight : 0, min: 1, max: 5, step: 0.1, onAfterChange: lineHeight => handleChange({ lineHeight }, { lineHeight }) }) })),
+        letterSpacing: (_jsx(SettingWrapper, { label: "Letter Spacing", vertical: true, children: _jsx(SliderWithInputNumber, { defaultValue: typeof settings?.letterSpacing !== 'undefined' ? +settings.letterSpacing : 0, min: -10, max: 10, onAfterChange: letterSpacing => handleChange({ letterSpacing }, { letterSpacing }) }) })),
+        textTransform: (_jsx(TextTransformSelect, { label: "Text Transform", value: settings?.textTransform, onChange: textTransform => handleChange({ textTransform }, { textTransform }) })),
+        textDecoration: (_jsx(TextDecorationSelect, { label: "Text Decoration", value: settings?.textDecoration, onChange: textDecoration => handleChange({ textDecoration }, { textDecoration }) })),
+        italic: (_jsx(SettingWrapper, { label: "Font Style Italic", children: _jsx(Switch, { checked: settings?.fontItalic, onChange: fontItalic => handleChange({ fontItalic }, { fontStyle: fontItalic ? 'italic' : 'normal' }) }) })),
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [settings]);
     const filteredSetting = useMemo(() => {
-        if (!showSettings || (showSettings === null || showSettings === void 0 ? void 0 : showSettings.length) === 0) {
+        if (!showSettings || showSettings?.length === 0) {
             return Object.keys(settingMap).map(keySetting => settingMap[keySetting]);
         }
         return showSettings.map(keySetting => settingMap[keySetting]);
     }, [showSettings, settingMap]);
-    return React.createElement(Space, { direction: "vertical" }, filteredSetting);
+    return _jsx(Space, { direction: "vertical", children: filteredSetting });
 };
-export const FontSetting = (props) => {
-    const { label, settings, styles, wrapperProps, popoverProps, childrenProps, showSettings, onChange, } = props;
-    return (React.createElement(SettingWrapperPopover, { label: label !== null && label !== void 0 ? label : 'Font Settings', popoverProps: Object.assign({ overlayStyle: { top: 0 }, placement: 'bottomRight' }, popoverProps), wrapperProps: Object.assign({ containerStyle: { minWidth: '288px' } }, wrapperProps) },
-        React.createElement(FontSettingEdit, Object.assign({ settings: settings, styles: styles, showSettings: showSettings, onChange: onChange }, childrenProps))));
-};
-FontSetting.defaultProps = {
-    settings: FONT_SETTING_DEFAULT,
-    styles: FONT_STYLE_DEFAULT,
+export const FontSetting = props => {
+    const { label, settings = FONT_SETTING_DEFAULT, styles = FONT_STYLE_DEFAULT, wrapperProps, popoverProps, childrenProps, showSettings, onChange, } = props;
+    return (_jsx(SettingWrapperPopover, { label: label ?? 'Font Settings', popoverProps: { overlayStyle: { top: 0 }, placement: 'bottomRight', ...popoverProps }, wrapperProps: { containerStyle: { minWidth: '288px' }, ...wrapperProps }, children: _jsx(FontSettingEdit, { settings: settings, styles: styles, showSettings: showSettings, onChange: onChange, ...childrenProps }) }));
 };

package/es/components/molecules/FontWeightSelect/index.js

@@ -1,39 +1,28 @@
-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 React, { useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { Select } from '../Select';
 import { SettingWrapper } from '../SettingWrapper';
 import { OPTION_FONT_WEIGHT } from './constants';
 export const FontWeightSelect = props => {
-    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const { defaultValue, label, value, showOptions, onChange, ...selectProps } = props;
     const [selected, setSelected] = useState(defaultValue || value);
     const fontWeightOptions = useMemo(() => {
         let draftFontFamily = [...OPTION_FONT_WEIGHT];
-        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+        if (showOptions?.length) {
             draftFontFamily = OPTION_FONT_WEIGHT.filter(({ label }) => showOptions.some(font => font === label));
         }
         return draftFontFamily;
     }, [showOptions]);
     useEffect(() => {
-        setSelected(value === null || value === void 0 ? void 0 : value.toString());
+        setSelected(value?.toString());
     }, [value]);
     const handleChange = (value) => {
         if (onChange && typeof onChange === 'function') {
             onChange(value);
         }
     };
-    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
-        React.createElement(Select, Object.assign({ value: selected, options: [...fontWeightOptions], style: { fontFamily: value, width: '100%' }, onChange: select => {
+    return (_jsx(SettingWrapper, { label: label ?? '', containerStyle: { width: '100%' }, vertical: true, children: _jsx(Select, { value: selected, options: [...fontWeightOptions], style: { fontFamily: value, width: '100%' }, onChange: select => {
                 setSelected(select);
                 handleChange(select);
-            }, showSearch: true }, selectProps))));
+            }, showSearch: true, ...selectProps }) }));
 };