@antscorp/antsomi-ui 1.3.5-beta.363 → 1.3.5-beta.365

package/es/assets/css/main.scss

@@ -20,3 +20,7 @@
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
+
+.rc-virtual-list-scrollbar {
+  width: 4px !important;
+}

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

@@ -3,13 +3,21 @@ import { useMemo } from 'react';
 // Queries
 import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount, } from '@antscorp/antsomi-ui/es/queries';
 // Constant
-import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';
+import { APP_CODES } from '@antscorp/antsomi-ui/es/constants';
+const { APP_ANTALYSER, DATAFLOWS } = APP_CODES;
+// NOTES: Just define for account selection
+const isUsePermissionAccount = (appCode) => {
+    if ([APP_ANTALYSER, DATAFLOWS].includes(appCode)) {
+        return true;
+    }
+    return false;
+};
 export const useAccountSelection = (apiConfig) => {
-    const { domain, token, userId, appCode, menuCode, portalId } = apiConfig;
+    const { domain, token, userId, appCode, menuCode } = apiConfig;
     const { data } = useGetAccountList({
         apiConfig,
         options: {
-            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
+            enabled: !isUsePermissionAccount(appCode || ''),
         },
     });
     const { data: permissionAccountList } = useGetPermissionAccountList({
@@ -24,18 +32,18 @@ export const useAccountSelection = (apiConfig) => {
             menuCode: menuCode || appCode || '',
         },
         options: {
-            enabled: portalId === PORTALS_IDS.SANDBOX_76753,
+            enabled: isUsePermissionAccount(appCode || ''),
         },
     });
     const { data: recentData } = useGetRecentAccount({
         apiConfig,
         options: {
-            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
+            enabled: !isUsePermissionAccount(appCode || ''),
         },
     });
     // Memos
     const accountData = useMemo(() => {
-        if (portalId === PORTALS_IDS.SANDBOX_76753) {
+        if (isUsePermissionAccount(appCode || '')) {
             return ((permissionAccountList === null || permissionAccountList === void 0 ? void 0 : permissionAccountList.map(account => ({
                 email: account.email,
                 userId: account.user_id,
@@ -44,6 +52,6 @@ export const useAccountSelection = (apiConfig) => {
             }))) || []);
         }
         return (data === null || data === void 0 ? void 0 : data.entries) || [];
-    }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
+    }, [appCode, data === null || data === void 0 ? void 0 : data.entries, permissionAccountList]);
     return { recentData, accountData };
 };

package/es/components/molecules/CalendarSelection/CalendarSelection.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
 import React, { useLayoutEffect, useReducer, useRef } from 'react';
-import { Divider } from 'antd';
+import { Divider, ConfigProvider as AntdConfigProvider } from 'antd';
 import { ActionContext, StateContext } from './context';
 import { reducer, INITIAL_STATE } from './reducer';
 import { StyledPopover, StyledPopoverBody, StyledPopoverContainer } from './styled';
@@ -34,12 +34,21 @@ export const CalendarSelection = props => {
         React.createElement(Divider, { style: { margin: 0 } }),
         React.createElement(Footer, null)));
     // console.log(state.value.current.rangeValue);
-    return (React.createElement(StateContext.Provider, { value: Object.assign(Object.assign({}, state), { rangeLimit,
-            timezone }) },
-        React.createElement(ActionContext.Provider, { value: { dispatch } },
-            React.createElement(StyledPopover, Object.assign({}, popoverProps, { open: state.open, arrow: false, trigger: ['click'], content: popoverContent, destroyTooltipOnHide: true, overlayInnerStyle: { padding: 0 }, onOpenChange: isOpen => {
-                    if (!isOpen)
-                        dispatch({ type: 'toggle_popover' });
-                } }),
-                React.createElement(TimeRangeDisplay, Object.assign({}, timeDisplayProps))))));
+    return (React.createElement(AntdConfigProvider, { theme: {
+            components: {
+                Popover: {
+                    borderRadiusLG: 0,
+                    borderRadius: 0,
+                    borderRadiusOuter: 0,
+                },
+            },
+        } },
+        React.createElement(StateContext.Provider, { value: Object.assign(Object.assign({}, state), { rangeLimit,
+                timezone }) },
+            React.createElement(ActionContext.Provider, { value: { dispatch } },
+                React.createElement(StyledPopover, Object.assign({}, popoverProps, { open: state.open, arrow: false, trigger: ['click'], content: popoverContent, destroyTooltipOnHide: true, overlayInnerStyle: { padding: 0 }, onOpenChange: isOpen => {
+                        if (!isOpen)
+                            dispatch({ type: 'toggle_popover' });
+                    } }),
+                    React.createElement(TimeRangeDisplay, Object.assign({}, timeDisplayProps)))))));
 };

