@antscorp/antsomi-ui 1.3.5-beta.403 → 1.3.5-beta.404

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

@@ -14,7 +14,7 @@ export declare const useAccountSelection: (apiConfig: {
     appCode?: string;
     menuCode?: string;
 }) => {
-    recentData?: AccountRecent | undefined;
+    recentData?: AccountRecent;
     accountData: Array<AccountData>;
 };
 export {};

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[] | undefined;
-    itemTypeId?: number | undefined;
-    listAttribute?: any[] | undefined;
-    field?: string | undefined;
+    listBO?: any[];
+    itemTypeId?: number;
+    listAttribute?: any[];
+    field?: string;
 }) => {
     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) | undefined) => {
+export declare const changeRangeType: (rangeType: string, callback?: (rangeInfo: RangeInfo) => void) => {
     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("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ReducerState;
-    action: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ActionType;
+    state: import("../types").ReducerState;
+    action: import("../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 | undefined;
+    limitNumOfDays?: number;
 }) => 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 | undefined;
+    id?: number;
 }) => {
     mode: "auto" | "manual";
     id: number;

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.d.ts

@@ -15,6 +15,7 @@ export interface AdvancedPickerProps {
     format?: string;
     formatInputDisplay?: string;
     inputStyle?: React.CSSProperties;
+    popupStyle?: React.CSSProperties;
     disableAfterDate?: string;
     disableBeforeDate?: string;
     errorMessage?: string;

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -1,3 +1,4 @@
+var _a, _b;
 /* eslint-disable react/no-unused-prop-types */
 // Libraries
 import React, { useEffect, useMemo, useCallback, useState } from 'react';
@@ -29,7 +30,7 @@ const { Text } = Typography;
 export const AdvancedPicker = props => {
     var _a, _b;
     // Props
-    const { label, inputStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onUpdatedNewDate, onApply, } = props;
+    const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onUpdatedNewDate, onApply, } = props;
     // Memo
     const newDateTypes = useMemo(() => {
         if (dateTypeKeysShow && dateTypeKeysShow.length) {
@@ -386,7 +387,7 @@ export const AdvancedPicker = props => {
         !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
         option.dateType.value === 'fixed' &&
             !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (React.createElement(Tooltip, { title: selectedDateTitle },
-            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 
+            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, popupStyle: popupStyle, allowClear: false, inputReadOnly: true, style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 
                 // style={{
                 //   width: 120,
                 // }}
@@ -433,6 +434,7 @@ export const AdvancedPicker = props => {
 AdvancedPicker.defaultProps = {
     label: '',
     type: ADVANCED_PICKER_TYPE.START_DATE.value,
+    popupStyle: { borderRadius: (_b = (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusLG) !== null && _b !== void 0 ? _b : 10 },
     operatorKey: 'after',
     dateTypeKeysShow: [],
     date: dayjs().format(DEFAULT_DATE_FORMAT),

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.d.ts

@@ -19,6 +19,7 @@ export interface AdvancedRangePickerProps {
     timezone?: string;
     separator?: ReactNode;
     inputStyle?: React.CSSProperties;
+    popupStyle?: React.CSSProperties;
     isViewMode?: boolean;
     onChange?: ({ timeRange, mode }: TOnChangePayload) => void;
 }

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js

@@ -1,3 +1,4 @@
+var _a, _b;
 // Libraries
 import dayjs from 'dayjs';
 import React, { useState } from 'react';
@@ -10,6 +11,7 @@ import { Space } from '../../../../atoms';
 import { AdvancedPicker } from '../AdvancedPicker';
 // Constants
 import { ADVANCED_RANGE_PICKER_FORMAT } from './constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
@@ -20,7 +22,7 @@ const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components
 export const AdvancedRangePicker = props => {
     const { t } = i18nInstance;
     // Props
-    const { className, valueType, useFormatMapping, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, isViewMode, onChange, } = props;
+    const { className, valueType, useFormatMapping, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, popupStyle, isViewMode, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -60,13 +62,13 @@ export const AdvancedRangePicker = props => {
                 ? getFormatDisplayFromValueType('startDate', valueType)
                 : ADVANCED_RANGE_PICKER_FORMAT.startDate, 
             // format={ADVANCED_RANGE_PICKER_FORMAT.startDate}
-            errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode }),
+            errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, popupStyle: popupStyle, isViewMode: isViewMode }),
         separator || null,
         React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: useFormatMapping
                 ? getFormatDisplayFromValueType('endDate', valueType)
                 : ADVANCED_RANGE_PICKER_FORMAT.endDate, 
             // format={ADVANCED_RANGE_PICKER_FORMAT.endDate}
-            errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode })));
+            errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, popupStyle: popupStyle, isViewMode: isViewMode })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {
@@ -85,6 +87,7 @@ AdvancedRangePicker.defaultProps = {
             dateType: 'today',
         },
     },
+    popupStyle: { borderRadius: (_b = (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusLG) !== null && _b !== void 0 ? _b : 10 },
     errorMessage: '',
     disabled: false,
     showLabel: true,

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DrawerHeaderProps } from './types';
-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 StyledDrawer: import("styled-components").StyledComponent<import("react").FC<import("../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/EditorTab/EditorTab.d.ts

@@ -25,7 +25,7 @@ interface EditorTabProps {
     confirmOnRemoveTab?: boolean;
     modalFuncProps?: ModalFuncProps;
     onActiveTab: (id: string) => void;
-    onCloseTab: (tab: EditorTabItem, index: number, newTabs: EditorTabItem[]) => void;
+    onCloseTab?: (tab: EditorTabItem, index: number, newTabs: EditorTabItem[]) => void;
     onClickRemoveTab?: (tab: EditorTabItem, index: number, newTabs: EditorTabItem[]) => void;
     onConfirmRemove?: (tab: EditorTabItem) => void;
     onConfigure: (id: string) => void;

package/es/components/molecules/EditorTab/EditorTab.js

@@ -22,7 +22,7 @@ export const EditorTab = props => {
     var _a;
     const { listTab = [], activeId = '', showArrow, showDropdown, editNameOnConfigure, 
     // disabledScroll,
-    onCloseTab, onClickRemoveTab, onConfirmRemove, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab = true, modalFuncProps, } = props;
+    onCloseTab, onClickRemoveTab, onConfirmRemove, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab, modalFuncProps, } = props;
     const [activeTabId, setActiveTabId] = useState(activeId || ((_a = listTab === null || listTab === void 0 ? void 0 : listTab[0]) === null || _a === void 0 ? void 0 : _a.id));
     const [arrTabs, setArrTabs] = useState(listTab || []);
     const [isEditable, setIsEditable] = useState();
@@ -115,7 +115,7 @@ export const EditorTab = props => {
                 handleActiveTab(arrTabs[idx + 1].id);
             }
         }
-        onCloseTab(tab, idx, newTabs);
+        onCloseTab === null || onCloseTab === void 0 ? void 0 : onCloseTab(tab, idx, newTabs);
         setArrTabs(newTabs);
     });
     const onWheelLeftBlock = useCallback(event => {

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("@antscorp/antsomi-ui/es/components/molecules/ModalV2/ModalV2").ModalV2Props>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("../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("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ObjectAccessInfo | undefined;
+        accessInfo?: import("../types").ObjectAccessInfo | undefined;
         accessUserId?: number | undefined;
         accessUserPermission?: {
             view: number;
             edit: number;
         } | undefined;
-        excludeUserAccess?: import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ExcludeUserAccess | undefined;
+        excludeUserAccess?: import("../types").ExcludeUserAccess | undefined;
         modalTransferOwnership: {
             open: boolean;
             userToOwnerShipId: number;
         };
     };
-    dispatch: import("react").Dispatch<import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ShareAccessAction> | null;
+    dispatch: import("react").Dispatch<import("../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/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
     onLoadMore: () => void;
     onChange: (newValue: Partial<TemplateValueOptions>) => void;
 };

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

@@ -66,10 +66,10 @@ export type { TFontSettingProps, TFontSettingEditProps } from './FontSetting';
 export type { IResizeGridProps, TCell, TGrid } from './ResizeGrid';
 export type { ModalProps } from './ModalV2';
 export type { TemplateValueOptions } from './TemplateSaveAs';
+export type { ImageResizeHandle } from './ImageEditor';
 export type { SelectProps as SelectV2Props } from './SelectV2';
 export type { InputNumberProps as InputNumberWithLabelProps } from './InputNumber';
 export type { ModalSelectProps } from './ModalSelect';
-export type { ImageResizeHandle } from './ImageEditor';
 export type { EditableNameHandle } from './EditableName';
 export type { AccountListingHandle, AccountSelectionProps } from './AccountSelection';
 export type { VirtualizedMenuProps } from './VirtualizedMenu';

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("@antscorp/antsomi-ui/es/components/molecules/SelectV2").SelectProps): import("react").JSX.Element;
+    (props: import("../../molecules").SelectV2Props): 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,7 +9,7 @@ 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("@antscorp/antsomi-ui/es/types").PayloadInfo;
+export declare const useSelectServiceAuth: () => import("../../..").PayloadInfo;
 export declare const useSelectContentSources: () => import("./types").TContentSourceSettings;
 export declare const useSelectCSGroups: () => import("./types").TContentSourceGroup[];
 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[] | undefined;
-    itemTypeId?: number | null | undefined;
-    listCollection?: any[] | undefined;
-    field?: string | undefined;
-    checkDisable?: boolean | undefined;
+    listBO?: any[];
+    itemTypeId?: number | null;
+    listCollection?: any[];
+    field?: string;
+    checkDisable?: boolean;
 }) => {
     errorMessage: string;
     isDisable: boolean;

package/es/components/organism/DataTable/hooks/useAddFilterButton.d.ts

@@ -11,7 +11,7 @@ type OnApplyFilterMetricConditionValue = {
     existMetricIdx?: number;
 };
 export declare const useAddFilterCondition: () => {
-    filters: import("@antscorp/antsomi-ui/es/components/organism/DataTable/types/filter").FilterItem[] | undefined;
+    filters: import("../types").FilterItem[] | undefined;
     setState: import("react").Dispatch<import("react").SetStateAction<TState>>;
     onSelectFilterMetric: (filterMetric?: FilterMetricItem) => void;
     onApplyFilterMetricCondition: (values: OnApplyFilterMetricConditionValue) => void;

package/es/components/organism/DataTable/hooks/useDataTable.d.ts

@@ -1,5 +1,5 @@
 import { DataTableProps } from '../types';
 export declare const useDataTable: <TTableDataType>(props: DataTableProps<TTableDataType>) => {
-    pagination: import("@antscorp/antsomi-ui/es/components/organism/DataTable/components").PaginationProps | undefined;
-    setPagination: (pagination: Partial<import("@antscorp/antsomi-ui/es/components/organism/DataTable/components").PaginationProps>) => void;
+    pagination: import("../components").PaginationProps | undefined;
+    setPagination: (pagination: Partial<import("../components").PaginationProps>) => void;
 };

package/es/components/organism/DataTable/providers/AntdTableConfigProvider.d.ts

@@ -3,5 +3,5 @@ import { ConfigProviderProps } from 'antd';
 interface AntdConfigProviderV2Props extends ConfigProviderProps {
 }
 export declare const AntdTableConfigProvider: React.FC<AntdConfigProviderV2Props>;
-export declare const dataTableGlobalToken: (Partial<import("antd/es/theme/internal").AliasToken> & Partial<import("@antscorp/antsomi-ui/es/components/organism/DataTable/types/theme").TDataTableToken>) | undefined;
+export declare const dataTableGlobalToken: (Partial<import("antd/es/theme/internal").AliasToken> & Partial<import("../types").TDataTableToken>) | undefined;
 export {};

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("@antscorp/antsomi-ui/es/components/atoms/Text").TextProps>, any, {}, never>;
+export declare const TextField: import("styled-components").StyledComponent<React.FC<import("../../../../../../atoms/Text").TextProps>, any, {}, never>;
 export {};

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

@@ -90,7 +90,7 @@ export const LeftMenuComponent = memo(props => {
     };
     return (React.createElement(LeftMenuNavWrapper, { style: style, "$isExpandMenu": state.isExpandMenu, className: className },
         React.createElement(LeftMenuNav, { className: "left-menu-nav" },
-            React.createElement(FeatureMenuWrapper, { isExpandMenu: state.isExpandMenu, vertical: true },
+            React.createElement(FeatureMenuWrapper, { vertical: true },
                 showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar },
                     React.createElement("div", { className: "image-wrapper" },
                         React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" })))),

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const useHomeMenu: () => {
-    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    children: import("../../types").TMenuItem[];
     removedDashboardId: string;
     isDashboardRemoving: boolean;
     isRecommendation: boolean | undefined;

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

@@ -20,6 +20,8 @@ import { findItemByPermissionCode, recursiveFindItemByKey, recursiveFindParentOf
 import { useNavigatePath } from '../../../hooks';
 // Contexts
 import { useLeftMenuContext } from '../../../contexts';
+import { MARKETING_CHANNEL_CODE } from '@antscorp/antsomi-ui/es/components/template/Layout/constants';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 const noDashboardItem = {
     key: 'no_dashboard',
     label: 'No dashboard available',
@@ -36,8 +38,10 @@ const styles = {
     menuItemTitle: { flex: '1 1 0%', maxWidth: '100%', overflow: 'hidden' },
 };
 export const ChildMenu = memo(props => {
+    var _a;
     const { items = [], onMenuClick } = props;
     const auth = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
+    const env = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.env; });
     const activeAppCode = useLeftMenuContext(store => store.activeAppCode);
     const menuItems = useLeftMenuContext(store => store.menuItems);
     const customItems = useLeftMenuContext(store => store.customItems);
@@ -45,11 +49,16 @@ export const ChildMenu = memo(props => {
     const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
     const customActiveCurrentKey = useLeftMenuContext(store => store.customActiveCurrentKey);
     const setLeftMenuState = useLeftMenuContext(store => store.setState);
+    const layout = JSON.parse(localStorage.getItem('layout') || '{}');
+    const openMenuKeys = ((_a = layout === null || layout === void 0 ? void 0 : layout.leftMenu) === null || _a === void 0 ? void 0 : _a.openMenuKeys) || [];
     const [currentActiveItem, setCurrentActiveItem] = useState('');
-    const [openKeys, setOpenKeys] = useState([]);
+    const [openKeys, setOpenKeys] = useState(openMenuKeys);
     const { pathname, hash } = window.location;
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     useLayoutEffect(() => {
+        localStorage.setItem('layout', JSON.stringify(Object.assign(Object.assign({}, layout), { leftMenu: Object.assign(Object.assign({}, layout === null || layout === void 0 ? void 0 : layout.leftMenu), { openMenuKeys: uniq(openKeys) }) })));
+    }, [layout, openKeys]);
+    useDeepCompareEffect(() => {
         var _a;
         switch (true) {
             case isCustomized: {
@@ -69,12 +78,54 @@ export const ChildMenu = memo(props => {
                     permissionCode: customActiveCurrentKey,
                     menuItems: items,
                 });
-                if (activeItem) {
-                    if (activeItem.permission_code !== 'JOURNEY')
-                        setCurrentActiveItem(activeItem === null || activeItem === void 0 ? void 0 : activeItem.key);
-                    // Find parent key of active menu item to open it
+                const { key, permission_code } = activeItem || {};
+                let menuActiveKey;
+                if (permission_code && key) {
+                    switch (permission_code) {
+                        case 'JOURNEY':
+                            if (!Object.values(MARKETING_CHANNEL_CODE).includes(currentActiveItem)) {
+                                menuActiveKey = MARKETING_CHANNEL_CODE.ALL_CHANNEL;
+                            }
+                            break;
+                        case 'EVENT_SOURCES':
+                            if (!['EVENT', 'EVENT_ATTRIBUTE', 'CONVERSION'].includes(currentActiveItem))
+                                menuActiveKey = 'SOURCE';
+                            break;
+                        case 'DATAFLOWS':
+                            if (!['BATCH_STREAMING', 'REALTIME_STREAMING'].includes(currentActiveItem))
+                                menuActiveKey = 'BATCH_STREAM';
+                            break;
+                        case 'BUSINESS_OBJECT': {
+                            if (!['UPLOAD', 'EXPORT'].includes(currentActiveItem)) {
+                                menuActiveKey = 'UPLOAD';
+                            }
+                            break;
+                        }
+                        case 'DATASOURCES':
+                            menuActiveKey = 'DATA_SOURCE';
+                            break;
+                        default:
+                            menuActiveKey = key;
+                            break;
+                    }
+                }
+                else {
+                    switch (customActiveCurrentKey) {
+                        case 'DATASOURCES-SQL_WORKSPACE':
+                            menuActiveKey = 'DATA_SOURCE';
+                            break;
+                        case 'DATASOURCES-DATAFLOWS':
+                            menuActiveKey = 'DF_DATA_SOURCE';
+                            break;
+                        default:
+                            break;
+                    }
+                }
+                if (menuActiveKey) {
+                    setCurrentActiveItem(menuActiveKey);
+                    /** Find parent key of active menu item to open it */
                     const parentKey = recursiveFindParentOfActiveItem({
-                        activeMenuItem: activeItem === null || activeItem === void 0 ? void 0 : activeItem.key,
+                        activeMenuItem: menuActiveKey,
                         menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => (Object.assign(Object.assign({}, getMenuItem(item)), { key: (item === null || item === void 0 ? void 0 : item.permission_code) || '' }))),
                     });
                     if (parentKey) {
@@ -86,7 +137,12 @@ export const ChildMenu = memo(props => {
             default: {
                 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;
+                const activeMenuItem = (_a = findLastMatchedItemByUrl({
+                    url,
+                    menuItems,
+                    auth,
+                    env,
+                })) === 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
@@ -119,6 +175,7 @@ export const ChildMenu = memo(props => {
         customActiveCurrentKey,
         customItems,
         isRecommendation,
+        env,
     ]);
     const onClick = e => {
         var _a;

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

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

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

@@ -1,6 +1,6 @@
 // Libraries
-import { useCallback, useEffect, useState } from 'react';
-import { isArray } from 'lodash';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { isArray, isNil } from 'lodash';
 // Utils
 import { findActiveAppCodeByChild, findActiveAppCodeByUrl, recursiveGetMenuItemByPermission, } from '../utils';
 // Store
@@ -9,20 +9,41 @@ import { useLeftMenuContext } from '../contexts';
 import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 // Hooks
 import { usePermission } from './usePermission';
-const initialState = {
-    hoverItem: '',
-    isExpandMenu: true,
-};
+import { Cookies } from 'react-cookie';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 export const useLeftMenu = (props) => {
     // Props
     const { objectType = DASHBOARD_MODULE_CONFIG.objectType, objectId = DASHBOARD_MODULE_CONFIG.objectId, isGrouped = DASHBOARD_MODULE_CONFIG.isGrouped, appConfig, customization, onActiveMenuCodeChange, } = props;
-    const { isExpandable = true, isCustomized = false, isRecommendation = false, items, activeKey, onMenuItemClick, } = customization || {};
-    const { pathname, hash } = window.location;
+    const { isExpandable = true, expandMenu = false, isCustomized = false, isRecommendation = false, items, activeKey, onMenuItemClick, } = customization || {};
+    const mappedActiveKey = useMemo(() => {
+        if (!isRecommendation)
+            return activeKey;
+        switch (activeKey) {
+            case 'BUSINESS_OBJECT':
+            case 'BUSINESS_OBJECT-APP_API_HUB':
+                return 'DATA_OBJECT';
+            case 'BUSINESS_OBJECT-PERMISSION_ACCOUNT':
+                return 'BUSINESS_OBJECT';
+            case 'ANALYSIS':
+                return 'SQL_WORKSPACE';
+            case 'DATASOURCES-APP_ANTALYSER':
+                return 'DATASOURCES-SQL_WORKSPACE';
+            default:
+                return activeKey;
+        }
+    }, [activeKey, isRecommendation]);
+    const cookie = new Cookies();
+    const { pathname, hash, origin } = window.location;
     const activeAppCode = useLeftMenuContext(store => store.activeAppCode);
     const customActiveAppKey = useLeftMenuContext(store => store.customActiveAppKey);
     const setLeftMenuContextState = useLeftMenuContext(store => store.setState);
     const { auth, env } = appConfig || {};
-    const [state, setState] = useState(initialState);
+    const leftMenuCookies = cookie.get('_leftmenu_state');
+    const isOpenMenu = !isNil(leftMenuCookies === null || leftMenuCookies === void 0 ? void 0 : leftMenuCookies.expand) ? leftMenuCookies === null || leftMenuCookies === void 0 ? void 0 : leftMenuCookies.expand : true;
+    const [state, setState] = useState({
+        hoverItem: '',
+        isExpandMenu: expandMenu || isOpenMenu,
+    });
     const { mappingChildrenMenu, flattenMenuPermission, permissionMenu, activeItemPath } = usePermission();
     const onMenuClick = useCallback((key, keyPath) => {
         if (isRecommendation) {
@@ -30,7 +51,20 @@ export const useLeftMenu = (props) => {
         }
         onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [...keyPath, customActiveAppKey]);
     }, [customActiveAppKey, isRecommendation, onMenuItemClick, setLeftMenuContextState]);
-    useEffect(() => {
+    useDeepCompareEffect(() => {
+        if (!expandMenu) {
+            cookie.set('_leftmenu_state', Object.assign(Object.assign({}, leftMenuCookies), { expand: state.isExpandMenu }));
+            // const domain = '.antsomi.com';
+            // const cookieValue = {
+            //   ...leftMenuCookies,
+            //   expand: state.isExpandMenu,
+            // };
+            // document.cookie = `_leftmenu_state=${JSON.stringify(
+            //   cookieValue,
+            // )}; domain=${domain}; path=/; SameSite=None; Secure`;
+        }
+    }, [leftMenuCookies, origin, state.isExpandMenu]);
+    useDeepCompareEffect(() => {
         setLeftMenuContextState({
             appConfig,
             isCustomized,
@@ -49,7 +83,7 @@ export const useLeftMenu = (props) => {
         setLeftMenuContextState,
     ]);
     // Active Custom App Key when active key is changed
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         switch (true) {
             case isCustomized:
                 setLeftMenuContextState({
@@ -63,10 +97,10 @@ export const useLeftMenu = (props) => {
             case isRecommendation: {
                 setLeftMenuContextState({
                     customActiveAppKey: findActiveAppCodeByChild({
-                        activeCurrentKey: activeKey || '',
+                        activeCurrentKey: mappedActiveKey || '',
                         menuItems: mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.map(item => recursiveGetMenuItemByPermission(item)),
                     }) || '',
-                    customActiveCurrentKey: activeKey,
+                    customActiveCurrentKey: mappedActiveKey,
                 });
                 break;
             }
@@ -79,11 +113,12 @@ export const useLeftMenu = (props) => {
         isCustomized,
         isRecommendation,
         items,
+        mappedActiveKey,
         mappingChildrenMenu,
         setLeftMenuContextState,
     ]);
     // Change list menu children when hovering or activating items, giving priority to hovering items
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         var _a, _b, _c;
         const appActiveKey = state.hoverItem
             ? state.hoverItem
@@ -101,10 +136,6 @@ export const useLeftMenu = (props) => {
             case isRecommendation: {
                 setLeftMenuContextState({
                     menuItems: mappingChildrenMenu,
-                    // customMenuChildren:
-                    //   mappingChildrenMenu
-                    //     ?.find(item => item.permission_code === appActiveKey)
-                    //     ?.children?.map(item => recursiveGetMenuItemByPermission(item)) || [],
                     appMenuChildren: ((_b = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === appActiveKey)) === null || _b === void 0 ? void 0 : _b.children) ||
                         [],
                 });
@@ -131,7 +162,7 @@ export const useLeftMenu = (props) => {
         isRecommendation,
         setLeftMenuContextState,
     ]);
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         switch (true) {
             case isCustomized:
                 break;
@@ -177,15 +208,17 @@ export const useLeftMenu = (props) => {
         setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
     }, []);
     const onMouseEnter = useCallback((key) => {
-        if (!state.isExpandMenu || !isExpandable) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: key })));
-        }
-    }, [isExpandable, state.isExpandMenu]);
+        setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: key })));
+        // if (!state.isExpandMenu || !isExpandable) {
+        //   setState(prev => ({ ...prev, hoverItem: key }));
+        // }
+    }, []);
     const onMouseLeave = useCallback(() => {
-        if (!state.isExpandMenu || !isExpandable) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
-        }
-    }, [isExpandable, state.isExpandMenu]);
+        setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
+        // if (!state.isExpandMenu || !isExpandable) {
+        //   setState(prev => ({ ...prev, hoverItem: '' }));
+        // }
+    }, []);
     const onHoverMenuBar = () => {
         onMouseEnter(isCustomized ? customActiveAppKey : activeAppCode);
     };

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

@@ -67,7 +67,7 @@ export const usePermission = () => {
                 portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
             },
             params: {
-                objectType: 'DESTINATIONS',
+                objectType: 'GEN2_DESTINATION',
                 languageCode,
             },
         },
@@ -111,7 +111,7 @@ export const usePermission = () => {
             })
             : [];
     }, [auth, hash, mappingChildrenMenu, pathname]);
-    useEffect(() => setLeftMenuState({ dashboardList: [] }), [dashboardList, setLeftMenuState]);
+    useEffect(() => setLeftMenuState({ dashboardList }), [dashboardList, setLeftMenuState]);
     useEffect(() => {
         if (!isCustomized) {
             const receivePostMessage = (event) => {

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

@@ -17,8 +17,9 @@ export interface LeftMenuProps {
         isExpandable?: boolean;
         items?: TMenuItem[];
         activeKey?: string;
+        expandMenu?: boolean;
         onMenuItemClick?: (key: string, keyPath: string[]) => void;
     };
     onActiveMenuCodeChange?: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[]) => void;
 }
-export declare const LeftMenu: (props: LeftMenuProps) => React.JSX.Element | null;
+export declare const LeftMenu: React.MemoExoticComponent<(props: LeftMenuProps) => React.JSX.Element | null>;

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

@@ -1,12 +1,14 @@
 /* eslint-disable react/function-component-definition */
 // Libraries
-import React, { useRef } from 'react';
+import React, { memo, useRef } from 'react';
+import isEqual from 'react-fast-compare';
 // Providers
 import { LeftMenuProvider } from './providers';
 // Store
 import { createLeftMenuStore } from './stores';
 import { LeftMenuComponent } from './LeftMenu';
-export const LeftMenu = (props) => {
+import { CookiesProvider } from 'react-cookie';
+export const LeftMenu = memo((props) => {
     const storeRef = useRef();
     if (!storeRef.current) {
         storeRef.current = createLeftMenuStore(props);
@@ -14,5 +16,6 @@ export const LeftMenu = (props) => {
     if (!storeRef.current)
         return null;
     return (React.createElement(LeftMenuProvider, { store: storeRef.current },
-        React.createElement(LeftMenuComponent, Object.assign({}, props))));
-};
+        React.createElement(CookiesProvider, null,
+            React.createElement(LeftMenuComponent, Object.assign({}, props)))));
+}, (prevProps, nextProps) => isEqual(prevProps, nextProps));

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

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PopoverWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-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 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, {}, never>;
 export declare const ExpandWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenuNavWrapper: import("styled-components").StyledComponent<"div", any, {
     $isExpandMenu?: boolean | undefined;

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

@@ -39,12 +39,8 @@ export const FeatureMenuWrapper = styled(Flex) `
 
   &:hover {
     ${PopoverWrapper} {
-      ${({ isExpandMenu }) => !isExpandMenu
-    ? `
-          visibility: visible;
-          opacity: 1;
-          `
-    : ''}
+      visibility: visible;
+      opacity: 1;
     }
   }
 `;

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

@@ -52,10 +52,10 @@ export const flattenMenuArray = (menuItems, childKey) => {
 export const recursivePermissionMenu = (menuItems, menuPermissions) => {
     var _a, _b;
     const menu = (_b = (_a = menuItems === null || menuItems === void 0 ? void 0 : menuItems.filter(({ permission_code, menu_item_type }) => {
-        if (Number(menu_item_type) !== MENU_ITEM_TYPE.MENU) {
+        if (Number(menu_item_type) === MENU_ITEM_TYPE.GROUP_MENU) {
             return true;
         }
-        return menuPermissions === null || menuPermissions === void 0 ? void 0 : menuPermissions.find(({ app_code = '', menu_code = '' }) => !!permission_code && [app_code, menu_code].includes(permission_code));
+        return !!(menuPermissions === null || menuPermissions === void 0 ? void 0 : menuPermissions.find(({ app_code = '', menu_code = '' }) => !!permission_code && [app_code, menu_code].includes(permission_code)));
     })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), (isArray(item.children)
         ? {
             children: recursivePermissionMenu(sortBy(item.children || [], ['level_position']), menuPermissions),

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

@@ -1,3 +1,3 @@
-export declare const ExpandIcon: import("styled-components").StyledComponent<any, any, import("@antscorp/antsomi-ui/es/components/atoms/Icon").IconProps & {
+export declare const ExpandIcon: import("styled-components").StyledComponent<any, any, import("../../atoms/Icon").IconProps & {
     $isOpen?: boolean | undefined;
 }, string | number | symbol>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-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 ParentMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/atoms/Scrollbars/Scrollbars").ScrollbarsProps>, any, {}, never>;
-export declare const ChildrenMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/atoms/Scrollbars/Scrollbars").ScrollbarsProps>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("../../molecules/ModalV2").ModalV2Props>, any, {}, never>;
+export declare const ParentMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../atoms/Scrollbars").ScrollbarsProps>, any, {}, never>;
+export declare const ChildrenMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../atoms/Scrollbars").ScrollbarsProps>, any, {}, never>;
 export declare const SelectedMetricsWrapper: 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 SelectedMetricItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
     disabled?: boolean | undefined;

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

@@ -6,8 +6,8 @@ export { PositionSetting, PositionSettingPopover } from './PositionSetting';
 export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table';
 export { GenerativeInsights } from './GenerativeInsights';
 export { default as ContentSources } from './ContentSources';
-export { LeftMenu, type LeftMenuProps } from './LeftMenu';
 export * from './ContentSources/provider';
+export { LeftMenu, type LeftMenuProps } from './LeftMenu';
 export { TicketEditor } from './TicketEditor';
 export * from './DataTable';
 export * from './ModifyColumnModal';

package/es/components/organism/index.js

@@ -6,8 +6,8 @@ export { PositionSetting, PositionSettingPopover } from './PositionSetting';
 export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table';
 export { GenerativeInsights } from './GenerativeInsights';
 export { default as ContentSources } from './ContentSources';
-export { LeftMenu } from './LeftMenu';
 export * from './ContentSources/provider';
+export { LeftMenu } from './LeftMenu';
 export { TicketEditor } from './TicketEditor';
 export * from './DataTable';
 export * from './ModifyColumnModal';

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/components/OldLeftMenu/index.js

@@ -14,6 +14,25 @@ export const OldLeftMenu = memo(props => {
     const { activeKey, appConfig, onMenuItemClick } = props;
     const [openKeys, setOpenKeys] = useState([]);
     const { auth, languageCode } = appConfig || {};
+    const mappedActiveKey = useMemo(() => {
+        switch (activeKey) {
+            case 'SQL_WORKSPACE':
+            case 'SCHEDULE_QUERY':
+                return 'ANALYSIS';
+            case 'DATA_OBJECT':
+            case 'BUSINESS_OBJECT-APP_API_HUB':
+            case 'BUSINESS_OBJECT-PERMISSION_ACCOUNT':
+            case 'DATA_VIEW':
+                return 'BUSINESS_OBJECT';
+            case 'BATCH_STREAMING':
+            case 'REALTIME_STREAMING':
+                return 'DATAFLOWS';
+            case 'DATASOURCES-SQL_WORKSPACE':
+                return 'DATASOURCES-APP_ANTALYSER';
+            default:
+                return activeKey;
+        }
+    }, [activeKey]);
     const { data: menuListPermission } = useGetListMenuPermission({
         args: {
             auth: {
@@ -31,9 +50,9 @@ export const OldLeftMenu = memo(props => {
         },
     });
     const parentKeys = useMemo(() => recursiveFindParentOfActiveItem({
-        activeMenuItem: activeKey,
+        activeMenuItem: mappedActiveKey,
         menuItems: menuListPermission || [],
-    }), [activeKey, menuListPermission]);
+    }), [mappedActiveKey, menuListPermission]);
     useLayoutEffect(() => setOpenKeys(parentKeys ? [parentKeys] : []), [parentKeys]);
     const onMenuClick = e => {
         onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(e.key, uniq(e.keyPath));
@@ -52,7 +71,7 @@ export const OldLeftMenu = memo(props => {
             };
         };
         const items = ((_a = orderBy(menuListPermission === null || menuListPermission === void 0 ? void 0 : menuListPermission.map(item => (Object.assign(Object.assign({}, item), { app_order: Number(item.app_order) }))), ['app_order'], ['asc'])) === null || _a === void 0 ? void 0 : _a.map(item => recursiveGetMenuItem(item))) || [];
-        return (React.createElement(Menu, { selectedKeys: [activeKey], defaultOpenKeys: uniq(openKeys), openKeys: uniq(openKeys), mode: "inline", items: items, inlineIndent: 0, onOpenChange: openKeys => {
+        return (React.createElement(Menu, { selectedKeys: [mappedActiveKey], defaultOpenKeys: uniq(openKeys), openKeys: uniq(openKeys), mode: "inline", items: items, inlineIndent: 0, onOpenChange: openKeys => {
                 setOpenKeys(uniq(openKeys));
             }, expandIcon: ({ isOpen }) => {
                 var _a;

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/index.js

@@ -11,8 +11,15 @@ import { OldLeftMenu } from './components';
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 export const MenuMapping = () => {
     const [activeKey, setActiveKey] = useState('DASHBOARD');
-    const onMenuItemClick = useCallback((key, _keyPath) => {
-        setActiveKey(key);
+    const onMenuItemClick = useCallback((key, keyPath) => {
+        switch (key) {
+            case 'DATASOURCES':
+            case 'BUSINESS_OBJECT':
+                setActiveKey(`${key}-${keyPath === null || keyPath === void 0 ? void 0 : keyPath[1]}`);
+                break;
+            default:
+                setActiveKey(key);
+        }
     }, []);
     const appConfig = useContextSelector(AppConfigContext, state => state);
     return (React.createElement(MenuMappingWrapper, null,
@@ -21,5 +28,5 @@ export const MenuMapping = () => {
                 React.createElement(OldLeftMenu, { activeKey: activeKey, appConfig: appConfig, onMenuItemClick: onMenuItemClick })),
             React.createElement(Icon, { type: "icon-ants-arrow-forward" }),
             React.createElement("div", { className: "new-menu-wrapper" },
-                React.createElement(LeftMenu, { appConfig: appConfig, showLogo: false, style: { maxHeight: '100%' }, customization: { isRecommendation: true, activeKey, onMenuItemClick } })))));
+                React.createElement(LeftMenu, { appConfig: appConfig, showLogo: false, style: { maxHeight: '100%' }, customization: { isRecommendation: true, activeKey, expandMenu: true, onMenuItemClick } })))));
 };

package/es/components/template/Layout/components/RecommendationWorkspace/index.js

@@ -10,6 +10,11 @@ export const RecommendationWorkspace = () => {
         setHeaderState({
             pageTitle: 'Recommendation',
         });
+        return () => {
+            setHeaderState({
+                pageTitle: '',
+            });
+        };
     }, [setHeaderState]);
     return (React.createElement(Flex, { gap: 220, align: "center", justify: "center", style: { height: '100%' } },
         React.createElement(RecommendationImage, null),

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,4 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
-export declare const TemplateListing: (props: import("@antscorp/antsomi-ui/es/components").TemplateListingProps<{}>) => JSX.Element;
+export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/es/hooks/index.d.ts

@@ -5,6 +5,9 @@ export * from './useIntersectionObserver';
 export * from './useEffectOnlyOnce';
 export * from './useForceUpdate';
 export * from './useListingItemResize';
+export * from './useKeyEventCanvas';
+export * from './useDragEvent';
+export * from './useDropFile';
 export * from './useToggle';
 export * from './useIsFirstRender';
 export * from './useEffectDebugger';
@@ -16,9 +19,6 @@ export * from './useUnmount';
 export * from './createEffectWithTarget ';
 export * from './useEffectWithTarget';
 export * from './useMutationObserver';
-export * from './useKeyEventCanvas';
-export * from './useDragEvent';
-export * from './useDropFile';
 export * from './useEventListener';
 export * from './useDebounceCallback';
 export * from './useWindowSize';

package/es/hooks/index.js

@@ -24,6 +24,9 @@ export * from './useIntersectionObserver';
 export * from './useEffectOnlyOnce';
 export * from './useForceUpdate';
 export * from './useListingItemResize';
+export * from './useKeyEventCanvas';
+export * from './useDragEvent';
+export * from './useDropFile';
 export * from './useToggle';
 export * from './useIsFirstRender';
 export * from './useEffectDebugger';
@@ -35,9 +38,6 @@ export * from './useUnmount';
 export * from './createEffectWithTarget ';
 export * from './useEffectWithTarget';
 export * from './useMutationObserver';
-export * from './useKeyEventCanvas';
-export * from './useDragEvent';
-export * from './useDropFile';
 export * from './useEventListener';
 export * from './useDebounceCallback';
 export * from './useWindowSize';

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -835,7 +835,6 @@ export const GlobalStyle = () => {
           padding: 20px;
         }
       }
-
       .antsomi-modal-content {
         .antsomi-modal-header {
           .antsomi-modal-title {

package/es/queries/BusinessObject/useGetListAttributeBO.d.ts

@@ -9,9 +9,7 @@ type GetListAttributeBOProps<T> = {
 export declare const useGetListAttributeBO: <T = Record<string, any>>(apiParams: APIParams, infos: PayloadInfo, props?: GetListAttributeBOProps<T>) => UseQueryResult<T, unknown>;
 export declare const getListAttributeBOQuery: ({ itemTypeIds, url, infos, }: {
     itemTypeIds: (number | null)[];
-} & {
-    url: string;
-} & Record<string, any> & {
+} & APIParams & {
     infos: PayloadInfo;
 }) => Promise<any>;
 export {};

package/es/utils/common.d.ts

@@ -102,7 +102,7 @@ export declare const recursiveSearchItems: <T = any>({ list, childrenKey, search
     list: T[];
     searchValue: string;
     searchKeys: (keyof T)[];
-    childrenKey?: keyof T | undefined;
+    childrenKey?: keyof T;
 }) => {
     results: T[];
     matchedParents: T[];

package/es/utils/index.d.ts

@@ -3,4 +3,5 @@ export * from './common';
 export * from './handleError';
 export * from './templateListing';
 export * from './styles';
+export * from './variables';
 export * from './actionButtons';

package/es/utils/index.js

@@ -3,4 +3,5 @@ export * from './common';
 export * from './handleError';
 export * from './templateListing';
 export * from './styles';
+export * from './variables';
 export * from './actionButtons';

package/es/utils/loadable.d.ts

@@ -3,5 +3,5 @@ interface Opts {
     fallback: React.ReactNode;
 }
 type Unpromisify<T> = T extends Promise<infer P> ? P : never;
-export declare const lazyLoad: <T extends Promise<any>, U extends React.ComponentType<any>>(importFunc: () => T, selectorFunc?: ((s: Unpromisify<T>) => U) | undefined, opts?: Opts) => (props: React.ComponentProps<U>) => JSX.Element;
+export declare const lazyLoad: <T extends Promise<any>, U extends React.ComponentType<any>>(importFunc: () => T, selectorFunc?: (s: Unpromisify<T>) => U, opts?: Opts) => (props: React.ComponentProps<U>) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.403",
+  "version": "1.3.5-beta.404",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -124,11 +124,11 @@
     "swiper": "^11.0.7",
     "ts-dedent": "^2.2.0",
     "tui-image-editor": "^3.15.3",
+    "use-image": "^1.1.1",
+    "use-immer": "^0.9.0",
     "uniqid": "^5.4.0",
     "use-context-selector": "^1.4.4",
-    "use-immer": "^0.9.0",
-    "zustand": "^4.5.2",
-    "use-image": "^1.1.1"
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@ant-design/cssinjs": "^1.6.2",