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

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo, useEffect, useState } from 'react';
-import { cloneDeep, merge } from 'lodash';
 // Styled
 import { HeaderV2Styled } from './styled';
 // Components
@@ -22,9 +21,9 @@ import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '../../..';
 export const HeaderV2 = memo(props => {
     var _a, _b, _c;
-    const { auth, env: envContext, languageCode = 'en', state, } = useContextSelector(AppConfigContext, state => state);
+    const { auth, env: envContext, languageCode = 'en', } = useContextSelector(AppConfigContext, state => state);
     /** Prefer to use Header in AppConfigContext */
-    const { className, style, pageTitle = 'Page Title', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = merge(cloneDeep(props), cloneDeep((state === null || state === void 0 ? void 0 : state.header) || {}));
+    const { className, style, pageTitle = 'Page Title', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);

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

@@ -15,22 +15,25 @@ import { ICON_SIZE } from '../../../constants';
 import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Contexts
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
-// Stores
-import { useLeftMenuStore } from '../../../stores';
 // Utils
 import { findActiveAppCodeByUrl, getGeneratePath } from '../../../utils';
 import { findActiveMenuItemByUrl, recursiveFindParentOfActiveItem } from './utils';
+import { random } from '@antscorp/antsomi-ui/es/utils';
+import { useLeftMenuStore } from '../../../stores';
 export const ChildMenu = memo(props => {
     const { items = [], parentKey, onMenuClick } = props;
-    // Selectors
+    // Contexts
     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(store => store.setState);
+    // 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();
     // Side Effects
@@ -48,7 +51,7 @@ export const ChildMenu = memo(props => {
             /**  Active App Item having code matching url */
             const matchAppCode = findActiveAppCodeByUrl({ menuItems, url, auth });
             if (matchAppCode && matchAppCode !== activeAppCode) {
-                setLeftMenuStoreState({ activeAppCode: matchAppCode });
+                setLeftMenuState({ activeAppCode: matchAppCode });
             }
         }
     }, [
@@ -60,8 +63,8 @@ export const ChildMenu = memo(props => {
         search,
         parentKey,
         activeAppCode,
-        setLeftMenuStoreState,
         menuItems,
+        setLeftMenuState,
     ]);
     // Handlers
     const onClick = e => {
@@ -83,8 +86,8 @@ export const ChildMenu = memo(props => {
                             e.domEvent.preventDefault();
                             optionCallback === null || optionCallback === void 0 ? void 0 : optionCallback({ menuItemKey: key, optionKey: e.key });
                         },
-                    }, trigger: ['click'] },
-                    React.createElement(Icon, { type: "icon-ants-three-dot-vertical", style: { marginTop: '2px', zIndex: 1000 } })))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
+                    }, 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) ? (React.createElement(Link, { to: getGeneratePath(`${domain}${menu_item_path}`, auth), className: "menu-link" }, labelComponent())) : (labelComponent()),
@@ -93,7 +96,7 @@ export const ChildMenu = memo(props => {
             };
         });
     };
