@antscorp/antsomi-ui 1.3.4 → 1.3.5-alpha.10

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

@@ -1,31 +1,23 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
 // Libraries
-import { Dropdown, Button, Space, Typography, Tree, Input } from 'antd';
+import { Space, Typography, Tree, Input } from 'antd';
 import styled, { css } from 'styled-components';
-// Constantsim
+import { Button } from '../../atoms';
+// Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Components
 const { Text: AntText } = Typography;
 const { Search } = Input;
-export const DropDown = styled(Dropdown) `
-  .verify-support span {
-    font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
-    font-weight: medium;
-  }
-`;
 export const ButtonFeedback = styled(Button) `
   width: 200px;
   height: ${props => (props.height ? props.height : 36)}px !important;
-  border-radius: ${props => (props.borderRadiusCustom ? props.borderRadiusCustom : 5)}px !important;
-  border: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1} !important;
   z-index: 10;
 `;
 export const PreviewBox = styled.div `
   position: relative;
   width: 200px;
   height: 125px;
-  background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw0};
+  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
   cursor: pointer;
   overflow: hidden;
 
@@ -46,16 +38,12 @@ export const Overlay = styled.div `
 `;
 export const Text = styled.span `
   font-weight: normal !important;
-  color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorText} !important;
-  font-size: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.fontSize}px !important;
+  color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText} !important;
+  font-size: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontSize}px !important;
 `;
 export const Label = styled.span `
   &.verify-support {
-    display: inline-block;
-    padding: 5px 0;
-    color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorPrimary};
-    font-size: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.fontSize}px;
-    font-weight: 500;
+    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
   }
 `;
 export const SendFeedback = styled.div `
@@ -65,8 +53,8 @@ export const ControlGroup = styled(Space) `
   width: 100%;
 `;
 export const ControlLabel = styled(AntText) `
-  font-size: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.fontSize}px !important;
-  color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw8} !important;
+  font-size: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontSize}px !important;
+  color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw8} !important;
 `;
 export const FlexCenter = styled.div `
   display: flex;
@@ -84,7 +72,7 @@ export const HiddenBlock = styled.div `
   right: 0;
   width: 17px;
   height: 50px;
-  background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw0};
+  background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw0};
 `;
 export const WrapperImage = styled.div `
   position: relative;
@@ -108,7 +96,7 @@ export const Video = styled.video `
 export const WrapperHeader = styled.strong `
   display: block;
   height: 50px;
-  border-bottom: 1px solid ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw3};
+  border-bottom: 1px solid ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw3};
   line-height: 50px;
   padding-left: 15px;
   box-sizing: border-box;
@@ -119,7 +107,7 @@ export const WrapperHeader = styled.strong `
 `;
 export const Header = styled(AntText) `
   font-size: 16px !important;
-  color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.colorText} !important;
+  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText} !important;
   font-weight: normal !important;
 `;
 export const WrapperBody = styled.div `
@@ -135,8 +123,8 @@ export const WrapperFooter = styled.div `
   left: 0;
   width: 100%;
   max-height: 58px;
-  border-top: 1px solid ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw3};
-  background-color: ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw0};
+  border-top: 1px solid ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw3};
+  background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw0};
   padding: 15px;
   box-sizing: border-box;
   z-index: 10;
@@ -147,8 +135,8 @@ export const WrapperFooterSpace = styled.div `
   left: 0;
   width: 100%;
   max-height: 58px;
-  border-top: 1px solid ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw3};
-  background-color: ${(_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw0};
+  border-top: 1px solid ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw3};
+  background-color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw0};
   padding: 15px;
   box-sizing: border-box;
   z-index: 10;
@@ -158,28 +146,28 @@ export const WrapperFooterSpace = styled.div `
 `;
 export const EditorWrapper = styled.div `
   .tox-tinymce {
-    border: 1px solid ${(_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw3_5};
+    border: 1px solid ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw3_5};
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
   }
 `;
 export const WrapperLinkFiles = styled.div `
-  border-right: 1px solid ${(_u = THEME.token) === null || _u === void 0 ? void 0 : _u.bw3_5};
-  border-left: 1px solid ${(_v = THEME.token) === null || _v === void 0 ? void 0 : _v.bw3_5};
+  border-right: 1px solid ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw3_5};
+  border-left: 1px solid ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw3_5};
   display: flex;
   flex-direction: column;
   padding: 8px;
   gap: 4px;
 `;
 export const WrapperLinkItemFiles = styled.div `
