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

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

@@ -0,0 +1,197 @@
+var _a, _b, _c, _d, _e;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { HEADER_HEIGHT } from '../../molecules/HeaderV2/constants';
+import { ICON_SIZE } from './constants';
+// Components
+import { Flex } from '../../atoms';
+export const IconWrapper = styled.div `
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  i {
+    font-size: ${ICON_SIZE}px;
+  }
+`;
+export const PopoverWrapper = styled.div `
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  background-color: white;
+  left: 65px;
+  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
+  bottom: 15px;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+  height: calc(100% - ${HEADER_HEIGHT + 15}px);
+  transition: visibility 0s, opacity 0.2s ease-out;
+  z-index: 10;
+  padding: 20px;
+  box-sizing: border-box;
+`;
+export const FeatureMenuWrapper = styled(Flex) `
+  flex: 1 1 0%;
+  overflow: hidden;
+
+  &:hover {
+    ${PopoverWrapper} {
+      ${({ isExpandMenu }) => !isExpandMenu
+    ? `
+          visibility: visible;
+          opacity: 1;
+          `
+    : ''}
+    }
+  }
+`;
+export const ExpandWrapper = styled.div `
+  height: 35px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
+  padding: 0 10px;
+`;
+export const LeftMenuNavWrapper = styled.div `
+  height: 100vh;
+  display: flex;
+  gap: 10px;
+  transition: all 0.2s ease-out;
+`;
+export const NavLogoWrapper = styled(Flex) `
+  height: ${HEADER_HEIGHT}px;
+  flex-shrink: 0;
+
+  .image-wrapper {
+    height: 30px;
+    width: 30px;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
+`;
+export const LeftMenuNav = styled.nav `
+  position: relative;
+  width: 70px;
+  height: 100%;
+  background-color: ${(_c = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _c === void 0 ? void 0 : _c.blue1_2};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-right: 1px solid ${(_d = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _d === void 0 ? void 0 : _d.bw3};
+
+  ${ExpandWrapper} {
+    flex-shrink: 0;
+  }
+`;
+export const FeatureMenu = styled.ul `
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow-x: hidden;
+
+  .menu-content {
+    flex-shrink: 0;
+  }
+
+  .nav-blank {
+    flex: 1 1 0%;
+  }
+`;
+export const FeatureMenuItem = styled.div `
+  width: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+
+  .menu-link {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  li {
+    width: 100%;
+    cursor: pointer;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${(_e = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _e === void 0 ? void 0 : _e.borderRadiusXL}px;
+    padding: 5px 0;
+    position: relative;
+
+    &::before {
+      display: none !important;
+    }
+
+    span {
+      font-size: 11px !important;
+      font-weight: 500;
+      color: inherit;
+    }
+
+    &.isHover,
+    &.isActive {
+      ${IconWrapper},
+      span {
+        color: #005eb8;
+      }
+    }
+
+    &.isActive {
+      background-color: #d3e3fd !important;
+    }
+
+    &.isHover {
+      background-color: #ffffffcc;
+
+      .popup-triangle {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    .popup-triangle {
+      opacity: 0;
+      visibility: hidden;
+      right: -6px;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 1px 9px 10px 10px;
+      border-color: transparent transparent white transparent;
+      transform: rotate(270deg);
+      z-index: 100;
+    }
+  }
+`;
+export const ChildMenuWrapper = styled.div `
+  height: calc(100% - ${HEADER_HEIGHT}px);
+  margin-top: ${HEADER_HEIGHT}px;
+  width: ${({ isExpand }) => (isExpand ? '210px' : '0px')};
+  padding: ${({ isExpand }) => (isExpand ? '10px' : '10px 0')};
+  transition: width 0.2s, padding 0.2s ease;
+  padding-left: 0px;
+  box-sizing: border-box;
+  z-index: 1;
+
+  &.antsomi-scroll-box {
+    margin-right: 0px !important;
+  }
+`;

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

