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

package/es/components/molecules/VirtualizedMenu/components/Item/Item.d.ts

@@ -0,0 +1,8 @@
+import React, { ComponentProps } from 'react';
+import { ItemType, VirtualizedMenuProps } from '../../types';
+type ItemProps = Partial<{
+    item: ItemType;
+    expandIcon: VirtualizedMenuProps['expandIcon'];
+}> & ComponentProps<'div'>;
+export declare const Item: React.MemoExoticComponent<(props: ItemProps) => React.JSX.Element>;
+export {};

package/es/components/molecules/VirtualizedMenu/components/Item/Item.js

@@ -0,0 +1,25 @@
+import React, { memo } from 'react';
+import { Typography } from '../../../../atoms/Typography';
+import { Icon } from '../../../../atoms/Icon';
+import { MenuItemRoot } from '../../styled';
+import clsx from 'clsx';
+export const Item = memo((props) => {
+    var _a;
+    const { className, style, item, expandIcon, onClick } = props;
+    const handleOnClick = (e) => {
+        if (!onClick || (item === null || item === void 0 ? void 0 : item.disabled))
+            return;
+        onClick(e);
+    };
+    const renderLabel = () => {
+        if (typeof (item === null || item === void 0 ? void 0 : item.label) === 'string') {
+            return React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, item.label);
+        }
+        return item === null || item === void 0 ? void 0 : item.label;
+    };
+    return (React.createElement(MenuItemRoot, { className: clsx({
+            'item-disabled': item === null || item === void 0 ? void 0 : item.disabled,
+        }, className), style: style, onClick: handleOnClick },
+        React.createElement("div", { className: "item-label" }, renderLabel()),
+        !!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { className: "sub-menu-arrow" }, expandIcon || React.createElement(Icon, { type: "icon-ants-expand-more" })))));
+});

package/es/components/molecules/VirtualizedMenu/components/Item/index.d.ts

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

package/es/components/molecules/VirtualizedMenu/components/Item/index.js

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

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { MenuInlineProps } from '../../types';
+export declare const MenuInline: (props: MenuInlineProps) => React.JSX.Element;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.js

@@ -0,0 +1,95 @@
+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;
+};
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import { clsx } from 'clsx';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { VirtualizedMenuContainer } from '../../styled';
+import { INLINE_INDENT, INLINE_PADDING, ITEM_SIZE, ITEM_SPACING, MODE } from '../../config';
+import { getFlattenItems } from '../../utils';
+import { Item } from '../Item';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+const innerElementType = forwardRef((_a, ref) => {
+    var { style } = _a, rest = __rest(_a, ["style"]);
+    return React.createElement("div", Object.assign({ ref: ref, style: style }, rest));
+});
+export const MenuInline = (props) => {
+    const { width, height, items = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, openKeys: openKeysProp = [], onClick, className, } = props;
+    const [openKeys, setOpenKeys] = useState(new Set());
+    const [selectedKeys, setSelectedKeys] = useState(new Set());
+    useDeepCompareEffect(() => {
+        if (!openKeysProp)
+            return;
+        setOpenKeys(new Set(openKeysProp));
+    }, [openKeysProp]);
+    const flattenItems = useMemo(() => {
+        const result = getFlattenItems({ items });
+        return result.filter(item => {
+            const isRootItem = item.level === 1;
+            const isParentExpand = item.parent && openKeys.has(String(item.parent.key));
+            return isRootItem || isParentExpand;
+        });
+    }, [items, openKeys]);
+    const handleCollapseItem = useCallback((item) => {
+        var _a;
+        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        const newOpenKeys = new Set(openKeys);
+        newOpenKeys.delete(item.key);
+        if (item.children) {
+            getFlattenItems({ items: item.children }).forEach(childrenItem => {
+                const childrenKey = childrenItem.key;
+                if (newOpenKeys.has(childrenKey)) {
+                    newOpenKeys.delete(childrenKey);
+                }
+            });
+        }
+        setOpenKeys(newOpenKeys);
+    }, [openKeys]);
+    const handleExpandItem = useCallback((item) => {
+        var _a;
+        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        const itemKey = item.key;
+        const newOpenKeys = new Set(openKeys);
+        newOpenKeys.add(itemKey);
+        setOpenKeys(newOpenKeys);
+    }, [openKeys]);
+    const handleClickItem = useCallback((item, idx) => () => {
+        var _a;
+        const { key } = item;
+        const isOpen = openKeys.has(key);
+        const hasChilren = !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length);
+        if (hasChilren && isOpen) {
+            handleCollapseItem(item);
+        }
+        if (hasChilren && !isOpen) {
+            handleExpandItem(item);
+        }
+        if (!hasChilren && !selectedKeys.has(key)) {
+            setSelectedKeys(new Set([item.key]));
+        }
+        if (onClick) {
+            onClick({ item, pathKey: flattenItems[idx].pathKey });
+        }
+    }, [flattenItems, handleCollapseItem, handleExpandItem, onClick, openKeys, selectedKeys]);
+    const renderItem = useCallback((args) => {
+        const { index, style } = args;
+        const item = flattenItems[index];
+        const indentSize = ((item.level || 0) - 1) * inlineIndent;
+        const itemStyle = Object.assign(Object.assign({}, style), { paddingLeft: indentSize + inlinePadding, paddingRight: inlinePadding, marginTop: itemSpacing, marginBottom: itemSpacing });
+        return (React.createElement(Item, { className: clsx({
+                'item-selected': selectedKeys.has(item.key),
+            }, item.className), onClick: handleClickItem(item, index), style: itemStyle, item: item }));
+    }, [flattenItems, handleClickItem, inlinePadding, inlineIndent, itemSpacing, selectedKeys]);
+    // console.log('render');
+    return (React.createElement(AutoSizer, null, autoSize => (React.createElement(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: height || autoSize.scaledHeight, width: width || autoSize.scaledWidth, innerElementType: innerElementType, useIsScrolling: true }, renderItem))));
+};