-  color: ${(_w = THEME.token) === null || _w === void 0 ? void 0 : _w.bw10};
+  color: ${(_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw10};
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 export const WrapperIconEditor = styled.div `
   height: 44px;
-  border: 1px solid ${(_x = THEME.token) === null || _x === void 0 ? void 0 : _x.bw3_5};
+  border: 1px solid ${(_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw3_5};
   border-top: ${props => { var _a; return (props.borderTop ? `1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3_5}` : 'none'); }};
   display: flex;
   align-items: center;
@@ -208,15 +196,15 @@ export const WrapperBodyModal = styled.div `
 `;
 export const ErrorMessage = styled.div `
   display: ${props => (props.isShow ? 'block' : 'none')};
-  color: ${(_y = THEME.token) === null || _y === void 0 ? void 0 : _y.red8};
+  color: ${(_u = THEME.token) === null || _u === void 0 ? void 0 : _u.red8};
   font-size: 11px;
   line-height: 24px;
-  font-family: ${(_z = THEME.token) === null || _z === void 0 ? void 0 : _z.fontFamily};
+  font-family: ${(_v = THEME.token) === null || _v === void 0 ? void 0 : _v.fontFamily};
 `;
 export const Wrapper = styled.div ``;
 export const LabelTitle = styled(AntText) `
   font-size: 13px !important;
