@antscorp/antsomi-ui 1.3.5-beta.72 → 1.3.5-beta.721

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { Dayjs } from 'dayjs';
 import { TAdvancedType, TCalculationType, TOperatorKey, TOption, TShowCalculationTypeCondition, ValueTypes } from './types';
 export interface AdvancedPickerProps {
     label?: string;
@@ -11,15 +12,48 @@ export interface AdvancedPickerProps {
     option?: TOption;
     operatorKey?: TOperatorKey;
     type?: TAdvancedType;
+    /**
+     * This is uncontrolled value (default value) and will not update if change outside
+     * only update when re-render component
+     * use ref.forceUpdate() to control value inside
+     */
     date?: string;
     format?: string;
     formatInputDisplay?: string;
     inputStyle?: React.CSSProperties;
+    popupStyle?: React.CSSProperties;
     disableAfterDate?: string;
     disableBeforeDate?: string;
     errorMessage?: string;
     showTime?: boolean;
     timezone?: string;
+    isViewMode?: boolean;
+    /**
+     *
+     * @example const disabledTime = (date?: Dayjs) => {
+        if (date?.get('date') !== 31)
+          return {
+            disabledHours: () => [],
+            disabledMinutes: () => [],
+            disabledSeconds: () => [],
+          };
+  
+        return {
+          disabledHours: () => range(0, 24).splice(4, 20),
+          disabledMinutes: () => range(30, 60),
+          disabledSeconds: () => [55, 56],
+        };
+      };
+     */
+    disabledTime?: (date?: Dayjs) => {
+        disabledHours: () => number[];
+        disabledMinutes: () => number[];
+        disabledSeconds: () => number[];
+    };
+    /**
+     * Only show fixed calendar (hide dynamic and )
+     */
+    onlyShowFixed?: boolean;
     onUpdatedNewDate?: ({ date, option }: {
         date: string;
         option: TOption;
@@ -29,4 +63,7 @@ export interface AdvancedPickerProps {
         option: TOption;
     }) => void;
 }
-export declare const AdvancedPicker: React.FC<AdvancedPickerProps>;
+export interface AdvancedPickerHandle {
+    forceUpdate: (date: string) => void;
+}
+export declare const AdvancedPicker: React.ForwardRefExoticComponent<AdvancedPickerProps & React.RefAttributes<AdvancedPickerHandle>>;

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

@@ -1,6 +1,7 @@
+var _a, _b;
 /* eslint-disable react/no-unused-prop-types */
 // Libraries
-import React, { useEffect, useMemo, useCallback, useState } from 'react';
+import React, { useEffect, useMemo, useCallback, useState, useImperativeHandle } from 'react';
 import { Tooltip, theme, DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import clsx from 'clsx';
@@ -21,15 +22,29 @@ import { calculationDateAdvanced, getCellRender, getFormatDisplay, getPickerRend
 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';
+import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
 import { useOutsideClick } from '@antscorp/antsomi-ui/es/hooks/useOutsideClick';
+const isDisabledSpecificTime = (current, info, disabledTime, date) => {
+    if (typeof current !== 'number' || !disabledTime)
+        return false;
+    switch (info.subType) {
+        case 'hour':
+            return disabledTime(date).disabledHours().includes(current);
+        case 'minute':
+            return disabledTime(date).disabledMinutes().includes(current);
+        case 'second':
+            return disabledTime(date).disabledSeconds().includes(current);
+        default:
+            return false;
+    }
+};
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
 const { useToken } = theme;
 const { Text } = Typography;
-export const AdvancedPicker = props => {
+export const AdvancedPicker = React.forwardRef((props, componentRef) => {
     var _a, _b;
     // Props
-    const { label, inputStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, onUpdatedNewDate, onApply, } = props;
+    const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onlyShowFixed, disabledTime, onUpdatedNewDate, onApply, } = props;
     // Memo
     const newDateTypes = useMemo(() => {
         if (dateTypeKeysShow && dateTypeKeysShow.length) {
@@ -65,6 +80,15 @@ export const AdvancedPicker = props => {
         dateDisplay: dayjs().tz(timezone).format(format),
     });
     const { isOpen, option, date, dateDisplay } = state;
+    useImperativeHandle(componentRef, () => ({
+        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 })));
+        },
+    }), [format]);
+    const isShowFixed = option.dateType.value === 'fixed' || onlyShowFixed;
     const currDate = dayjs(date, format);
     const currWeek = currDate.isoWeek();
     const currDay = currDate.day();
@@ -144,9 +168,17 @@ export const AdvancedPicker = props => {
         }
     }, [option, format, timezone]);
     useDeepCompareEffect(() => {
+        const DEFAULT_OPTION = onlyShowFixed
+            ? {
+                dateType: 'fixed',
+                calculationDate: 'days',
+                calculationType: 'minus',
+                value: 0,
+            }
+            : {};
         try {
-            if (propsOption) {
-                const { dateType, calculationType, calculationDate, value = 0 } = propsOption || {};
+            if (propsOption || onlyShowFixed) {
+                const { dateType, calculationType, calculationDate, value = 0, } = propsOption || DEFAULT_OPTION;
                 const newDateTypes = DATE_TYPES;
                 const newDateType = newDateTypes.find(dType => dType.value === dateType);
                 const newCalculationType = CALCULATION_TYPES.find(calType => calType.value === calculationType);
@@ -155,6 +187,9 @@ export const AdvancedPicker = props => {
                 let newDate = '';
                 if (newDateType) {
                     if (newDateType.value === 'fixed') {
+                        // newDate = dayjs(innerDate, format, true).isValid()
+                        //   ? dayjs(innerDate, format).format(format)
+                        //   : innerDate;
                         newDate = dayjs(propsDate, format, true).isValid()
                             ? dayjs(propsDate, format).format(format)
                             : propsDate;
@@ -218,13 +253,9 @@ export const AdvancedPicker = props => {
         try {
             const draftOption = {
                 dateType: option.dateType.value,
-                calculationDate: option.dateType.value === 'fixed'
-                    ? ''
-                    : option.calculationDate.value,
-                calculationType: option.dateType.value === 'fixed'
-                    ? ''
-                    : option.calculationType.value,
-                value: option.dateType.value === 'fixed' ? 0 : option.value,
+                calculationDate: isShowFixed ? '' : option.calculationDate.value,
+                calculationType: isShowFixed ? '' : option.calculationType.value,
+                value: isShowFixed ? 0 : option.value,
             };
             setState(state => (Object.assign(Object.assign({}, state), { optionSelected: option, dateDisplay: date, isOpen: false })));
             if (typeof onApply === 'function') {
@@ -261,8 +292,8 @@ export const AdvancedPicker = props => {
             React.createElement(Space, null,
                 React.createElement(Button, { type: "primary", onClick: () => onClickApply() }, "Apply"),
                 React.createElement(Button, { type: "default", onClick: () => toggleOpenDropdown(false) }, "Cancel")),
-            option.dateType.value === 'fixed' && React.createElement(Button, { onClick: () => onClickNow() }, "Now"))));
-    const renderDateTypeOptions = () => (React.createElement(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newDateTypes, value: option.dateType.value, onChange: value => {
+            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 dateType = newDateTypes.find(dateType => dateType.value === value);
             onChangeOption({ dateType });
             // toggleOpenDropdown(true);
@@ -311,7 +342,7 @@ export const AdvancedPicker = props => {
                 React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay })),
             React.createElement(DropdownContent, { className: "dropdown-content" },
                 renderDateTypeOptions(),
-                option.dateType.value === 'fixed' ? (React.createElement(React.Fragment, null,
+                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],
@@ -335,19 +366,20 @@ export const AdvancedPicker = props => {
             renderDropdownFooter()));
     };
     const cellRender = useCallback((current, info) => {
-        const onChangeDatePicker = (value) => {
-            try {
-                setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(value).format(format) })));
-            }
-            catch (error) {
-                handleError(error, {
-                    path: PATH,
-                    name: 'onChangeDatePicker',
-                    args: { value },
-                });
-            }
-        };
-        return (React.createElement("div", { className: "antsomi-picker-cell-inner", style: { pointerEvents: 'all', width: '100%' }, onClick: e => {
+        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) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return;
+                }
                 if (info.type === 'time' && typeof current === 'number') {
                     e.preventDefault();
                     e.stopPropagation();
@@ -365,8 +397,10 @@ export const AdvancedPicker = props => {
                         default:
                             break;
                     }
-                    if (newDate)
-                        onChangeDatePicker(newDate);
+                    if (newDate) {
+                        setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(newDate).format(format) })));
+                    }
+                    // if (newDate) onChangeDatePicker(newDate);
                     return;
                 }
                 if (info.type === 'decade' ||
@@ -375,18 +409,18 @@ export const AdvancedPicker = props => {
                     return;
                 e.preventDefault();
                 e.stopPropagation();
-                onChangeDatePicker(current);
+                setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(current).format(format) })));
+                // onChangeDatePicker(current);
             } }, getCellRender(current, valueType, info)));
-    }, [valueType, format, date]);
-    return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: ref },
+    }, [valueType, format, date, disabledTime]);
+    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),
-        option.dateType.value === 'fixed' &&
-            !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (React.createElement(Tooltip, { title: selectedDateTitle },
-            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 
-                // style={{
-                //   width: 120,
-                // }}
-                disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
+        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),
@@ -403,9 +437,9 @@ export const AdvancedPicker = props => {
                                 React.createElement(ErrorMessage, { errorMessage: errorMessage })),
                             renderDropdownFooter()),
                         React.createElement(Divider, null),
