@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

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

@@ -0,0 +1,41 @@
+import { TMenuFeatureItem } from '../types';
+export declare const APP_KEYS: {
+    HOME: string;
+    MARKETING: string;
+    CONTENT: string;
+    TEMPLATES: string;
+    PROFILES: string;
+    DATA: string;
+    INSIGHTS: string;
+    SETTINGS: string;
+};
+export declare const MENU_ITEM_TYPE: {
+    APP: number;
+    MENU: number;
+    GROUP_MENU: number;
+};
+export declare const ICON_SIZE = 20;
+export declare const HOME_MENU_ITEMS: Record<string, TMenuFeatureItem>;
+export declare const HOME_ROUTE = "/gen2/:networkId/dashboard";
+export declare const HOME_REPORT_ROUTES: {
+    DETAIL: string;
+    CONFIGURE: string;
+    CREATE: string;
+};
+export declare const MARKETING_ROUTES: {
+    CHANNEL: string;
+};
+export declare const MARKETING_CHANNEL_KEY: {
+    readonly ALL_CHANNEL: 0;
+    readonly JOURNEY_ORCHESTRATION: 8;
+};
+export declare const RENDER_OPTION: {
+    readonly CHANNEL: "destination_channel";
+};
+/** SETTING APP */
+export declare const SETTING_APP: {
+    CHANNEL_INTEGRATION: {
+        code: string;
+        path: string;
+    };
+};

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

@@ -0,0 +1,53 @@
+export const APP_KEYS = {
+    HOME: 'HOME',
+    MARKETING: 'MARKETING',
+    CONTENT: 'PROMOTION_CENTER',
+    TEMPLATES: 'TEMPLATE',
+    PROFILES: 'PROFILE',
+    DATA: 'DATA',
+    INSIGHTS: 'INSIGHT',
+    SETTINGS: 'SETTING',
+};
+export const MENU_ITEM_TYPE = {
+    APP: 1,
+    MENU: 2,
+    GROUP_MENU: 3,
+};
+export const ICON_SIZE = 20;
+/* HOME APP */
+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,
+    },
+};
+export const HOME_ROUTE = '/gen2/:networkId/dashboard';
+export const HOME_REPORT_ROUTES = {
+    DETAIL: `${HOME_ROUTE}/detail/:dashboardId`,
+    CONFIGURE: `configure`,
+    CREATE: `create`,
+};
+/* MARKETING APP */
+export const MARKETING_ROUTES = {
+    CHANNEL: '/gen2/:networkId/:user_id/marketing-hub/journeys/:channelId/list',
+};
+export const MARKETING_CHANNEL_KEY = { ALL_CHANNEL: 0, JOURNEY_ORCHESTRATION: 8 };
+export const RENDER_OPTION = { CHANNEL: 'destination_channel' };
+/** SETTING APP */
+export const SETTING_APP = {
+    CHANNEL_INTEGRATION: {
+        code: 'CHANNEL_INTEGRATION',
+        path: '/gen2/:networkId/:user_id/marketing-hub/destinations/:channelId',
+    },
+};

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

@@ -0,0 +1,2 @@
+export { useLeftMenu } from './useLeftMenu';
+export { useNavigatePath } from './useNavigatePath';

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

@@ -0,0 +1,2 @@
+export { useLeftMenu } from './useLeftMenu';
+export { useNavigatePath } from './useNavigatePath';

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

@@ -0,0 +1,16 @@
+import { LeftMenuProps } from '..';
+interface TState {
+    hoverItem: string;
+    isExpandMenu: boolean;
+}
+export declare const useLeftMenu: (props: LeftMenuProps) => {
+    state: TState;
+    activeAppCode: string;
+    permissionMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    customActiveAppKey: string;
+    onToggleChildMenu: () => void;
+    onMouseEnter: (key: string) => void;
+    onMouseLeave: () => void;
+    onHoverMenuBar: () => void;
+};
+export {};

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

