@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -1,17 +1,7 @@
-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 { isNil } from 'lodash';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 // Components
 import { Flex, Icon, Tooltip } from '../../atoms';
 // Styled
@@ -26,11 +16,11 @@ import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize", "headerProps", "name", "destroyOnClose"]);
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, ...restProps } = props;
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
-    const _a = headerProps || {}, { children: headerChildren } = _a, restOfHeaderProps = __rest(_a, ["children"]);
+    const { children: headerChildren, ...restOfHeaderProps } = headerProps || {};
     const { onClose = () => { } } = props;
-    const _b = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _b, restOfCloseIcon = __rest(_b, ["show", "onClick"]);
+    const { show: showCloseIcon, onClick: onCloseIconClick = () => { }, ...restOfCloseIcon } = closeIconProps || {};
     // Hooks
     const matchesSmallScreen = useMediaQuery(`(max-width: ${BREAK_POINT})`);
     // State
@@ -112,10 +102,10 @@ export const DrawerDetail = props => {
          * Set local storage last collapsed
          */
         if (name) {
-            localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { [name || '']: !collapseDrawer })));
+            localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify({ ...localStorageValues, [name || '']: !collapseDrawer }));
         }
     };
-    return (React.createElement(StyledDrawer, Object.assign({ push: false, closable: false, width: drawerWidth, motion: {
+    return (_jsxs(StyledDrawer, { push: false, closable: false, width: drawerWidth, motion: {
             visible: false,
             motionAppear: false,
             motionEnter: false,
@@ -131,21 +121,10 @@ export const DrawerDetail = props => {
             transition: 'none',
         }, maskStyle: {
             transition: 'none',
-        }, destroyOnClose: destroyOnClose }, restProps),
-        showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
-                onCloseIconClick(e);
-                onClose(e);
-            } }),
-            React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-        showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })),
-        showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
-            React.createElement("div", null,
-                showClose && (React.createElement(CloseBtn, { onClick: onClose },
-                    React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-                React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3, placement: "right" },
-                    React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
-            React.createElement(MenuFooter, null, footer))),
-        React.createElement(Content, null,
-            (headerProps === null || headerProps === void 0 ? void 0 : headerProps.children) && (React.createElement(DrawerHeader, Object.assign({ align: "center" }, restOfHeaderProps), headerChildren)),
-            children)));
+        }, destroyOnClose: destroyOnClose, ...restProps, children: [showCloseIcon && (_jsx("div", { className: "close-btn", ...restOfCloseIcon, onClick: e => {
+                    onCloseIconClick(e);
+                    onClose(e);
+                }, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), showExpandButton && !fullScreen && (_jsx(ToggleDrawerSizeButton, { style: {
+                    ...(!showMenu && { background: '#ffffff' }),
+                }, onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })), showMenu && (_jsxs(LeftMenu, { className: "animate__animated animate__fadeIn", children: [_jsxs("div", { children: [showClose && (_jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), _jsx(Flex, { vertical: true, gap: 10, align: "center", justify: "center", children: items?.map((item) => (_jsx(Tooltip, { title: item?.label, mouseEnterDelay: 0.3, placement: "right", children: _jsx(MenuItem, { className: selectedKeys?.includes(item.key) ? 'active' : '', onClick: () => onClick && onClick(item), children: item.icon }, item?.key) }, item?.key))) })] }), _jsx(MenuFooter, { children: footer })] })), _jsxs(Content, { children: [headerProps?.children && (_jsx(DrawerHeader, { align: "center", ...restOfHeaderProps, children: headerChildren })), children] })] }));
 };

package/es/components/molecules/DrawerDetail/components/ToggleDrawerSizeButton.js

@@ -1,17 +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 { globalToken } from '@antscorp/antsomi-ui/es/constants';
-import React from 'react';
 import styled from 'styled-components';
 // Icons
 import { ExpandMoreRightIcon } from '../../../icons';
@@ -24,8 +13,8 @@ const StyledToggleButton = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_2};
-  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  background-color: ${globalToken?.blue1_2};
+  color: ${globalToken?.bw8};
   top: 50%;
   transform: translateY(-50%);
   left: -5px;