package/es/components/molecules/CalendarSelection/components/CustomPicker/CustomPicker.js

@@ -65,44 +65,45 @@ export const CustomPicker = props => {
         return React.createElement(StyledCellDate, { rangeColor: cellBgColor }, originNode);
     }, [rangeValue]);
     return (React.createElement(StyledCustomPickerRoot, null,
-        React.createElement("div", { className: "range-inputs" }, rangeValue.map((range, rangeIdx) => (React.createElement(ConfigProvider, { key: rangeIdx, theme: {
-                components: {
-                    DatePicker: Object.assign({ cellHeight: 20 }, (range.color && {
-                        hoverBorderColor: range.color,
-                        colorBorder: range.color,
-                        colorPrimary: range.color,
-                        colorPrimaryActive: range.color,
-                        cellActiveWithRangeBg: new TinyColor(range.color).lighten(40).toHexString(),
-                    })),
-                },
-            } },
-            React.createElement("div", { className: "range-input" },
-                React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
-                React.createElement(RangePicker, Object.assign({}, rest, { open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
-                        if (activeRangeIdx !== rangeIdx)
-                            return null;
-                        return originalPanel;
-                    }, cellRender: (current, info) => {
-                        if (typeof current === 'number' || info.type !== 'date') {
-                            return info.originNode;
-                        }
-                        return renderCellDate(current, info.originNode);
-                    }, onCalendarChange: value => {
-                        var _a, _b;
-                        let start = '';
-                        let end = '';
-                        const valueFirst = dayjs((_a = value === null || value === void 0 ? void 0 : value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate());
-                        const valueSecond = dayjs((_b = value === null || value === void 0 ? void 0 : value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate());
-                        if (valueFirst.isBefore(valueSecond)) {
-                            start = valueFirst.toISOString();
-                            end = valueSecond.toISOString();
-                        }
-                        else {
-                            start = valueSecond.toISOString();
-                            end = valueFirst.toISOString();
-                        }
-                        handleCalendarChange(start, end);
-                    } }))))))),
-        React.createElement(AutoUpdateTo, null),
+        React.createElement("div", { className: "section-input" },
+            React.createElement("div", { className: "range-inputs" }, rangeValue.map((range, rangeIdx) => (React.createElement(ConfigProvider, { key: rangeIdx, theme: {
+                    components: {
+                        DatePicker: Object.assign({ cellHeight: 20 }, (range.color && {
+                            hoverBorderColor: range.color,
+                            colorBorder: range.color,
+                            colorPrimary: range.color,
+                            colorPrimaryActive: range.color,
+                            cellActiveWithRangeBg: new TinyColor(range.color).lighten(40).toHexString(),
+                        })),
+                    },
+                } },
+                React.createElement("div", { className: "range-input" },
+                    React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
+                    React.createElement(RangePicker, Object.assign({}, rest, { open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
+                            if (activeRangeIdx !== rangeIdx)
+                                return null;
+                            return originalPanel;
+                        }, cellRender: (current, info) => {
+                            if (typeof current === 'number' || info.type !== 'date') {
+                                return info.originNode;
+                            }
+                            return renderCellDate(current, info.originNode);
+                        }, onCalendarChange: value => {
+                            var _a, _b;
+                            let start = '';
+                            let end = '';
+                            const valueFirst = dayjs((_a = value === null || value === void 0 ? void 0 : value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate());
+                            const valueSecond = dayjs((_b = value === null || value === void 0 ? void 0 : value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate());
+                            if (valueFirst.isBefore(valueSecond)) {
+                                start = valueFirst.toISOString();
+                                end = valueSecond.toISOString();
+                            }
+                            else {
+                                start = valueSecond.toISOString();
+                                end = valueFirst.toISOString();
+                            }
+                            handleCalendarChange(start, end);
+                        } }))))))),
+            React.createElement(AutoUpdateTo, null)),
         React.createElement(CalendarContainerStyled, { className: "calendar-container", ref: popupContainer })));
 };

package/es/components/molecules/CalendarSelection/components/CustomPicker/styled.js

@@ -20,17 +20,23 @@ export const StyledCustomPickerRoot = styled.div `
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px 12px;
 
-  .range-inputs {
+  .section-input {
+    padding: 8px 12px;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 4px;
 
-    .range-input {
+    .range-inputs {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 8px;
+
+      .range-input {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
     }
   }
 
@@ -68,83 +74,8 @@ export const CalendarContainerStyled = styled.div `
 
     /* Content */
     .antsomi-picker-content {
-      /* Rectangle */
-      & td,
-      & th,
-      & .antsomi-picker-cell-inner,
-      & td::before {
-        /* width: var(--cellWidth);
-        height: var(--cellHeight); */
-      }
-
-      /* Date node */
-      .antsomi-picker-cell-inner {
-      }
-
-      /* Today node */
-      .antsomi-picker-cell-today {
-        .antsomi-picker-cell-inner {
-          &::before {
-            border-radius: 18px;
-            border: 0.0001rem solid var(--colorToDay);
-          }
-        }
-      }
-
-      /* Selected node */
-      .antsomi-picker-cell-in-view {
-        &.antsomi-picker-cell-selected,
-        &.antsomi-picker-cell-range-start,
-        &.antsomi-picker-cell-range-end {
-          .antsomi-picker-cell-inner {
-            background: var(--colorSelected) !important;
-            border-radius: 18px !important;
-          }
-        }
-      }
-
-      /* In Range */
-      .antsomi-picker-cell-in-range.antsomi-picker-cell-in-view {
-        &::before {
-          background: var(--colorInRange) !important;
-        }
-        .antsomi-picker-cell-inner {
-          /* background: var(--colorInRange) !important; */
-          &::after {
-            content: none !important;
-            background: var(--colorInRange) !important;
-          }
-        }
-      }
-
-      /* In Range Start End */
-      .antsomi-picker-cell-in-view.antsomi-picker-cell-range-start:not(
-          .antsomi-picker-cell-range-start-single
-        ) {
-        &::before {
-          background: var(--colorInRange) !important;
-        }
-      }
-      .antsomi-picker-cell-in-view.antsomi-picker-cell-range-end:not(
-          .antsomi-picker-cell-range-end-single
-        ) {
-        &::before {
-          background: var(--colorInRange) !important;
-        }
-      }
-
-      /* Hover */
-      .antsomi-picker-cell-in-view {
-        &.antsomi-picker-cell-range-hover,
-        &.antsomi-picker-cell-range-hover-start,
-        &.antsomi-picker-cell-range-hover-end {
-          &:not(.antsomi-picker-cell-in-range)::after {
-            content: none !important;
-            border: none;
-          }
-        }
-      }
     }
+
     .antsomi-picker-range-arrow {
       display: none !important;
     }

package/es/components/molecules/CalendarSelection/components/RangePicker/RangePicker.js

@@ -1,4 +1,4 @@
 import React from 'react';
 import { StyledRangePicker } from './styled';
 const DATE_FORMAT = 'DD/MM/YYYY';
-export const RangePicker = props => (React.createElement(StyledRangePicker, Object.assign({}, props, { allowEmpty: [true, true], allowClear: false, autoFocus: false, size: "large", suffixIcon: false, format: DATE_FORMAT })));
+export const RangePicker = props => (React.createElement(StyledRangePicker, Object.assign({}, props, { allowEmpty: [true, true], allowClear: false, autoFocus: false, bordered: false, size: "middle", suffixIcon: false, format: DATE_FORMAT })));

package/es/components/molecules/CalendarSelection/components/RangePicker/styled.js

@@ -1,13 +1,26 @@
 import { DatePicker } from '@antscorp/antsomi-ui/es/components/molecules';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 const { RangePicker } = DatePicker;
 export const StyledRangePicker = styled(RangePicker) `
-  font-size: 12px;
-  padding-right: 8px;
+  &.antsomi-picker {
+    font-size: 12px;
+    padding: 0;
 
-  .ant-picker-input {
-    input {
-      width: 80px;
+    .antsomi-picker-active-bar {
+      display: none;
+    }
+
+    .antsomi-picker-input {
+      padding: 4px 10px;
+
+      &.antsomi-picker-input-active {
+        border-bottom: 2px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+      }
+
+      input {
+        font-size: inherit;
+      }
     }
   }
 `;

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/NumOfDaysRanges/index.d.ts

@@ -1 +1 @@
-export * from './NumOfDaysRanges';
+export { NumOfDaysRanges } from './NumOfDaysRanges';

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/NumOfDaysRanges/index.js

@@ -1 +1 @@
-export * from './NumOfDaysRanges';
+export { NumOfDaysRanges } from './NumOfDaysRanges';

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/Option/Option.js

@@ -1,12 +1,39 @@
 import React, { useRef } from 'react';
+import { List, Menu } from 'antd';
 import Icon from '@antscorp/icons';
+import styled from 'styled-components';
 import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import classNames from 'classnames';
 import { useCalendarSelectionContext } from '../../../../hooks';
 import { changeRangeType } from '../../../../actions';
 import { rangeInfoToStringType } from '../../../../utils';
-import { StyledMenu } from './styled';
-import { List } from 'antd';
+const StyledMenu = styled(Menu) `
+  &.antsomi-menu-root {
+    .antsomi-menu-item {
+      position: relative;
+      color: black;
+      height: 32px;
+      line-height: 32px;
+      border-radius: 0;
+      width: 100%;
+      margin: 0;
+
+      &.antsomi-menu-item-selected {
+        font-weight: bold;
+
+        &:after {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 4px;
+          height: 100%;
+          background-color: #005fb8;
+        }
+      }
+    }
+  }
+`;
 export const Option = props => {
     const itemRef = useRef(null);
     const { label = '', options = [], type } = props;

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

@@ -1,2 +1,2 @@
-export * from './Option';
-export * from './NumOfDaysRanges';
+export { Option } from './Option';
+export { NumOfDaysRanges } from './NumOfDaysRanges';

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/index.js

@@ -1,2 +1,2 @@
-export * from './Option';
-export * from './NumOfDaysRanges';
+export { Option } from './Option';
+export { NumOfDaysRanges } from './NumOfDaysRanges';

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/TimeRangeDisplay.js

@@ -10,22 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import cls from 'clsx';
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef } from 'react';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ACTION_TYPES } from '../../actions';
 import { useCalendarSelectionContext } from '../../hooks';
 import { getRangeTypeSelectedTitle, getRangeValueSelctedTitle } from '../../utils';
 import { StyledBtnDisplayWrapper } from './styled';