@@ -0,0 +1,233 @@
+// Libraries
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { isArray, sortBy } from 'lodash';
+// Queries
+import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMenuPermission, } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
+// Utils
+import { findActiveAppCodeByChild, findActiveAppCodeByUrl, findLastMatchedItemByUrl, findPathOfActiveItem, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
+// Store
+import { useLeftMenuStore } from '../stores';
+import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants/postMessage';
+// Constants
+import { CDP_API, PERMISSION_API } from '@antscorp/antsomi-ui/es/constants';
+const initialState = {
+    hoverItem: '',
+    isExpandMenu: true,
+};
+export const useLeftMenu = (props) => {
+    // Props
+    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, appConfig, customization, onActiveMenuCodeChange, } = props;
+    const { isExpandable = true, isCustomized = false, items, activeKey } = customization || {};
+    const { pathname, hash } = window.location;
+    const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
+    const customActiveAppKey = useLeftMenuStore(store => store.state.customActiveAppKey);
+    const setLeftMenuState = useLeftMenuStore(store => store.setState);
+    const { auth, languageCode = 'en', env = 'development' } = appConfig || {};
+    const [state, setState] = useState(initialState);
+    // const { data: menuList } = useGetListMenu({
+    //   args: {
+    //     auth: {
+    //       token: env === 'production' ? auth?.token : '5474r2x214z284d4w2b4y444d464b444q4y274u4t5x5',
+    //       url: 'https://permission.antsomi.com',
+    //       portalId: env === 'production' ? auth?.portalId : 561236459,
+    //       userId: env === 'production' ? auth?.userId : '1600083836',
+    //       accountId: env === 'production' ? auth?.accountId : '1600083836',
+    //     },
+    //     params: {
+    //       type: 'menu-item-permission',
+    //     },
+    //   },
+    // });
+    const { data: menuList } = useGetListMenu({
+        args: {
+            auth: {
+                token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || (auth === null || auth === void 0 ? void 0 : auth.token),
+                url: 'https://sandbox-permission.ants.vn',
+                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                accountId: auth === null || auth === void 0 ? void 0 : auth.accountId,
+            },
+            params: {
+                type: 'menu-item-permission',
+            },
+        },
+    });
+    const { data: menuListPermission } = useGetListMenuPermission({
+        args: {
+            auth: {
+                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                url: PERMISSION_API,
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                accountId: auth === null || auth === void 0 ? void 0 : auth.userId,
+            },
+            params: {
+                type: 'list-app',
+                from: 'side',
+                hasChild: true,
+                languageCode,
+            },
+        },
+    });
+    const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
+        args: {
+            auth: {
+                token: env === 'development' ? '5474r2x214z284d4w2b4y494d43464k5a4v2j464m5a4' : auth === null || auth === void 0 ? void 0 : auth.token,
+                url: env === 'development' ? `${CDP_API.production}/hub` : `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub`,
+                portalId: env === 'development' ? 561236459 : auth === null || auth === void 0 ? void 0 : auth.portalId,
+                userId: env === 'development' ? '1600083836' : auth === null || auth === void 0 ? void 0 : auth.userId,
+            },
+            params: {
+                objectType,
+                objectId,
+                isGrouped,
+                languageCode,
+            },
+        },
+    });
+    const { data: destinationChannel } = useGetDestinationChannel({
+        args: {
+            auth: {
+                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                url: env ? `${CDP_API[env]}/hub` : '',
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+            },
+            params: {
+                objectType: 'DESTINATIONS',
+                languageCode,
+            },
+        },
+    });
+    const flattenMenuPermission = flattenMenuArray(menuListPermission || [], 'childs');
+    const permissionMenu = useMemo(() => recursivePermissionMenu(sortBy((menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [], ['level_position']), flattenMenuPermission), [menuList === null || menuList === void 0 ? void 0 : menuList.rows, flattenMenuPermission]);
+    const mappingChildrenMenu = useMemo(() => getMappingAppChildren({
+        menuList: permissionMenu,
+        auth,
+        dashboardData,
+        destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
+    }), [auth, dashboardData, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, permissionMenu]);
+    const receivePostMessage = (event) => {
+        const { data } = event;
+        const { type } = data || {};
+        switch (type) {
+            case POST_MESSAGE_TYPES.REFETCH_DASHBOARD_LIST: {
+                refetchDashboard();
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    // Receive Post Message
+    useEffect(() => {
+        if (!isCustomized) {
+            window.addEventListener('message', receivePostMessage);
+            return () => window.removeEventListener('message', receivePostMessage);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        setLeftMenuState({ appConfig, isCustomized });
+    }, [appConfig, isCustomized, setLeftMenuState]);
+    // Active Custom App Key when active key is changed
+    useEffect(() => {
+        if (activeKey && items)
+            setLeftMenuState({
+                customActiveAppKey: findActiveAppCodeByChild({
+                    activeCurrentKey: activeKey,
+                    menuItems: items,
+                }) || '',
+                customActiveCurrentKey: activeKey,
+            });
+    }, [activeKey, appConfig, isCustomized, items, setLeftMenuState]);
+    // Change list menu children when hovering or activating items, giving priority to hovering items
+    useEffect(() => {
+        var _a, _b;
+        if (isCustomized) {
+            const appActiveKey = state.hoverItem ? state.hoverItem : customActiveAppKey;
+            setLeftMenuState({
+                customItems: items,
+                customMenuChildren: ((_a = items === null || items === void 0 ? void 0 : items.find(item => item.key === appActiveKey)) === null || _a === void 0 ? void 0 : _a.children) || [],
+            });
+        }
+        else {
+            const appCode = state.hoverItem ? state.hoverItem : activeAppCode;
+            if (isArray(mappingChildrenMenu)) {
+                setLeftMenuState({
+                    menuItems: mappingChildrenMenu,
+                    appMenuChildren: ((_b = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appCode)) === null || _b === void 0 ? void 0 : _b.children) || [],
+                });
+            }
+        }
+    }, [
+        activeAppCode,
+        customActiveAppKey,
+        isCustomized,
+        items,
+        mappingChildrenMenu,
+        state.hoverItem,
+        setLeftMenuState,
+    ]);
+    useEffect(() => {
+        if (!isCustomized) {
+            const url = `${pathname}${hash}`;
+            // Active App Item having code matching url
+            const matchAppCode = findActiveAppCodeByUrl({ url, menuItems: mappingChildrenMenu, auth });
+            if (matchAppCode && matchAppCode !== activeAppCode) {
+                setLeftMenuState({ activeAppCode: matchAppCode });
+            }
+        }
+    }, [activeAppCode, auth, hash, isCustomized, mappingChildrenMenu, pathname, setLeftMenuState]);
+    useEffect(() => {
+        if (!isCustomized) {
+            const url = `${pathname}${hash}`;
+            // Callback function using at Layout when url change
+            const matchedCode = findLastMatchedItemByUrl({
+                url,
+                menuItems: mappingChildrenMenu,
+                auth,
+            });
+            const activeItemPath = matchedCode
+                ? findPathOfActiveItem({
+                    activeMenuItem: matchedCode,
+                    menuItems: mappingChildrenMenu,
+                })
+                : [];
+            onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission);
+        }
+    }, [
+        auth,
+        flattenMenuPermission,
+        hash,
+        isCustomized,
+        mappingChildrenMenu,
+        pathname,
+        onActiveMenuCodeChange,
+    ]);
+    const onToggleChildMenu = useCallback(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
+    }, []);
+    const onMouseEnter = useCallback((key) => {
+        if (!state.isExpandMenu || !isExpandable) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: key })));
+        }
+    }, [isExpandable, state.isExpandMenu]);
+    const onMouseLeave = useCallback(() => {
+        if (!state.isExpandMenu || !isExpandable) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
+        }
+    }, [isExpandable, state.isExpandMenu]);
+    const onHoverMenuBar = () => {
+        onMouseEnter(isCustomized ? customActiveAppKey : activeAppCode);
+    };
+    return {
+        state,
+        activeAppCode,
+        permissionMenu,
+        customActiveAppKey,
+        onToggleChildMenu,
+        onMouseEnter,
+        onMouseLeave,
+        onHoverMenuBar,
+    };
+};

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

