@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,7 +1,5 @@
 /// <reference types="react" />
-export declare const ButtonFeedback: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {
+export declare const ButtonFeedback: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {
     height?: number | undefined;
     borderRadiusCustom?: number | undefined;
 }, never>;
@@ -64,6 +62,4 @@ export declare const TreeContent: import("styled-components").StyledComponent<(<
 export declare const Span: import("styled-components").StyledComponent<"span", any, {
     styles: any;
 }, never>;
-export declare const IconButtonStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
+export declare const IconButtonStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;

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

@@ -1,8 +1,7 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
 // Libraries
 import { Space, Typography, Tree, Input } from 'antd';
 import styled, { css } from 'styled-components';
-import { Button } from '../../atoms';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Components
@@ -17,7 +16,7 @@ export const PreviewBox = styled.div `
   position: relative;
   width: 200px;
   height: 125px;
-  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
+  background-color: ${THEME.token?.bw0};
   cursor: pointer;
   overflow: hidden;
 
@@ -38,12 +37,12 @@ export const Overlay = styled.div `
 `;
 export const Text = styled.span `
   font-weight: normal !important;
-  color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText} !important;
-  font-size: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontSize}px !important;
+  color: ${THEME.token?.colorText} !important;
+  font-size: ${THEME.token?.fontSize}px !important;
 `;
 export const Label = styled.span `
   &.verify-support {
-    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
+    color: ${THEME.token?.colorPrimary};
   }
 `;
 export const SendFeedback = styled.div `
@@ -53,8 +52,8 @@ export const ControlGroup = styled(Space) `
   width: 100%;
 `;
 export const ControlLabel = styled(AntText) `
-  font-size: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontSize}px !important;
-  color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw8} !important;
+  font-size: ${THEME.token?.fontSize}px !important;
+  color: ${THEME.token?.bw8} !important;
 `;
 export const FlexCenter = styled.div `
   display: flex;
@@ -72,7 +71,7 @@ export const HiddenBlock = styled.div `
   right: 0;
   width: 17px;
   height: 50px;
-  background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw0};
+  background-color: ${THEME.token?.bw0};
 `;
 export const WrapperImage = styled.div `
   position: relative;
@@ -96,7 +95,7 @@ export const Video = styled.video `
 export const WrapperHeader = styled.strong `
   display: block;
   height: 50px;
-  border-bottom: 1px solid ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw3};
+  border-bottom: 1px solid ${THEME.token?.bw3};
   line-height: 50px;
   padding-left: 15px;
   box-sizing: border-box;
@@ -107,7 +106,7 @@ export const WrapperHeader = styled.strong `
 `;
 export const Header = styled(AntText) `
   font-size: 16px !important;
-  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText} !important;
+  color: ${THEME.token?.colorText} !important;
   font-weight: normal !important;
 `;
 export const WrapperBody = styled.div `
@@ -123,8 +122,8 @@ export const WrapperFooter = styled.div `
   left: 0;
   width: 100%;
   max-height: 58px;
-  border-top: 1px solid ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw3};
-  background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw0};
+  border-top: 1px solid ${THEME.token?.bw3};
+  background-color: ${THEME.token?.bw0};
   padding: 15px;
   box-sizing: border-box;
   z-index: 10;
@@ -135,8 +134,8 @@ export const WrapperFooterSpace = styled.div `
   left: 0;
   width: 100%;
   max-height: 58px;
-  border-top: 1px solid ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw3};
-  background-color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw0};
+  border-top: 1px solid ${THEME.token?.bw3};
+  background-color: ${THEME.token?.bw0};
   padding: 15px;
   box-sizing: border-box;
   z-index: 10;
@@ -146,29 +145,29 @@ export const WrapperFooterSpace = styled.div `
 `;
 export const EditorWrapper = styled.div `
   .tox-tinymce {
-    border: 1px solid ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw3_5};
+    border: 1px solid ${THEME.token?.bw3_5};
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
   }
 `;
 export const WrapperLinkFiles = styled.div `
