@antscorp/antsomi-ui 1.3.5-beta.378 → 1.3.5-beta.379

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

@@ -20,16 +20,20 @@ export const LeftMenuComponent = memo(props => {
     const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, } = useLeftMenu(props);
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     const childMenu = useMemo(() => {
-        const selectedFeatureKey = state.hoverItem ? state.hoverItem : activeAppCode;
+        const appActiveKey = state.hoverItem
+            ? state.hoverItem
+            : isCustomized || isRecommendation
+                ? customActiveAppKey
+                : activeAppCode;
         if (isCustomized)
             return React.createElement(CustomMenu, null);
-        switch (selectedFeatureKey) {
-            case APP_KEYS.HOME:
+        switch (appActiveKey) {
+            case isRecommendation ? 'DASHBOARD' : APP_KEYS.HOME:
                 return React.createElement(HomeMenu, null);
             default:
                 return React.createElement(CommonMenu, null);
         }
-    }, [activeAppCode, isCustomized, state.hoverItem]);
+    }, [activeAppCode, customActiveAppKey, isCustomized, isRecommendation, state.hoverItem]);
     const renderFeatureMenuItem = useCallback((item) => {
         const { menu_item_name, menu_item, icon_name, menu_item_code, menu_item_path, menu_item_domain, } = item;
         const isActive = activeAppCode === menu_item_code;

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

@@ -8,6 +8,7 @@ import { useLeftMenuContext } from '../../contexts';
 import { getMenuItem } from '../../utils';
 export const CommonMenu = memo(() => {
     const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
+    const onMenuClick = useLeftMenuContext(store => store.onMenuClick);
     const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
-    return React.createElement(ChildMenu, { items: customChildren });
+    return React.createElement(ChildMenu, { items: customChildren, onMenuClick: onMenuClick });
 });

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

@@ -10,12 +10,12 @@ export const HomeMenuWrapper = styled(Flex) `
   height: 100%;
   width: 100%;
 
-  .menu-list {
+  & > .menu-list {
     width: 100%;
     flex: 1 1 0%;
     overflow: hidden;
 
-    .antsomi-menu {
+    & .antsomi-menu {
       & > li > ul {
         font-weight: 400 !important;
         font-size: 11px !important;

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

@@ -65,11 +65,13 @@ export const useHomeMenu = () => {
         }
     }, [auth, navigate, onClickCreateDashboard, replace, urlParams]);
     const onMenuClick = useCallback((key, _keyPath) => {
-        const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: key }));
-        if (newPathName !== pathname) {
-            navigate(newPathName);
+        if (!isRecommendation) {
+            const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: key }));
+            if (newPathName !== pathname) {
+                navigate(newPathName);
+            }
         }
-    }, [auth, pathname, navigate]);
+    }, [isRecommendation, auth, pathname, navigate]);
     const onRemoveDashboard = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (removedDashboardId && auth && env) {
             const params = {

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

@@ -147,7 +147,7 @@ export const ChildMenu = memo(props => {
         var _a;
         return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, optionCallback, } = item;
-            const renderLabel = () => (React.createElement(LabelWrapper, { hasOption: !!(options === null || options === void 0 ? void 0 : options.length) },
+            const renderLabel = () => (React.createElement(LabelWrapper, null,
                 React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
                 (options === null || options === void 0 ? void 0 : options.length) && !isRecommendation && (React.createElement(OptionDropdownWrapper, null,
                     React.createElement(Dropdown, { menu: {

package/es/components/organism/LeftMenu/components/common/ChildMenu/styled.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
-export declare const LabelWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
-    hasOption?: boolean | undefined;
-}, never>;
+export declare const LabelWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const LabelCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export declare const OptionDropdownWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -9,12 +9,6 @@ import { ICON_SIZE } from '../../../constants';
 export const LabelWrapper = styled(Flex) `
   width: 100%;
   overflow: hidden;
-  ${({ hasOption }) => hasOption
-    ? `
-    font-weight: 400 !important;
-    font-size: 11px !important;
-  `
-    : ''}
 
   .icon-link {
     flex-shrink: 0;

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

@@ -1,6 +1,6 @@
 // Libraries
 import React, { useState, memo, useLayoutEffect, useMemo } from 'react';
-import { Menu } from 'antd';
+import { Menu, Typography } from 'antd';
 import { omit, orderBy, uniq } from 'lodash';
 import Icon from '@antscorp/icons';
 // Styled
@@ -44,7 +44,9 @@ export const OldLeftMenu = memo(props => {
             const { app_code, menu_code, app_name = '', menu_name = '', icon, childs, } = featureMenuPermission;
             return {
                 key: app_code || menu_code || '',
-                label: app_code ? (React.createElement(AppLabel, null, app_name.toUpperCase())) : (React.createElement(MenuLabel, null, menu_name)),
+                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 => recursiveGetMenuItem(omit(item, ['childs']))),
             };

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

@@ -36,6 +36,10 @@ export const MenuWrapper = styled.div `
         padding-right: 10px !important;
         border-left: 4px solid transparent;
 
+        & > .antsomi-menu-title-content {
+          margin: 0;
+        }
+
         &.antsomi-menu-item-selected {
           border-left: 4px solid #005eb8;
           border-radius: 0px !important;
@@ -49,15 +53,25 @@ export const MenuWrapper = styled.div `
   }
 `;
 export const AppLabel = styled.span `
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 16px;
   display: flex;
-  padding: 0 10px !important;
+
+  & > .antsomi-typography {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 16px;
+    padding: 0 10px;
+    max-width: 100%;
+    color: inherit !important;
+  }
 `;
 export const MenuLabel = styled.span `
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 14px;
-  padding: 0 10px !important;
+  display: flex;
+  & > .antsomi-typography {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 14px;
+    padding-right: 10px !important;
+    padding-left: 6px !important;
+    color: inherit !important;
+  }
 `;

package/package.json

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