-import Icon from '@antscorp/icons';
 const { Text } = Typography;
 export const TimeRangeDisplay = forwardRef((props, ref) => {
     const { showType = true, formatStart, formatEnd, operator } = props, rest = __rest(props, ["showType", "formatStart", "formatEnd", "operator"]);
     const { state, action } = useCalendarSelectionContext();
-    // console.log({ state, action });
-    const [collapse, setCollapse] = useState(false);
-    useEffect(() => {
-        setCollapse(false);
-    }, []);
     const { rangeInfo, rangeValue } = state.value.original;
     const handleOpenPopover = () => {
         action.dispatch({ type: ACTION_TYPES.togglePopover });
@@ -36,14 +30,14 @@ export const TimeRangeDisplay = forwardRef((props, ref) => {
         formatEnd,
         operator,
     });
-    // console.log({ rangeSelectedTitle, rangeValueTitles });
+    const renderDateTitle = (title) => (React.createElement(Text, { className: "range-date-title", ellipsis: {
+            tooltip: title,
+        } }, title));
     return (React.createElement(StyledBtnDisplayWrapper, Object.assign({ ref: ref }, rest, { onClick: handleOpenPopover, role: "button" }),
         showType && (React.createElement(Text, { className: "range-type", ellipsis: { tooltip: rangeSelectedTitle } }, rangeSelectedTitle)),
-        React.createElement("div", { className: cls('range-date', { collapse: state.open }) },
-            rangeValue.length > 0 && (React.createElement(Text, { className: "range-date-title", ellipsis: { tooltip: rangeValueTitles[0] } },
-                rangeValueTitles[0],
-                React.createElement(Icon, { className: "collapse-btn", type: "icon-ants-angle-down", style: { fontSize: 9 } }))),
+        React.createElement("div", { className: cls('range-date') },
+            rangeValue.length > 0 && renderDateTitle(rangeValueTitles[0]),
             rangeValue.length > 1 && (React.createElement("div", { className: cls('collapse-wrapper') }, rangeValueTitles.slice(1).map(title => (React.createElement(React.Fragment, { key: title },
                 React.createElement("div", { className: "compare-title" }, "Compare"),
-                React.createElement(Text, { className: "range-date-title", ellipsis: { tooltip: title } }, title)))))))));
+                renderDateTitle(title)))))))));
 });

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/styled.js