-    return (React.createElement(MenuWrapper, { className: "child-menu" },
+    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: {

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

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

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

@@ -1,7 +1,7 @@
 // Libraries
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useContextSelector } from 'use-context-selector';
-import { isNil, sortBy } from 'lodash';
+import { isArray, sortBy } from 'lodash';
 import { useLocation } from 'react-router-dom';
 // Contexts
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
@@ -9,13 +9,11 @@ import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMenuPermission, } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 // Utils
 import { findActiveAppCodeByUrl, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
-import isEqual from 'react-fast-compare';
 // Store
 import { useLeftMenuStore } from '../stores';
 const initialState = {
     hoverItem: '',
     isExpandMenu: true,
-    featureChildren: [],
 };
 export const useLeftMenu = (props) => {
     // Props
@@ -24,13 +22,13 @@ export const useLeftMenu = (props) => {
     const { pathname, hash, search } = useLocation();
     // Contexts
     const appConfig = useContextSelector(AppConfigContext, state => state);
+    // Stores
+    const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
+    const setLeftMenuState = useLeftMenuStore(store => store.setState);
     // Destructuring variables
     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: {
@@ -108,11 +106,13 @@ export const useLeftMenu = (props) => {
     useEffect(() => {
         var _a;
         const appCode = state.hoverItem ? state.hoverItem : activeAppCode;
-        setLeftMenuStoreState({
-            menuItems: mappingChildrenMenu,
-            appMenuChildren: ((_a = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appCode)) === null || _a === void 0 ? void 0 : _a.children) || [],
-        });
-    }, [activeAppCode, mappingChildrenMenu, state.hoverItem, setLeftMenuStoreState]);
+        if (isArray(mappingChildrenMenu)) {
+            setLeftMenuState({
+                menuItems: mappingChildrenMenu,
+                appMenuChildren: ((_a = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appCode)) === null || _a === void 0 ? void 0 : _a.children) || [],
+            });
+        }
+    }, [activeAppCode, mappingChildrenMenu, state.hoverItem, setLeftMenuState]);
     /**
      * Active App Item having code matching url
      */
@@ -120,7 +120,7 @@ export const useLeftMenu = (props) => {
         const url = `${pathname}${hash}${search}`;
         const matchAppCode = findActiveAppCodeByUrl({ url, menuItems: mappingChildrenMenu, auth });
         if (matchAppCode && matchAppCode !== activeAppCode) {
-            setLeftMenuStoreState({ activeAppCode: matchAppCode });
+            setLeftMenuState({ activeAppCode: matchAppCode });
         }
     }, [
         activeAppCode,
@@ -131,33 +131,17 @@ export const useLeftMenu = (props) => {
         pathname,
         permissionMenu,
         search,
-        setLeftMenuStoreState,
+        setLeftMenuState,
     ]);
-    useEffect(() => {
-        var _a;
-        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 === activeAppCode)) === null || _a === void 0 ? void 0 : _a.children) || [] }));
-                });
-            }
-        }
-    }, [permissionMenu, activeAppCode, state.featureChildren, state.hoverItem]);
     /* Callbacks */
     const onToggleChildMenu = useCallback(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
     }, []);
-    const onMouseEnter = useCallback((key, children) => {
-        var _a;
+    const onMouseEnter = useCallback((key) => {
         if (!state.isExpandMenu) {
-            const featureChildren = !isNil(children)
-                ? 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 })));
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: key })));
         }
