@antscorp/antsomi-ui 1.3.5-beta.406 → 1.3.5-beta.408

package/es/components/molecules/ModalSelect/ModalSelect.js

@@ -13,8 +13,9 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Menu } from 'antd';
 import { StyledModal } from './styled';
 import { isFunction } from 'lodash';
+import clsx from 'clsx';
 export const ModalSelect = (props) => {
-    const { value, content, options = [], okButtonProps = {}, cancelButtonProps = {}, title, open: openProp, menuRef: menuRefProp, onChange, onOk } = props, rest = __rest(props, ["value", "content", "options", "okButtonProps", "cancelButtonProps", "title", "open", "menuRef", "onChange", "onOk"]);
+    const { value, content, options = [], okButtonProps = {}, cancelButtonProps = {}, title, open: openProp, menuRef: menuRefProp, onChange, onOk, contentWrapperProps = {} } = props, rest = __rest(props, ["value", "content", "options", "okButtonProps", "cancelButtonProps", "title", "open", "menuRef", "onChange", "onOk", "contentWrapperProps"]);
     const [selected, setSelected] = useState(null);
     const [open, setOpen] = useState(false);
     const handleSetMenuRef = useCallback((ref) => {
@@ -51,5 +52,5 @@ export const ModalSelect = (props) => {
     };
     return (React.createElement(StyledModal, Object.assign({}, rest, { open: open, onOk: handleOk, okButtonProps: Object.assign(Object.assign({}, okButtonProps), { className: `${okButtonProps.className} ok-btn` }), cancelButtonProps: Object.assign(Object.assign({}, cancelButtonProps), { className: `${cancelButtonProps.className} cancel-btn` }), title: title || 'Select' }),
         React.createElement(Menu, { ref: handleSetMenuRef, items: options, selectedKeys: [selected || ''], onClick: info => handleClickItem(info.key) }),
-        React.createElement("div", { className: "content" }, renderContent())));
+        React.createElement("div", Object.assign({}, contentWrapperProps, { className: clsx(contentWrapperProps === null || contentWrapperProps === void 0 ? void 0 : contentWrapperProps.className, 'ModalSelect-content') }), renderContent())));
 };

package/es/components/molecules/ModalSelect/styled.js

@@ -63,12 +63,14 @@ export const StyledModal = styled(Modal) `
         }
       }
 
-      > .content {
-        overflow: hidden;
+      > .ModalSelect-content {
         margin-left: 80px;
+        border-radius: 10px;
+        overflow: hidden;
 
         &:hover {
           overflow: auto;
+          scrollbar-width: none;
         }
       }
     }
@@ -143,7 +145,6 @@ export const CardRecommendedContainer = styled.div `
       line-height: 14px;
       font-size: 12px;
       padding: 5px 10px;
-      border-radius: 24px;
 
       &.antsomi-tag-borderless {
         border-width: 0;

package/es/components/molecules/ModalSelect/types.d.ts

@@ -6,6 +6,7 @@ export type ModalSelectProps = {
     value?: string;
     options?: MenuProps['items'];
     content?: (active: string | null) => React.ReactNode;
+    contentWrapperProps?: React.ComponentProps<'div'>;
     onChange?: (active: string) => void;
     menuRef?: RefCallback<HTMLUListElement>;
     onOk?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, active: string | null) => void;

package/es/components/organism/DataTable/components/Table/ResizableCell.d.ts

@@ -7,6 +7,9 @@ interface ResizableCellProps extends Omit<React.ThHTMLAttributes<HTMLTableCellEl
     width?: number;
     handleProps?: HandleProps;
     disableResize?: boolean;
+    fixed?: string;
+    index?: number;
+    tableRef?: React.RefObject<HTMLDivElement>;
 }
 export declare const ResizableCell: React.FC<ResizableCellProps>;
 export {};

package/es/components/organism/DataTable/components/Table/ResizableCell.js

@@ -10,18 +10,35 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Resizable } from 'react-resizable';
+import { MIN_COLUMN_WIDTH } from '../../constants';
+// Components
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 export const ResizableCell = props => {
     var _a;
-    const { width, handleProps, disableResize, onResize } = props, restProps = __rest(props, ["width", "handleProps", "disableResize", "onResize"]);
+    const { width, handleProps, disableResize, onResize, children, style, fixed, index, tableRef } = props, restProps = __rest(props, ["width", "handleProps", "disableResize", "onResize", "children", "style", "fixed", "index", "tableRef"]);
+    // Memos
+    const columnStyle = useMemo(() => (Object.assign(Object.assign({}, style), { zIndex: fixed ? 100 - (index || 0) : undefined })), [style, fixed, index]);
     const isRowSelectionCol = (_a = props === null || props === void 0 ? void 0 : props.className) === null || _a === void 0 ? void 0 : _a.includes('antsomi-table-selection-column');
     if (isRowSelectionCol || !width || disableResize) {
-        return React.createElement("th", Object.assign({}, restProps));
+        return (React.createElement("th", Object.assign({}, restProps, { style: columnStyle }),
+            React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, children)));
     }
