@antscorp/antsomi-ui 1.3.5-beta.183 → 1.3.5-beta.187

package/es/__tests__/fileMock.test.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: string;
+export = _exports;

package/es/__tests__/fileMock.test.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = 'test-file-stub';

package/es/__tests__/styleMock.test.d.ts

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

package/es/__tests__/styleMock.test.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = {};

package/es/assets/css/main.scss

@@ -1,4 +1,4 @@
 :root {
   --primary-color: #005fb8;
   --text-base-color: #222222;
-}
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface AccountSelectionProps {
+    show?: boolean;
     className?: string;
     apiConfig: {
         domain: string;

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

@@ -7,7 +7,7 @@ import { useGetAccountList, useGetRecentAccount } from '../../..';
 import { Tooltip } from 'antd';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 export const AccountSelection = props => {
-    const { className, apiConfig, showAllAccount = true, currentAccount, inputStyle = 'input', onChange, } = props;
+    const { show = true, className, apiConfig, showAllAccount = true, currentAccount, inputStyle = 'input', onChange, } = props;
     const { data } = useGetAccountList({ apiConfig });
     const { data: recentData } = useGetRecentAccount({ apiConfig });
     const [open, setOpen] = useState(false);
@@ -18,16 +18,17 @@ export const AccountSelection = props => {
         if (onChange)
             onChange(userId);
     }, [onChange]);
-    return (React.createElement(Popover, { content: React.createElement(AccountSelectionStyled, { className: className },
+    return (show && (React.createElement(Popover, { content: 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(Text, { className: "recent-text" }, "Recent"),
             React.createElement("ul", null, recentData === null || recentData === void 0 ? void 0 : recentData.value.map(accountId => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.entries) === null || _a === void 0 ? void 0 : _a.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("ul", { className: "account-list" }, data === null || data === void 0 ? void 0 : data.entries.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("div", { className: "antsomi-scroll-box account-list" },
+                React.createElement("ul", { className: "scroll-content" }, data === null || data === void 0 ? void 0 : data.entries.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 ${currentAccount === 'ALL_ACCOUNT' ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('ALL_ACCOUNT') },
                 React.createElement("strong", null, "All account"))) : null), trigger: "click", overlayInnerStyle: { padding: 0 }, placement: "bottomLeft", arrow: false, open: open, onOpenChange: setOpen },
         React.createElement(PopoverFieldStyled, { className: inputStyle },
             React.createElement(Tooltip, { title: currentAccount === 'ALL_ACCOUNT' ? 'All account' : currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName },
                 React.createElement("span", null, currentAccount === 'ALL_ACCOUNT' ? 'All account' : currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName)),
-            React.createElement(Icon, { type: "icon-ants-angle-down", style: { width: '20px', textAlign: 'center' } }))));
+            React.createElement(Icon, { type: "icon-ants-angle-down", style: { width: '20px', textAlign: 'center' } })))));
 };

package/es/components/molecules/AddDynamicContent/utils.d.ts

@@ -28,10 +28,10 @@ export declare const CUSTOM_TYPE: {
 };
 export declare const buildOptionAttrArchive: (list: any[], selected: any) => any[];
 export declare const checkStatusAttr: ({ listBO, itemTypeId, listAttribute, field, }: {
-    listBO?: any[];
-    itemTypeId?: number;
-    listAttribute?: any[];
-    field?: string;
+    listBO?: any[] | undefined;
+    itemTypeId?: number | undefined;
+    listAttribute?: any[] | undefined;
+    field?: string | undefined;
 }) => {
     errorMessage: string;
     isDisable: boolean;

package/es/components/molecules/CalendarSelection/actions.d.ts

@@ -9,7 +9,7 @@ export declare const ACTION_TYPES: {
     readonly apply: "apply";
     readonly resetValue: "reset_value";
 };
-export declare const changeRangeType: (rangeType: string, callback?: (rangeInfo: RangeInfo) => void) => {
+export declare const changeRangeType: (rangeType: string, callback?: ((rangeInfo: RangeInfo) => void) | undefined) => {
     type: "change_range_type";
     payload: {
         rangeType: string;

package/es/components/molecules/CalendarSelection/hooks/useStateContext.d.ts

@@ -1,4 +1,4 @@
 export declare const useCalendarSelectionContext: () => {
-    state: import("../types").ReducerState;
-    action: import("../types").ActionType;
+    state: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ReducerState;
+    action: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ActionType;
 };

package/es/components/molecules/CalendarSelection/utils.d.ts

@@ -29,7 +29,7 @@ export declare const getDefaultDate: () => {
 export declare const getRangeValue: ({ rangeInfo, currentRangeValue, limitNumOfDays, }: {
     rangeInfo: RangeInfo;
     currentRangeValue: RangeValue[];
-    limitNumOfDays?: number;
+    limitNumOfDays?: number | undefined;
 }) => RangeValue[];
 export declare const getRangeValueSelctedTitle: (rangeValue: RangeValue[], options?: {
     formatStart?: string;
@@ -44,7 +44,7 @@ export declare const combineCurrentValue: (state: ReducerState) => {
 };
 export declare const genTriggerOut: ({ mode, id, }: {
     mode: ReducerState['triggerOut']['mode'];
-    id?: number;
+    id?: number | undefined;
 }) => {
     mode: "auto" | "manual";
     id: number;

package/es/components/molecules/DrawerDetail/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledDrawer: import("styled-components").StyledComponent<import("react").FC<import("../Drawer").DrawerProps>, any, {}, never>;
+export declare const StyledDrawer: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/Drawer/Drawer").DrawerProps>, any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseBtn: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -21,6 +21,7 @@ export interface HeaderV2Props {
     accountSharingConfig: Pick<AccountSharingProps, 'isShowSharing' | 'isShareAccountAccess' | 'u_ogs' | 'appCode' | 'callbackLogout' | 'callbackGetInfoAccount'> & {
         show?: boolean;
     };
+    useURLParam?: boolean;
     config?: {
         env?: envType;
         language?: string;

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

@@ -9,7 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { memo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
+import { cloneDeep, merge } from 'lodash';
 // Styled
 import { HeaderV2Styled } from './styled';
 // Components
@@ -20,13 +21,33 @@ import { CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, SOCKET_API,
 import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '../../..';
 export const HeaderV2 = memo(props => {
-    var _a;
-    const { auth, env: envContext, languageCode, } = useContextSelector(AppConfigContext, state => state);
-    const { className, style, pageTitle = 'Page Title', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, config, } = props;
+    var _a, _b, _c;
+    const { auth, env: envContext, languageCode = 'en', state, } = useContextSelector(AppConfigContext, state => state);
+    /** Prefer to use Header in AppConfigContext */
+    const { className, style, pageTitle = 'Page Title', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = merge(cloneDeep(props), cloneDeep((state === null || state === void 0 ? void 0 : state.header) || {}));
     /** 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, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
-    const [selectedAccount, setSelectedAccount] = useState((_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : 'ALL_ACCOUNT');
+    const urlParams = new URLSearchParams(window.location.search);
+    const oidParam = urlParams.get('oid');
+    const [selectedAccount, setSelectedAccount] = useState(useURLParam
+        ? (_b = (_a = Number(oidParam)) !== null && _a !== void 0 ? _a : userId) !== null && _b !== void 0 ? _b : 'ALL_ACCOUNT'
+        : (_c = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _c !== void 0 ? _c : 'ALL_ACCOUNT');
+    useEffect(() => {
+        var _a;
+        if (!useURLParam)
+            return;
+        if (!oidParam) {
+            urlParams.append('oid', `${(_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : 'ALL_ACCOUNT'}`);
+            const newUrl = `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`;
+            window.history.replaceState(null, '', newUrl);
+        }
+        else {
+            const newUrl = `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`;
+            window.history.replaceState(null, '', newUrl);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [oidParam, useURLParam, userId]);
     if (!env || !language || !userId || !portalId || !token)
         return null;
     const { show: showHelp = true, configs } = helpConfig, helpProps = __rest(helpConfig, ["show", "configs"]);
@@ -63,6 +84,11 @@ export const HeaderV2 = memo(props => {
         React.createElement("div", { className: "left-side" },
             React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: userId => {
                     setSelectedAccount(userId);
+                    if (useURLParam) {
+                        urlParams.set('oid', `${userId}`);
+                        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+                        window.history.replaceState(null, '', newUrl);
+                    }
                     if (onSelectAccount)
                         onSelectAccount(userId);
                 }, inputStyle: inputStyle })),

package/es/components/molecules/PreviewModal/styled.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("../ModalV2").ModalV2Props>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/ModalV2/ModalV2").ModalV2Props>, any, {}, never>;
 export declare const ModalHeader: 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 ModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/ShareAccess/hooks/useShareAccess.d.ts

@@ -3,17 +3,17 @@ export declare const useShareAccess: () => {
     state: {
         allowEdit: boolean;
         allowView: boolean;
-        accessInfo?: import("../types").ObjectAccessInfo | undefined;
+        accessInfo?: import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ObjectAccessInfo | undefined;
         accessUserId?: number | undefined;
         accessUserPermission?: {
             view: number;
             edit: number;
         } | undefined;
-        excludeUserAccess?: import("../types").ExcludeUserAccess | undefined;
+        excludeUserAccess?: import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ExcludeUserAccess | undefined;
         modalTransferOwnership: {
             open: boolean;
             userToOwnerShipId: number;
         };
     };
-    dispatch: import("react").Dispatch<import("../types").ShareAccessAction> | null;
+    dispatch: import("react").Dispatch<import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ShareAccessAction> | null;
 };

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts

@@ -66,7 +66,7 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
     form: import("antd").FormInstance<FormValue>;
     errors: any[] | undefined;
     refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
     onLoadMore: () => void;
     onChange: (newValue: Partial<TemplateValueOptions>) => void;
 };

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

@@ -68,16 +68,23 @@ export const InputSearchStyled = styled.div `
 export const TriggerPopoverStyled = styled.div `
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 15px;
   padding: 3px 3px 3px 10px;
   border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3};
   background-color: white;
   border-radius: 999px;
 
+  width: 140px;
+  box-sizing: border-box;
+
   cursor: pointer;
 
   .brand-logo {
     height: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
     img {
       height: 20px;
       display: block;

package/es/components/organism/AlgorithmsSetting/styled.d.ts

@@ -10,7 +10,7 @@ export declare const AlgorithmWrapper: import("styled-components").StyledCompone
     mode: ContentSourceModeView;
 }, never>;
 export declare const StyledSelect: import("styled-components").StyledComponent<{
-    (props: import("../../molecules").SelectV2Props): import("react").JSX.Element;
+    (props: import("@antscorp/antsomi-ui/es/components/molecules/SelectV2").SelectProps): import("react").JSX.Element;
     defaultProps: {
         suffixIcon: import("react").JSX.Element;
         filterOption: (input: any, option: any) => boolean;

package/es/components/organism/ContentSources/provider.d.ts

@@ -9,6 +9,6 @@ export interface ContentSourceProviderProps {
 export declare const ContentSourceProvider: ({ children }: ContentSourceProviderProps) => React.JSX.Element;
 export declare const useContentSourceState: () => ContentSourceState;
 export declare const useContentSourceDispatch: () => React.Dispatch<UpdateGroupAction>;
-export declare const useSelectServiceAuth: () => import("../../..").PayloadInfo;
+export declare const useSelectServiceAuth: () => import("@antscorp/antsomi-ui/es/types").PayloadInfo;
 export declare const useSelectContentSources: () => import("./types").TContentSourceSettings;
 export declare const useSelectModeView: () => import("./types").ContentSourceModeView;

package/es/components/organism/ContentSources/utils.d.ts

@@ -17,11 +17,11 @@ export declare const isCheckStatusAttr: (listBO: any, itemTypeId: any, listAttri
     isDisable: boolean;
 };
 export declare const checkStatusCollection: ({ listBO, itemTypeId, listCollection, field, checkDisable, }: {
-    listBO?: any[];
-    itemTypeId?: number | null;
-    listCollection?: any[];
-    field?: string;
-    checkDisable?: boolean;
+    listBO?: any[] | undefined;
+    itemTypeId?: number | null | undefined;
+    listCollection?: any[] | undefined;
+    field?: string | undefined;
+    checkDisable?: boolean | undefined;
 }) => {
     errorMessage: string;
     isDisable: boolean;

package/es/components/organism/FilterSetting/components/common/InputSelectMulti/ColumnSuggestion/index.d.ts

@@ -11,5 +11,5 @@ export declare const WrapperContent: import("styled-components").StyledComponent
 export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const ListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const Span: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextField: import("styled-components").StyledComponent<React.FC<import("../../../../../../atoms/Text").TextProps>, any, {}, never>;
+export declare const TextField: import("styled-components").StyledComponent<React.FC<import("@antscorp/antsomi-ui/es/components/atoms/Text").TextProps>, any, {}, never>;
 export {};

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

@@ -1,4 +1,4 @@
-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, _2, _3;
+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, _2, _3, _4;
 // Libraries
 import { Dropdown, /* Button, */ Space, Typography, Tree, Input } from 'antd';
 import styled, { css } from 'styled-components';
@@ -264,7 +264,6 @@ export const Span = styled.span `
   font-weight: ${props => (props.styles && props.styles.length > 0 ? 'bold' : 'normal')};
 `;
 export const IconButtonStyled = styled(Button) `
-  border: none !important;
   background-color: transparent !important;
   color: #666666 !important;
   box-shadow: none !important;
@@ -272,7 +271,8 @@ export const IconButtonStyled = styled(Button) `
 
   &.antsomi-dropdown-open,
   &.antsomi-popover-open {
-    background-color: ${(_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.blue1_1} !important;
-    border: 1px solid ${(_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.blue7} !important;
+    color: ${(_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.blue7} !important;
+    background-color: ${(_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.blue1_1} !important;
+    border: 1px solid ${(_4 = THEME.token) === null || _4 === void 0 ? void 0 : _4.blue7} !important;
   }
 `;

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

@@ -1,3 +1,3 @@
 export declare const useContentMenu: () => {
-    children: import("../../types").TMenuItem[];
+    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
 };

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

@@ -1,3 +1,3 @@
 export declare const useDataMenu: () => {
-    children: import("../../types").TMenuItem[];
+    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
 };

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

@@ -32,6 +32,5 @@ export const CreateButton = styled(Button) `
   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;
-  margin: 10px;
   flex-shrink: 0;
 `;

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

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

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

@@ -102,6 +102,23 @@ export const useHomeMenu = () => {
     // }, [listDashboardName]);
     return {
         children: customChildren,
+        // children: [
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        //   ...customChildren,
+        // ],
         /* Callbacks */
         onCreateNewReport,
         onOptionCallback,

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

@@ -1,3 +1,3 @@
 export declare const useInsightsMenu: () => {
-    children: import("../../types").TMenuItem[];
+    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
 };

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

@@ -1,3 +1,3 @@
 export declare const useProfilesMenu: () => {
-    children: import("../../types").TMenuItem[];
+    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
 };

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

@@ -1,3 +1,3 @@
 export declare const useSettingsMenu: () => {
-    children: import("../../types").TMenuItem[];
+    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
 };

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

@@ -1,3 +1,3 @@
 export declare const useTemplatesMenu: () => {
-    children: import("../../types").TMenuItem[];
+    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
 };

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

@@ -51,10 +51,10 @@ export const ChildMenu = memo(props => {
         });
     };
     return (React.createElement(MenuWrapper, null,
-        React.createElement(Menu, { onClick: onClick, selectedKeys: [current], mode: "inline", items: customMenuItems({ items }), className: "child-menu", inlineIndent: 10, expandIcon: ({ isOpen }) => {
+        React.createElement(Menu, { onClick: onClick, selectedKeys: [current], mode: "inline", items: customMenuItems({ items }), inlineIndent: 10, expandIcon: ({ isOpen }) => {
                 var _a;
                 return (React.createElement(Icon, { type: "icon-ants-expand-more", style: {
-                        fontSize: 20,
+                        fontSize: ICON_SIZE,
                         color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8,
                         transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
                     } }));

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

@@ -1,22 +1,30 @@
 var _a;
-// Libararies
+// Libraries
 import styled from 'styled-components';
 // Components
 import { Typography } from '../../../../../atoms';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { ICON_SIZE } from '../../../constants';
 export const MenuWrapper = styled.div `
   width: 100%;
   height: 100%;
   background-color: transparent !important;
-  color: 12px !important;
+  font-size: 12px !important;
   font-weight: bold !important;
-  padding: 5px !important;
   border-right: none !important;
 
   & > ul {
     height: 100%;
-    overflow: auto;
+
+    li {
+      margin: 0 !important;
+      width: 100% !important;
+
+      [role='icon'] {
+        font-size: ${ICON_SIZE}px !important;
+      }
+    }
   }
 
   [role='menu'] {

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

@@ -8,12 +8,11 @@ import { Link } from 'react-router-dom';
 // Assets
 import SubLogoAntsomi from '@antscorp/antsomi-ui/es/assets/images/logo/sub-logo-antsomi.png';
 // Styled
-import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, FeatureMenuContainer, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, FeatureMenuWrapper, NavLogoWrapper, } from './styled';
+import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, } from './styled';
 // Constants
 import { ENV } from '@antscorp/antsomi-ui/es/config';
 import { FEATURE_KEYS, ICON_SIZE } from './constants';
 // Components
-import { Flex } from '../../atoms';
 import { ProfilesMenu, ContentMenu, DataMenu, MarketingMenu, HomeMenu, InsightsMenu, SettingsMenu, TemplatesMenu, } from './components';
 // Contexts
 import { LeftMenuProvider } from './contexts';
@@ -23,7 +22,7 @@ import { useLeftMenu } from './hooks';
 import { getGeneratePath } from './utils';
 export const LeftMenu = memo(props => {
     var _a;
-    const { objectType, objectId, style, className } = props;
+    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, style, className } = props;
     // Hooks
     const { 
     /* State */
@@ -86,29 +85,29 @@ export const LeftMenu = memo(props => {
             permissionMenu,
             objectType,
             objectId,
+            isGrouped,
         } },
         React.createElement(LeftMenuNavWrapper, { style: style, className: className },
             React.createElement(LeftMenuNav, null,
-                React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: () => onMouseEnter(state.activeItem) },
-                    React.createElement("div", { className: "image-wrapper" },
-                        React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
-                React.createElement(FeatureMenuWrapper, { isExpandMenu: state.isExpandMenu, onMouseLeave: onMouseLeave },
-                    React.createElement(FeatureMenuContainer, null,
-                        React.createElement(FeatureMenu, { role: "menu" },
-                            React.createElement(Flex, { justify: "space-between", vertical: true, style: { height: '100%' } },
-                                React.createElement("div", { className: "menu-content" }, (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.filter(item => item.menu_item_code !== FEATURE_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => renderFeatureMenuItems(item))),
-                                React.createElement("div", { className: "nav-blank", onMouseEnter: () => onMouseEnter(state.activeItem) })))),
-                    React.createElement(PopoverWrapper, { onMouseLeave: onMouseLeave }, childMenu)),
-                React.createElement(Flex, { vertical: true },
-                    React.createElement("div", null, (() => {
+                React.createElement(FeatureMenuWrapper, { isExpandMenu: state.isExpandMenu, vertical: true },
+                    React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: () => onMouseEnter(state.activeItem) },
+                        React.createElement("div", { className: "image-wrapper" },
+                            React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
+                    React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box", onMouseLeave: onMouseLeave },
+                        React.createElement("div", { className: "menu-content scroll-content" }, (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.filter(item => item.menu_item_code !== FEATURE_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => renderFeatureMenuItems(item))),
+                        React.createElement("div", { className: "nav-blank", onMouseEnter: () => onMouseEnter(state.activeItem) }),
+                        React.createElement(PopoverWrapper, { className: "antsomi-scroll-box", onMouseLeave: onMouseLeave },
+                            React.createElement("div", { className: "scroll-content" }, childMenu))),
+                    React.createElement("div", { style: { flexShrink: 0 } }, (() => {
                         const settingFeature = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === FEATURE_KEYS.SETTINGS);
                         return settingFeature ? renderFeatureMenuItems(settingFeature) : null;
-                    })()),
-                    React.createElement(ExpandWrapper, null,
-                        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 }, childMenu))));
+                    })())),
+                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, className: "antsomi-scroll-box" },
+                React.createElement("div", { className: "scroll-content" }, childMenu)))));
 });

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

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 export declare const PopoverWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ExpandWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FeatureMenuContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FeatureMenuWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const FeatureMenuWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
     isExpandMenu: boolean;
 }, never>;
+export declare const ExpandWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenuNavWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NavLogoWrapper: 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 LeftMenuNav: import("styled-components").StyledComponent<"nav", any, {}, never>;