-    }, [permissionMenu, activeAppCode, state.isExpandMenu]);
+    }, [state.isExpandMenu]);
     const onMouseLeave = useCallback(() => {
         if (!state.isExpandMenu) {
             setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
@@ -172,7 +156,6 @@ export const useLeftMenu = (props) => {
         permissionMenu,
         appConfig,
         /* Callbacks */
-        setState,
         onToggleChildMenu,
         onMouseEnter,
         onMouseLeave,

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

@@ -65,7 +65,7 @@ export const LeftMenu = memo(props => {
     }, [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 { menu_item_name, menu_item, icon_name, menu_item_code, menu_item_path, menu_item_domain, } = item;
         const domain = !isNil(menu_item_domain) && (appConfig === null || appConfig === void 0 ? void 0 : appConfig.env) === ENV.DEV ? menu_item_domain : '';
         const isActive = activeAppCode === menu_item_code;
         const isHover = state.hoverItem === menu_item_code;
@@ -73,7 +73,7 @@ export const LeftMenu = memo(props => {
             React.createElement("div", { className: "icon-wrapper" }, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name, style: { fontSize: ICON_SIZE } })),
             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, 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(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, 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(LeftMenuNavWrapper, { style: style, className: className },
         React.createElement(LeftMenuNav, null,

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

@@ -1,12 +1,12 @@
 import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
-export interface LeftMenuStoreState {
+export interface LeftMenuState {
     activeAppCode: string;
     menuItems: TFeatureMenu[];
     appMenuChildren: TFeatureMenu[];
 }
 interface LeftMenuStore {
-    state: LeftMenuStoreState;
-    setState: (state: Partial<LeftMenuStoreState>) => void;
+    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

@@ -1,10 +1,6 @@
 // Libraries
 import { create } from 'zustand';
-const initialState = {
-    activeAppCode: '',
-    menuItems: [],
-    appMenuChildren: [],
-};
+const initialState = { activeAppCode: '', menuItems: [], appMenuChildren: [] };
 export const useLeftMenuStore = create(set => ({
     state: initialState,
     setState: newState => set(store => ({ state: Object.assign(Object.assign({}, store.state), newState) })),

package/es/components/template/Layout/Layout.d.ts

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+import { LeftMenuProps } from '../../organism';
+import { HeaderV2Props } from '../../molecules';
+import '@antscorp/processing-notification/dist/index.css';
+import { ProcessingNotificationProps } from '@antscorp/antsomi-ui/es/types';
+interface LayoutProps {
+    headerProps?: Partial<HeaderV2Props>;
+    leftMenuProps?: LeftMenuProps;
+    processingNotificationProps?: Partial<ProcessingNotificationProps>;
+    workspaceProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+export declare const Layout: React.FC<PropsWithChildren<LayoutProps>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ants-processing-notification': any;
+        }
+    }
+}
+export {};

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

@@ -0,0 +1,61 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo, useMemo } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import AntsProcessingNotification from '@antscorp/processing-notification';
+import { merge } from 'lodash';
+// Styled
+import { ChildrenWrapper, ContentWrapper, LayoutWrapper, NotificationWrapper } from './styled';
+// Components
+import { LeftMenu } from '../../organism';
+import { Flex } from '../../atoms';
+import { HeaderV2 } from '../../molecules';
+// Contexts
+import { AppConfigContext } from '../../..';
+// Constants
+import { PERMISSION_API, SOCKET_API } from '../../../constants';
+// Css
+import '@antscorp/processing-notification/dist/index.css';
+import { useLayoutStore } from './stores';
+export const Layout = memo(props => {
+    const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, } = props;
+    const _a = leftMenuProps || {}, { className = '' } = _a, restOfLeftMenuProps = __rest(_a, ["className"]);
+    // Selectors
+    const { auth, languageCode } = useContextSelector(AppConfigContext, state => state);
+    const { token, userId, portalId } = auth || {};
+    const headerStore = useLayoutStore(store => store.state.header);
+    // Memo
+    const initialHeaderProps = useMemo(() => {
+        var _a;
+        return (Object.assign(Object.assign({ className: 'layout-header' }, headerProps), { helpConfig: {
+                configs: Object.assign(Object.assign({}, (_a = headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig) === null || _a === void 0 ? void 0 : _a.configs), { appCode: 'SANDBOX_MARKETING', avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png', config: {
+                        p_timezone: 'Asia/Singapore',
+                        api_pid: 33167,
+                        p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
+                        embeddedData: {},
+                        INSIGHT_U_OGS: 'uogs',
+                    } }),
+            }, accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }) }));
+    }, [headerProps]);
+    const mergeHeaderProps = useMemo(() => merge(initialHeaderProps, headerStore), [initialHeaderProps, headerStore]);
+    const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain: PERMISSION_API, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [languageCode, portalId, token, userId, processingNotificationProps]);
+    return (React.createElement(LayoutWrapper, null,
+        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps)),
+        React.createElement(Flex, { className: "layout-body" },
+            React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}` }, restOfLeftMenuProps)),
+            React.createElement(ContentWrapper, null,
+                React.createElement("div", Object.assign({}, workspaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
+                    React.createElement(NotificationWrapper, null,
+                        React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig))),
+                    React.createElement(ChildrenWrapper, null, children))))));
+});

package/es/components/template/Layout/index.d.ts

@@ -1,18 +1,2 @@
-import React, { PropsWithChildren } from 'react';
-import { LeftMenuProps } from '../../organism';
-import { HeaderV2Props } from '../../molecules';
-import '@antscorp/processing-notification/dist/index.css';
-interface LayoutProps {
-    headerProps?: Partial<HeaderV2Props>;
-    leftMenuProps?: LeftMenuProps;
-    workspaceProps?: React.HTMLAttributes<HTMLDivElement>;
-}
-export declare const Layout: React.FC<PropsWithChildren<LayoutProps>>;
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'ants-processing-notification': any;
-        }
-    }
-}
-export {};
+export * from './Layout';
+export * from './stores';

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

@@ -1,62 +1,2 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React, { memo, useMemo } from 'react';
-import { useContextSelector } from 'use-context-selector';
-import AntsProcessingNotification from '@antscorp/processing-notification';
-// Styled
-import { ChildrenWrapper, ContentWrapper, LayoutWrapper, NotificationWrapper } from './styled';
-// Components
-import { LeftMenu } from '../../organism';
-import { Flex } from '../../atoms';
-import { HeaderV2 } from '../../molecules';
-// Contexts
-import { AppConfigContext } from '../../..';
-// Constants
-import { PERMISSION_API, SOCKET_API } from '../../../constants';
-// Css
-import '@antscorp/processing-notification/dist/index.css';
-export const Layout = memo(props => {
-    var _a;
-    const { leftMenuProps, headerProps, workspaceProps, children } = props;
-    const _b = leftMenuProps || {}, { className = '' } = _b, restOfLeftMenuProps = __rest(_b, ["className"]);
-    // Selectors
-    const { auth, languageCode } = useContextSelector(AppConfigContext, state => state);
-    const { token, userId, portalId } = auth || {};
-    // Memo
-    const antsProcessingNotificationConfig = useMemo(() => ({
-        permissionDomain: PERMISSION_API,
-        socketDomain: SOCKET_API,
-        token,
-        accountId: userId,
-        userId,
-        lang: languageCode,
-        networkId: portalId,
-    }), [languageCode, portalId, token, userId]);
-    return (React.createElement(LayoutWrapper, null,
-        React.createElement(HeaderV2, Object.assign({ className: "layout-header" }, headerProps, { helpConfig: {
-                configs: Object.assign(Object.assign({}, (_a = headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig) === null || _a === void 0 ? void 0 : _a.configs), { appCode: 'SANDBOX_MARKETING', avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png', config: {
-                        p_timezone: 'Asia/Singapore',
-                        api_pid: 33167,
-                        p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
-                        embeddedData: {},
-                        INSIGHT_U_OGS: 'uogs',
-                    } }),
-            }, accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }) })),
-        React.createElement(Flex, { className: "layout-body" },
-            React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}` }, restOfLeftMenuProps)),
-            React.createElement(ContentWrapper, null,
-                React.createElement("div", Object.assign({}, workspaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
-                    React.createElement(NotificationWrapper, null,
-                        React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig))),
-                    React.createElement(ChildrenWrapper, null, children))))));
-});
+export * from './Layout';
+export * from './stores';