package/es/components/molecules/VirtualizedMenu/components/MenuInline/index.d.ts

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

package/es/components/molecules/VirtualizedMenu/components/MenuInline/index.js

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

package/es/components/molecules/VirtualizedMenu/components/index.d.ts

@@ -0,0 +1,2 @@
+export { MenuInline } from './MenuInline';
+export { Item } from './Item';

package/es/components/molecules/VirtualizedMenu/components/index.js

@@ -0,0 +1,2 @@
+export { MenuInline } from './MenuInline';
+export { Item } from './Item';

package/es/components/molecules/VirtualizedMenu/config.d.ts

@@ -0,0 +1,12 @@
+export declare const MODE: {
+    readonly Inline: "inline";
+};
+export declare const ACTION_TYPES: {
+    readonly init: "init";
+    readonly reset: "reset";
+    readonly toggleExpand: "toggleExpand";
+};
+export declare const INLINE_PADDING = 10;
+export declare const INLINE_INDENT = 10;
+export declare const ITEM_SPACING: number;
+export declare const ITEM_SIZE: number;

package/es/components/molecules/VirtualizedMenu/config.js

@@ -0,0 +1,12 @@
+var _a, _b, _c, _d, _e;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const MODE = { Inline: 'inline' };
+export const ACTION_TYPES = {
+    init: 'init',
+    reset: 'reset',
+    toggleExpand: 'toggleExpand',
+};
+export const INLINE_PADDING = 10;
+export const INLINE_INDENT = 10;
+export const ITEM_SPACING = parseFloat(((_c = (_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemMarginBlock) === null || _c === void 0 ? void 0 : _c.toString()) || '10');
+export const ITEM_SIZE = ((_e = (_d = THEME.components) === null || _d === void 0 ? void 0 : _d.Menu) === null || _e === void 0 ? void 0 : _e.itemHeight) || 35;

package/es/components/molecules/VirtualizedMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { VirtualizedMenu } from './VirtualizedMenu';
+export { VirtualizedMenuProps } from './types';

package/es/components/molecules/VirtualizedMenu/index.js

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

package/es/components/molecules/VirtualizedMenu/styled.d.ts

@@ -0,0 +1,4 @@
+import { VariableSizeList as List } from 'react-window';
+export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuItemRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VirtualizedMenuContainer: import("styled-components").StyledComponent<typeof List, any, {}, never>;

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

@@ -0,0 +1,64 @@
+var _a, _b, _c, _d, _e, _f, _g, _h;
+import styled from 'styled-components';
+import { VariableSizeList as List } from 'react-window';
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const MenuItemWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 5px;
+  align-items: center;
+  overflow: hidden;
+
+  .icon-expand {
+    font-size: 14px;
+    flex-shirnk: 0;
+  }
+
+  .title-wrapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+export const MenuItemRoot = styled.div `
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  border-radius: ${(_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemBorderRadius}px;
+
+  > .item-label {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  > .sub-menu-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.item-disabled {
+    color: ${(_d = (_c = THEME.components) === null || _c === void 0 ? void 0 : _c.Menu) === null || _d === void 0 ? void 0 : _d.itemDisabledColor};
+    cursor: not-allowed;
+  }
+
+  &.item-selected {
+    background-color: ${(_f = (_e = THEME.components) === null || _e === void 0 ? void 0 : _e.Menu) === null || _f === void 0 ? void 0 : _f.itemActiveBg};
+  }
+
+  &:hover:not(.item-disabled, .item-selected) {
+    background-color: ${(_h = (_g = THEME.components) === null || _g === void 0 ? void 0 : _g.Menu) === null || _h === void 0 ? void 0 : _h.itemHoverBg};
+  }
+`;
+export const VirtualizedMenuContainer = styled(List) `
+  font-size: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontSize}px;
+  overflow: hidden !important;
+
+  &:hover {
+    overflow: auto !important;
+  }
+`;

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

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { MODE } from './config';
+export type ItemType = {
+    key: string;
+} & Partial<{
+    scrollingLabel: string;
+    label: ReactNode;
+    children: ItemType[];
+    disabled: boolean;
+}> & Pick<ComponentPropsWithoutRef<'div'>, 'className'>;
+export type VirtualizedMenuProps = Partial<{
+    items: ItemType[];
+    mode: (typeof MODE)[keyof typeof MODE];
+    expandIcon: ReactNode;
+    height: number;
+    width: number;
+    inlineIndent: number;
+    inlinePadding: number;
+    itemSpacing: number;
+    itemSize: number;
+    openKeys: string[];
+    selectedKeys: string[];
+    onClick: (args: {
+        item: ItemType;
+        pathKey: PathKey;
+    }) => void;
+    className: string;
+}>;
+export type PathKey = (string | number)[];
+export type MenuInlineProps = Omit<VirtualizedMenuProps, 'mode'>;

package/es/components/molecules/VirtualizedMenu/types.js

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

package/es/components/molecules/VirtualizedMenu/utils.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ItemType, PathKey } from './types';
+export declare const getFlattenItems: (args: {
+    items: ItemType[];
+}) => ({
+    key: string;
+} & Partial<{
+    scrollingLabel: string;
+    label: import("react").ReactNode;
+    children: ItemType[];
+    disabled: boolean;
+}> & Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
+    level: number;
+    pathKey: PathKey;
+    parent: ItemType | null;
+})[];

