@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/index.js

@@ -1,15 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { isNil } from 'lodash';
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 // Constants
 import { MenuItemImageWrapper, MaskImage } from './styled';
 // Utils
 import { renderMenuIcon } from '@antscorp/antsomi-ui/es/components/organism/LeftMenu/utils';
 export const MenuItemImage = memo(({ fallbackIcon, imageUrl, className }) => {
     const [isExistImage, setIsExistImage] = useState(true);
-    return (React.createElement(MenuItemImageWrapper, { align: "center", justify: "center", className: className }, isExistImage ? (React.createElement(React.Fragment, null,
-        React.createElement(MaskImage, { url: imageUrl }),
-        React.createElement("img", { src: imageUrl, alt: "", onError: () => setIsExistImage(false), style: { display: 'none' } }))) : isNil(fallbackIcon) ? null : (
-    // <Icon type={fallbackIcon} />
-    renderMenuIcon(fallbackIcon))));
+    return (_jsx(MenuItemImageWrapper, { align: "center", justify: "center", className: className, children: isExistImage ? (_jsxs(_Fragment, { children: [_jsx(MaskImage, { url: imageUrl }), _jsx("img", { src: imageUrl, alt: "", onError: () => setIsExistImage(false), style: { display: 'none' } })] })) : isNil(fallbackIcon) ? null : (
+        // <Icon type={fallbackIcon} />
+        renderMenuIcon(fallbackIcon)) }));
 });

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/styled.js

@@ -1,14 +1,13 @@
-var _a, _b;
 import styled from 'styled-components';
 // Constants
 import { ICON_SIZE } from '../../../../../constants';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Components
