@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d;
 // Libraries
 import styled from 'styled-components';
 // Constants
@@ -16,7 +15,7 @@ export const WrapperListImages = styled.div `
   }
 `;
 export const TextStyled = styled.span `
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDark};
+  color: ${THEME.token?.colorTextDark};
 `;
 export const Boxed = styled.div `
   position: relative;
@@ -52,7 +51,7 @@ export const Paragraph = styled.p `
   display: inline-block;
   margin-top: 5px;
   width: 100%;
-  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
+  font-size: ${THEME.token?.fontSize}px;
 `;
 export const Overlay = styled.div `
   position: absolute;
@@ -61,7 +60,7 @@ export const Overlay = styled.div `
   bottom: 0px;
   left: 0px;
   z-index: 2;
-  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bgLightTransparent};
+  background-color: ${THEME.token?.bgLightTransparent};
   opacity: 0;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
     opacity, box-shadow, transform, filter, backdrop-filter;
@@ -108,7 +107,7 @@ export const UploadImageWrapper = styled.div `
     height: 100%;
     gap: 20px;
     position: relative;
-    border-radius: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.borderRadius}px;
+    border-radius: ${THEME.token?.borderRadius}px;
     border-width: 2px;
     border-style: dashed;
     --tw-border-opacity: 1;

package/es/components/molecules/VirtualizedMenu/VirtualizedMenu.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { MODE } from './config';
 import { MenuInline } from './components';
 export const VirtualizedMenu = (props) => {
@@ -6,7 +6,7 @@ export const VirtualizedMenu = (props) => {
     let content = null;
     switch (mode) {
         case MODE.Inline: {
-            content = React.createElement(MenuInline, Object.assign({}, props));
+            content = _jsx(MenuInline, { ...props });
             break;
         }
         default:

package/es/components/molecules/VirtualizedMenu/components/Item/Item.d.ts

@@ -4,5 +4,5 @@ type ItemProps = Partial<{
     item: ItemType;
     expandIcon: VirtualizedMenuProps['expandIcon'];
 }> & ComponentProps<'div'>;
-export declare const Item: React.MemoExoticComponent<(props: ItemProps) => React.JSX.Element>;
+export declare const Item: React.MemoExoticComponent<(props: ItemProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/es/components/molecules/VirtualizedMenu/components/Item/Item.js

@@ -1,25 +1,23 @@
-import React, { memo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
 import { Typography } from '../../../../atoms/Typography';
 import { Icon } from '../../../../atoms/Icon';
 import { MenuItemRoot } from '../../styled';
 import clsx from 'clsx';
 export const Item = memo((props) => {
-    var _a;
     const { className, style, item, expandIcon, onClick } = props;
     const handleOnClick = (e) => {
-        if (!onClick || (item === null || item === void 0 ? void 0 : item.disabled))
+        if (!onClick || item?.disabled)
             return;
         onClick(e);
     };
     const renderLabel = () => {
-        if (typeof (item === null || item === void 0 ? void 0 : item.label) === 'string') {
-            return React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, item.label);
+        if (typeof item?.label === 'string') {
+            return _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: item.label });
         }
-        return item === null || item === void 0 ? void 0 : item.label;
+        return item?.label;
     };
-    return (React.createElement(MenuItemRoot, { className: clsx({
-            'item-disabled': item === null || item === void 0 ? void 0 : item.disabled,
-        }, className), style: style, onClick: handleOnClick },
-        React.createElement("div", { className: "item-label" }, renderLabel()),
-        !!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { className: "item-actions" }, expandIcon || React.createElement(Icon, { type: "icon-ants-expand-more" })))));
+    return (_jsxs(MenuItemRoot, { className: clsx({
+            'item-disabled': item?.disabled,
+        }, className), style: style, onClick: handleOnClick, children: [_jsx("div", { className: "item-label", children: renderLabel() }), !!item?.children?.length && (_jsx("div", { className: "item-actions", children: expandIcon || _jsx(Icon, { type: "icon-ants-expand-more" }) }))] }));
 });

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { MenuInlineProps } from '../../types';
-export declare const MenuInline: (props: MenuInlineProps) => React.JSX.Element;
+export declare const MenuInline: (props: MenuInlineProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.js

@@ -1,15 +1,5 @@
-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, { forwardRef, useCallback, useMemo, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VirtualizedMenuContainer } from '../../styled';
@@ -17,10 +7,7 @@ import { INLINE_INDENT, INLINE_PADDING, ITEM_SIZE, ITEM_SPACING, MODE } from '..
 import { getFlattenItems } from '../../utils';
 import { Item } from '../Item';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
-const innerElementType = forwardRef((_a, ref) => {
-    var { style } = _a, rest = __rest(_a, ["style"]);
-    return React.createElement("div", Object.assign({ ref: ref, style: style }, rest));
-});
+const innerElementType = forwardRef(({ style, ...rest }, ref) => _jsx("div", { ref: ref, style: style, ...rest }));
 export const MenuInline = (props) => {
     const { items = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, openKeys: openKeysProp = [], onClick, selectable = false, className, } = props;
     const [openKeys, setOpenKeys] = useState(new Set());
@@ -39,8 +26,7 @@ export const MenuInline = (props) => {
         });
     }, [items, openKeys]);
     const handleCollapseItem = useCallback((item) => {
-        var _a;
-        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length))
+        if (!item.children?.length)
             return;
         const newOpenKeys = new Set(openKeys);
         newOpenKeys.delete(item.key);