-  color: ${(_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.colorText} !important;
+  color: ${(_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorText} !important;
   font-weight: bold;
 `;
 export const WrapperContentHelp = styled.div `
@@ -230,7 +218,7 @@ export const Link = styled.a `
   font-size: 12px;
   text-decoration: none;
   color: #005fb8;
-  font-family: ${(_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.fontFamily};
+  font-family: ${(_x = THEME.token) === null || _x === void 0 ? void 0 : _x.fontFamily};
   font-weight: bold;
 `;
 export const IframeHelp = styled.iframe `
@@ -262,3 +250,18 @@ export const TreeContent = styled(Tree) `
 export const Span = styled.span `
   font-weight: ${props => (props.styles && props.styles.length > 0 ? 'bold' : 'normal')};
 `;
+export const IconButtonStyled = styled(Button) `
+  background-color: transparent !important;
+  color: #666666 !important;
+  box-shadow: none !important;
+  border-radius: 10px !important;
+  height: 36px !important;
+  width: 36px !important;
+
+  &.antsomi-dropdown-open,
+  &.antsomi-popover-open {
+    color: ${(_y = THEME.token) === null || _y === void 0 ? void 0 : _y.blue7} !important;
+    background-color: ${(_z = THEME.token) === null || _z === void 0 ? void 0 : _z.blue1_1} !important;
+    border: 1px solid ${(_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.blue7} !important;
+  }
+`;

package/es/components/organism/Help/types.d.ts

@@ -5,7 +5,7 @@ type ConfigProps = {
     domain: string;
     domainTicket: string;
     token: string;
-    apiKey: string;
+    apiKey?: string;
     portalId: string;
     config: any;
     userId: string;
@@ -33,7 +33,7 @@ export interface IHelpProps {
     configs: ConfigProps;
     boundsDraggable?: string;
     isShowResizeHover?: boolean;
-    triggerType: TriggerTypeDropdown;
+    triggerType?: TriggerTypeDropdown;
     onClick?: Function;
     children?: ReactNode;
 }

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LeftMenuProps } from '../../..';
+export declare const LeftMenuComponent: React.FC<LeftMenuProps>;

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

@@ -0,0 +1,131 @@
+// Libraries
+import React, { memo, useCallback, useMemo } from 'react';
+import Icon from '@antscorp/icons';
+import { Typography } from 'antd';
+import classNames from 'classnames';
+import { isEmpty } from 'lodash';
+import isEqual from 'react-fast-compare';
+// Styled
+import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, } from './styled';
+// Constants
+import { APP_KEYS } from './constants';
+// Components
+import { CustomMenu, CommonMenu, HomeMenu } from './components';
+// Hooks
+import { useLeftMenu } from './hooks';
+// Contexts
+import { useLeftMenuContext } from './contexts';
+import { renderMenuIcon } from './utils';
+const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
+const homePermissionCode = 'DASHBOARD';
+export const LeftMenuComponent = memo(props => {
+    const { show = true, style, className, customization, showLogo = true, onClickLogo } = props;
+    const { showMenuPopover = true, showButtonExpand = true, type, items = [], onMenuItemClick, } = customization || {};
+    const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
+    const customHoverMenuChildren = useLeftMenuContext(store => store.customHoverMenuChildren);
+    const hoverMenuChildren = useMemo(() => {
+        if (type === 'customization')
+            return customHoverMenuChildren;
+        return appHoverMenuChildren;
+    }, [appHoverMenuChildren, customHoverMenuChildren, type]);
+    const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, onShowPopover, onClickFeatureMenuItem, } = useLeftMenu(props);
+    const childActiveMenu = useMemo(() => {
+        const appActiveKey = ['customization', 'recommendation'].includes(`${type}`)
+            ? customActiveAppKey
+            : activeAppCode;
+        if (type === 'customization')
+            return React.createElement(CustomMenu, null);
+        switch (appActiveKey) {
+            case type === 'recommendation' ? homePermissionCode : APP_KEYS.HOME:
+                return React.createElement(HomeMenu, null);
+            default:
+                return React.createElement(CommonMenu, null);
+        }
+    }, [activeAppCode, customActiveAppKey, type]);
+    const childHoverMenu = useMemo(() => {
+        const appActiveKey = state.hoverItem;
+        if (type === 'customization')
+            return React.createElement(CustomMenu, { isHover: true });
+        switch (appActiveKey) {
+            case type === 'recommendation' ? homePermissionCode : APP_KEYS.HOME:
+                return React.createElement(HomeMenu, { isHover: type !== 'recommendation' });
+            default:
+                return React.createElement(CommonMenu, { isHover: type !== 'recommendation' });
+        }
+    }, [state.hoverItem, type]);
+    const renderFeatureMenuItem = useCallback((item) => {
+        const { menu_item_name, menu_item, icon_name, component_icon_name, menu_item_code } = item;
+        const isActive = activeAppCode === menu_item_code;
+        const isHover = state.hoverItem === menu_item_code;
+        let Label = null;
+        Label = (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
+            renderMenuIcon(component_icon_name || icon_name || ''),
+            React.createElement(Typography.Text, null, menu_item_name),
+            showMenuPopover && React.createElement("div", { className: "popup-triangle" })));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onClick: () => onClickFeatureMenuItem(item), onMouseEnter: () => onMouseEnter(menu_item_code) }, Label));
+    }, [activeAppCode, state.hoverItem, showMenuPopover, onMouseEnter, onClickFeatureMenuItem]);
+    const renderRecommendationMenuItem = useCallback((item) => {
+        const { menu_item_name, menu_item, component_icon_name, icon_name, permission_code } = item;
+        const isActive = customActiveAppKey === permission_code;
+        const isHover = state.hoverItem === permission_code;
+        const renderLabel = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }), onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(permission_code || 'null', [permission_code || 'null']) },
+            renderMenuIcon(component_icon_name || icon_name || ''),
+            React.createElement(Typography.Text, null, menu_item_name)));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(permission_code || 'null') }, renderLabel()));
+    }, [customActiveAppKey, onMenuItemClick, onMouseEnter, state.hoverItem]);
+    const renderCustomizedMenuItems = useCallback((items) => items === null || items === void 0 ? void 0 : items.map(item => {
+        const { key, icon, label } = item;
+        const isActive = key === customActiveAppKey;
+        const isHover = key === state.hoverItem;
+        return (React.createElement(FeatureMenuItem, { key: key, onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [key]), onMouseEnter: () => onMouseEnter(key) },
+            React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
+                renderMenuIcon(icon || ''),
+                React.createElement(Typography.Text, null, label),
+                showMenuPopover && React.createElement("div", { className: "popup-triangle" }))));
+    }), [customActiveAppKey, state.hoverItem, showMenuPopover, onMenuItemClick, onMouseEnter]);
+    const renderAppMenuItems = useCallback(() => {
+        var _a;
+        return type === 'customization'
+            ? renderCustomizedMenuItems(items)
+            : (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.filter(item => item.menu_item_code !== APP_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => type === 'recommendation'
+                ? renderRecommendationMenuItem(item)
+                : renderFeatureMenuItem(item));
+    }, [
+        items,
+        permissionMenu,
+        renderCustomizedMenuItems,
+        renderFeatureMenuItem,
+        renderRecommendationMenuItem,
+        type,
+    ]);
+    const renderSettings = () => {
+        if (type !== 'customization') {
+            const settingApp = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === APP_KEYS.SETTINGS);
+            if (settingApp)
+                return type === 'recommendation'
+                    ? renderRecommendationMenuItem(settingApp)
+                    : renderFeatureMenuItem(settingApp);
+        }
+        return null;
+    };
+    return (React.createElement(LeftMenuNavWrapper, { "$show": show, style: style, "$isExpandMenu": state.isExpandMenu, className: className },
+        React.createElement(LeftMenuNav, { className: "left-menu-nav" },
+            React.createElement(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave },
+                showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar, onClick: onClickLogo },
+                    React.createElement("div", { className: "image-wrapper" },
+                        React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" })))),
+                React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box" },
+                    React.createElement("div", { className: "menu-content scroll-content" }, renderAppMenuItems()),
+                    React.createElement("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }),
+                    showMenuPopover && (React.createElement(PopoverWrapper, { show: state.isShowPopover && !isEmpty(hoverMenuChildren), hasMarginTop: type !== 'recommendation', className: "antsomi-scroll-box antsomi-child-menu-popover" },
+                        React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childHoverMenu)))),
+                React.createElement("div", { style: { flexShrink: 0 } }, renderSettings())),
+            showButtonExpand && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
+                React.createElement(Icon, { type: "icon-ants-expand-more", style: {
+                        cursor: 'pointer',
+                        fontSize: '20px',
+                        transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
+                    }, onClick: onToggleChildMenu })))),
+        React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu, isMarginTop: showLogo, className: "antsomi-scroll-box" },
+            React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childActiveMenu))));
+}, (prevProps, nextProps) => isEqual(prevProps, nextProps));

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CommonMenuProps {
+    isHover?: boolean;
+}
+export declare const CommonMenu: React.FC<CommonMenuProps>;
+export {};

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