@@ -1,70 +1,29 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledBtnDisplayWrapper = styled.div `
   display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
-  background-color: transparent;
   cursor: pointer;
   width: fit-content;
+  flex-direction: column;
+  gap: 4px;
+  line-height: 1.4;
 
   .range-type {
-    /* font-size: 0.75rem;
-    width: fit-content;
-    padding: 2px 8px; */
-
     display: block;
-    font-size: 0.813rem;
-    margin-right: 0.5rem;
-    color: rgb(127, 127, 127);
+    font-size: 11px;
+    padding: 3px 5px;
+    border-radius: 3px;
+    width: fit-content;
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw2};
+    line-height: inherit;
   }
 
-  .range-date {
-    border-top: none;
-    border-right: none;
-    border-left: none;
-    border-image: initial;
-    background: transparent;
-    border-bottom: 1px solid rgb(184, 207, 230);
-    text-align: left;
-    display: flex;
-    -webkit-box-pack: justify;
-    justify-content: space-between;
-    -webkit-box-align: center;
-    align-items: center;
-    font-size: 0.75rem;
-    padding: 2px 8px;
-    max-width: unset;
-
-    .range-date-title {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .collapse-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      overflow: hidden;
-
-      .compare-title {
-        font-size: 11px;
-        color: #878d93;
-      }
-    }
-
-    .collapse-btn {
-      padding: 4px;
-    }
-
-    &.collapse {
-      .collapse-wrapper {
-        height: 0;
-      }
-
-      .collapse-btn {
-        transform: rotate(180deg);
-      }
-    }
+  .range-date-title {
+    padding: 3px 5px;
+    border-radius: 3px;
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
+    line-height: inherit;
   }
 `;

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

