@antscorp/antsomi-ui 1.3.5-beta.189 → 1.3.5-beta.190

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

@@ -4,7 +4,9 @@ import React, { memo } from 'react';
 import { ChildMenu } from '../common';
 // Hooks
 import { useContentMenu } from './useContentMenu';
+// Constants
+import { FEATURE_KEYS } from '../../constants';
 export const ContentMenu = memo(() => {
     const { children } = useContentMenu();
-    return React.createElement(ChildMenu, { items: children });
+    return React.createElement(ChildMenu, { items: children, parentKey: FEATURE_KEYS.CONTENT });
 });

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

@@ -4,7 +4,9 @@ import React, { memo } from 'react';
 import { ChildMenu } from '../common';
 // Hooks
 import { useDataMenu } from './useDataMenu';
+// Constants
+import { FEATURE_KEYS } from '../../constants';
 export const DataMenu = memo(() => {
     const { children } = useDataMenu();
-    return React.createElement(ChildMenu, { items: children });
+    return React.createElement(ChildMenu, { items: children, parentKey: FEATURE_KEYS.DATA });
 });

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

@@ -5,6 +5,7 @@ import { ChildMenu } from '../common';
 import { Flex } from '../../../../atoms';
 // Constants
 import Icon from '@antscorp/icons';
+import { FEATURE_KEYS } from '../../constants';
 // Styled
 import { CreateButton, HomeMenuWrapper } from './styled';
 // Hooks
@@ -18,5 +19,5 @@ export const HomeMenu = memo(() => {
                 React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }),
                 React.createElement("span", null, "Create"))),
         React.createElement("div", { className: "menu-list" },
-            React.createElement(ChildMenu, { items: children, onMenuClick: onMenuClick }))));
+            React.createElement(ChildMenu, { items: children, parentKey: FEATURE_KEYS.HOME, onMenuClick: onMenuClick }))));
 });

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

@@ -4,7 +4,9 @@ import React, { memo } from 'react';
 import { ChildMenu } from '../common';
 // Contexts
 import { useInsightsMenu } from './useInsightsMenu';
+// Constants
+import { FEATURE_KEYS } from '../../constants';
 export const InsightsMenu = memo(() => {
     const { children } = useInsightsMenu();
-    return React.createElement(ChildMenu, { items: children });
+    return React.createElement(ChildMenu, { items: children, parentKey: FEATURE_KEYS.INSIGHTS });
 });

package/es/components/organism/LeftMenu/components/MarketingMenu/constants.d.ts

@@ -1,3 +1,7 @@
 export declare const MARKETING_ROUTES: {
     CHANNEL: string;
 };
+export declare const CHANNEL_KEY: {
+    readonly ALL_CHANNEL: 0;
+    readonly ORCHESTRATION: 8;
+};

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

@@ -1,3 +1,4 @@
 export const MARKETING_ROUTES = {
     CHANNEL: '/gen2/:networkId/:user_id/marketing-hub/journeys/:channelId/list',
 };
+export const CHANNEL_KEY = { ALL_CHANNEL: 0, ORCHESTRATION: 8 };

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

@@ -4,7 +4,9 @@ import React, { memo } from 'react';
 import { ChildMenu } from '../common';
 // Hooks
 import { useMarketingMenu } from './useMarketingMenu';
+// Constants
+import { FEATURE_KEYS } from '../../constants';
 export const MarketingMenu = memo(() => {
     const { children } = useMarketingMenu();
-    return React.createElement(ChildMenu, { items: children });
+    return React.createElement(ChildMenu, { items: children, parentKey: FEATURE_KEYS.MARKETING });
 });

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

@@ -10,7 +10,7 @@ import { useGetDestinationChannel } from '@antscorp/antsomi-ui/es/queries/LeftMe
 // Utils
 import { getGeneratePath, getMenuItem } from '../../utils';
 // Constants
-import { MARKETING_ROUTES } from './constants';
+import { CHANNEL_KEY, MARKETING_ROUTES } from './constants';
 export const useMarketingMenu = () => {
     // Contexts
     const appConfig = useContextSelector(AppConfigContext, state => state);
@@ -34,21 +34,21 @@ export const useMarketingMenu = () => {
     });
     // Memos
     const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => {
-        var _a;
+        var _a, _b;
         let children = [];
         switch (item.menu_item_code) {
             case 'ALL_CHANNEL':
-                item.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: 0 }));
+                item.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: CHANNEL_KEY.ALL_CHANNEL }));
                 break;
             case 'ORCHESTRATION':
