@antscorp/antsomi-ui 1.3.5-beta.194 → 1.3.5-beta.196

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -29,6 +29,7 @@ import { Button, Flex, Typography, Spin } from '../../atoms';
 // Constants
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
 import { getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
+const cacheValue = new Date().getTime();
 export const ThumbnailCard = memo(props => {
     const [modal, contextHolder] = Modal.useModal();
     const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, showSkeleton = true, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
@@ -53,7 +54,7 @@ export const ThumbnailCard = memo(props => {
     };
     return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
         React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
-            React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: getUrlNoCache(thumbnail), alt: "" })),
+            React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: getUrlNoCache(thumbnail, cacheValue), alt: "" })),
             actionAvailable && !loading && (React.createElement(React.Fragment, null,
                 React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
                     React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {

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

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

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

@@ -1,13 +1,13 @@
 // Libraries
-import { useEffect, useMemo } from 'react';
-import { useContextSelector } from 'use-context-selector';
-// Contexts
-import { LeftMenuContext } from '../../contexts';
+import { useMemo } from 'react';
+// Utils
 import { getMenuItem } from '../../utils';
+// Stores
+import { useLeftMenuStore } from '../../stores';
 export const useContentMenu = () => {
-    const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
-    useEffect(() => { }, [featureChildren]);
-    const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
+    // Selectors
+    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
     return {
         children: customChildren,
     };

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

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

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

@@ -1,12 +1,12 @@
 // Libraries
 import { useMemo } from 'react';
-import { useContextSelector } from 'use-context-selector';
-// Contexts
-import { LeftMenuContext } from '../../contexts';
 // Utils
 import { getMenuItem } from '../../utils';
+// Stores
+import { useLeftMenuStore } from '../../stores';
 export const useDataMenu = () => {
-    const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
-    const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
+    // Selectors
+    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
     return { children: customChildren };
 };

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

@@ -1,4 +1,3 @@
-import { TMenuFeatureItem } from '../../types';
 export declare const HOME_REPORT_ROUTES: {
     DETAIL: string;
     CONFIGURE: string;
@@ -14,4 +13,3 @@ export declare const CONFIG_OPTIONS: {
         label: string;
     };
 };
-export declare const HOME_MENU_ITEMS: Record<string, TMenuFeatureItem>;

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

@@ -13,20 +13,3 @@ export const CONFIG_OPTIONS = {
         label: 'Remove',
     },
 };
-export const HOME_MENU_ITEMS = {
-    RECENT: {
-        menu_item_name: 'Recent',
-        menu_item_code: 'recentDashboard',
-        icon_name: null,
-    },
-    OWNERS: {
-        menu_item_name: 'Owners',
-        menu_item_code: 'ownedDashboard',
-        icon_name: null,
-    },
-    SHARED_WITH_ME: {
-        menu_item_name: 'Shared with me',
-        menu_item_code: 'sharedDashboard',
-        icon_name: null,
-    },
-};

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

@@ -5,7 +5,7 @@ import { ChildMenu } from '../common';
 import { Flex } from '../../../../atoms';
 // Constants
 import Icon from '@antscorp/icons';
-import { FEATURE_KEYS } from '../../constants';
+import { APP_KEYS } from '../../constants';
 // Styled
 import { CreateButton, HomeMenuWrapper } from './styled';
 // Hooks
@@ -19,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, parentKey: FEATURE_KEYS.HOME, onMenuClick: onMenuClick }))));
+            React.createElement(ChildMenu, { items: children, parentKey: APP_KEYS.HOME, onMenuClick: onMenuClick }))));
 });

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

@@ -1,50 +1,26 @@
 // Libraries
 import { useCallback, useMemo } from 'react';
 import { useContextSelector } from 'use-context-selector';
-import { useHistory } from 'react-router-dom';
-// Queries
-import { useGetDashboard } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
+import { useHistory, useLocation } from 'react-router-dom';
 // Constants
