@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

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

@@ -0,0 +1,15 @@
+export declare const HOME_REPORT_ROUTES: {
+    DETAIL: string;
+    CONFIGURE: string;
+    CREATE: string;
+};
+export declare const CONFIG_OPTIONS: {
+    CONFIGURE: {
+        key: string;
+        label: string;
+    };
+    REMOVE: {
+        key: string;
+        label: string;
+    };
+};

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

@@ -0,0 +1,15 @@
+export const HOME_REPORT_ROUTES = {
+    DETAIL: 'detail/:dashboardId',
+    CONFIGURE: 'detail/:dashboardId/configure',
+    CREATE: 'create',
+};
+export const CONFIG_OPTIONS = {
+    CONFIGURE: {
+        key: 'configure',
+        label: 'Configure',
+    },
+    REMOVE: {
+        key: 'remove',
+        label: 'Remove',
+    },
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const HomeMenu: React.FC;

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

@@ -0,0 +1,23 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+import { Flex } from '../../../../atoms';
+// Constants
+import Icon from '@antscorp/icons';
+import { APP_KEYS } from '../../constants';
+// Styled
+import { CreateButton, HomeMenuWrapper } from './styled';
+// Hooks
+import { useHomeMenu } from './useHomeMenu';
+export const HomeMenu = memo(() => {
+    // Handlers
+    const { children, onCreateNewReport, onMenuClick } = useHomeMenu();
+    return (React.createElement(HomeMenuWrapper, { vertical: true },
+        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"))),
+        React.createElement("div", { className: "menu-list" },
+            React.createElement(ChildMenu, { items: children, parentKey: APP_KEYS.HOME, onMenuClick: onMenuClick }))));
+});

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const HomeMenuWrapper: 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 CreateButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;

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

@@ -0,0 +1,36 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Button, Flex } from '../../../../atoms';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const HomeMenuWrapper = styled(Flex) `
+  height: 100%;
+
+  .menu-list {
+    width: 100%;
+    flex: 1 1 0%;
+    overflow: hidden;
+
+    .antsomi-menu {
+      & > li > ul {
+        font-weight: 400 !important;
+        font-size: 11px !important;
+      }
+
+      ::-webkit-scrollbar {
+        width: 13px !important;
+        height: 8px;
+      }
+    }
+  }
+`;
+export const CreateButton = styled(Button) `
+  width: 106px;
+  height: 37px !important;
+  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px !important;
+  box-shadow: none !important;
+  font-size: 14px !important;
+  flex-shrink: 0;
+`;

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

@@ -0,0 +1,9 @@
+export declare const useHomeMenu: () => {
+    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    onCreateNewReport: () => void;
+    onOptionCallback: (args: {
+        menuItemKey: string;
+        optionKey: string;
+    }) => void;
+    onMenuClick: (key: string, _: any) => void;
+};

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

@@ -0,0 +1,84 @@
+// Libraries
+import { useCallback, useMemo } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import { useHistory, useLocation } from 'react-router-dom';
+// Constants
+import { CONFIG_OPTIONS, HOME_REPORT_ROUTES } from './constants';
+// Utils
+import { getGeneratePath, getMenuItem } from '../../utils';
+// Contexts
+import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+// 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 auth = useContextSelector(AppConfigContext, state => state === null || state === void 0 ? void 0 : state.auth);
+    // Memos
+    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 =>
+    //       get(overview, 'dashboardName', ''),
+    //     ) || [],
+    //   [dashboardData],
+    // );
+    const getHomePath = useCallback((path) => `${(homeItem === null || homeItem === void 0 ? void 0 : homeItem.menu_item_path) || ''}/${path}`, [homeItem === null || homeItem === void 0 ? void 0 : homeItem.menu_item_path]);
+    const onOptionCallback = useCallback((args) => {
+        const { optionKey, menuItemKey } = args;
+        switch (optionKey) {
+            case CONFIG_OPTIONS.CONFIGURE.key: {
+                const newPathName = getGeneratePath(getHomePath(HOME_REPORT_ROUTES.CONFIGURE), Object.assign(Object.assign({}, auth), { dashboardId: menuItemKey }));
+                if (newPathName !== pathname) {
+                    history.push(newPathName);
+                }
+                break;
+            }
+            case CONFIG_OPTIONS.REMOVE.key:
+                break;
+            default:
+                break;
+        }
+    }, [getHomePath, auth, pathname, history]);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(appMenuItem => {
+        var _a;
+        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, _) => {
+        const newPathName = getGeneratePath(getHomePath(HOME_REPORT_ROUTES.DETAIL), Object.assign(Object.assign({}, auth), { dashboardId: key }));
+        if (newPathName !== pathname) {
+            history.push(newPathName);
+        }
+    }, [getHomePath, auth, pathname, history]);
+    // const onCreateNewReport = useCallback(() => {
+    //   const configTab = {
+    //     id: generateKey(),
+    //     dashboardName: getDefaultDashboardName(listDashboardName),
+    //     layout: 'settings',
+    //     filters: [],
+    //     enableParamFilter: 1,
+    //     portalId: getPortalId({}),
+    //     status: 1,
+    //   };
+    //   // onUpdateLoading({ isLoading: false });
+    //   // props.onAddNewOverview({
+    //   //   configTab,
+    //   // });
+    // }, [listDashboardName]);
+    return {
+        children: customChildren,
+        /* Callbacks */
+        onCreateNewReport,
+        onOptionCallback,
+        onMenuClick,
+    };
+};

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