package/es/components/molecules/VirtualizedMenu/utils.js

@@ -0,0 +1,17 @@
+export const getFlattenItems = (args) => {
+    const { items } = args;
+    const result = [];
+    function recursively(items, level, pathKey, parent) {
+        items.forEach((item, idx) => {
+            const currentPathKey = [...pathKey, idx, item.key.toString()];
+            result.push(Object.assign(Object.assign({}, item), { level, pathKey: currentPathKey, parent }));
+            if (item.children && item.children.length > 0) {
+                recursively(item.children, level + 1, currentPathKey, item);
+            }
+        });
+    }
+    if (items.length) {
+        recursively(items, 1, [], null);
+    }
+    return result;
+};

package/es/components/molecules/index.d.ts

@@ -47,6 +47,8 @@ export * from './SelectEventAttribute';
 export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
+export { VirtualizedMenu } from './VirtualizedMenu';
+export { SearchPopover } from './SearchPopover';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
@@ -68,3 +70,5 @@ export type { ModalSelectProps } from './ModalSelect';
 export type { ImageResizeHandle } from './ImageEditor';
 export type { EditableNameHandle } from './EditableName';
 export type { AccountListingHandle, AccountSelectionProps } from './AccountSelection';
+export type { VirtualizedMenuProps } from './VirtualizedMenu';
+export type { SearchPopoverProps } from './SearchPopover';

package/es/components/molecules/index.js

@@ -47,6 +47,8 @@ export * from './SelectEventAttribute';
 export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
+export { VirtualizedMenu } from './VirtualizedMenu';
+export { SearchPopover } from './SearchPopover';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';

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