-import { Flex } from '../../../../../../../atoms';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 export const MaskImage = styled.div `
   width: ${ICON_SIZE}px;
   height: ${ICON_SIZE}px;
-  background: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+  background: ${THEME?.token?.bw8};
   mask-size: contain;
   mask-position: center center;
   mask-repeat: no-repeat;
@@ -19,7 +18,7 @@ export const MenuItemImageWrapper = styled(Flex) `
 
   &.isActive {
     ${MaskImage} {
-      background: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary} !important;
+      background: ${THEME?.token?.colorPrimary} !important;
     }
   }
 `;

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.js

@@ -1,6 +1,6 @@
-var _a;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 import Icon from '@antscorp/icons';
 import { isEmpty, isNil, uniq } from 'lodash';
 import classNames from 'classnames';
@@ -27,7 +27,7 @@ const noDashboardItem = {
     label: 'Click Create to make a dashboard',
     disabled: true,
     icon: null,
-    style: { fontSize: '10px', color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 },
+    style: { fontSize: '10px', color: THEME?.token?.bw8 },
 };
 const styles = {
     dropdownMenu: { width: '130px', padding: '8px 0' },
@@ -40,8 +40,8 @@ const styles = {
 };
 export const ChildMenu = memo(props => {
     const { items = [], onMenuClick } = props;
-    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 activeAppCode = useLeftMenuContext(store => store.activeAppCode);
     const menuItems = useLeftMenuContext(store => store.menuItems);
     const customItems = useLeftMenuContext(store => store.customItems);
@@ -54,7 +54,7 @@ export const ChildMenu = memo(props => {
     const { pathname, hash } = window.location;
     const { isPushDifferentDomain, getPath, getPathWithDomain, navigatePath } = useNavigatePath();
     useDeepCompareEffect(() => {
-        setOpenKeys((items === null || items === void 0 ? void 0 : items.map(item => item.key)) || []);
+        setOpenKeys(items?.map(item => item.key) || []);
     }, [items]);
     useDeepCompareEffect(() => {
         switch (type) {
@@ -81,7 +81,10 @@ export const ChildMenu = memo(props => {
                     /** Find parent key of active menu item to open it */
                     const parentKey = recursiveFindParentOfActiveItem({
                         activeMenuItem: menuActiveKey,
-                        menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => (Object.assign(Object.assign({}, getMenuItem(item)), { key: (item === null || item === void 0 ? void 0 : item.permission_code) || '' }))),
+                        menuItems: menuItems?.map(item => ({
+                            ...getMenuItem(item),
+                            key: item?.permission_code || '',
+                        })),
                     });
                     if (parentKey) {
                         setOpenKeys(prev => uniq([...prev, parentKey]));
@@ -98,13 +101,13 @@ export const ChildMenu = memo(props => {
                     auth,
                     env,
                 });
-                const activeMenuItemCode = activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.menu_item_code;
+                const activeMenuItemCode = activeMenuItem?.menu_item_code;
                 if (activeMenuItemCode && activeMenuItemCode !== currentActiveItem) {
                     setCurrentActiveItem(activeMenuItemCode);
                     // Find parent key of active menu item to open it
                     const parentKey = recursiveFindParentOfActiveItem({
                         activeMenuItem: activeMenuItemCode,
-                        menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => getMenuItem(item)),
+                        menuItems: menuItems?.map(item => getMenuItem(item)),
                     });
                     if (parentKey) {
                         setOpenKeys(prev => uniq([...prev, parentKey]));
@@ -135,23 +138,20 @@ export const ChildMenu = memo(props => {
     const onClick = e => {
         if (type === 'recommendation') {
             const [permissionCode, permissionCodePath] = (() => {
-                var _a;
                 if (e.key === 'WEB_PERSONALIZE') {
                     return ['WEB_PERSONALIZE-JOURNEY', ['WEB_PERSONALIZE-JOURNEY']];
                 }
-                const permissionCode = (_a = recursiveFindItemByKey({
+                const permissionCode = recursiveFindItemByKey({
                     activeKey: e.key,
                     menuItems: items || [],
-                })) === null || _a === void 0 ? void 0 : _a.permission_code;
+                })?.permission_code;
                 const permissionCodePath = (() => {
-                    var _a;
                     const array = [];
-                    (_a = e.keyPath) === null || _a === void 0 ? void 0 : _a.forEach(item => {
-                        var _a;
-                        const permissionCode = (_a = recursiveFindItemByKey({
+                    e.keyPath?.forEach(item => {
+                        const permissionCode = recursiveFindItemByKey({
                             activeKey: item,
                             menuItems: items || [],
-                        })) === null || _a === void 0 ? void 0 : _a.permission_code;
+                        })?.permission_code;
                         if (permissionCode)
                             array.push(permissionCode);
                     });
@@ -160,67 +160,55 @@ export const ChildMenu = memo(props => {
                 return [permissionCode, permissionCodePath];
             })();
             if (permissionCode)
-                onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(permissionCode, permissionCodePath);
+                onMenuClick?.(permissionCode, permissionCodePath);
             setCurrentActiveItem(e.key);
         }
         else {
-            onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);
+            onMenuClick?.(e.key, e.keyPath);
         }
     };
-    const customMenuItems = (args) => {
-        var _a;
-        return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
-            const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, disabled, style, optionCallback, } = item;
-            const isOwnerDashboardKey = key === HOME_MENU_ITEMS.DASHBOARD;
-            const renderLabel = () => (React.createElement(LabelWrapper, { gap: 10, align: "center", justify: "space-between", style: style },
-                React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
-                (options === null || options === void 0 ? void 0 : options.length) && type !== 'recommendation' && (React.createElement(OptionDropdownWrapper, { align: "center" },
-                    React.createElement(Dropdown, { menu: {
+    const customMenuItems = (args) => args?.items?.map(item => {
+        const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, disabled, style, optionCallback, } = item;
+        const isOwnerDashboardKey = key === HOME_MENU_ITEMS.DASHBOARD;
+        const renderLabel = () => (_jsxs(LabelWrapper, { gap: 10, align: "center", justify: "space-between", style: style, children: [_jsx(LabelCustom, { ellipsis: { tooltip: label }, children: label }), options?.length && type !== 'recommendation' && (_jsx(OptionDropdownWrapper, { align: "center", children: _jsx(Dropdown, { menu: {
                             items: options,
                             onClick: e => {
                                 e.domEvent.stopPropagation();
                                 e.domEvent.preventDefault();
-                                optionCallback === null || optionCallback === void 0 ? void 0 : optionCallback({ menuItemKey: key, optionKey: e.key });
+                                optionCallback?.({ menuItemKey: key, optionKey: e.key });
                             },
                             style: styles.dropdownMenu,
-                        }, trigger: ['click'] },
-                        React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: styles.dotIcon, onClick: e => {
+                        }, trigger: ['click'], children: _jsx(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: styles.dotIcon, onClick: e => {
                                 e.stopPropagation();
                                 e.preventDefault();
-                            } })))),
-                !(children === null || children === void 0 ? void 0 : children.length) && type === 'recommendation' && !!menu_item_path && (React.createElement("div", { className: "icon-link", onClick: () => {
+                            } }) }) })), !children?.length && type === 'recommendation' && !!menu_item_path && (_jsx("div", { className: "icon-link", onClick: () => {
                         navigatePath(menu_item_domain, menu_item_path, true);
-                    } },
-                    React.createElement(Icon, { type: "icon-ants-open-in-new-window" })))));
-            const renderIcon = () => {
-                var _a;
-                return !!icon || !!logo_url ? (React.createElement(Flex, { style: { flexShrink: 0 }, align: "center" }, !isNil(icon) ? (renderMenuIcon(icon)) : !isNil(logo_url) ? (React.createElement(MenuItemImage, { imageUrl: logo_url, fallbackIcon: (_a = args === null || args === void 0 ? void 0 : args.parent) === null || _a === void 0 ? void 0 : _a.icon, className: classNames({ isActive: currentActiveItem === key }) })) : null)) : null;
-            };
-            const renderTitle = () => !menu_item_path || type === 'recommendation' ? (renderLabel()) : (React.createElement("div", { className: "menu-link" }, renderLabel()));
-            let Label = (React.createElement(Flex, { gap: 5, align: "center", justify: "space-between", style: { height: '100%' } },
-                renderIcon(),
-                React.createElement(Flex, { style: styles.menuItemTitle, align: "center" }, renderTitle())));
-            // Check if type not recommendation then render with link wrapper
-            if (type !== 'recommendation' && !!menu_item_path) {
-                Label = isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("a", { href: getPathWithDomain(menu_item_domain, menu_item_path) }, Label)) : (React.createElement(Link, { to: getPath(menu_item_path, key) }, Label));
-            }
-            return {
-                key,
-                label: Label,
-                disabled,
-                children: customMenuItems({
-                    parent: item,
-                    items: isOwnerDashboardKey && isEmpty(children) ? [noDashboardItem] : children,
-                }),
-            };
-        });
-    };
-    return (React.createElement(MenuWrapper, null,
-        React.createElement(Menu, { motion: {
+                    }, children: _jsx(Icon, { type: "icon-ants-open-in-new-window" }) }))] }));
+        const renderIcon = () => !!icon || !!logo_url ? (_jsx(Flex, { style: { flexShrink: 0 }, align: "center", children: !isNil(icon) ? (renderMenuIcon(icon)) : !isNil(logo_url) ? (_jsx(MenuItemImage, { imageUrl: logo_url, fallbackIcon: args?.parent?.icon, className: classNames({ isActive: currentActiveItem === key }) })) : null })) : null;
+        const renderTitle = () => !menu_item_path || type === 'recommendation' ? (renderLabel()) : (_jsx("div", { className: "menu-link", children: renderLabel() }));
+        let Label = (_jsxs(Flex, { gap: 5, align: "center", justify: "space-between", style: { height: '100%' }, children: [renderIcon(), _jsx(Flex, { style: styles.menuItemTitle, align: "center", children: renderTitle() })] }));
+        // Check if type not recommendation then render with link wrapper
+        if (type !== 'recommendation' && !!menu_item_path) {
+            Label = isPushDifferentDomain(menu_item_domain, menu_item_path) ? (_jsx("a", { href: getPathWithDomain(menu_item_domain, menu_item_path), children: Label })) : (_jsx(Link, { to: getPath(menu_item_path, key), children: Label }));
+        }
+        return {
+            key,
+            label: Label,
+            disabled,
+            children: customMenuItems({
+                parent: item,
+                items: isOwnerDashboardKey && isEmpty(children) ? [noDashboardItem] : children,
+            }),
+        };
+    });
+    return (_jsx(MenuWrapper, { children: _jsx(Menu, { motion: {
                 motionAppear: false,
                 motionEnter: false,
                 motionLeave: false,
             }, selectedKeys: [currentActiveItem], defaultOpenKeys: [currentActiveItem], openKeys: uniq(openKeys), mode: "inline", items: customMenuItems({ items }), inlineIndent: 12, onOpenChange: openKeys => {
                 setOpenKeys(uniq(openKeys));
-            }, expandIcon: ({ isOpen }) => (React.createElement(Icon, { type: "icon-ants-expand-more", style: Object.assign(Object.assign({}, styles.expandIcon), { transform: `rotate(${isOpen ? '180deg' : '0deg'})` }) })), onClick: onClick })));
+            }, expandIcon: ({ isOpen }) => (_jsx(Icon, { type: "icon-ants-expand-more", style: {
+                    ...styles.expandIcon,
+                    transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
+                } })), onClick: onClick }) }));
 });

package/es/components/organism/LeftMenu/components/common/ChildMenu/styled.js

@@ -1,7 +1,8 @@
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Flex, Typography } from '../../../../../atoms';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms/Typography';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { bw8, borderRadiusXL, colorPrimary } = globalToken || {};

package/es/components/organism/LeftMenu/components/common/ChildMenu/utils.js

@@ -23,12 +23,12 @@ export const findActiveMenuItemByUrl = (args) => {
             const recursiveFindActiveItem = (items) => {
                 let activeItem;
                 for (const item of items) {
-                    if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
+                    if (!!item?.menu_item_path &&
                         url.includes(getComparePath(getGeneratePath(item.menu_item_path, auth)))) {
-                        activeItem = item === null || item === void 0 ? void 0 : item.menu_item_code;
+                        activeItem = item?.menu_item_code;
                         break;
                     }
-                    if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
+                    if (item?.children && item.children.length) {
                         const childActiveItem = recursiveFindActiveItem(item.children);
                         if (childActiveItem) {
                             activeItem = childActiveItem;
@@ -38,7 +38,7 @@ export const findActiveMenuItemByUrl = (args) => {
                 }
                 return activeItem;
             };
-            activeItem = recursiveFindActiveItem((menuItem === null || menuItem === void 0 ? void 0 : menuItem.children) || []);
+            activeItem = recursiveFindActiveItem(menuItem?.children || []);
             if (activeItem)
                 break;
         }
@@ -60,19 +60,18 @@ export const findActiveMenuItemByUrl = (args) => {
  * @returns {string | undefined} The key of the parent menu item or undefined if not found.
  */
 export const recursiveFindParentOfActiveItem = (args) => {
-    var _a;
     try {
         const { activeMenuItem, menuItems } = args;
         let parentKey;
         for (const item of menuItems) {
-            const isHasActiveMenuItem = !!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.find(child => child.key === activeMenuItem));
+            const isHasActiveMenuItem = !!item?.children?.find(child => child.key === activeMenuItem);
             if (isHasActiveMenuItem) {
                 parentKey = item.key;
                 break;
             }
             const findNestedParentKey = recursiveFindParentOfActiveItem({
                 activeMenuItem,
-                menuItems: (item === null || item === void 0 ? void 0 : item.children) || [],
+                menuItems: item?.children || [],
             });
             if (findNestedParentKey) {
                 parentKey = findNestedParentKey;
@@ -98,7 +97,7 @@ export const recursiveFindItemByKey = (args) => {
             }
             const childActiveItem = recursiveFindItemByKey({
                 activeKey,
-                menuItems: (item === null || item === void 0 ? void 0 : item.children) || [],
+                menuItems: item?.children || [],
             });
             if (childActiveItem)
                 return childActiveItem;
@@ -121,11 +120,11 @@ export const findItemByPermissionCode = (args) => {
                 if (item.permission_code === permissionCode) {
                     matchedItems.push(item);
                 }
-                recursiveFindItemByPermissionCode((item === null || item === void 0 ? void 0 : item.children) || []);
+                recursiveFindItemByPermissionCode(item?.children || []);
             }
         };
         recursiveFindItemByPermissionCode(menuItems);
-        return matchedItems === null || matchedItems === void 0 ? void 0 : matchedItems.pop();
+        return matchedItems?.pop();
     }
     catch (error) {
         handleError(error, {

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

@@ -56,7 +56,7 @@ export const useLeftMenu = (props) => {
         if (type === 'recommendation') {
             setLeftMenuContextState({ customActiveCurrentKey: key });
         }
-        onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [...keyPath, customActiveAppKey]);
+        onMenuItemClick?.(key, [...keyPath, customActiveAppKey]);
     }, [customActiveAppKey, onMenuItemClick, setLeftMenuContextState, type]);
     useDeepCompareEffect(() => {
         if (defaultExpandMenu === undefined) {
@@ -92,7 +92,7 @@ export const useLeftMenu = (props) => {
                 setLeftMenuContextState({
                     customActiveAppKey: findActiveAppCodeByChild({
                         activeCurrentKey: mappedActiveKey || '',
-                        menuItems: mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.map(item => recursiveGetMenuItemByPermission(item)),
+                        menuItems: mappingChildrenMenu?.map(item => recursiveGetMenuItemByPermission(item)),
                         isRecommendation: true,
                     }) || '',
                     customActiveCurrentKey: mappedActiveKey,
@@ -113,7 +113,6 @@ export const useLeftMenu = (props) => {
     ]);
     // Change list menu children when hovering or activating items, giving priority to hovering items
     useDeepCompareEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
         const appActiveKey = ['customization', 'recommendation'].includes(`${type}`)
             ? customActiveAppKey
             : activeAppCode;
@@ -121,9 +120,9 @@ export const useLeftMenu = (props) => {
             case 'customization': {
                 setLeftMenuContextState({
                     customItems: items,
-                    customMenuChildren: ((_a = items === null || items === void 0 ? void 0 : items.find(item => item.key === appActiveKey)) === null || _a === void 0 ? void 0 : _a.children) || [],
+                    customMenuChildren: items?.find(item => item.key === appActiveKey)?.children || [],
                     customHoverMenuChildren: state.hoverItem
-                        ? ((_b = items === null || items === void 0 ? void 0 : items.find(item => item.key === state.hoverItem)) === null || _b === void 0 ? void 0 : _b.children) || []
+                        ? items?.find(item => item.key === state.hoverItem)?.children || []
                         : [],
                 });
                 break;
@@ -131,10 +130,11 @@ export const useLeftMenu = (props) => {
             case 'recommendation': {
                 setLeftMenuContextState({
                     menuItems: mappingChildrenMenu,
-                    appMenuChildren: ((_c = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === appActiveKey)) === null || _c === void 0 ? void 0 : _c.children) ||
+                    appMenuChildren: mappingChildrenMenu?.find(item => item.permission_code === appActiveKey)?.children ||
                         [],
                     appHoverMenuChildren: state.hoverItem
-                        ? ((_d = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === state.hoverItem)) === null || _d === void 0 ? void 0 : _d.children) || []
+                        ? mappingChildrenMenu?.find(item => item.permission_code === state.hoverItem)
+                            ?.children || []
                         : [],
                 });
                 break;
@@ -143,10 +143,11 @@ export const useLeftMenu = (props) => {
                 if (isArray(mappingChildrenMenu)) {
                     setLeftMenuContextState({
                         menuItems: mappingChildrenMenu,
-                        appMenuChildren: ((_e = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appActiveKey)) === null || _e === void 0 ? void 0 : _e.children) ||
+                        appMenuChildren: mappingChildrenMenu?.find(item => item.menu_item_code === appActiveKey)?.children ||
                             [],
                         appHoverMenuChildren: state.hoverItem
-                            ? ((_f = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === state.hoverItem)) === null || _f === void 0 ? void 0 : _f.children) || []
+                            ? mappingChildrenMenu?.find(item => item.menu_item_code === state.hoverItem)
+                                ?.children || []
                             : [],
                     });
                 }
@@ -189,20 +190,20 @@ export const useLeftMenu = (props) => {
     useEffect(() => {
         if (!['customization', 'recommendation'].includes(`${type}`)) {
             // Callback function using at Layout when url change
-            onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission, menuListPermission);
+            onActiveMenuCodeChange?.(activeItemPath, flattenMenuPermission, menuListPermission);
         }
     }, [activeItemPath, flattenMenuPermission, menuListPermission, onActiveMenuCodeChange, type]);
-    useEffect(() => clearTimeout(timeoutPopover === null || timeoutPopover === void 0 ? void 0 : timeoutPopover.current), [timeoutPopover]);
+    useEffect(() => clearTimeout(timeoutPopover?.current), [timeoutPopover]);
     const onShowPopover = useCallback((hoverItem) => {
         if (timeoutPopover)
-            clearTimeout(timeoutPopover === null || timeoutPopover === void 0 ? void 0 : timeoutPopover.current);
+            clearTimeout(timeoutPopover?.current);
         if (!state.isShowPopover)
-            setState(prev => (Object.assign(Object.assign({}, prev), { isShowPopover: true })));
+            setState(prev => ({ ...prev, isShowPopover: true }));
         if (hoverItem)
-            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem })));
+            setState(prev => ({ ...prev, hoverItem }));
     }, [state.isShowPopover]);
     const onToggleChildMenu = useCallback(() => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
+        setState(prev => ({ ...prev, isExpandMenu: !prev.isExpandMenu }));
     }, []);
     const onMouseEnter = useCallback((key) => {
         if (state.hoverItem !== key) {
@@ -211,7 +212,7 @@ export const useLeftMenu = (props) => {
     }, [state.hoverItem, onShowPopover]);
     const onMouseLeave = useCallback(() => {
         timeoutPopover.current = setTimeout(() => {
-            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '', isShowPopover: false })));
+            setState(prev => ({ ...prev, hoverItem: '', isShowPopover: false }));
         }, 200);
     }, []);
     const onHoverMenuBar = useCallback(() => {
@@ -230,8 +231,8 @@ export const useLeftMenu = (props) => {
             // Flatten the tree structure of item.children into a single array, filtering out items that have children
             const flattenChildMenu = flatTree(item.children, 'children').filter(item => !item.children);
             // Find the first child menu item that matches the permission_code or fallback to the first item in the array or the original item
-            const matchedChildMenu = (flattenChildMenu === null || flattenChildMenu === void 0 ? void 0 : flattenChildMenu.find(child => child.permission_code === permission_code)) ||
-                (flattenChildMenu === null || flattenChildMenu === void 0 ? void 0 : flattenChildMenu[0]) ||
+            const matchedChildMenu = flattenChildMenu?.find(child => child.permission_code === permission_code) ||
+                flattenChildMenu?.[0] ||
                 item;
             // If a matching child menu item is found, update navigateInfo with its domain and path
             if (matchedChildMenu) {

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

@@ -24,17 +24,16 @@ export const useNavigatePath = () => {
     const oidParam = hasRole ? urlParams.get('oid') : null;
     const searchParams = oidParam ? `?oid=${oidParam}` : '';
     const isPushDifferentDomain = useCallback((domain, path) => {
-        var _a, _b, _c, _d, _e, _f;
         if (isDev)
             return false;
-        const customDomain = domain !== null && domain !== void 0 ? domain : '';
-        const splitNextPath = (path === null || path === void 0 ? void 0 : path.split('#')) || ['', ''];
-        const isCurrentPathIncludeHash = (_b = (_a = window.location) === null || _a === void 0 ? void 0 : _a.href) === null || _b === void 0 ? void 0 : _b.includes('#');
-        const isNextPathIncludeHash = path === null || path === void 0 ? void 0 : path.includes('#');
-        let currentDomain = (_c = window.location) === null || _c === void 0 ? void 0 : _c.origin;
+        const customDomain = domain ?? '';
+        const splitNextPath = path?.split('#') || ['', ''];
+        const isCurrentPathIncludeHash = window.location?.href?.includes('#');
+        const isNextPathIncludeHash = path?.includes('#');
+        let currentDomain = window.location?.origin;
         let nextDomain = customDomain;
         if (isCurrentPathIncludeHash) {
-            currentDomain = ((_f = (_e = (_d = window.location.href) === null || _d === void 0 ? void 0 : _d.split) === null || _e === void 0 ? void 0 : _e['#']) === null || _f === void 0 ? void 0 : _f[0]) || '';
+            currentDomain = window.location.href?.split?.['#']?.[0] || '';
         }
         if (isNextPathIncludeHash) {
             nextDomain = `${customDomain}${splitNextPath[0]}`;
@@ -42,12 +41,11 @@ export const useNavigatePath = () => {
         return currentDomain !== nextDomain;
     }, [isDev]);
     const getPath = useCallback((path, itemKey) => {
-        var _a;
-        if ((path === null || path === void 0 ? void 0 : path.includes('#')) && !KEEP_HASH_PATH_DEV.includes(`${itemKey}`)) {
-            const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
+        if (path?.includes('#') && !KEEP_HASH_PATH_DEV.includes(`${itemKey}`)) {
+            const customPath = path?.split('#')?.[1] || '';
             return getGeneratePath(customPath, auth);
         }
-        return getGeneratePath(`${path !== null && path !== void 0 ? path : ''}${searchParams}`, auth);
+        return getGeneratePath(`${path ?? ''}${searchParams}`, auth);
     }, [auth, searchParams]);
     const getPathWithDomain = useCallback((domain, path) => {
         const newDomain = isNil(domain) || env === ENV.DEV ? '' : domain;

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

@@ -25,38 +25,38 @@ export const usePermission = () => {
         args: {
             auth: {
                 // token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || auth?.token,
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                token: auth?.token,
                 // url: 'https://sandbox-permission.ants.vn',
                 url: PERMISSION_API, // NOTE: Hard for sandbox, development
-                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
-                accountId: auth === null || auth === void 0 ? void 0 : auth.accountId,
+                portalId: auth?.portalId,
+                userId: auth?.userId,
+                accountId: auth?.accountId,
             },
             params: {
                 type: 'menu-item-permission',
             },
         },
         options: {
-            enabled: !!(auth === null || auth === void 0 ? void 0 : auth.userId) && !!auth.portalId,
+            enabled: !!auth?.userId && !!auth.portalId,
         },
     });
     const { data: userPermission } = useCheckUserPermission({
         apiConfig: {
-            userId: +((auth === null || auth === void 0 ? void 0 : auth.userId) || 0),
-            accountId: +((auth === null || auth === void 0 ? void 0 : auth.accountId) || 0),
-            portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
-            token: auth === null || auth === void 0 ? void 0 : auth.token,
+            userId: +(auth?.userId || 0),
+            accountId: +(auth?.accountId || 0),
+            portalId: auth?.portalId,
+            token: auth?.token,
             languageCode,
-            domain: CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env],
+            domain: CDP_API?.[env],
         },
     });
     const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
         args: {
             auth: {
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
-                url: `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub`,
-                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                token: auth?.token,
+                url: `${CDP_API?.[env]}/hub`,
+                portalId: auth?.portalId,
+                userId: auth?.userId,
             },
             params: {
                 objectType,
@@ -66,15 +66,15 @@ export const usePermission = () => {
             },
         },
     });
-    const { ownedDashboard = [], sharedDashboard = [] } = (dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.entries) || {};
+    const { ownedDashboard = [], sharedDashboard = [] } = dashboardData?.entries || {};
     const dashboardList = useMemo(() => uniqBy([...ownedDashboard, ...sharedDashboard], 'dashboardId'), [ownedDashboard, sharedDashboard]);
     const { data: destinationChannelGen2 } = useGetDestinationChannel({
         args: {
             auth: {
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                token: auth?.token,
                 url: env ? `${CDP_API[env]}/hub` : '',
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
-                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+                userId: auth?.userId,
+                portalId: auth?.portalId,
             },
             params: {
                 objectType: 'GEN2_DESTINATION',
@@ -85,10 +85,10 @@ export const usePermission = () => {
     const { data: destinationChannel } = useGetDestinationChannel({
         args: {
             auth: {
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                token: auth?.token,
                 url: env ? `${CDP_API[env]}/hub` : '',
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
-                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+                userId: auth?.userId,
+                portalId: auth?.portalId,
             },
             params: {
                 objectType: 'CHANNEL_INTERGRATION',
@@ -99,10 +99,10 @@ export const usePermission = () => {
     const { data: menuListPermission } = useGetListMenuPermission({
         args: {
             auth: {
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                token: auth?.token,
                 url: permissionDomain || PERMISSION_API,
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
-                accountId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                userId: auth?.userId,
+                accountId: auth?.userId,
             },
             params: {
                 type: 'list-app',
@@ -113,39 +113,39 @@ export const usePermission = () => {
         },
     });
     const flattenMenuPermission = flattenMenuArray(menuListPermission || [], 'childs');
-    const permissionMenu = useMemo(() => recursivePermissionMenu(sortBy((menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [], ['level_position']), flattenMenuPermission), [menuList === null || menuList === void 0 ? void 0 : menuList.rows, flattenMenuPermission]);
+    const permissionMenu = useMemo(() => recursivePermissionMenu(sortBy(menuList?.rows || [], ['level_position']), flattenMenuPermission), [menuList?.rows, flattenMenuPermission]);
     const mappingChildrenMenu = useMemo(() => getMappingAppChildren({
         menuList: permissionMenu,
         auth,
         dashboardList,
-        destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
-        destinationChannelGen2Entries: destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
+        destinationChannelEntries: destinationChannel?.entries,
+        destinationChannelGen2Entries: destinationChannelGen2?.entries,
         isRecommendation: type === 'recommendation',
         userPermission,
     }), [
         auth,
         dashboardList,
-        destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
-        destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
+        destinationChannel?.entries,
+        destinationChannelGen2?.entries,
         type,
         permissionMenu,
         userPermission,
     ]);
     const mappingChildrenMenuWithNoPermission = useMemo(() => getMappingAppChildren({
-        menuList: recursiveSortBy((menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [], 'children', ['level_position']) || [],
+        menuList: recursiveSortBy(menuList?.rows || [], 'children', ['level_position']) || [],
         auth,
         dashboardList,
-        destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
-        destinationChannelGen2Entries: destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
+        destinationChannelEntries: destinationChannel?.entries,
+        destinationChannelGen2Entries: destinationChannelGen2?.entries,
         isRecommendation: type === 'recommendation',
         userPermission,
     }), [
         auth,
         dashboardList,
-        destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
-        destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
+        destinationChannel?.entries,
+        destinationChannelGen2?.entries,
         type,
-        menuList === null || menuList === void 0 ? void 0 : menuList.rows,
+        menuList?.rows,
         userPermission,
     ]);
     const activeItemPath = useMemo(() => {