-  border-right: 1px solid ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw3_5};
-  border-left: 1px solid ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw3_5};
+  border-right: 1px solid ${THEME.token?.bw3_5};
+  border-left: 1px solid ${THEME.token?.bw3_5};
   display: flex;
   flex-direction: column;
   padding: 8px;
   gap: 4px;
 `;
 export const WrapperLinkItemFiles = styled.div `
-  color: ${(_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw10};
+  color: ${THEME.token?.bw10};
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 export const WrapperIconEditor = styled.div `
   height: 44px;
-  border: 1px solid ${(_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw3_5};
-  border-top: ${props => { var _a; return (props.borderTop ? `1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3_5}` : 'none'); }};
+  border: 1px solid ${THEME.token?.bw3_5};
+  border-top: ${props => (props.borderTop ? `1px solid ${THEME.token?.bw3_5}` : 'none')};
   display: flex;
   align-items: center;
   padding: 0 8px;
@@ -196,15 +195,15 @@ export const WrapperBodyModal = styled.div `
 `;
 export const ErrorMessage = styled.div `
   display: ${props => (props.isShow ? 'block' : 'none')};
-  color: ${(_u = THEME.token) === null || _u === void 0 ? void 0 : _u.red8};
+  color: ${THEME.token?.red8};
   font-size: 11px;
   line-height: 24px;
-  font-family: ${(_v = THEME.token) === null || _v === void 0 ? void 0 : _v.fontFamily};
+  font-family: ${THEME.token?.fontFamily};
 `;
 export const Wrapper = styled.div ``;
 export const LabelTitle = styled(AntText) `
   font-size: 13px !important;