@@ -1,6 +1,6 @@
 // Libraries
 import { useCallback, useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
+// import { useHistory } from 'react-router-dom';
 // Constants
 import { CONFIG_OPTIONS } from './constants';
 import { HOME_REPORT_ROUTES, HOME_ROUTE } from '../../constants';
@@ -9,9 +9,11 @@ import { getGeneratePath, getMenuItem } from '../../utils';
 // Types
 import { useLeftMenuStore } from '../../stores';
 import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
+import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
 export const useHomeMenu = () => {
     const { pathname, search } = window.location;
-    const history = useHistory();
+    // const history = useHistory();
+    const { navigate, replace } = useCustomRouter();
     const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
     const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
     const onClickCreateDashboard = useLayoutStore(store => store.state.leftMenu.onClickCreateDashboard);
@@ -21,9 +23,9 @@ export const useHomeMenu = () => {
         switch (optionKey) {
             case CONFIG_OPTIONS.CONFIGURE.key: {
                 const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: menuItemKey }));
-                history.push(newPathName);
+                navigate(newPathName);
                 urlParams.set('type', HOME_REPORT_ROUTES.CONFIGURE);
-                history.replace({ search: urlParams.toString() });
+                replace({ search: urlParams.toString() });
                 break;
             }
             case CONFIG_OPTIONS.REMOVE.key:
@@ -31,7 +33,7 @@ export const useHomeMenu = () => {
             default:
                 break;
         }
-    }, [auth, history, urlParams]);
+    }, [auth, navigate, replace, urlParams]);
     const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(appMenuItem => {
         var _a;
         return getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: (_a = appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }))) }));
@@ -41,17 +43,17 @@ export const useHomeMenu = () => {
             onClickCreateDashboard(e);
         }
         else {
-            history.push(getGeneratePath(HOME_ROUTE, auth));
+            navigate(getGeneratePath(HOME_ROUTE, auth));
             urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
-            history.replace({ search: urlParams.toString() });
+            replace({ search: urlParams.toString() });
         }
-    }, [auth, history, onClickCreateDashboard, urlParams]);
+    }, [auth, navigate, onClickCreateDashboard, replace, urlParams]);
     const onMenuClick = useCallback((key, _) => {
         const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: key }));
         if (newPathName !== pathname) {
-            history.push(newPathName);
+            navigate(newPathName);
         }
