@antscorp/antsomi-ui 1.3.5-beta.15 → 1.3.5-beta.17

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

@@ -3,10 +3,10 @@ import React, { useLayoutEffect, useReducer, useRef } from 'react';
 import { Divider } from 'antd';
 import { ActionContext, StateContext } from './context';
 import { reducer, INITIAL_STATE } from './reducer';
-import { StyledPopover, StyledPopoverBody } from './styled';
+import { StyledPopover, StyledPopoverBody, StyledPopoverContainer } from './styled';
 import { CustomPicker, Footer, RangeSelectOptions, TimeRangeDisplay } from './components';
 import { LOCAL_TIMEZONE, RANGE_LIMIT } from './constants';
-import { initState } from './actions';
+import { initState, resetValue } from './actions';
 import { useTriggerOut } from './hooks/useTriggerOut';
 export const CalendarSelection = props => {
     const initialed = useRef(false);
@@ -18,15 +18,15 @@ export const CalendarSelection = props => {
         dispatch(initState(value, !initialed.current));
         initialed.current = true;
     }, [value]);
-    // useLayoutEffect(() => {
-    //   if (!state.open) {
-    //     return () => {
-    //       dispatch(resetValue());
-    //     };
-    //   }
-    // }, [state.open]);
+    useLayoutEffect(() => {
+        if (!state.open) {
+            return () => {
+                dispatch(resetValue());
+            };
+        }
+    }, [state.open]);
     useTriggerOut({ state, dispatch, onChange });
-    const popoverContent = (React.createElement(React.Fragment, null,
+    const popoverContent = (React.createElement(StyledPopoverContainer, null,
         React.createElement(StyledPopoverBody, null,
             React.createElement(RangeSelectOptions, null),
             React.createElement(Divider, { type: "vertical", style: { margin: 0, height: 'auto' } }),
@@ -41,5 +41,5 @@ export const CalendarSelection = props => {
                     if (!isOpen)
                         dispatch({ type: 'toggle_popover' });
                 } }),
-                React.createElement(TimeRangeDisplay, { showType: timeDisplayProps === null || timeDisplayProps === void 0 ? void 0 : timeDisplayProps.showType })))));
+                React.createElement(TimeRangeDisplay, Object.assign({}, timeDisplayProps))))));
 };

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

