@antscorp/antsomi-ui 1.3.5-beta.235 → 1.3.5-beta.237

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

@@ -11,7 +11,6 @@ export interface AccountListingProps {
     };
     showAllAccount?: boolean;
     currentAccount?: string | 'ALL_ACCOUNT';
-    onLabelChange?: (label: string) => void;
     onChange?: (userId: number | 'ALL_ACCOUNT') => void;
 }
 export declare const AccountListing: React.FC<AccountListingProps>;

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

@@ -7,7 +7,7 @@ import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount } from '../../..';
 export const AccountListing = props => {
-    const { className, apiConfig, showAllAccount = true, currentAccount, onLabelChange, onChange, } = props;
+    const { className, apiConfig, showAllAccount = true, currentAccount, onChange } = props;
     const { domain, token, userId, appCode, portalId } = apiConfig;
     const { data } = useGetAccountList({
         apiConfig,
@@ -48,21 +48,9 @@ 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]);
     const [searchValue, setSearchValue] = useState('');
-    // const currentAccountInfo = useMemo(
-    //   () => accountData?.find(account => String(account.userId) === currentAccount),
-    //   [accountData, currentAccount],
-    // );
     const isAllAccount = !currentAccount || currentAccount === 'ALL_ACCOUNT';
-    // useEffect(() => {
-    //   // HACK: this use for popover input label
-    //   const inputLabel = isAllAccount ? 'All account' : currentAccountInfo?.userName;
-    //   onLabelChange?.(inputLabel);
-    // }, [currentAccountInfo?.userName, isAllAccount, onLabelChange]);
     const handleSelectAccount = useCallback((userId) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(userId);
-        // const userInfo = accountData?.find(account => String(account.userId) === userId);
-        // const inputLabel = userId === 'ALL_ACCOUNT' ? 'All account' : userInfo?.userName;
-        // onLabelChange?.(inputLabel);
     }, [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) }),

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