@@ -55,8 +41,7 @@ export const MenuInline = (props) => {
         setOpenKeys(newOpenKeys);
     }, [openKeys]);
     const handleExpandItem = useCallback((item) => {
-        var _a;
-        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length))
+        if (!item.children?.length)
             return;
         const itemKey = item.key;
         const newOpenKeys = new Set(openKeys);
@@ -64,10 +49,9 @@ export const MenuInline = (props) => {
         setOpenKeys(newOpenKeys);
     }, [openKeys]);
     const handleClickItem = useCallback((item, idx) => () => {
-        var _a;
         const { key } = item;
         const isOpen = openKeys.has(key);
-        const hasChilren = !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length);
+        const hasChilren = !!item.children?.length;
         if (hasChilren && isOpen) {
             handleCollapseItem(item);
         }
@@ -93,8 +77,14 @@ export const MenuInline = (props) => {
         const { index, style } = args;
         const item = flattenItems[index];
         const indentSize = ((item.level || 0) - 1) * inlineIndent;
-        const itemStyle = Object.assign(Object.assign({}, style), { paddingLeft: indentSize + inlinePadding, paddingRight: inlinePadding, top: Number(style.top) + itemSpacing, height: Number(style.height) - itemSpacing });
-        return (React.createElement(Item, { className: clsx({
+        const itemStyle = {
+            ...style,
+            paddingLeft: indentSize + inlinePadding,
+            paddingRight: inlinePadding,
+            top: Number(style.top) + itemSpacing,
+            height: Number(style.height) - itemSpacing,
+        };
+        return (_jsx(Item, { className: clsx({
                 'item-selected': selectedKeys.has(item.key),
                 'item-expanded': openKeys.has(item.key),
             }, item.className), onClick: handleClickItem(item, index), style: itemStyle, item: item }));
@@ -108,5 +98,5 @@ export const MenuInline = (props) => {
         openKeys,
     ]);
     // console.log('render');
-    return (React.createElement(AutoSizer, null, autoSize => (React.createElement(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: autoSize.height, width: autoSize.width, innerElementType: innerElementType, useIsScrolling: true }, renderItem))));
+    return (_jsx(AutoSizer, { children: autoSize => (_jsx(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: autoSize.height, width: autoSize.width, innerElementType: innerElementType, useIsScrolling: true, children: renderItem })) }));
 };

package/es/components/molecules/VirtualizedMenu/config.js

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e;
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const MODE = { Inline: 'inline' };
 export const ACTION_TYPES = {
@@ -8,5 +7,5 @@ export const ACTION_TYPES = {
 };
 export const INLINE_PADDING = 10;
 export const INLINE_INDENT = 10;
-export const ITEM_SPACING = parseFloat(((_c = (_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemMarginBlock) === null || _c === void 0 ? void 0 : _c.toString()) || '10');
-export const ITEM_SIZE = ((_e = (_d = THEME.components) === null || _d === void 0 ? void 0 : _d.Menu) === null || _e === void 0 ? void 0 : _e.itemHeight) || 35;
+export const ITEM_SPACING = parseFloat(THEME.components?.Menu?.itemMarginBlock?.toString() || '10');
+export const ITEM_SIZE = THEME.components?.Menu?.itemHeight || 35;

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

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e, _f, _g, _h;
 import styled from 'styled-components';
 import { VariableSizeList } from 'react-window';
 import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
@@ -28,7 +27,7 @@ export const MenuItemRoot = styled.div `
   display: flex;
   align-items: center;
   overflow: hidden;
-  border-radius: ${(_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemBorderRadius}px;
+  border-radius: ${THEME.components?.Menu?.itemBorderRadius}px;
 
   > .item-label {
     flex: 1;
@@ -42,12 +41,12 @@ export const MenuItemRoot = styled.div `
   }
 
   &.item-disabled {
-    color: ${(_d = (_c = THEME.components) === null || _c === void 0 ? void 0 : _c.Menu) === null || _d === void 0 ? void 0 : _d.itemDisabledColor};
+    color: ${THEME.components?.Menu?.itemDisabledColor};
     cursor: not-allowed;
   }
 
   &.item-selected {
-    background-color: ${(_f = (_e = THEME.components) === null || _e === void 0 ? void 0 : _e.Menu) === null || _f === void 0 ? void 0 : _f.itemActiveBg};
+    background-color: ${THEME.components?.Menu?.itemActiveBg};
   }
 
   &.item-expanded {
@@ -60,10 +59,10 @@ export const MenuItemRoot = styled.div `
   }
 
   &:hover:not(.item-disabled, .item-selected) {
-    background-color: ${(_h = (_g = THEME.components) === null || _g === void 0 ? void 0 : _g.Menu) === null || _h === void 0 ? void 0 : _h.itemHoverBg};
+    background-color: ${THEME.components?.Menu?.itemHoverBg};
   }
 `;
 export const VirtualizedMenuContainer = styled(VariableSizeList) `
-  font-size: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontSize}px;
+  font-size: ${globalToken?.fontSize}px;
   scrollbar-gutter: stable;
 `;

package/es/components/molecules/VirtualizedMenu/utils.js

@@ -4,7 +4,7 @@ export const getFlattenItems = (args) => {
     function recursively(items, level, pathKey, parent) {
         items.forEach((item, idx) => {
             const currentPathKey = [...pathKey, idx, item.key.toString()];
-            result.push(Object.assign(Object.assign({}, item), { level, pathKey: currentPathKey, parent }));
+            result.push({ ...item, level, pathKey: currentPathKey, parent });
             if (item.children && item.children.length > 0) {
                 recursively(item.children, level + 1, currentPathKey, item);
             }

package/es/components/organism/AccountProfile/AccountProfile.js

@@ -1,13 +1,14 @@
-import React, { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 import { DrawerDetail, Icon } from '@antscorp/antsomi-ui/es/components';
 import { AccountSetting } from './components/AccountSetting';
 export const AccountProfile = props => {
     const { open, onClose } = props;
     const [drawerHeader, setDrawerHeader] = useState(null);
-    return (React.createElement(DrawerDetail, { open: open, closable: false, name: "drawer-account-profile", destroyOnClose: true, menuProps: {
+    return (_jsx(DrawerDetail, { open: open, closable: false, name: "drawer-account-profile", destroyOnClose: true, menuProps: {
             items: [
                 {
-                    icon: React.createElement(Icon, { type: "icon-ants-pencil" }),
+                    icon: _jsx(Icon, { type: "icon-ants-pencil" }),
                     label: 'Settings',
                     key: 'settings',
                 },
@@ -16,6 +17,5 @@ export const AccountProfile = props => {
         }, onClose: onClose, headerProps: {
             showBorderBottom: true,
             children: drawerHeader,
-        } },
-        React.createElement(AccountSetting, Object.assign({}, props, { setDrawerHeader: setDrawerHeader }))));
+        }, children: _jsx(AccountSetting, { ...props, setDrawerHeader: setDrawerHeader }) }));
 };