-    return (React.createElement(Resizable, { width: width || 0, height: 0, handle: React.createElement("div", { className: "resizable-handle-wrapper", onClick: e => {
+    const toggleCellClass = (className = 'resizable-cell') => {
+        var _a, _b;
+        (_b = (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.antsomi-table-row')) === null || _b === void 0 ? void 0 : _b.forEach(rowEl => {
+            var _a;
+            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell`)) === null || _a === void 0 ? void 0 : _a[1];
+            if (cell) {
+                cell.classList.toggle(className);
+            }
+        });
+    };
+    return (React.createElement(Resizable, { width: width || 0, height: 0, minConstraints: [MIN_COLUMN_WIDTH, 0], handle: React.createElement("div", { className: "resizable-handle-wrapper", onClick: e => {
                 e.stopPropagation();
             } },
             React.createElement("span", Object.assign({ className: "resizable-handle" }, handleProps))), onResize: (...args) => onResize && onResize(...args), draggableOpts: { enableUserSelectHack: true } },
-        React.createElement("th", Object.assign({}, restProps, { tabIndex: 0 }))));
+        React.createElement("th", Object.assign({}, restProps, { style: columnStyle }),
+            React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, children))));
 };

package/es/components/organism/DataTable/components/Table/index.js

@@ -1,14 +1,3 @@
-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, useCallback, useRef, useState } from 'react';
 import { cloneDeep } from 'lodash';
@@ -41,12 +30,21 @@ export const Table = memo(() => {
     // Variables
     const { scroll } = tableProps;
     // Handles
-    const handleResize = useCallback((index) => (e, _a) => {
-        var { size } = _a, restOfCallback = __rest(_a, ["size"]);
+    const handleResize = useCallback((index) => (e, { size }) => {
         const nextColumns = cloneDeep(columns || []);
         nextColumns[index] = Object.assign(Object.assign({}, nextColumns[index]), { width: size.width });
         setState(prev => (Object.assign(Object.assign({}, prev), { columns: nextColumns })));
     }, [columns]);
+    const calculateLastColWidth = (col) => {
+        var _a, _b;
+        // If last column is fixed then return full rest of width
+        if (col.fixed) {
+            return '100%';
+        }
+        const restOfWidth = ((((_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.length) || 1) - 1) * DEFAULT_COLUMN_WIDTH;
+        const tableWidth = ((_b = tableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || restOfWidth;
+        return tableWidth > restOfWidth ? tableWidth - restOfWidth : DEFAULT_COLUMN_WIDTH;
+    };
     // Effects
     useDeepCompareEffect(() => {
         if (tableProps.columns) {
@@ -55,7 +53,7 @@ export const Table = memo(() => {
                 return (Object.assign(Object.assign({}, prev), { columns: (_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.map((col, index) => {
                         var _a, _b;
                         return (Object.assign(Object.assign({}, col), { width: index === (((_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.length) || 1) - 1
-                                ? 'auto'
+                                ? calculateLastColWidth(col)
                                 : (_b = col.width) !== null && _b !== void 0 ? _b : (DEFAULT_COLUMN_WIDTHS[index] || DEFAULT_COLUMN_WIDTH) }));
                     }) }));
             });
@@ -76,8 +74,11 @@ export const Table = memo(() => {
     }), { columns: columns === null || columns === void 0 ? void 0 : columns.map((col, index) => (Object.assign(Object.assign({}, col), { onHeaderCell: (column) => {
                 var _a;
                 return ({
+                    tableRef,
                     disableResize: index === ((columns === null || columns === void 0 ? void 0 : columns.length) || 1) - 1,
+                    fixed: column.fixed,
                     width: column.width,
+                    index,
                     handleProps: {
                         style: {
                             height: (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight,
@@ -88,5 +89,5 @@ export const Table = memo(() => {
             } }))), bordered: true, pagination: false, loading: {
             indicator: React.createElement(Spin, null),
             spinning: !!tableProps.loading,
-        }, tableLayout: "auto" })));
+        }, tableLayout: "fixed" })));
 });

package/es/components/organism/DataTable/components/Table/styled.js

@@ -18,6 +18,16 @@ export const StyledTable = styled(Table) `
         }
       }
     }
+
+    .antsomi-table-body {
+      .antsomi-table-row {
+        .antsomi-table-cell {
+          &.resizable-cell {
+            border-inline-end: 2px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1} !important;
+          }
+        }
+      }
+    }
   }
 
   thead.antsomi-table-thead {
@@ -26,7 +36,6 @@ export const StyledTable = styled(Table) `
   }
 
   /* Style handle resize */
-
   .resizable-handle-wrapper {
     position: absolute;
     top: 0px;
@@ -34,7 +43,7 @@ export const StyledTable = styled(Table) `
     width: 20px;
     display: flex;
     justify-content: center;
-    z-index: 20;
+    z-index: 10;
     cursor: col-resize;
 
     .resizable-handle {

package/es/components/organism/DataTable/constants/common.d.ts

@@ -1,6 +1,7 @@
 declare const DATA_TABLE_PREFIX = "data-table";
 declare const DATA_TABLE_DEFAULT_NAME = "default";
 declare const DEFAULT_COLUMN_WIDTH = 200;
+declare const MIN_COLUMN_WIDTH = 100;
 declare const DEFAULT_ROW_SELECTION_WIDTH = 47;
 declare const DEFAULT_COLUMN_WIDTHS: number[];
-export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, DEFAULT_COLUMN_WIDTHS, };
+export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, };

package/es/components/organism/DataTable/constants/common.js

@@ -1,7 +1,8 @@
 const DATA_TABLE_PREFIX = 'data-table';
 const DATA_TABLE_DEFAULT_NAME = 'default';
 const DEFAULT_COLUMN_WIDTH = 200;
+const MIN_COLUMN_WIDTH = 100;
 const DEFAULT_FIRST_COLUMN_WIDTH = 200;
 const DEFAULT_ROW_SELECTION_WIDTH = 47;
 const DEFAULT_COLUMN_WIDTHS = [DEFAULT_FIRST_COLUMN_WIDTH].concat(Array.from({ length: 20 }, () => DEFAULT_COLUMN_WIDTH));
-export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, DEFAULT_COLUMN_WIDTHS, };
+export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, };

package/es/components/organism/DataTable/hooks/useDataTableListing/types.d.ts

@@ -3,13 +3,16 @@ import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 import { AxiosRequestConfig } from 'axios';
 import { FilterItem, TableProps } from '../../types';
 import { PaginationProps } from '../../components';
+export type TApiGlobal = AxiosRequestConfig<any> & {
+    enabled?: boolean;
+};
 export type TConfig = {
     env?: TEnv;
     auth?: TServiceAuth;
     api?: {
-        listing?: AxiosRequestConfig<any>;
-        column?: AxiosRequestConfig<any>;
-        filter?: AxiosRequestConfig<any>;
+        listing?: TApiGlobal;
+        column?: TApiGlobal;
+        filter?: TApiGlobal;
     };
     object?: {
         type: number;

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -7,8 +7,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+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 { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { isEmpty } from 'lodash';
 // Types
 import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
@@ -47,9 +58,9 @@ export function useDataTableListing(props) {
     // Variables
     const { env = appConfig === null || appConfig === void 0 ? void 0 : appConfig.env, auth = appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth, api, object } = config;
     const { column: apiColumn, filter: apiFilter, listing: apiListing } = api || {};
-    const { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column` } = apiColumn || {};
-    const { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter` } = apiFilter || {};
-    const { url: listingUrl = '' } = apiListing || {};
+    const _a = apiColumn || {}, { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column`, enabled: enabledApiColumn = true } = _a, restOfApiColumnRequest = __rest(_a, ["url", "enabled"]);
+    const _b = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _b, restOfApiFilterRequest = __rest(_b, ["url", "enabled"]);
+    const _c = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _c, restOfApiListingRequest = __rest(_c, ["url", "enabled"]);
     const { filters, selectedFilterId, pagination } = state;
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
@@ -70,24 +81,40 @@ export function useDataTableListing(props) {
         args: {
             auth: modifyColumnAuth,
             params: mapObject,
+            request: restOfApiColumnRequest,
+        },
+        options: {
+            enabled: enabledApiColumn,
         },
     });
     const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = useGetModifyColumnList({
         args: {
             auth: modifyColumnAuth,
             params: mapObject,
+            request: restOfApiColumnRequest,
+        },
+        options: {
+            enabled: enabledApiColumn,
         },
     });
     const { data: savedFiltersData } = useGetSavedFilterList({
         args: {
             auth: filterAuth,
             params: mapObject,
+            request: restOfApiFilterRequest,
+        },
+        options: {
+            enabled: enabledApiFilter,
         },
     });
     const { data: filterMetricsData } = useGetFilterMetricList({
         args: {
             auth: filterAuth,
             params: mapObject,
+            request: restOfApiFilterRequest,
+        },
+        options: {
+            enabled: enabledApiFilter,
         },
     });
     const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, refetch: refetchTableListing, } = useGetTableListing({
@@ -98,9 +125,10 @@ export function useDataTableListing(props) {
                 page: pagination.page,
                 filter: JSON.stringify(mapFiltersToApiFilters(filters || [])),
             },
+            request: restOfApiListingRequest,
         },
         options: {
-            enabled: !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.url) && !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.token),
+            enabled: !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.url) && !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.token) && enabledApiListing,
         },
     });
     // Variables
@@ -179,8 +207,10 @@ export function useDataTableListing(props) {
                     key: name,
                     dataIndex: name,
                     title: label,
-                    ellipsis: true,
                     fixed: fixColumn ? 'left' : undefined,
+                    render(value, record, index) {
+                        return React.createElement(Text, { ellipsis: { tooltip: true } }, value);
+                    },
                     // render(value, record, index) {
                     //   return (
                     //     <Text ellipsis={{ tooltip: true }} style={{ width: 'fit-content' }}>
@@ -231,7 +261,7 @@ export function useDataTableListing(props) {
         refetchTableListing();
     }, [mapObject, refetchTableListing, updateModifyColumn]);
     const onApplyModifyColumn = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
-        var _a;
+        var _d;
         const { selectedMetrics, columnSetName, existColumnSet } = args || {};
         const flattenMetrics = flatTree(columnMetricsData, 'child');
         const selectedColumnMetrics = selectedMetrics
@@ -244,7 +274,7 @@ export function useDataTableListing(props) {
             exitModifyColumnId = (existColumnSet === null || existColumnSet === void 0 ? void 0 : existColumnSet.id) || '';
             if (columnSetName === '') {
                 exitModifyColumnId =
-                    ((_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _a === void 0 ? void 0 : _a.modifyColId) || '';
+                    ((_d = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _d === void 0 ? void 0 : _d.modifyColId) || '';
             }
         }
         /**

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

@@ -5,6 +5,7 @@ import { Typography } from 'antd';
 import classNames from 'classnames';
 import { isNil, isString } from 'lodash';
 import { Link } from 'react-router-dom';
+import isEqual from 'react-fast-compare';
 // Styled
 import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, IconWrapper, } from './styled';
 // Constants
@@ -17,14 +18,10 @@ const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/ants
 export const LeftMenuComponent = memo(props => {
     const { style, className, customization, showLogo = true } = props;
     const { isExpandable = true, isCustomized, isRecommendation, items = [], onMenuItemClick, } = customization || {};
-    const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, } = useLeftMenu(props);
+    const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, onShowPopover, } = useLeftMenu(props);
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
-    const childMenu = useMemo(() => {
-        const appActiveKey = state.hoverItem
-            ? state.hoverItem
-            : isCustomized || isRecommendation
-                ? customActiveAppKey
-                : activeAppCode;
+    const childActiveMenu = useMemo(() => {
+        const appActiveKey = isCustomized || isRecommendation ? customActiveAppKey : activeAppCode;
         if (isCustomized)
             return React.createElement(CustomMenu, null);
         switch (appActiveKey) {
@@ -33,7 +30,18 @@ export const LeftMenuComponent = memo(props => {
             default:
                 return React.createElement(CommonMenu, null);
         }
-    }, [activeAppCode, customActiveAppKey, isCustomized, isRecommendation, state.hoverItem]);
+    }, [activeAppCode, customActiveAppKey, isCustomized, isRecommendation]);
+    const childHoverMenu = useMemo(() => {
+        const appActiveKey = state.hoverItem;
+        if (isCustomized)
+            return React.createElement(CustomMenu, { isHover: true });
+        switch (appActiveKey) {
+            case isRecommendation ? 'DASHBOARD' : APP_KEYS.HOME:
+                return React.createElement(HomeMenu, { isHover: true });
+            default:
+                return React.createElement(CommonMenu, { isHover: true });
+        }
+    }, [isCustomized, isRecommendation, state.hoverItem]);
     const renderFeatureMenuItem = 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;
@@ -90,15 +98,15 @@ export const LeftMenuComponent = memo(props => {
     };
     return (React.createElement(LeftMenuNavWrapper, { style: style, "$isExpandMenu": state.isExpandMenu, className: className },
         React.createElement(LeftMenuNav, { className: "left-menu-nav" },
-            React.createElement(FeatureMenuWrapper, { vertical: true },
+            React.createElement(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave },
                 showLogo && (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(FeatureMenu, { role: "menu", className: "antsomi-scroll-box" },
                     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(PopoverWrapper, { show: state.isShowPopover && isExpandable, className: "antsomi-scroll-box antsomi-child-menu-popover" },
+                        React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childHoverMenu))),
                 React.createElement("div", { style: { flexShrink: 0 } }, renderSettings())),
             isExpandable && !isRecommendation && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
                 React.createElement(Icon, { type: "icon-ants-expand-more", style: {
@@ -107,5 +115,5 @@ export const LeftMenuComponent = memo(props => {
                         transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
                     }, onClick: onToggleChildMenu })))),
         React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu && isExpandable, isMarginTop: showLogo, className: "antsomi-scroll-box" },
-            React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childMenu))));
-});
+            React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childActiveMenu))));
+}, (prevProps, nextProps) => isEqual(prevProps, nextProps));

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

@@ -1,2 +1,6 @@
 import React from 'react';
-export declare const CommonMenu: React.FC;
+interface CommonMenuProps {
+    isHover?: boolean;
+}
+export declare const CommonMenu: React.FC<CommonMenuProps>;
+export {};

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

@@ -6,9 +6,11 @@ import { ChildMenu } from '../common';
 import { useLeftMenuContext } from '../../contexts';
 // Utils
 import { getMenuItem } from '../../utils';
-export const CommonMenu = memo(() => {
+export const CommonMenu = memo(({ isHover }) => {
     const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
+    const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
     const onMenuClick = useLeftMenuContext(store => store.onMenuClick);
     const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
-    return React.createElement(ChildMenu, { items: customChildren, onMenuClick: onMenuClick });
+    const customHoverChildren = useMemo(() => appHoverMenuChildren === null || appHoverMenuChildren === void 0 ? void 0 : appHoverMenuChildren.map(item => getMenuItem(item)), [appHoverMenuChildren]);
+    return (React.createElement(ChildMenu, { items: isHover ? customHoverChildren : customChildren, onMenuClick: onMenuClick }));
 });

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

@@ -1,5 +1,6 @@
 import React from 'react';
 interface CustomMenuProps {
+    isHover?: boolean;
 }
 export declare const CustomMenu: React.FC<CustomMenuProps>;
 export {};

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

@@ -4,8 +4,9 @@ import React, { memo } from 'react';
 import { ChildMenu } from '../common';
 // Hooks
 import { useLeftMenuContext } from '../../contexts';
-export const CustomMenu = memo(() => {
+export const CustomMenu = memo(({ isHover }) => {
     const appCustomMenuChildren = useLeftMenuContext(store => store.customMenuChildren);
+    const appCustomHoverMenuChildren = useLeftMenuContext(store => store.customHoverMenuChildren);
     const onMenuClick = useLeftMenuContext(store => store.onMenuClick);
-    return React.createElement(ChildMenu, { items: appCustomMenuChildren, onMenuClick: onMenuClick });
+    return (React.createElement(ChildMenu, { items: isHover ? appCustomHoverMenuChildren : appCustomMenuChildren, onMenuClick: onMenuClick }));
 });

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

@@ -1,2 +1,5 @@
 import React from 'react';
-export declare const HomeMenu: React.FC;
+export interface HomeMenuProps {
+    isHover?: boolean;
+}
+export declare const HomeMenu: React.FC<HomeMenuProps>;

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

@@ -9,44 +9,8 @@ import Icon from '@antscorp/icons';
 import { CreateButton, HomeMenuWrapper, ModalWrapper } from './styled';
 // Hooks
 import { useHomeMenu } from './useHomeMenu';
-// const MAP_TITLE = {
-//   REMOVE_ACCESS: {
-//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_REMOV_ACCESS_TAB, 'Remove access to this tab'),
-//     BODY: getTranslateMessage(
-//       TRANSLATE_KEY.REMOV_ACCESS_TAB,
-//       'This action will remove your access to this tab. You will not see it anymore. Are you sure you want to continue?',
-//     ),
-//     HEADING_DASHBOARD: getTranslateMessage(
-//       TRANSLATE_KEY._TITL_REMOV_ACCESS_DB,
-//       'Remove access to this dashboard',
-//     ),
-//     BODY_DASHBOARD: getTranslateMessage(
-//       TRANSLATE_KEY.REMOV_ACCESS_DB,
-//       'This action will remove your access to selected dashboard. You will not see it anymore. Are you sure you want to continue?',
-//     ),
-//   },
-//   DELETE_TAB: {
-//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_DELETE_TAB, 'Remove this tab'),
-//     BODY: getTranslateMessage(
-//       TRANSLATE_KEY.DELETE_TAB_MESS,
-//       'Removing this tab will delete it permanently. Are you sure you want to perform this action?',
-//     ),
-//     HEADING_DASHBOARD: getTranslateMessage(TRANSLATE_KEY._TITL_DELETE_DB, 'Remove this dashboard'),
-//     BODY_DASHBOARD: getTranslateMessage(
-//       TRANSLATE_KEY.DELETE_DB_MESS,
-//       'Removing this dashboard will delete it permanently. Are you sure you want to perform this action?',
-//     ),
-//   },
-//   'my-report-template': {
-//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_SHARE_RP, 'Share Report'),
-//     BODY: getTranslateMessage(
-//       TRANSLATE_KEY._SHARE_RP_MESS,
-//       'Sharing this tab with Public access will make your report public for everyone on the portal.',
-//     ),
-//   },
-// };
-export const HomeMenu = memo(() => {
-    const { children, removedDashboardId, isDashboardRemoving, isRecommendation, setRemovedDashboardId, onCreateNewReport, onMenuClick, onRemoveDashboard, } = useHomeMenu();
+export const HomeMenu = memo(props => {
+    const { children, removedDashboardId, isDashboardRemoving, isRecommendation, setRemovedDashboardId, onCreateNewReport, onMenuClick, onRemoveDashboard, } = useHomeMenu(props);
     return (React.createElement(React.Fragment, null,
         React.createElement(HomeMenuWrapper, { gap: 10, vertical: true },
             !isRecommendation && (React.createElement(CreateButton, { type: "primary", onClick: onCreateNewReport },

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export declare const useHomeMenu: () => {
+import { HomeMenuProps } from '.';
+export declare const useHomeMenu: (props: HomeMenuProps) => {
     children: import("../../types").TMenuItem[];
     removedDashboardId: string;
     isDashboardRemoving: boolean;

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

@@ -21,10 +21,12 @@ import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
 import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
 // Queries
 import { useRemoveDashboard } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
-export const useHomeMenu = () => {
+export const useHomeMenu = (props) => {
+    const { isHover } = props;
     const { pathname, search } = window.location;
     const { navigate, replace } = useCustomRouter();
     const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
+    const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
     const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
     const auth = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
     const env = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.env; });
@@ -55,6 +57,10 @@ export const useHomeMenu = () => {
         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]);
+    const customHoverChildren = useMemo(() => appHoverMenuChildren === null || appHoverMenuChildren === void 0 ? void 0 : appHoverMenuChildren.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 }))) }));
+    }), [appHoverMenuChildren, onOptionCallback]);
     const onCreateNewReport = useCallback(e => {
         if (onClickCreateDashboard) {
             onClickCreateDashboard(e);
@@ -110,7 +116,7 @@ export const useHomeMenu = () => {
         navigate,
     ]);
     return {
-        children: customChildren,
+        children: isHover ? customHoverChildren : customChildren,
         removedDashboardId,
         isDashboardRemoving,
         isRecommendation,

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

@@ -1,9 +1,10 @@
 // Libraries
-import React, { memo, useLayoutEffect, useState } from 'react';
+import React, { memo, useLayoutEffect, useMemo, useState } from 'react';
 import Icon from '@antscorp/icons';
 import { isEmpty, isNil, uniq } from 'lodash';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
+import { Cookies } from 'react-cookie';
 // Components
 import { Dropdown, Menu } from 'antd';
 import { MenuItemImage } from './components';
@@ -18,10 +19,10 @@ import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, getMenuItem } from '.
 import { findItemByPermissionCode, recursiveFindItemByKey, recursiveFindParentOfActiveItem, } from './utils';
 // Hooks
 import { useNavigatePath } from '../../../hooks';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 // Contexts
 import { useLeftMenuContext } from '../../../contexts';
 import { MARKETING_CHANNEL_CODE } from '@antscorp/antsomi-ui/es/components/template/Layout/constants';
-import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 const noDashboardItem = {
     key: 'no_dashboard',
     label: 'No dashboard available',
@@ -38,8 +39,9 @@ const styles = {
     menuItemTitle: { flex: '1 1 0%', maxWidth: '100%', overflow: 'hidden' },
 };
 export const ChildMenu = memo(props => {
-    var _a;
+    var _a, _b;
     const { items = [], onMenuClick } = props;
+    const cookies = useMemo(() => new Cookies(), []);
     const auth = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
     const env = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.env; });
     const activeAppCode = useLeftMenuContext(store => store.activeAppCode);
@@ -47,17 +49,20 @@ export const ChildMenu = memo(props => {
     const customItems = useLeftMenuContext(store => store.customItems);
     const isCustomized = useLeftMenuContext(store => store.isCustomized);
     const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
+    const customActiveAppKey = useLeftMenuContext(store => store.customActiveAppKey);
     const customActiveCurrentKey = useLeftMenuContext(store => store.customActiveCurrentKey);
     const setLeftMenuState = useLeftMenuContext(store => store.setState);
-    const layout = JSON.parse(localStorage.getItem('layout') || '{}');
-    const openMenuKeys = ((_a = layout === null || layout === void 0 ? void 0 : layout.leftMenu) === null || _a === void 0 ? void 0 : _a.openMenuKeys) || [];
+    const activeApp = useMemo(() => (isCustomized ? customActiveAppKey : activeAppCode), [activeAppCode, customActiveAppKey, isCustomized]);
+    const leftMenuCookies = cookies.get('_leftmenu_state');
+    const openMenuKeys = ((_b = (_a = cookies.get('_leftmenu_state')) === null || _a === void 0 ? void 0 : _a.openMenuKeys) === null || _b === void 0 ? void 0 : _b[activeApp]) || [];
     const [currentActiveItem, setCurrentActiveItem] = useState('');
     const [openKeys, setOpenKeys] = useState(openMenuKeys);
     const { pathname, hash } = window.location;
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     useLayoutEffect(() => {
-        localStorage.setItem('layout', JSON.stringify(Object.assign(Object.assign({}, layout), { leftMenu: Object.assign(Object.assign({}, layout === null || layout === void 0 ? void 0 : layout.leftMenu), { openMenuKeys: uniq(openKeys) }) })));
-    }, [layout, openKeys]);
+        if (activeApp)
+            cookies.set('_leftmenu_state', Object.assign(Object.assign({}, leftMenuCookies), { openMenuKeys: Object.assign(Object.assign({}, leftMenuCookies === null || leftMenuCookies === void 0 ? void 0 : leftMenuCookies.openMenuKeys), { [activeApp]: uniq(openKeys === null || openKeys === void 0 ? void 0 : openKeys.filter(item => item !== activeApp)) }) }));
+    }, [activeApp, cookies, leftMenuCookies, openKeys]);
     useDeepCompareEffect(() => {
         var _a;
         switch (true) {
@@ -69,7 +74,7 @@ export const ChildMenu = memo(props => {
                     menuItems: customItems,
                 });
                 if (parentKey) {
-                    setOpenKeys(prev => [...prev, parentKey]);
+                    setOpenKeys(prev => uniq([...prev, parentKey]));
                 }
                 break;
             }
@@ -129,7 +134,7 @@ export const ChildMenu = memo(props => {
                         menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => (Object.assign(Object.assign({}, getMenuItem(item)), { key: (item === null || item === void 0 ? void 0 : item.permission_code) || '' }))),
                     });
                     if (parentKey) {
-                        setOpenKeys(prev => [...prev, parentKey]);
+                        setOpenKeys(prev => uniq([...prev, parentKey]));
                     }
                 }
                 break;
@@ -151,7 +156,7 @@ export const ChildMenu = memo(props => {
                         menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => getMenuItem(item)),
                     });
                     if (parentKey) {
-                        setOpenKeys(prev => [...prev, parentKey]);
+                        setOpenKeys(prev => uniq([...prev, parentKey]));
                     }
                     // Active App Item having code matching url
                     const matchAppCode = findActiveAppCodeByUrl({ menuItems, url, auth });
@@ -247,6 +252,6 @@ export const ChildMenu = memo(props => {
     };
     return (React.createElement(MenuWrapper, null,
         React.createElement(Menu, { selectedKeys: [currentActiveItem], defaultOpenKeys: [currentActiveItem], openKeys: uniq(openKeys), mode: "inline", items: customMenuItems({ items }), inlineIndent: 12, onOpenChange: openKeys => {
-                setOpenKeys(openKeys);
+                setOpenKeys(uniq(openKeys));
             }, expandIcon: ({ isOpen }) => (React.createElement(Icon, { type: "icon-ants-expand-more", style: Object.assign(Object.assign({}, styles.expandIcon), { transform: `rotate(${isOpen ? '180deg' : '0deg'})` }) })), onClick: onClick })));
 });

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

@@ -2,6 +2,7 @@ import { LeftMenuProps } from '..';
 interface TState {
     hoverItem: string;
     isExpandMenu: boolean;
+    isShowPopover: boolean;
 }
 export declare const useLeftMenu: (props: LeftMenuProps) => {
     state: TState;
@@ -12,5 +13,6 @@ export declare const useLeftMenu: (props: LeftMenuProps) => {
     onMouseEnter: (key: string) => void;
     onMouseLeave: () => void;
     onHoverMenuBar: () => void;
+    onShowPopover: (hoverItem?: string) => void;
 };
 export {};

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

@@ -1,6 +1,7 @@
 // Libraries
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isArray, isNil } from 'lodash';
+import { Cookies } from 'react-cookie';
 // Utils
 import { findActiveAppCodeByChild, findActiveAppCodeByUrl, recursiveGetMenuItemByPermission, } from '../utils';
 // Store
@@ -9,12 +10,11 @@ import { useLeftMenuContext } from '../contexts';
 import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 // Hooks
 import { usePermission } from './usePermission';
-import { Cookies } from 'react-cookie';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 export const useLeftMenu = (props) => {
     // Props
     const { objectType = DASHBOARD_MODULE_CONFIG.objectType, objectId = DASHBOARD_MODULE_CONFIG.objectId, isGrouped = DASHBOARD_MODULE_CONFIG.isGrouped, appConfig, customization, onActiveMenuCodeChange, } = props;
-    const { isExpandable = true, expandMenu = false, isCustomized = false, isRecommendation = false, items, activeKey, onMenuItemClick, } = customization || {};
+    const { expandMenu = false, isCustomized = false, isRecommendation = false, items, activeKey, onMenuItemClick, } = customization || {};
     const mappedActiveKey = useMemo(() => {
         if (!isRecommendation)
             return activeKey;
@@ -32,16 +32,18 @@ export const useLeftMenu = (props) => {
                 return activeKey;
         }
     }, [activeKey, isRecommendation]);
-    const cookie = new Cookies();
+    const cookies = new Cookies();
     const { pathname, hash, origin } = window.location;
     const activeAppCode = useLeftMenuContext(store => store.activeAppCode);
     const customActiveAppKey = useLeftMenuContext(store => store.customActiveAppKey);
     const setLeftMenuContextState = useLeftMenuContext(store => store.setState);
     const { auth, env } = appConfig || {};
-    const leftMenuCookies = cookie.get('_leftmenu_state');
+    const timeoutPopover = useRef(null);
+    const leftMenuCookies = cookies.get('_leftmenu_state');
     const isOpenMenu = !isNil(leftMenuCookies === null || leftMenuCookies === void 0 ? void 0 : leftMenuCookies.expand) ? leftMenuCookies === null || leftMenuCookies === void 0 ? void 0 : leftMenuCookies.expand : true;
     const [state, setState] = useState({
         hoverItem: '',
+        isShowPopover: false,
         isExpandMenu: expandMenu || isOpenMenu,
     });
     const { mappingChildrenMenu, flattenMenuPermission, permissionMenu, activeItemPath } = usePermission();
@@ -53,7 +55,7 @@ export const useLeftMenu = (props) => {
     }, [customActiveAppKey, isRecommendation, onMenuItemClick, setLeftMenuContextState]);
     useDeepCompareEffect(() => {
         if (!expandMenu) {
-            cookie.set('_leftmenu_state', Object.assign(Object.assign({}, leftMenuCookies), { expand: state.isExpandMenu }));
+            cookies.set('_leftmenu_state', Object.assign(Object.assign({}, leftMenuCookies), { expand: state.isExpandMenu }));
             // const domain = '.antsomi.com';
             // const cookieValue = {
             //   ...leftMenuCookies,
@@ -119,25 +121,27 @@ export const useLeftMenu = (props) => {
     ]);
     // Change list menu children when hovering or activating items, giving priority to hovering items
     useDeepCompareEffect(() => {
-        var _a, _b, _c;
-        const appActiveKey = state.hoverItem
-            ? state.hoverItem
-            : isCustomized || isRecommendation
-                ? customActiveAppKey
-                : activeAppCode;
+        var _a, _b, _c, _d, _e, _f;
+        const appActiveKey = isCustomized || isRecommendation ? customActiveAppKey : activeAppCode;
         switch (true) {
             case isCustomized: {
                 setLeftMenuContextState({
                     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) || [],
+                    customHoverMenuChildren: state.hoverItem
+                        ? ((_b = items === null || items === void 0 ? void 0 : items.find(item => item.key === state.hoverItem)) === null || _b === void 0 ? void 0 : _b.children) || []
+                        : [],
                 });
                 break;
             }
             case isRecommendation: {
                 setLeftMenuContextState({
                     menuItems: mappingChildrenMenu,
-                    appMenuChildren: ((_b = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === appActiveKey)) === null || _b === void 0 ? void 0 : _b.children) ||
+                    appMenuChildren: ((_c = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === appActiveKey)) === null || _c === void 0 ? void 0 : _c.children) ||
                         [],
+                    appHoverMenuChildren: state.hoverItem
+                        ? ((_d = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === state.hoverItem)) === null || _d === void 0 ? void 0 : _d.children) || []
+                        : [],
                 });
                 break;
             }
@@ -145,8 +149,11 @@ export const useLeftMenu = (props) => {
                 if (isArray(mappingChildrenMenu)) {
                     setLeftMenuContextState({
                         menuItems: mappingChildrenMenu,
-                        appMenuChildren: ((_c = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appActiveKey)) === null || _c === void 0 ? void 0 : _c.children) ||
+                        appMenuChildren: ((_e = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appActiveKey)) === null || _e === void 0 ? void 0 : _e.children) ||
                             [],
+                        appHoverMenuChildren: state.hoverItem
+                            ? ((_f = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === state.hoverItem)) === null || _f === void 0 ? void 0 : _f.children) || []
+                            : [],
                     });
                 }
                 break;
@@ -204,24 +211,38 @@ export const useLeftMenu = (props) => {
         isRecommendation,
         onActiveMenuCodeChange,
     ]);
+    useEffect(() => clearTimeout(timeoutPopover === null || timeoutPopover === void 0 ? void 0 : timeoutPopover.current), [timeoutPopover]);
+    const onShowPopover = useCallback((hoverItem) => {
+        if (timeoutPopover)
+            clearTimeout(timeoutPopover === null || timeoutPopover === void 0 ? void 0 : timeoutPopover.current);
+        if (!state.isShowPopover)
+            setState(prev => (Object.assign(Object.assign({}, prev), { isShowPopover: true })));
+        if (hoverItem)
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem })));
+    }, [state.isShowPopover]);
     const onToggleChildMenu = useCallback(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
     }, []);
     const onMouseEnter = useCallback((key) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: key })));
-        // if (!state.isExpandMenu || !isExpandable) {
-        //   setState(prev => ({ ...prev, hoverItem: key }));
-        // }
-    }, []);
+        if (state.hoverItem !== key) {
+            onShowPopover(key);
+            // if (!state.isExpandMenu || !isExpandable) {
+            //   setState(prev => ({ ...prev, hoverItem: key }));
+            // }
+        }
+    }, [state.hoverItem, onShowPopover]);
     const onMouseLeave = useCallback(() => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
+        timeoutPopover.current = setTimeout(() => {
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
+            setState(prev => (Object.assign(Object.assign({}, prev), { isShowPopover: false })));
+        }, 500);
         // if (!state.isExpandMenu || !isExpandable) {
         //   setState(prev => ({ ...prev, hoverItem: '' }));
         // }
     }, []);
-    const onHoverMenuBar = () => {
+    const onHoverMenuBar = useCallback(() => {
         onMouseEnter(isCustomized ? customActiveAppKey : activeAppCode);
-    };
+    }, [activeAppCode, customActiveAppKey, isCustomized, onMouseEnter]);
     return {
         state,
         activeAppCode,
@@ -231,5 +252,6 @@ export const useLeftMenu = (props) => {
         onMouseEnter,
         onMouseLeave,
         onHoverMenuBar,
+        onShowPopover,
     };
 };

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

@@ -1,10 +1,10 @@
 // Libraries
-import { useContextSelector } from 'use-context-selector';
 import { useCallback, useMemo } from 'react';
 import { isNil } from 'lodash';
 import { useLocation } from 'react-router-dom';
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Contexts
-import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+import { useLeftMenuContext } from '../contexts';
 // Utils
 import { getGeneratePath } from '../utils';
 import { hasSelectAccountPermission } from '../../../template/Layout/utils';
@@ -13,11 +13,12 @@ import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Hooks
 import { usePermission } from './usePermission';
 export const useNavigatePath = () => {
-    const { auth, env } = useContextSelector(AppConfigContext, state => state);
+    const appConfig = useLeftMenuContext(store => store.appConfig);
+    const { auth, env } = appConfig || {};
     const { search } = useLocation();
     const isDev = env === ENV.DEV;
     const { activeItemPath, flattenMenuPermission } = usePermission();
-    const hasRole = useMemo(() => hasSelectAccountPermission(activeItemPath, flattenMenuPermission), [activeItemPath, flattenMenuPermission]);
+    const hasRole = useDeepCompareMemo(() => hasSelectAccountPermission(activeItemPath, flattenMenuPermission), [activeItemPath, flattenMenuPermission]);
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
     const oidParam = hasRole ? urlParams.get('oid') : null;
     const searchParams = oidParam ? `?oid=${oidParam}` : '';

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

@@ -8,7 +8,9 @@ export interface LeftMenuStoreProps {
     menuItems: TFeatureMenu[];
     customItems: TMenuItem[];
     customMenuChildren: TMenuItem[];
+    customHoverMenuChildren: TMenuItem[];
     appMenuChildren: TFeatureMenu[];
+    appHoverMenuChildren: TFeatureMenu[];
     appConfig?: AppConfigProviderProps;
     isCustomized?: boolean;
     isRecommendation?: boolean;

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

@@ -6,8 +6,10 @@ const DEFAULT_PROPS = {
     customActiveCurrentKey: '',
     menuItems: [],
     appMenuChildren: [],
+    appHoverMenuChildren: [],
     customItems: [],
     customMenuChildren: [],
+    customHoverMenuChildren: [],
     isCustomized: false,
     isRecommendation: false,
     dashboardParams: {

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

@@ -1,6 +1,8 @@
 /// <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 PopoverWrapper: import("styled-components").StyledComponent<"div", any, {
+    show: boolean;
+}, 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, {}, never>;
 export declare const ExpandWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenuNavWrapper: import("styled-components").StyledComponent<"div", any, {

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

@@ -19,8 +19,16 @@ export const IconWrapper = styled.div `
   }
 `;
 export const PopoverWrapper = styled.div `
-  opacity: 0;
-  visibility: hidden;
+  ${({ show }) => show
+    ? `
+      opacity: 1;
+      visibility: visible;
+      `
+    : `
+      opacity: 0;
+      visibility: hidden;
+    `}
+
   position: absolute;
   background-color: white;
   left: 65px;
@@ -36,13 +44,6 @@ export const PopoverWrapper = styled.div `
 export const FeatureMenuWrapper = styled(Flex) `
   flex: 1 1 0%;
   overflow: hidden;
-
-  &:hover {
-    ${PopoverWrapper} {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
 `;
 export const ExpandWrapper = styled.div `
   height: 35px;

package/es/queries/DataTable/index.js

@@ -8,11 +8,11 @@ const { GET_COLUMN_METRICS, GET_MODIFY_COLUMN_LIST, GET_SAVED_FILTER_LIST, GET_F
 /* Column */
 export const useGetColumnMetrics = (params) => {
     const { args, options } = params;
-    return useQuery(Object.assign({ queryKey: [GET_COLUMN_METRICS, args.params], queryFn: () => dataTableServices.column.getColumnMetrics(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_COLUMN_METRICS, args.params, args.request], queryFn: () => dataTableServices.column.getColumnMetrics(args) }, options));
 };
 export const useGetModifyColumnList = (params) => {
     const { args, options } = params;
-    return useQuery(Object.assign({ queryKey: [GET_MODIFY_COLUMN_LIST, args.params], queryFn: () => dataTableServices.column.getModifyColumnList(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_MODIFY_COLUMN_LIST, args.params, args.request], queryFn: () => dataTableServices.column.getModifyColumnList(args) }, options));
 };
 export const useUpdateModifyColumn = (params) => {
     const { options, auth } = params || {};
@@ -44,11 +44,11 @@ export const useDeleteModifyColumn = (params) => {
 /* Filter */
 export const useGetSavedFilterList = (params) => {
     const { args, options } = params;
-    return useQuery(Object.assign({ queryKey: [GET_SAVED_FILTER_LIST, args.params], queryFn: () => dataTableServices.filter.getSavedFilterList(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_SAVED_FILTER_LIST, args.params, args.request], queryFn: () => dataTableServices.filter.getSavedFilterList(args) }, options));
 };
 export const useGetFilterMetricList = (params) => {
     const { args, options } = params;
-    return useQuery(Object.assign({ queryKey: [GET_FILTER_METRIC_LIST, args.params], queryFn: () => dataTableServices.filter.getFilterMetricList(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_FILTER_METRIC_LIST, args.params, args.request], queryFn: () => dataTableServices.filter.getFilterMetricList(args) }, options));
 };
 export const useSaveFilter = (params) => {
     const { options, auth } = params || {};
@@ -80,5 +80,5 @@ export const useDeleteSavedFilter = (params) => {
 /* Table Listing */
 export const useGetTableListing = (params) => {
     const { options, args } = params || {};
-    return useQuery(Object.assign({ queryKey: [GET_FILTER_METRIC_LIST, args === null || args === void 0 ? void 0 : args.params], queryFn: () => dataTableServices.listing.getTableListing(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_FILTER_METRIC_LIST, args === null || args === void 0 ? void 0 : args.params, args === null || args === void 0 ? void 0 : args.request], queryFn: () => dataTableServices.listing.getTableListing(args) }, options));
 };

package/es/services/DataTable/index.d.ts

@@ -1,3 +1,4 @@
+import { AxiosRequestConfig } from 'axios';
 import { TServiceAuth } from '../../types';
 import { ColumnMetric, FilterMetric, ModifyColumn } from '../../models/DataTable';
 import { SavedFilter } from '../../models/DataTable/SavedFilter';
@@ -10,10 +11,12 @@ export type TGlobalApiParams = {
 export type TGetMetricListArgs = {
     auth?: TServiceAuth;
     params?: TGlobalApiParams;
+    request?: AxiosRequestConfig<any>;
 };
 export type TGetModifyColumnListArgs = {
     auth?: TServiceAuth;
     params?: TGlobalApiParams;
+    request?: AxiosRequestConfig<any>;
 };
 export type TUpdateModifyColumnArgs = {
     auth?: TServiceAuth;
@@ -40,10 +43,12 @@ export type TDeleteModifyColumnArgs = {
 export type TGetSavedFilterListArgs = {
     auth?: TServiceAuth;
     params?: TGlobalApiParams;
+    request?: AxiosRequestConfig<any>;
 };
 export type TGetFilterMetricListArgs = {
     auth?: TServiceAuth;
     params?: TGlobalApiParams;
+    request?: AxiosRequestConfig<any>;
 };
 export type TSaveFilterArgs = {
     auth?: TServiceAuth;
@@ -74,11 +79,12 @@ export type TGetTableListingArgs = {
         page?: number;
         filter?: string;
     };
+    request?: AxiosRequestConfig<any>;
 };
 export declare const dataTableServices: {
     column: {
-        getColumnMetrics: ({ auth, params }: TGetMetricListArgs) => Promise<ColumnMetric[]>;
-        getModifyColumnList: ({ auth, params, }: TGetModifyColumnListArgs) => Promise<ModifyColumn[]>;
+        getColumnMetrics: ({ auth, params, request, }: TGetMetricListArgs) => Promise<ColumnMetric[]>;
+        getModifyColumnList: ({ auth, params, request, }: TGetModifyColumnListArgs) => Promise<ModifyColumn[]>;
         updateModifyColumn: ({ auth, data, }: TUpdateModifyColumnArgs) => Promise<{
             status: number;
         }>;
@@ -90,8 +96,8 @@ export declare const dataTableServices: {
         }>;
     };
     filter: {
-        getSavedFilterList: ({ auth, params, }: TGetSavedFilterListArgs) => Promise<SavedFilter[]>;
-        getFilterMetricList: ({ auth, params, }: TGetFilterMetricListArgs) => Promise<FilterMetric[]>;
+        getSavedFilterList: ({ auth, params, request, }: TGetSavedFilterListArgs) => Promise<SavedFilter[]>;
+        getFilterMetricList: ({ auth, params, request, }: TGetFilterMetricListArgs) => Promise<FilterMetric[]>;
         saveFilter: ({ auth, data }: TSaveFilterArgs) => Promise<{
             status: number;
         }>;
@@ -103,6 +109,6 @@ export declare const dataTableServices: {
         }>;
     };
     listing: {
-        getTableListing<T = any>({ auth, params, }: TGetTableListingArgs): Promise<DataTableListing<T>>;
+        getTableListing<T = any>({ auth, params, request, }: TGetTableListingArgs): Promise<DataTableListing<T>>;
     };
 };

package/es/services/DataTable/index.js

@@ -32,29 +32,21 @@ const mapAuth = (auth) => {
 };
 export const dataTableServices = {
     column: {
-        getColumnMetrics: (_a) => __awaiter(void 0, [_a], void 0, function* ({ auth, params }) {
+        getColumnMetrics: (_a) => __awaiter(void 0, [_a], void 0, function* ({ auth, params, request, }) {
             const { url } = auth || {};
             const { type = GET_COLUMNS, objType, objId } = params || {};
-            const response = yield axios({
-                url,
-                method: 'GET',
-                params: Object.assign(Object.assign({}, mapAuth(auth)), { type,
+            const response = yield axios(Object.assign(Object.assign({}, request), { url, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), { type,
                     objType,
-                    objId }),
-            });
+                    objId }) }));
             return get(response, 'data.data.metrics', []);
         }),
-        getModifyColumnList: (_b) => __awaiter(void 0, [_b], void 0, function* ({ auth, params, }) {
+        getModifyColumnList: (_b) => __awaiter(void 0, [_b], void 0, function* ({ auth, params, request, }) {
             try {
                 const { url } = auth || {};
                 const { type = GET_LIST_MODIFY_COLUMN, objType, objId } = params || {};
-                const response = yield axios({
-                    url,
-                    method: 'GET',
-                    params: Object.assign(Object.assign({}, mapAuth(auth)), { type,
+                const response = yield axios(Object.assign(Object.assign({}, request), { url, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), { type,
                         objType,
-                        objId }),
-                });
+                        objId }) }));
                 return get(response, 'data.data.modifyColumns', []);
             }
             catch (error) {
@@ -107,34 +99,26 @@ export const dataTableServices = {
         }),
     },
     filter: {
-        getSavedFilterList: (_j) => __awaiter(void 0, [_j], void 0, function* ({ auth, params, }) {
+        getSavedFilterList: (_j) => __awaiter(void 0, [_j], void 0, function* ({ auth, params, request, }) {
             try {
                 const { url } = auth || {};
                 const { type = GET_SAVED_FILTER, objType: object, objId } = params || {};
-                const response = yield axios({
-                    url,
-                    method: 'GET',
-                    params: Object.assign(Object.assign({}, mapAuth(auth)), { type,
+                const response = yield axios(Object.assign(Object.assign({}, request), { url, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), { type,
                         object,
-                        objId }),
-                });
+                        objId }) }));
                 return get(response, 'data.data.filters', []);
             }
             catch (error) {
                 return Promise.reject(error);
             }
         }),
-        getFilterMetricList: (_k) => __awaiter(void 0, [_k], void 0, function* ({ auth, params, }) {
+        getFilterMetricList: (_k) => __awaiter(void 0, [_k], void 0, function* ({ auth, params, request, }) {
             try {
                 const { url } = auth || {};
                 const { type = GET_LIST_FILTER, objType: object, objId } = params || {};
-                const response = yield axios({
-                    url,
-                    method: 'GET',
-                    params: Object.assign(Object.assign({}, mapAuth(auth)), { type,
+                const response = yield axios(Object.assign(Object.assign({}, request), { url, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), { type,
                         object,
-                        objId }),
-                });
+                        objId }) }));
                 return get(response, 'data.data.filters', []);
             }
             catch (error) {
@@ -198,13 +182,9 @@ export const dataTableServices = {
     },
     listing: {
         getTableListing(_a) {
-            return __awaiter(this, arguments, void 0, function* ({ auth, params, }) {
+            return __awaiter(this, arguments, void 0, function* ({ auth, params, request, }) {
                 try {
-                    const response = yield axios({
-                        url: `${auth === null || auth === void 0 ? void 0 : auth.url}`,
-                        method: 'GET',
-                        params: Object.assign(Object.assign({}, mapAuth(auth)), params),
-                    });
+                    const response = yield axios(Object.assign(Object.assign({}, request), { url: `${auth === null || auth === void 0 ? void 0 : auth.url}`, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), params) }));
                     return get(response, 'data.data', {
                         body: [],
                         header: [],

package/es/tests/DataTableTest.js

@@ -53,6 +53,9 @@ export const DataTableTest = () => {
                 listing: {
                     url: 'https://sandbox-survey.antsomi.com/api/v1/survey/performance',
                 },
+                column: {
+                    enabled: false,
+                },
             },
             object: {
                 objectId: -1, // Current just support for survey

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.406",
+  "version": "1.3.5-beta.408",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",