@@ -0,0 +1,5 @@
+export declare const useNavigatePath: () => {
+    isPushDifferentDomain: (domain: string | null, path: string | null) => boolean;
+    getPath: (path: string | null) => string;
+    navigatePath: (domain: string | null, path: string | null) => void;
+};

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

@@ -0,0 +1,47 @@
+// Libraries
+import { useContextSelector } from 'use-context-selector';
+import { useCallback } from 'react';
+import { isNil } from 'lodash';
+// Contexts
+import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+// Utils
+import { getGeneratePath } from '../utils';
+// Constants
+import { ENV } from '@antscorp/antsomi-ui/es/config';
+import { useLocation } from 'react-router-dom';
+export const useNavigatePath = () => {
+    // Contexts
+    const { auth, env } = useContextSelector(AppConfigContext, state => state);
+    const { search } = useLocation();
+    const searchParams = search === '?' || !search ? '' : search;
+    const isDev = env === ENV.DEV;
+    // Callbacks
+    const isPushDifferentDomain = useCallback((domain, path) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (isDev)
+            return false;
+        const customDomain = domain !== null && domain !== void 0 ? domain : '';
+        const splitNextPath = (path === null || path === void 0 ? void 0 : path.split('#')) || ['', ''];
+        const isCurrentPathIncludeHash = (_b = (_a = window.location) === null || _a === void 0 ? void 0 : _a.href) === null || _b === void 0 ? void 0 : _b.includes('#');
+        const isNextPathIncludeHash = path === null || path === void 0 ? void 0 : path.includes('#');
+        if (isCurrentPathIncludeHash && isNextPathIncludeHash) {
+            const currentRoute = ((_e = (_d = (_c = window.location.href) === null || _c === void 0 ? void 0 : _c.split) === null || _d === void 0 ? void 0 : _d['#']) === null || _e === void 0 ? void 0 : _e[0]) || '';
+            const nextRoute = `${customDomain}${splitNextPath[0]}`;
+            return currentRoute !== nextRoute;
+        }
+        return !!customDomain && customDomain !== ((_f = window.location) === null || _f === void 0 ? void 0 : _f.origin);
+    }, [isDev]);
+    const getPath = useCallback((path) => {
+        var _a;
+        if (path === null || path === void 0 ? void 0 : path.includes('#')) {
+            const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
+            return getGeneratePath(customPath, auth);
+        }
+        return getGeneratePath(`${path !== null && path !== void 0 ? path : ''}${searchParams}`, auth);
+    }, [auth, searchParams]);
+    const navigatePath = useCallback((domain, path) => {
+        const newDomain = isNil(domain) || env === ENV.DEV ? '' : domain;
+        window.location.assign(getGeneratePath(`${newDomain}${path}${searchParams}`, auth));
+    }, [auth, env, searchParams]);
+    return { isPushDifferentDomain, getPath, navigatePath };
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu/FeatureMenu';
+import { FeatureMenuPermission } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { AppConfigProviderProps } from '../../..';
+import { TMenuItem } from './types';
+export interface LeftMenuProps {
+    appConfig?: AppConfigProviderProps;
+    objectType?: string;
+    objectId?: number;
+    isGrouped?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    customization?: {
+        isCustomized?: boolean;
+        isExpandable?: boolean;
+        items?: TMenuItem[];
+        activeKey?: string;
+        onMenuItemClick?: (key: string, keyPath: string[]) => void;
+    };
+    onActiveMenuCodeChange?: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[]) => void;
+}
+export declare const LeftMenu: React.FC<LeftMenuProps>;

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