@@ -21,5 +21,36 @@ export declare const CalendarSelectionConstants: {
         readonly days_up_to_today: "days_up_to_today";
         readonly days_up_to_yesterday: "days_up_to_yesterday";
     };
+    AUTO_UPDATE_TO_KEY: {
+        readonly today: "today";
+        readonly yesterday: "yesterday";
+        readonly fixed: "fixed";
+    };
 };
 export type { TriggerOutInfo, CalendarSelectionValue } from './types';
+export declare const CalendarSelectionUtils: {
+    getDefaultDate: () => {
+        toDay: string;
+        yesterday: string;
+        startWeekSS: string;
+        startWeekMS: string;
+        last7Days: string;
+        startLastWeekSS: string;
+        startLastWeekMS: string;
+        endLastWeekSS: string;
+        endLastWeekMS: string;
+        last14Days: string;
+        startOfThisMonth: string;
+        endOfThisMonth: string;
+        last30Days: string;
+        lastMonthFirstDate: string;
+        lastMonthLastDate: string;
+        thisQuaterFirstDate: string;
+        thisQuaterLastDate: string;
+        lastQuaterFirstDate: string;
+        lastQuaterLastDate: string;
+        maxSub: number;
+        todayUptoCount: (val: number) => string;
+        yesterdayUptoCount: (val: number) => string;
+    };
+};

package/es/components/molecules/CalendarSelection/index.js

@@ -1,6 +1,11 @@
-import { TRIGGER_OUT_MODE, SELECTION_KEY } from './constants';
+import { TRIGGER_OUT_MODE, SELECTION_KEY, AUTO_UPDATE_TO_KEY } from './constants';
+import { getDefaultDate } from './utils';
 export { CalendarSelection } from './CalendarSelection';
 export const CalendarSelectionConstants = {
     TRIGGER_OUT_MODE,
     SELECTION_KEY,
+    AUTO_UPDATE_TO_KEY,
+};
+export const CalendarSelectionUtils = {
+    getDefaultDate,
 };

package/es/components/molecules/CalendarSelection/utils.js

@@ -7,7 +7,7 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import { AUTO_UPDATE_TO_KEY, DEFAULT_NUM_UP_TO, MAP_TITLE, RANGE_LIMIT, SELECTION_KEY, } from './constants';
 import { last } from 'lodash';