-                        timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30 },
+                        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,
+                            ['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)
                     ? {
@@ -425,10 +459,11 @@ export const AdvancedPicker = props => {
                             pointerEvents: disabled ? 'none' : 'all',
                         }, onClick: () => toggleOpenDropdown() },
                         React.createElement(EventIcon, { width: 19, height: 19 })), style: Object.assign({ 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),

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

@@ -1,3 +1,3 @@
 export { AdvancedPicker } from './AdvancedPicker';
-export type { AdvancedPickerProps } from './AdvancedPicker';
+export type { AdvancedPickerProps, AdvancedPickerHandle } from './AdvancedPicker';
 export type { TOption as TAdvancedPickerOption } from './types';

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

@@ -4,9 +4,11 @@ export declare const DropdownHeader: import("styled-components").StyledComponent
 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 InputStyled: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, 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;
+    $isRangePicker: boolean;
+    $onlyShowFixed?: boolean | undefined;
 }, never>;

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

@@ -101,7 +101,8 @@ export const CalendarIconWrapper = styled.div `
 export const TimeLabel = styled.div `
   position: absolute;
   right: 0;
-  top: 120px;
+  /* top: 120px; */
+  top: ${({ $isRangePicker, $onlyShowFixed }) => $onlyShowFixed ? '81px' : $isRangePicker ? '140px' : '120px'};
   height: 39.1px;
   width: ${props => `${props.$width}px`};
   /* width: 180px; */

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

