@antscorp/antsomi-ui 1.3.5-beta.590 → 1.3.5-beta.592

package/es/components/atoms/PreviewTabs/styled.js

@@ -1,4 +1,6 @@
+var _a;
 // Components
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { Flex } from '../Flex';
 // Styled
 import styled from 'styled-components';
@@ -54,7 +56,7 @@ export const NavigationButton = styled(Flex) `
 
   i {
     font-size: 12px;
-    color: #595959;
+    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
   }
 
   &.navigation--previous {

package/es/components/icons/DomainManagementIcon.js

@@ -6,7 +6,7 @@ export const DomainManagementIcon = forwardRef((props, ref) => {
         // width="29"
         // height="29"
         viewBox: "0 0 29 29", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
-        React.createElement("path", { d: "M10 20C8.02219 20 6.08879 19.4135 4.4443 18.3147C2.79981 17.2159 1.51809 15.6541 0.761209 13.8268C0.00433286 11.9996 -0.1937 9.98891 0.192152 8.0491C0.578004 6.10929 1.53041 4.32746 2.92894 2.92894C4.32746 1.53041 6.10929 0.578004 8.0491 0.192152C9.98891 -0.1937 11.9996 0.00433286 13.8268 0.761209C15.6541 1.51809 17.2159 2.79981 18.3147 4.4443C19.4135 6.08879 20 8.02219 20 10C19.9974 12.6514 18.9429 15.1934 17.0681 17.0681C15.1934 18.9429 12.6514 19.9974 10 20ZM6.59667 8.39167H6.60667C7.42334 8.42334 8.87667 9.875 9.285 11.07C9.4297 11.5445 9.47273 12.0441 9.41127 12.5364C9.34982 13.0286 9.18526 13.5023 8.92834 13.9267C8.79 14.2283 8.61 14.6683 8.41834 15.135C8.09667 15.9233 7.73167 16.8167 7.41834 17.42C8.69991 17.8646 10.0747 17.9705 11.4092 17.7272C12.7437 17.484 13.9927 16.8999 15.035 16.0317C14.99 15.1317 15 12 15 11.9633C14.6817 11.8633 11.9267 10.9117 12.5 8.74834C12.7925 8.21523 13.2351 7.77975 13.7728 7.49591C14.3106 7.21207 14.9198 7.09237 15.525 7.15167C16.1834 7.14554 16.8371 7.26372 17.4517 7.5C17.1519 6.60523 16.6922 5.77228 16.095 5.04167C16.0615 5.00484 16.0201 4.97598 15.974 4.95724C15.9278 4.93849 15.8781 4.93032 15.8283 4.93334C15.606 4.95883 15.3951 5.04513 15.2187 5.18274C15.0422 5.32035 14.9072 5.50394 14.8283 5.71334C14.7967 5.80667 14.7733 5.895 14.7483 5.98167C14.6417 6.365 14.565 6.64834 14.0817 6.64834C13.9698 6.64709 13.8582 6.63593 13.7483 6.615C13.6293 6.60047 13.5146 6.56124 13.4115 6.49983C13.3085 6.43841 13.2194 6.35616 13.15 6.25834C13.0268 6.04163 12.986 5.78774 13.035 5.54334H13.7483V5H13.7383C13.5433 4.91667 13.0833 4.70334 13.0283 4.53834C13.023 4.52714 13.0202 4.5149 13.0202 4.5025C13.0202 4.49011 13.023 4.47786 13.0283 4.46667C13.4144 4.07223 13.849 3.72837 14.3217 3.44334C14.0489 3.26422 13.7656 3.10171 13.4733 2.95667C13.3667 3.14667 13.1217 3.22834 12.66 3.22834C12.5617 3.22834 12.4483 3.22834 12.315 3.21667C12.2256 3.22398 12.1359 3.20711 12.0552 3.16781C11.9746 3.12852 11.906 3.06825 11.8567 2.99334C11.8247 2.89165 11.8196 2.78343 11.8418 2.67918C11.864 2.57493 11.9127 2.47819 11.9833 2.39834C10.7781 2.08637 9.51627 2.06239 8.3 2.32834C8.26785 3.51083 7.93887 4.66625 7.34334 5.68834C7.275 5.815 7.205 5.94167 7.13834 6.07334C6.67167 6.98 4.48167 7.85 4.46 7.85834C4.85392 8.4311 5.21183 9.02781 5.53167 9.645C5.53874 9.3457 5.64838 9.0579 5.84224 8.82975C6.0361 8.60161 6.30243 8.44696 6.59667 8.39167ZM2.375 8.09334C1.99053 9.64021 2.08472 11.2674 2.6451 12.7595C3.20549 14.2517 4.20567 15.5386 5.51334 16.45C5.59575 15.6714 5.60356 14.8867 5.53667 14.1067L3.75 12.5L4.28667 10C4.27834 10 3.13167 8.73167 2.375 8.09334Z" }),
-        React.createElement("path", { d: "M13.3674 12.0699L11.2275 11.2247L12.0693 13.3659L16.2184 23.9195L17.0515 26.0386L18.0482 23.9913L19.1392 21.7502L22.1044 24.708L22.8088 25.4106L23.515 24.7099L24.7044 23.5297L25.4298 22.8099L24.6944 22.1003L21.7366 19.2459L24.1054 18.1204L26.1842 17.1326L24.0436 16.2871L13.3674 12.0699Z", stroke: "white", strokeWidth: "2" }),
-        React.createElement("path", { d: "M19.016 18.8012C19.0016 18.8894 18.9992 18.978 19.0081 19.0648C18.9031 19.0483 18.7949 19.0485 18.6873 19.0666C18.3687 19.1202 18.0957 19.3245 17.9543 19.615L17.2466 21.0686L14.7725 14.7753L21.1682 17.3017L19.5737 18.0593C19.2773 18.2001 19.0689 18.4774 19.016 18.8012Z", fill: "white", stroke: "#595959", strokeWidth: "2", strokeMiterlimit: "7.6613", strokeLinejoin: "round" })));
+        React.createElement("path", { d: "M15.7,15.7l1.9,0.8c1.6-1.8,2.4-4.1,2.4-6.5c0-2-0.6-3.9-1.7-5.6c-1.1-1.6-2.7-2.9-4.5-3.7C12,0,10-0.2,8,0.2\n\tC6.1,0.6,4.3,1.5,2.9,2.9C1.5,4.3,0.6,6.1,0.2,8c-0.4,2-0.2,4,0.6,5.8s2,3.4,3.7,4.5C6.1,19.4,8,20,10,20c2.3,0,4.7-0.9,6.4-2.4\n\tL15.7,15.7z M5.5,16.5c-1.3-0.9-2.3-2.2-2.9-3.7C2.1,11.3,2,9.6,2.4,8.1C3.1,8.7,4.3,10,4.3,10l-0.5,2.5l1.8,1.6\n\tC5.6,14.9,5.6,15.7,5.5,16.5z M13.8,7.5c-0.5,0.3-1,0.7-1.3,1.3C11.9,11,14.7,11.9,15,12c0,0,0,3.2,0,4.1c-1,0.9-2.3,1.5-3.6,1.7\n\tc-1.3,0.2-2.7,0.1-4-0.3c0.3-0.6,0.7-1.5,1-2.3c0.2-0.5,0.4-0.9,0.5-1.2c0.3-0.4,0.4-0.9,0.5-1.4c0.1-0.5,0-1-0.1-1.5\n\tC8.9,9.9,7.4,8.4,6.6,8.4C6.3,8.4,6,8.6,5.8,8.8S5.5,9.3,5.5,9.6C5.2,9,4.9,8.4,4.5,7.9c0,0,2.2-0.9,2.7-1.8C7.3,6,7.3,5.8,7.4,5.7\n\tc0.6-1,0.9-2.2,1-3.4c1.2-0.3,2.5-0.2,3.7,0.1C12,2.5,12,2.6,12,2.7c0,0.1,0,0.2,0,0.3s0.1,0.1,0.2,0.2c0.1,0,0.2,0.1,0.3,0\n\tc0.1,0,0.2,0,0.3,0c0.5,0,0.7-0.1,0.8-0.3c0.3,0.1,0.6,0.3,0.8,0.5c-0.5,0.3-0.9,0.6-1.3,1c0.1,0.2,0.5,0.4,0.7,0.5v0.5H13\n\tc0,0.2,0,0.5,0.1,0.7c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3,0c0.5,0,0.6-0.3,0.7-0.7\n\tc0-0.1,0-0.2,0.1-0.3C14.9,5.2,15,5,15.2,4.9c0.2,0.1,0.4,0.1,0.6,0h0.1c0,0,0.1,0,0.1,0.1c0.6,0.7,1.1,1.6,1.4,2.5\n\tc-0.6-0.2-1.3-0.4-1.9-0.3C14.9,7.1,14.3,7.2,13.8,7.5z" }),
+        React.createElement("path", { fill: "white", d: "M28.7,17L9.5,9.4L17,28.5l2.5-5.1l3.4,3.4l4.1-4l-3.4-3.3L28.7,17z M19,18c-0.1,0-0.2,0.2-0.3,0.4l-0.1,0.2\n\tl-0.2,0.1c-0.2,0.1-0.4,0.2-0.6,0.4l-0.5,0.5l-1.5-3.9l4.5,1.8L19,18z" }),
+        React.createElement("path", { d: "M20,19l3.7-1.7L13,13l4.1,10.6l1.7-3.5l4,3.9l1.2-1.2L20,19z M18.2,18.2c-0.3,0.1-0.6,0.3-0.8,0.5l-0.8-2.1l2.2,0.9\n\tC18.5,17.6,18.3,17.9,18.2,18.2z" })));
 });

package/es/components/molecules/ShareAccess/components/PeopleAccess/styled.js

@@ -1,4 +1,4 @@
-var _a;
+var _a, _b;
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledPeopleAccessRoot = styled.div `
@@ -36,7 +36,7 @@ export const StyledPeopleAccessRoot = styled.div `
           }
 
           .email {
-            color: #595959;
+            color: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
           }
         }
 

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

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 import styled from 'styled-components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const InputSearchStyled = styled.div `
@@ -45,7 +45,7 @@ export const InputSearchStyled = styled.div `
 
   svg {
     position: absolute;
-    fill: #595959;
+    fill: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
     right: 5px;
     width: 20px;
     height: 20px;
@@ -70,7 +70,7 @@ export const TriggerPopoverStyled = styled.div `
   justify-content: space-between;
   gap: 15px;
   padding: 3px 3px 3px 10px;