@@ -42,7 +31,6 @@ const StyledToggleButton = styled.div `
   }
 `;
 export const ToggleDrawerSizeButton = props => {
-    const { collapse } = props, restProps = __rest(props, ["collapse"]);
-    return (React.createElement(StyledToggleButton, Object.assign({ "$collapse": !!collapse }, restProps),
-        React.createElement(ExpandMoreRightIcon, null)));
+    const { collapse, ...restProps } = props;
+    return (_jsx(StyledToggleButton, { "$collapse": !!collapse, ...restProps, children: _jsx(ExpandMoreRightIcon, {}) }));
 };

package/es/components/molecules/DrawerDetail/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';
 // Drawer
 import { Drawer } from '../Drawer';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
@@ -25,7 +25,7 @@ export const StyledDrawer = styled(Drawer) `
       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;
       z-index: 100;
       cursor: pointer;
@@ -46,7 +46,7 @@ export const Content = styled.div `
 export const LeftMenu = styled.div `
   width: 46px;
   height: 100%;
-  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_2};
+  background-color: ${globalToken?.blue1_2};
   padding: 8px 5px;
   box-sizing: border-box;
   display: flex;
@@ -62,7 +62,7 @@ export const CloseBtn = 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;
   cursor: pointer;
 
@@ -73,7 +73,7 @@ export const CloseBtn = styled.div `
 export const MenuItem = styled.div `
   height: 36px;
   width: 36px;
-  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadiusXL}px;
+  border-radius: ${globalToken?.borderRadiusXL}px;
   background-color: transparent;
   display: flex;
   align-items: center;
@@ -82,7 +82,7 @@ export const MenuItem = styled.div `
   transition: all 0.2s;
 
   * {
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    color: ${globalToken?.bw8};
   }
 
   i {
@@ -92,10 +92,10 @@ export const MenuItem = styled.div `
   }
 
   &:hover {
-    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
+    background-color: ${globalToken?.bw0};
 
     * {
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+      color: ${globalToken?.colorPrimary};
     }
   }
 
@@ -103,7 +103,7 @@ export const MenuItem = styled.div `
     background-color: #d3e3fd;
 
     * {
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+      color: ${globalToken?.colorPrimary};
     }
   }
 `;
@@ -113,12 +113,12 @@ export const DrawerHeader = styled(Flex) `
   height: 50px;
   padding: 0px 15px;
   box-sizing: border-box;
-  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
+  background-color: ${globalToken?.bw0};
   flex-shrink: 0;
   z-index: 20;
 
   ${props => props.height &&
     `height: ${typeof props.height === 'string' ? props.height : `${props.height}px`};`}