-                item.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: 8 }));
+                item.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: CHANNEL_KEY.ORCHESTRATION }));
                 break;
             default:
                 break;
         }
         if ((item === null || item === void 0 ? void 0 : item.render_option) === 'destination_channel') {
             children =
-                ((_a = destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries) === null || _a === void 0 ? void 0 : _a.map(item => ({
+                ((_b = (_a = destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries) === null || _a === void 0 ? void 0 : _a.filter(item => item.channelId !== CHANNEL_KEY.ORCHESTRATION)) === null || _b === void 0 ? void 0 : _b.map(item => ({
                     menu_item_code: item.channelCode,
                     menu_item_name: item.translateLabel,
                     logo_url: item.logoUrl,

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

@@ -4,7 +4,9 @@ import React, { memo } from 'react';
 import { ChildMenu } from '../common';
 // Hooks
 import { useProfilesMenu } from './useProfilesMenu';
+// Constants
+import { FEATURE_KEYS } from '../../constants';
 export const ProfilesMenu = memo(() => {
     const { children } = useProfilesMenu();
-    return React.createElement(ChildMenu, { items: children });
+    return React.createElement(ChildMenu, { items: children, parentKey: FEATURE_KEYS.PROFILES });
 });

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

@@ -4,7 +4,9 @@ import React, { memo } from 'react';
 import { ChildMenu } from '../common';
 // Hooks
 import { useSettingsMenu } from './useSettingsMenu';
+// Constants
+import { FEATURE_KEYS } from '../../constants';
 export const SettingsMenu = memo(() => {
     const { children } = useSettingsMenu();
-    return React.createElement(ChildMenu, { items: children });
+    return React.createElement(ChildMenu, { items: children, parentKey: FEATURE_KEYS.SETTINGS });
 });

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

@@ -4,7 +4,9 @@ import React, { memo } from 'react';
 import { ChildMenu } from '../common';
 // Hooks
 import { useTemplatesMenu } from './useTemplatesMenu';
+// Constants
+import { FEATURE_KEYS } from '../../constants';
 export const TemplatesMenu = memo(() => {
     const { children } = useTemplatesMenu();
-    return React.createElement(ChildMenu, { items: children });
+    return React.createElement(ChildMenu, { items: children, parentKey: FEATURE_KEYS.TEMPLATES });
 });

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TMenuItem } from '../../../types';
 interface ChildMenuProps {
+    parentKey?: string;
     items?: TMenuItem[];
     onMenuClick?: (key: string, keyPath: string[]) => void;
 }

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

@@ -17,11 +17,13 @@ import { ENV } from '@antscorp/antsomi-ui/es/config';
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Utils
 import { getGeneratePath } from '../../../utils';
+import { useLeftMenuStore } from '../../../stores';
 export const ChildMenu = memo(props => {
-    const { items = [], onMenuClick } = props;
+    const { items = [], parentKey, onMenuClick } = props;
     // Selectors
     const auth = useContextSelector(AppConfigContext, state => state === null || state === void 0 ? void 0 : state.auth);
     const env = useContextSelector(AppConfigContext, state => state === null || state === void 0 ? void 0 : state.env);
+    const setLeftMenuStoreState = useLeftMenuStore(state => state.setState);
     // States
     const [currentActiveItem, setCurrentActiveItem] = useState('');
     // Hooks
@@ -52,7 +54,9 @@ export const ChildMenu = memo(props => {
         if (activeItem && activeItem !== currentActiveItem) {
             setCurrentActiveItem(activeItem);
         }
-    }, [auth, currentActiveItem, hash, items, pathname, search]);
+        // Set Active Parent key
+        setLeftMenuStoreState({ activeAppCode: parentKey || '' });
+    }, [auth, currentActiveItem, hash, items, pathname, search, parentKey, setLeftMenuStoreState]);
     // Handlers
     const onClick = e => {
         onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);

package/es/components/organism/LeftMenu/hooks/useLeftMenu.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu/FeatureMenu';
 interface TState {
-    activeItem: string;
     hoverItem: string;
     isExpandMenu: boolean;
     featureChildren: TFeatureMenu[];
 }
 export declare const useLeftMenu: () => {
     state: TState;
+    activeAppCode: string;
     permissionMenu: TFeatureMenu[];
     appConfig: import("@antscorp/antsomi-ui/es/providers").AppConfigProviderProps;
     setState: import("react").Dispatch<import("react").SetStateAction<TState>>;

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

@@ -7,13 +7,12 @@ import { useLocation } from 'react-router-dom';
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Queries
 import { useGetListMenu, useGetListMenuPermission } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
-// Constants
-import { FEATURE_KEYS } from '../constants';
 // Utils
 import { flattenMenuArray, getGeneratePath, recursivePermissionMenu } from '../utils';
 import isEqual from 'react-fast-compare';
+import { useLeftMenuStore } from '../stores';
 const initialState = {
-    activeItem: FEATURE_KEYS.HOME,
+    // activeItem: FEATURE_KEYS.HOME,
     hoverItem: '',
     isExpandMenu: true,
     featureChildren: [],
@@ -27,6 +26,9 @@ export const useLeftMenu = () => {
     const { auth, languageCode } = appConfig;
     // State
     const [state, setState] = useState(initialState);
+    // NOTES: Trial Zustand
+    const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
+    const setLeftMenuStoreState = useLeftMenuStore(state => state.setState);
     // Queries
     const { data: menuList } = useGetListMenu({
         args: {
@@ -68,22 +70,30 @@ export const useLeftMenu = () => {
         const url = `${pathname}${hash}${search}`;
         const activeItem = (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => !isNil(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
             url.includes(getGeneratePath(item.menu_item_path, appConfig.auth)))) === null || _a === void 0 ? void 0 : _a.menu_item_code;
-        if (activeItem && activeItem !== state.activeItem) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { activeItem })));
+        if (activeItem && activeItem !== activeAppCode) {
+            setLeftMenuStoreState({ activeAppCode: activeItem });
         }
-    }, [appConfig.auth, hash, pathname, permissionMenu, search, state.activeItem]);
+    }, [
+        activeAppCode,
+        appConfig.auth,
+        hash,
+        pathname,
+        permissionMenu,
+        search,
+        setLeftMenuStoreState,
+    ]);
     useEffect(() => {
         var _a;
-        if (state.activeItem) {
-            const featureChildren = ((_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === state.activeItem)) === null || _a === void 0 ? void 0 : _a.children) || [];
+        if (activeAppCode) {
+            const featureChildren = ((_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === activeAppCode)) === null || _a === void 0 ? void 0 : _a.children) || [];
             if (!isEqual(featureChildren, state.featureChildren) && !state.hoverItem) {
                 setState(prev => {
                     var _a;
-                    return (Object.assign(Object.assign({}, prev), { featureChildren: ((_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === state.activeItem)) === null || _a === void 0 ? void 0 : _a.children) || [] }));
+                    return (Object.assign(Object.assign({}, prev), { featureChildren: ((_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === activeAppCode)) === null || _a === void 0 ? void 0 : _a.children) || [] }));
                 });
             }
         }
-    }, [permissionMenu, state.activeItem, state.featureChildren, state.hoverItem]);
+    }, [permissionMenu, activeAppCode, state.featureChildren, state.hoverItem]);
     /* Callbacks */
     const onToggleChildMenu = useCallback(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
@@ -93,10 +103,10 @@ export const useLeftMenu = () => {
         if (!state.isExpandMenu) {
             const featureChildren = !isNil(children)
                 ? children
-                : ((_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === state.activeItem)) === null || _a === void 0 ? void 0 : _a.children) || [];
+                : ((_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === activeAppCode)) === null || _a === void 0 ? void 0 : _a.children) || [];
             setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: key, featureChildren })));
         }
