@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,4 +1,4 @@
-var _a, _b;
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react/no-unused-prop-types */
 // Libraries
 import React, { useEffect, useMemo, useCallback, useState, useImperativeHandle } from 'react';
@@ -21,7 +21,7 @@ import { calculationDateAdvanced, getCellRender, getFormatDisplay, getPickerRend
 // 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 { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, ADVANCED_PICKER_TYPE, WEEK_ARR, DAY_LABEL_SHORT, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, GRANULARITY_MAPPING, } from './constants';
 import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
 import { useOutsideClick } from '@antscorp/antsomi-ui/es/hooks/useOutsideClick';
 const isDisabledSpecificTime = (current, info, disabledTime, date) => {
@@ -41,10 +41,9 @@ const isDisabledSpecificTime = (current, info, disabledTime, date) => {
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
 const { useToken } = theme;
 const { Text } = Typography;
-export const AdvancedPicker = React.forwardRef((props, componentRef) => {
-    var _a, _b;
+export const AdvancedPicker = React.forwardRef((props, ref) => {
     // Props
-    const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onlyShowFixed, disabledTime, onUpdatedNewDate, onApply, } = props;
+    const { label = '', inputStyle = { width: 120 }, popupStyle = { borderRadius: THEME.token?.borderRadiusLG ?? 10 }, dateTypeKeysShow = [], calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType = VALUE_TYPES.YEAR_MONTH_DAY, option: propsOption, operatorKey = 'after', type = ADVANCED_PICKER_TYPE.START_DATE.value, date: propsDate = dayjs().format(DEFAULT_DATE_FORMAT), format = DEFAULT_DATE_FORMAT, errorMessage, disableAfterDate, disableBeforeDate, disabled, timezone, isViewMode, onlyShowFixed, disabledTime, onUpdatedNewDate, onApply, } = props;
     // Memo
     const newDateTypes = useMemo(() => {
         if (dateTypeKeysShow && dateTypeKeysShow.length) {
@@ -60,7 +59,7 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
         return DATE_TYPES;
     }, [dateTypeKeysShow, defaultDateTypeKey]);
     const newCalculationDates = useMemo(() => CALCULATION_DATES.filter(calculationDate => GRANULARITY_MAPPING[valueType].includes(calculationDate.value)), [valueType]);
-    const { formatDisplay } = getFormatDisplay(operatorKey, type, valueType, operatorKey === 'between' ? '' : formatInputDisplay);
+    const { formatDisplay } = getFormatDisplay(operatorKey, type, valueType);
     // State
     const [state, setState] = useState({
         isOpen: false,
@@ -80,12 +79,16 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
         dateDisplay: dayjs().tz(timezone).format(format),
     });
     const { isOpen, option, date, dateDisplay } = state;
-    useImperativeHandle(componentRef, () => ({
+    useImperativeHandle(ref, () => ({
         forceUpdate(date) {
             const newDate = dayjs(date, format, true).isValid()
                 ? dayjs(date, format).format(format)
                 : date;
-            setState(state => (Object.assign(Object.assign({}, state), { date: newDate, dateDisplay: newDate })));
+            setState(state => ({
+                ...state,
+                date: newDate,
+                dateDisplay: newDate,
+            }));
         },
     }), [format]);
     const isShowFixed = option.dateType.value === 'fixed' || onlyShowFixed;
@@ -96,16 +99,21 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
     const currMonth = currDate.month();
     const [currMonthSelected, setCurrMonthSelected] = useState(currMonth);
     const newCalculationTypes = useMemo(() => {
-        var _a;
         if (calculationTypeKeysShow && calculationTypeKeysShow.length) {
             const draftCalculationTypes = CALCULATION_TYPES.filter(calculationType => calculationTypeKeysShow.some(key => key === calculationType.value));
             return draftCalculationTypes;
         }
         if (showCalculationTypeCondition && option.dateType) {
             if (showCalculationTypeCondition.dateType[option.dateType.value]) {
-                const draftCalculationTypes = (_a = showCalculationTypeCondition.dateType[option.dateType.value]) === null || _a === void 0 ? void 0 : _a.map(dateType => CALCULATION_TYPES.find(({ value }) => value === dateType));
+                const draftCalculationTypes = showCalculationTypeCondition.dateType[option.dateType.value]?.map(dateType => CALCULATION_TYPES.find(({ value }) => value === dateType));
                 if (!draftCalculationTypes.find(({ value }) => value === option.calculationType.value)) {
-                    setState(state => (Object.assign(Object.assign({}, state), { option: Object.assign(Object.assign({}, state.option), { calculationType: draftCalculationTypes[0] }) })));
+                    setState(state => ({
+                        ...state,
+                        option: {
+                            ...state.option,
+                            calculationType: draftCalculationTypes[0],
+                        },
+                    }));
                 }
                 return draftCalculationTypes;
             }
@@ -121,13 +129,16 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
         borderRadius: token.borderRadius,
         boxShadow: token.boxShadowSecondary,
     };
-    const selectedDateTitle = useMemo(() => dayjs(dateDisplay, format)
-        .format(formatDisplay)
-        .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-        .replace(WEEK_PLACEHOLDER, 'Week '), [dateDisplay, format, formatDisplay]);
+    const selectedDateTitle = useMemo(() => dayjs(dateDisplay, format).format(formatDisplay), [dateDisplay, format, formatDisplay]);
     const onChangeOption = (params) => {
         try {
-            setState(state => (Object.assign(Object.assign({}, state), { option: Object.assign(Object.assign({}, state.option), params) })));
+            setState(state => ({
+                ...state,
+                option: {
+                    ...state.option,
+                    ...params,
+                },
+            }));
         }
         catch (error) {
             handleError(error, {
@@ -141,7 +152,11 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
     useEffect(() => {
         try {
             if (isOpen) {
-                setState(state => (Object.assign(Object.assign({}, state), { option: state.optionSelected, date: state.dateDisplay })));
+                setState(state => ({
+                    ...state,
+                    option: state.optionSelected,
+                    date: state.dateDisplay,
+                }));
             }
         }
         catch (error) {
@@ -156,7 +171,7 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
         try {
             if (option.dateType.value !== 'fixed') {
                 const newDate = calculationDateAdvanced(option.dateType.value, option.calculationType.value, option.calculationDate.value, option.value, format, timezone);
-                setState(state => (Object.assign(Object.assign({}, state), { date: newDate })));
+                setState(state => ({ ...state, date: newDate }));
             }
         }
         catch (error) {
@@ -193,17 +208,26 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
                         newDate = dayjs(propsDate, format, true).isValid()
                             ? dayjs(propsDate, format).format(format)
                             : propsDate;
-                        setState(state => (Object.assign(Object.assign({}, state), { date: newDate, dateDisplay: newDate, optionSelected: Object.assign(Object.assign({}, option), { dateType: newDateType }) })));
+                        setState(state => ({
+                            ...state,
+                            date: newDate,
+                            dateDisplay: newDate,
+                            optionSelected: { ...option, dateType: newDateType },
+                        }));
                     }
                     else {
                         if (newCalculationDate && newCalculationType) {
                             const date = calculationDateAdvanced(newDateType.value, newCalculationType.value, newCalculationDate.value, value, format, timezone);
-                            setState(state => (Object.assign(Object.assign({}, state), { dateDisplay: date, optionSelected: {
+                            setState(state => ({
+                                ...state,
+                                dateDisplay: date,
+                                optionSelected: {
                                     dateType: newDateType,
                                     calculationDate: newCalculationDate,
                                     calculationType: newCalculationType,
                                     value,
-                                } })));
+                                },
+                            }));
                             newDate = date;
                         }
                     }
@@ -213,7 +237,7 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
                         date: newDate,
                         option: {
                             dateType: newDateType.value,
-                            calculationDate: newDateType.value === 'fixed' ? '' : newCalculationDate.value,
+                            calculationDate: newDateType.value === 'fixed' ? 'days' : newCalculationDate.value,
                             calculationType: newDateType.value === 'fixed'
                                 ? ''
                                 : newCalculationType.value,
@@ -233,12 +257,17 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propsOption, newCalculationDates, propsDate, format]);
     // Handlers
-    const disableDate = current => current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format);
+    const disableDate = useCallback((current) => typeof current === 'number'
+        ? current > dayjs(disableAfterDate, format).date() ||
+            current < dayjs(disableBeforeDate, format).date()
+        : current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format), [disableAfterDate, disableBeforeDate, format]);
     const toggleOpenDropdown = (isOpen) => {
         try {
-            setState(() => (Object.assign(Object.assign({}, state), { 
+            setState(() => ({
+                ...state,
                 // isOpen: !state.isOpen,
-                isOpen: isOpen != null ? isOpen : !state.isOpen })));
+                isOpen: isOpen != null ? isOpen : !state.isOpen,
+            }));
         }
         catch (error) {
             handleError(error, {
@@ -248,16 +277,21 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
             });
         }
     };
-    const { ref } = useOutsideClick(() => toggleOpenDropdown(false));
+    const { ref: refDropdown } = useOutsideClick(() => toggleOpenDropdown(false));
     const onClickApply = () => {
         try {
             const draftOption = {
                 dateType: option.dateType.value,
-                calculationDate: isShowFixed ? '' : option.calculationDate.value,
-                calculationType: isShowFixed ? '' : option.calculationType.value,
+                calculationDate: isShowFixed ? 'days' : option.calculationDate.value,
+                calculationType: isShowFixed ? 'minus' : option.calculationType.value,
                 value: isShowFixed ? 0 : option.value,
             };
-            setState(state => (Object.assign(Object.assign({}, state), { optionSelected: option, dateDisplay: date, isOpen: false })));
+            setState(state => ({
+                ...state,
+                optionSelected: option,
+                dateDisplay: date,
+                isOpen: false,
+            }));
             if (typeof onApply === 'function') {
                 onApply({
                     date,
@@ -276,7 +310,7 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
     const onClickNow = () => {
         try {
             const currentDate = dayjs();
-            setState(state => (Object.assign(Object.assign({}, state), { date: currentDate.format(format) })));
+            setState(state => ({ ...state, date: currentDate.format(format) }));
         }
         catch (error) {
             handleError(error, {
@@ -286,14 +320,8 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
             });
         }
     };
-    const renderDropdownFooter = () => (React.createElement(React.Fragment, null,
-        React.createElement(Divider, null),
-        React.createElement(DropdownFooter, null,
-            React.createElement(Space, null,
-                React.createElement(Button, { type: "primary", onClick: () => onClickApply() }, "Apply"),
-                React.createElement(Button, { type: "default", onClick: () => toggleOpenDropdown(false) }, "Cancel")),
-            isShowFixed && React.createElement(Button, { onClick: () => onClickNow() }, "Now"))));
-    const renderDateTypeOptions = () => onlyShowFixed ? null : (React.createElement(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newDateTypes, value: option.dateType.value, onChange: value => {
+    const renderDropdownFooter = () => (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(DropdownFooter, { children: [_jsxs(Space, { children: [_jsx(Button, { type: "primary", onClick: () => onClickApply(), children: "Apply" }), _jsx(Button, { type: "default", onClick: () => toggleOpenDropdown(false), children: "Cancel" })] }), isShowFixed && _jsx(Button, { onClick: () => onClickNow(), children: "Now" })] })] }));
+    const renderDateTypeOptions = () => onlyShowFixed ? null : (_jsx(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newDateTypes, value: option.dateType.value, onChange: value => {
             const dateType = newDateTypes.find(dateType => dateType.value === value);
             onChangeOption({ dateType });
             // toggleOpenDropdown(true);
@@ -337,45 +365,38 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
                     return dayjs(date);
             }
         };
-        return (React.createElement("div", { style: contentStyle, ref: ref },
-            React.createElement(DropdownHeader, { className: "dropdown-header" },
-                React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay })),
-            React.createElement(DropdownContent, { className: "dropdown-content" },
-                renderDateTypeOptions(),
-                isShowFixed ? (React.createElement(React.Fragment, null,
-                    valueType === 'MONTH_DAY' ? (React.createElement("div", { className: "month-controller" },
-                        React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 0 ? 11 : prev - 1)) }),
-                        MONTH_LABEL_FULL[currMonthSelected],
-                        React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 11 ? 0 : prev + 1)) }))) : null,
-                    React.createElement("div", { className: `custom-picker-content${['MONTH_DAY', 'DAY'].includes(valueType) ? ' day-of-month-container' : ''}` }, customPickerArr[valueType].map((item, index) => (React.createElement("div", { key: `day_${item}`, className: clsx('custom-picker-item', {
-                            'custom-picker-item-selected': getCellSelected(item, index),
-                        }), onClick: () => {
-                            const newDate = getNewDate(item, index);
-                            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(newDate).format(format) })));
-                        } }, item)))))) : (React.createElement(React.Fragment, null,
-                    React.createElement(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newCalculationTypes, value: option.calculationType.value, onChange: value => {
-                            const calculationType = CALCULATION_TYPES.find(calculationType => calculationType.value === value);
-                            onChangeOption({ calculationType });
-                        } }),
-                    React.createElement(InputNumber, { value: option.value, style: { width: '100%' }, min: 0, showHandler: false, onChange: value => onChangeOption({ value: Math.floor(value) }) }),
-                    React.createElement(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newCalculationDates, value: option.calculationDate.value, onChange: value => {
-                            const calculationDate = newCalculationDates.find(calculationDate => calculationDate.value === value);
-                            onChangeOption({ calculationDate });
-                        } }))),
-                React.createElement(ErrorMessage, { errorMessage: errorMessage })),
-            renderDropdownFooter()));
+        return (_jsxs("div", { style: contentStyle, ref: refDropdown, children: [_jsx(DropdownHeader, { className: "dropdown-header", children: _jsx(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, operatorKey: operatorKey }) }), _jsxs(DropdownContent, { className: "dropdown-content", children: [renderDateTypeOptions(), isShowFixed ? (_jsxs(_Fragment, { children: [valueType === 'MONTH_DAY' ? (_jsxs("div", { className: "month-controller", children: [_jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 0 ? 11 : prev - 1)) }), MONTH_LABEL_FULL[currMonthSelected], _jsx(Icon, { type: "icon-ants-angle-right", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 11 ? 0 : prev + 1)) })] })) : null, _jsx("div", { className: `custom-picker-content${['MONTH_DAY', 'DAY'].includes(valueType) ? ' day-of-month-container' : ''}`, children: customPickerArr[valueType].map((item, index) => (_jsx("div", { className: clsx('custom-picker-item', {
+                                            'custom-picker-item-selected': getCellSelected(item, index),
+                                        }), onClick: () => {
+                                            const newDate = getNewDate(item, index);
+                                            setState(state => ({
+                                                ...state,
+                                                date: dayjs(newDate).format(format),
+                                            }));
+                                        }, children: item }, `day_${item}`))) })] })) : (_jsxs(_Fragment, { children: [_jsx(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newCalculationTypes, value: option.calculationType.value, onChange: value => {
+                                        const calculationType = CALCULATION_TYPES.find(calculationType => calculationType.value === value);
+                                        onChangeOption({ calculationType });
+                                    } }), _jsx(InputNumber, { value: option.value, style: { width: '100%' }, min: 0, showHandler: false, onChange: value => onChangeOption({ value: Math.floor(value) }) }), _jsx(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newCalculationDates, value: option.calculationDate.value, onChange: value => {
+                                        const calculationDate = newCalculationDates.find(calculationDate => calculationDate.value === value);
+                                        onChangeOption({ calculationDate });
+                                    } })] })), _jsx(ErrorMessage, { errorMessage: errorMessage })] }), renderDropdownFooter()] }));
     };
     const cellRender = useCallback((current, info) => {
         const isDisabledTime = isDisabledSpecificTime(current, info, disabledTime, dayjs(date));
-        return (React.createElement("div", { className: "antsomi-picker-cell-inner", style: Object.assign({ pointerEvents: 'all', width: '100%' }, (isDisabledTime
-                ? {
-                    color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorTextDisabled,
-                    opacity: 0.5,
-                    background: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw2,
-                    cursor: 'default',
-                }
-                : {})), onClick: e => {
-                if (isDisabledTime) {
+        const isDisableDate = disableDate(current) && info.type === 'date';
+        return (_jsx("div", { className: "antsomi-picker-cell-inner", style: {
+                pointerEvents: 'all',
+                width: '100%',
+                ...(isDisabledTime
+                    ? {
+                        color: globalToken?.colorTextDisabled,
+                        opacity: 0.5,
+                        background: globalToken?.bw2,
+                        cursor: 'default',
+                    }
+                    : {}),
+            }, onClick: e => {
+                if (isDisabledTime || isDisableDate) {
                     e.preventDefault();
                     e.stopPropagation();
                     return;
@@ -383,24 +404,12 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
                 if (info.type === 'time' && typeof current === 'number') {
                     e.preventDefault();
                     e.stopPropagation();
-                    let newDate;
-                    switch (info.subType) {
-                        case 'hour':
-                            newDate = dayjs(date).hour(current);
-                            break;
-                        case 'minute':
-                            newDate = dayjs(date).minute(current);
-                            break;
-                        case 'second':
-                            newDate = dayjs(date).second(current);
-                            break;
-                        default:
-                            break;
+                    if (info.subType && info.subType !== 'meridiem') {
+                        setState(state => ({
+                            ...state,
+                            date: dayjs(date)[info.subType](current).format(format),
+                        }));
                     }
-                    if (newDate) {
-                        setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(newDate).format(format) })));
-                    }
-                    // if (newDate) onChangeDatePicker(newDate);
                     return;
                 }
                 if (info.type === 'decade' ||
@@ -409,70 +418,33 @@ export const AdvancedPicker = React.forwardRef((props, componentRef) => {
                     return;
                 e.preventDefault();
                 e.stopPropagation();
-                setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(current).format(format) })));
+                setState(state => ({ ...state, date: dayjs(current).format(format) }));
                 // onChangeDatePicker(current);
-            } }, getCellRender(current, valueType, info)));
-    }, [valueType, format, date, disabledTime]);
+            }, children: getCellRender(current, valueType, info) }));
+    }, [valueType, format, date, disabledTime, disableDate]);
     if (isViewMode)