-import { CONFIG_OPTIONS, HOME_MENU_ITEMS, HOME_REPORT_ROUTES } from './constants';
+import { CONFIG_OPTIONS, HOME_REPORT_ROUTES } from './constants';
 // Utils
 import { getGeneratePath, getMenuItem } from '../../utils';
 // Contexts
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
-import { LeftMenuContext } from '../../contexts';
+// Types
+import { useLeftMenuStore } from '../../stores';
 export const useHomeMenu = () => {
     // Hooks
+    const { pathname } = useLocation();
     const history = useHistory();
+    const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
+    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
+    const menuItems = useLeftMenuStore(store => store.state.menuItems);
     // Contexts
-    const appConfig = useContextSelector(AppConfigContext, state => state);
-    const { activeItem, permissionMenu, objectId = 0, objectType = '', isGrouped = false, } = useContextSelector(LeftMenuContext, state => state);
-    const { auth, languageCode } = appConfig;
-    // Queries
-    const { data: dashboardData } = useGetDashboard({
-        args: {
-            auth: {
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
-                url: 'https://sandbox-app.cdp.asia/hub',
-                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
-            },
-            params: {
-                objectType,
-                objectId,
-                isGrouped,
-                languageCode,
-            },
-        },
-    });
-    const dashboardObject = useMemo(() => {
-        var _a, _b;
-        return ({
-            sharedDashboard: ((_a = dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.entries) === null || _a === void 0 ? void 0 : _a.sharedDashboard) || [],
-            ownedDashboard: ((_b = dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.entries) === null || _b === void 0 ? void 0 : _b.ownedDashboard) || [],
-            recentDashboard: [],
-        });
-    }, [dashboardData]);
+    const auth = useContextSelector(AppConfigContext, state => state === null || state === void 0 ? void 0 : state.auth);
     // Memos
-    const homeItem = useMemo(() => permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === activeItem), [activeItem, permissionMenu]);
+    const homeItem = useMemo(() => menuItems === null || menuItems === void 0 ? void 0 : menuItems.find(item => item.menu_item_code === activeAppCode), [activeAppCode, menuItems]);
     // const listDashboardName = useMemo(
     //   () =>
     //     get(dashboardData, 'entries.ownedDashboard', [])?.map(overview =>
@@ -56,35 +32,33 @@ export const useHomeMenu = () => {
     const onOptionCallback = useCallback((args) => {
         const { optionKey, menuItemKey } = args;
         switch (optionKey) {
-            case CONFIG_OPTIONS.CONFIGURE.key:
-                history.push(getGeneratePath(getHomePath(HOME_REPORT_ROUTES.CONFIGURE), Object.assign(Object.assign({}, auth), { reportId: menuItemKey })));
+            case CONFIG_OPTIONS.CONFIGURE.key: {
+                const newPathName = getGeneratePath(getHomePath(HOME_REPORT_ROUTES.CONFIGURE), Object.assign(Object.assign({}, auth), { reportId: menuItemKey }));
+                if (newPathName !== pathname) {
+                    history.push(newPathName);
+                }
                 break;
+            }
             case CONFIG_OPTIONS.REMOVE.key:
                 break;
             default:
                 break;
         }
-    }, [auth, history, getHomePath]);
-    const customChildren = useMemo(() => {
+    }, [getHomePath, auth, pathname, history]);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(appMenuItem => {
         var _a;
-        return (_a = Object.values(HOME_MENU_ITEMS)) === null || _a === void 0 ? void 0 : _a.map(item => {
-            var _a;
-            return getMenuItem(Object.assign(Object.assign({}, item), { children: (_a = (((dashboardObject === null || dashboardObject === void 0 ? void 0 : dashboardObject[item.menu_item_code]) || []))) === null || _a === void 0 ? void 0 : _a.map(item => ({
-                    menu_item_name: item.dashboardName,
-                    menu_item_code: String(item.dashboardId),
-                    icon_name: null,
-                    options: Object.values(CONFIG_OPTIONS),
-                    optionCallback: onOptionCallback,
-                })) }));
-        });
-    }, [dashboardObject, onOptionCallback]);
+        return getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: (_a = appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }))) }));
+    }), [appMenuChildren, onOptionCallback]);
     // Callbacks
     const onCreateNewReport = useCallback(() => {
         history.push(getGeneratePath(getHomePath(HOME_REPORT_ROUTES.CREATE), auth));
     }, [auth, history, getHomePath]);
     const onMenuClick = useCallback((key, _) => {
-        history.push(getGeneratePath(getHomePath(HOME_REPORT_ROUTES.DETAIL), Object.assign(Object.assign({}, auth), { reportId: key })));
-    }, [auth, history, getHomePath]);
+        const newPathName = getGeneratePath(getHomePath(HOME_REPORT_ROUTES.DETAIL), Object.assign(Object.assign({}, auth), { reportId: key }));
+        if (newPathName !== pathname) {
+            history.push(newPathName);
+        }
+    }, [getHomePath, auth, pathname, history]);
     // const onCreateNewReport = useCallback(() => {
     //   const configTab = {
     //     id: generateKey(),
