@antscorp/antsomi-ui 1.3.5-beta.290 → 1.3.5-beta.292

package/es/components/molecules/AccountSelection/AccountListing.d.ts

@@ -14,4 +14,17 @@ export interface AccountListingProps {
     currentAccount?: string | 'all';
     onChange?: (userId: number | string) => void;
 }
-export declare const AccountListing: React.FC<AccountListingProps>;
+interface AccountData {
+    email: any;
+    userId: any;
+    userName: any;
+    status: number;
+}
+export interface AccountListingHandle {
+    getUsers: () => {
+        recentData: any;
+        accountData: Array<AccountData>;
+    };
+}
+export declare const AccountListing: React.ForwardRefExoticComponent<AccountListingProps & React.RefAttributes<AccountListingHandle>>;
+export {};

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -1,14 +1,14 @@
 import Icon from '@antscorp/icons';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useImperativeHandle, useMemo, useState } from 'react';
 import { Divider, Input } from 'antd';
-import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Scrollbars, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 import { AccountItem } from './components';
 import { AccountSelectionStyled } from './styled';
 import { PORTALS_IDS, THEME } from '@antscorp/antsomi-ui/es/constants';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount } from '../../..';
-export const AccountListing = props => {
-    var _a;
+export const AccountListing = React.forwardRef((props, ref) => {
+    var _a, _b, _c;
     const { className, apiConfig, showAllAccount = true, currentAccount = '', onChange } = props;
     const { domain, token, userId, appCode, menuCode, portalId } = apiConfig;
     // States
@@ -54,20 +54,26 @@ export const AccountListing = props => {
         }
         return (data === null || data === void 0 ? void 0 : data.entries) || [];
     }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
+    useImperativeHandle(ref, () => ({
+        getUsers() {
+            return { recentData, accountData };
+        },
+    }), [recentData, accountData]);
     // Handlers
     const handleSelectAccount = useCallback((userId) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(userId);
     }, [onChange]);
     return (React.createElement(AccountSelectionStyled, { className: className },
-        React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px' } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
-        React.createElement("div", { className: "antsomi-scroll-box account-list" },
-            React.createElement("ul", { className: "scroll-content" },
-                !!(recentData === null || recentData === void 0 ? void 0 : recentData.value) && (React.createElement(React.Fragment, null,
-                    React.createElement(Text, { className: "recent-text" }, "Recent"), recentData === null || recentData === void 0 ? void 0 :
-                    recentData.value.map(accountId => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }))))),
-                React.createElement(Divider, { style: { margin: '8px 0', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3 } }), accountData === null || accountData === void 0 ? void 0 :
-                accountData.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
-                    searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }))))),
+        React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
+        React.createElement("div", { className: "account-list" },
+            React.createElement("ul", null,
+                React.createElement(Scrollbars, { style: { width: '100%', height: showAllAccount ? '364px' : '410px' } },
+                    ((_b = recentData === null || recentData === void 0 ? void 0 : recentData.value) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(React.Fragment, null,
+                        React.createElement(Text, { className: "recent-text" }, "Recent"), recentData === null || recentData === void 0 ? void 0 :
+                        recentData.value.map(accountId => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }))),
+                        React.createElement(Divider, { style: { margin: '8px 0', color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw3 } }))) : null, accountData === null || accountData === void 0 ? void 0 :
+                    accountData.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
+                        searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId })))))),
         showAllAccount ? (React.createElement(Text, { className: `all-account ${isAllAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('all') },
             React.createElement("strong", null, "All account"))) : null));
-};
+});

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

@@ -1,2 +1,2 @@
 export { AccountSelection, type AccountSelectionProps } from './AccountSelection';
-export { AccountListing } from './AccountListing';
+export { AccountListing, AccountListingHandle } from './AccountListing';

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

@@ -9,13 +9,15 @@ export const AccountSelectionStyled = styled.div `
   height: 450px;
   box-shadow: 0px 3px 20px 0px #002e5933;
 
-  .input__wrapper .antsomi-input-affix-wrapper {
+  .antsomi-input-affix-wrapper {
     padding: 8px 10px;
+    height: 40px;
+    box-sizing: border-box;
   }
 
   .recent-text {
     color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw7};
-    padding: 6px 10px 0;
+    padding: 6px 10px;
   }
 
   ul {
@@ -32,7 +34,7 @@ export const AccountSelectionStyled = styled.div `
   li {
     display: flex;
     justify-content: space-between;
-    padding: 8px 10px;
+    padding: 5px 10px;
     margin-bottom: 6px;
     cursor: pointer;
 
@@ -47,7 +49,9 @@ export const AccountSelectionStyled = styled.div `
   }
 
   .all-account {
-    padding: 8px 10px;
+    padding: 13px 10px;
+    height: 46px;
+    box-sizing: border-box;
     border-top: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw3};
     cursor: pointer;
   }

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -28,14 +28,13 @@ export const HeaderV2 = memo(props => {
     const { auth, env: envContext, languageCode = 'en', appCode: contextAppCode, urlLogout: urlLogoutProvider = '', menuCode: contextMenuCode, } = useContextSelector(AppConfigContext, state => state);
     const { search } = useLocation();
     const history = useHistory();
-    /** Prefer to use Header in AppConfigContext */
+    // * Prefer to use Header in AppConfigContext
     const { className, style, breadcrumbs, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
     const oidParam = (_a = urlParams.get('oid')) !== null && _a !== void 0 ? _a : 'all';
-    // States
     const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam : `${(_b = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _b !== void 0 ? _b : 'all'}`}`);
     // Memo
     const accountSelectionDomain = useMemo(() => {
@@ -85,7 +84,6 @@ export const HeaderV2 = memo(props => {
         token,
         lang: language,
     };
-    // Handlers
     const handleChangeAccount = (userId) => {
         setSelectedAccount(userId);
         if (useURLParam) {

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

@@ -67,3 +67,4 @@ export type { InputNumberProps as InputNumberWithLabelProps } from './InputNumbe
 export type { ModalSelectProps } from './ModalSelect';
 export type { ImageResizeHandle } from './ImageEditor';
 export type { EditableNameHandle } from './EditableName';
+export type { AccountListingHandle, AccountSelectionProps } from './AccountSelection';

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

@@ -10,9 +10,9 @@ import { CreateButton, HomeMenuWrapper } from './styled';
 // Hooks
 import { useHomeMenu } from './useHomeMenu';
 export const HomeMenu = memo(() => {
-    // Handlers
     const { children, onCreateNewReport, onMenuClick } = useHomeMenu();
-    return (React.createElement(HomeMenuWrapper, { vertical: true },
+    // 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 } }),

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

@@ -7,6 +7,7 @@ import { Button, Flex } from '../../../../atoms';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const HomeMenuWrapper = styled(Flex) `
   height: 100%;
+  width: 100%;
 
   .menu-list {
     width: 100%;

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

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

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

@@ -8,29 +8,14 @@ import { HOME_REPORT_ROUTES, HOME_ROUTE } from '../../constants';
 import { getGeneratePath, getMenuItem } from '../../utils';
 // Types
 import { useLeftMenuStore } from '../../stores';
+import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
 export const useHomeMenu = () => {
-    // Hooks
-    const { pathname, hash, search } = window.location;
+    const { pathname, search } = window.location;
     const history = useHistory();
-    // Stores
     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; });
-    // Memos
+    const onClickCreateDashboard = useLayoutStore(store => store.state.leftMenu.onClickCreateDashboard);
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
-    // Handlers
-    const handleSetSearchParams = useCallback((searchParam) => {
-        const url = `${pathname}${hash}`;
-        if (url.includes(getGeneratePath(HOME_ROUTE, Object.assign({}, auth)))) {
-            urlParams.set('type', searchParam);
-            history.replace({ search: urlParams.toString() });
-        }
-        else {
-            history.push(getGeneratePath(HOME_ROUTE, Object.assign({}, auth)));
-            urlParams.set('type', searchParam);
-            history.replace({ search: urlParams.toString() });
-        }
-    }, [auth, hash, history, pathname, urlParams]);
-    // Memos
     const onOptionCallback = useCallback((args) => {
         const { optionKey, menuItemKey } = args;
         switch (optionKey) {
@@ -51,12 +36,16 @@ export const useHomeMenu = () => {
         var _a;
         return getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: (_a = appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }))) }));
     }), [appMenuChildren, onOptionCallback]);