-        return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: ref },
-            !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
-            React.createElement("span", { className: "date-picker__title--view-mode" }, selectedDateTitle)));
-    return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: onlyShowFixed ? undefined : ref },
-        !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
-        isShowFixed && !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (React.createElement(Tooltip, { title: selectedDateTitle },
-            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, popupStyle: popupStyle, allowClear: false, inputReadOnly: true, style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
-                    '--error': errorMessage,
-                    'hide-picker-header': ['QUARTER', 'MONTH'].includes(valueType),
-                    'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType),
-                    'is-minutes-picker': valueType === 'MINUTE',
-                    'is-hours-picker': valueType === 'HOUR',
-                }), 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, "$isRangePicker": operatorKey === 'between', "$onlyShowFixed": onlyShowFixed },
-                            ['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, 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(InputStyled, { disabled: disabled, onClick: () => toggleOpenDropdown(), readOnly: true, suffix: React.createElement(CalendarIconWrapper, { style: {
+        return (_jsxs(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: refDropdown, children: [!!label && typeof label === 'string' ? (_jsx(Text, { style: { color: '#666666' }, children: label })) : (label), _jsx("span", { className: "date-picker__title--view-mode", children: selectedDateTitle })] }));
+    return (_jsxs(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", children: [!!label && typeof label === 'string' ? (_jsx(Text, { style: { color: '#666666' }, children: label })) : (label), isShowFixed && !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (_jsx(Tooltip, { title: selectedDateTitle, children: _jsx(DatePicker, { disabled: disabled, open: !disabled && isOpen, popupStyle: popupStyle, allowClear: false, inputReadOnly: true, style: { textOverflow: 'ellipsis', ...inputStyle }, status: errorMessage ? 'error' : '', inputRender: () => (_jsx(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
+                        '--error': errorMessage,
+                        'hide-picker-header': ['QUARTER', 'MONTH'].includes(valueType),
+                        'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType),
+                        'is-minutes-picker': valueType === 'MINUTE',
+                        'is-hours-picker': valueType === 'HOUR',
+                    }), renderExtraFooter: () => {
+                        const timeFormat = getTimePickerRender(valueType);
+                        return (_jsxs(_Fragment, { children: [_jsxs(DatePickerHeader, { children: [_jsx(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, operatorKey: operatorKey }), renderDateTypeOptions()] }), _jsxs(DatePickerFooter, { children: [_jsx("div", { style: { padding: '0 10px' }, children: _jsx(ErrorMessage, { errorMessage: errorMessage }) }), renderDropdownFooter()] }), _jsx(Divider, {}), timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (_jsxs(TimeLabel, { "$width": timeFormat.length * 30, "$isRangePicker": operatorKey === 'between', "$onlyShowFixed": onlyShowFixed, children: [['HH', 'HHmm', 'HHmmss'].includes(timeFormat) ? _jsx("span", { children: "Hours" }) : null, ['HHmm', 'HHmmss', 'mm'].includes(timeFormat) ? (_jsx("span", { children: "Minutes" })) : null, timeFormat === 'HHmmss' ? _jsx("span", { children: "Seconds" }) : null] })) : null] }));
+                    }, picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
+                        ? {
+                            format: getTimePickerRender(valueType),
+                        }
+                        : undefined, suffixIcon: _jsx(CalendarIconWrapper, { style: {
                             pointerEvents: disabled ? 'none' : 'all',
-                        }, onClick: () => toggleOpenDropdown() },
-                        React.createElement(EventIcon, { width: 19, height: 19 })), style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), value: selectedDateTitle, status: errorMessage ? 'error' : '' }))))));
+                        }, onClick: () => toggleOpenDropdown(), children: _jsx(EventIcon, { width: 20, height: 20, fill: errorMessage ? THEME.token?.colorError : THEME.token?.bw10 }) }), cellRender: cellRender, onOpenChange: () => toggleOpenDropdown() }) })) : (_jsx(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' }, children: _jsx(Tooltip, { title: selectedDateTitle, children: _jsx(InputStyled, { disabled: disabled, onClick: () => toggleOpenDropdown(), readOnly: true, suffix: _jsx(CalendarIconWrapper, { style: {
+                                pointerEvents: disabled ? 'none' : 'all',
+                            }, onClick: () => toggleOpenDropdown(), children: _jsx(EventIcon, { width: 19, height: 19 }) }), style: { textOverflow: 'ellipsis', ...inputStyle }, value: selectedDateTitle, status: errorMessage ? 'error' : '' }) }) }))] }));
 });
