@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/template/Layout/Layout.js

@@ -1,25 +1,6 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import AntsProcessingNotification from '@antscorp/processing-notification';
 import { cloneDeep, get, isString, merge, omit } from 'lodash';
@@ -33,11 +14,12 @@ import { useLocation, useParams } from 'react-router-dom';
 // Styled
 import { ChildrenWrapper, ContentWrapper, LayoutLoading, LayoutWrapper, NotificationWrapper, } from './styled';
 // Components
-import { LeftMenu } from '../../organism';
-import { Flex } from '../../atoms';
-import { HeaderV2, AccessDenied } from '../../molecules';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+import { HeaderV2 } from '@antscorp/antsomi-ui/es/components/molecules/HeaderV2';
+import { AccessDenied } from '@antscorp/antsomi-ui/es/components/molecules/AccessDenied';
+import { LeftMenu } from '@antscorp/antsomi-ui/es/components/organism/LeftMenu';
 // Contexts
-import { AppConfigContext } from '../../..';
+import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers/AppConfigProvider';
 // Constants
 import { APP_CACHE_PARAMS, APP_CODES, APP_IAM_DOMAIN, APP_PERMISSION_DOMAIN, CDP_ROUTE, IAM_API, PERMISSION_API, PORTALS_IDS, SOCKET_API, UOGS_PREFIX, } from '../../../constants';
 import { ENV } from '@antscorp/antsomi-ui/es/config';