package/es/components/template/Layout/stores/index.d.ts

@@ -0,0 +1,18 @@
+import { HeaderV2Props } from '../../../molecules';
+import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
+export interface HeaderStore extends Partial<HeaderV2Props> {
+}
+export interface WorkspaceStore {
+}
+export interface LayoutStoreState {
+    header: HeaderStore;
+    workspace: WorkspaceStore;
+}
+interface LayoutStore {
+    state: LayoutStoreState;
+    setHeaderState: (state: DeepPartial<HeaderStore>) => void;
+    setWorkspaceState: (state: Partial<WorkspaceStore>) => void;
+    setLayoutState: (state: DeepPartial<LayoutStoreState>) => void;
+}
+export declare const useLayoutStore: import("zustand").UseBoundStore<import("zustand").StoreApi<LayoutStore>>;
+export {};

package/es/components/template/Layout/stores/index.js

@@ -0,0 +1,17 @@
+// Libraries
+import { create } from 'zustand';
+import { merge } from 'lodash';
+const initialState = {
+    header: {},
+    workspace: {},
+};
+export const useLayoutStore = create(set => ({
+    state: initialState,
+    setLayoutState: newState => set(store => ({ state: merge(store.state, newState) })),
+    setHeaderState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { header: Object.assign(Object.assign({}, store.state.header), newState) }),
+    })),
+    setWorkspaceState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { workspace: Object.assign(Object.assign({}, store.state.workspace), newState) }),
+    })),
+}));

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