-  color: ${(_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorText} !important;
+  color: ${THEME.token?.colorText} !important;
   font-weight: bold;
 `;
 export const WrapperContentHelp = styled.div `
@@ -218,7 +217,7 @@ export const Link = styled.a `
   font-size: 12px;
   text-decoration: none;
   color: #005fb8;
-  font-family: ${(_x = THEME.token) === null || _x === void 0 ? void 0 : _x.fontFamily};
+  font-family: ${THEME.token?.fontFamily};
   font-weight: bold;
 `;
 export const IframeHelp = styled.iframe `
@@ -260,8 +259,8 @@ export const IconButtonStyled = styled(Button) `
 
   &.antsomi-dropdown-open,
   &.antsomi-popover-open {
-    color: ${(_y = THEME.token) === null || _y === void 0 ? void 0 : _y.blue7} !important;
-    background-color: ${(_z = THEME.token) === null || _z === void 0 ? void 0 : _z.blue1_1} !important;
-    border: 1px solid ${(_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.blue7} !important;
+    color: ${THEME.token?.blue7} !important;
+    background-color: ${THEME.token?.blue1_1} !important;
+    border: 1px solid ${THEME.token?.blue7} !important;
   }
 `;

package/es/components/organism/Help/utils.js

@@ -1,9 +1,8 @@
 export const formatAccountId = data => {
-    const results = data === null || data === void 0 ? void 0 : data.map(item => item === null || item === void 0 ? void 0 : item.userId);
+    const results = data?.map(item => item?.userId);
     return results;
 };
 export const formatParams = data => {
-    var _a, _b, _c, _d, _e, _f;
     const params = {
         title: '',
         ownerId: undefined,
@@ -16,35 +15,35 @@ export const formatParams = data => {
         message: '',
         attachments: [],
     };
-    if (data === null || data === void 0 ? void 0 : data.ownerId) {
-        params.ownerId = data === null || data === void 0 ? void 0 : data.ownerId;
+    if (data?.ownerId) {
+        params.ownerId = data?.ownerId;
     }
-    if (data === null || data === void 0 ? void 0 : data.title) {
-        params.title = data === null || data === void 0 ? void 0 : data.title;
+    if (data?.title) {
+        params.title = data?.title;
     }
-    if ((_a = data === null || data === void 0 ? void 0 : data.followers) === null || _a === void 0 ? void 0 : _a.length) {
-        params.followers = formatAccountId(data === null || data === void 0 ? void 0 : data.followers);
+    if (data?.followers?.length) {
+        params.followers = formatAccountId(data?.followers);
     }
-    if (data === null || data === void 0 ? void 0 : data.referenceUrl) {
-        params.referenceUrl = data === null || data === void 0 ? void 0 : data.referenceUrl;
+    if (data?.referenceUrl) {
+        params.referenceUrl = data?.referenceUrl;
     }
-    if (data === null || data === void 0 ? void 0 : data.priority) {
-        params.priority = data === null || data === void 0 ? void 0 : data.priority;
+    if (data?.priority) {
+        params.priority = data?.priority;
     }
-    if (Object.keys(data === null || data === void 0 ? void 0 : data.feature).length) {
-        params.feature = (_b = data === null || data === void 0 ? void 0 : data.feature) === null || _b === void 0 ? void 0 : _b.value;
+    if (Object.keys(data?.feature).length) {
+        params.feature = data?.feature?.value;
     }
-    if (data === null || data === void 0 ? void 0 : data.ticketType) {
-        params.ticketType = data === null || data === void 0 ? void 0 : data.ticketType;
+    if (data?.ticketType) {
+        params.ticketType = data?.ticketType;
     }
-    if (Object.keys(data === null || data === void 0 ? void 0 : data.category).length) {
-        params.category = (_c = data === null || data === void 0 ? void 0 : data.category) === null || _c === void 0 ? void 0 : _c.value;
+    if (Object.keys(data?.category).length) {
+        params.category = data?.category?.value;
     }
-    if ((_d = data === null || data === void 0 ? void 0 : data.message) === null || _d === void 0 ? void 0 : _d.length) {
-        params.message = data === null || data === void 0 ? void 0 : data.message;
+    if (data?.message?.length) {
+        params.message = data?.message;
     }
-    if ((_e = data === null || data === void 0 ? void 0 : data.files) === null || _e === void 0 ? void 0 : _e.length) {
-        params.attachments = (_f = data === null || data === void 0 ? void 0 : data.files) === null || _f === void 0 ? void 0 : _f.map(file => file === null || file === void 0 ? void 0 : file.token);
+    if (data?.files?.length) {
+        params.attachments = data?.files?.map(file => file?.token);
     }
     return params;
 };

package/es/components/organism/LeftMenu/LeftMenu.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import Icon from '@antscorp/icons';
 import { Typography } from 'antd';
 import classNames from 'classnames';
@@ -34,23 +35,23 @@ export const LeftMenuComponent = memo(props => {
             ? customActiveAppKey
             : activeAppCode;
         if (type === 'customization')
-            return React.createElement(CustomMenu, null);
+            return _jsx(CustomMenu, {});
         switch (appActiveKey) {
             case type === 'recommendation' ? homePermissionCode : APP_KEYS.HOME:
-                return React.createElement(HomeMenu, null);
+                return _jsx(HomeMenu, {});
             default:
-                return React.createElement(CommonMenu, null);
+                return _jsx(CommonMenu, {});
         }
     }, [activeAppCode, customActiveAppKey, type]);
     const childHoverMenu = useMemo(() => {
         const appActiveKey = state.hoverItem;
         if (type === 'customization')
-            return React.createElement(CustomMenu, { isHover: true });
+            return _jsx(CustomMenu, { isHover: true });
         switch (appActiveKey) {
             case type === 'recommendation' ? homePermissionCode : APP_KEYS.HOME:
-                return React.createElement(HomeMenu, { isHover: type !== 'recommendation' });
+                return _jsx(HomeMenu, { isHover: type !== 'recommendation' });
             default:
-                return React.createElement(CommonMenu, { isHover: type !== 'recommendation' });
+                return _jsx(CommonMenu, { isHover: type !== 'recommendation' });
         }
     }, [state.hoverItem, type]);
     const renderFeatureMenuItem = useCallback((item) => {
@@ -58,39 +59,29 @@ export const LeftMenuComponent = memo(props => {
         const isActive = activeAppCode === menu_item_code;
         const isHover = state.hoverItem === menu_item_code;
         let Label = null;
-        Label = (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
-            renderMenuIcon(component_icon_name || icon_name || ''),
-            React.createElement(Typography.Text, null, menu_item_name),
-            showMenuPopover && React.createElement("div", { className: "popup-triangle" })));
-        return (React.createElement(FeatureMenuItem, { key: menu_item, onClick: () => onClickFeatureMenuItem(item), onMouseEnter: () => onMouseEnter(menu_item_code) }, Label));
+        Label = (_jsxs("li", { role: "menuitem", className: classNames({ isActive, isHover }), children: [renderMenuIcon(component_icon_name || icon_name || ''), _jsx(Typography.Text, { children: menu_item_name }), showMenuPopover && _jsx("div", { className: "popup-triangle" })] }));
+        return (_jsx(FeatureMenuItem, { onClick: () => onClickFeatureMenuItem(item), onMouseEnter: () => onMouseEnter(menu_item_code), children: Label }, menu_item));
     }, [activeAppCode, state.hoverItem, showMenuPopover, onMouseEnter, onClickFeatureMenuItem]);
     const renderRecommendationMenuItem = useCallback((item) => {
         const { menu_item_name, menu_item, component_icon_name, icon_name, permission_code } = item;
         const isActive = customActiveAppKey === permission_code;
         const isHover = state.hoverItem === permission_code;
-        const renderLabel = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }), onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(permission_code || 'null', [permission_code || 'null']) },
-            renderMenuIcon(component_icon_name || icon_name || ''),
-            React.createElement(Typography.Text, null, menu_item_name)));
-        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(permission_code || 'null') }, renderLabel()));
+        const renderLabel = () => (_jsxs("li", { role: "menuitem", className: classNames({ isActive, isHover }), onClick: () => onMenuItemClick?.(permission_code || 'null', [permission_code || 'null']), children: [renderMenuIcon(component_icon_name || icon_name || ''), _jsx(Typography.Text, { children: menu_item_name })] }));
+        return (_jsx(FeatureMenuItem, { onMouseEnter: () => onMouseEnter(permission_code || 'null'), children: renderLabel() }, menu_item));
     }, [customActiveAppKey, onMenuItemClick, onMouseEnter, state.hoverItem]);
-    const renderCustomizedMenuItems = useCallback((items) => items === null || items === void 0 ? void 0 : items.map(item => {
+    const renderCustomizedMenuItems = useCallback((items) => items?.map(item => {
         const { key, icon, label } = item;
         const isActive = key === customActiveAppKey;
         const isHover = key === state.hoverItem;
-        return (React.createElement(FeatureMenuItem, { key: key, onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [key]), onMouseEnter: () => onMouseEnter(key) },
-            React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
-                renderMenuIcon(icon || ''),
-                React.createElement(Typography.Text, null, label),
-                showMenuPopover && React.createElement("div", { className: "popup-triangle" }))));
+        return (_jsx(FeatureMenuItem, { onClick: () => onMenuItemClick?.(key, [key]), onMouseEnter: () => onMouseEnter(key), children: _jsxs("li", { role: "menuitem", className: classNames({ isActive, isHover }), children: [renderMenuIcon(icon || ''), _jsx(Typography.Text, { children: label }), showMenuPopover && _jsx("div", { className: "popup-triangle" })] }) }, key));
     }), [customActiveAppKey, state.hoverItem, showMenuPopover, onMenuItemClick, onMouseEnter]);
-    const renderAppMenuItems = useCallback(() => {
-        var _a;
-        return type === 'customization'
-            ? renderCustomizedMenuItems(items)
-            : (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.filter(item => item.menu_item_code !== APP_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => type === 'recommendation'
-                ? renderRecommendationMenuItem(item)
-                : renderFeatureMenuItem(item));
-    }, [
+    const renderAppMenuItems = useCallback(() => type === 'customization'
+        ? renderCustomizedMenuItems(items)
+        : permissionMenu
+            ?.filter(item => item.menu_item_code !== APP_KEYS.SETTINGS)
+            ?.map(item => type === 'recommendation'
+            ? renderRecommendationMenuItem(item)
+            : renderFeatureMenuItem(item)), [
         items,
         permissionMenu,
         renderCustomizedMenuItems,
@@ -100,7 +91,7 @@ export const LeftMenuComponent = memo(props => {
     ]);
     const renderSettings = () => {
         if (type !== 'customization') {
-            const settingApp = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === APP_KEYS.SETTINGS);
+            const settingApp = permissionMenu?.find(item => item.menu_item_code === APP_KEYS.SETTINGS);
             if (settingApp)
                 return type === 'recommendation'
                     ? renderRecommendationMenuItem(settingApp)
@@ -108,24 +99,9 @@ export const LeftMenuComponent = memo(props => {
         }
         return null;
     };
-    return (React.createElement(LeftMenuNavWrapper, { "$show": show, style: style, "$isExpandMenu": state.isExpandMenu, className: className },
-        React.createElement(LeftMenuNav, { className: "left-menu-nav" },
-            React.createElement(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave },
-                showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar, onClick: onClickLogo },
-                    React.createElement("div", { className: "image-wrapper" },
-                        React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" })))),
-                React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box" },
-                    React.createElement("div", { className: "menu-content scroll-content" }, renderAppMenuItems()),
-                    React.createElement("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }),
-                    showMenuPopover && (React.createElement(PopoverWrapper, { show: state.isShowPopover && !isEmpty(hoverMenuChildren), hasMarginTop: type !== 'recommendation', className: "antsomi-scroll-box antsomi-child-menu-popover" },
-                        React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childHoverMenu)))),
-                React.createElement("div", { style: { flexShrink: 0 } }, renderSettings())),
-            showButtonExpand && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
-                React.createElement(Icon, { type: "icon-ants-expand-more", style: {
-                        cursor: 'pointer',
-                        fontSize: '20px',
-                        transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
-                    }, onClick: onToggleChildMenu })))),
-        React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu, isMarginTop: showLogo, className: "antsomi-scroll-box" },
-            React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childActiveMenu))));
+    return (_jsxs(LeftMenuNavWrapper, { "$show": show, style: style, "$isExpandMenu": state.isExpandMenu, className: className, children: [_jsxs(LeftMenuNav, { className: "left-menu-nav", children: [_jsxs(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave, children: [showLogo && (_jsx(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar, onClick: onClickLogo, children: _jsx("div", { className: "image-wrapper", children: _jsx("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }) }) })), _jsxs(FeatureMenu, { role: "menu", className: "antsomi-scroll-box", children: [_jsx("div", { className: "menu-content scroll-content", children: renderAppMenuItems() }), _jsx("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }), showMenuPopover && (_jsx(PopoverWrapper, { show: state.isShowPopover && !isEmpty(hoverMenuChildren), hasMarginTop: type !== 'recommendation', className: "antsomi-scroll-box antsomi-child-menu-popover", children: _jsx("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' }, children: childHoverMenu }) }))] }), _jsx("div", { style: { flexShrink: 0 }, children: renderSettings() })] }), showButtonExpand && (_jsx(ExpandWrapper, { onMouseEnter: onMouseLeave, children: _jsx(Icon, { type: "icon-ants-expand-more", style: {
+                                cursor: 'pointer',
+                                fontSize: '20px',
+                                transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
+                            }, onClick: onToggleChildMenu }) }))] }), _jsx(ChildMenuWrapper, { isExpand: state.isExpandMenu, isMarginTop: showLogo, className: "antsomi-scroll-box", children: _jsx("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' }, children: childActiveMenu }) })] }));
 }, (prevProps, nextProps) => isEqual(prevProps, nextProps));

package/es/components/organism/LeftMenu/components/CommonMenu/index.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 // Components
 import { ChildMenu } from '../common';
 // Stores
@@ -10,7 +11,7 @@ export const CommonMenu = memo(({ isHover }) => {
     const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
     const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
     const onMenuClick = useLeftMenuContext(store => store.onMenuClick);
-    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
-    const customHoverChildren = useMemo(() => appHoverMenuChildren === null || appHoverMenuChildren === void 0 ? void 0 : appHoverMenuChildren.map(item => getMenuItem(item)), [appHoverMenuChildren]);
-    return (React.createElement(ChildMenu, { items: isHover ? customHoverChildren : customChildren, onMenuClick: onMenuClick }));
+    const customChildren = useMemo(() => appMenuChildren?.map(item => getMenuItem(item)), [appMenuChildren]);
+    const customHoverChildren = useMemo(() => appHoverMenuChildren?.map(item => getMenuItem(item)), [appHoverMenuChildren]);
+    return (_jsx(ChildMenu, { items: isHover ? customHoverChildren : customChildren, onMenuClick: onMenuClick }));
 });

package/es/components/organism/LeftMenu/components/CustomMenu/index.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Components
 import { ChildMenu } from '../common';
 // Hooks
@@ -8,5 +9,5 @@ export const CustomMenu = memo(({ isHover }) => {
     const appCustomMenuChildren = useLeftMenuContext(store => store.customMenuChildren);
     const appCustomHoverMenuChildren = useLeftMenuContext(store => store.customHoverMenuChildren);
     const onMenuClick = useLeftMenuContext(store => store.onMenuClick);
-    return (React.createElement(ChildMenu, { items: isHover ? appCustomHoverMenuChildren : appCustomMenuChildren, onMenuClick: onMenuClick }));
+    return (_jsx(ChildMenu, { items: isHover ? appCustomHoverMenuChildren : appCustomMenuChildren, onMenuClick: onMenuClick }));
 });

package/es/components/organism/LeftMenu/components/HomeMenu/index.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Components
 import { ChildMenu } from '../common';
 import { Flex } from '../../../../atoms';
@@ -13,13 +14,5 @@ export const HomeMenu = memo(props => {
     const { children, removedDashboardId, isDashboardRemoving, type, showCreateButton, setRemovedDashboardId, onCreateNewReport, 
     // onMenuClick,
     onRemoveDashboard, } = useHomeMenu(props);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HomeMenuWrapper, { gap: 10, vertical: true },
-            type !== 'recommendation' && showCreateButton && (React.createElement(CreateButton, { type: "primary", onClick: onCreateNewReport },
-                React.createElement(Flex, { gap: 10, align: "center" },
-                    React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }),
-                    React.createElement("span", null, "Create")))),
-            React.createElement("div", { className: "menu-list" },
-                React.createElement(ChildMenu, { items: children }))),
-        React.createElement(ModalWrapper, { open: !!removedDashboardId, centered: true, onCancel: () => setRemovedDashboardId(''), title: "Remove this dashboard", okText: "Confirm", cancelText: "Cancel", closable: false, okButtonProps: { loading: isDashboardRemoving }, onOk: onRemoveDashboard }, "Removing this dashboard will delete it permanently. Are you sure you want to perform this action?")));
+    return (_jsxs(_Fragment, { children: [_jsxs(HomeMenuWrapper, { gap: 10, vertical: true, children: [type !== 'recommendation' && showCreateButton && (_jsx(CreateButton, { type: "primary", onClick: onCreateNewReport, children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }), _jsx("span", { children: "Create" })] }) })), _jsx("div", { className: "menu-list", children: _jsx(ChildMenu, { items: children }) })] }), _jsx(ModalWrapper, { open: !!removedDashboardId, centered: true, onCancel: () => setRemovedDashboardId(''), title: "Remove this dashboard", okText: "Confirm", cancelText: "Cancel", closable: false, okButtonProps: { loading: isDashboardRemoving }, onOk: onRemoveDashboard, children: "Removing this dashboard will delete it permanently. Are you sure you want to perform this action?" })] }));
 });

package/es/components/organism/LeftMenu/components/HomeMenu/styled.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
 export declare const HomeMenuWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
-export declare const CreateButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
+export declare const CreateButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
 export declare const ModalWrapper: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;

package/es/components/organism/LeftMenu/components/HomeMenu/styled.js

@@ -1,9 +1,9 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Button, Flex } from '../../../../atoms';
-import { Modal } from '../../../../molecules';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { Modal } from '@antscorp/antsomi-ui/es/components/molecules/Modal';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const HomeMenuWrapper = styled(Flex) `
@@ -31,7 +31,7 @@ export const HomeMenuWrapper = styled(Flex) `
 export const CreateButton = styled(Button) `
   width: 106px;
   height: 37px !important;
-  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px !important;
+  border-radius: ${THEME?.token?.borderRadiusXL}px !important;
   box-shadow: none !important;
   font-size: 14px !important;
   flex-shrink: 0;

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.js

@@ -1,12 +1,3 @@
-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());
-    });
-};
 // Libraries
 import { useCallback, useMemo, useState } from 'react';
 // Constants