@@ -30,12 +30,9 @@ export const CustomPicker = () => {
         }
     }, [rangeValue.length]);
     const handleCalendarChange = (start, end) => {
-        var _a, _b;
         if (!start || !end || activeRangeIdx === null)
             return;
         const replacedRange = rangeValue[activeRangeIdx];
-        if (((_a = replacedRange.start) === null || _a === void 0 ? void 0 : _a.isSame(start)) && ((_b = replacedRange.end) === null || _b === void 0 ? void 0 : _b.isSame(end)))
-            return;
         const updatedRangeValue = [...rangeValue];
         updatedRangeValue.splice(activeRangeIdx, 1, Object.assign(Object.assign({}, replacedRange), { start,
             end }));
@@ -69,7 +66,7 @@ export const CustomPicker = () => {
             } },
             React.createElement("div", { className: "range-input" },
                 React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
-                React.createElement(RangePicker, { open: true, value: [range.start, range.end], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
+                React.createElement(RangePicker, { 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;
@@ -80,8 +77,18 @@ export const CustomPicker = () => {
                         return renderCellDate(current, info.originNode);
                     }, onCalendarChange: value => {
                         var _a, _b;
-                        const start = dayjs((_a = value === null || value === void 0 ? void 0 : value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate());
-                        const end = dayjs((_b = value === null || value === void 0 ? void 0 : value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate());
+                        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),

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

@@ -79,7 +79,6 @@ export const CalendarContainerStyled = styled.div `
 
       /* Date node */
       .antsomi-picker-cell-inner {
-        height: 21.5px;
       }
 
       /* Today node */
@@ -110,9 +109,9 @@ export const CalendarContainerStyled = styled.div `
           background: var(--colorInRange) !important;
         }
         .antsomi-picker-cell-inner {
-          background: var(--colorInRange) !important;
+          /* background: var(--colorInRange) !important; */
           &::after {
-            content: none;
+            content: none !important;
             background: var(--colorInRange) !important;
           }
         }
@@ -133,6 +132,18 @@ export const CalendarContainerStyled = styled.div `
           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/TimeRangeDisplay/TimeRangeDisplay.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 export type TimeRangeDisplayProps = {
     showType?: boolean;
+    formatStart?: string;
+    formatEnd?: string;
+    operator?: string;
 };
 export declare const TimeRangeDisplay: React.FC<TimeRangeDisplayProps>;

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

@@ -19,19 +19,23 @@ import { StyledBtnDisplayWrapper } from './styled';
 import Icon from '@antscorp/icons';
 const { Text } = Typography;
 export const TimeRangeDisplay = forwardRef((props, ref) => {
-    const { showType = true } = props, rest = __rest(props, ["showType"]);
+    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.current;
+    const { rangeInfo, rangeValue } = state.value.original;
     const handleOpenPopover = () => {
         action.dispatch({ type: ACTION_TYPES.togglePopover });
     };
     const rangeSelectedTitle = getRangeTypeSelectedTitle(rangeInfo);
-    const rangeValueTitles = getRangeValueSelctedTitle(rangeValue);
+    const rangeValueTitles = getRangeValueSelctedTitle(rangeValue, {
+        formatStart,
+        formatEnd,
+        operator,
+    });
     // console.log({ rangeSelectedTitle, rangeValueTitles });
     return (React.createElement(StyledBtnDisplayWrapper, Object.assign({ ref: ref }, rest, { onClick: handleOpenPopover, role: "button" }),
         showType && (React.createElement(Text, { className: "range-type", ellipsis: { tooltip: rangeSelectedTitle } }, rangeSelectedTitle)),

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

@@ -18,8 +18,8 @@ const DEFAULT_VALUE = {
     rangeInfo: { type: SELECTION_KEY.today },
     rangeValue: [
         {
-            start: dayjs(),
-            end: dayjs(),
+            start: dayjs().toISOString(),
+            end: dayjs().toISOString(),
         },
     ],
 };

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

@@ -2,4 +2,5 @@
 export declare const StyledPopover: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;
+export declare const StyledPopoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledPopoverBody: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -3,8 +3,11 @@ import styled from 'styled-components';
 export const StyledPopover = styled(Popover) `
   font-size: 12px;
 `;
+export const StyledPopoverContainer = styled.div ``;
 export const StyledPopoverBody = styled.div `
   font-size: 12px;
   display: flex;
-  max-width: 100%;
+  max-height: 75vh;
+
+  overflow: auto;
 `;

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

@@ -1,5 +1,4 @@
 import { PopoverProps } from 'antd';
-import { Dayjs } from 'dayjs';
 import { Dispatch } from 'react';
 import { ValueOf } from 'type-fest';
 import { updateRangeInfo, changeRangeType, updateRangeValue, changeAutoUpdateTo, initState, togglePopover, apply, resetValue } from './actions';
@@ -86,8 +85,8 @@ export type DaysUpToYesterday = {
 };
 export type RangeInfo = Custom | ToDay | Yesterday | ThisWeek | LastWeek | Last7Days | Last14Days | Last30Days | ThisMonth | LastMonth | ThisQuarter | LastQuarter | AllTime | DaysUpToToday | DaysUpToYesterday;
 export type RangeValue = {
-    start: Dayjs | null;
-    end: Dayjs | null;
+    start: string | null;
+    end: string | null;
     label?: string;
     color?: string;
 };

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

@@ -1,38 +1,42 @@
-import dayjs from 'dayjs';
 import { AutoUpdateTo, RangeInfo, RangeValue, ReducerState } from './types';
 export declare const rangeInfoToStringType: (rangeInfo: RangeInfo) => string;
 export declare const serializeWeekStartsOn: (rangeType: string) => number | undefined;
 export declare const generateRangeInfo: (rangeType: string) => RangeInfo | null;
 export declare const getDefaultDate: () => {
-    toDay: dayjs.Dayjs;
-    yesterday: dayjs.Dayjs;
-    startWeekSS: dayjs.Dayjs;
-    startWeekMS: dayjs.Dayjs;
-    last7Days: dayjs.Dayjs;
-    startLastWeekSS: dayjs.Dayjs;
-    startLastWeekMS: dayjs.Dayjs;
-    endLastWeekSS: dayjs.Dayjs;
-    endLastWeekMS: dayjs.Dayjs;
-    last14Days: dayjs.Dayjs;
-    startOfThisMonth: dayjs.Dayjs;
-    endOfThisMonth: dayjs.Dayjs;
-    last30Days: dayjs.Dayjs;
-    lastMonthFirstDate: dayjs.Dayjs;
-    lastMonthLastDate: dayjs.Dayjs;
-    thisQuaterFirstDate: dayjs.Dayjs;
-    thisQuaterLastDate: dayjs.Dayjs;
-    lastQuaterFirstDate: dayjs.Dayjs;
-    lastQuaterLastDate: dayjs.Dayjs;
+    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) => dayjs.Dayjs;
-    yesterdayUptoCount: (val: number) => dayjs.Dayjs;
+    todayUptoCount: (val: number) => string;
+    yesterdayUptoCount: (val: number) => string;
 };
 export declare const getRangeValue: ({ rangeInfo, currentRangeValue, limitNumOfDays, }: {
     rangeInfo: RangeInfo;
     currentRangeValue: RangeValue[];
     limitNumOfDays?: number | undefined;
 }) => RangeValue[];
-export declare const getRangeValueSelctedTitle: (rangeValue: RangeValue[]) => string[];
+export declare const getRangeValueSelctedTitle: (rangeValue: RangeValue[], options?: {
+    formatStart?: string;
+    formatEnd?: string;
+    minimize?: boolean;
+    operator?: string;
+}) => string[];
 export declare const getRangeTypeSelectedTitle: (rangeInfo: RangeInfo) => string;
 export declare const combineCurrentValue: (state: ReducerState) => {
     rangeInfo: RangeInfo;

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

@@ -96,28 +96,28 @@ export const generateRangeInfo = (rangeType) => {
 export const getDefaultDate = () => {
     const toDayTz = dayjs(new Date());
     return {
-        toDay: toDayTz,
-        yesterday: toDayTz.subtract(1, 'd'),
-        startWeekSS: toDayTz.weekday(0),
-        startWeekMS: toDayTz.isoWeekday(1),
-        last7Days: toDayTz.subtract(1, 'w'),
-        startLastWeekSS: toDayTz.subtract(1, 'w').weekday(0),
-        startLastWeekMS: toDayTz.subtract(1, 'w').isoWeekday(1),
-        endLastWeekSS: toDayTz.subtract(1, 'w').weekday(6),
-        endLastWeekMS: toDayTz.subtract(1, 'w').isoWeekday(7),
-        last14Days: toDayTz.subtract(14, 'd'),
-        startOfThisMonth: toDayTz.startOf('M'),
-        endOfThisMonth: toDayTz.endOf('M'),
-        last30Days: toDayTz.subtract(30, 'd'),
-        lastMonthFirstDate: toDayTz.subtract(1, 'M').startOf('M'),
-        lastMonthLastDate: toDayTz.subtract(1, 'M').endOf('M'),
-        thisQuaterFirstDate: toDayTz.startOf('Q'),
-        thisQuaterLastDate: toDayTz.endOf('Q'),
-        lastQuaterFirstDate: toDayTz.subtract(1, 'Q').startOf('Q'),
-        lastQuaterLastDate: toDayTz.subtract(1, 'Q').endOf('Q'),
+        toDay: toDayTz.toISOString(),
+        yesterday: toDayTz.subtract(1, 'd').toISOString(),
+        startWeekSS: toDayTz.weekday(0).toISOString(),
+        startWeekMS: toDayTz.isoWeekday(1).toISOString(),
+        last7Days: toDayTz.subtract(1, 'w').toISOString(),
+        startLastWeekSS: toDayTz.subtract(1, 'w').weekday(0).toISOString(),
+        startLastWeekMS: toDayTz.subtract(1, 'w').isoWeekday(1).toISOString(),
+        endLastWeekSS: toDayTz.subtract(1, 'w').weekday(6).toISOString(),
+        endLastWeekMS: toDayTz.subtract(1, 'w').isoWeekday(7).toISOString(),
+        last14Days: toDayTz.subtract(14, 'd').toISOString(),
+        startOfThisMonth: toDayTz.startOf('M').toISOString(),
+        endOfThisMonth: toDayTz.endOf('M').toISOString(),
+        last30Days: toDayTz.subtract(30, 'd').toISOString(),
+        lastMonthFirstDate: toDayTz.subtract(1, 'M').startOf('M').toISOString(),
+        lastMonthLastDate: toDayTz.subtract(1, 'M').endOf('M').toISOString(),
+        thisQuaterFirstDate: toDayTz.startOf('Q').toISOString(),
+        thisQuaterLastDate: toDayTz.endOf('Q').toISOString(),
+        lastQuaterFirstDate: toDayTz.subtract(1, 'Q').startOf('Q').toISOString(),
+        lastQuaterLastDate: toDayTz.subtract(1, 'Q').endOf('Q').toISOString(),
         maxSub: toDayTz.diff(dayZero, 'd'),
-        todayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1), 'd'),
-        yesterdayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1) + 1, 'd'),
+        todayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1), 'd').toISOString(),
+        yesterdayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1) + 1, 'd').toISOString(),
     };
 };
 export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = RANGE_LIMIT, }) => {
@@ -206,17 +206,17 @@ export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = R
                 break;
             }
             case SELECTION_KEY.all_time: {
-                temp.start = defaultDates.toDay.subtract(limitNumOfDays, 'd');
+                temp.start = dayjs(defaultDates.toDay).subtract(limitNumOfDays, 'd').toISOString();
                 temp.end = defaultDates.toDay;
                 break;
             }
             case SELECTION_KEY.days_up_to_today: {
-                temp.start = defaultDates.toDay.subtract(rangeInfo.numOfDays, 'd');
+                temp.start = dayjs(defaultDates.toDay).subtract(rangeInfo.numOfDays, 'd').toISOString();
                 temp.end = defaultDates.toDay;
                 break;
             }
             case SELECTION_KEY.days_up_to_yesterday: {
-                temp.start = defaultDates.toDay.subtract(rangeInfo.numOfDays, 'd');
+                temp.start = dayjs(defaultDates.toDay).subtract(rangeInfo.numOfDays, 'd').toISOString();
                 temp.end = defaultDates.yesterday;
                 break;
             }
@@ -227,17 +227,21 @@ export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = R
     });
     return result;
 };
-export const getRangeValueSelctedTitle = (rangeValue) => {
+export const getRangeValueSelctedTitle = (rangeValue, options) => {
+    const { formatStart, formatEnd, operator = '-' } = options || {};
     const result = [];
     rangeValue.forEach(range => {
+        var _a, _b, _c, _d, _e;
         const { start, end } = range;
-        let startFormat = 'MMM D';
-        if (start === null || start === void 0 ? void 0 : start.isSame(end, 'D')) {
-            return result.push(start === null || start === void 0 ? void 0 : start.format('MMM D YYYY'));
+        let startFormat = formatStart || 'MMM D';
+        const endFormat = formatEnd || 'MMM D YYYY';
+        if ((_a = dayjs(start)) === null || _a === void 0 ? void 0 : _a.isSame(dayjs(end), 'D')) {
+            return result.push((_b = dayjs(start)) === null || _b === void 0 ? void 0 : _b.format('MMM D YYYY'));
         }
-        if (!(start === null || start === void 0 ? void 0 : start.isSame(end, 'y')))
+        if (!((_c = dayjs(start)) === null || _c === void 0 ? void 0 : _c.isSame(dayjs(end), 'y')) && !formatStart) {
             startFormat = `${startFormat} YYYY`;
-        result.push(`${start === null || start === void 0 ? void 0 : start.format(startFormat)} - ${end === null || end === void 0 ? void 0 : end.format('MMM D YYYY')}`);
+        }
+        result.push(`${(_d = dayjs(start)) === null || _d === void 0 ? void 0 : _d.format(startFormat)} ${operator} ${(_e = dayjs(end)) === null || _e === void 0 ? void 0 : _e.format(endFormat)}`);
     });
     return result;
 };

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

@@ -385,7 +385,7 @@ export const AdvancedPicker = props => {
             // ref={ref}
             , { 
                 // ref={ref}
-                disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 
+                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, 
                 // style={{
                 //   width: 120,
                 // }}

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

@@ -13,6 +13,7 @@ export interface AdvancedRangePickerProps {
     showTime?: boolean;
     timezone?: string;
     separator?: ReactNode;
+    inputStyle?: React.CSSProperties;
     onChange?: ({ timeRange, mode }: TOnChangePayload) => void;
 }
 export declare const AdvancedRangePicker: React.FC<AdvancedRangePickerProps>;

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

@@ -19,7 +19,7 @@ const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components
 export const AdvancedRangePicker = props => {
     const { t } = i18nInstance;
     // Props
-    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, onChange, } = props;
+    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -55,9 +55,9 @@ export const AdvancedRangePicker = props => {
         }
     };
     return (React.createElement(Space, { size: 20, align: "end" },
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "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') }),
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "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 }),
         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: 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') })));
+        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: 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 })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

package/package.json

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