-  border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3};
+  border: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
   background-color: white;
   border-radius: 999px;
 
@@ -105,7 +105,7 @@ export const PackageSharingStyled = styled.div `
   font-size: 13px;
   color: #666;
 
-  background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1_2};
+  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1_2};
 
   min-width: 400px;
   max-width: 400px;
@@ -203,14 +203,14 @@ export const PackageSharingStyled = styled.div `
       li {
         cursor: pointer;
         padding: 8px 5px;
-        border-radius: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.borderRadius}px;
+        border-radius: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.borderRadius}px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 10px;
 
         &:hover {
-          background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue};
+          background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue};
         }
 
         .account-name {
@@ -257,7 +257,7 @@ export const PackageSharingStyled = styled.div `
         height: 42px;
         padding: 10px;
         border-radius: 10px;
-        border: 1px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw4};
+        border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw4};
 
         & img {
           width: 100%;
@@ -281,15 +281,15 @@ export const PackageSharingStyled = styled.div `
         cursor: pointer;
         &:hover {
           .image-wrapper {
-            background-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue};
-            border-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue3};
+            background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue};
+            border-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue3};
           }
         }
         &.disabled {
           cursor: default;
           .image-wrapper {
-            background: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue1_1};
-            border-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue7};
+            background: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue1_1};
+            border-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue7};
             img {
               cursor: default;
             }