@@ -32,10 +23,10 @@ export const useHomeMenu = (props) => {
     const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
     const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
     const type = useLeftMenuContext(store => store.type);
-    const auth = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
-    const env = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.env; });
+    const auth = useLeftMenuContext(store => store.appConfig?.auth);
+    const env = useLeftMenuContext(store => store.appConfig?.env);
     const dashboardParams = useLeftMenuContext(store => store.dashboardParams);
-    const dashboardList = useLeftMenuContext(store => (store === null || store === void 0 ? void 0 : store.dashboardList) || []);
+    const dashboardList = useLeftMenuContext(store => store?.dashboardList || []);
     const onClickCreateDashboard = useLayoutStore(store => store.state.leftMenu.onClickCreateDashboard);
     const { flattenMenuPermission } = usePermission();
     const [removedDashboardId, setRemovedDashboardId] = useState('');
@@ -49,7 +40,10 @@ export const useHomeMenu = (props) => {
         const { optionKey, menuItemKey } = args;
         switch (optionKey) {
             case CONFIG_OPTIONS.CONFIGURE.key: {
-                const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: menuItemKey }));
+                const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, {
+                    ...auth,
+                    dashboardId: menuItemKey,
+                });
                 navigate(newPathName);
                 urlParams.set('type', HOME_REPORT_ROUTES.CONFIGURE);
                 replace({ search: urlParams.toString() });