@@ -0,0 +1,88 @@
+// Libraries
+import React, { memo, useCallback, useMemo } from 'react';
+import Icon from '@antscorp/icons';
+import { Typography } from 'antd';
+import classNames from 'classnames';
+import { isNil, isString } from 'lodash';
+import { Link } from 'react-router-dom';
+// Assets
+import SubLogoAntsomi from '@antscorp/antsomi-ui/es/assets/images/logo/sub-logo-antsomi.png';
+// Styled
+import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, IconWrapper, } from './styled';
+// Constants
+import { APP_KEYS } from './constants';
+// Components
+import { CustomMenu, CommonMenu, HomeMenu } from './components';
+// Hooks
+import { useLeftMenu, useNavigatePath } from './hooks';
+export const LeftMenu = memo(props => {
+    const { style, className, customization } = props;
+    const { isExpandable = true, isCustomized = false, items = [], onMenuItemClick, } = customization || {};
+    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;
+        if (isCustomized)
+            return React.createElement(CustomMenu, { onMenuItemClick: onMenuItemClick });
+        switch (selectedFeatureKey) {
+            case APP_KEYS.HOME:
+                return React.createElement(HomeMenu, null);
+            default:
+                return React.createElement(CommonMenu, null);
+        }
+    }, [activeAppCode, isCustomized, state.hoverItem, onMenuItemClick]);
+    const renderFeatureMenuItems = 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;
+        const isHover = state.hoverItem === menu_item_code;
+        const renderLabel = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
+            React.createElement(IconWrapper, null, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name })),
+            React.createElement(Typography.Text, null, menu_item_name),
+            React.createElement("div", { className: "popup-triangle" })));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path) }, renderLabel())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, renderLabel()))) : (renderLabel())));
+    }, [activeAppCode, getPath, isPushDifferentDomain, navigatePath, onMouseEnter, state.hoverItem]);
+    const renderCustomizedMenuItems = useCallback((items) => items === null || items === void 0 ? void 0 : items.map(item => {
+        const { key, icon, label } = item;
+        const isActive = key === customActiveAppKey;
+        const isHover = key === state.hoverItem;
+        return (React.createElement(FeatureMenuItem, { key: key, onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [key]), onMouseEnter: () => onMouseEnter(key) },
+            React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
+                React.createElement(IconWrapper, null, isNil(icon) ? null : React.createElement(Icon, { type: icon })),
+                React.createElement(Typography.Text, null, label),
+                isExpandable && React.createElement("div", { className: "popup-triangle" }))));
+    }), [customActiveAppKey, state.hoverItem, isExpandable, onMenuItemClick, onMouseEnter]);
+    const renderAppMenuItems = useCallback(() => {
+        var _a;
+        return isCustomized
+            ? renderCustomizedMenuItems(items)
+            : (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.filter(item => item.menu_item_code !== APP_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => renderFeatureMenuItems(item));
+    }, [isCustomized, items, permissionMenu, renderCustomizedMenuItems, renderFeatureMenuItems]);
+    const renderSettings = () => {
+        if (!isCustomized) {
+            const settingApp = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === APP_KEYS.SETTINGS);
+            if (settingApp)
+                return renderFeatureMenuItems(settingApp);
+        }
+        return null;
+    };
+    return (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: onHoverMenuBar },
+                    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" }, renderAppMenuItems()),
+                    React.createElement("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }),
+                    React.createElement(PopoverWrapper, { className: "antsomi-scroll-box antsomi-child-menu-popover", onMouseLeave: onMouseLeave },
+                        React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childMenu))),
+                React.createElement("div", { style: { flexShrink: 0 } }, renderSettings())),
+            isExpandable && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
+                React.createElement(Icon, { type: "icon-ants-expand-more", style: {
+                        cursor: 'pointer',
+                        fontSize: '20px',
+                        transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
+                    }, onClick: onToggleChildMenu })))),
+        React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu && isExpandable, className: "antsomi-scroll-box" },
+            React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childMenu))));
+});

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