-  ${props => props.showBorderBottom && `border-bottom: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};`}
+  ${props => props.showBorderBottom && `border-bottom: 1px solid ${globalToken?.bw3};`}
 `;
 export const MenuFooter = styled.div ``;

package/es/components/molecules/Dropdown/Dropdown.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 import { InputDropdownProps } from './types';
 import './style.scss';
 export { Dropdown } from 'antd';
-export declare const InputDropdown: (props: InputDropdownProps) => React.JSX.Element;
+export declare const InputDropdown: (props: InputDropdownProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/Dropdown/Dropdown.js

@@ -1,34 +1,24 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useCallback, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
 import { Space, Typography } from 'antd';
 import Icon from '@antscorp/icons';
 import { StyledInputDropdownRoot } from './styled';
 import clsx from 'clsx';
 import './style.scss';
 export { Dropdown } from 'antd';
-const DefaultExpandIcon = React.createElement(Icon, { type: "icon-ants-expand-more" });
+const DefaultExpandIcon = _jsx(Icon, { type: "icon-ants-expand-more" });
 export const InputDropdown = (props) => {
-    const { children, disabled = false, className, trigger = ['click'], menu = { items: [] }, width = '100%', expandIcon = DefaultExpandIcon, onOpenChange = () => { }, overlayClassName } = props, rest = __rest(props, ["children", "disabled", "className", "trigger", "menu", "width", "expandIcon", "onOpenChange", "overlayClassName"]);
+    const { children, disabled = false, className, trigger = ['click'], menu = { items: [] }, width = '100%', expandIcon = DefaultExpandIcon, onOpenChange = () => { }, overlayClassName, ...rest } = props;
     const [enableTooltip, setEnableTooltip] = useState(true);
     const renderChildren = useCallback(() => {
         if (typeof children === 'string') {
-            return (React.createElement(Typography.Text, { ellipsis: enableTooltip
+            return (_jsx(Typography.Text, { ellipsis: enableTooltip
                     ? {
                         tooltip: {
                             arrow: false,
                         },
                     }
-                    : true }, children));
+                    : true, children: children }));
         }
         return children;
     }, [children, enableTooltip]);
@@ -37,8 +27,5 @@ export const InputDropdown = (props) => {
         setEnableTooltip(!open);
         onOpenChange(...args);
     };
-    return (React.createElement(StyledInputDropdownRoot, Object.assign({ menu: menu, trigger: trigger, disabled: disabled }, rest, { className: clsx({ disabled }, className, 'antsomi-input-dropdown'), overlayClassName: clsx(overlayClassName, 'antsomi-input-dropdown-overlay'), onOpenChange: handleOpen }),
-        React.createElement(Space, { style: { width } },
-            renderChildren(),
-            expandIcon)));
+    return (_jsx(StyledInputDropdownRoot, { menu: menu, trigger: trigger, disabled: disabled, ...rest, className: clsx({ disabled }, className, 'antsomi-input-dropdown'), overlayClassName: clsx(overlayClassName, 'antsomi-input-dropdown-overlay'), onOpenChange: handleOpen, children: _jsxs(Space, { style: { width }, children: [renderChildren(), expandIcon] }) }));
 };

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

@@ -1,11 +1,10 @@
-var _a, _b, _c, _d, _e, _f, _g, _h;
 import styled from 'styled-components';
 import { Dropdown } from 'antd';
 import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const StyledInputDropdownRoot = styled(Dropdown) `
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText};
-  min-height: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.controlHeight}px;
-  border-bottom: 1px solid ${(_d = (_c = THEME.components) === null || _c === void 0 ? void 0 : _c.Input) === null || _d === void 0 ? void 0 : _d.colorBorder};
+  color: ${THEME.token?.colorText};
+  min-height: ${THEME.token?.controlHeight}px;
+  border-bottom: 1px solid ${THEME.components?.Input?.colorBorder};
   cursor: pointer;
   padding: 0 5px;
 