@@ -24,6 +24,7 @@ export const AccountSelection = props => {
     // const [searchValue, setSearchValue] = useState<string>('');
     const { apiConfig, currentAccount } = props;
     const { domain, token, userId, appCode, portalId } = apiConfig;
+    // Queries
     const { data } = useGetAccountList({
         apiConfig,
         options: {
@@ -57,6 +58,7 @@ export const AccountSelection = props => {
         return (data === null || data === void 0 ? void 0 : data.entries) || [];
     }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
     const currentAccountInfo = useMemo(() => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => String(account.userId) === currentAccount), [accountData, currentAccount]);
+    /** If oid is null, default is 'ALL_ACCOUNT' */
     const isAllAccount = !currentAccount || currentAccount === 'ALL_ACCOUNT';
     useEffect(() => {
         const newLabel = isAllAccount ? 'All account' : currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName;
@@ -66,9 +68,7 @@ export const AccountSelection = props => {
         setOpen(false);
         onChange === null || onChange === void 0 ? void 0 : onChange(userId);
     }, [onChange]);
-    return (show && (React.createElement(Popover, { content: React.createElement(AccountListing, Object.assign({}, accountListingProps, { onChange: handleSelectAccount, onLabelChange: newLabel => setInputLabel(newLabel) })), trigger: "click", overlayInnerStyle: { padding: 0 }, 
-        // getPopupContainer={triggerNode => triggerNode}
-        getPopupContainer: getPopupContainer, placement: "bottomLeft", arrow: false, open: open, onOpenChange: setOpen, zIndex: zIndex || 1300 },
+    return (show && (React.createElement(Popover, { content: React.createElement(AccountListing, Object.assign({}, accountListingProps, { onChange: handleSelectAccount })), trigger: "click", overlayInnerStyle: { padding: 0 }, getPopupContainer: getPopupContainer, placement: "bottomLeft", arrow: false, open: open, onOpenChange: setOpen, zIndex: zIndex || 1300 },
         React.createElement(PopoverFieldStyled, { className: `${inputStyle || ''} ${inputClassName || ''}` },
             React.createElement(Tooltip, { title: inputLabel },
                 React.createElement("span", { className: !inputLabel ? 'is-placeholder' : '' }, inputLabel || 'Select an account')),

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 // Styled
 import { HeaderV2Styled } from './styled';
 // Components
@@ -34,22 +34,6 @@ export const HeaderV2 = memo(props => {
     const oidParam = urlParams.get('oid');
     // States
     const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam !== null && oidParam !== void 0 ? oidParam : '' : (_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : ''}`);
-    // Side effects
-    useEffect(() => {
-        if (!useURLParam)
-            return;
-        if (!oidParam) {
-            // urlParams.append('oid', 'ALL_ACCOUNT');
-            // urlParams.append('oid', `${currentAccount ?? userId ?? '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]);
     // Memo
     const accountSelectionDomain = useMemo(() => {
         var _a;
@@ -96,16 +80,18 @@ export const HeaderV2 = memo(props => {
         token,
         lang: language,
     };
+    // Handlers
+    const handleChangeAccount = (userId) => {
+        setSelectedAccount(String(userId));
+        if (useURLParam) {
+            urlParams.set('oid', `${userId}`);
+            history.replace({ search: urlParams.toString() });
+        }
+        onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(String(userId));
+    };
     return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
-            React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: userId => {
-                    setSelectedAccount(String(userId));
-                    if (useURLParam) {
-                        urlParams.set('oid', `${userId}`);
-                        history.replace({ search: urlParams.toString() });
-                    }
-                    onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(String(userId));
-                }, inputStyle: inputStyle })),
+            React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle })),
             typeof pageTitle === 'string' ? React.createElement("div", { className: "page-title" }, pageTitle) : pageTitle),
         React.createElement("div", { className: "right-side" },
             showHelp ? React.createElement(Help, Object.assign({ configs: helpConfigProps }, helpProps)) : null,

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js

@@ -32,6 +32,7 @@ export const TemplateSaveAs = props => {
     const form = formProps || internalForm;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
     const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
+    console.log('🚀 ~ restImageReviewProps:', restImageReviewProps);
     const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', validateName, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
     const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
     const { saveNewText = 'Save as a new media template', saveExistText = 'Save as an existing media template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.d.ts

@@ -4,6 +4,7 @@ interface BigImageProps {
     showSkeleton?: boolean;
     isDefaultThumbnail?: boolean;
     isHideDefaultButton?: boolean;
+    imageFit?: React.CSSProperties['objectFit'];
     index: number;
     onClickDefaultButton?: (index: number) => void;
 }

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.js

@@ -4,13 +4,13 @@ import { Button } from '@antscorp/antsomi-ui/es/components';
 import Icon from '@antscorp/icons';
 import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
 export const BigImage = React.memo(props => {
-    const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, onClickDefaultButton, } = props;
+    const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, imageFit, onClickDefaultButton, } = props;
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
     const urlNoCache = getUrlNoCache(url, timeGenerated);
     const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
     return (React.createElement("div", { className: `image-container--big ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
-        url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache })) : null,
+        url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache, style: { objectFit: imageFit } })) : null,
         isHideDefaultButton ? null : (React.createElement(Button, { className: "set-default-button", onClick: () => onClickDefaultButton && onClickDefaultButton(index) },
             isDefaultThumbnail ? React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } }) : null,
             isDefaultThumbnail ? 'Default thumbnail' : 'Set as default'))));

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts

@@ -11,6 +11,7 @@ export interface ImageSliderProps {
     imageWidth?: number;
     imageHeight?: number;
     infinity?: boolean;
+    thumbnailFit?: React.CSSProperties['objectFit'];
     /**
      * Default thumbnail - order of default thumbnail in thumbnails array
      */

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -12,7 +12,7 @@ const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createE
         : `change-preview-button change-preview-button--${direction}`, onClick: onClick },
     React.createElement(Icon, { type: `icon-ants-angle-${direction}` }))));
 export const ImageSlider = props => {
-    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, onSelectDefault, } = props;
+    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, thumbnailFit, onSelectDefault, } = props;
     const sliderContainerRef = useRef(null);
     const thumbnailSelectedRef = useRef(null);
     const smallImageWidth = useMemo(() => imageWidth / slidesPerView - (10 * (slidesPerView - 1)) / slidesPerView, [imageWidth, slidesPerView]);
@@ -55,8 +55,8 @@ export const ImageSlider = props => {
         }
     }, [onSelectDefault]);
     return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
-        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: skeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1, onClickDefaultButton: handleClickDefault }))))),
-        hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { key: `${url}_${index * 2}`, showSkeleton: skeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
+        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: skeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault }))))),
+        hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { imageFit: thumbnailFit, key: `${url}_${index * 2}`, showSkeleton: skeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
         previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
             React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
             React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.d.ts

@@ -4,6 +4,7 @@ interface SmallImageProps {
     isSelected?: boolean;
     index: number;
     showSkeleton?: boolean;
+    imageFit?: React.CSSProperties['objectFit'];
     onClick?: (index: number) => void;
 }
 export declare const SmallImage: React.FC<SmallImageProps>;

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.js

@@ -2,12 +2,12 @@ import React, { useMemo } from 'react';
 import { Image } from 'antd';
 import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
 export const SmallImage = React.memo(props => {
-    const { url, isSelected, index, onClick, showSkeleton } = props;
+    const { url, isSelected, index, imageFit, showSkeleton, onClick } = props;
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
     const urlNoCache = getUrlNoCache(url, timeGenerated);
     const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
-    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''} ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", 
+    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''} ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", style: { objectFit: imageFit }, 
         // src={imageUrl}
         // src={url}
         src: urlNoCache })) : null));

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -32,7 +32,7 @@ import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es
 const cacheValue = new Date().getTime();
 export const ThumbnailCard = memo(props => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
     const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
     const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
     const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
@@ -60,7 +60,7 @@ export const ThumbnailCard = memo(props => {
     };
     return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
         React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
-            React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: getUrlNoCache(thumbnail, cacheValue), alt: "" })),
+            React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, cacheValue), alt: "", style: { objectFit: thumbnailFit } }))),
             actionAvailable && !loading && (React.createElement(React.Fragment, null,
                 React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
                     React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {

package/es/components/molecules/ThumbnailCard/types.d.ts

@@ -1,5 +1,5 @@
 import { ModalFuncProps, ButtonProps } from 'antd';
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 export type TThumbnailCardId = string | number;
 export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
     onOk?: (id: TThumbnailCardId) => void;
@@ -21,5 +21,6 @@ export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     previewBtnProps?: TThumbnailButton;
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
+    thumbnailFit?: React.CSSProperties['objectFit'];
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CustomMenuProps {
+    onMenuItemClick?: (key: string, keyPath: string[]) => void;
+}
+export declare const CustomMenu: React.FC<CustomMenuProps>;
+export {};

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

@@ -0,0 +1,14 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Hooks
+import { useLeftMenuStore } from '../../stores';
+export const CustomMenu = memo(({ onMenuItemClick }) => {
+    const appCustomMenuChildren = useLeftMenuStore(store => store.state.customMenuChildren);
+    const customActiveAppKey = useLeftMenuStore(store => store.state.customActiveAppKey);
+    const handleMenuItemClick = (key, keyPath) => {
+        onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [...keyPath, customActiveAppKey]);
+    };
+    return React.createElement(ChildMenu, { items: appCustomMenuChildren, onMenuClick: handleMenuItemClick });
+});

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

@@ -14,44 +14,60 @@ import { IconWrapper } from '../../../styled';
 // Constants
 import { ICON_SIZE } from '../../../constants';
 // Utils
-import { findActiveAppCodeByUrl, findLastMatchedItemByUrl } from '../../../utils';
+import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, getMenuItem } from '../../../utils';
 import { recursiveFindParentOfActiveItem } from './utils';
-import { random } from '@antscorp/antsomi-ui/es/utils';
 // Hooks
 import { useLeftMenuStore } from '../../../stores';
-import { useNavigatePath } from '../../../hooks/useNavigatePath';
+import { useNavigatePath } from '../../../hooks';
 export const ChildMenu = memo(props => {
     const { items = [], parentKey, 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);
+    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);
     // States
     const [currentActiveItem, setCurrentActiveItem] = useState('');
     const [openKeys, setOpenKeys] = useState([]);
-    // Variables
-    const randomMenuWrapperId = random(10);
     // Hooks
     const { pathname, hash } = window.location;
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     // Side Effects
     useEffect(() => {
         var _a;
-        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);
+        if (isCustomized) {
+            setCurrentActiveItem(customActiveCurrentKey);
             /** Find parent key of active menu item to open it */
-            const parentKey = recursiveFindParentOfActiveItem({ activeMenuItem, menuItems });
+            const parentKey = recursiveFindParentOfActiveItem({
+                activeMenuItem: customActiveCurrentKey,
+                menuItems: customItems,
+            });
             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 });
+        }
+        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 });
+                }
             }
         }
     }, [
@@ -64,6 +80,9 @@ export const ChildMenu = memo(props => {
         activeAppCode,
         menuItems,
         setLeftMenuState,
+        isCustomized,
+        customActiveCurrentKey,
+        customItems,
     ]);
     // Handlers
     const onClick = e => {
@@ -95,7 +114,7 @@ export const ChildMenu = memo(props => {
             };
         });
     };
-    return (React.createElement(MenuWrapper, { className: "child-menu", id: randomMenuWrapperId },
+    return (React.createElement(MenuWrapper, null,
         React.createElement(Menu, { selectedKeys: [currentActiveItem], defaultOpenKeys: [currentActiveItem], openKeys: uniq(openKeys), mode: "inline", items: customMenuItems({ items }), inlineIndent: 10, onOpenChange: openKeys => {
                 setOpenKeys(openKeys);
             }, expandIcon: ({ isOpen }) => (React.createElement(Icon, { type: "icon-ants-expand-more", style: {

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

@@ -1,5 +1,6 @@
 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
@@ -21,10 +22,10 @@ export declare const findActiveMenuItemByUrl: (args: {
  * 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 {TFeatureMenu[]} args.menuItems - The array of menu items to search within.
+ * @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: TFeatureMenu[];
+    menuItems: TMenuItem[];
 }) => string | undefined;

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

@@ -55,7 +55,7 @@ export const findActiveMenuItemByUrl = (args) => {
  * 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 {TFeatureMenu[]} args.menuItems - The array of menu items to search within.
+ * @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 const recursiveFindParentOfActiveItem = (args) => {
@@ -64,9 +64,9 @@ export const recursiveFindParentOfActiveItem = (args) => {
         const { activeMenuItem, menuItems } = args;
         let parentKey;
         for (const item of menuItems) {
-            const isHasActiveMenuItem = !!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.find(child => child.menu_item_code === activeMenuItem));
+            const isHasActiveMenuItem = !!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.find(child => child.key === activeMenuItem));
             if (isHasActiveMenuItem) {
-                parentKey = item.menu_item_code;
+                parentKey = item.key;
                 break;
             }
             const findNestedParentKey = recursiveFindParentOfActiveItem({

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

@@ -6,3 +6,4 @@ export { MarketingMenu } from './MarketingMenu';
 export { InsightsMenu } from './InsightsMenu';
 export { TemplatesMenu } from './TemplatesMenu';
 export { SettingsMenu } from './SettingsMenu';
+export { CustomMenu } from './CustomMenu';

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

@@ -6,3 +6,4 @@ export { MarketingMenu } from './MarketingMenu';
 export { InsightsMenu } from './InsightsMenu';
 export { TemplatesMenu } from './TemplatesMenu';
 export { SettingsMenu } from './SettingsMenu';
+export { CustomMenu } from './CustomMenu';

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

@@ -2,3 +2,4 @@ import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 import { TMenuItem } from '../types';
 export declare const MENU_ITEMS: TMenuItem[];
 export declare const MENU_SAMPLE: TFeatureMenu[];
+export declare const CUSTOM_MENU_ITEMS: TMenuItem[];

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

@@ -983,3 +983,93 @@ export const MENU_SAMPLE = [
         ],
     },
 ];
+export const CUSTOM_MENU_ITEMS = [
+    {
+        key: 'survey',
+        label: 'Survey',
+        icon: 'icon-ants-survey-v2',
+        children: [
+            {
+                key: 'ANALYSIS',
+                label: 'Analysis',
+                icon: null,
+                children: [
+                    {
+                        key: 'SQL_WORKSPACE',
+                        label: 'SQL Workspace',
+                        icon: null,
+                    },
+                    {
+                        key: 'EXPLORE',
+                        label: 'Explore',
+                        icon: null,
+                    },
+                    {
+                        key: 'SCHEDULE_QUERY',
+                        label: 'Schedule Query',
+                        icon: null,
+                    },
+                ],
+            },
+            {
+                label: 'Reports',
+                icon: null,
+                key: 'REPORT',
+            },
+            {
+                key: 'DATA_SOURCE',
+                label: 'Data Sources',
+                icon: null,
+            },
+            {
+                key: 'GALLERY',
+                label: 'Gallery',
+                icon: null,
+            },
+        ],
+    },
+    {
+        key: 'data',
+        label: 'Data',
+        icon: 'icon-ants-survey-data',
+        children: [
+            {
+                key: 'COUPON',
+                label: 'Coupons',
+                icon: 'icon-ants-coupons',
+            },
+            {
+                label: 'Short Links',
+                icon: 'icon-ants-short-link',
+                key: 'SHORT_LINK',
+            },
+        ],
+    },
+    {
+        key: 'report',
+        label: 'Report',
+        icon: 'icon-ants-overview',
+        children: [
+            {
+                label: 'Overview',
+                icon: 'icon-ants-overview',
+                key: 'JOURNEY_OVERVIEW',
+            },
+            {
+                key: 'ALL_CHANNEL',
+                label: 'All Channels',
+                icon: 'icon-ants-window',
+            },
+            {
+                key: 'CAMPAIGN',
+                label: 'Campaigns',
+                icon: 'icon-ants-campaign',
+            },
+            {
+                key: 'ORCHESTRATION',
+                label: 'Orchestration',
+                icon: 'icon-ants-orchestration',
+            },
+        ],
+    },
+];

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

@@ -1 +1,2 @@
 export { useLeftMenu } from './useLeftMenu';
+export { useNavigatePath } from './useNavigatePath';

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

@@ -1 +1,2 @@
 export { useLeftMenu } from './useLeftMenu';
+export { useNavigatePath } from './useNavigatePath';

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

@@ -7,8 +7,11 @@ 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;
     onMouseLeave: () => void;
+    onHoverMenuBar: () => void;
 };
 export {};

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

@@ -4,7 +4,7 @@ import { isArray, sortBy } from 'lodash';
 // Queries
 import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMenuPermission, } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 // Utils
-import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, findPathOfActiveItem, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
+import { findActiveAppCodeByChild, findActiveAppCodeByUrl, findLastMatchedItemByUrl, findPathOfActiveItem, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
 // Store
 import { useLeftMenuStore } from '../stores';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants/postMessage';
@@ -14,12 +14,13 @@ const initialState = {
 };
 export const useLeftMenu = (props) => {
     // Props
-    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, appConfig, onActiveMenuCodeChange, } = props;
+    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, appConfig, customization, onActiveMenuCodeChange, } = props;
+    const { isExpandable = true, isCustomized = false, items, activeKey } = customization || {};
     // Hooks
     const { pathname, hash } = window.location;
-    console.log({ pathname, hash, locationWindow: window.location });
     // Stores
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
+    const customActiveAppKey = useLeftMenuStore(store => store.state.customActiveAppKey);
     const setLeftMenuState = useLeftMenuStore(store => store.setState);
     // Destructuring variables
     const { auth, languageCode } = appConfig || {};
@@ -112,37 +113,71 @@ export const useLeftMenu = (props) => {
     // Side Effects
     // Receive Post Message
     useEffect(() => {
-        window.addEventListener('message', receivePostMessage);
-        return () => window.removeEventListener('message', receivePostMessage);
+        if (!isCustomized) {
+            window.addEventListener('message', receivePostMessage);
+            return () => window.removeEventListener('message', receivePostMessage);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        if (appConfig)
-            setLeftMenuState({ appConfig });
-    }, [appConfig, setLeftMenuState]);
+        setLeftMenuState({ appConfig, isCustomized });
+    }, [appConfig, isCustomized, setLeftMenuState]);
+    /**
+     * Active Custom App Key when active key is changed
+     */
+    useEffect(() => {
+        if (activeKey && items)
+            setLeftMenuState({
+                customActiveAppKey: findActiveAppCodeByChild({
+                    activeCurrentKey: activeKey,
+                    menuItems: items,
+                }) || '',
+                customActiveCurrentKey: activeKey,
+            });
+    }, [activeKey, appConfig, isCustomized, items, setLeftMenuState]);
     /**
      * Change list menu children when hovering or activating items, giving priority to hovering items
      */
     useEffect(() => {
-        var _a;
-        const appCode = state.hoverItem ? state.hoverItem : activeAppCode;
-        if (isArray(mappingChildrenMenu)) {
+        var _a, _b;
+        if (isCustomized) {
+            const appActiveKey = state.hoverItem ? state.hoverItem : customActiveAppKey;
             setLeftMenuState({
-                menuItems: mappingChildrenMenu,
-                appMenuChildren: ((_a = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appCode)) === null || _a === void 0 ? void 0 : _a.children) || [],
+                customItems: items,
+                customMenuChildren: ((_a = items === null || items === void 0 ? void 0 : items.find(item => item.key === appActiveKey)) === null || _a === void 0 ? void 0 : _a.children) || [],
             });
         }
-    }, [activeAppCode, mappingChildrenMenu, state.hoverItem, setLeftMenuState]);
+        else {
+            const appCode = state.hoverItem ? state.hoverItem : activeAppCode;
+            if (isArray(mappingChildrenMenu)) {
+                setLeftMenuState({
+                    menuItems: mappingChildrenMenu,
+                    appMenuChildren: ((_b = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appCode)) === null || _b === void 0 ? void 0 : _b.children) || [],
+                });
+            }
+        }
+    }, [
+        isCustomized,
+        activeAppCode,
+        mappingChildrenMenu,
+        state.hoverItem,
+        setLeftMenuState,
+        items,
+        customActiveAppKey,
+    ]);
     /**
      * Active App Item having code matching url
      */
     useEffect(() => {
-        const url = `${pathname}${hash}`;
-        const matchAppCode = findActiveAppCodeByUrl({ url, menuItems: mappingChildrenMenu, auth });
-        if (matchAppCode && matchAppCode !== activeAppCode) {
-            setLeftMenuState({ activeAppCode: matchAppCode });
+        if (!isCustomized) {
+            const url = `${pathname}${hash}`;
+            const matchAppCode = findActiveAppCodeByUrl({ url, menuItems: mappingChildrenMenu, auth });
+            if (matchAppCode && matchAppCode !== activeAppCode) {
+                setLeftMenuState({ activeAppCode: matchAppCode });
+            }
         }
     }, [
+        isCustomized,
         activeAppCode,
         appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth,
         auth,
@@ -157,34 +192,47 @@ export const useLeftMenu = (props) => {
      */
     useEffect(() => {
         var _a;
-        const url = `${pathname}${hash}`;
-        const matchedCode = (_a = findLastMatchedItemByUrl({
-            url,
-            menuItems: mappingChildrenMenu,
-            auth,
-        })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
-        const activeItemPath = matchedCode
-            ? findPathOfActiveItem({
-                activeMenuItem: matchedCode,
+        if (!isCustomized) {
+            const url = `${pathname}${hash}`;
+            const matchedCode = (_a = findLastMatchedItemByUrl({
+                url,
                 menuItems: mappingChildrenMenu,
-            })
-            : [];
-        onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission);
-    }, [auth, flattenMenuPermission, hash, mappingChildrenMenu, onActiveMenuCodeChange, pathname]);
+                auth,
+            })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
+            const activeItemPath = matchedCode
+                ? findPathOfActiveItem({
+                    activeMenuItem: matchedCode,
+                    menuItems: mappingChildrenMenu,
+                })
+                : [];
+            onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission);
+        }
+    }, [
+        isCustomized,
+        auth,
+        flattenMenuPermission,
+        hash,
+        mappingChildrenMenu,
+        onActiveMenuCodeChange,
+        pathname,
+    ]);
     /* Callbacks */
     const onToggleChildMenu = useCallback(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
     }, []);
     const onMouseEnter = useCallback((key) => {
-        if (!state.isExpandMenu) {
+        if (!state.isExpandMenu || !isExpandable) {
             setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: key })));
         }
-    }, [state.isExpandMenu]);
+    }, [isExpandable, state.isExpandMenu]);
     const onMouseLeave = useCallback(() => {
-        if (!state.isExpandMenu) {
+        if (!state.isExpandMenu || !isExpandable) {
             setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
         }
-    }, [state.isExpandMenu]);
+    }, [isExpandable, state.isExpandMenu]);
+    const onHoverMenuBar = () => {
+        onMouseEnter(isCustomized ? customActiveAppKey : activeAppCode);
+    };
     return {
         /* State */
         state,
@@ -192,9 +240,12 @@ export const useLeftMenu = (props) => {
         activeAppCode,
         /* Data Queries */
         permissionMenu,
+        /** Variables */
+        customActiveAppKey,
         /* Callbacks */
         onToggleChildMenu,
         onMouseEnter,
         onMouseLeave,
+        onHoverMenuBar,
     };
 };

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

@@ -37,13 +37,11 @@ export const useNavigatePath = () => {
             const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
             return getGeneratePath(customPath, auth);
         }
-        return `${getGeneratePath(path !== null && path !== void 0 ? path : '', auth)}`;
-        // return `${getGeneratePath(path ?? '', auth)}${searchParams}`;
+        return getGeneratePath(`${path !== null && path !== void 0 ? path : ''}${searchParams}`, auth);
     }, [auth, searchParams]);
     const navigatePath = useCallback((domain, path) => {
         const newDomain = isNil(domain) || env === ENV.DEV ? '' : domain;
-        window.location.assign(`${getGeneratePath(`${newDomain}${path}`, auth)}`);
-        // window.location.assign(`${getGeneratePath(`${newDomain}${path}`, auth)}${searchParams}`);
+        window.location.assign(getGeneratePath(`${newDomain}${path}${searchParams}`, auth));
     }, [auth, env, searchParams]);
     return { isPushDifferentDomain, getPath, navigatePath };
 };

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

@@ -10,9 +10,13 @@ export interface LeftMenuProps {
     isGrouped?: boolean;
     style?: React.CSSProperties;
     className?: string;
-    isExpandable?: boolean;
-    items?: TMenuItem[];
-    isCustomized?: boolean;
+    customization?: {
+        isCustomized?: boolean;
+        isExpandable?: boolean;
+        items?: TMenuItem[];
+        activeKey?: string;
+        onMenuItemClick?: (key: string, keyPath: string[]) => void;
+    };
     onActiveMenuCodeChange?: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[]) => void;
 }
 export declare const LeftMenu: React.FC<LeftMenuProps>;

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

@@ -1,5 +1,5 @@
 // Libraries
-import React, { memo, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import Icon from '@antscorp/icons';
 import { Typography } from 'antd';
 import classNames from 'classnames';
@@ -8,17 +8,16 @@ 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, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, } from './styled';
+import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, IconWrapper, } from './styled';
 // Constants
-import { APP_KEYS, ICON_SIZE } from './constants';
+import { APP_KEYS } from './constants';
 // Components
-import { ProfilesMenu, ContentMenu, DataMenu, MarketingMenu, HomeMenu, InsightsMenu, SettingsMenu, TemplatesMenu, } from './components';
+import { ProfilesMenu, ContentMenu, DataMenu, MarketingMenu, HomeMenu, InsightsMenu, SettingsMenu, TemplatesMenu, CustomMenu, } from './components';
 // Hooks
-import { useLeftMenu } from './hooks';
-import { useNavigatePath } from './hooks/useNavigatePath';
+import { useLeftMenu, useNavigatePath } from './hooks';
 export const LeftMenu = memo(props => {
-    var _a;
-    const { style, className, isExpandable = true, isCustomized = false } = props;
+    const { style, className, customization } = props;
+    const { isExpandable = true, isCustomized = false, items = [], onMenuItemClick, } = customization || {};
     // Hooks
     const { 
     /* State */
@@ -27,12 +26,16 @@ export const LeftMenu = memo(props => {
     activeAppCode, 
     /* Data Queries */
     permissionMenu, 
+    /** Variables */
+    customActiveAppKey, 
     /* Callbacks */
-    onToggleChildMenu, onMouseEnter, onMouseLeave, } = useLeftMenu(props);
+    onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, } = useLeftMenu(props);
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     // Memo
     const childMenu = useMemo(() => {
         const selectedFeatureKey = state.hoverItem ? state.hoverItem : activeAppCode;
+        if (isCustomized)
+            return React.createElement(CustomMenu, { onMenuItemClick: onMenuItemClick });
         switch (selectedFeatureKey) {
             case APP_KEYS.HOME: {
                 return React.createElement(HomeMenu, null);
@@ -61,38 +64,54 @@ export const LeftMenu = memo(props => {
             default:
                 return null;
         }
-    }, [activeAppCode, state.hoverItem]);
+    }, [activeAppCode, isCustomized, onMenuItemClick, state.hoverItem]);
     // Render components
-    const renderFeatureMenuItems = (item) => {
+    const renderFeatureMenuItems = useCallback((item) => {
         const { menu_item_name, menu_item, icon_name, menu_item_code, menu_item_path, menu_item_domain, } = item;
         const isActive = activeAppCode === menu_item_code;
         const isHover = state.hoverItem === menu_item_code;
         const labelComponent = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
-            React.createElement("div", { className: "icon-wrapper" }, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name, style: { fontSize: ICON_SIZE } })),
+            React.createElement(IconWrapper, null, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name })),
             React.createElement(Typography.Text, null, menu_item_name),
             React.createElement("div", { className: "popup-triangle" })));
         return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path) }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, labelComponent()))) : (labelComponent())));
+    }, [activeAppCode, getPath, isPushDifferentDomain, navigatePath, 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 }) },
+                React.createElement(IconWrapper, null, isNil(icon) ? null : React.createElement(Icon, { type: icon })),
+                React.createElement(Typography.Text, null, label),
+                isExpandable && React.createElement("div", { className: "popup-triangle" }))));
+    }), [customActiveAppKey, state.hoverItem, isExpandable, onMenuItemClick, onMouseEnter]);
+    const renderAppMenuItems = useCallback(() => {
+        var _a;
+        return isCustomized
+            ? 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 => renderFeatureMenuItems(item));
+    }, [isCustomized, items, permissionMenu, renderCustomizedMenuItems, renderFeatureMenuItems]);
+    const renderSettings = () => {
+        if (!isCustomized) {
+            const settingApp = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === APP_KEYS.SETTINGS);
+            if (settingApp)
+                return renderFeatureMenuItems(settingApp);
+        }
+        return null;
     };
-    // const renderCustomizedMenuItems = (items: TMenuItem) => {
-    //   return items?.map(item => {
-    //     return <FeatureMenuItem key={menu_item} onMouseEnter={() => onMouseEnter(menu_item_code)} />;
-    //   });
-    // };
     return (React.createElement(LeftMenuNavWrapper, { style: style, className: className },
         React.createElement(LeftMenuNav, null,
             React.createElement(FeatureMenuWrapper, { isExpandMenu: state.isExpandMenu, vertical: true },
-                React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: () => onMouseEnter(activeAppCode) },
+                React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar },
                     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 !== APP_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => renderFeatureMenuItems(item))),
-                    React.createElement("div", { className: "nav-blank", onMouseEnter: () => onMouseEnter(activeAppCode) }),
+                    React.createElement("div", { className: "menu-content scroll-content" }, renderAppMenuItems()),
+                    React.createElement("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }),
                     React.createElement(PopoverWrapper, { className: "antsomi-scroll-box antsomi-child-menu-popover", 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 === APP_KEYS.SETTINGS);
-                    return settingFeature ? renderFeatureMenuItems(settingFeature) : null;
-                })())),
+                React.createElement("div", { style: { flexShrink: 0 } }, renderSettings())),
             isExpandable && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
                 React.createElement(Icon, { type: "icon-ants-expand-more", style: {
                         cursor: 'pointer',

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

@@ -1,10 +1,16 @@
 import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 import { AppConfigProviderProps } from '@antscorp/antsomi-ui/es/providers';
+import { TMenuItem } from '../types';
 export interface LeftMenuState {
     activeAppCode: string;
+    customActiveAppKey: string;
+    customActiveCurrentKey: string;
     menuItems: TFeatureMenu[];
+    customItems: TMenuItem[];
+    customMenuChildren: TMenuItem[];
     appMenuChildren: TFeatureMenu[];
     appConfig?: AppConfigProviderProps;
+    isCustomized?: boolean;
 }
 interface LeftMenuStore {
     state: LeftMenuState;

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

@@ -1,6 +1,15 @@
 // Libraries
 import { create } from 'zustand';
-const initialState = { activeAppCode: '', menuItems: [], appMenuChildren: [] };
+const initialState = {
+    activeAppCode: '',
+    customActiveAppKey: '',
+    customActiveCurrentKey: '',
+    menuItems: [],
+    appMenuChildren: [],
+    customItems: [],
+    customMenuChildren: [],
+    isCustomized: false,
+};
 export const useLeftMenuStore = create(set => ({
     state: initialState,
     setState: newState => set(store => ({ state: Object.assign(Object.assign({}, store.state), newState) })),

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

@@ -129,14 +129,6 @@ export const FeatureMenuItem = styled.div `
       display: none !important;
     }
 
-    .icon-wrapper {
-      height: 30px;
-      width: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
     span {
       font-size: 11px !important;
       font-weight: 500;
@@ -198,6 +190,6 @@ export const IconWrapper = styled.div `
   align-items: center;
 
   i {
-    font-size: ${ICON_SIZE};
+    font-size: ${ICON_SIZE}px;
   }
 `;

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

@@ -39,6 +39,25 @@ export declare const getComparePath: (path: string) => string;
  * @returns {TFeatureMenu} The initial feature menu item object.
  */
 export declare const getInitialFeatureMenuItem: (featureMenuItem: Partial<TFeatureMenu>) => TFeatureMenu;
+export declare const recursiveGetInitialFeatureMenuItem: (featureMenuItem: Partial<TFeatureMenu>) => {
+    menu_item: string | number;
+    network_id: number;
+    menu_item_name: string;
+    level_position: string | number;
+    icon_name: string | null;
+    menu_item_path: string | null;
+    menu_item_code: string;
+    permission_code: string | null;
+    menu_item_type: string | number;
+    menu_item_parent: string | number;
+    render_option: string | null;
+    menu_item_domain: string | null;
+    total_row: number;
+    ctime: string | null;
+    utime: string | null;
+    logo_url?: string | undefined;
+    children?: TFeatureMenu[] | undefined;
+};
 /** Map children to each App Item */
 export declare const getMappingAppChildren: (args: {
     menuList: TFeatureMenu[];
@@ -68,3 +87,15 @@ export declare const findPathOfActiveItem: (args: {
     activeMenuItem: string;
     menuItems: TFeatureMenu[];
 }) => TFeatureMenu[];
+/**
+ * Finds the app code of the menu item or its parent based on the provided active key.
+ *
+ * @param {Object} args - The arguments object.
+ * @param {string} args.activeCurrentKey - The key of the currently active menu item.
+ * @param {TMenuItem[]} args.menuItems - The array of menu items to search through.
+ * @returns {string | undefined} - The app code of the matching menu item or its parent, or undefined if not found.
+ */
+export declare const findActiveAppCodeByChild: (args: {
+    activeCurrentKey: string;
+    menuItems: TMenuItem[];
+}) => string | undefined;

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

@@ -105,6 +105,7 @@ export const getComparePath = (path) => {
  * @returns {TFeatureMenu} The initial feature menu item object.
  */
 export const getInitialFeatureMenuItem = (featureMenuItem) => (Object.assign({ menu_item: '', network_id: -1, menu_item_name: '', level_position: 0, icon_name: null, menu_item_path: null, menu_item_code: '', permission_code: null, menu_item_type: 3, menu_item_parent: 0, render_option: null, menu_item_domain: null, total_row: 0, ctime: null, utime: null }, featureMenuItem));
+export const recursiveGetInitialFeatureMenuItem = (featureMenuItem) => (Object.assign({ menu_item: '', network_id: -1, menu_item_name: '', level_position: 0, icon_name: null, menu_item_path: null, menu_item_code: '', permission_code: null, menu_item_type: 3, menu_item_parent: 0, render_option: null, menu_item_domain: null, total_row: 0, ctime: null, utime: null }, featureMenuItem));
 /** Map children to each App Item */
 export const getMappingAppChildren = (args) => {
     const { menuList, dashboardData, auth, destinationChannelEntries } = args;
@@ -270,3 +271,52 @@ export const findPathOfActiveItem = (args) => {
         return [];
     }
 };
+/**
+ * Finds the app code of the menu item or its parent based on the provided active key.
+ *
+ * @param {Object} args - The arguments object.
+ * @param {string} args.activeCurrentKey - The key of the currently active menu item.
+ * @param {TMenuItem[]} args.menuItems - The array of menu items to search through.
+ * @returns {string | undefined} - The app code of the matching menu item or its parent, or undefined if not found.
+ */
+export const findActiveAppCodeByChild = (args) => {
+    try {
+        const { activeCurrentKey, menuItems } = args;
+        let matchAppCode;
+        const recursiveCheckHasActiveChild = (items) => {
+            let matchAppCode = false;
+            for (const item of items) {
+                if (item.key === activeCurrentKey) {
+                    matchAppCode = true;
+                    break;
+                }
+                if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
+                    matchAppCode = recursiveCheckHasActiveChild(item.children);
+                    if (matchAppCode) {
+                        break;
+                    }
+                }
+            }
+            return matchAppCode;
+        };
+        for (const menuItem of menuItems) {
+            if (menuItem.key === activeCurrentKey) {
+                matchAppCode = activeCurrentKey;
+                break;
+            }
+            const hasActiveChild = recursiveCheckHasActiveChild((menuItem === null || menuItem === void 0 ? void 0 : menuItem.children) || []);
+            if (hasActiveChild) {
+                matchAppCode = menuItem.key;
+                break;
+            }
+        }
+        return matchAppCode;
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: findActiveAppCodeByChild.name,
+            args,
+        });
+    }
+};

package/es/providers/AppConfigProvider/contexts/index.d.ts

@@ -1,14 +1,17 @@
 import React from 'react';
 import { PayloadInfo } from '../../..';
 import { envType } from '@antscorp/antsomi-ui/es/types/config';
-export interface AppConfigProviderProps {
+export interface AppConfigProps {
     env?: envType;
     auth?: Omit<PayloadInfo, 'url'>;
     appCode?: string;
     languageCode?: string;
     urlLogout?: string;
+    setAppConfig: React.Dispatch<React.SetStateAction<AppConfigProviderProps>>;
 }
-declare const AppConfigContext: import("use-context-selector").Context<AppConfigProviderProps>;
+export interface AppConfigProviderProps extends Omit<AppConfigProps, 'setAppConfig'> {
+}
+declare const AppConfigContext: import("use-context-selector").Context<AppConfigProps>;
 declare const AppConfigProvider: React.FC<React.PropsWithChildren<{
     value?: AppConfigProviderProps;
 }>>;

package/es/providers/AppConfigProvider/contexts/index.js

@@ -1,10 +1,13 @@
 // Libraries
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { createContext } from 'use-context-selector';
-const initialContext = {};
+import { merge } from 'lodash';
+const initialContext = { setAppConfig: () => { } };
 const AppConfigContext = createContext(initialContext);
 const AppConfigProvider = props => {
     const { value = initialContext, children } = props;
-    return React.createElement(AppConfigContext.Provider, { value: value }, children);
+    const [appConfig, setAppConfig] = useState(value);
+    const mergedValue = useMemo(() => (Object.assign(Object.assign({}, merge(value, appConfig)), { setAppConfig })), [appConfig, value]);
+    return React.createElement(AppConfigContext.Provider, { value: mergedValue }, children);
 };
 export { AppConfigContext, AppConfigProvider };

package/es/providers/AppConfigProvider/selector.d.ts

@@ -1,3 +1,3 @@
 export declare const useAppConfigContext: () => {
-    appConfig: import("./contexts").AppConfigProviderProps;
+    appConfig: import("./contexts").AppConfigProps;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.235",
+  "version": "1.3.5-beta.237",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",