-import { asssertCannotReach } from '@antscorp/antsomi-ui/es/utils/common';
+import { asssertCannotReach } from '@antscorp/antsomi-ui/es/utils';
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);

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

@@ -48,6 +48,7 @@ export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
 export { SearchPopover, PopoverAddField } from './SearchPopover';
+export { CalendarSelection, CalendarSelectionConstants, CalendarSelectionUtils, } from './CalendarSelection';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
@@ -55,7 +56,6 @@ export * from './DrawerDetail';
 export * from './ThumbnailCard';
 export * from './ProcessLoading';
 export { EditorScript } from './EditorScript';
-export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';

package/es/components/molecules/index.js

@@ -48,6 +48,7 @@ export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
 export { SearchPopover, PopoverAddField } from './SearchPopover';
+export { CalendarSelection, CalendarSelectionConstants, CalendarSelectionUtils, } from './CalendarSelection';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
@@ -55,6 +56,5 @@ export * from './DrawerDetail';
 export * from './ThumbnailCard';
 export * from './ProcessLoading';
 export { EditorScript } from './EditorScript';
-export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

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

@@ -30,7 +30,7 @@ const styles = {
 };
 export const ChildMenu = memo(props => {
     const { items = [], onMenuClick } = props;
-    const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
+    const { auth, env } = useLeftMenuStore(store => store.state.appConfig) || {};
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
     const menuItems = useLeftMenuStore(store => store.state.menuItems);
     const customItems = useLeftMenuStore(store => store.state.customItems);
@@ -57,7 +57,12 @@ export const ChildMenu = memo(props => {
         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;
+            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

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

@@ -13,7 +13,7 @@ export const usePermission = () => {
     const appConfig = useLeftMenuStore(store => store.state.appConfig);
     const isCustomized = useLeftMenuStore(store => store.state.isCustomized);
     const { isGrouped, objectId, objectType } = useLeftMenuStore(store => store.state.dashboardParams);
-    const { auth, languageCode = 'en', env = 'development' } = appConfig || {};
+    const { auth, languageCode = 'en', env = 'development', permissionDomain } = appConfig || {};
     const { pathname, hash } = window.location;
     const { data: menuList } = useGetListMenu({
         args: {
@@ -63,7 +63,7 @@ export const usePermission = () => {
         args: {
             auth: {
                 token: auth === null || auth === void 0 ? void 0 : auth.token,
-                url: PERMISSION_API,
+                url: permissionDomain || PERMISSION_API,
                 userId: auth === null || auth === void 0 ? void 0 : auth.userId,
                 accountId: auth === null || auth === void 0 ? void 0 : auth.userId,
             },

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

@@ -32,7 +32,7 @@ export declare const getGeneratePath: (path: string, params?: Partial<PayloadInf
  * This is used to delete the hash of the path returned from the api,
  * the purpose of which is to compare with the url to activate the app
  */
-export declare const getComparePath: (path: string) => string;
+export declare const getComparePath: (path: string, env?: string) => string;
 /**
  * Creates an initial feature menu item object with default values.
  * @param {Partial<TFeatureMenu>} featureMenuItem - The partial feature menu item object.
@@ -82,6 +82,7 @@ export declare const findLastMatchedItemByUrl: (args: {
     url: string;
     menuItems: TFeatureMenu[];
     auth?: Partial<PayloadInfo>;
+    env?: string;
 }) => TFeatureMenu | undefined;
 export declare const findPathOfActiveItem: (args: {
     activeMenuItem: TFeatureMenu;

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

@@ -16,6 +16,7 @@ import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MEN
 import { MARKETING_CHANNEL_CODE } from '../../../template/Layout/constants';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { ENV } from '@antscorp/antsomi-ui/es/config';
 const PATH = 'src/components/organism/LeftMenu/utils/index.ts';
 /**
  * Converts a feature menu item to a menu item suitable for rendering in the UI.
@@ -101,8 +102,11 @@ export const getGeneratePath = (path, params) => {
  * This is used to delete the hash of the path returned from the api,
  * the purpose of which is to compare with the url to activate the app
  */
-export const getComparePath = (path) => {
+export const getComparePath = (path, env) => {
     var _a;
+    if (env !== ENV.DEV) {
+        return path;
+    }
     if (path === null || path === void 0 ? void 0 : path.includes('#')) {
         const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
         return customPath;

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

@@ -36,7 +36,7 @@ export const Layout = memo(props => {
     const _a = leftMenuProps || {}, { className = '' } = _a, restOfLeftMenuProps = __rest(_a, ["className"]);
     const _b = workspaceProps || {}, { workspaceContentProps } = _b, restOfWorkspaceProps = __rest(_b, ["workspaceContentProps"]);
     const appConfig = useContextSelector(AppConfigContext, state => state);
-    const { auth, languageCode, appCode, env } = appConfig;
+    const { auth, languageCode, appCode, permissionDomain: configPermissionDomain, env } = appConfig;
     const { token, userId, portalId } = auth || {};
     const showLeftMenu = useLayoutStore(store => store.state.leftMenu.show);
     const header = useLayoutStore(store => store.state.header);
@@ -63,6 +63,12 @@ export const Layout = memo(props => {
     // Memo
     const permissionDomain = useMemo(() => {
         var _a;
+        /**
+         * Priority for permission domain
+         */
+        if (configPermissionDomain) {
+            return configPermissionDomain;
+        }
         /**
          * Check if appCode not exist and portalId is SANDBOX
          * then return production permission api
@@ -76,7 +82,7 @@ export const Layout = memo(props => {
             default:
                 return PERMISSION_API;
         }
-    }, [appCode, env, portalId]);
+    }, [appCode, configPermissionDomain, env, portalId]);
     const iamDomain = useMemo(() => {
         var _a;
         /**

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

@@ -8,6 +8,8 @@ export interface AppConfigProps {
     menuCode?: string;
     languageCode?: string;
     urlLogout?: string;
+    /** Domain */
+    permissionDomain?: string;
     setAppConfig: React.Dispatch<React.SetStateAction<AppConfigProviderProps>>;
 }
 export interface AppConfigProviderProps extends Omit<AppConfigProps, 'setAppConfig'> {

package/es/utils/common.d.ts

@@ -63,7 +63,6 @@ export declare const isEmail: (email: string) => boolean;
  */
 export declare function mapNumberToOrdinalText(num: number): string;
 export declare const searchParamsToObject: (searchParams?: string) => Record<string, unknown>;
-export declare function asssertCannotReach(x: never): void;
 export declare const getShuffleArray: <T>(array: T[]) => T[];
 export declare const snakeCaseToCamelCase: <T = Record<string, any>>(object: Record<string, any> | Record<string, any>[], recursive?: boolean) => T;
 export declare const camelCaseToSnakeCase: <T = Record<string, any>>(object: Record<string, any>, recursive?: boolean) => T;
@@ -86,3 +85,4 @@ export declare const searchStringQuery: (str: string, queryStr: string) => boole
 export declare const isExistedImage: (imageUrl: string) => boolean;
 export declare const getUrlNoCache: (url?: string, cacheValue?: number | string) => string;
 export declare const safeParseJson: (json?: string | null, defaultValue?: any) => any;
+export declare function asssertCannotReach(x: never): void;

package/es/utils/common.js

@@ -387,9 +387,6 @@ export function mapNumberToOrdinalText(num) {
     }
 }
 export const searchParamsToObject = (searchParams = '') => Object.fromEntries(new URLSearchParams(searchParams));
-export function asssertCannotReach(x) {
-    throw new Error('cannot reach this place in the code!');
-}
 export const getShuffleArray = (array) => {
     for (let i = array.length - 1; i > 0; i--) {
         /* Choose a random position from 0 to i */
@@ -502,3 +499,6 @@ export const safeParseJson = (json, defaultValue) => {
         return defaultValue;
     }
 };
+export function asssertCannotReach(x) {
+    throw new Error('cannot reach this place in the code!');
+}

package/package.json

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

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/Option/styled.d.ts

@@ -1 +0,0 @@
-export declare const StyledMenu: any;

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/Option/styled.js

@@ -1,29 +0,0 @@
-import { Menu } from 'antd';
-import styled from 'styled-components';
-export const StyledMenu = styled(Menu) `
-  &.antsomi-menu-root {
-    .antsomi-menu-item {
-      position: relative;
-      color: black;
-      height: 32px;
-      line-height: 32px;
-      border-radius: 0;
-      width: 100%;
-      margin: 0;
-
-      &.antsomi-menu-item-selected {
-        font-weight: bold;
-
-        &:after {
-          content: '';
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 4px;
-          height: 100%;
-          background-color: #005fb8;
-        }
-      }
-    }
-  }
-`;