@antscorp/antsomi-ui 1.3.5-beta.2 → 1.3.5-beta.21

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

@@ -0,0 +1,52 @@
+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: 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;
+};
+export declare const getRangeValue: ({ rangeInfo, currentRangeValue, limitNumOfDays, }: {
+    rangeInfo: RangeInfo;
+    currentRangeValue: RangeValue[];
+    limitNumOfDays?: number | undefined;
+}) => RangeValue[];
+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;
+    rangeValue: RangeValue[];
+};
+export declare const genTriggerOut: ({ mode, id, }: {
+    mode: ReducerState['triggerOut']['mode'];
+    id?: number | undefined;
+}) => {
+    mode: "auto" | "manual";
+    id: number;
+};
+export declare const isAutoUpdateToOption: (value: unknown) => value is AutoUpdateTo;

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

@@ -0,0 +1,304 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import weekday from 'dayjs/plugin/weekday';
+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';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(isoWeek);
+dayjs.extend(quarterOfYear);
+dayjs.extend(weekday);
+dayjs.extend(isSameOrBefore);
+const dayZero = new Date(0);
+export const rangeInfoToStringType = (rangeInfo) => {
+    switch (rangeInfo.type) {
+        case SELECTION_KEY.last_week:
+        case SELECTION_KEY.this_week: {
+            return `${rangeInfo.type}_${rangeInfo.weekStartsOn}`;
+        }
+        default:
+            return rangeInfo.type;
+    }
+};
+export const serializeWeekStartsOn = (rangeType) => {
+    let startOn = last(rangeType.split('_'));
+    if (startOn) {
+        startOn = +startOn;
+    }
+    if (typeof startOn === 'number' && startOn >= 1 && startOn <= 7) {
+        return startOn;
+    }
+};
+export const generateRangeInfo = (rangeType) => {
+    const startOn = serializeWeekStartsOn(rangeType);
+    let rangeInfo = null;
+    switch (true) {
+        case rangeType.startsWith(SELECTION_KEY.this_week): {
+            if (startOn) {
+                rangeInfo = {
+                    type: SELECTION_KEY.this_week,
+                    weekStartsOn: startOn,
+                };
+            }
+            break;
+        }
+        case rangeType.startsWith(SELECTION_KEY.last_week): {
+            if (startOn) {
+                rangeInfo = {
+                    type: SELECTION_KEY.last_week,
+                    weekStartsOn: startOn,
+                };
+            }
+            break;
+        }
+        default:
+            break;
+    }
+    switch (rangeType) {
+        case SELECTION_KEY.custom: {
+            rangeInfo = {
+                type: rangeType,
+                autoUpdateTo: AUTO_UPDATE_TO_KEY.fixed,
+            };
+            break;
+        }
+        case SELECTION_KEY.yesterday:
+        case SELECTION_KEY.today:
+        case SELECTION_KEY.last_7_days:
+        case SELECTION_KEY.last_14_days:
+        case SELECTION_KEY.last_30_days:
+        case SELECTION_KEY.this_month:
+        case SELECTION_KEY.last_month:
+        case SELECTION_KEY.this_quarter:
+        case SELECTION_KEY.last_quarter:
+        case SELECTION_KEY.all_time: {
+            rangeInfo = { type: rangeType };
+            break;
+        }
+        case SELECTION_KEY.days_up_to_today:
+        case SELECTION_KEY.days_up_to_yesterday: {
+            rangeInfo = {
+                type: rangeType,
+                numOfDays: DEFAULT_NUM_UP_TO,
+            };
+            break;
+        }
+        default:
+            break;
+    }
+    return rangeInfo;
+};
+export const getDefaultDate = () => {
+    const toDayTz = dayjs(new Date());
+    return {
+        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').toISOString(),
+        yesterdayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1) + 1, 'd').toISOString(),
+    };
+};
+export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = RANGE_LIMIT, }) => {
+    const defaultDates = getDefaultDate();
+    const result = currentRangeValue.map(rangeValue => {
+        const temp = {
+            start: defaultDates.toDay,
+            end: defaultDates.toDay,
+        };
+        switch (rangeInfo.type) {
+            case SELECTION_KEY.custom: {
+                temp.start = rangeValue.start;
+                temp.end = rangeValue.end;
+                switch (rangeInfo.autoUpdateTo) {
+                    case AUTO_UPDATE_TO_KEY.today: {
+                        temp.end = defaultDates.toDay;
+                        break;
+                    }
+                    case AUTO_UPDATE_TO_KEY.yesterday: {
+                        temp.end = defaultDates.yesterday;
+                        break;
+                    }
+                    default:
+                        break;
+                }
+                break;
+            }
+            case SELECTION_KEY.today: {
+                temp.start = defaultDates.toDay;
+                temp.end = defaultDates.toDay;
+                break;
+            }
+            case SELECTION_KEY.yesterday: {
+                temp.start = defaultDates.yesterday;
+                temp.end = defaultDates.yesterday;
+                break;
+            }
+            case SELECTION_KEY.this_week: {
+                temp.start =
+                    rangeInfo.weekStartsOn === 1 ? defaultDates.startWeekMS : defaultDates.startWeekSS;
+                temp.end = defaultDates.toDay;
+                break;
+            }
+            case SELECTION_KEY.last_week: {
+                temp.start =
+                    rangeInfo.weekStartsOn === 1
+                        ? defaultDates.startLastWeekMS
+                        : defaultDates.startLastWeekSS;
+                temp.end =
+                    rangeInfo.weekStartsOn === 1 ? defaultDates.endLastWeekMS : defaultDates.endLastWeekSS;
+                break;
+            }
+            case SELECTION_KEY.last_7_days: {
+                temp.start = defaultDates.last7Days;
+                temp.end = defaultDates.yesterday;
+                break;
+            }
+            case SELECTION_KEY.last_14_days: {
+                temp.start = defaultDates.last14Days;
+                temp.end = defaultDates.yesterday;
+                break;
+            }
+            case SELECTION_KEY.last_30_days: {
+                temp.start = defaultDates.last30Days;
+                temp.end = defaultDates.yesterday;
+                break;
+            }
+            case SELECTION_KEY.this_month: {
+                temp.start = defaultDates.startOfThisMonth;
+                temp.end = defaultDates.toDay;
+                break;
+            }
+            case SELECTION_KEY.last_month: {
+                temp.start = defaultDates.lastMonthFirstDate;
+                temp.end = defaultDates.lastMonthLastDate;
+                break;
+            }
+            case SELECTION_KEY.this_quarter: {
+                temp.start = defaultDates.thisQuaterFirstDate;
+                temp.end = defaultDates.toDay;
+                break;
+            }
+            case SELECTION_KEY.last_quarter: {
+                temp.start = defaultDates.lastQuaterFirstDate;
+                temp.end = defaultDates.lastQuaterLastDate;
+                break;
+            }
+            case SELECTION_KEY.all_time: {
+                temp.start = dayjs(defaultDates.toDay).subtract(limitNumOfDays, 'd').toISOString();
+                temp.end = defaultDates.toDay;
+                break;
+            }
+            case SELECTION_KEY.days_up_to_today: {
+                temp.start = dayjs(defaultDates.toDay).subtract(rangeInfo.numOfDays, 'd').toISOString();
+                temp.end = defaultDates.toDay;
+                break;
+            }
+            case SELECTION_KEY.days_up_to_yesterday: {
+                temp.start = dayjs(defaultDates.toDay).subtract(rangeInfo.numOfDays, 'd').toISOString();
+                temp.end = defaultDates.yesterday;
+                break;
+            }
+            default:
+                asssertCannotReach(rangeInfo);
+        }
+        return Object.assign(Object.assign({}, rangeValue), temp);
+    });
+    return result;
+};
+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 = 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 (!((_c = dayjs(start)) === null || _c === void 0 ? void 0 : _c.isSame(dayjs(end), 'y')) && !formatStart) {
+            startFormat = `${startFormat} 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;
+};
+export const getRangeTypeSelectedTitle = (rangeInfo) => {
+    let label = MAP_TITLE[rangeInfo.type];
+    switch (rangeInfo.type) {
+        case SELECTION_KEY.days_up_to_yesterday:
+        case SELECTION_KEY.days_up_to_today: {
+            label = `${rangeInfo.numOfDays} ${label}`;
+            break;
+        }
+        default:
+            break;
+    }
+    return label;
+};
+export const combineCurrentValue = (state) => {
+    const { rangeValue, rangeInfo } = state.value.current;
+    return { rangeInfo, rangeValue };
+};
+export const genTriggerOut = (() => {
+    let catchedId = 0;
+    return function increaseTriggerOut({ mode, id, }) {
+        if (!id)
+            catchedId++;
+        return { mode, id: id || catchedId };
+    };
+})();
+// export const serializeRangeColors = (rangeValue: RangeValue[]) => {
+//   const listDate = rangeValue
+//     .flatMap(range => [range.start, range.end])
+//     .sort((a, b) => ascending(a.toDate(), b.toDate()));
+//   let rangeDates = listDate.reduce<RangeValue[]>((acc, current, idx) => {
+//     if (listDate[idx + 1]) {
+//       acc.push({ start: current, end: listDate[idx + 1] });
+//     }
+//     return acc;
+//   }, []);
+//   rangeDates = uniqWith(rangeDates, (a, b) => a.start.isSame(b.start) && a.end.isSame(b.end));
+//   rangeDates = rangeDates.map(rangeDate => {
+//     const colors: string[] = [];
+//     rangeValue.forEach(range => {
+//       if (
+//         range.color &&
+//         rangeDate.start.isBetween(range.start, range.end, 'd', '[]') &&
+//         rangeDate.end.isBetween(range.start, range.end, 'd', '[]')
+//       ) {
+//         colors.push(range.color);
+//       }
+//     });
+//     return { ...rangeDate, colors: uniq(colors) };
+//   });
+//   return rangeDates;
+// };
+export const isAutoUpdateToOption = (value) => {
+    if (typeof value === 'string' && Object.values(AUTO_UPDATE_TO_KEY).some(v => v === value)) {
+        return true;
+    }
+    return false;
+};

package/es/components/molecules/ColorPicker/CustomPicker/index.js

@@ -53,7 +53,7 @@ const styleContainAlpha = {
 const CustomPicker = props => {
     var _a, _b, _c, _d;
     // Props
-    const { className, style, children, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "onChange", "onChangeComplete", "presetColors"]);
+    const { className, style, children, isHideAlpha, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "isHideAlpha", "onChange", "onChangeComplete", "presetColors"]);
     // State
     const [isShowRgbaInput, setShowRgbaInput] = useState(true);
     const onChangeRgbaColor = (key, value) => {
@@ -101,9 +101,9 @@ const CustomPicker = props => {
                 React.createElement("div", { style: rgbaStyling },
                     React.createElement(InputNumberWrapper, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }),
                     React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "B")),
-                React.createElement("div", { style: rgbaStyling },
+                !isHideAlpha && (React.createElement("div", { style: rgbaStyling },
                     React.createElement(InputNumberWrapper, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A")))) : (React.createElement(EditableInputWrapper, null,
+                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A"))))) : (React.createElement(EditableInputWrapper, null,
                 React.createElement(EditableInput, { value: props.color, onChange: onChange }),
                 React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "HEX"))),
             React.createElement(Button, { onClick: () => {

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

@@ -3,6 +3,7 @@ export interface ColorPickerProps {
     className?: string;
     color?: string;
     presetColors?: any[] | ReactNode;
+    isHideAlpha?: boolean;
     defaultColor?: string;
     icon?: React.ReactNode | string;
     onChange?: (color: string) => void;

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

@@ -21,7 +21,7 @@ const styleBtnColor = {
 };
 export const ColorPicker = props => {
     // Props
-    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, } = props;
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, } = props;
     const { onChange = () => { } } = props;
     // States
     const [color, setColor] = useState(defaultColor);
@@ -74,7 +74,7 @@ export const ColorPicker = props => {
     };
     return (React.createElement(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style },
         showInput && positionInput === 'left' && (React.createElement(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })),
-        React.createElement(Popover, { arrow: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange },
+        React.createElement(Popover, { arrow: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, isHideAlpha: isHideAlpha, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange },
             React.createElement("div", { className: "antsomi-popover-button", style: styleBtnColor }, iconNode || (React.createElement("span", { style: {
                     backgroundColor: color,
                     display: 'block',
@@ -88,6 +88,7 @@ ColorPicker.defaultProps = {
     className: '',
     color: '#000000',
     defaultColor: '#000000',
+    isHideAlpha: false,
     onChange: () => { },
     showInput: true,
     positionInput: 'left',

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

@@ -10,7 +10,7 @@ import { useDeepCompareEffect } from '../../../../../hooks';
 import Icon from '@antscorp/icons';
 import { EventIcon } from '../../../../icons';
 // Components
-import { Input, InputNumber, Divider, Space, Button, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
+import { InputNumber, Divider, Space, Button, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Select, Dropdown } from '@antscorp/antsomi-ui/es/components';
 import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
 import { DropdownLabel } from '../DropdownLabel/DropdownLabel';
@@ -18,7 +18,7 @@ import { DropdownLabel } from '../DropdownLabel/DropdownLabel';
 import { handleError, reorder } from '@antscorp/antsomi-ui/es/utils';
 import { calculationDateAdvanced, getCellRender, getFormatDisplay, getPickerRender, getTimePickerRender, } from './utils';
 // Styled
-import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, } from './styled';
+import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, InputStyled, TimeLabel, } from './styled';
 // Constants
 import { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, ADVANCED_PICKER_TYPE, WEEK_ARR, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, DAY_LABEL_SHORT, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, GRANULARITY_MAPPING, } from './constants';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
@@ -244,7 +244,8 @@ export const AdvancedPicker = props => {
     };
     const onClickNow = () => {
         try {
-            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs().format(format) })));
+            const currentDate = dayjs();
+            setState(state => (Object.assign(Object.assign({}, state), { date: currentDate.format(format) })));
         }
         catch (error) {
             handleError(error, {
@@ -381,7 +382,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, 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, 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,
                 // }}
@@ -391,32 +392,39 @@ export const AdvancedPicker = props => {
                     'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType),
                     'is-minutes-picker': valueType === 'MINUTE',
                     'is-hours-picker': valueType === 'HOUR',
-                }), renderExtraFooter: () => (React.createElement(React.Fragment, null,
-                    React.createElement(DatePickerHeader, null,
-                        React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay }),
-                        renderDateTypeOptions()),
-                    React.createElement(DatePickerFooter, null,
-                        React.createElement("div", { style: { padding: '0 10px' } },
-                            React.createElement(ErrorMessage, { errorMessage: errorMessage })),
-                        renderDropdownFooter()),
-                    React.createElement(Divider, null))), picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
+                }), renderExtraFooter: () => {
+                    const timeFormat = getTimePickerRender(valueType);
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement(DatePickerHeader, null,
+                            React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay }),
+                            renderDateTypeOptions()),
+                        React.createElement(DatePickerFooter, null,
+                            React.createElement("div", { style: { padding: '0 10px' } },
+                                React.createElement(ErrorMessage, { errorMessage: errorMessage })),
+                            renderDropdownFooter()),
+                        React.createElement(Divider, null),
+                        timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30 },
+                            ['HH', 'HHmm', 'HHmmss'].includes(timeFormat) ? React.createElement("span", null, "Hours") : null,
+                            ['HHmm', 'HHmmss', 'mm'].includes(timeFormat) ? React.createElement("span", null, "Minutes") : null,
+                            timeFormat === 'HHmmss' ? React.createElement("span", null, "Seconds") : null)) : null));
+                }, picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
                     ? {
                         format: getTimePickerRender(valueType),
                     }
                     : undefined, suffixIcon: React.createElement(CalendarIconWrapper, { style: {
                         pointerEvents: disabled ? 'none' : 'all',
                     }, onClick: () => toggleOpenDropdown() },
-                    React.createElement(EventIcon, { width: 20, height: 20, fill: errorMessage ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorError : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw10 })), cellRender: cellRender }))) : (React.createElement(Dropdown, { disabled: disabled, open: !disabled && isOpen, dropdownRender: dropdownRender, trigger: ['click'], 
+                    React.createElement(EventIcon, { width: 20, height: 20, fill: errorMessage ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorError : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw10 })), cellRender: cellRender, onOpenChange: () => toggleOpenDropdown() }))) : (React.createElement(Dropdown, { disabled: disabled, open: !disabled && isOpen, dropdownRender: dropdownRender, trigger: ['click'], 
             // onOpenChange={(open, info) => {
             //   console.log('🚀🚀🚀 ', 4, { open, info });
             //   toggleOpenDropdown();
             // }}
             overlayStyle: { width: 'fit-content', minWidth: 'auto' } },
             React.createElement(Tooltip, { title: selectedDateTitle },
-                React.createElement(Input, { disabled: disabled, onClick: () => toggleOpenDropdown(), readOnly: true, suffix: React.createElement(CalendarIconWrapper, { style: {
+                React.createElement(InputStyled, { disabled: disabled, onClick: () => toggleOpenDropdown(), readOnly: true, suffix: React.createElement(CalendarIconWrapper, { style: {
                             pointerEvents: disabled ? 'none' : 'all',
                         }, onClick: () => toggleOpenDropdown() },
-                        React.createElement(EventIcon, { width: 19, height: 19 })), style: inputStyle, value: selectedDateTitle, status: errorMessage ? 'error' : '' }))))));
+                        React.createElement(EventIcon, { width: 19, height: 19 })), style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), value: selectedDateTitle, status: errorMessage ? 'error' : '' }))))));
 };
 AdvancedPicker.defaultProps = {
     label: '',

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

@@ -1,7 +1,12 @@
+/// <reference types="react" />
 export declare const DropdownContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DatePickerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DatePickerCustomInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const InputStyled: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../../../../atoms/Input").InputProps, any>;
 export declare const DatePickerFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CalendarIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TimeLabel: import("styled-components").StyledComponent<"div", any, {
+    $width: number;
+}, never>;

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

@@ -1,7 +1,8 @@
 var _a, _b, _c, _d, _e;
 // Libraries
-import { THEME } from '../../../../../constants';
 import styled from 'styled-components';
+import { Input } from '@antscorp/antsomi-ui/es/components/atoms';
+import { THEME } from '../../../../../constants';
 export const DropdownContent = styled.div `
   width: 250px;
   padding: 10px 10px 0px 10px;
@@ -80,6 +81,12 @@ export const DatePickerHeader = styled.div `
 export const DatePickerCustomInput = styled.input `
   font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
   color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw10} !important;