@@ -102,23 +76,6 @@ export const useHomeMenu = () => {
     // }, [listDashboardName]);
     return {
         children: customChildren,
-        // children: [
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        //   ...customChildren,
-        // ],
         /* Callbacks */
         onCreateNewReport,
         onOptionCallback,

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

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

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

@@ -1,13 +1,13 @@
 // Libraries
 import { useMemo } from 'react';
-import { useContextSelector } from 'use-context-selector';
-// Contexts
-import { LeftMenuContext } from '../../contexts';
 // Utils
 import { getMenuItem } from '../../utils';
+// Stores
+import { useLeftMenuStore } from '../../stores';
 export const useInsightsMenu = () => {
-    const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
-    const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
+    // Selectors
+    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
     return {
         children: customChildren,
     };

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

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

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

@@ -1,3 +1,3 @@
 export declare const useMarketingMenu: () => {
-    children: import("../../types").TMenuItem[];
+    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
 };

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

@@ -1,62 +1,14 @@
 // Libraries
 import { useMemo } from 'react';
-import { useContextSelector } from 'use-context-selector';
 import { isEmpty } from 'lodash';
-// Contexts
-import { LeftMenuContext } from '../../contexts';
-import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
-// Queries
-import { useGetDestinationChannel } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 // Utils
-import { getGeneratePath, getMenuItem } from '../../utils';
+import { getMenuItem } from '../../utils';
 // Constants
-import { CHANNEL_KEY, MARKETING_ROUTES } from './constants';
+import { useLeftMenuStore } from '../../stores';
 export const useMarketingMenu = () => {
-    // Contexts
-    const appConfig = useContextSelector(AppConfigContext, state => state);
-    const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
-    // Destructuring variables
-    const { auth, languageCode } = appConfig;
-    // Queries
-    const { data: destinationChannel } = useGetDestinationChannel({
-        args: {
-            auth: {
-                token: '5474r2x214z2a46403e4y4749426s2v544r2i4u2k5t5' || (auth === null || auth === void 0 ? void 0 : auth.token),
-                url: 'https://sandbox-app.cdp.asia/hub',
-                userId: '1600085179' || (auth === null || auth === void 0 ? void 0 : auth.userId),
-                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
-            },
-            params: {
-                objectType: 'STORIES',
-                languageCode,
-            },
-        },
-    });
+    // Selectors
+    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
     // Memos
-    const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => {
-        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: CHANNEL_KEY.ALL_CHANNEL }));
-                break;
-            case 'ORCHESTRATION':
-                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 =
-                ((_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,
-                    menu_item_path: getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: item.channelId })),
-                    icon_name: null,
-                }))) || [];
-        }
-        return getMenuItem(Object.assign(Object.assign({}, item), (isEmpty(children) ? {} : { children })));
-    }), [auth, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, featureChildren]);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(Object.assign(Object.assign({}, item), (isEmpty(item.children) ? {} : { children: item.children })))), [appMenuChildren]);
     return { children: customChildren };
 };

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

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

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

@@ -1,13 +1,13 @@
 // Libraries
 import { useMemo } from 'react';
-import { useContextSelector } from 'use-context-selector';
-// Contexts
-import { LeftMenuContext } from '../../contexts';
 // Utils
 import { getMenuItem } from '../../utils';