@@ -62,21 +56,27 @@ export const useHomeMenu = (props) => {
                 break;
         }
     }, [auth, navigate, replace, urlParams]);
-    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(appMenuItem => {
-        var _a;
-        return getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: (_a = appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), ((item === null || item === void 0 ? void 0 : item.dashboardEditable)
+    const customChildren = useMemo(() => appMenuChildren?.map(appMenuItem => getMenuItem({
+        ...appMenuItem,
+        children: appMenuItem?.children?.map(item => ({
+            ...item,
+            ...(item?.dashboardEditable
                 ? { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }
-                : {})))) }));
-    }), [appMenuChildren, onOptionCallback]);
-    const customHoverChildren = useMemo(() => appHoverMenuChildren === null || appHoverMenuChildren === void 0 ? void 0 : appHoverMenuChildren.map(appMenuItem => getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children }))), [appHoverMenuChildren]);
+                : {}),
+        })),
+    })), [appMenuChildren, onOptionCallback]);
+    const customHoverChildren = useMemo(() => appHoverMenuChildren?.map(appMenuItem => getMenuItem({
+        ...appMenuItem,
+        children: appMenuItem?.children,
+    })), [appHoverMenuChildren]);
     const onCreateNewReport = useCallback(e => {
         if (onClickCreateDashboard) {
             onClickCreateDashboard(e);
         }
         else {
             urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
-            if (env !== ENV.DEV && origin !== (CDP_ROUTE === null || CDP_ROUTE === void 0 ? void 0 : CDP_ROUTE[`${env}`])) {
-                window.location.assign(`${CDP_ROUTE === null || CDP_ROUTE === void 0 ? void 0 : CDP_ROUTE[`${env}`]}${getGeneratePath(HOME_ROUTE, auth)}?${urlParams.toString()}`);
+            if (env !== ENV.DEV && origin !== CDP_ROUTE?.[`${env}`]) {
+                window.location.assign(`${CDP_ROUTE?.[`${env}`]}${getGeneratePath(HOME_ROUTE, auth)}?${urlParams.toString()}`);
             }
             else {
                 navigate(getGeneratePath(HOME_ROUTE, auth));
@@ -86,40 +86,50 @@ export const useHomeMenu = (props) => {
     }, [auth, env, navigate, onClickCreateDashboard, origin, replace, urlParams]);
     const onMenuClick = useCallback((key, _keyPath) => {
         if (type !== 'recommendation') {
-            const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: key }));
+            const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, {
+                ...auth,
+                dashboardId: key,
+            });
             if (newPathName !== pathname) {
                 navigate(newPathName);
             }
         }
     }, [type, auth, pathname, navigate]);