+  text-overflow: ellipsis;
+`;
+export const InputStyled = styled(Input) `
+  input {
+    text-overflow: ellipsis;
+  }
 `;
 export const DatePickerFooter = styled.div `
   position: absolute;
@@ -91,3 +98,26 @@ export const CalendarIconWrapper = styled.div `
   cursor: pointer;
   pointer-events: all;
 `;
+export const TimeLabel = styled.div `
+  position: absolute;
+  right: 0;
+  top: 120px;
+  height: 39.1px;
+  width: ${props => `${props.$width}px`};
+  /* width: 180px; */
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+
+  span {
+    width: 60px;
+    display: block;
+    text-align: center;
+    font-weight: bold;
+    border-left: 1px solid rgba(5, 5, 5, 0.06);
+
+    &:first-child {
+      border-left-color: transparent;
+    }
+  }
+`;

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

@@ -30,7 +30,7 @@ export declare const getCellRender: (current: number | Dayjs, valueType: ValueTy
  * @returns {'date' | 'week' | 'month' | 'quarter' | 'year'} picker ant-design props to render type of calendar
  */
 export declare const getPickerRender: (valueType: ValueTypes) => 'date' | 'week' | 'month' | 'quarter' | 'year';
-export declare const getTimePickerRender: (valueType: ValueTypes) => "HH" | "HHmm" | "HHmmss" | "mm" | undefined;
+export declare const getTimePickerRender: (valueType: ValueTypes) => 'HH' | 'HHmm' | 'HHmmss' | 'mm' | undefined;
 export declare function getLabelQuarterRange(day: string, format: string, locale: string, showYear?: boolean): string;
 export declare function getLabelQuarterRange(quarter: number, year?: number): string;
 export declare const getFormatDisplay: (operatorKey?: TOperatorKey, type?: TAdvancedType, valueType?: ValueTypes, formatInputDisplay?: string) => {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { TShowCalculationTypeCondition, ValueTypes } from '../AdvancedPicker/types';
 import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
 export interface AdvancedRangePickerProps {
@@ -12,6 +12,8 @@ export interface AdvancedRangePickerProps {
     showLabel?: boolean;
     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, 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') {
@@ -54,9 +54,10 @@ export const AdvancedRangePicker = props => {
             });
         }
     };
-    return (React.createElement(Space, { size: 20 },
-        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.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') })));
+    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'), 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'), inputStyle: inputStyle })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

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

@@ -9,6 +9,10 @@ export const StyledModal = styled(Modal) `
       right: 10px !important;
       width: 24px !important;
       height: 24px !important;
+
+      .antsomi-modal-close-x {
+        padding: 0px;
+      }
     }
 
     .antsomi-modal-body {