-    }, [auth, pathname, history]);
+    }, [auth, pathname, navigate]);
     return {
         children: customChildren,
         /* Callbacks */

package/es/constants/theme.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -214,6 +214,8 @@ THEME.components = {
         itemMarginBlock: 5,
         itemBorderRadius: 5,
         subMenuItemBg: 'transparent',
+        itemDisabledColor: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.colorTextDisabled,
+        itemActiveBg: (_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.blue1_1,
     },
     Form: {},
 };

package/es/hooks/index.d.ts

@@ -22,3 +22,4 @@ export * from './useDropFile';
 export * from './useEventListener';
 export * from './useDebounceCallback';
 export * from './useWindowSize';
+export * from './useCustomRouter';

package/es/hooks/index.js

@@ -41,3 +41,4 @@ export * from './useDropFile';
 export * from './useEventListener';
 export * from './useDebounceCallback';
 export * from './useWindowSize';
+export * from './useCustomRouter';

package/es/hooks/useCustomRouter.d.ts

@@ -0,0 +1,33 @@
+import { To } from 'react-router-dom';
+/**
+ * Custom hook to handle navigation in React applications supporting both react-router v5 and v6.
+ *
+ * This hook tries to use `useNavigate` from `react-router-dom` for v6. If it fails, it falls back to
+ * `useHistory` for v5.
+ *
+ * @returns {Object} An object containing the `navigate` and `replace` functions.
+ *
+ * @returns {Function} return.navigate - Function to navigate to a specified route.
+ * @param {string | object} return.navigate.to - The target route path or location object.
+ * @param {Object} [return.navigate.options] - Optional navigation options.
+ *
+ * @returns {Function} return.replace - Function to replace the current route with a specified route.
+ * @param {string | object} return.replace.to - The target route path or location object.
+ * @param {Object} [return.replace.options] - Optional navigation options.
+ *
+ * @example
+ * const { navigate, replace } = useCustomRouter();
+ *
+ * // Navigate to a route
+ * navigate('/home');
+ *
+ * // Navigate with options
+ * navigate('/profile', { state: { userId: 1 } });
+ *
+ * // Replace current route
+ * replace('/login');
+ */
+export declare const useCustomRouter: () => {
+    navigate: (to: To, options?: any) => void;
+    replace: (to: To, options?: any) => void;
+};

package/es/hooks/useCustomRouter.js

@@ -0,0 +1,62 @@
+/* eslint-disable global-require */
+/* eslint-disable react-hooks/rules-of-hooks */
+// Libraries
+import { useCallback } from 'react';
+/**
+ * Custom hook to handle navigation in React applications supporting both react-router v5 and v6.
+ *
+ * This hook tries to use `useNavigate` from `react-router-dom` for v6. If it fails, it falls back to
+ * `useHistory` for v5.
+ *
+ * @returns {Object} An object containing the `navigate` and `replace` functions.
+ *
+ * @returns {Function} return.navigate - Function to navigate to a specified route.
+ * @param {string | object} return.navigate.to - The target route path or location object.
+ * @param {Object} [return.navigate.options] - Optional navigation options.
+ *
+ * @returns {Function} return.replace - Function to replace the current route with a specified route.
+ * @param {string | object} return.replace.to - The target route path or location object.
+ * @param {Object} [return.replace.options] - Optional navigation options.
+ *
+ * @example
+ * const { navigate, replace } = useCustomRouter();
+ *
+ * // Navigate to a route
+ * navigate('/home');
+ *
+ * // Navigate with options
+ * navigate('/profile', { state: { userId: 1 } });
+ *
+ * // Replace current route
+ * replace('/login');
+ */
+export const useCustomRouter = () => {
+    try {
+        const { useNavigate } = require('react-router-dom');
+        const navigateV6 = useNavigate();
+        const navigate = useCallback((to, options) => {
+            navigateV6(to, options);
+        }, [navigateV6]);
+        const replace = useCallback((to, options) => {
+            navigateV6(to, Object.assign({ replace: true }, options));
+        }, [navigateV6]);
+        return {
+            navigate,
+            replace,
+        };
+    }
+    catch (error) {
+        const { useHistory } = require('react-router-dom');
+        const history = useHistory();
+        const navigate = useCallback((to, options) => {
+            history.push(to, options);
+        }, [history]);
+        const replace = useCallback((to, options) => {
+            history.replace(to, options);
+        }, [history]);
+        return {
+            navigate,
+            replace,
+        };
+    }
+};

package/es/queries/LeftMenu/index.js

@@ -15,7 +15,8 @@ export const useGetListMenu = (params) => {
 };
 export const useGetListMenuPermission = (params) => {
     const { options, args } = params;
-    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_LIST_MENU_PERMISSION, args.params, args.auth], queryFn: () => getListMenuPermission(params.args), onSuccess() { } }, options));
+    const { token, accountId, userId } = args.auth;
+    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_LIST_MENU_PERMISSION, args.params, token, accountId, userId], queryFn: () => getListMenuPermission(params.args), onSuccess() { } }, options));
 };
 export const useGetDestinationChannel = (params) => {
     const { options, args } = params;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.310",
+  "version": "1.3.5-beta.312",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -81,6 +81,7 @@
     "@types/react-custom-scrollbars": "^4.0.13",
     "@types/react-frame-component": "^4.1.6",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-window": "^1.8.8",
     "ace-builds": "1.4.14",
     "animate.css": "^4.1.1",
     "antd": "5.12.6",
@@ -114,6 +115,8 @@
     "react-markdown": "^8.0.7",
     "react-resizable": "^3.0.5",
     "react-syntax-highlighter": "^15.5.0",
+    "react-virtualized-auto-sizer": "^1.0.24",
+    "react-window": "^1.8.10",
     "rehype-highlight": "^6.0.0",
     "remark-gfm": "^3.0.1",
     "socket.io-client": "^4.7.5",
@@ -208,7 +211,7 @@
     "react-dom": "18.2.0",
     "react-fast-compare": "^3.2.1",
     "react-i18next": "11.16.7",
-    "react-router-dom": "5.1.0",
+    "react-router-dom": "5.1.0 || 6.14.2",
     "sass": "^1.60.0",
     "sass-loader": "^13.2.2",
     "storybook": "8.0.5",