@antscorp/antsomi-ui 1.3.5-beta.33 → 1.3.5-beta.331

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

@@ -0,0 +1,60 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+import { Flex } from '../../../../atoms';
+import { Modal } from '../../../../molecules';
+// Constants
+import Icon from '@antscorp/icons';
+// Styled
+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, setRemovedDashboardId, onCreateNewReport, onMenuClick, onRemoveDashboard, } = useHomeMenu();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HomeMenuWrapper, { gap: 10, vertical: true },
+            React.createElement(CreateButton, { type: "primary", onClick: onCreateNewReport },
+                React.createElement(Flex, { gap: 10, align: "center" },
+                    React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }),
+                    React.createElement("span", null, "Create"))),
+            React.createElement("div", { className: "menu-list" },
+                React.createElement(ChildMenu, { items: children, onMenuClick: onMenuClick }))),
+        React.createElement(Modal, { open: !!removedDashboardId, centered: true, onCancel: () => setRemovedDashboardId(''), title: "Remove this dashboard", okText: "Confirm", cancelText: "Cancel", closable: false, okButtonProps: { loading: isDashboardRemoving }, modalRender: node => React.createElement(ModalWrapper, null, node), onOk: onRemoveDashboard }, "Removing this dashboard will delete it permanently. Are you sure you want to perform this action?")));
+});

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const HomeMenuWrapper: 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 CreateButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;
+export declare const ModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,47 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Button, Flex } from '../../../../atoms';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const HomeMenuWrapper = styled(Flex) `
+  height: 100%;
+  width: 100%;
+
+  .menu-list {
+    width: 100%;
+    flex: 1 1 0%;
+    overflow: hidden;
+
+    .antsomi-menu {
+      & > li > ul {
+        font-weight: 400 !important;
+        font-size: 11px !important;
+      }
+
+      ::-webkit-scrollbar {
+        width: 13px !important;
+        height: 8px;
+      }
+    }
+  }
+`;
+export const CreateButton = styled(Button) `
+  width: 106px;
+  height: 37px !important;
+  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px !important;
+  box-shadow: none !important;
+  font-size: 14px !important;
+  flex-shrink: 0;
+`;
+export const ModalWrapper = styled.div `
+  width: 379px;
+
+  & > .antsomi-modal-content {
+    & > .antsomi-modal-header,
+    & > .antsomi-modal-footer {
+      margin: 0px;
+    }
+  }
+`;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const useHomeMenu: () => {
+    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    removedDashboardId: string;
+    isDashboardRemoving: boolean;
+    setRemovedDashboardId: import("react").Dispatch<import("react").SetStateAction<string>>;
+    onCreateNewReport: import("react").MouseEventHandler<HTMLElement>;
+    onOptionCallback: (args: {
+        menuItemKey: string;
+        optionKey: string;
+    }) => void;
+    onMenuClick: (key: string, _: any) => void;
+    onRemoveDashboard: () => Promise<void>;
+};

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

@@ -0,0 +1,94 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Libraries
+import { useCallback, useMemo, useState } from 'react';
+// Constants
+import { CONFIG_OPTIONS } from './constants';
+import { HOME_REPORT_ROUTES, HOME_ROUTE } from '../../constants';
+import { API_RESPONSE_CODE, CDP_API } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { getGeneratePath, getMenuItem } from '../../utils';
+// Hooks
+import { useLeftMenuStore } from '../../stores';
+import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
+import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
+// Queries
+import { useUpdateTask } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
+export const useHomeMenu = () => {
+    const { pathname, search } = window.location;
+    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 env = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.env; });
+    const dashboardParams = useLeftMenuStore(store => store.state.dashboardParams);
+    const onClickCreateDashboard = useLayoutStore(store => store.state.leftMenu.onClickCreateDashboard);
+    const [removedDashboardId, setRemovedDashboardId] = useState('');
+    const urlParams = useMemo(() => new URLSearchParams(search), [search]);
+    const { mutateAsync: removeDashboard, isLoading: isDashboardRemoving } = useUpdateTask();
+    const onOptionCallback = useCallback((args) => {
+        const { optionKey, menuItemKey } = args;
+        switch (optionKey) {
+            case CONFIG_OPTIONS.CONFIGURE.key: {
+                const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: menuItemKey }));
+                navigate(newPathName);
+                urlParams.set('type', HOME_REPORT_ROUTES.CONFIGURE);
+                replace({ search: urlParams.toString() });
+                break;
+            }
+            case CONFIG_OPTIONS.REMOVE.key:
+                setRemovedDashboardId(menuItemKey);
+                break;
+            default:
+                break;
+        }
+    }, [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 }))) }));
+    }), [appMenuChildren, onOptionCallback]);
+    const onCreateNewReport = useCallback(e => {
+        if (onClickCreateDashboard) {
+            onClickCreateDashboard(e);
+        }
+        else {
+            navigate(getGeneratePath(HOME_ROUTE, auth));
+            urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
+            replace({ search: urlParams.toString() });
+        }
+    }, [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) {
+            navigate(newPathName);
+        }
+    }, [auth, pathname, navigate]);
+    const onRemoveDashboard = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (removedDashboardId && auth && env) {
+            const params = {
+                params: Object.assign(Object.assign({}, dashboardParams), { dashboardId: +removedDashboardId }),
+                auth: Object.assign(Object.assign({}, auth), { url: `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub` }),
+            };
+            const response = yield removeDashboard(params);
+            if ((response === null || response === void 0 ? void 0 : response.code) === API_RESPONSE_CODE.SUCCESS) {
+                setRemovedDashboardId('');
+            }
+        }
+    }), [auth, dashboardParams, env, removedDashboardId, removeDashboard]);
+    return {
+        children: customChildren,
+        removedDashboardId,
+        isDashboardRemoving,
+        setRemovedDashboardId,
+        onCreateNewReport,
+        onOptionCallback,
+        onMenuClick,
+        onRemoveDashboard,
+    };
+};

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