@@ -37,3 +37,15 @@ export declare const getFormatDisplay: (operatorKey?: TOperatorKey, type?: TAdva
     formatDisplay: string;
     timeFormatDisplay: string;
 };
+/**
+ * Returns the formatted display string based on the given type and value type.
+ *
+ * @param {TAdvancedType} [type] - The type indicating whether it's a start or end date.
+ * @param {ValueTypes} [valueType] - The value type specifying the date/time format.
+ * @returns {string} The formatted display string.
+ *
+ * @example
+ * // returns ADVANCED_RANGE_PICKER_FORMAT.general
+ * getFormatDisplayFromValueType('anyType', 'YEAR_MONTH_DAY_SECOND');
+ */
+export declare const getFormatDisplayFromValueType: (type?: TAdvancedType, valueType?: ValueTypes) => string;

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

@@ -8,6 +8,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 // Constants
 import { DATE_TYPE_MAPPING, DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, } from './constants';
+import { ADVANCED_RANGE_PICKER_FORMAT } from '../AdvancedRangePicker/constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
 dayjs.extend(utc);
@@ -209,3 +210,29 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
     }
     return { formatDisplay: formatInputDisplay || formatDisplay, timeFormatDisplay };
 };
+/**
+ * Returns the formatted display string based on the given type and value type.
+ *
+ * @param {TAdvancedType} [type] - The type indicating whether it's a start or end date.
+ * @param {ValueTypes} [valueType] - The value type specifying the date/time format.
+ * @returns {string} The formatted display string.
+ *
+ * @example
+ * // returns ADVANCED_RANGE_PICKER_FORMAT.general
+ * getFormatDisplayFromValueType('anyType', 'YEAR_MONTH_DAY_SECOND');
+ */
+export const getFormatDisplayFromValueType = (type, valueType) => {
+    switch (valueType) {
+        case 'YEAR_MONTH_DAY_HOUR':
+            return type === 'startDate' ? 'YYYY-MM-DD HH:00:00' : 'YYYY-MM-DD HH:59:59';
+        case 'YEAR_MONTH_DAY_MINUTE':
+            return type === 'startDate' ? 'YYYY-MM-DD HH:mm:00' : 'YYYY-MM-DD HH:mm:59';
+        case 'YEAR_MONTH_DAY_SECOND':
+            return ADVANCED_RANGE_PICKER_FORMAT.general;
+        case 'YEAR_MONTH_DAY':
+        default:
+            return type === 'startDate'
+                ? ADVANCED_RANGE_PICKER_FORMAT.startDate
+                : ADVANCED_RANGE_PICKER_FORMAT.endDate;
+    }
+};

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