@@ -0,0 +1,20 @@
+import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { AppConfigProviderProps } from '@antscorp/antsomi-ui/es/providers';
+import { TMenuItem } from '../types';
+export interface LeftMenuState {
+    activeAppCode: string;
+    customActiveAppKey: string;
+    customActiveCurrentKey: string;
+    menuItems: TFeatureMenu[];
+    customItems: TMenuItem[];
+    customMenuChildren: TMenuItem[];
+    appMenuChildren: TFeatureMenu[];
+    appConfig?: AppConfigProviderProps;
+    isCustomized?: boolean;
+}
+interface LeftMenuStore {
+    state: LeftMenuState;
+    setState: (state: Partial<LeftMenuState>) => void;
+}
+export declare const useLeftMenuStore: import("zustand").UseBoundStore<import("zustand").StoreApi<LeftMenuStore>>;
+export {};

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

@@ -0,0 +1,16 @@
+// Libraries
+import { create } from 'zustand';
+const initialState = {
+    activeAppCode: '',
+    customActiveAppKey: '',
+    customActiveCurrentKey: '',
+    menuItems: [],
+    appMenuChildren: [],
+    customItems: [],
+    customMenuChildren: [],
+    isCustomized: false,
+};
+export const useLeftMenuStore = create(set => ({
+    state: initialState,
+    setState: newState => set(store => ({ state: Object.assign(Object.assign({}, store.state), newState) })),
+}));

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopoverWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FeatureMenuWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    isExpandMenu: boolean;
+}, never>;
+export declare const ExpandWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeftMenuNavWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavLogoWrapper: 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 LeftMenuNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const FeatureMenu: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const FeatureMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChildMenuWrapper: import("styled-components").StyledComponent<"div", any, {
+    isExpand: boolean;
+}, never>;