@@ -19,7 +19,9 @@ export const LayoutWrapper = styled(Flex) `
   }
 
   .layout-body {
+    position: relative;
     width: 100%;
+    z-index: 10;
 
     &__menu {
       flex-shrink: 0;
@@ -56,7 +58,7 @@ export const NotificationWrapper = styled.div `
   /* margin-bottom: 6px; */
   padding-top: 15px;
   background-color: white;
-  z-index: 9;
+  z-index: 999;
 
   > div {
     margin-bottom: 6px;

package/es/constants/theme.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -167,6 +167,11 @@ THEME.components = {
         titleFontSizeLG: 14,
         titleFontSizeSM: 14,
         horizontalMargin: '0px',
+        colorBorderSecondary: '#E5E5E5',
+        lineHeight: 1.17,
+        lineHeightLG: 1.17,
+        lineHeightSM: 1.17,
+        itemHoverColor: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorPrimary,
     },
     Collapse: {
         headerBg: '#FFF',
@@ -174,22 +179,22 @@ THEME.components = {
         headerPadding: '15px 10px',
     },
     Switch: {
-        colorTextQuaternary: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.bw0,
-        colorTextTertiary: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.bw0,
+        colorTextQuaternary: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.bw0,
+        colorTextTertiary: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.bw0,
         handleSize: 12,
         handleSizeSM: 7,
         trackMinWidth: 30,
-        handleBg: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.colorPrimary,
+        handleBg: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.colorPrimary,
     },
     Popover: {
-        borderRadius: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.borderRadiusLG,
+        borderRadius: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.borderRadiusLG,
     },
     Dropdown: {
-        borderRadius: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.borderRadiusLG,
+        borderRadius: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.borderRadiusLG,
         controlItemBgHover: '#F2F9FF',
     },
     Tooltip: {
-        colorBgSpotlight: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.bw8,
+        colorBgSpotlight: (_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.bw8,
     },
     Menu: {
         itemHoverBg: '#F2F9FF',

package/es/providers/AppConfigProvider/contexts/index.d.ts

@@ -1,13 +1,10 @@
 import React from 'react';
 import { PayloadInfo } from '../../..';
 import { envType } from '@antscorp/antsomi-ui/es/types/config';
-import { TAppConfigAction, TAppConfigState } from '../reducer';
 export interface AppConfigProviderProps {
     env?: envType;
     auth?: Omit<PayloadInfo, 'url'>;
     languageCode?: string;
-    state?: TAppConfigState;
-    dispatch?: React.Dispatch<TAppConfigAction>;
 }
 declare const AppConfigContext: import("use-context-selector").Context<AppConfigProviderProps>;
 declare const AppConfigProvider: React.FC<React.PropsWithChildren<{

package/es/providers/AppConfigProvider/contexts/index.js

@@ -1,13 +1,10 @@
 // Libraries
-import React, { useMemo, useReducer } from 'react';
+import React from 'react';
 import { createContext } from 'use-context-selector';
-import { reducer } from '../reducer';
 const initialContext = {};
 const AppConfigContext = createContext(initialContext);
 const AppConfigProvider = props => {
     const { value = initialContext, children } = props;
-    const [state, dispatch] = useReducer(reducer, {});
-    const appConfigValue = useMemo(() => (Object.assign(Object.assign({}, value), { state, dispatch })), [state, value]);
-    return React.createElement(AppConfigContext.Provider, { value: appConfigValue }, children);
+    return React.createElement(AppConfigContext.Provider, { value: value }, children);
 };
 export { AppConfigContext, AppConfigProvider };

package/es/providers/AppConfigProvider/index.d.ts

@@ -1,3 +1,2 @@
 export * from './contexts';
 export * from './selector';
-export * from './reducer';

package/es/providers/AppConfigProvider/index.js

@@ -1,3 +1,2 @@
 export * from './contexts';
 export * from './selector';
-export * from './reducer';

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -11,7 +11,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
 const { accent6, accent7, gray5, scrollBarSize } = THEME.token || {};
 export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
@@ -849,6 +849,16 @@ export const GlobalStyle = () => {
       .antsomi-tabs {
         .antsomi-tabs-tab {
           font-weight: bold;
+
+          &:not(.antsomi-tabs-tab-active):hover {
+            background-color: ${(_37 = THEME.token) === null || _37 === void 0 ? void 0 : _37.blue};
+          }
+        }
+        .antsomi-tabs-tab-active {
+          z-index: 2;
+        }
+        .antsomi-tabs-nav::before {
+          z-index: 1;
         }
       }
 
@@ -883,7 +893,7 @@ export const GlobalStyle = () => {
       .antsomi-menu {
         .antsomi-menu-submenu.antsomi-menu-submenu-selected {
           .antsomi-menu-item.antsomi-menu-item-selected {
-            background-color: ${(_37 = THEME.token) === null || _37 === void 0 ? void 0 : _37.blue};
+            background-color: ${(_38 = THEME.token) === null || _38 === void 0 ? void 0 : _38.blue};
           }
         }
       }

package/es/types/index.d.ts

@@ -19,6 +19,7 @@ export * from './variables';
 export * from './service';
 export * from './templateListing';
 export * from './share-access';
+export * from './processingNotification';
 export type PayloadInfo = {
     url?: string;
     userId?: string;
@@ -27,3 +28,6 @@ export type PayloadInfo = {
     portalId?: number;
 };
 export type TServiceAuth = PayloadInfo;
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};

package/es/types/index.js

@@ -3,3 +3,4 @@ export * from './variables';
 export * from './service';
 export * from './templateListing';
 export * from './share-access';
+export * from './processingNotification';

package/es/types/processingNotification.d.ts

@@ -0,0 +1,4 @@
+export type TProcessingNotificationCallbackType = 'forecast_name';
+export interface ProcessingNotificationProps {
+    callback?: (type: TProcessingNotificationCallbackType, data: Record<string, any>) => void;
+}

package/es/types/processingNotification.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.196",
+  "version": "1.3.5-beta.199",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -62,7 +62,7 @@
   "dependencies": {
     "@antscorp/icons": "^0.27.14",
     "@antscorp/image-editor": "1.0.2",
-    "@antscorp/processing-notification": "^1.0.0",
+    "@antscorp/processing-notification": "^1.0.2",
     "@emotion/react": "^11.11.1",
     "@fortawesome/fontawesome-svg-core": "6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.1.1",

package/es/providers/AppConfigProvider/reducer.d.ts

@@ -1,12 +0,0 @@
-import { HeaderV2Props } from '../../components';
-export declare const APP_CONFIG_ACTION_TYPE: {
-    UPDATE_HEADER: string;
-};
-export type TAppConfigState = {
-    header?: Partial<HeaderV2Props>;
-};
-export type TAppConfigAction = {
-    type: string;
-    value: Partial<TAppConfigState>;
-};
-export declare const reducer: (state: TAppConfigState, action: TAppConfigAction) => TAppConfigState;

package/es/providers/AppConfigProvider/reducer.js

@@ -1,12 +0,0 @@
-export const APP_CONFIG_ACTION_TYPE = {
-    UPDATE_HEADER: 'update-header',
-};
-export const reducer = (state, action) => {
-    var _a;
-    switch (action.type) {
-        case APP_CONFIG_ACTION_TYPE.UPDATE_HEADER:
-            return Object.assign(Object.assign({}, state), { header: Object.assign(Object.assign({}, (state.header || {})), (((_a = action.value) === null || _a === void 0 ? void 0 : _a.header) || {})) });
-        default:
-            throw new Error(`unknown action type: ${action.type}`);
-    }
-};