-AdvancedPicker.defaultProps = {
-    label: '',
-    type: ADVANCED_PICKER_TYPE.START_DATE.value,
-    popupStyle: { borderRadius: (_b = (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusLG) !== null && _b !== void 0 ? _b : 10 },
-    operatorKey: 'after',
-    dateTypeKeysShow: [],
-    date: dayjs().format(DEFAULT_DATE_FORMAT),
-    format: DEFAULT_DATE_FORMAT,
-    inputStyle: {
-        width: 120,
-    },
-    formatInputDisplay: 'MMM DD, YYYY',
-    valueType: VALUE_TYPES.YEAR_MONTH_DAY,
-    showTime: true,
-    disabled: false,
-};

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

@@ -1,8 +1,8 @@
-import { TAdvancedType, ValueTypes } from './types';
-export declare const DATE_TYPES: {
-    value: string;
+import { TAdvancedType, TCalculationDate, TDateType, ValueTypes } from './types';
+export declare const DATE_TYPES: Array<{
+    value: TDateType;
     label: string;
-}[];
+}>;
 export declare const DATE_TYPE_MAPPING: {
     first_day_of_week_mon_sun: string;
     first_day_of_week_sun_sat: string;
@@ -15,36 +15,14 @@ export declare const DATE_TYPE_MAPPING: {
     last_day_of_quarter: string;
     last_day_of_year: string;
 };
-export declare const CALCULATION_TYPES: {
-    value: string;
+export declare const CALCULATION_TYPES: Array<{
+    value: 'minus' | 'plus';
+    label: string;
+}>;
+export declare const CALCULATION_DATES: Array<{
+    value: TCalculationDate;
     label: string;
-}[];
-export declare const CALCULATION_DATES: readonly [{
-    readonly value: "seconds";
-    readonly label: string;
-}, {
-    readonly value: "minutes";
-    readonly label: string;
-}, {
-    readonly value: "hours";
-    readonly label: string;
-}, {
-    readonly value: "days";
-    readonly label: string;
-}, {
-    readonly value: "weeks";
-    readonly label: string;
-}, {
-    readonly value: "months";
-    readonly label: string;
-}, {
-    readonly value: "quarters";
-    readonly label: string;
-}, {
-    readonly value: "years";
-    readonly label: string;
-}];
-type CalculationDateValues = (typeof CALCULATION_DATES)[number]['value'];
+}>;
 export declare const VALUE_TYPES: {
     readonly INPUT_TEXT: "INPUT_TEXT";
     readonly INPUT_NUMBER: "INPUT_NUMBER";
@@ -85,7 +63,6 @@ export declare const ADVANCED_PICKER_TYPE: Record<string, {
     value: TAdvancedType;
     label: string;
 }>;
-export declare const MONTH_LABEL_SHORT: string[];
 export declare const MONTH_LABEL_FULL: string[];
 export declare const DAY_LABEL_SHORT: string[];
 export declare const WEEK_ARR: number[];
@@ -97,10 +74,7 @@ export declare const MONTH_30: number[];
 export declare const DAY_OF_MONTH: number[][];
 /** The year with full 366 days of year, use for select day/day of month with include edge case (February 29th) */
 export declare const ANCHOR_LEAP_YEAR = 2024;
-export declare const QUARTER_PLACEHOLDER = "%q%";
-export declare const WEEK_PLACEHOLDER = "%t%";
 export declare const HIDE_TIME_LABEL_ARR: string[];
 export declare const GRANULARITY_MAPPING: {
-    [key in ValueTypes]: CalculationDateValues[];
+    [key in ValueTypes]: TCalculationDate[];
 };
-export {};

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

@@ -40,6 +40,7 @@ export const CALCULATION_DATES = [
     { value: 'quarters', label: t('datePicker.quarters') },
     { value: 'years', label: t('datePicker.years') },
 ];
+// type CalculationDateValues = (typeof CALCULATION_DATES)[number]['value'];
 export const VALUE_TYPES = {
     INPUT_TEXT: 'INPUT_TEXT',
     INPUT_NUMBER: 'INPUT_NUMBER',
@@ -86,20 +87,6 @@ export const ADVANCED_PICKER_TYPE = {
         label: 'datePicker.endDate',
     },
 };
-export const MONTH_LABEL_SHORT = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-];
 export const MONTH_LABEL_FULL = [
     'January',
     'February',
@@ -137,8 +124,6 @@ export const DAY_OF_MONTH = [
 ];
 /** The year with full 366 days of year, use for select day/day of month with include edge case (February 29th) */
 export const ANCHOR_LEAP_YEAR = 2024;
-export const QUARTER_PLACEHOLDER = '%q%';
-export const WEEK_PLACEHOLDER = '%t%';
 export const HIDE_TIME_LABEL_ARR = [
     'YEAR',
     'YEAR_MONTH',

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

@@ -1,10 +1,12 @@
-/// <reference types="react" />
+import React from 'react';
+import { InputRef } from 'antd';
+import { InputProps } from '@antscorp/antsomi-ui/es/components/atoms/Input';
 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, any, any>;
+export declare const InputStyled: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>, any, {}, never>;
 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, {

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

@@ -1,8 +1,9 @@
-var _a, _b, _c, _d, _e;
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import styled from 'styled-components';
-import { Input } from '@antscorp/antsomi-ui/es/components/atoms';
-import { THEME } from '../../../../../constants';
+import { Input } from '@antscorp/antsomi-ui/es';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import React from 'react';
 export const DropdownContent = styled.div `
   width: 250px;
   padding: 10px 10px 0px 10px;
@@ -29,10 +30,10 @@ export const DropdownContent = styled.div `
       align-items: center;
 
       &.custom-picker-item-selected {
-        background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+        background-color: ${THEME.token?.colorPrimary};
         color: #fff;
         &:hover {
-          background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
+          background-color: ${THEME.token?.colorPrimary};
         }
       }
 
@@ -62,7 +63,7 @@ export const DropdownHeader = styled.div `
   text-align: center;
 
   > .__title {
-    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+    color: ${THEME.token?.bw6};
   }
 `;
 export const DropdownFooter = styled.div `
@@ -79,11 +80,12 @@ export const DatePickerHeader = styled.div `
   line-height: 1.6 !important;
 `;
 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;
+  font-family: ${THEME.token?.fontFamily};
+  color: ${THEME.token?.bw10} !important;
   text-overflow: ellipsis;
 `;
-export const InputStyled = styled(Input) `
+const InputWithRef = React.forwardRef((props, ref) => (_jsx(Input, { ...props, ref: ref })));
+export const InputStyled = styled(InputWithRef) `
   input {
     text-overflow: ellipsis;
   }