-    const onRemoveDashboard = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
+    const onRemoveDashboard = useCallback(async () => {
         if (removedDashboardId && auth && env) {
             const params = {
-                params: Object.assign(Object.assign({}, dashboardParams), { dashboardId: +removedDashboardId }),
-                auth: Object.assign(Object.assign({}, auth), { url: `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub` }),
+                params: {
+                    ...dashboardParams,
+                    dashboardId: +removedDashboardId,
+                },
+                auth: { ...auth, url: `${CDP_API?.[env]}/hub` },
             };
-            const response = yield removeDashboard(params);
-            if ((response === null || response === void 0 ? void 0 : response.code) === API_RESPONSE_CODE.SUCCESS) {
+            const response = await removeDashboard(params);
+            if (response?.code === API_RESPONSE_CODE.SUCCESS) {
                 let nextDashboardId;
                 for (const [index, item] of dashboardList.entries()) {
                     if (item.dashboardId === +removedDashboardId) {
-                        const newDashboardList = dashboardList === null || dashboardList === void 0 ? void 0 : dashboardList.filter(item => item.dashboardId !== +removedDashboardId);
+                        const newDashboardList = dashboardList?.filter(item => item.dashboardId !== +removedDashboardId);
                         nextDashboardId =
-                            ((_a = newDashboardList === null || newDashboardList === void 0 ? void 0 : newDashboardList[index + 1]) === null || _a === void 0 ? void 0 : _a.dashboardId) || ((_b = newDashboardList === null || newDashboardList === void 0 ? void 0 : newDashboardList[0]) === null || _b === void 0 ? void 0 : _b.dashboardId);
+                            newDashboardList?.[index + 1]?.dashboardId || newDashboardList?.[0]?.dashboardId;
                         break;
                     }
                 }
                 const newPathName = nextDashboardId
-                    ? getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: String(nextDashboardId) }))
-                    : getGeneratePath(HOME_ROUTE, Object.assign({}, auth));
+                    ? getGeneratePath(HOME_REPORT_ROUTES.DETAIL, {
+                        ...auth,
+                        dashboardId: String(nextDashboardId),
+                    })
+                    : getGeneratePath(HOME_ROUTE, {
+                        ...auth,
+                    });
                 if (newPathName !== pathname) {
                     navigate(newPathName);
                 }
                 setRemovedDashboardId('');
             }
         }
-    }), [
+    }, [
         removedDashboardId,
         auth,
         env,