-    // Callbacks
-    const onCreateNewReport = useCallback(() => {
-        history.push(getGeneratePath(HOME_ROUTE, auth));
-        urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
-        history.replace({ search: urlParams.toString() });
-    }, [auth, history, urlParams]);
+    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) {

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

@@ -6,10 +6,10 @@ import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 // Components
 import { Dropdown, Menu } from 'antd';
-import { Flex } from '../../../../../atoms';
 import { MenuItemImage } from './components';
+import { Flex } from '../../../../../atoms';
 // Styled
-import { LabelCustom, MenuWrapper } from './styled';
+import { LabelCustom, LabelWrapper, MenuWrapper, OptionDropdownWrapper } from './styled';
 import { IconWrapper } from '../../../styled';
 // Constants
 import { ICON_SIZE } from '../../../constants';
@@ -19,9 +19,17 @@ import { recursiveFindParentOfActiveItem } from './utils';
 // Hooks
 import { useLeftMenuStore } from '../../../stores';
 import { useNavigatePath } from '../../../hooks';
+const styles = {
+    dropdownMenu: { width: '130px', padding: '8px 0' },
+    icon: { marginTop: '2px', zIndex: 1000, flexShrink: 0 },
+    expandIcon: {
+        fontSize: ICON_SIZE,
+        color: 'inherit',
+    },
+    menuItemTitle: { flex: '1 1 0%', maxWidth: '100%' },
+};
 export const ChildMenu = memo(props => {
     const { items = [], onMenuClick } = props;
-    // Stores
     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);
@@ -29,18 +37,15 @@ export const ChildMenu = memo(props => {
     const isCustomized = useLeftMenuStore(store => store.state.isCustomized);
     const customActiveCurrentKey = useLeftMenuStore(store => store.state.customActiveCurrentKey);
     const setLeftMenuState = useLeftMenuStore(store => store.setState);
-    // States
     const [currentActiveItem, setCurrentActiveItem] = useState('');
     const [openKeys, setOpenKeys] = useState([]);
-    // Hooks
     const { pathname, hash } = window.location;
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
-    // Side Effects
     useEffect(() => {
         var _a;
         if (isCustomized) {
             setCurrentActiveItem(customActiveCurrentKey);
-            /** Find parent key of active menu item to open it */
+            // Find parent key of active menu item to open it
             const parentKey = recursiveFindParentOfActiveItem({
                 activeMenuItem: customActiveCurrentKey,
                 menuItems: customItems,
@@ -51,11 +56,11 @@ export const ChildMenu = memo(props => {
         }
         else {
             const url = `${pathname}${hash}`;
-            /** Active menu item by current url */
+            // 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 */
+                // 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)),
@@ -63,7 +68,7 @@ export const ChildMenu = memo(props => {
                 if (parentKey) {
                     setOpenKeys(prev => [...prev, parentKey]);
                 }
-                /**  Active App Item having code matching url */
+                // Active App Item having code matching url
                 const matchAppCode = findActiveAppCodeByUrl({ menuItems, url, auth });
                 if (matchAppCode && matchAppCode !== activeAppCode) {
                     setLeftMenuState({ activeAppCode: matchAppCode });
@@ -83,43 +88,43 @@ export const ChildMenu = memo(props => {
         customActiveCurrentKey,
         customItems,
     ]);
-    // Handlers
     const onClick = e => {
         onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);
     };
-    // Render components
     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 => {
-            var _a;
             const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, optionCallback, } = item;
-            const labelComponent = () => (!children || isEmpty(children)) && !isEmpty(options) ? (React.createElement(Flex, { gap: 10, align: "center", justify: "space-between", style: { width: '100%' }, className: "child-menu-label" },
-                React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
-                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 });
-                        },
-                    }, trigger: ['click'] },
-                    React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: { marginTop: '2px', zIndex: 1000 } })))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
+            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.icon }))))) : (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: !menu_item_path ? (labelComponent()) : isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, labelComponent())),
-                icon: !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,
+                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: 10, onOpenChange: openKeys => {
+        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: {
-                    fontSize: ICON_SIZE,
-                    color: 'inherit',
-                    // color: THEME.token?.bw8,
-                    transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
-                } })), onClick: onClick })));
+            }, 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

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