@@ -0,0 +1,27 @@
+import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+export type TMenuItem = Omit<Partial<TFeatureMenu>, 'children' | keyof TRequireMenuItemKey> & {
+    key: string;
+    label: string;
+    icon: string | null;
+    children?: TMenuItem[];
+} & TOption;
+export type TMenuFeatureItem = Omit<Partial<TFeatureMenu>, 'children'> & TRequireMenuItemKey & TOption & {
+    children?: TMenuFeatureItem[];
+};
+type TRequireMenuItemKey = {
+    menu_item_code: string;
+    menu_item_name: string;
+    icon_name: string | null;
+};
+type TOption = {
+    logo_url?: string | null;
+    options?: {
+        key: string;
+        label: string;
+    }[];
+    optionCallback?: (args: {
+        menuItemKey: string;
+        optionKey: string;
+    }) => void;
+};
+export {};

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

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

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

@@ -0,0 +1,101 @@
+import { FeatureMenuPermission, TDashboardResponse, TDestinationChannel, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+import { TMenuFeatureItem, TMenuItem } from '../types';
+/**
+ * Converts a feature menu item to a menu item suitable for rendering in the UI.
+ * @param {TMenuFeatureItem} featureMenu - The feature menu item to convert.
+ * @returns {TMenuItem} The converted menu item.
+ */
+export declare const getMenuItem: (featureMenu: TMenuFeatureItem) => TMenuItem;
+/**
+ * Flatten a nested array of menu items by flatten @alias childKey into a single-level array.
+ * @template T - The type of menu items.
+ * @param {T[]} menuItems - The array of menu items to flatten.
+ * @param {string} childKey - The key representing the children array in each menu item.
+ * @returns {T[]} The flattened array of menu items.
+ */
+export declare const flattenMenuArray: <T>(menuItems: T[], childKey: string) => T[];
+/**
+ * Recursively filters menu items based on permissions.
+ * check permission if menu item has menu_type of @alias MENU_ITEM_TYPE.MENU
+ */
+export declare const recursivePermissionMenu: (menuItems: TFeatureMenu[], MenuPermissions: FeatureMenuPermission[]) => TFeatureMenu[];
+/**
+ * Generate a new path by replacing parameters in the given path.
+ * @returns {string} The generated path with replaced parameters.
+ */
+export declare const getGeneratePath: (path: string, params?: Partial<PayloadInfo> & {
+    dashboardId?: string;
+    channelId?: number;
+}) => string;
+/**
+ * This is used to delete the hash of the path returned from the api,
+ * the purpose of which is to compare with the url to activate the app
+ */
+export declare const getComparePath: (path: string) => string;
+/**
+ * Creates an initial feature menu item object with default values.
+ * @param {Partial<TFeatureMenu>} featureMenuItem - The partial feature menu item object.
+ * @returns {TFeatureMenu} The initial feature menu item object.
+ */
+export declare const getInitialFeatureMenuItem: (featureMenuItem: Partial<TFeatureMenu>) => TFeatureMenu;
+export declare const recursiveGetInitialFeatureMenuItem: (featureMenuItem: Partial<TFeatureMenu>) => {
+    menu_item: string | number;
+    network_id: number;
+    menu_item_name: string;
+    level_position: string | number;
+    icon_name: string | null;
+    menu_item_path: string | null;
+    menu_item_code: string;
+    permission_code: string | null;
+    menu_item_type: string | number;
+    menu_item_parent: string | number;
+    render_option: string | null;
+    menu_item_domain: string | null;
+    total_row: number;
+    ctime: string | null;
+    utime: string | null;
+    logo_url?: string | undefined;
+    children?: TFeatureMenu[] | undefined;
+};
+/** Map children to each App Item */
+export declare const getMappingAppChildren: (args: {
+    menuList: TFeatureMenu[];
+    auth?: Partial<PayloadInfo>;
+    dashboardData?: TDashboardResponse;
+    destinationChannelEntries?: TDestinationChannel[];
+}) => TFeatureMenu[];
+/**
+ * Finds the app code of the active menu item based on the provided URL within the given menu items.
+ * @param {object} args - The arguments object.
+ * @param {string} args.url - The URL to match against menu item paths.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search within.
+ * @param {Partial<PayloadInfo>} [args.auth] - Additional authentication information.
+ * @returns {string | undefined} The app code of the active menu item or undefined if not found.
+ */
+export declare const findActiveAppCodeByUrl: (args: {
+    url: string;
+    menuItems: TFeatureMenu[];
+    auth?: Partial<PayloadInfo>;
+}) => string | undefined;
+export declare const findLastMatchedItemByUrl: (args: {
+    url: string;
+    menuItems: TFeatureMenu[];
+    auth?: Partial<PayloadInfo>;
+}) => TFeatureMenu | undefined;
+export declare const findPathOfActiveItem: (args: {
+    activeMenuItem: TFeatureMenu;
+    menuItems: TFeatureMenu[];
+}) => TFeatureMenu[];
+/**
+ * Finds the app code of the menu item or its parent based on the provided active key.
+ *
+ * @param {Object} args - The arguments object.
+ * @param {string} args.activeCurrentKey - The key of the currently active menu item.
+ * @param {TMenuItem[]} args.menuItems - The array of menu items to search through.
+ * @returns {string | undefined} - The app code of the matching menu item or its parent, or undefined if not found.
+ */
+export declare const findActiveAppCodeByChild: (args: {
+    activeCurrentKey: string;
+    menuItems: TMenuItem[];
+}) => string | undefined;

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

@@ -0,0 +1,350 @@
+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 { cloneDeep, isArray, isEmpty, sortBy } from 'lodash';
+import { generatePath } from 'react-router-dom';
+// Constants
+import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, RENDER_OPTION, HOME_REPORT_ROUTES, SETTING_APP, } from '../constants';
+import { MARKETING_CHANNEL_CODE } from '../../../template/Layout/constants';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/organism/LeftMenu/utils/index.ts';
+/**
+ * Converts a feature menu item to a menu item suitable for rendering in the UI.
+ * @param {TMenuFeatureItem} featureMenu - The feature menu item to convert.
+ * @returns {TMenuItem} The converted menu item.
+ */
+export const getMenuItem = (featureMenu) => {
+    const { menu_item_code, menu_item_name, children, icon_name } = featureMenu, restOfFeatureMenu = __rest(featureMenu, ["menu_item_code", "menu_item_name", "children", "icon_name"]);
+    return Object.assign({ key: menu_item_code, label: menu_item_name, icon: icon_name, children: children === null || children === void 0 ? void 0 : children.map(item => getMenuItem(item)) }, restOfFeatureMenu);
+};
+/**
+ * Flatten a nested array of menu items by flatten @alias childKey into a single-level array.
+ * @template T - The type of menu items.
+ * @param {T[]} menuItems - The array of menu items to flatten.
+ * @param {string} childKey - The key representing the children array in each menu item.
+ * @returns {T[]} The flattened array of menu items.
+ */
+export const flattenMenuArray = (menuItems, childKey) => {
+    let result = [];
+    menuItems.forEach(item => {
+        const children = (item === null || item === void 0 ? void 0 : item[childKey]) || [];
+        result.push(Object.assign(Object.assign({}, item), { [childKey]: [] }));
+        if (children.length > 0) {
+            result = [...result, ...flattenMenuArray(children, childKey)];
+        }
+    });
+    return result;
+};
+/**
+ * Recursively filters menu items based on permissions.
+ * check permission if menu item has menu_type of @alias MENU_ITEM_TYPE.MENU
+ */
+export const recursivePermissionMenu = (menuItems, MenuPermissions) => {
+    var _a, _b;
+    const menu = (_b = (_a = menuItems === null || menuItems === void 0 ? void 0 : menuItems.filter(({ permission_code, menu_item_type }) => {
+        if (menu_item_type !== MENU_ITEM_TYPE.MENU) {
+            return true;
+        }
+        return MenuPermissions === null || MenuPermissions === void 0 ? void 0 : MenuPermissions.find(({ app_code = '', menu_code = '' }) => !!permission_code && [app_code, menu_code].includes(permission_code));
+    })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), (isArray(item.children)
+        ? {
+            children: recursivePermissionMenu(sortBy(item.children || [], ['level_position']), MenuPermissions),
+        }
+        : {}))))) === null || _b === void 0 ? void 0 : _b.filter(item => !(isArray(item.children) && isEmpty(item.children)));
+    return menu;
+};
+/**
+ * Generate a new path by replacing parameters in the given path.
+ * @returns {string} The generated path with replaced parameters.
+ */
+export const getGeneratePath = (path, params) => {
+    try {
+        const { portalId, userId, dashboardId, channelId } = params || {};
+        return generatePath(path, {
+            user_id: userId !== null && userId !== void 0 ? userId : '-1',
+            networkId: portalId !== null && portalId !== void 0 ? portalId : -1,
+            portalId: portalId !== null && portalId !== void 0 ? portalId : -1,
+            dashboardId: dashboardId !== null && dashboardId !== void 0 ? dashboardId : '-1',
+            channelId: channelId !== null && channelId !== void 0 ? channelId : -1,
+        });
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: getGeneratePath.name,
+            args: { path, params },
+        });
+        return '';
+    }
+};
+/**
+ * This is used to delete the hash of the path returned from the api,
+ * the purpose of which is to compare with the url to activate the app
+ */
+export const getComparePath = (path) => {
+    var _a;
+    if (path === null || path === void 0 ? void 0 : path.includes('#')) {
+        const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
+        return customPath;
+    }
+    return path;
+};
+/**
+ * Creates an initial feature menu item object with default values.
+ * @param {Partial<TFeatureMenu>} featureMenuItem - The partial feature menu item object.
+ * @returns {TFeatureMenu} The initial feature menu item object.
+ */
+export const getInitialFeatureMenuItem = (featureMenuItem) => (Object.assign({ menu_item: '', network_id: -1, menu_item_name: '', level_position: 0, icon_name: null, menu_item_path: null, menu_item_code: '', permission_code: null, menu_item_type: 3, menu_item_parent: 0, render_option: null, menu_item_domain: null, total_row: 0, ctime: null, utime: null }, featureMenuItem));
+export const recursiveGetInitialFeatureMenuItem = (featureMenuItem) => (Object.assign({ menu_item: '', network_id: -1, menu_item_name: '', level_position: 0, icon_name: null, menu_item_path: null, menu_item_code: '', permission_code: null, menu_item_type: 3, menu_item_parent: 0, render_option: null, menu_item_domain: null, total_row: 0, ctime: null, utime: null }, featureMenuItem));
+/** Map children to each App Item */
+export const getMappingAppChildren = (args) => {
+    const { menuList, dashboardData, auth, destinationChannelEntries } = args;
+    const recursiveAddRenderOption = (menuItem) => {
+        var _a;
+        const cloneMenuItem = cloneDeep(menuItem);
+        switch (cloneMenuItem === null || cloneMenuItem === void 0 ? void 0 : cloneMenuItem.render_option) {
+            case RENDER_OPTION.CHANNEL: {
+                const path = (() => {
+                    switch (menuItem.menu_item_code) {
+                        case MARKETING_CHANNEL_CODE.CAMPAIGN:
+                            return MARKETING_ROUTES.CHANNEL;
+                        case SETTING_APP.CHANNEL_INTEGRATION.code:
+                            return SETTING_APP.CHANNEL_INTEGRATION.path;
+                        default:
+                            return '';
+                    }
+                })();
+                cloneMenuItem.children =
+                    (destinationChannelEntries === null || destinationChannelEntries === void 0 ? void 0 : destinationChannelEntries.map(item => (Object.assign({}, getInitialFeatureMenuItem({
+                        menu_item_code: item.channelCode,
+                        menu_item_name: item.translateLabel,
+                        logo_url: item.logoUrl,
+                        menu_item_parent: menuItem.menu_item,
+                        menu_item_path: getGeneratePath(path, Object.assign(Object.assign({}, auth), { channelId: item.channelId })),
+                    }))))) || [];
+                break;
+            }
+            default:
+                break;
+        }
+        if (cloneMenuItem === null || cloneMenuItem === void 0 ? void 0 : cloneMenuItem.children) {
+            cloneMenuItem.children = (_a = cloneMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => recursiveAddRenderOption(item));
+        }
+        return cloneMenuItem;
+    };
+    return menuList === null || menuList === void 0 ? void 0 : menuList.map(appItem => {
+        var _a, _b, _c, _d;
+        switch (appItem.menu_item_code) {
+            case APP_KEYS.HOME: {
+                const dashboardObject = {
+                    sharedDashboard: ((_a = dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.entries) === null || _a === void 0 ? void 0 : _a.sharedDashboard) || [],
+                    ownedDashboard: ((_b = dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.entries) === null || _b === void 0 ? void 0 : _b.ownedDashboard) || [],
+                    recentDashboard: [],
+                };
+                appItem.children = (_c = Object.values(HOME_MENU_ITEMS)) === null || _c === void 0 ? void 0 : _c.map(childMenuItem => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, getInitialFeatureMenuItem({
+                        menu_item: childMenuItem.menu_item_code,
+                        menu_item_code: childMenuItem.menu_item_code,
+                        menu_item_name: childMenuItem.menu_item_name,
+                        menu_item_parent: appItem.menu_item,
+                    })), { children: (_a = (((dashboardObject === null || dashboardObject === void 0 ? void 0 : dashboardObject[childMenuItem.menu_item_code]) || []))) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign({}, getInitialFeatureMenuItem({
+                            menu_item: String(item.dashboardId),
+                            menu_item_code: String(item.dashboardId),
+                            menu_item_name: item.dashboardName,
+                            menu_item_parent: childMenuItem.menu_item_code,
+                            menu_item_path: getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: String(item.dashboardId) })),
+                        })))) }));
+                });
+                break;
+            }
+            case APP_KEYS.MARKETING: {
+                appItem.children = (_d = appItem.children) === null || _d === void 0 ? void 0 : _d.map(childMenuItem => {
+                    switch (childMenuItem.menu_item_code) {
+                        case MARKETING_CHANNEL_CODE.ALL_CHANNEL:
+                            childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.ALL_CHANNEL }));
+                            break;
+                        case MARKETING_CHANNEL_CODE.ORCHESTRATION:
+                            childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.JOURNEY_ORCHESTRATION }));
+                            break;
+                        default:
+                            break;
+                    }
+                    return childMenuItem;
+                });
+                break;
+            }
+            default:
+                break;
+        }
+        appItem = recursiveAddRenderOption(appItem);
+        return appItem;
+    });
+};
+/**
+ * Finds the app code of the active menu item based on the provided URL within the given menu items.
+ * @param {object} args - The arguments object.
+ * @param {string} args.url - The URL to match against menu item paths.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search within.
+ * @param {Partial<PayloadInfo>} [args.auth] - Additional authentication information.
+ * @returns {string | undefined} The app code of the active menu item or undefined if not found.
+ */
+export const findActiveAppCodeByUrl = (args) => {
+    try {
+        const { url, menuItems, auth } = args;
+        let matchAppCode;
+        const recursiveCheckHasActiveChild = (items) => {
+            let matchAppCode = false;
+            for (const item of items) {
+                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
+                    url.includes(getComparePath(getGeneratePath(item.menu_item_path, auth)))) {
+                    matchAppCode = true;
+                    break;
+                }
+                if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
+                    matchAppCode = recursiveCheckHasActiveChild(item.children);
+                    if (matchAppCode) {
+                        break;
+                    }
+                }
+            }
+            return matchAppCode;
+        };
+        for (const menuItem of menuItems) {
+            if (!!(menuItem === null || menuItem === void 0 ? void 0 : menuItem.menu_item_path) &&
+                url.includes(getComparePath(getGeneratePath(menuItem.menu_item_path, auth)))) {
+                matchAppCode = menuItem.menu_item_code;
+                break;
+            }
+            const hasActiveChild = recursiveCheckHasActiveChild((menuItem === null || menuItem === void 0 ? void 0 : menuItem.children) || []);
+            if (hasActiveChild) {
+                matchAppCode = menuItem.menu_item_code;
+                break;
+            }
+        }
+        return matchAppCode;
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: findActiveAppCodeByUrl.name,
+            args,
+        });
+    }
+};
+export const findLastMatchedItemByUrl = (args) => {
+    try {
+        const { url, menuItems, auth } = args;
+        const matchedItems = [];
+        const recursiveFindActiveItem = (items, parentId) => {
+            for (const item of items) {
+                if ((item === null || item === void 0 ? void 0 : item.menu_item_path) &&
+                    url.includes(getComparePath(getGeneratePath(item.menu_item_path, auth))) &&
+                    (!parentId || item.menu_item_parent === parentId)) {
+                    matchedItems.push(item);
+                }
+                if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
+                    recursiveFindActiveItem(item.children, String(item.menu_item));
+                }
+            }
+        };
+        recursiveFindActiveItem(menuItems || []);
+        return matchedItems === null || matchedItems === void 0 ? void 0 : matchedItems.pop();
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: findLastMatchedItemByUrl.name,
+            args,
+        });
+    }
+};
+export const findPathOfActiveItem = (args) => {
+    try {
+        const { activeMenuItem, menuItems } = args;
+        const recursiveFindPathOfActiveItem = (menuItems, parentId) => {
+            let path = [];
+            for (const item of menuItems) {
+                if (item.menu_item_code === (activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.menu_item_code) &&
+                    (!parentId || (activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.menu_item_parent) === parentId)) {
+                    path.push(item);
+                    break;
+                }
+                const childPath = recursiveFindPathOfActiveItem((item === null || item === void 0 ? void 0 : item.children) || [], String(item.menu_item));
+                if (childPath.length) {
+                    path = [item, ...childPath];
+                    break;
+                }
+            }
+            return path;
+        };
+        return recursiveFindPathOfActiveItem(menuItems);
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: findPathOfActiveItem.name,
+            args,
+        });
+        return [];
+    }
+};
+/**
+ * Finds the app code of the menu item or its parent based on the provided active key.
+ *
+ * @param {Object} args - The arguments object.
+ * @param {string} args.activeCurrentKey - The key of the currently active menu item.
+ * @param {TMenuItem[]} args.menuItems - The array of menu items to search through.
+ * @returns {string | undefined} - The app code of the matching menu item or its parent, or undefined if not found.
+ */
+export const findActiveAppCodeByChild = (args) => {
+    try {
+        const { activeCurrentKey, menuItems } = args;
+        let matchAppCode;
+        const recursiveCheckHasActiveChild = (items) => {
+            let matchAppCode = false;
+            for (const item of items) {
+                if (item.key === activeCurrentKey) {
+                    matchAppCode = true;
+                    break;
+                }
+                if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
+                    matchAppCode = recursiveCheckHasActiveChild(item.children);
+                    if (matchAppCode) {
+                        break;
+                    }
+                }
+            }
+            return matchAppCode;
+        };
+        for (const menuItem of menuItems) {
+            if (menuItem.key === activeCurrentKey) {
+                matchAppCode = activeCurrentKey;
+                break;
+            }
+            const hasActiveChild = recursiveCheckHasActiveChild((menuItem === null || menuItem === void 0 ? void 0 : menuItem.children) || []);
+            if (hasActiveChild) {
+                matchAppCode = menuItem.key;
+                break;
+            }
+        }
+        return matchAppCode;
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: findActiveAppCodeByChild.name,
+            args,
+        });
+    }
+};

package/es/components/organism/Menu/Menu.d.ts

@@ -1,2 +1,2 @@
-import AntdMenu from 'antd/es/menu';
-export default AntdMenu;
+import { Menu } from 'antd';
+export { Menu };