-    }, [permissionMenu, state.activeItem, state.isExpandMenu]);
+    }, [permissionMenu, activeAppCode, state.isExpandMenu]);
     const onMouseLeave = useCallback(() => {
         if (!state.isExpandMenu) {
             setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
@@ -105,6 +115,8 @@ export const useLeftMenu = () => {
     return {
         /* State */
         state,
+        /* Zustand */
+        activeAppCode,
         /* Data Queries */
         permissionMenu,
         appConfig,

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

@@ -27,13 +27,15 @@ export const LeftMenu = memo(props => {
     const { 
     /* State */
     state, 
+    /* Store */
+    activeAppCode, 
     /* Data Queries */
     permissionMenu, appConfig, 
     /* Callbacks */
     onToggleChildMenu, onMouseEnter, onMouseLeave, } = useLeftMenu();
     // Memo
     const childMenu = useMemo(() => {
-        const selectedFeatureKey = state.hoverItem || state.activeItem;
+        const selectedFeatureKey = state.hoverItem || activeAppCode;
         switch (selectedFeatureKey) {
             case FEATURE_KEYS.HOME: {
                 return React.createElement(HomeMenu, null);
@@ -62,12 +64,12 @@ export const LeftMenu = memo(props => {
             default:
                 return null;
         }
-    }, [state.activeItem, state.hoverItem]);
+    }, [activeAppCode, state.hoverItem]);
     // Render components
     const renderFeatureMenuItems = (item) => {
         const { menu_item_name, menu_item, icon_name, menu_item_code, menu_item_path, menu_item_domain, children = [], } = item;
         const domain = !isNil(menu_item_domain) && (appConfig === null || appConfig === void 0 ? void 0 : appConfig.env) === ENV.DEV ? menu_item_domain : '';
-        const isActive = state.activeItem === menu_item_code;
+        const isActive = activeAppCode === menu_item_code;
         const isHover = state.hoverItem === menu_item_code;
         const labelComponent = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
             React.createElement("div", { className: "icon-wrapper" }, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name, style: { fontSize: ICON_SIZE } })),
@@ -76,7 +78,7 @@ export const LeftMenu = memo(props => {
         return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code, children) }, isString(menu_item_path) ? (React.createElement(Link, { to: getGeneratePath(`${domain}${menu_item_path}`, appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth), className: "menu-link" }, labelComponent())) : (labelComponent())));
     };
     return (React.createElement(LeftMenuProvider, { value: {
-            activeItem: state.activeItem,
+            activeItem: activeAppCode,
             featureChildren: state.featureChildren,
             permissionMenu,
             objectType,
@@ -86,12 +88,12 @@ export const LeftMenu = memo(props => {
         React.createElement(LeftMenuNavWrapper, { style: style, className: className },
             React.createElement(LeftMenuNav, null,
                 React.createElement(FeatureMenuWrapper, { isExpandMenu: state.isExpandMenu, vertical: true },
-                    React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: () => onMouseEnter(state.activeItem) },
+                    React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: () => onMouseEnter(activeAppCode) },
                         React.createElement("div", { className: "image-wrapper" },
                             React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
                     React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box", onMouseLeave: onMouseLeave },
                         React.createElement("div", { className: "menu-content scroll-content" }, (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.filter(item => item.menu_item_code !== FEATURE_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => renderFeatureMenuItems(item))),
-                        React.createElement("div", { className: "nav-blank", onMouseEnter: () => onMouseEnter(state.activeItem) }),
+                        React.createElement("div", { className: "nav-blank", onMouseEnter: () => onMouseEnter(activeAppCode) }),
                         React.createElement(PopoverWrapper, { className: "antsomi-scroll-box antsomi-child-menu-popover", onMouseLeave: onMouseLeave },
                             React.createElement("div", { className: "scroll-content" }, childMenu))),
                     React.createElement("div", { style: { flexShrink: 0 } }, (() => {

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

@@ -0,0 +1 @@
+export * from './useLeftMenuStore';

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

@@ -0,0 +1 @@
+export * from './useLeftMenuStore';

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

@@ -0,0 +1,9 @@
+export interface LeftMenuStoreState {
+    activeAppCode: string;
+}
+interface LeftMenuStore {
+    state: LeftMenuStoreState;
+    setState: (state: Partial<LeftMenuStoreState>) => void;
+}
+export declare const useLeftMenuStore: import("zustand").UseBoundStore<import("zustand").StoreApi<LeftMenuStore>>;
+export {};

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

@@ -0,0 +1,11 @@
+// Libraries
+import { create } from 'zustand';
+// Constants
+import { FEATURE_KEYS } from '../constants';
+const initialState = {
+    activeAppCode: FEATURE_KEYS.HOME,
+};
+export const useLeftMenuStore = create(set => ({
+    state: initialState,
+    setState: newState => set(store => ({ state: Object.assign(Object.assign({}, store.state), newState) })),
+}));

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

@@ -52,10 +52,10 @@ export const getGeneratePath = (path, params) => {
     try {
         return generatePath(path.replace('#', `/${params === null || params === void 0 ? void 0 : params.portalId}#`), {
             user_id: (params === null || params === void 0 ? void 0 : params.userId) || '',
-            networkId: (params === null || params === void 0 ? void 0 : params.portalId) || -1,
-            portalId: (params === null || params === void 0 ? void 0 : params.portalId) || -1,
+            networkId: !isNil(params === null || params === void 0 ? void 0 : params.portalId) ? params === null || params === void 0 ? void 0 : params.portalId : -1,
+            portalId: !isNil(params === null || params === void 0 ? void 0 : params.portalId) ? params === null || params === void 0 ? void 0 : params.portalId : -1,
             reportId: (params === null || params === void 0 ? void 0 : params.reportId) || '',
-            channelId: (params === null || params === void 0 ? void 0 : params.channelId) || -1,
+            channelId: !isNil(params === null || params === void 0 ? void 0 : params.channelId) ? params === null || params === void 0 ? void 0 : params.channelId : -1,
         });
     }
     catch (error) {

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

@@ -57,6 +57,10 @@ export const NotificationWrapper = styled.div `
   padding-top: 15px;
   background-color: white;
   z-index: 9;
+
+  > div {
+    margin-bottom: 6px;
+  }
 `;
 export const ChildrenWrapper = styled.div `
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.189",
+  "version": "1.3.5-beta.190",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -60,6 +60,7 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@antscorp/antsomi-ui": "file:.yalc/@antscorp/antsomi-ui",
     "@antscorp/icons": "^0.27.14",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.0",
@@ -114,7 +115,8 @@
     "tui-image-editor": "^3.15.3",
     "uniqid": "^5.4.0",
     "use-context-selector": "^1.4.4",
-    "use-immer": "^0.9.0"
+    "use-immer": "^0.9.0",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@ant-design/cssinjs": "^1.6.2",