@@ -298,7 +298,7 @@ export const PackageSharingStyled = styled.div `
         .image-wrapper {
           border: 1px solid #ddd;
           padding: 10px;
-          border-radius: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.borderRadius}px;
+          border-radius: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius}px;
           transition: all 0.2s ease-in-out;
           /* width: 108px;
           height: 45px; */
@@ -307,7 +307,7 @@ export const PackageSharingStyled = styled.div `
           }
         }
         .network-name {
-          color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw8};
+          color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw8};
           font-size: 11px;
           margin-top: 5px;
           margin-bottom: 0;
@@ -337,7 +337,7 @@ export const PackageSharingStyled = styled.div `
 export const InnerCardStyled = styled.div `
   width: 370px;
   background-color: white;
-  border-radius: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.borderRadius}px;
+  border-radius: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.borderRadius}px;
   padding: 10px;
   margin-bottom: 15px;
 `;

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

@@ -833,7 +833,7 @@ const Help = props => {
                             "Message ",
                             React.createElement("span", { style: { color: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.red8 } }, "*")),
                         React.createElement(EditorWrapper, null,
-                            React.createElement(Editor, { apiKey: apiKey, value: valueInput.message, init: {
+                            React.createElement(Editor, { apiKey: apiKey || TINYMCE_API_KEY, value: valueInput.message, init: {
                                     height: 200,
                                     width: '100%',
                                     max_height: 800,

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

@@ -13,35 +13,45 @@ import { APP_KEYS } from './constants';
 import { CustomMenu, CommonMenu, HomeMenu } from './components';
 // Hooks
 import { useLeftMenu } from './hooks';
+// Contexts
 import { useLeftMenuContext } from './contexts';
 const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
+const homePermissionCode = 'DASHBOARD';
 export const LeftMenuComponent = memo(props => {
     const { show = true, style, className, customization, showLogo = true } = props;
-    const { isExpandable = true, isCustomized, isRecommendation, items = [], onMenuItemClick, } = customization || {};
+    const { showMenuPopover = true, showButtonExpand = true, type, items = [], onMenuItemClick, } = customization || {};
     const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
+    const customHoverMenuChildren = useLeftMenuContext(store => store.customHoverMenuChildren);
+    const hoverMenuChildren = useMemo(() => {
+        if (type === 'customization')
+            return customHoverMenuChildren;
+        return appHoverMenuChildren;
+    }, [appHoverMenuChildren, customHoverMenuChildren, type]);
     const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, onShowPopover, onClickFeatureMenuItem, } = useLeftMenu(props);
     const childActiveMenu = useMemo(() => {
-        const appActiveKey = isCustomized || isRecommendation ? customActiveAppKey : activeAppCode;
-        if (isCustomized)
+        const appActiveKey = ['customization', 'recommendation'].includes(`${type}`)
+            ? customActiveAppKey
+            : activeAppCode;
+        if (type === 'customization')
             return React.createElement(CustomMenu, null);
         switch (appActiveKey) {
-            case isRecommendation ? 'DASHBOARD' : APP_KEYS.HOME:
+            case type === 'recommendation' ? homePermissionCode : APP_KEYS.HOME:
                 return React.createElement(HomeMenu, null);
             default:
                 return React.createElement(CommonMenu, null);
         }
-    }, [activeAppCode, customActiveAppKey, isCustomized, isRecommendation]);
+    }, [activeAppCode, customActiveAppKey, type]);
     const childHoverMenu = useMemo(() => {
         const appActiveKey = state.hoverItem;
-        if (isCustomized)
+        if (type === 'customization')
             return React.createElement(CustomMenu, { isHover: true });
         switch (appActiveKey) {
-            case isRecommendation ? 'DASHBOARD' : APP_KEYS.HOME:
-                return React.createElement(HomeMenu, { isHover: !isRecommendation });
+            case type === 'recommendation' ? homePermissionCode : APP_KEYS.HOME:
+                return React.createElement(HomeMenu, { isHover: type !== 'recommendation' });
             default:
-                return React.createElement(CommonMenu, { isHover: !isRecommendation });
+                return React.createElement(CommonMenu, { isHover: type !== 'recommendation' });
         }
-    }, [isCustomized, isRecommendation, state.hoverItem]);
+    }, [state.hoverItem, type]);
     const renderFeatureMenuItem = useCallback((item) => {
         const { menu_item_name, menu_item, icon_name, menu_item_code } = item;
         const isActive = activeAppCode === menu_item_code;
@@ -49,9 +59,9 @@ export const LeftMenuComponent = memo(props => {
         const renderLabel = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
             React.createElement(IconWrapper, null, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name })),
             React.createElement(Typography.Text, null, menu_item_name),
-            isExpandable && React.createElement("div", { className: "popup-triangle" })));
+            showMenuPopover && React.createElement("div", { className: "popup-triangle" })));
         return (React.createElement(FeatureMenuItem, { key: menu_item, onClick: () => onClickFeatureMenuItem(item), onMouseEnter: () => onMouseEnter(menu_item_code) }, renderLabel()));
-    }, [activeAppCode, state.hoverItem, isExpandable, onMouseEnter, onClickFeatureMenuItem]);
+    }, [activeAppCode, state.hoverItem, showMenuPopover, onMouseEnter, onClickFeatureMenuItem]);
     const renderRecommendationMenuItem = useCallback((item) => {
         const { menu_item_name, menu_item, icon_name, permission_code } = item;
         const isActive = customActiveAppKey === permission_code;
@@ -69,33 +79,34 @@ export const LeftMenuComponent = memo(props => {
             React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
                 React.createElement(IconWrapper, null, isNil(icon) ? null : React.createElement(Icon, { type: icon })),
                 React.createElement(Typography.Text, null, label),
-                isExpandable && React.createElement("div", { className: "popup-triangle" }))));
-    }), [customActiveAppKey, state.hoverItem, isExpandable, onMenuItemClick, onMouseEnter]);
+                showMenuPopover && React.createElement("div", { className: "popup-triangle" }))));
+    }), [customActiveAppKey, state.hoverItem, showMenuPopover, onMenuItemClick, onMouseEnter]);
     const renderAppMenuItems = useCallback(() => {
         var _a;
-        return isCustomized
+        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 => isRecommendation ? renderRecommendationMenuItem(item) : renderFeatureMenuItem(item));
+            : (_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));
     }, [
-        isCustomized,
-        isRecommendation,
         items,
         permissionMenu,
         renderCustomizedMenuItems,
         renderFeatureMenuItem,
         renderRecommendationMenuItem,
+        type,
     ]);
     const renderSettings = () => {
-        if (!isCustomized) {
+        if (type !== 'customization') {
             const settingApp = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === APP_KEYS.SETTINGS);
             if (settingApp)
-                return isRecommendation
+                return type === 'recommendation'
                     ? renderRecommendationMenuItem(settingApp)
                     : renderFeatureMenuItem(settingApp);
         }
         return null;
     };
-    return (React.createElement(LeftMenuNavWrapper, { "$show": show, style: style, "$isExpandMenu": state.isExpandMenu && isExpandable, className: className },
+    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 },
@@ -104,15 +115,15 @@ export const LeftMenuComponent = memo(props => {
                 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 }),
-                    !isRecommendation && (React.createElement(PopoverWrapper, { show: state.isShowPopover && !isEmpty(appHoverMenuChildren) /*  && isExpandable */, hasMarginTop: !isRecommendation, className: "antsomi-scroll-box antsomi-child-menu-popover" },
+                    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())),
-            isExpandable && !isRecommendation && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
+            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 && isExpandable, isMarginTop: showLogo, className: "antsomi-scroll-box" },
+        React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu, isMarginTop: showLogo, className: "antsomi-scroll-box" },
             React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childActiveMenu))));
 }, (prevProps, nextProps) => isEqual(prevProps, nextProps));

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

@@ -10,10 +10,10 @@ import { CreateButton, HomeMenuWrapper, ModalWrapper } from './styled';
 // Hooks
 import { useHomeMenu } from './useHomeMenu';
 export const HomeMenu = memo(props => {
-    const { children, removedDashboardId, isDashboardRemoving, isRecommendation, showCreateButton, setRemovedDashboardId, onCreateNewReport, onMenuClick, onRemoveDashboard, } = useHomeMenu(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 },
-            !isRecommendation && showCreateButton && (React.createElement(CreateButton, { type: "primary", onClick: onCreateNewReport },
+            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")))),

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

@@ -4,7 +4,7 @@ export declare const useHomeMenu: (props: HomeMenuProps) => {
     children: import("../../types").TMenuItem[];
     removedDashboardId: string;
     isDashboardRemoving: boolean;
-    isRecommendation: boolean | undefined;
+    type: import("../../types").TLeftMenuType | undefined;
     showCreateButton: boolean;
     setRemovedDashboardId: import("react").Dispatch<import("react").SetStateAction<string>>;
     onCreateNewReport: import("react").MouseEventHandler<HTMLElement>;

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

@@ -28,7 +28,7 @@ export const useHomeMenu = (props) => {
     const { navigate, replace } = useCustomRouter();
     const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
     const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
-    const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
+    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 dashboardParams = useLeftMenuContext(store => store.dashboardParams);
@@ -81,13 +81,13 @@ export const useHomeMenu = (props) => {
         }
     }, [auth, env, navigate, onClickCreateDashboard, origin, replace, urlParams]);
     const onMenuClick = useCallback((key, _keyPath) => {
-        if (!isRecommendation) {
+        if (type !== 'recommendation') {
             const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: key }));
             if (newPathName !== pathname) {
                 navigate(newPathName);
             }
         }
-    }, [isRecommendation, auth, pathname, navigate]);
+    }, [type, auth, pathname, navigate]);
     const onRemoveDashboard = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         if (removedDashboardId && auth && env) {
@@ -129,7 +129,7 @@ export const useHomeMenu = (props) => {
         children: isHover ? customHoverChildren : customChildren,
         removedDashboardId,
         isDashboardRemoving,
-        isRecommendation,
+        type,
         showCreateButton,
         setRemovedDashboardId,
         onCreateNewReport,

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

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

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

@@ -46,8 +46,7 @@ export const ChildMenu = memo(props => {
     const activeAppCode = useLeftMenuContext(store => store.activeAppCode);
     const menuItems = useLeftMenuContext(store => store.menuItems);
     const customItems = useLeftMenuContext(store => store.customItems);
-    const isCustomized = useLeftMenuContext(store => store.isCustomized);
-    const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
+    const type = useLeftMenuContext(store => store.type);
     const customActiveCurrentKey = useLeftMenuContext(store => store.customActiveCurrentKey);
     const setLeftMenuState = useLeftMenuContext(store => store.setState);
     const { navigate } = useCustomRouter();
@@ -59,8 +58,8 @@ export const ChildMenu = memo(props => {
         setOpenKeys((items === null || items === void 0 ? void 0 : items.map(item => item.key)) || []);
     }, [items]);
     useDeepCompareEffect(() => {
-        switch (true) {
-            case isCustomized: {
+        switch (type) {
+            case 'customization': {
                 setCurrentActiveItem(customActiveCurrentKey);
                 // Find parent key of active menu item to open it
                 const parentKey = recursiveFindParentOfActiveItem({
@@ -72,7 +71,7 @@ export const ChildMenu = memo(props => {
                 }
                 break;
             }
-            case isRecommendation: {
+            case 'recommendation': {
                 const menuActiveKey = handleActiveRecommendationItem({
                     customActiveCurrentKey,
                     currentActiveItem,
@@ -128,15 +127,14 @@ export const ChildMenu = memo(props => {
         pathname,
         activeAppCode,
         menuItems,
-        isCustomized,
+        type,
         customActiveCurrentKey,
         customItems,
-        isRecommendation,
         env,
         setLeftMenuState,
     ]);
     const onClick = e => {
-        if (isRecommendation) {
+        if (type === 'recommendation') {
             const [permissionCode, permissionCodePath] = (() => {
                 var _a;
                 if (e.key === 'WEB_PERSONALIZE') {
@@ -184,7 +182,7 @@ export const ChildMenu = memo(props => {
             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) && !isRecommendation && (React.createElement(OptionDropdownWrapper, { align: "center" },
+                (options === null || options === void 0 ? void 0 : options.length) && type !== 'recommendation' && (React.createElement(OptionDropdownWrapper, { align: "center" },
                     React.createElement(Dropdown, { menu: {
                             items: options,
                             onClick: e => {
@@ -195,14 +193,14 @@ export const ChildMenu = memo(props => {
                             style: styles.dropdownMenu,
                         }, trigger: ['click'] },
                         React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: styles.dotIcon })))),
-                !(children === null || children === void 0 ? void 0 : children.length) && isRecommendation && !!menu_item_path && (React.createElement(Link, { to: getPath(menu_item_path), className: "icon-link", target: "_blank", onClick: e => e.stopPropagation() },
+                !(children === null || children === void 0 ? void 0 : children.length) && type === 'recommendation' && !!menu_item_path && (React.createElement(Link, { to: getPath(menu_item_path), className: "icon-link", target: "_blank", onClick: e => e.stopPropagation() },
                     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) ? (React.createElement(IconWrapper, null,
                     React.createElement(Icon, { type: 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 || isRecommendation ? (renderLabel()) : (React.createElement("div", { className: "menu-link" }, renderLabel()));
+            const renderTitle = () => !menu_item_path || type === 'recommendation' ? (renderLabel()) : (React.createElement("div", { className: "menu-link" }, renderLabel()));
             return {
                 key,
                 label: (React.createElement(Flex, { gap: 10, align: "center", justify: "space-between", style: { height: '100%' }, onClick: () => onClickMenuItem(item) },

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

@@ -1,4 +1,4 @@
-var _a, _b;
+var _a, _b, _c;
 // Libraries
 import styled from 'styled-components';
 // Components
@@ -14,7 +14,7 @@ export const LabelWrapper = styled(Flex) `
     width: fit-content;
     display: none;
     text-decoration-line: none !important;