@@ -1,11 +1,27 @@
-var _a;
+var _a, _b;
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Typography } from '../../../../../atoms';
+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: 24px;
+`;
+OptionDropdownWrapper.defaultProps = { align: 'center' };
 export const MenuWrapper = styled.div `
   width: 100%;
   height: 100%;
@@ -14,15 +30,81 @@ export const MenuWrapper = styled.div `
   font-weight: bold !important;
   border-right: none !important;
 
-  & > ul {
+  & > ul.antsomi-menu.antsomi-menu-root {
     height: 100%;
 
-    li {
-      width: 100% !important;
+    & > 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}px !important;
       }
+
+      & a.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;
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 
@@ -31,30 +113,8 @@ export const MenuWrapper = styled.div `
     border: none !important;
   }
 
-  [role='menuitem'] {
-    margin: 0 !important;
-    border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px !important;
-    padding-right: 10px !important;
-  }
-
-  [role='menuitem'].antsomi-menu-item-selected {
-    background-color: #deeffe !important;
-  }
-
   .antsomi-menu-item-active,
   .antsomi-menu-submenu-title:hover {
     background-color: #f2f9ff !important;
   }
-
-  .menu-link {
-    width: 100% !important;
-    height: 100% !important;
-    display: flex !important;
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-`;
-export const LabelCustom = styled(Typography.Text) `
-  font-size: inherit !important;
-  color: inherit !important;
 `;

package/es/components/organism/LeftMenu/hooks/useLeftMenu.d.ts

@@ -7,7 +7,6 @@ export declare const useLeftMenu: (props: LeftMenuProps) => {
     state: TState;
     activeAppCode: string;
     permissionMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
-    /** Variables */
     customActiveAppKey: string;
     onToggleChildMenu: () => void;
     onMouseEnter: (key: string) => void;