@@ -52,9 +34,8 @@ import { RecommendationWorkspace } from './components';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const Layout = memo(props => {
-    var _a;
     const { leftMenuProps, headerProps = {}, workspaceProps, contentWrapperProps, processingNotificationProps, children, onActiveMenuChange, } = props;
-    const _b = workspaceProps || {}, { workspaceContentProps } = _b, restOfWorkspaceProps = __rest(_b, ["workspaceContentProps"]);
+    const { workspaceContentProps, ...restOfWorkspaceProps } = workspaceProps || {};
     // Hooks
     const appConfig = useContextSelector(AppConfigContext, state => state);
     const { auth, languageCode, appCode, permissionDomain: configPermissionDomain, iamDomain: configIamDomain, env, } = appConfig;
@@ -90,9 +71,8 @@ export const Layout = memo(props => {
         characterDataOldValue: true,
     });
     // Memo
-    const showOnlyContent = useDeepCompareMemo(() => { var _a; return (_a = props.onlyContent) !== null && _a !== void 0 ? _a : onlyContent; }, [onlyContent, props.onlyContent]);
+    const showOnlyContent = useDeepCompareMemo(() => props.onlyContent ?? onlyContent, [onlyContent, props.onlyContent]);
     const permissionDomain = useDeepCompareMemo(() => {
-        var _a;
         /**
          * Priority for permission domain
          */
@@ -108,13 +88,12 @@ export const Layout = memo(props => {
         switch (appCode) {
             case DATAFLOWS:
             case APP_ANTALYSER:
-                return ((_a = APP_PERMISSION_DOMAIN[appCode]) === null || _a === void 0 ? void 0 : _a[env || 'development']) || PERMISSION_API;
+                return APP_PERMISSION_DOMAIN[appCode]?.[env || 'development'] || PERMISSION_API;
             default:
                 return PERMISSION_API;
         }
     }, [appCode, configPermissionDomain, env, portalId]);
     const iamDomain = useMemo(() => {
-        var _a;
         if (configIamDomain)
             return configIamDomain;
         /**
@@ -126,32 +105,66 @@ export const Layout = memo(props => {
         switch (appCode) {
             case DATAFLOWS:
             case APP_ANTALYSER:
-                return ((_a = APP_IAM_DOMAIN[appCode]) === null || _a === void 0 ? void 0 : _a[env || 'development']) || IAM_API;
+                return APP_IAM_DOMAIN[appCode]?.[env || 'development'] || IAM_API;
             default:
                 return IAM_API;
         }
     }, [appCode, configIamDomain, env, portalId]);
-    const initialHeaderProps = useDeepCompareMemo(() => {
-        var _a, _b;
-        return (Object.assign(Object.assign({ className: 'layout-header', useURLParam: true }, headerProps), { config: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.config), { permissionDomain,
-                iamDomain }), helpConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig), { configs: Object.assign(Object.assign({}, (_a = headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig) === null || _a === void 0 ? void 0 : _a.configs), { appCode: 'SANDBOX_MARKETING', avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png', config: {
-                        p_timezone: 'Asia/Singapore',
-                        api_pid: 33167,
-                        p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
-                        embeddedData: {},
-                        INSIGHT_U_OGS: 'uogs',
-                    } }) }), accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: appCode || 'APP_CUSTOMER_360' }), accountSelection: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection), { show: !!((_b = headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection) === null || _b === void 0 ? void 0 : _b.show) && showAccountSelection }) }));
-    }, [headerProps, iamDomain, permissionDomain, showAccountSelection]);
-    const mergeHeaderProps = useDeepCompareMemo(() => merge(cloneDeep(initialHeaderProps), Object.assign(Object.assign({}, header), { pageTitle: (header === null || header === void 0 ? void 0 : header.pageTitle) || activePageTitle })), [initialHeaderProps, header, activePageTitle]);
-    const _c = useDeepCompareMemo(() => merge(cloneDeep(contentWrapperProps), cloneDeep(contentWrapper)), [contentWrapperProps, contentWrapper]), { noPadding, showNotification = true } = _c, mergeContentWrapperProps = __rest(_c, ["noPadding", "showNotification"]);
+    const initialHeaderProps = useDeepCompareMemo(() => ({
+        className: 'layout-header',
+        useURLParam: true,
+        ...headerProps,
+        config: {
+            ...headerProps?.config,
+            permissionDomain,
+            iamDomain,
+        },
+        helpConfig: {
+            ...headerProps?.helpConfig,
+            configs: {
+                ...headerProps?.helpConfig?.configs,
+                appCode: 'SANDBOX_MARKETING',
+                avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png',
+                config: {
+                    p_timezone: 'Asia/Singapore',
+                    api_pid: 33167,
+                    p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
+                    embeddedData: {},
+                    INSIGHT_U_OGS: 'uogs',
+                },
+            },
+        },
+        accountSharingConfig: {
+            ...headerProps?.accountSharingConfig,
+            u_ogs: 'uogs',
+            appCode: appCode || 'APP_CUSTOMER_360',
+        },
+        accountSelection: {
+            ...headerProps?.accountSelection,
+            show: !!headerProps?.accountSelection?.show && showAccountSelection,
+        },
+    }), [headerProps, iamDomain, permissionDomain, showAccountSelection]);
+    const mergeHeaderProps = useDeepCompareMemo(() => merge(cloneDeep(initialHeaderProps), {
+        ...header,
+        pageTitle: header?.pageTitle || activePageTitle,
+    }), [initialHeaderProps, header, activePageTitle]);
+    const { noPadding, showNotification = true, ...mergeContentWrapperProps } = useDeepCompareMemo(() => merge(cloneDeep(contentWrapperProps), cloneDeep(contentWrapper)), [contentWrapperProps, contentWrapper]);
     const mergeWorkSpaceProps = useDeepCompareMemo(() => merge(cloneDeep(restOfWorkspaceProps), omit(workspace, 'workspaceContentProps')), [restOfWorkspaceProps, workspace]);
-    const _d = useDeepCompareMemo(() => merge(cloneDeep(leftMenuProps), cloneDeep(leftMenu)), [leftMenuProps, leftMenu, appConfig]), { className: leftMenuClassName, show: showLeftMenu = true } = _d, mergeLeftMenuProps = __rest(_d, ["className", "show"]);
-    const leftMenuAppConfig = useDeepCompareMemo(() => omit(Object.assign(Object.assign({}, appConfig), { permissionDomain }), ['setAppConfig']), [appConfig]);
-    const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [permissionDomain, token, userId, languageCode, portalId, processingNotificationProps]);
+    const { className: leftMenuClassName, show: showLeftMenu = true, ...mergeLeftMenuProps } = useDeepCompareMemo(() => merge(cloneDeep(leftMenuProps), cloneDeep(leftMenu)), [leftMenuProps, leftMenu, appConfig]);
+    const leftMenuAppConfig = useDeepCompareMemo(() => omit({ ...appConfig, permissionDomain }, ['setAppConfig']), [appConfig]);
+    const antsProcessingNotificationConfig = useMemo(() => ({
+        permissionDomain,
+        socketDomain: SOCKET_API,
+        token,
+        accountId: userId,
+        userId,
+        lang: languageCode,
+        networkId: portalId,
+        ...processingNotificationProps,
+    }), [permissionDomain, token, userId, languageCode, portalId, processingNotificationProps]);
     const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList, menuListPermission) => {
-        var _a;
         // Set menuActiveArr for CDP app to tracking
-        if (window && window[APP_CACHE_PARAMS] && (activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length)) {
+        if (window && window[APP_CACHE_PARAMS] && activeItemPath?.length) {
             const menuActiveArr = activeItemPath.map((item, index) => ({
                 code: item.menu_item,
                 label: item.menu_item_name,
@@ -160,13 +173,13 @@ export const Layout = memo(props => {
             }));
             window[APP_CACHE_PARAMS].menuActiveArr = menuActiveArr;
         }
-        const activeMenuItem = activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath[(activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length) - 1];
+        const activeMenuItem = activeItemPath?.[activeItemPath?.length - 1];
         const { menu_item_code, page_title, menu_item_name, permission_code } = activeMenuItem || {};
         setActivePageTitle(page_title
-            ? i18nInstance.t((_a = translations.leftMenu.pageTitle) === null || _a === void 0 ? void 0 : _a[`${page_title}`]).toString()
+            ? i18nInstance.t(translations.leftMenu.pageTitle?.[`${page_title}`]).toString()
             : menu_item_name);
         setActiveMenu(activeMenuItem);
-        onActiveMenuChange === null || onActiveMenuChange === void 0 ? void 0 : onActiveMenuChange(menu_item_code);
+        onActiveMenuChange?.(menu_item_code);
         const hasRole = hasSelectAccountPermission({
             activeItemPath: cloneDeep(activeItemPath),
             flattenPermissionList,
@@ -215,14 +228,19 @@ export const Layout = memo(props => {
     // Handle access denied
     const onClickSwitchAccount = useCallback(() => {
         // Remove cookie when switch account
-        removeCookie(`${UOGS_PREFIX}${portalId}`, Object.assign(Object.assign({}, (env !== ENV.DEV && {
-            domain: `.${origin.split('.').splice(-2).join('.')}`,
-        })), { path: '/', sameSite: 'none', secure: true }));
+        removeCookie(`${UOGS_PREFIX}${portalId}`, {
+            ...(env !== ENV.DEV && {
+                domain: `.${origin.split('.').splice(-2).join('.')}`,
+            }),
+            path: '/',
+            sameSite: 'none',
+            secure: true,
+        });
         // Redirect to login page
         navigate('/login');
     }, [env, portalId, navigate, removeCookie]);
-    const onClickRequestAccess = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        const canvas = yield html2canvas(document.body, {
+    const onClickRequestAccess = useCallback(async () => {
+        const canvas = await html2canvas(document.body, {
             allowTaint: true,
             useCORS: true,
             scale: 2,
@@ -236,7 +254,7 @@ export const Layout = memo(props => {
             helpType: 'ISSUE',
             helpInfo: {
                 feature: 'other_feature',
-                title: `Request Access to ${activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.menu_item_name}`,
+                title: `Request Access to ${activeMenu?.menu_item_name}`,
                 message: `
           I want to be granted permission to access this feature. <br /> <br />
 
@@ -257,7 +275,7 @@ export const Layout = memo(props => {
             },
         };
         window.postMessage(messageContent);
-    }), [activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.menu_item_name, portalId, userId]);
+    }, [activeMenu?.menu_item_name, portalId, userId]);
     // Handle callback processing notification
     const handleCallbackNotify = useCallback((type, data) => {
         // If has callback from props then call it and return
@@ -292,22 +310,14 @@ export const Layout = memo(props => {
             window.location.assign(`${CDP_ROUTE[env || 'development']}/gen2/${portalId}/dashboard/recommendation`);
         }
     }, [env, portalId]);
-    return (React.createElement(LayoutWrapper, { showLeftMenu: !!showLeftMenu },
-        React.createElement(Helmet, null,
-            React.createElement("meta", { charSet: "utf-8" }),
-            React.createElement("title", null, (header === null || header === void 0 ? void 0 : header.browserTitle) ||
-                ((header === null || header === void 0 ? void 0 : header.pageTitle)
-                    ? isString(header === null || header === void 0 ? void 0 : header.pageTitle)
-                        ? header === null || header === void 0 ? void 0 : header.pageTitle
-                        : ''
-                    : activePageTitle))),
-        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { show: !showOnlyContent, showLogo: !showLeftMenu, onCLickLogo: onCLickLogo })),
-        React.createElement(Flex, { className: "layout-body" },
-            React.createElement(LeftMenu, Object.assign({ show: showLeftMenu && !showOnlyContent, className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { customization: Object.assign(Object.assign({}, mergeLeftMenuProps.customization), { 
-                    // If user has access denied, disable expandable
-                    showButtonExpand: !isAccessDenied && ((_a = mergeLeftMenuProps.customization) === null || _a === void 0 ? void 0 : _a.showButtonExpand) }), appConfig: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange })),
-            React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent, "$showOnlyContent": showOnlyContent }, mergeContentWrapperProps), (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.menu_item_code) === HOME_MENU_ITEMS.RECOMMENDATION ? (React.createElement("div", { className: "layout-body__content" },
-                React.createElement(RecommendationWorkspace, null))) : (React.createElement("div", Object.assign({ className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }, mergeWorkSpaceProps), isLoadingLayout ? (React.createElement(LayoutLoading, { spinning: true })) : (React.createElement(React.Fragment, null,
-                React.createElement(NotificationWrapper, { className: "process-notification", ref: notificationWrapperRef }, showNotification && (React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig, { callback: handleCallbackNotify })))),
-                React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps), isAccessDenied ? (React.createElement(AccessDenied, { onClickRequestAccess: onClickRequestAccess, onClickSwitchAccount: onClickSwitchAccount })) : (React.createElement("div", null, children)))))))))));
+    return (_jsxs(LayoutWrapper, { showLeftMenu: !!showLeftMenu, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: header?.browserTitle ||
+                            (header?.pageTitle
+                                ? isString(header?.pageTitle)
+                                    ? header?.pageTitle
+                                    : ''
+                                : activePageTitle) })] }), _jsx(HeaderV2, { ...mergeHeaderProps, show: !showOnlyContent, showLogo: !showLeftMenu, onCLickLogo: onCLickLogo }), _jsxs(Flex, { className: "layout-body", children: [_jsx(LeftMenu, { show: showLeftMenu && !showOnlyContent, className: `layout-body__menu ${leftMenuClassName}`, ...mergeLeftMenuProps, customization: {
+                            ...mergeLeftMenuProps.customization,
+                            // If user has access denied, disable expandable
+                            showButtonExpand: !isAccessDenied && mergeLeftMenuProps.customization?.showButtonExpand,
+                        }, appConfig: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange }), _jsx(ContentWrapper, { "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent, "$showOnlyContent": showOnlyContent, ...mergeContentWrapperProps, children: activeMenu?.menu_item_code === HOME_MENU_ITEMS.RECOMMENDATION ? (_jsx("div", { className: "layout-body__content", children: _jsx(RecommendationWorkspace, {}) })) : (_jsx("div", { className: `layout-body__content ${workspaceProps?.className || ''}`, ...mergeWorkSpaceProps, children: isLoadingLayout ? (_jsx(LayoutLoading, { spinning: true })) : (_jsxs(_Fragment, { children: [_jsx(NotificationWrapper, { className: "process-notification", ref: notificationWrapperRef, children: showNotification && (_jsx(AntsProcessingNotification, { ...antsProcessingNotificationConfig, callback: handleCallbackNotify })) }), _jsx(ChildrenWrapper, { ...workspaceContentProps, children: isAccessDenied ? (_jsx(AccessDenied, { onClickRequestAccess: onClickRequestAccess, onClickSwitchAccount: onClickSwitchAccount })) : (_jsx("div", { children: children })) })] })) })) })] })] }));
 }, (prevProps, nextProps) => isEqual(prevProps, nextProps));

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/components/OldLeftMenu/index.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { useState, memo, useLayoutEffect, useMemo } from 'react';
+import { useState, memo, useLayoutEffect, useMemo } from 'react';
 import { Menu, Typography } from 'antd';
 import { omit, orderBy, uniq } from 'lodash';
 import Icon from '@antscorp/icons';
@@ -40,10 +41,10 @@ export const OldLeftMenu = memo(props => {
     const { data: menuListPermission } = useGetListMenuPermission({
         args: {
             auth: {
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                token: auth?.token,
                 url: 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',
@@ -54,9 +55,8 @@ export const OldLeftMenu = memo(props => {
         },
     });
     const parentKeys = useMemo(() => {
-        var _a;
         if (mappedActiveKey.includes('DATASOURCES')) {
-            return (_a = mappedActiveKey === null || mappedActiveKey === void 0 ? void 0 : mappedActiveKey.split('-')) === null || _a === void 0 ? void 0 : _a[1];
+            return mappedActiveKey?.split('-')?.[1];
         }
         return recursiveFindParentOfActiveItem({
             activeMenuItem: mappedActiveKey,
@@ -65,33 +65,29 @@ export const OldLeftMenu = memo(props => {
     }, [mappedActiveKey, menuListPermission]);
     useLayoutEffect(() => setOpenKeys(parentKeys ? [parentKeys] : []), [parentKeys]);
     const onMenuClick = e => {
-        onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(e.key, uniq(e.keyPath));
+        onMenuItemClick?.(e.key, uniq(e.keyPath));
     };
     const renderMenu = () => {
-        var _a;
         const recursiveGetMenuItem = (featureMenuPermission, parentKey) => {
             const { app_code, menu_code, app_name = '', menu_name = '', icon, childs, } = featureMenuPermission;
             const key = menu_code === 'DATASOURCES' ? `${menu_code}-${parentKey}` : menu_code || '';
             return {
                 key: app_code || key,
-                label: app_code ? (React.createElement(AppLabel, null,
-                    React.createElement(Typography.Text, { ellipsis: { tooltip: app_name.toUpperCase() } }, app_name.toUpperCase()))) : (React.createElement(MenuLabel, null,
-                    React.createElement(Typography.Text, { ellipsis: { tooltip: menu_name } }, menu_name))),
-                icon: icon ? React.createElement(IconWrapper, { url: icon }) : undefined,
-                children: childs === null || childs === void 0 ? void 0 : childs.map(item => item.show_hide ? recursiveGetMenuItem(omit(item, ['childs']), app_code) : null).filter(Boolean),
+                label: app_code ? (_jsx(AppLabel, { children: _jsx(Typography.Text, { ellipsis: { tooltip: app_name.toUpperCase() }, children: app_name.toUpperCase() }) })) : (_jsx(MenuLabel, { children: _jsx(Typography.Text, { ellipsis: { tooltip: menu_name }, children: menu_name }) })),
+                icon: icon ? _jsx(IconWrapper, { url: icon }) : undefined,
+                children: childs
+                    ?.map(item => item.show_hide ? recursiveGetMenuItem(omit(item, ['childs']), app_code) : null)
+                    .filter(Boolean),
             };
         };
-        const items = ((_a = orderBy(menuListPermission === null || menuListPermission === void 0 ? void 0 : menuListPermission.map(item => (Object.assign(Object.assign({}, item), { app_order: Number(item.app_order) }))), ['app_order'], ['asc'])) === null || _a === void 0 ? void 0 : _a.map(item => recursiveGetMenuItem(item))) || [];
-        return (React.createElement(Menu, { selectedKeys: [mappedActiveKey], defaultOpenKeys: uniq(openKeys), openKeys: uniq(openKeys), mode: "inline", items: items, inlineIndent: 0, onOpenChange: openKeys => {
+        const items = orderBy(menuListPermission?.map(item => ({ ...item, app_order: Number(item.app_order) })), ['app_order'], ['asc'])?.map(item => recursiveGetMenuItem(item)) || [];
+        return (_jsx(Menu, { selectedKeys: [mappedActiveKey], defaultOpenKeys: uniq(openKeys), openKeys: uniq(openKeys), mode: "inline", items: items, inlineIndent: 0, onOpenChange: openKeys => {
                 setOpenKeys(uniq(openKeys));
-            }, expandIcon: ({ isOpen }) => {
-                var _a;
-                return (React.createElement(Icon, { type: "icon-ants-expand-more", style: {
-                        fontSize: 20,
-                        color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8,
-                        transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
-                    } }));
-            }, onClick: onMenuClick }));
+            }, expandIcon: ({ isOpen }) => (_jsx(Icon, { type: "icon-ants-expand-more", style: {
+                    fontSize: 20,
+                    color: THEME?.token?.bw8,
+                    transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
+                } })), onClick: onMenuClick }));
     };
-    return React.createElement(MenuWrapper, null, renderMenu());
+    return _jsx(MenuWrapper, { children: renderMenu() });
 });

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/components/OldLeftMenu/styled.js

@@ -1,4 +1,3 @@
-var _a, _b, _c;
 import styled from 'styled-components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const IconWrapper = styled.div `
@@ -11,13 +10,13 @@ export const IconWrapper = styled.div `
   ${({ url }) => `mask-image: url(${url});`}
 `;
 export const MenuWrapper = styled.div `
-  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
+  border-radius: ${THEME?.token?.borderRadiusXL}px;
   height: 100%;
   max-height: 100%;
   overflow: hidden;
 
   & > .antsomi-menu.antsomi-menu-root {
-    border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+    border-radius: ${THEME?.token?.borderRadiusXL}px;
     height: 100%;
     max-height: 100%;
     overflow: auto;
@@ -48,7 +47,7 @@ export const MenuWrapper = styled.div `
           border-radius: 0px !important;
 
           ${IconWrapper} {
-            background: ${(_c = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary};
+            background: ${THEME?.token?.colorPrimary};
           }
         }
       }

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/components/OldLeftMenu/utils/index.js

@@ -8,19 +8,18 @@ const PATH = 'src/components/template/Layout/components/RecommendationWorkspace/
  * @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.childs) === null || _a === void 0 ? void 0 : _a.find(child => child.menu_code === activeMenuItem));
+            const isHasActiveMenuItem = !!item?.childs?.find(child => child.menu_code === activeMenuItem);
             if (isHasActiveMenuItem && item.app_code) {
                 parentKey = item.app_code;
                 break;
             }
             const findNestedParentKey = recursiveFindParentOfActiveItem({
                 activeMenuItem,
-                menuItems: (item === null || item === void 0 ? void 0 : item.childs) || [],
+                menuItems: item?.childs || [],
             });
             if (findNestedParentKey) {
                 parentKey = findNestedParentKey;

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/index.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import Icon from '@antscorp/icons';
 import isEqual from 'react-fast-compare';
@@ -13,7 +14,7 @@ import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 export const MenuMapping = memo(({ appConfig: appConfigProps }) => {
     const [activeKey, setActiveKey] = useState('DASHBOARD');
     const onMenuItemClick = useCallback((key, keyPath) => {
-        const appParentPermissionCode = keyPath === null || keyPath === void 0 ? void 0 : keyPath[1];
+        const appParentPermissionCode = keyPath?.[1];
         switch (key) {
             case 'DATASOURCES':
             case 'BUSINESS_OBJECT':
@@ -25,19 +26,13 @@ export const MenuMapping = memo(({ appConfig: appConfigProps }) => {
     }, []);
     const appConfigSelector = useContextSelector(AppConfigContext, state => state);
     const appConfig = useMemo(() => appConfigProps || appConfigSelector, [appConfigProps, appConfigSelector]);
-    return (React.createElement(MenuMappingWrapper, null,
-        React.createElement(MenuMappingContainer, null,
-            React.createElement("div", { className: "old-menu-wrapper" },
-                React.createElement(OldLeftMenu, { activeKey: activeKey, appConfig: appConfig, onMenuItemClick: onMenuItemClick })),
-            React.createElement(Icon, { type: "icon-ants-arrow-forward" }),
-            React.createElement("div", { className: "new-menu-wrapper" },
-                React.createElement(LeftMenu, { appConfig: appConfig, showLogo: false, style: { maxHeight: '100%' }, customization: {
-                        type: 'recommendation',
-                        activeKey,
-                        defaultExpandMenu: true,
-                        showMenuPopover: false,
-                        showButtonExpand: false,
-                        onMenuItemClick,
-                    } })))));
+    return (_jsx(MenuMappingWrapper, { children: _jsxs(MenuMappingContainer, { children: [_jsx("div", { className: "old-menu-wrapper", children: _jsx(OldLeftMenu, { activeKey: activeKey, appConfig: appConfig, onMenuItemClick: onMenuItemClick }) }), _jsx(Icon, { type: "icon-ants-arrow-forward" }), _jsx("div", { className: "new-menu-wrapper", children: _jsx(LeftMenu, { appConfig: appConfig, showLogo: false, style: { maxHeight: '100%' }, customization: {
+                            type: 'recommendation',
+                            activeKey,
+                            defaultExpandMenu: true,
+                            showMenuPopover: false,
+                            showButtonExpand: false,
+                            onMenuItemClick,
+                        } }) })] }) }));
 }, (prevProps, nextProps) => isEqual(prevProps, nextProps));
 MenuMapping.displayName = 'MenuMapping';

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/styled.js

@@ -1,14 +1,13 @@
-var _a, _b, _c, _d;
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-import { Flex } from '../../../../../../atoms';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 export const MenuMappingContainer = styled(Flex) `
   height: 100%;
 
   & > i {
     font-size: 22px;
     font-weight: 400;
-    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+    color: ${THEME?.token?.bw8};
   }
 `;
 MenuMappingContainer.defaultProps = {
@@ -23,7 +22,7 @@ export const MenuMappingWrapper = styled.div `
   overflow: hidden;
   height: 763px;
   flex-shrink: 0;
-  border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+  border-radius: ${THEME?.token?.borderRadiusXL}px;
 
   ${MenuMappingContainer} {
     max-height: 100%;
@@ -31,9 +30,9 @@ export const MenuMappingWrapper = styled.div `
     .old-menu-wrapper,
     .new-menu-wrapper {
       height: 100%;
-      border-radius: ${(_c = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _c === void 0 ? void 0 : _c.borderRadiusXL}px;
+      border-radius: ${THEME?.token?.borderRadiusXL}px;
       box-shadow: 0px 3px 20px 0px #002e5933;
-      background-color: ${(_d = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _d === void 0 ? void 0 : _d.blue1_3};
+      background-color: ${THEME?.token?.blue1_3};
     }
 
     .old-menu-wrapper {

package/es/components/template/Layout/components/RecommendationWorkspace/components/RecommendationImage/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Locate
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
@@ -7,9 +7,4 @@ import { Typography } from '../../../../../../atoms';
 import recommendationHumanImage from '@antscorp/antsomi-ui/es/assets/images/components/Layout/recommendation-human.png';
 // Styled
 import { ImageWrapper, MessageWrapper, RecommendationImageWrapper } from './styled';
-export const RecommendationImage = () => (React.createElement(RecommendationImageWrapper, null,
-    React.createElement(MessageWrapper, null,
-        React.createElement(Typography.Paragraph, null, i18nInstance.t(translations.layout.recommendationText).toString()),
-        React.createElement("div", { className: "arrow-triangle-down" })),
-    React.createElement(ImageWrapper, null,
-        React.createElement("img", { src: recommendationHumanImage, alt: "" }))));
+export const RecommendationImage = () => (_jsxs(RecommendationImageWrapper, { children: [_jsxs(MessageWrapper, { children: [_jsx(Typography.Paragraph, { children: i18nInstance.t(translations.layout.recommendationText).toString() }), _jsx("div", { className: "arrow-triangle-down" })] }), _jsx(ImageWrapper, { children: _jsx("img", { src: recommendationHumanImage, alt: "" }) })] }));

package/es/components/template/Layout/components/RecommendationWorkspace/index.js

@@ -1,9 +1,6 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Components
 import { MenuMapping, RecommendationImage } from './components';
 // Styled
 import { RecommendationWorkspaceWrapper } from './styled';
-export const RecommendationWorkspace = () => (React.createElement(RecommendationWorkspaceWrapper, null,
-    React.createElement(RecommendationImage, null),
-    React.createElement(MenuMapping, null)));
+export const RecommendationWorkspace = () => (_jsxs(RecommendationWorkspaceWrapper, { children: [_jsx(RecommendationImage, {}), _jsx(MenuMapping, {})] }));

package/es/components/template/Layout/stores/index.js

@@ -12,28 +12,31 @@ export const useLayoutStore = create(set => ({
     state: initialState,
     setLayoutState: newState => set(store => ({ state: merge(cloneDeep(store.state), cloneDeep(newState)) })),
     setHeaderState: newState => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { header: Object.assign(Object.assign({}, store.state.header), newState) }),
+        state: { ...store.state, header: { ...store.state.header, ...newState } },
     })),
     setLeftMenuState: newState => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { leftMenu: Object.assign(Object.assign({}, store.state.leftMenu), newState) }),
+        state: { ...store.state, leftMenu: { ...store.state.leftMenu, ...newState } },
     })),
     setWorkspaceState: newState => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { workspace: Object.assign(Object.assign({}, store.state.workspace), newState) }),
+        state: { ...store.state, workspace: { ...store.state.workspace, ...newState } },
     })),
     setContentWrapperState: newState => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { contentWrapper: Object.assign(Object.assign({}, store.state.contentWrapper), newState) }),
+        state: { ...store.state, contentWrapper: { ...store.state.contentWrapper, ...newState } },
     })),
     resetHeaderState: () => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { header: {} }),
+        state: { ...store.state, header: {} },
     })),
     resetLeftMenuState: () => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { leftMenu: {} }),
+        state: { ...store.state, leftMenu: {} },
     })),
     resetWorkspaceState: () => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { workspace: {} }),
+        state: { ...store.state, workspace: {} },
     })),
     resetContentWrapperState: () => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { contentWrapper: {} }),
+        state: {
+            ...store.state,
+            contentWrapper: {},
+        },
     })),
     resetLayoutState: () => set(() => ({
         state: {

package/es/components/template/Layout/styled.d.ts

@@ -10,6 +10,6 @@ export declare const ContentWrapper: import("styled-components").StyledComponent
 export declare const NotificationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LayoutLoading: import("styled-components").StyledComponent<{
-    (props: import("../../atoms/Spin/Spin").TSpinProps): import("react").JSX.Element;
+    (props: import("../../atoms/Spin/Spin").TSpinProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {};
 }, any, {}, never>;

package/es/components/template/Layout/styled.js

@@ -1,14 +1,14 @@
-var _a, _b;
 // Libraries
 import styled, { css } from 'styled-components';
 // Components
-import { Flex, Spin } from '../../atoms';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+import { Spin } from '@antscorp/antsomi-ui/es/components/atoms/Spin';
 // Constants
 import { HEADER_HEIGHT } from '../../molecules/HeaderV2/constants';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const LayoutWrapper = styled(Flex) `
   width: 100%;
-  background-color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_3};
+  background-color: ${THEME?.token?.blue1_3};
   position: relative;
 
   .layout-header {
@@ -34,7 +34,7 @@ export const LayoutWrapper = styled(Flex) `
     &__content {
       position: relative;
       flex: 1 1 0%;
-      border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+      border-radius: ${THEME?.token?.borderRadiusXL}px;
       background-color: white;
       height: 100%;
       padding: 15px;

package/es/components/template/Layout/utils/permission.js

@@ -74,13 +74,12 @@ export const hasSelectAccountPermission = (args) => {
             permissionCode = activeItem.permission_code;
         }
         const menuPermission = (() => {
-            var _a;
             const parentAppCode = MAP_MENU_TO_PARENT_APP_CODE[activeItem.menu_item_code];
             if (parentAppCode) {
-                const parentMenu = menuListPermission === null || menuListPermission === void 0 ? void 0 : menuListPermission.find(item => item.app_code === parentAppCode);
-                return (_a = parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.childs) === null || _a === void 0 ? void 0 : _a.find(item => item.menu_code === permissionCode);
+                const parentMenu = menuListPermission?.find(item => item.app_code === parentAppCode);
+                return parentMenu?.childs?.find(item => item.menu_code === permissionCode);
             }
-            return flattenPermissionList === null || flattenPermissionList === void 0 ? void 0 : flattenPermissionList.find(item => permissionCode === item.menu_code);
+            return flattenPermissionList?.find(item => permissionCode === item.menu_code);
         })();
         if (menuPermission) {
             const checkRoleScope = menuPermission

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,5 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
+/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;