@@ -2,7 +2,12 @@ import React, { ReactNode } from 'react';
 import { TShowCalculationTypeCondition, ValueTypes } from '../AdvancedPicker/types';
 import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
 export interface AdvancedRangePickerProps {
+    className?: string;
     valueType?: ValueTypes;
+    /**
+     * If true => auto generate time format from valueType props; else use hard config
+     */
+    useFormatMapping?: boolean;
     disabled?: boolean;
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
     startDateConfig?: TDateConfig;
@@ -14,6 +19,8 @@ export interface AdvancedRangePickerProps {
     timezone?: string;
     separator?: ReactNode;
     inputStyle?: React.CSSProperties;
+    popupStyle?: React.CSSProperties;
+    isViewMode?: boolean;
     onChange?: ({ timeRange, mode }: TOnChangePayload) => void;
 }
 export declare const AdvancedRangePicker: React.FC<AdvancedRangePickerProps>;

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DatePickerProps as AntDatePickerProps } from 'antd';
+type DatePickerProps = {
+    onChange: (key: any, value: any) => void;
+    required?: boolean;
+    focused?: boolean;
+} & AntDatePickerProps;
+export declare const DatePickerV2: React.FC<DatePickerProps>;
+export {};

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

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable react/destructuring-assignment */
+// Libraries
+import React, { useEffect, useMemo, useState } from 'react';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Atoms
+import { Space, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Components
+import { DatePicker as AntDatePicker } from 'antd';
+// Styled
+import { DatePickerWrapper } from './styled';
+export const DatePickerV2 = props => {
+    const { required, focused, onChange } = props, restOf = __rest(props, ["required", "focused", "onChange"]);
+    // I18n
+    const { t } = i18nInstance;
+    const [isFocused, setFocused] = useState(false);
+    const requiredMsg = useMemo(() => {
+        let msg = '';
+        const isEmptyValue = props.value == null;
+        if (required && isEmptyValue && isFocused) {
+            msg = t(translations.messageError.fieldIsRequired.message);
+        }
+        return msg;
+    }, [props.value, required, isFocused, t]);
+    useEffect(() => {
+        if (focused) {
+            setFocused(focused);
+        }
+    }, [focused]);
+    return (React.createElement(DatePickerWrapper, null,
+        React.createElement(Space, { direction: "vertical", size: 5 },
+            React.createElement(AntDatePicker, Object.assign({}, restOf, { onBlur: e => {
+                    if (!isFocused) {
+                        setFocused(true);
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    props.onBlur && props.onBlur(e);
+                }, onChange: date => onChange('date-picker', date) })),
+            requiredMsg ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8 } }, requiredMsg)) : null)));
+};

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

@@ -0,0 +1 @@
+export declare const DatePickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,12 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const DatePickerWrapper = styled.div `
+  input {
+    &::placeholder {
+      font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+    }
+  }
+`;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DrawerDetailProps } from './types';
+export declare const DrawerDetail: React.FC<DrawerDetailProps>;