@@ -0,0 +1 @@
+export declare const getDefaultDashboardName: (listDashboardName: string[]) => string;

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

@@ -0,0 +1,30 @@
+export const getDefaultDashboardName = (listDashboardName) => {
+    let listDefaultName = [];
+    let number = 1;
+    const regexDefaultName = /^Untitled dashboard #(\d+)$/;
+    if (listDashboardName && listDashboardName.length) {
+        listDefaultName = listDashboardName
+            .filter(dashboardName => regexDefaultName.test(dashboardName))
+            .map(dashboardName => +dashboardName.replace('Untitled dashboard #', ''))
+            .sort((num1, num2) => num1 - num2)
+            .reduce((accum, current) => {
+            if (!accum.length || current !== accum[accum.length - 1]) {
+                accum.push(current);
+            }
+            return accum;
+        }, []);
+    }
+    if (listDefaultName.length) {
+        let index = 0;
+        while (index < listDefaultName.length) {
+            if (listDefaultName[index] === number) {
+                number++;
+                index++;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return `Untitled dashboard #${number}`;
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const InsightsMenu: React.FC;

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

@@ -0,0 +1,12 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Contexts
+import { useInsightsMenu } from './useInsightsMenu';
+// Constants
+import { APP_KEYS } from '../../constants';
+export const InsightsMenu = memo(() => {
+    const { children } = useInsightsMenu();
+    return React.createElement(ChildMenu, { items: children, parentKey: APP_KEYS.INSIGHTS });
+});

package/es/components/organism/LeftMenu/components/InsightsMenu/useInsightsMenu.d.ts

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

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

@@ -0,0 +1,14 @@
+// Libraries
+import { useMemo } from 'react';
+// Utils
+import { getMenuItem } from '../../utils';
+// Stores
+import { useLeftMenuStore } from '../../stores';
+export const useInsightsMenu = () => {
+    // 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/constants.d.ts

@@ -0,0 +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

@@ -0,0 +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.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MarketingMenu: React.FC;

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

@@ -0,0 +1,12 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Hooks
+import { useMarketingMenu } from './useMarketingMenu';
+// Constants
+import { APP_KEYS } from '../../constants';
+export const MarketingMenu = memo(() => {
+    const { children } = useMarketingMenu();
+    return React.createElement(ChildMenu, { items: children, parentKey: APP_KEYS.MARKETING });
+});

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

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

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

@@ -0,0 +1,14 @@
+// Libraries
+import { useMemo } from 'react';
+import { isEmpty } from 'lodash';
+// Utils
+import { getMenuItem } from '../../utils';
+// Constants
+import { useLeftMenuStore } from '../../stores';
+export const useMarketingMenu = () => {
+    // Selectors
+    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
+    // Memos
+    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.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ProfilesMenu: React.FC;

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

@@ -0,0 +1,12 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Hooks
+import { useProfilesMenu } from './useProfilesMenu';
+// Constants
+import { APP_KEYS } from '../../constants';
+export const ProfilesMenu = memo(() => {
+    const { children } = useProfilesMenu();
+    return React.createElement(ChildMenu, { items: children, parentKey: APP_KEYS.PROFILES });
+});

package/es/components/organism/LeftMenu/components/ProfilesMenu/useProfilesMenu.d.ts

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

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

@@ -0,0 +1,14 @@
+// Libraries
+import { useMemo } from 'react';
+// Utils
+import { getMenuItem } from '../../utils';
+// Stores
+import { useLeftMenuStore } from '../../stores';
+export const useProfilesMenu = () => {
+    // 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.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SettingsMenu: React.FC;

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

@@ -0,0 +1,12 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Hooks
+import { useSettingsMenu } from './useSettingsMenu';
+// Constants
+import { APP_KEYS } from '../../constants';
+export const SettingsMenu = memo(() => {
+    const { children } = useSettingsMenu();
+    return React.createElement(ChildMenu, { items: children, parentKey: APP_KEYS.SETTINGS });
+});

package/es/components/organism/LeftMenu/components/SettingsMenu/useSettingsMenu.d.ts

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

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

@@ -0,0 +1,12 @@
+// Libraries
+import { useMemo } from 'react';
+// Utils
+import { getMenuItem } from '../../utils';
+// Stores
+import { useLeftMenuStore } from '../../stores';
+export const useSettingsMenu = () => {
+    // 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.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TemplatesMenu: React.FC;

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

@@ -0,0 +1,12 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Hooks
+import { useTemplatesMenu } from './useTemplatesMenu';
+// Constants
+import { APP_KEYS } from '../../constants';
+export const TemplatesMenu = memo(() => {
+    const { children } = useTemplatesMenu();
+    return React.createElement(ChildMenu, { items: children, parentKey: APP_KEYS.TEMPLATES });
+});

package/es/components/organism/LeftMenu/components/TemplatesMenu/useTemplatesMenu.d.ts

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

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

@@ -0,0 +1,14 @@
+// Libraries
+import { useMemo } from 'react';
+// Utils
+import { getMenuItem } from '../../utils';
+// Stores
+import { useLeftMenuStore } from '../../stores';
+export const useTemplatesMenu = () => {
+    // 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/components/MenuItemImage/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MenuItemImageProps {
+    imageUrl: string;
+    fallbackIcon?: string | null;
+}
+export declare const MenuItemImage: React.FC<MenuItemImageProps>;
+export {};

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

@@ -0,0 +1,9 @@
+// Libraries
+import React, { memo, useState } from 'react';
+import Icon from '@antscorp/icons';
+import { isNil } from 'lodash';
+import { Flex } from 'antd';
+export const MenuItemImage = memo(({ fallbackIcon, imageUrl }) => {
+    const [isExistImage, setIsExistImage] = useState(true);
+    return (React.createElement(Flex, { style: { marginRight: '10px' }, align: "center", justify: "center" }, isExistImage ? (React.createElement("img", { src: imageUrl, alt: "", onError: () => setIsExistImage(false) })) : isNil(fallbackIcon) ? null : (React.createElement(Icon, { type: fallbackIcon, style: { fontSize: 25 } }))));
+});

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

@@ -0,0 +1 @@
+export { MenuItemImage } from './MenuItemImage';

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

@@ -0,0 +1 @@
+export { MenuItemImage } from './MenuItemImage';

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

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

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

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

package/es/components/organism/LeftMenu/components/common/ChildMenu/constants/sampleData.d.ts

@@ -0,0 +1,2 @@
+import { TMenuItem } from '../../../../types';
+export declare const SAMPLE_ITEMS: TMenuItem[];

package/es/components/organism/LeftMenu/components/common/ChildMenu/constants/sampleData.js

@@ -0,0 +1,39 @@
+export const SAMPLE_ITEMS = [
+    {
+        key: 'all-Channels',
+        label: 'All Channels',
+        icon: 'icon-ants-emoji',
+    },
+    {
+        key: 'campaigns',
+        label: 'Campaigns',
+        icon: 'icon-ants-emoji',
+        children: [
+            {
+                key: 'on-site-message',
+                label: 'On-site Message',
+                icon: 'icon-ants-emoji',
+            },
+            {
+                key: 'web-notification',
+                label: 'Web notification',
+                icon: 'icon-ants-emoji',
+            },
+            {
+                key: 'app-notification',
+                label: 'App notification',
+                icon: 'icon-ants-emoji',
+            },
+            {
+                key: 'email',
+                label: 'Email',
+                icon: 'icon-ants-emoji',
+            },
+        ],
+    },
+    {
+        key: 'orchestration',
+        label: 'Orchestration',
+        icon: 'icon-ants-emoji',
+    },
+];

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TMenuItem } from '../../../types';
+interface ChildMenuProps {
+    parentKey?: string;
+    items?: TMenuItem[];
+    onMenuClick?: (key: string, keyPath: string[]) => void;
+}
+export declare const ChildMenu: React.FC<ChildMenuProps>;
+export {};

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

@@ -0,0 +1,108 @@
+// Libraries
+import React, { memo, useEffect, useState } from 'react';
+import Icon from '@antscorp/icons';
+import { isEmpty, isNil, isString, uniq } from 'lodash';
+import { Link, useLocation } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+// Components
+import { Dropdown, Menu } from 'antd';
+import { Flex } from '../../../../../atoms';
+import { MenuItemImage } from './components';
+// Styled
+import { LabelCustom, MenuWrapper } from './styled';
+// Constants
+import { ICON_SIZE } from '../../../constants';
+// Contexts
+import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+// Utils
+import { findActiveAppCodeByUrl, findLastMatchedCodeByUrl } from '../../../utils';
+import { recursiveFindParentOfActiveItem } from './utils';
+import { random } from '@antscorp/antsomi-ui/es/utils';
+// Hooks
+import { useLeftMenuStore } from '../../../stores';
+import { useNavigatePath } from '../../../hooks/useNavigatePath';
+export const ChildMenu = memo(props => {
+    const { items = [], parentKey, onMenuClick } = props;
+    // Contexts
+    const auth = useContextSelector(AppConfigContext, state => state === null || state === void 0 ? void 0 : state.auth);
+    // Stores
+    const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
+    const menuItems = useLeftMenuStore(store => store.state.menuItems);
+    const setLeftMenuState = useLeftMenuStore(store => store.setState);
+    // States
+    const [currentActiveItem, setCurrentActiveItem] = useState('');
+    const [openKeys, setOpenKeys] = useState([]);
+    // Variables
+    const randomMenuWrapperId = random(10);
+    // Hooks
+    const { pathname, hash, search } = useLocation();
+    const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
+    // Side Effects
+    useEffect(() => {
+        const url = `${pathname}${hash}${search}`;
+        /** Active menu item by current url */
+        const activeMenuItem = findLastMatchedCodeByUrl({ 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) {
+                setLeftMenuState({ activeAppCode: matchAppCode });
+            }
+        }
+    }, [
+        auth,
+        currentActiveItem,
+        hash,
+        items,
+        pathname,
+        search,
+        parentKey,
+        activeAppCode,
+        menuItems,
+        setLeftMenuState,
+    ]);
+    // Handlers
+    const onClick = e => {
+        onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);
+    };
+    // Render components
+    const customMenuItems = (args) => {
+        var _a;
+        return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+            var _a;
+            const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, optionCallback, } = item;
+            const labelComponent = () => (!children || isEmpty(children)) && !isEmpty(options) ? (React.createElement(Flex, { gap: 10, align: "center", justify: "space-between", style: { width: '100%' }, className: "child-menu-label" },
+                React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
+                React.createElement(Dropdown, { menu: {
+                        items: options,
+                        onClick: e => {
+                            e.domEvent.stopPropagation();
+                            e.domEvent.preventDefault();
+                            optionCallback === null || optionCallback === void 0 ? void 0 : optionCallback({ menuItemKey: key, optionKey: e.key });
+                        },
+                    }, trigger: ['click'], getPopupContainer: trigger => trigger.parentElement },
+                    React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: { marginTop: '2px', zIndex: 1000 } })))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
+            return {
+                key,
+                label: isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent()))) : (labelComponent()),
+                icon: !isNil(icon) ? (React.createElement(Icon, { type: icon, style: { fontSize: ICON_SIZE } })) : !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 })) : null,
+                children: customMenuItems({ parent: item, items: children }),
+            };
+        });
+    };
+    return (React.createElement(MenuWrapper, { className: "child-menu", id: randomMenuWrapperId },
+        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,
+                    transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
+                } })), onClick: onClick })));
+});