@@ -0,0 +1 @@
+export declare const getDefaultDashboardName: (listDashboardName: string[]) => string;

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

@@ -0,0 +1,30 @@
+export const getDefaultDashboardName = (listDashboardName) => {
+    let listDefaultName = [];
+    let number = 1;
+    const regexDefaultName = /^Untitled dashboard #(\d+)$/;
+    if (listDashboardName && listDashboardName.length) {
+        listDefaultName = listDashboardName
+            .filter(dashboardName => regexDefaultName.test(dashboardName))
+            .map(dashboardName => +dashboardName.replace('Untitled dashboard #', ''))
+            .sort((num1, num2) => num1 - num2)
+            .reduce((accum, current) => {
+            if (!accum.length || current !== accum[accum.length - 1]) {
+                accum.push(current);
+            }
+            return accum;
+        }, []);
+    }
+    if (listDefaultName.length) {
+        let index = 0;
+        while (index < listDefaultName.length) {
+            if (listDefaultName[index] === number) {
+                number++;
+                index++;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return `Untitled dashboard #${number}`;
+};

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface MenuItemImageProps {
+    imageUrl: string;
+    fallbackIcon?: string | null;
+    className?: string;
+}
+export declare const MenuItemImage: React.FC<MenuItemImageProps>;
+export {};

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

@@ -0,0 +1,12 @@
+// Libraries
+import React, { memo, useState } from 'react';
+import Icon from '@antscorp/icons';
+import { isNil } from 'lodash';
+// Constants
+import { MenuItemImageWrapper, MaskImage } from './styled';
+export const MenuItemImage = memo(({ fallbackIcon, imageUrl, className }) => {
+    const [isExistImage, setIsExistImage] = useState(true);
+    return (React.createElement(MenuItemImageWrapper, { align: "center", justify: "center", className: className }, isExistImage ? (React.createElement(React.Fragment, null,
+        React.createElement(MaskImage, { url: imageUrl }),
+        React.createElement("img", { src: imageUrl, alt: "", onError: () => setIsExistImage(false), style: { display: 'none' } }))) : isNil(fallbackIcon) ? null : (React.createElement(Icon, { type: fallbackIcon }))));
+});

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const MaskImage: import("styled-components").StyledComponent<"div", any, {
+    url: string;
+}, never>;
+export declare const MenuItemImageWrapper: 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>;

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/styled.js

@@ -0,0 +1,25 @@
+var _a;
+import styled from 'styled-components';
+// Constants
+import { ICON_SIZE } from '../../../../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Components
+import { Flex } from '../../../../../../../atoms';
+export const MaskImage = styled.div `
+  width: ${ICON_SIZE}px;
+  height: ${ICON_SIZE}px;
+  background: black;
+  mask-size: contain;
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  mask-image: ${({ url }) => `url(${url})`};
+`;
+export const MenuItemImageWrapper = styled(Flex) `
+  margin-right: '10px';
+
+  &.isActive {
+    ${MaskImage} {
+      background: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary} !important;
+    }
+  }
+`;

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/index.d.ts

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

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

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

package/es/components/organism/LeftMenu/components/common/ChildMenu/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './sampleData';

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

@@ -0,0 +1 @@
+export * from './sampleData';

package/es/components/organism/LeftMenu/components/common/ChildMenu/constants/sampleData.d.ts

@@ -0,0 +1,2 @@
+import { TMenuItem } from '../../../../types';
+export declare const SAMPLE_ITEMS: TMenuItem[];

package/es/components/organism/LeftMenu/components/common/ChildMenu/constants/sampleData.js

@@ -0,0 +1,39 @@
+export const SAMPLE_ITEMS = [
+    {
+        key: 'all-Channels',
+        label: 'All Channels',
+        icon: 'icon-ants-emoji',
+    },
+    {
+        key: 'campaigns',
+        label: 'Campaigns',
+        icon: 'icon-ants-emoji',
+        children: [
+            {
+                key: 'on-site-message',
+                label: 'On-site Message',
+                icon: 'icon-ants-emoji',
+            },
+            {
+                key: 'web-notification',
+                label: 'Web notification',
+                icon: 'icon-ants-emoji',
+            },
+            {
+                key: 'app-notification',
+                label: 'App notification',
+                icon: 'icon-ants-emoji',
+            },
+            {
+                key: 'email',
+                label: 'Email',
+                icon: 'icon-ants-emoji',
+            },
+        ],
+    },
+    {
+        key: 'orchestration',
+        label: 'Orchestration',
+        icon: 'icon-ants-emoji',
+    },
+];

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TMenuItem } from '../../../types';
+interface ChildMenuProps {
+    items?: TMenuItem[];
+    onMenuClick?: (key: string, keyPath: string[]) => void;
+}
+export declare const ChildMenu: React.FC<ChildMenuProps>;
+export {};

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

@@ -0,0 +1,130 @@
+// Libraries
+import React, { memo, useEffect, useState } from 'react';
+import Icon from '@antscorp/icons';
+import { isEmpty, isNil, uniq } from 'lodash';
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+// Components
+import { Dropdown, Menu } from 'antd';
+import { MenuItemImage } from './components';
+import { Flex } from '../../../../../atoms';
+// Styled
+import { LabelCustom, LabelWrapper, MenuWrapper, OptionDropdownWrapper } from './styled';
+import { IconWrapper } from '../../../styled';
+// Constants
+import { ICON_SIZE } from '../../../constants';
+// Utils
+import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, getMenuItem } from '../../../utils';
+import { recursiveFindParentOfActiveItem } from './utils';
+// Hooks
+import { useLeftMenuStore } from '../../../stores';
+import { useNavigatePath } from '../../../hooks';
+const styles = {
+    dropdownMenu: { width: '130px', padding: '8px 0' },
+    dotIcon: { marginTop: '2px', zIndex: 1000, flexShrink: 0, fontSize: 16 },
+    expandIcon: {
+        fontSize: ICON_SIZE,
+        color: 'inherit',
+    },
+    menuItemTitle: { flex: '1 1 0%', maxWidth: '100%' },
+};
+export const ChildMenu = memo(props => {
+    const { items = [], onMenuClick } = props;
+    const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
+    const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
+    const menuItems = useLeftMenuStore(store => store.state.menuItems);
+    const customItems = useLeftMenuStore(store => store.state.customItems);
+    const isCustomized = useLeftMenuStore(store => store.state.isCustomized);
+    const customActiveCurrentKey = useLeftMenuStore(store => store.state.customActiveCurrentKey);
+    const setLeftMenuState = useLeftMenuStore(store => store.setState);
+    const [currentActiveItem, setCurrentActiveItem] = useState('');
+    const [openKeys, setOpenKeys] = useState([]);
+    const { pathname, hash } = window.location;
+    const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
+    useEffect(() => {
+        var _a;
+        if (isCustomized) {
+            setCurrentActiveItem(customActiveCurrentKey);
+            // Find parent key of active menu item to open it
+            const parentKey = recursiveFindParentOfActiveItem({
+                activeMenuItem: customActiveCurrentKey,
+                menuItems: customItems,
+            });
+            if (parentKey) {
+                setOpenKeys(prev => [...prev, parentKey]);
+            }
+        }
+        else {
+            const url = `${pathname}${hash}`;
+            // Active menu item by current url
+            const activeMenuItem = (_a = findLastMatchedItemByUrl({ url, menuItems, auth })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
+            if (activeMenuItem && activeMenuItem !== currentActiveItem) {
+                setCurrentActiveItem(activeMenuItem);
+                // Find parent key of active menu item to open it
+                const parentKey = recursiveFindParentOfActiveItem({
+                    activeMenuItem,
+                    menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => getMenuItem(item)),
+                });
+                if (parentKey) {
+                    setOpenKeys(prev => [...prev, parentKey]);
+                }
+                // Active App Item having code matching url
+                const matchAppCode = findActiveAppCodeByUrl({ menuItems, url, auth });
+                if (matchAppCode && matchAppCode !== activeAppCode) {
+                    setLeftMenuState({ activeAppCode: matchAppCode });
+                }
+            }
+        }
+    }, [
+        auth,
+        currentActiveItem,
+        hash,
+        items,
+        pathname,
+        activeAppCode,
+        menuItems,
+        setLeftMenuState,
+        isCustomized,
+        customActiveCurrentKey,
+        customItems,
+    ]);
+    const onClick = e => {
+        onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);
+    };
+    const customMenuItems = (args) => {
+        var _a;
+        return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+            const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, optionCallback, } = item;
+            const renderLabel = () => (!children || isEmpty(children)) && !isEmpty(options) ? (React.createElement(LabelWrapper, null,
+                React.createElement(LabelCustom, { ellipsis: { tooltip: label }, style: { flex: '1 1 0%' } }, label),
+                React.createElement(OptionDropdownWrapper, null,
+                    React.createElement(Dropdown, { menu: {
+                            items: options,
+                            onClick: e => {
+                                e.domEvent.stopPropagation();
+                                e.domEvent.preventDefault();
+                                optionCallback === null || optionCallback === void 0 ? void 0 : optionCallback({ menuItemKey: key, optionKey: e.key });
+                            },
+                            style: styles.dropdownMenu,
+                        }, trigger: ['click'] },
+                        React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: styles.dotIcon }))))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
+            const renderIcon = () => {
+                var _a;
+                return !isNil(icon) || !isNil(logo_url) ? (React.createElement(Flex, { style: { flexShrink: 0 }, align: "center" }, !isNil(icon) ? (React.createElement(IconWrapper, null,
+                    React.createElement(Icon, { type: icon }))) : !isNil(logo_url) ? (React.createElement(MenuItemImage, { imageUrl: logo_url, fallbackIcon: (_a = args === null || args === void 0 ? void 0 : args.parent) === null || _a === void 0 ? void 0 : _a.icon, className: classNames({ isActive: currentActiveItem === key }) })) : null)) : null;
+            };
+            const renderTitle = () => !menu_item_path ? (renderLabel()) : isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, renderLabel())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, renderLabel()));
+            return {
+                key,
+                label: (React.createElement(Flex, { gap: 10, align: "center", justify: "space-between", style: { height: '100%' } },
+                    renderIcon(),
+                    React.createElement(Flex, { style: styles.menuItemTitle, align: "center" }, renderTitle()))),
+                children: customMenuItems({ parent: item, items: children }),
+            };
+        });
+    };
+    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);
+            }, 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/components/common/ChildMenu/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const LabelWrapper: 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 LabelCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const OptionDropdownWrapper: 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 MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,120 @@
+var _a, _b;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex, Typography } from '../../../../../atoms';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { ICON_SIZE } from '../../../constants';
+export const LabelWrapper = styled(Flex) `
+  width: 100%;
+`;
+LabelWrapper.defaultProps = {
+    gap: 10,
+    align: 'center',
+    justify: 'space-between',
+};
+export const LabelCustom = styled(Typography.Text) `
+  font-size: inherit !important;
+  color: inherit !important;
+`;
+export const OptionDropdownWrapper = styled(Flex) `
+  width: 20px;
+`;
+OptionDropdownWrapper.defaultProps = { align: 'center' };
+export const MenuWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  background-color: transparent !important;
+  font-size: 12px !important;
+  font-weight: bold !important;
+  border-right: none !important;
+
+  & > ul.antsomi-menu.antsomi-menu-root {
+    height: 100%;
+
+    & > li {
+      padding-left: 0px !important;
+
+      &.antsomi-menu-submenu > [role='menuitem'] {
+        margin: 0;
+        padding-left: 0px !important;
+        width: 100%;
+        border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
+        padding-right: 4px !important;
+      }
+    }
+
+    & li {
+      width: 100%;
+      margin: 0;
+      padding-right: 0px;
+      background-color: transparent !important;
+
+      & .antsomi-menu-title-content {
+        width: 100%;
+        height: 100%;
+        border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+        padding: 0 8px;
+
+        &:hover {
+          background-color: #f2f9ff !important;
+        }
+      }
+
+      &.antsomi-menu-item-selected {
+        & > .antsomi-menu-title-content {
+          background-color: #deeffe !important;
+        }
+      }
+
+      [role='icon'] {
+        font-size: ${ICON_SIZE};
+      }
+
+      & .menu-link {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        color: inherit;
+        text-decoration: none;
+      }
+
+      &.antsomi-menu-submenu {
+        & > [role='menuitem'] {
+          padding-right: 0;
+        }
+
+        & > ul.antsomi-menu.antsomi-menu-sub {
+          & > [role='menuitem'] {
+            width: 100%;
+            padding-right: 0px;
+
+            & > .antsomi-menu-title-content {
+              & ${OptionDropdownWrapper} {
+                display: none;
+              }
+
+              &:hover {
+                & ${OptionDropdownWrapper} {
+                  display: flex;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  [role='menu'] {
+    background-color: transparent !important;
+    border: none !important;
+  }
+
+  .antsomi-menu-item-active,
+  .antsomi-menu-submenu-title:hover {
+    background-color: #f2f9ff !important;
+  }
+`;