@antscorp/antsomi-ui 1.3.5-beta.407 → 1.3.5-beta.409

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/Filter/FilterCondition/index.js

@@ -12,7 +12,6 @@ const { BETWEEN, EXISTS, NOT_EXISTS } = OPERATORS_OPTION;
 export const FilterCondition = props => {
     // Props
     const { filterMetric, filterCondition, onCancel, onApply } = props;
-    console.log('🚀 ~ filterMetric, filterCondition:', filterMetric, filterCondition);
     // Hooks
     const [form] = Form.useForm();
     // Form

package/es/components/organism/DataTable/components/Filter/FilterConditionList.js

@@ -23,7 +23,6 @@ const { t } = i18nInstance;
 export const FilterConditionList = memo(() => {
     // Store
     const { filterMetrics, filters, isFilterActive, onChangeFilters = () => { }, } = useDataTableContext(store => store.filter);
-    console.log('🚀 ~ constFilterConditionList:React.FC<FilterConditionListProps>=memo ~ filters:', filters, filterMetrics);
     const setFilter = useDataTableContext(store => store.setFilter);
     // State
     /* Reserve for handle popover open per filter condition */

package/es/components/organism/DataTable/components/Filter/SavedFilterAndMetrics.js

@@ -81,8 +81,7 @@ export const SavedFilterAndMetrics = memo(props => {
                                             return new Promise((resolve, reject) => {
                                                 if (onRemove) {
                                                     onRemove(savedFilter)
-                                                        .then(response => {
-                                                        console.log({ response });
+                                                        .then(() => {
                                                         resolve(true);
                                                     })
                                                         .catch(() => reject());

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

@@ -29,7 +29,7 @@ export const ResizableCell = props => {
         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];
+            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell`)) === null || _a === void 0 ? void 0 : _a[(index !== null && index !== void 0 ? index : 0) + 1];
             if (cell) {
                 cell.classList.toggle(className);
             }
@@ -37,7 +37,7 @@ export const ResizableCell = props => {
     };
     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();
-            } },
+            }, onMouseEnter: () => toggleCellClass(), onMouseLeave: () => toggleCellClass() },
             React.createElement("span", Object.assign({ className: "resizable-handle" }, handleProps))), onResize: (...args) => onResize && onResize(...args), draggableOpts: { enableUserSelectHack: true } },
         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

@@ -59,7 +59,7 @@ export const Table = memo(() => {
             });
         }
     }, [tableProps.columns]);
-    return (React.createElement(StyledTable, Object.assign({}, tableProps, { ref: ref => {
+    return (React.createElement(StyledTable, Object.assign({}, tableProps, { virtual: true, ref: ref => {
             tableRef.current = ref === null || ref === void 0 ? void 0 : ref.nativeElement;
         }, scroll: Object.assign(Object.assign({}, scroll), { y: (scroll === null || scroll === void 0 ? void 0 : scroll.y) || '500px', x: (scroll === null || scroll === void 0 ? void 0 : scroll.x) || '100%' }), components: {
             header: Object.assign({ cell: ResizableCell }, (_a = tableProps === null || tableProps === void 0 ? void 0 : tableProps.components) === null || _a === void 0 ? void 0 : _a.header),
@@ -71,22 +71,19 @@ export const Table = memo(() => {
                 });
                 (_b = (_a = tableProps === null || tableProps === void 0 ? void 0 : tableProps.rowSelection) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, selectedRowKeys, selectedRows, info);
             } }),
-    }), { 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,
-                        },
-                    },
-                    onResize: handleResize(index),
-                });
-            } }))), bordered: true, pagination: false, loading: {
+    }), { columns: columns === null || columns === void 0 ? void 0 : columns.map((col, index) => (Object.assign(Object.assign({}, col), { onHeaderCell: (column) => ({
+                tableRef,
+                disableResize: index === ((columns === null || columns === void 0 ? void 0 : columns.length) || 1) - 1,
+                fixed: column.fixed,
+                width: column.width,
+                index,
+                // handleProps: {
+                //   style: {
+                //     height: tableRef?.current?.clientHeight,
+                //   },
+                // },
+                onResize: handleResize(index),
+            }) }))), bordered: true, pagination: false, loading: {
             indicator: React.createElement(Spin, null),
             spinning: !!tableProps.loading,
         }, tableLayout: "fixed" })));

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

@@ -19,7 +19,7 @@ export const StyledTable = styled(Table) `
       }
     }
 
-    .antsomi-table-body {
+    .antsomi-table-tbody-virtual {
       .antsomi-table-row {
         .antsomi-table-cell {
           &.resizable-cell {
@@ -39,8 +39,9 @@ export const StyledTable = styled(Table) `
   .resizable-handle-wrapper {
     position: absolute;
     top: 0px;
-    right: -10.5px;
+    right: -10px;
     width: 20px;
+    height: 100%;
     display: flex;
     justify-content: center;
     z-index: 10;

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

@@ -1,7 +1,8 @@
 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 MIN_COLUMN_WIDTH = 55;
 declare const DEFAULT_ROW_SELECTION_WIDTH = 47;
+declare const DEFAULT_TOGGLE_WIDTH = 55;
 declare const DEFAULT_COLUMN_WIDTHS: number[];
-export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_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, DEFAULT_TOGGLE_WIDTH, };

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

@@ -1,8 +1,9 @@
 const DATA_TABLE_PREFIX = 'data-table';
 const DATA_TABLE_DEFAULT_NAME = 'default';
 const DEFAULT_COLUMN_WIDTH = 200;
-const MIN_COLUMN_WIDTH = 100;
+const MIN_COLUMN_WIDTH = 55;
 const DEFAULT_FIRST_COLUMN_WIDTH = 200;
 const DEFAULT_ROW_SELECTION_WIDTH = 47;
+const DEFAULT_TOGGLE_WIDTH = 55;
 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, MIN_COLUMN_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, DEFAULT_TOGGLE_WIDTH, };

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

@@ -3,6 +3,7 @@ import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 import { AxiosRequestConfig } from 'axios';
 import { FilterItem, TableProps } from '../../types';
 import { PaginationProps } from '../../components';
+import { ColumnType } from 'antd/es/table';
 export type TApiGlobal = AxiosRequestConfig<any> & {
     enabled?: boolean;
 };
@@ -19,11 +20,20 @@ export type TConfig = {
         objectId: number;
     };
 };
+type TToggleColumnType<TTableType> = ColumnType<TTableType> & {
+    value?: ((record: TTableType) => boolean) | boolean;
+    valueKey?: keyof TTableType;
+    onChange?: (checked: boolean, record: TTableType) => void;
+};
+type TTableColumnType<TTableType, K extends keyof TTableType | 'toggle'> = K extends 'toggle' ? TToggleColumnType<TTableType> : ColumnType<TTableType>;
 export interface UseDataTableListingProps<TTableType = any> {
     config: TConfig;
     name?: string;
-    table?: TableProps<TTableType> & {
+    table?: Omit<TableProps<TTableType>, 'columns'> & {
         mainColumnKey: keyof TTableType;
+        columns?: {
+            [K in keyof TTableType | 'toggle']?: TTableColumnType<TTableType, K>;
+        };
     };
 }
 export interface DataTableLocalStorage {
@@ -33,3 +43,4 @@ export interface DataTableLocalStorage {
     };
     pagination?: PaginationProps;
 }
+export {};

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

@@ -1,11 +1,29 @@
+import React from 'react';
+import { useGetColumnMetrics, useGetFilterMetricList, useGetModifyColumnList, useGetSavedFilterList, useGetTableListing } from '@antscorp/antsomi-ui/es/queries';
 import { UseDataTableListingProps } from './types';
-import { FilterProps, TColumnActionButton, TableProps } from '../../types';
+import { FilterItem, FilterProps, TColumnActionButton, TableProps } from '../../types';
 import { PaginationProps } from '../../components';
 interface TUseDataTableListing<TTableType = any> {
     modifyColumn: TColumnActionButton;
     filter: FilterProps;
     pagination: PaginationProps;
     table: TableProps<TTableType>;
+    selectedRowKeys: React.Key[];
+    queries: {
+        getTableListing: ReturnType<typeof useGetTableListing>;
+        getModifyColumnList: ReturnType<typeof useGetModifyColumnList>;
+        getSavedFilterList: ReturnType<typeof useGetSavedFilterList>;
+        getColumnMetrics: ReturnType<typeof useGetColumnMetrics>;
+        getFilterMetricList: ReturnType<typeof useGetFilterMetricList>;
+    };
+    setDatTableListingState: React.Dispatch<React.SetStateAction<TState<TTableType>>>;
 }
+type TState<TTableType = any> = {
+    filters?: FilterItem[];
+    selectedFilterId?: string | number;
+    pagination: PaginationProps;
+    table: TableProps<TTableType>;
+    selectedRowKeys: React.Key[];
+};
 export declare function useDataTableListing<TTableType = Record<string, any>>(props: UseDataTableListingProps<TTableType>): TUseDataTableListing<TTableType>;
 export {};

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

@@ -24,7 +24,7 @@ import { isEmpty } from 'lodash';
 // Types
 import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Components
-import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Typography, Switch, Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
 import { COLUMN_DOMAIN } from '@antscorp/antsomi-ui/es/constants';
 import { MODIFY_COLUMN_DISABLE_EDITABLE, MODIFY_COLUMN_DISABLE_REMOVE, SAVED_FILTER_DEFAULT, TABLE_LISTING_PREFIX, } from './constants';
@@ -35,6 +35,7 @@ import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, use
 import { flatTree, safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 import { METRIC_MAP_NUMBER_TYPE } from '../../constants/filter';
 import { mapFiltersToApiFilters, mapFiltersToRules, mapRulesToFilters } from '../../utils';
+import { DEFAULT_TOGGLE_WIDTH } from '../../constants';
 const { Text } = Typography;
 const initialState = {
     filters: [],
@@ -47,6 +48,7 @@ const initialState = {
     table: {
         loading: false,
     },
+    selectedRowKeys: [],
 };
 export function useDataTableListing(props) {
     // Props
@@ -61,7 +63,7 @@ export function useDataTableListing(props) {
     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 { filters, selectedFilterId, pagination, selectedRowKeys } = state;
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
     const listingAuth = Object.assign(Object.assign({}, auth), { url: listingUrl });
@@ -77,7 +79,7 @@ export function useDataTableListing(props) {
         return jsonValues;
     }, [localStorageKey]);
     // Queries
-    const { data: columnMetricsData } = useGetColumnMetrics({
+    const getColumnMetrics = useGetColumnMetrics({
         args: {
             auth: modifyColumnAuth,
             params: mapObject,
@@ -87,7 +89,7 @@ export function useDataTableListing(props) {
             enabled: enabledApiColumn,
         },
     });
-    const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = useGetModifyColumnList({
+    const getModifyColumnList = useGetModifyColumnList({
         args: {
             auth: modifyColumnAuth,
             params: mapObject,
@@ -97,7 +99,7 @@ export function useDataTableListing(props) {
             enabled: enabledApiColumn,
         },
     });
-    const { data: savedFiltersData } = useGetSavedFilterList({
+    const getSavedFilterList = useGetSavedFilterList({
         args: {
             auth: filterAuth,
             params: mapObject,
@@ -107,7 +109,7 @@ export function useDataTableListing(props) {
             enabled: enabledApiFilter,
         },
     });
-    const { data: filterMetricsData } = useGetFilterMetricList({
+    const getFilterMetricList = useGetFilterMetricList({
         args: {
             auth: filterAuth,
             params: mapObject,
@@ -117,7 +119,7 @@ export function useDataTableListing(props) {
             enabled: enabledApiFilter,
         },
     });
-    const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, refetch: refetchTableListing, } = useGetTableListing({
+    const getTableListing = useGetTableListing({
         args: {
             auth: listingAuth,
             params: {
@@ -132,6 +134,11 @@ export function useDataTableListing(props) {
         },
     });
     // Variables
+    const { data: columnMetricsData } = getColumnMetrics || {};
+    const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = getModifyColumnList || {};
+    const { data: savedFiltersData } = getSavedFilterList || {};
+    const { data: filterMetricsData } = getFilterMetricList || {};
+    const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, refetch: refetchTableListing, } = getTableListing || {};
     const { body: tableBody, header: tableHeader, total } = tableListing || {};
     // Mutations
     const { mutateAsync: updateModifyColumn } = useUpdateModifyColumn({
@@ -198,30 +205,34 @@ export function useDataTableListing(props) {
         name: filterName,
         removable: true,
     }))) || []), [savedFiltersData]);
-    const tableColumns = useDeepCompareMemo(() => {
+    const tableColumns = useMemo(() => {
         let data = [];
-        data =
-            (tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.map(headerCol => {
-                const { name, label, fixColumn } = headerCol;
-                return {
-                    key: name,
-                    dataIndex: name,
-                    title: label,
-                    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' }}>
-                    //       {value}
-                    //     </Text>
-                    //   );
-                    // },
-                };
-            })) || [];
+        const { columns } = tableProps || {};
+        // Check if has column toggle then add toggle column
+        if (columns === null || columns === void 0 ? void 0 : columns.toggle) {
+            const { key, dataIndex, valueKey, title, value, onChange } = columns.toggle || {};
+            data.push(Object.assign({ key: 'toggle' || key, fixed: 'left', align: 'center', dataIndex: 'toggle' || dataIndex, title: 'Toggle' || title, render: (_, record) => {
+                    const checked = value
+                        ? typeof value === 'function'
+                            ? value(record)
+                            : value
+                        : !!record[valueKey];
+                    return (React.createElement(Flex, { align: "center", justify: "center" },
+                        React.createElement(Switch, { checked: checked, onChange: checked => {
+                                if (onChange) {
+                                    onChange(checked, record);
+                                }
+                            } })));
+                }, width: DEFAULT_TOGGLE_WIDTH }, columns.toggle));
+        }
+        data = data.concat((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.map(headerCol => {
+            const { name, label, fixColumn } = headerCol;
+            return Object.assign({ key: name, dataIndex: name, title: label, fixed: fixColumn ? 'left' : undefined, render(value) {
+                    return (React.createElement(Text, { ellipsis: { tooltip: true } }, typeof value !== 'object' ? value : null));
+                } }, columns === null || columns === void 0 ? void 0 : columns[name]);
+        })) || []);
         return data;
-    }, [tableHeader]);
+    }, [tableHeader, tableProps]);
     const tableData = useDeepCompareMemo(() => (tableBody === null || tableBody === void 0 ? void 0 : tableBody.map((row) => (Object.assign(Object.assign({}, row), { key: row === null || row === void 0 ? void 0 : row[tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey] })))) || [], [tableBody]);
     // Effects
     /**
@@ -414,7 +425,23 @@ export function useDataTableListing(props) {
             loading: isTableListingLoading || isTableListingRefetching,
             columns: tableColumns,
             dataSource: tableData,
-            rowSelection: {},
+            rowSelection: {
+                selectedRowKeys,
+                onChange(selectedRowKeys) {
+                    setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys })));
+                },
+            },
+        },
+        selectedRowKeys,
+        /* Queries */
+        queries: {
+            getTableListing,
+            getModifyColumnList,
+            getSavedFilterList,
+            getColumnMetrics,
+            getFilterMetricList,
         },
+        // Handles
+        setDatTableListingState: setState,
     };
 }

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

@@ -8,6 +8,5 @@ export const createDataTableStore = (initProps) => createStore()(set => (Object.
     setState: newState => set(store => merge(cloneDeep(store), cloneDeep(newState))), setFilter: filter => {
         set(store => (Object.assign(Object.assign({}, store), { filter: Object.assign(Object.assign({}, store.filter), filter) })));
     }, setModifyColumn: modifyColumn => set(store => (Object.assign(Object.assign({}, store), { modifyColumn: Object.assign(Object.assign({}, store.modifyColumn), modifyColumn) }))), setTable: table => set(store => (Object.assign(Object.assign({}, store), { table: Object.assign(Object.assign({}, store.table), table) }))), setToolbar: toolbar => set(store => (Object.assign(Object.assign({}, store), { toolbar: Object.assign(Object.assign({}, store.toolbar), toolbar) }))), setPagination: pagination => {
-        console.log('🚀 ~ pagination:', pagination);
         set(store => (Object.assign(Object.assign({}, store), { pagination: Object.assign(Object.assign({}, store.pagination), pagination) })));
     } })));

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/providers/ConfigProvider/GlobalStyle.js

@@ -35,6 +35,7 @@ export const GlobalStyle = () => {
 
       .rc-virtual-list-scrollbar {
         width: 4px !important;
+        height: 4px !important;
       }
 
       /* Custom */

package/es/services/DataTable/index.js

@@ -23,6 +23,7 @@ import axios from 'axios';
 import { get } from 'lodash';
 // Constants
 import { COLUMN_API_TYPE, FILTER_API_TYPE } from '../../constants/dataTable';
+import { mapResponseListingToGeneral } from '../../utils';
 const { GET_COLUMNS, GET_LIST_MODIFY_COLUMN, UPDATE_MODIFY_COLUMN, ADD_MODIFY_COLUMN } = COLUMN_API_TYPE;
 const { GET_SAVED_FILTER, GET_LIST_FILTER, SAVE_FILTER, UPDATE_FILTER } = FILTER_API_TYPE;
 /* ----------  END OF LISTING  ---------- */
@@ -185,11 +186,7 @@ export const dataTableServices = {
             return __awaiter(this, arguments, void 0, function* ({ auth, params, request, }) {
                 try {
                     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: [],
-                        total: 0,
-                    });
+                    return mapResponseListingToGeneral(get(response, 'data.data', {}));
                 }
                 catch (error) {
                     return Promise.reject(error);

package/es/tests/DataTableTest.js

@@ -1,9 +1,9 @@
 // Libraries
 import React, { useCallback, useMemo, useState } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, Link } from 'react-router-dom';
 // Components
 import { DataTable, } from '../components/organism/DataTable';
-import { Popover } from '../components';
+import { Popover, Typography } from '../components';
 // Styled
 import { TableTestWrapper } from './styled';
 // Constants
@@ -46,7 +46,7 @@ export const DataTableTest = () => {
     // Variables
     const { tableCollapsed } = state;
     // Hooks
-    const { modifyColumn, filter, pagination, table } = useDataTableListing({
+    const { modifyColumn, filter, pagination, table, selectedRowKeys } = useDataTableListing({
         config: {
             // auth: {}, // Default is get from AppConfigProvider
             api: {
@@ -65,6 +65,19 @@ export const DataTableTest = () => {
         name: 'survey',
         table: {
             mainColumnKey: 'survey_id',
+            columns: {
+                survey_name: {
+                    render: (value, record) => (React.createElement(Link, { to: `/survey/${record.survey_id}` },
+                        React.createElement(Typography.Link, null, value))),
+                },
+                // toggle: {
+                //   title: 'Status',
+                //   valueKey: 'responses',
+                //   onChange: (checked, record) => {
+                //     console.log({ checked, record });
+                //   },
+                // },
+            },
         },
     });
     const searchList = useMemo(() => {

package/es/utils/dataTable.d.ts

@@ -0,0 +1,5 @@
+export declare const mapResponseListingToGeneral: (response: Record<string, any>) => {
+    body: any;
+    header: any;
+    total: any;
+};

package/es/utils/dataTable.js

@@ -0,0 +1,9 @@
+// NOTES: Improve typescript
+export const mapResponseListingToGeneral = (response) => {
+    const { body, header, total, entries, column_defs, rows, total_records } = response || {};
+    return {
+        body: body || entries || rows || [],
+        header: header || column_defs || [],
+        total: total || total_records || 0,
+    };
+};

package/es/utils/index.d.ts

@@ -5,3 +5,4 @@ export * from './templateListing';
 export * from './styles';
 export * from './variables';
 export * from './actionButtons';
+export * from './dataTable';

package/es/utils/index.js

@@ -5,3 +5,4 @@ export * from './templateListing';
 export * from './styles';
 export * from './variables';
 export * from './actionButtons';
+export * from './dataTable';

package/package.json

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