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

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

@@ -0,0 +1,22 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+import { Flex } from '../../../../atoms';
+// Constants
+import Icon from '@antscorp/icons';
+// Styled
+import { CreateButton, HomeMenuWrapper } from './styled';
+// Hooks
+import { useHomeMenu } from './useHomeMenu';
+export const HomeMenu = memo(() => {
+    const { children, onCreateNewReport, onMenuClick } = useHomeMenu();
+    // console.log({});
+    return (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 }))));
+});

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

@@ -0,0 +1,5 @@
+/// <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>;

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

@@ -0,0 +1,37 @@
+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;
+`;

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

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

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

@@ -0,0 +1,62 @@
+// Libraries
+import { useCallback, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+// Constants
+import { CONFIG_OPTIONS } from './constants';
+import { HOME_REPORT_ROUTES, HOME_ROUTE } from '../../constants';
+// Utils
+import { getGeneratePath, getMenuItem } from '../../utils';
+// Types
+import { useLeftMenuStore } from '../../stores';
+import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
+export const useHomeMenu = () => {
+    const { pathname, search } = window.location;
+    const history = useHistory();
+    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);
+    const urlParams = useMemo(() => new URLSearchParams(search), [search]);
+    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 }));
+                history.push(newPathName);
+                urlParams.set('type', HOME_REPORT_ROUTES.CONFIGURE);
+                history.replace({ search: urlParams.toString() });
+                break;
+            }
+            case CONFIG_OPTIONS.REMOVE.key:
+                break;
+            default:
+                break;
+        }
+    }, [auth, history, 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 {
+            history.push(getGeneratePath(HOME_ROUTE, auth));
+            urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
+            history.replace({ search: urlParams.toString() });
+        }
+    }, [auth, history, onClickCreateDashboard, 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);
+        }
+    }, [auth, pathname, history]);
+    return {
+        children: customChildren,
+        /* Callbacks */
+        onCreateNewReport,
+        onOptionCallback,
+        onMenuClick,
+    };
+};

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;
+  }
+`;

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

@@ -0,0 +1,31 @@
+import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+import { TMenuItem } from '../../../types';
+/**
+ * Finds the active menu item code based on the provided URL within the given menu items.
+ * ATTENTION: Start finding from level 2 because level 1 contains apps
+ *
+ * @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 (optional).
+ * @returns {string | undefined} The menu item code of the active menu item or undefined if not found.
+ *
+ * @throws Will throw an error if any issue occurs during the process.
+ */
+export declare const findActiveMenuItemByUrl: (args: {
+    url: string;
+    menuItems: TFeatureMenu[];
+    auth?: Partial<PayloadInfo>;
+}) => string | undefined;
+/**
+ * Recursively finds the parent key of the active menu item within the given menu items.
+ * @param {object} args - The arguments object.
+ * @param {string} args.activeMenuItem - The key of the active menu item.
+ * @param {TMenuItem[]} args.menuItems - The array of menu items to search within.
+ * @returns {string | undefined} The key of the parent menu item or undefined if not found.
+ */
+export declare const recursiveFindParentOfActiveItem: (args: {
+    activeMenuItem: string;
+    menuItems: TMenuItem[];
+}) => string | undefined;