@@ -19,15 +18,15 @@ export const StyledInputDropdownRoot = styled(Dropdown) `
     align-items: center;
 
     > i {
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+      color: ${globalToken?.bw8};
       font-size: 20px;
     }
   }
 
   &.disabled {
     cursor: not-allowed;
-    border-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw4};
-    background-color: ${(_f = (_e = THEME.components) === null || _e === void 0 ? void 0 : _e.Input) === null || _f === void 0 ? void 0 : _f.colorBgContainerDisabled};
-    color: ${(_h = (_g = THEME.components) === null || _g === void 0 ? void 0 : _g.Input) === null || _h === void 0 ? void 0 : _h.colorTextDisabled};
+    border-color: ${globalToken?.bw4};
+    background-color: ${THEME.components?.Input?.colorBgContainerDisabled};
+    color: ${THEME.components?.Input?.colorTextDisabled};
   }
 `;

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import classNames from 'classnames';
 // Atoms
 import { DividerPure, Icon, Text, InputNumber } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -23,7 +24,6 @@ export const UNIT = {
 };
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/EdgeSetting/index.tsx';
 export const EdgeSetting = memo(props => {
-    var _a, _b, _c;
     const { label, values, minValue, maxValue, edgeLabels = [], edgeLabelClassName, contentClassName, unit, linked = false, onChange = () => { }, align, disabledLinked = false, } = props;
     // State
     const [state, setState] = useState({
@@ -34,9 +34,13 @@ export const EdgeSetting = memo(props => {
         align: null,
     });
     useEffect(() => {
-        setState(state => (Object.assign(Object.assign({}, state), { values,
+        setState(state => ({
+            ...state,
+            values,
             unit,
-            linked, align: align })));
+            linked,
+            align: align,
+        }));
     }, [values, unit, linked, align]);
     // Handlers
     const onChangeState = (key, value) => {
@@ -78,7 +82,11 @@ export const EdgeSetting = memo(props => {
                     }
                 }
             }
-            setState(state => (Object.assign(Object.assign({}, state), { values: draftValues, [key]: value })));
+            setState(state => ({
+                ...state,
+                values: draftValues,
+                [key]: value,
+            }));
             // Callback onchange
             onChange({
                 values: draftValues,
@@ -105,7 +113,7 @@ export const EdgeSetting = memo(props => {
             else {
                 draftValues[index] = value;
             }
-            setState(state => (Object.assign(Object.assign({}, state), { lastValueFocus: value })));
+            setState(state => ({ ...state, lastValueFocus: value }));
             onChangeState('values', draftValues);
         }
         catch (error) {
@@ -116,70 +124,52 @@ export const EdgeSetting = memo(props => {
             });
         }
     };
-    return (React.createElement(EdgeSettingWrapper, null,
-        React.createElement(EdgeSettingHeader, null,
-            React.createElement(Text, { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon } }, label),
-            React.createElement("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    marginLeft: 12,
-                    marginRight: 12,
-                } },
-                state.align !== null ? (React.createElement("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        marginLeft: 8,
-                        marginRight: 8,
-                    } },
-                    React.createElement(AlignEdit, { align: state.align, onChange: value => onChangeState('align', value) }),
-                    React.createElement(DividerPure, { type: "vertical", dot: true, height: 12 }))) : null,
-                state.unit ? (React.createElement("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        marginLeft: 8,
-                        marginRight: 8,
-                        // borderRight: '2px dashed #D2D2D2',
-                        height: 18,
-                    } },
-                    Object.values(UNIT).map(({ value, label }, index) => {
-                        var _a, _b;
-                        return (React.createElement(Text, { key: value, style: {
-                                color: state.unit === value
-                                    ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary
-                                    : state.unit !== value
-                                        ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon
-                                        : 'inherit',
-                                fontWeight: state.unit === value ? 'bold' : 'normal',
-                                marginLeft: Object.values(UNIT).length - 1 === index ? 6 : 0,
-                                cursor: 'pointer',
-                                paddingRight: value === '%' ? 8 : 0,
-                            }, onClick: () => onChangeState('unit', value) }, label));
-                    }),
-                    React.createElement("div", { style: {
-                            width: 2,
-                            height: 24,
-                            overflow: 'hidden',
+    return (_jsxs(EdgeSettingWrapper, { children: [_jsxs(EdgeSettingHeader, { children: [_jsx(Text, { style: { color: THEME.token?.colorIcon }, children: label }), _jsxs("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
-                            justifyContent: 'center',
-                        } },
-                        React.createElement(Icon, { type: "icon-ants-vertical-dots", style: { fontSize: '30px' }, color: "#D2D2D2" })))) : null,
-                React.createElement(Icon, { type: `icon-ants-${state.linked ? 'hyperlink' : 'hyperlink-off'}`, size: 18, style: {
-                        cursor: 'pointer',
-                        color: !state.linked ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon : (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-                    }, onClick: disabledLinked ? () => { } : () => onChangeState('linked', !state.linked), disabled: disabledLinked ? true : !!state.align }))),
-        React.createElement(EdgeSettingContent, { className: contentClassName }, state.values.map((value, index) => {
-            var _a;
-            if (!edgeLabels[index]) {
-                return null;
-            }
-            return (React.createElement("div", { key: edgeLabels[index] },
-                React.createElement(Text, { className: classNames(edgeLabelClassName), style: { marginBottom: 5, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon } }, edgeLabels[index]),
-                value !== 'auto' ? (React.createElement(InputNumber, { disabled: state.linked && index !== 0, value: value, required: true, min: minValue, max: maxValue, onFocus: e => {
-                        const { value = '' } = e.target;
-                        setState(state => (Object.assign(Object.assign({}, state), { lastValueFocus: +value })));
-                    }, onChange: val => onChangeValue(val, index) })) : (React.createElement(Text, { size: "medium", className: "custom-text-auto", style: { marginTop: 8, fontSize: '12px' } }, "AUTO"))));
-        }))));
+                            marginLeft: 12,
+                            marginRight: 12,
+                        }, children: [state.align !== null ? (_jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    marginLeft: 8,
+                                    marginRight: 8,
+                                }, children: [_jsx(AlignEdit, { align: state.align, onChange: value => onChangeState('align', value) }), _jsx(DividerPure, { type: "vertical", dot: true, height: 12 })] })) : null, state.unit ? (_jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    marginLeft: 8,
+                                    marginRight: 8,
+                                    // borderRight: '2px dashed #D2D2D2',
+                                    height: 18,
+                                }, children: [Object.values(UNIT).map(({ value, label }, index) => (_jsx(Text, { style: {
+                                            color: state.unit === value
+                                                ? THEME.token?.colorPrimary
+                                                : state.unit !== value
+                                                    ? THEME.token?.colorIcon
+                                                    : 'inherit',
+                                            fontWeight: state.unit === value ? 'bold' : 'normal',
+                                            marginLeft: Object.values(UNIT).length - 1 === index ? 6 : 0,
+                                            cursor: 'pointer',
+                                            paddingRight: value === '%' ? 8 : 0,
+                                        }, onClick: () => onChangeState('unit', value), children: label }, value))), _jsx("div", { style: {
+                                            width: 2,
+                                            height: 24,
+                                            overflow: 'hidden',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                        }, children: _jsx(Icon, { type: "icon-ants-vertical-dots", style: { fontSize: '30px' }, color: "#D2D2D2" }) })] })) : null, _jsx(Icon, { type: `icon-ants-${state.linked ? 'hyperlink' : 'hyperlink-off'}`, size: 18, style: {
+                                    cursor: 'pointer',
+                                    color: !state.linked ? THEME.token?.colorIcon : THEME.token?.colorPrimary,
+                                }, onClick: disabledLinked ? () => { } : () => onChangeState('linked', !state.linked), disabled: disabledLinked ? true : !!state.align })] })] }), _jsx(EdgeSettingContent, { className: contentClassName, children: state.values.map((value, index) => {
+                    if (!edgeLabels[index]) {
+                        return null;
+                    }
+                    return (_jsxs("div", { children: [_jsx(Text, { className: classNames(edgeLabelClassName), style: { marginBottom: 5, color: THEME.token?.colorIcon }, children: edgeLabels[index] }), value !== 'auto' ? (_jsx(InputNumber, { disabled: state.linked && index !== 0, value: value, required: true, min: minValue, max: maxValue, onFocus: e => {
+                                    const { value = '' } = e.target;
+                                    setState(state => ({ ...state, lastValueFocus: +value }));
+                                }, onChange: val => onChangeValue(val, index) })) : (_jsx(Text, { size: "medium", className: "custom-text-auto", style: { marginTop: 8, fontSize: '12px' }, children: "AUTO" }))] }, edgeLabels[index]));
+                }) })] }));
 });
 EdgeSetting.defaultProps = {
     label: '',

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

@@ -1,10 +1,9 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Constant
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const EdgeSettingWrapper = styled.div `
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon} !important;
+  color: ${THEME.token?.colorIcon} !important;
 `;
 export const EdgeSettingHeader = styled.div `
   display: flex;

package/es/components/molecules/EditableName/EditableName.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { InputWrapperStyled } from './styled';
 import { Input, Tooltip } from 'antd';
@@ -7,7 +8,6 @@ import { useInView } from 'react-intersection-observer';
 import { Spin } from '../../atoms';
 import { EditIcon } from '../../icons';
 export const EditableName = React.forwardRef((props, ref) => {
-    var _a;
     const { className, isLoading, required, error, value, style, readonly, maxLength = 255, editIcon, onBlur, onChange, } = props;
     const defaultValue = useRef(props.defaultValue);
     const [inputWidth, setInputWidth] = useState(1);
@@ -25,21 +25,18 @@ export const EditableName = React.forwardRef((props, ref) => {
         },
     }), [internalValue]);
     const onKeyDown = (e) => {
-        var _a;
         if (e.key === 'Enter') {
-            onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.value);
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            onChange?.(e.currentTarget.value);
+            inputRef.current?.blur();
         }
     };
     useEffect(() => {
-        var _a;
         if (!spanRef.current || !componentInView)
             return;
         spanRef.current.innerText = value || defaultValue.current || '';
-        setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
+        setInputWidth(spanRef.current?.offsetWidth || 1);
     }, [value, componentInView]);
     useEffect(() => {
-        var _a;
         /**
          * This effect prevent horizontal wheel when don't focus input element (chromium kernel bug)
          * NOTE: issue link: https://issues.chromium.org/issues/41245282
@@ -50,29 +47,19 @@ export const EditableName = React.forwardRef((props, ref) => {
         const preventWheel = e => {
             e.preventDefault();
         };
-        (_a = inputRefElement.input) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', preventWheel, { passive: false });
+        inputRefElement.input?.addEventListener('wheel', preventWheel, { passive: false });
         return () => {
-            var _a;
-            (_a = inputRefElement === null || inputRefElement === void 0 ? void 0 : inputRefElement.input) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', preventWheel);
+            inputRefElement?.input?.removeEventListener('wheel', preventWheel);
         };
     }, []);
-    return (React.createElement(InputWrapperStyled, { className: className || '', style: style, ref: componentInViewRef },
-        React.createElement(Tooltip, { title: value || internalValue },
-            React.createElement(Input, { readOnly: readonly, ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue.current, value: value, onChange: event => {
-                    var _a;
-                    const newValue = event.target.value;
-                    if (spanRef.current)
-                        spanRef.current.innerText = newValue;
-                    setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
-                    setInternalValue(newValue);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                }, onBlur: readonly ? undefined : onBlur, onKeyDown: onKeyDown, maxLength: maxLength })),
-        isLoading ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px', alignSelf: 'center' } })) : null,
-        (error || requiredError) && !isLoading ? (React.createElement("div", { className: "suffix-icon-error" },
-            React.createElement(Tooltip, { title: error || requiredError },
-                React.createElement(Icon, { type: "icon-ants-warning-circle", style: { color: '#F44336', fontSize: '19.2px' } })))) : readonly ? null : (React.createElement("div", { className: "suffix-icon" }, editIcon || (React.createElement(EditIcon, { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7 }, onClick: () => {
-                var _a;
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            } })))),
-        React.createElement("span", { ref: spanRef, className: "hidden-span" })));
+    return (_jsxs(InputWrapperStyled, { className: className || '', style: style, ref: componentInViewRef, children: [_jsx(Tooltip, { title: value || internalValue, children: _jsx(Input, { readOnly: readonly, ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue.current, value: value, onChange: event => {
+                        const newValue = event.target.value;
+                        if (spanRef.current)
+                            spanRef.current.innerText = newValue;
+                        setInputWidth(spanRef.current?.offsetWidth || 1);
+                        setInternalValue(newValue);
+                        onChange?.(newValue);
+                    }, onBlur: readonly ? undefined : onBlur, onKeyDown: onKeyDown, maxLength: maxLength }) }), isLoading ? (_jsx(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px', alignSelf: 'center' } })) : null, (error || requiredError) && !isLoading ? (_jsx("div", { className: "suffix-icon-error", children: _jsx(Tooltip, { title: error || requiredError, children: _jsx(Icon, { type: "icon-ants-warning-circle", style: { color: '#F44336', fontSize: '19.2px' } }) }) })) : readonly ? null : (_jsx("div", { className: "suffix-icon", children: editIcon || (_jsx(EditIcon, { style: { color: THEME.token?.blue7 }, onClick: () => {
+                        inputRef.current?.focus();
+                    } })) })), _jsx("span", { ref: spanRef, className: "hidden-span" })] }));
 });

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

@@ -1,4 +1,3 @@
-var _a;
 import styled from 'styled-components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const InputWrapperStyled = styled.div `
@@ -13,7 +12,7 @@ export const InputWrapperStyled = styled.div `
   align-items: baseline;
 
   &:has(input:focus) {
-    border-bottom: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1};
+    border-bottom: 1px solid ${THEME.token?.blue1};
   }
   &:has(input[readonly]:focus) {
     border-bottom: none;

package/es/components/molecules/EditorScript/EditorScript.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react-ace/node_modules/ace-builds/ace-modules" />
 import React, { ReactNode } from 'react';
 import { IAceEditorProps } from 'react-ace';
-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';