-    color: #595959 !important;
+    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8} !important;
 
     i {
       font-size: 15px !important;
@@ -58,7 +58,7 @@ export const MenuWrapper = styled.div `
         margin: 0;
         padding-left: 0px !important;
         width: 100%;
-        border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
+        border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
         padding-right: 4px !important;
       }
     }
@@ -72,7 +72,7 @@ export const MenuWrapper = styled.div `
       & .antsomi-menu-title-content {
         width: 100%;
         height: 100%;
-        border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+        border-radius: ${(_c = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _c === void 0 ? void 0 : _c.borderRadiusXL}px;
         padding: 0 8px;
 
         &:hover {

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

@@ -1,9 +1,10 @@
 // Libraries
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isArray, isNil } from 'lodash';
+import { isArray, isBoolean, isNil } from 'lodash';
 import { Cookies as ReactCookies } from 'react-cookie';
 // Utils
 import { findActiveAppCodeByChild, findActiveAppCodeByUrl, recursiveGetMenuItemByPermission, } from '../utils';
+import { flatTree } from '@antscorp/antsomi-ui/es/utils';
 // Store
 import { useLeftMenuContext } from '../contexts';
 // Constants
@@ -12,13 +13,12 @@ import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 import { usePermission } from './usePermission';
 import { useCustomRouter, useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 import { useNavigatePath } from './useNavigatePath';
-import { flatTree } from '@antscorp/antsomi-ui/es/utils';
 export const useLeftMenu = (props) => {
     // Props
     const { objectType = DASHBOARD_MODULE_CONFIG.objectType, objectId = DASHBOARD_MODULE_CONFIG.objectId, isGrouped = DASHBOARD_MODULE_CONFIG.isGrouped, appConfig, customization, onActiveMenuCodeChange, } = props;
-    const { expandMenu = false, isCustomized = false, isRecommendation = false, items, activeKey, onMenuItemClick, } = customization || {};
+    const { defaultExpandMenu, type, items, activeKey, onMenuItemClick } = customization || {};
     const mappedActiveKey = useMemo(() => {
-        if (!isRecommendation)
+        if (type !== 'recommendation')
             return activeKey;
         switch (activeKey) {
             case 'BUSINESS_OBJECT':
@@ -35,7 +35,7 @@ export const useLeftMenu = (props) => {
             default:
                 return activeKey;
         }
-    }, [activeKey, isRecommendation]);
+    }, [activeKey, type]);
     const cookies = new ReactCookies();
     const { pathname, hash, origin } = window.location;
     const { navigate } = useCustomRouter();
@@ -50,17 +50,25 @@ export const useLeftMenu = (props) => {
     const [state, setState] = useState({
         hoverItem: '',
         isShowPopover: false,
-        isExpandMenu: expandMenu || isOpenMenu,
+        isExpandMenu: true,
     });
     const { mappingChildrenMenu, flattenMenuPermission, menuListPermission, permissionMenu, activeItemPath, } = usePermission();
+    useEffect(() => {
+        if (isBoolean(defaultExpandMenu)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: defaultExpandMenu })));
+        }
+        else {
+            setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: isOpenMenu })));
+        }
+    }, [defaultExpandMenu, isOpenMenu]);
     const onMenuClick = useCallback((key, keyPath) => {
-        if (isRecommendation) {
+        if (type === 'recommendation') {
             setLeftMenuContextState({ customActiveCurrentKey: key });
         }
         onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [...keyPath, customActiveAppKey]);
-    }, [customActiveAppKey, isRecommendation, onMenuItemClick, setLeftMenuContextState]);
+    }, [customActiveAppKey, onMenuItemClick, setLeftMenuContextState, type]);
     useDeepCompareEffect(() => {
-        if (!expandMenu) {
+        if (!isBoolean(defaultExpandMenu)) {
             cookies.set('_leftmenu_state', state.isExpandMenu ? 1 : 0, {
                 domain: `.${origin.split('.').splice(-2).join('.')}`,
                 path: '/',
@@ -72,25 +80,15 @@ export const useLeftMenu = (props) => {
     useDeepCompareEffect(() => {
         setLeftMenuContextState({
             appConfig,
-            isCustomized,
-            isRecommendation,
+            type,
             dashboardParams: { objectId, isGrouped, objectType },
             onMenuClick,
         });
-    }, [
-        appConfig,
-        isCustomized,
-        isGrouped,
-        isRecommendation,
-        objectId,
-        objectType,
-        onMenuClick,
-        setLeftMenuContextState,
-    ]);
+    }, [appConfig, type, isGrouped, objectId, objectType, onMenuClick, setLeftMenuContextState]);
     // Active Custom App Key when active key is changed
     useDeepCompareEffect(() => {
-        switch (true) {
-            case isCustomized:
+        switch (type) {
+            case 'customization':
                 setLeftMenuContextState({
                     customActiveAppKey: findActiveAppCodeByChild({
                         activeCurrentKey: activeKey || '',
@@ -99,7 +97,7 @@ export const useLeftMenu = (props) => {
                     customActiveCurrentKey: activeKey,
                 });
                 break;
-            case isRecommendation: {
+            case 'recommendation': {
                 setLeftMenuContextState({
                     customActiveAppKey: findActiveAppCodeByChild({
                         activeCurrentKey: mappedActiveKey || '',
@@ -116,19 +114,20 @@ export const useLeftMenu = (props) => {
     }, [
         activeKey,
         appConfig,
-        isCustomized,
-        isRecommendation,
         items,
         mappedActiveKey,
         mappingChildrenMenu,
+        type,
         setLeftMenuContextState,
     ]);
     // Change list menu children when hovering or activating items, giving priority to hovering items
     useDeepCompareEffect(() => {
         var _a, _b, _c, _d, _e, _f;
-        const appActiveKey = isCustomized || isRecommendation ? customActiveAppKey : activeAppCode;
-        switch (true) {
-            case isCustomized: {
+        const appActiveKey = ['customization', 'recommendation'].includes(`${type}`)
+            ? customActiveAppKey
+            : activeAppCode;
+        switch (type) {
+            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) || [],
@@ -138,7 +137,7 @@ export const useLeftMenu = (props) => {
                 });
                 break;
             }
-            case isRecommendation: {
+            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) ||
@@ -166,56 +165,42 @@ export const useLeftMenu = (props) => {
     }, [
         activeAppCode,
         customActiveAppKey,
-        isCustomized,
         items,
         mappingChildrenMenu,
         state.hoverItem,
-        isRecommendation,
+        type,
         setLeftMenuContextState,
     ]);
     useDeepCompareEffect(() => {
-        switch (true) {
-            case isCustomized:
-                break;
-            default: {
-                const url = `${pathname}${hash}`;
-                // Active App Item having code matching url
-                const matchAppCode = findActiveAppCodeByUrl({
-                    url,
-                    menuItems: mappingChildrenMenu,
-                    auth,
-                    env,
-                });
-                if (matchAppCode && matchAppCode !== activeAppCode) {
-                    setLeftMenuContextState({ activeAppCode: matchAppCode });
-                }
-                break;
+        if (type !== 'customization') {
+            const url = `${pathname}${hash}`;
+            // Active App Item having code matching url
+            const matchAppCode = findActiveAppCodeByUrl({
+                url,
+                menuItems: mappingChildrenMenu,
+                auth,
+                env,
+            });
+            if (matchAppCode && matchAppCode !== activeAppCode) {
+                setLeftMenuContextState({ activeAppCode: matchAppCode });
             }
         }
     }, [
         activeAppCode,
         auth,
         hash,
-        isCustomized,
-        isRecommendation,
         mappingChildrenMenu,
         pathname,
         env,
+        type,
         setLeftMenuContextState,
     ]);
     useEffect(() => {
-        if (!isCustomized && !isRecommendation) {
+        if (!['customization', 'recommendation'].includes(`${type}`)) {
             // Callback function using at Layout when url change
             onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission, menuListPermission);
         }
-    }, [
-        activeItemPath,
-        flattenMenuPermission,
-        isCustomized,
-        isRecommendation,
-        menuListPermission,
-        onActiveMenuCodeChange,
-    ]);
+    }, [activeItemPath, flattenMenuPermission, menuListPermission, onActiveMenuCodeChange, type]);
     useEffect(() => clearTimeout(timeoutPopover === null || timeoutPopover === void 0 ? void 0 : timeoutPopover.current), [timeoutPopover]);
     const onShowPopover = useCallback((hoverItem) => {
         if (timeoutPopover)
@@ -231,23 +216,16 @@ export const useLeftMenu = (props) => {
     const onMouseEnter = useCallback((key) => {
         if (state.hoverItem !== key) {
             onShowPopover(key);
-            // if (!state.isExpandMenu || !isExpandable) {
-            //   setState(prev => ({ ...prev, hoverItem: key }));
-            // }
         }
     }, [state.hoverItem, onShowPopover]);
     const onMouseLeave = useCallback(() => {
         timeoutPopover.current = setTimeout(() => {
-            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
-            setState(prev => (Object.assign(Object.assign({}, prev), { isShowPopover: false })));
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '', isShowPopover: false })));
         }, 200);
-        // if (!state.isExpandMenu || !isExpandable) {
-        //   setState(prev => ({ ...prev, hoverItem: '' }));
-        // }
     }, []);
     const onHoverMenuBar = useCallback(() => {
-        onMouseEnter(isCustomized ? customActiveAppKey : activeAppCode);
-    }, [activeAppCode, customActiveAppKey, isCustomized, onMouseEnter]);
+        onMouseEnter(type === 'customization' ? customActiveAppKey : activeAppCode);
+    }, [activeAppCode, customActiveAppKey, onMouseEnter, type]);
     const onClickFeatureMenuItem = useCallback((item) => {
         // Destructure permission_code from the item object
         const { permission_code } = item;

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

@@ -16,8 +16,7 @@ import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 const { DEV, SANDBOX, SANDBOX_CDP } = ENV;
 export const usePermission = () => {
     const appConfig = useLeftMenuContext(store => store.appConfig);
-    const isCustomized = useLeftMenuContext(store => store.isCustomized);
-    const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
+    const type = useLeftMenuContext(store => store.type);
     const setLeftMenuState = useLeftMenuContext(store => store.setState);
     const { isGrouped, objectId, objectType } = useLeftMenuContext(store => store.dashboardParams);
     const { auth, languageCode = 'en', env = 'development', permissionDomain } = appConfig || {};
@@ -125,14 +124,14 @@ export const usePermission = () => {
         dashboardList,
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
         destinationChannelGen2Entries: destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
-        isRecommendation,
+        isRecommendation: type === 'recommendation',
         userPermission,
     }), [
         auth,
         dashboardList,
         destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
         destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
-        isRecommendation,
+        type,
         permissionMenu,
         userPermission,
     ]);
@@ -142,14 +141,14 @@ export const usePermission = () => {
         dashboardList,
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
         destinationChannelGen2Entries: destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
-        isRecommendation,
+        isRecommendation: type === 'recommendation',
         userPermission,
     }), [
         auth,
         dashboardList,
         destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
         destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
-        isRecommendation,
+        type,
         menuList === null || menuList === void 0 ? void 0 : menuList.rows,
         userPermission,
     ]);
@@ -170,7 +169,7 @@ export const usePermission = () => {
     }, [auth, env, hash, mappingChildrenMenuWithNoPermission, pathname]);
     useDeepCompareEffect(() => setLeftMenuState({ dashboardList }), [dashboardList, setLeftMenuState]);
     useEffect(() => {
-        if (!isCustomized) {
+        if (type !== 'customization') {
             const receivePostMessage = (event) => {
                 const { data } = event;
                 const { type } = data || {};

package/es/components/organism/LeftMenu/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AppConfigProviderProps } from '@antscorp/antsomi-ui/es/providers';
-import { TMenuItem } from './types';
 import { FeatureMenuPermission, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { TLeftMenuType, TMenuItem } from './types';
 export interface LeftMenuProps {
     show?: boolean;
     appConfig?: AppConfigProviderProps;
@@ -12,12 +12,12 @@ export interface LeftMenuProps {
     className?: string;
     showLogo?: boolean;
     customization?: {
-        isCustomized?: boolean;
-        isRecommendation?: boolean;
-        isExpandable?: boolean;
+        type?: TLeftMenuType;
+        showButtonExpand?: boolean;
+        showMenuPopover?: boolean;
         items?: TMenuItem[];
         activeKey?: string;
-        expandMenu?: boolean;
+        defaultExpandMenu?: boolean;
         onMenuItemClick?: (key: string, keyPath: string[]) => void;
     };
     onActiveMenuCodeChange?: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[], menuListPermission?: FeatureMenuPermission[]) => void;

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

@@ -2,12 +2,13 @@
 // Libraries
 import React, { memo, useRef } from 'react';
 import isEqual from 'react-fast-compare';
+import { CookiesProvider } from 'react-cookie';
 // Providers
 import { LeftMenuProvider } from './providers';
 // Store
 import { createLeftMenuStore } from './stores';
+// Types
 import { LeftMenuComponent } from './LeftMenu';
-import { CookiesProvider } from 'react-cookie';
 export const LeftMenu = memo((props) => {
     const storeRef = useRef();
     if (!storeRef.current) {

package/es/components/organism/LeftMenu/stores/index.d.ts

@@ -1,5 +1,5 @@
 import { TDashboard, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
-import { TMenuItem } from '../types';
+import { TLeftMenuType, TMenuItem } from '../types';
 import { AppConfigProviderProps } from '@antscorp/antsomi-ui/es/providers';
 export interface LeftMenuStoreProps {
     activeAppCode: string;
@@ -12,8 +12,7 @@ export interface LeftMenuStoreProps {
     appMenuChildren: TFeatureMenu[];
     appHoverMenuChildren: TFeatureMenu[];
     appConfig?: AppConfigProviderProps;
-    isCustomized?: boolean;
-    isRecommendation?: boolean;
+    type?: TLeftMenuType;
     dashboardParams: {
         objectId: number;
         objectType: string;

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

@@ -1,4 +1,5 @@
 import { createStore } from 'zustand';
+// Constants
 import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 const DEFAULT_PROPS = {
     activeAppCode: '',
@@ -10,8 +11,7 @@ const DEFAULT_PROPS = {
     customItems: [],
     customMenuChildren: [],
     customHoverMenuChildren: [],
-    isCustomized: false,
-    isRecommendation: false,
+    type: 'default',
     dashboardParams: {
         objectId: DASHBOARD_MODULE_CONFIG.objectId,
         objectType: DASHBOARD_MODULE_CONFIG.objectType,

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

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e;
+var _a, _b, _c, _d, _e, _f;
 // Libraries
 import styled from 'styled-components';
 // Constants
@@ -16,7 +16,7 @@ export const IconWrapper = styled.div `
 
   i {
     font-size: ${ICON_SIZE}px;
-    color: #595959;
+    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
   }
 `;
 export const PopoverWrapper = styled.div `
@@ -40,7 +40,7 @@ export const PopoverWrapper = styled.div `
   position: absolute;
   background-color: white;
   left: 65px;
-  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
+  border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
   bottom: 15px;
   box-shadow: 0px 3px 20px 0px #002e5933;
   height: ${({ hasMarginTop }) => hasMarginTop ? `calc(100% - ${HEADER_HEIGHT + 15}px)` : `calc(100% - 15px)`};
@@ -61,7 +61,7 @@ export const ExpandWrapper = styled.div `
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  border-top: 1px solid ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
+  border-top: 1px solid ${(_c = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _c === void 0 ? void 0 : _c.bw3};
   padding: 0 10px;
 `;
 export const LeftMenuNavWrapper = styled.div `
@@ -91,11 +91,11 @@ export const LeftMenuNav = styled.nav `
   position: relative;
   width: 70px;
   height: 100%;
-  background-color: ${(_c = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _c === void 0 ? void 0 : _c.blue1_2};
+  background-color: ${(_d = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _d === void 0 ? void 0 : _d.blue1_2};
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  border-right: 1px solid ${(_d = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _d === void 0 ? void 0 : _d.bw3};
+  border-right: 1px solid ${(_e = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _e === void 0 ? void 0 : _e.bw3};
 
   ${ExpandWrapper} {
     flex-shrink: 0;
@@ -151,7 +151,7 @@ export const FeatureMenuItem = styled.div `
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    border-radius: ${(_e = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _e === void 0 ? void 0 : _e.borderRadiusXL}px;
+    border-radius: ${(_f = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _f === void 0 ? void 0 : _f.borderRadiusXL}px;
     padding: 5px 0;
     position: relative;
 

package/es/components/organism/LeftMenu/types/index.d.ts

@@ -27,4 +27,5 @@ type TOption = {
         optionKey: string;
     }) => void;
 };
+export type TLeftMenuType = 'customization' | 'recommendation' | 'default';
 export {};

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

@@ -289,7 +289,7 @@ export const Layout = memo(props => {
         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
-                    isExpandable: !isAccessDenied && ((_a = mergeLeftMenuProps.customization) === null || _a === void 0 ? void 0 : _a.isExpandable) }), appConfig: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange })),
+                    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 })))),

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/index.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
-export declare const MenuMapping: React.FC;
+import { AppConfigProps } from '@antscorp/antsomi-ui/es/providers';
+interface MenuMappingProps {
+    appConfig?: AppConfigProps;
+}
+export declare const MenuMapping: React.FC<MenuMappingProps>;
+export {};

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

@@ -1,7 +1,8 @@
 // Libraries
-import React, { useCallback, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import Icon from '@antscorp/icons';
+import isEqual from 'react-fast-compare';
 // Styled
 import { MenuMappingWrapper, MenuMappingContainer } from './styled';
 // Components
@@ -9,24 +10,34 @@ import { LeftMenu } from '@antscorp/antsomi-ui/es/components/organism';
 import { OldLeftMenu } from './components';
 // Providers
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
-export const MenuMapping = () => {
+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];
         switch (key) {
             case 'DATASOURCES':
             case 'BUSINESS_OBJECT':
-                setActiveKey(`${key}-${keyPath === null || keyPath === void 0 ? void 0 : keyPath[1]}`);
+                setActiveKey(`${key}-${appParentPermissionCode}`);
                 break;
             default:
                 setActiveKey(key);
         }
     }, []);
-    const appConfig = useContextSelector(AppConfigContext, state => state);
+    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: { isRecommendation: true, activeKey, expandMenu: true, onMenuItemClick } })))));
-};
+                React.createElement(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,4 +1,4 @@
-var _a, _b, _c;
+var _a, _b, _c, _d;
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 import { Flex } from '../../../../../../atoms';
@@ -8,7 +8,7 @@ export const MenuMappingContainer = styled(Flex) `
   & > i {
     font-size: 22px;
     font-weight: 400;
-    color: #595959;
+    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
   }
 `;
 MenuMappingContainer.defaultProps = {
@@ -23,7 +23,7 @@ export const MenuMappingWrapper = styled.div `
   overflow: hidden;
   height: 763px;
   flex-shrink: 0;
-  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
+  border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
 
   ${MenuMappingContainer} {
     max-height: 100%;
@@ -31,9 +31,9 @@ export const MenuMappingWrapper = styled.div `
     .old-menu-wrapper,
     .new-menu-wrapper {
       height: 100%;
-      border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+      border-radius: ${(_c = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _c === void 0 ? void 0 : _c.borderRadiusXL}px;
       box-shadow: 0px 3px 20px 0px #002e5933;
-      background-color: ${(_c = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _c === void 0 ? void 0 : _c.blue1_3};
+      background-color: ${(_d = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _d === void 0 ? void 0 : _d.blue1_3};
     }
 
     .old-menu-wrapper {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.590",
+  "version": "1.3.5-beta.592",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",

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

@@ -1 +0,0 @@
-"use strict";