@@ -0,0 +1,16 @@
+// Libraries
+import React, { memo, useMemo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Stores
+import { useLeftMenuContext } from '../../contexts';
+// Utils
+import { getMenuItem } from '../../utils';
+export const CommonMenu = memo(({ isHover }) => {
+    const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
+    const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
+    const onMenuClick = useLeftMenuContext(store => store.onMenuClick);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
+    const customHoverChildren = useMemo(() => appHoverMenuChildren === null || appHoverMenuChildren === void 0 ? void 0 : appHoverMenuChildren.map(item => getMenuItem(item)), [appHoverMenuChildren]);
+    return (React.createElement(ChildMenu, { items: isHover ? customHoverChildren : customChildren, onMenuClick: onMenuClick }));
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CustomMenuProps {
+    isHover?: boolean;
+}
+export declare const CustomMenu: React.FC<CustomMenuProps>;
+export {};

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

@@ -0,0 +1,12 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Hooks
+import { useLeftMenuContext } from '../../contexts';
+export const CustomMenu = memo(({ isHover }) => {
+    const appCustomMenuChildren = useLeftMenuContext(store => store.customMenuChildren);
+    const appCustomHoverMenuChildren = useLeftMenuContext(store => store.customHoverMenuChildren);
+    const onMenuClick = useLeftMenuContext(store => store.onMenuClick);
+    return (React.createElement(ChildMenu, { items: isHover ? appCustomHoverMenuChildren : appCustomMenuChildren, onMenuClick: onMenuClick }));
+});

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

@@ -0,0 +1,10 @@
+export declare const CONFIG_OPTIONS: {
+    CONFIGURE: {
+        key: string;
+        label: string;
+    };
+    REMOVE: {
+        key: string;
+        label: string;
+    };
+};

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

@@ -0,0 +1,10 @@
+export const CONFIG_OPTIONS = {
+    CONFIGURE: {
+        key: 'configure',
+        label: 'Configure',
+    },
+    REMOVE: {
+        key: 'remove',
+        label: 'Remove',
+    },
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface HomeMenuProps {
+    isHover?: boolean;
+}
+export declare const HomeMenu: React.FC<HomeMenuProps>;

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

@@ -0,0 +1,25 @@
+// 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, ModalWrapper } from './styled';
+// Hooks
+import { useHomeMenu } from './useHomeMenu';
+export const HomeMenu = memo(props => {
+    const { children, removedDashboardId, isDashboardRemoving, type, showCreateButton, setRemovedDashboardId, onCreateNewReport, 
+    // onMenuClick,
+    onRemoveDashboard, } = useHomeMenu(props);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HomeMenuWrapper, { gap: 10, vertical: true },
+            type !== 'recommendation' && showCreateButton && (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 }))),
+        React.createElement(ModalWrapper, { open: !!removedDashboardId, centered: true, onCancel: () => setRemovedDashboardId(''), title: "Remove this dashboard", okText: "Confirm", cancelText: "Cancel", closable: false, okButtonProps: { loading: isDashboardRemoving }, 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/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;
+export declare const ModalWrapper: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;

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

@@ -0,0 +1,50 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Button, Flex } from '../../../../atoms';
+import { Modal } from '../../../../molecules';
+// 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(Modal) `
+  &.antsomi-modal {
+    width: 379px !important;
+
+    & .antsomi-modal-content {
+      & > .antsomi-modal-header,
+      & > .antsomi-modal-footer {
+        margin: 0px;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { HomeMenuProps } from '.';
+export declare const useHomeMenu: (props: HomeMenuProps) => {
+    children: import("../../types").TMenuItem[];
+    removedDashboardId: string;
+    isDashboardRemoving: boolean;
+    type: import("../../types").TLeftMenuType | undefined;
+    showCreateButton: boolean;
+    setRemovedDashboardId: import("react").Dispatch<import("react").SetStateAction<string>>;
+    onCreateNewReport: import("react").MouseEventHandler<HTMLElement>;
+    onOptionCallback: (args: {
+        menuItemKey: string;
+        optionKey: string;
+    }) => void;
+    onMenuClick: (key: string, _keyPath: string[]) => void;
+    onRemoveDashboard: () => Promise<void>;
+};