+// Stores
+import { useLeftMenuStore } from '../../stores';
 export const useProfilesMenu = () => {
-    const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
-    const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
+    // Selectors
+    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
     return {
         children: customChildren,
     };

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

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

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

@@ -1,12 +1,12 @@
 // Libraries
 import { useMemo } from 'react';
-import { useContextSelector } from 'use-context-selector';
-// Contexts
-import { LeftMenuContext } from '../../contexts';
 // Utils
 import { getMenuItem } from '../../utils';
+// Stores
+import { useLeftMenuStore } from '../../stores';
 export const useSettingsMenu = () => {
-    const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
-    const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
+    // Selectors
+    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
     return { children: customChildren };
 };

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

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

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

@@ -1,13 +1,13 @@
 // Libraries
 import { useMemo } from 'react';
-import { useContextSelector } from 'use-context-selector';
-// Contexts
-import { LeftMenuContext } from '../../contexts';
 // Utils
 import { getMenuItem } from '../../utils';
+// Stores
+import { useLeftMenuStore } from '../../stores';
 export const useTemplatesMenu = () => {
-    const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
-    const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
+    // Selectors
+    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
     return {
         children: customChildren,
     };

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

@@ -1,7 +1,7 @@
 // Libraries
 import React, { memo, useEffect, useState } from 'react';
 import Icon from '@antscorp/icons';
-import { isEmpty, isNil, isString } from 'lodash';
+import { isEmpty, isNil, isString, uniq } from 'lodash';
 import { Link, useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 // Components
@@ -15,48 +15,54 @@ import { ICON_SIZE } from '../../../constants';
 import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Contexts
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
-// Utils
-import { getGeneratePath } from '../../../utils';
+// Stores
 import { useLeftMenuStore } from '../../../stores';
+// Utils
+import { findActiveAppCodeByUrl, getGeneratePath } from '../../../utils';
+import { findActiveMenuItemByUrl, recursiveFindParentOfActiveItem } from './utils';
 export const ChildMenu = memo(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);
+    const setLeftMenuStoreState = useLeftMenuStore(store => store.setState);
+    const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
+    const menuItems = useLeftMenuStore(store => store.state.menuItems);
     // States
     const [currentActiveItem, setCurrentActiveItem] = useState('');
+    const [openKeys, setOpenKeys] = useState([]);
     // Hooks
     const { pathname, hash, search } = useLocation();
     // Side Effects
     useEffect(() => {
-        var _a;
         const url = `${pathname}${hash}${search}`;
-        const recursiveFindActiveItem = (items) => {
-            let activeItem;
-            for (const item of items) {
-                if (!isNil(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
-                    url.includes(getGeneratePath(item.menu_item_path, auth))) {
-                    activeItem = item;
-                    break;
-                }
-                if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
-                    const childActiveItem = recursiveFindActiveItem(item.children);
-                    if (childActiveItem) {
-                        activeItem = childActiveItem;
-                        break;
-                    }
-                }
+        /** Active menu item by current url */
+        const activeMenuItem = findActiveMenuItemByUrl({ url, menuItems, auth });
+        if (activeMenuItem && activeMenuItem !== currentActiveItem) {
+            setCurrentActiveItem(activeMenuItem);
+            /** Find parent key of active menu item to open it */
+            const parentKey = recursiveFindParentOfActiveItem({ activeMenuItem, menuItems });
+            if (parentKey) {
+                setOpenKeys(prev => [...prev, parentKey]);
+            }
+            /**  Active App Item having code matching url */
+            const matchAppCode = findActiveAppCodeByUrl({ menuItems, url, auth });
+            if (matchAppCode && matchAppCode !== activeAppCode) {
+                setLeftMenuStoreState({ activeAppCode: matchAppCode });
             }
-            return activeItem;
-        };
-        const activeItem = (_a = recursiveFindActiveItem(items)) === null || _a === void 0 ? void 0 : _a.key;
-        if (activeItem && activeItem !== currentActiveItem) {
-            setCurrentActiveItem(activeItem);
         }
-        // Set Active Parent key
-        setLeftMenuStoreState({ activeAppCode: parentKey || '' });
-    }, [auth, currentActiveItem, hash, items, pathname, search, parentKey, setLeftMenuStoreState]);
+    }, [
+        auth,
+        currentActiveItem,
+        hash,
+        items,
+        pathname,
+        search,
+        parentKey,
+        activeAppCode,
+        setLeftMenuStoreState,
+        menuItems,
+    ]);
     // Handlers
     const onClick = e => {
         onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);
@@ -88,7 +94,9 @@ export const ChildMenu = memo(props => {
         });
     };
     return (React.createElement(MenuWrapper, { className: "child-menu" },
-        React.createElement(Menu, { selectedKeys: [currentActiveItem], defaultOpenKeys: [currentActiveItem], mode: "inline", items: customMenuItems({ items }), inlineIndent: 10, expandIcon: ({ isOpen }) => (React.createElement(Icon, { type: "icon-ants-expand-more", style: {
+        React.createElement(Menu, { selectedKeys: [currentActiveItem], defaultOpenKeys: [currentActiveItem], openKeys: uniq(openKeys), mode: "inline", items: customMenuItems({ items }), inlineIndent: 10, onOpenChange: openKeys => {
+                setOpenKeys(openKeys);
+            }, expandIcon: ({ isOpen }) => (React.createElement(Icon, { type: "icon-ants-expand-more", style: {
                     fontSize: ICON_SIZE,
                     color: 'inherit',
                     // color: THEME.token?.bw8,

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

@@ -0,0 +1,18 @@
+import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+export declare const findActiveMenuItemByUrl: (args: {
+    url: string;
+    menuItems: TFeatureMenu[];
+    auth?: Partial<PayloadInfo>;
+}) => string | undefined;
+/**
+ * Recursively finds the parent key of the active menu item within the given menu items.
+ * @param {object} args - The arguments object.
+ * @param {string} args.activeMenuItem - The key of the active menu item.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search within.
+ * @returns {string | undefined} The key of the parent menu item or undefined if not found.
+ */
+export declare const recursiveFindParentOfActiveItem: (args: {
+    activeMenuItem: string;
+    menuItems: TFeatureMenu[];
+}) => string | undefined;