@antscorp/antsomi-ui 2.0.6 → 2.0.8-3.text-editor-beta.1

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

@@ -10,7 +10,7 @@ export type TShowCalculationTypeCondition = {
 };
 export type TDateType = 'today' | 'first_day_of_week_mon_sun' | 'first_day_of_week_sun_sat' | 'first_day_of_month' | 'first_day_of_quarter' | 'first_day_of_year' | 'last_day_of_week_mon_sun' | 'last_day_of_week_sun_sat' | 'last_day_of_month' | 'last_day_of_quarter' | 'last_day_of_year' | 'fixed';
 export type TCalculationType = 'minus' | 'plus' | '';
-export type TCalculationDate = 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'quarters' | 'years' | '';
+export type TCalculationDate = 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'quarters' | 'years';
 export type TOperatorKey = 'after' | 'between' | 'before';
 export type TAdvancedType = 'startDate' | 'endDate';
 /**

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

@@ -1,21 +1,18 @@
 import type { Dayjs } from 'dayjs';
 import type { CellRenderInfo } from 'rc-picker/es/interface';
-import { TAdvancedType, TOperatorKey, ValueTypes } from './types';
+import { TAdvancedType, TCalculationDate, TDateType, TOperatorKey, ValueTypes } from './types';
+type DateTypeKey = Exclude<TDateType, 'fixed'>;
 /**
  * Calculates a new date based on the given parameters.
- * @param {string} [dateTypeKey='today'] - Key to determine the type of date to be used as the starting point.
- * Valid values are: 'today', 'first_day_of_week_mon_sun', 'first_day_of_week_sun_sat',
- * 'first_day_of_month', 'first_day_of_quarter', 'first_day_of_year', 'last_day_of_week_mon_sun',
- * 'last_day_of_week_sun_sat', 'last_day_of_month', 'last_day_of_quarter', 'last_day_of_year'.
- * @param {string} [calculationTypeKey='minus'] - Key to determine whether to add or subtract the specified value.
- * Valid values are: 'plus', 'minus'.
- * @param {string} [calculationDateKey='days'] - Key to determine the unit of time to be added or subtracted.
+ * @param {DateTypeKey} [dateTypeKey='today'] - Key to determine the type of date to be used as the starting point.
+ * @param {'minus' | 'plus'} [operator='minus'] - Key to determine whether to add or subtract the specified value.
+ * @param {TCalculationDate} [calculationDateKey='days'] - Key to determine the unit of time to be added or subtracted.
  * Valid values are: 'days', 'weeks', 'months', 'quarters', 'years'.
  * @param {number} [value=0] - Value to be added or subtracted.
  * @param {string} [dateFormat=DEFAULT_DATE_FORMAT] - Format in which to return the new date.
  * @returns {string} The new date in the specified format.
  */
-export declare const calculationDateAdvanced: (dateTypeKey?: string, calculationTypeKey?: string, calculationDateKey?: any, value?: number, dateFormat?: string, timezone?: string) => any;
+export declare const calculationDateAdvanced: (dateTypeKey?: DateTypeKey, operator?: 'minus' | 'plus', calculationDateKey?: TCalculationDate, value?: number, dateFormat?: string, timezone?: string) => string;
 /**
  * Get text of calendar cell base on valueType (semantic/date format)
  * @link https://ant.design/components/date-picker#components-date-picker-demo-cell-render
@@ -24,24 +21,27 @@ export declare const calculationDateAdvanced: (dateTypeKey?: string, calculation
  * @param {ValueTypes} valueType type of value (get from component props)
  * @returns {number | string} label of cell according to valueType
  */
-export declare const getCellRender: (current: number | Dayjs, valueType: ValueTypes, info: CellRenderInfo<Dayjs>) => number | string;
+export declare const getCellRender: (current: number | Dayjs, valueType: ValueTypes, info: Pick<CellRenderInfo<Dayjs>, 'type'>) => number | string;
 /**
+ * Get the type of calendar picker based on valueType
  * @param {ValueTypes} valueType type of value (get from component props)
  * @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 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) => {
+/**
+ * Get the sub label for current selected quarter
+ */
+export declare function getLabelQuarterRange(day: string, format: string, locale: string): string;
+export declare const getFormatDisplay: (operatorKey?: TOperatorKey, type?: TAdvancedType, valueType?: ValueTypes) => {
     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.
+ * @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
@@ -49,3 +49,4 @@ export declare const getFormatDisplay: (operatorKey?: TOperatorKey, type?: TAdva
  * getFormatDisplayFromValueType('anyType', 'YEAR_MONTH_DAY_SECOND');
  */
 export declare const getFormatDisplayFromValueType: (type?: TAdvancedType, valueType?: ValueTypes) => string;
+export {};

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

@@ -7,7 +7,7 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 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 { DATE_TYPE_MAPPING, DEFAULT_DATE_FORMAT } from './constants';
 import { ADVANCED_RANGE_PICKER_FORMAT } from '../AdvancedRangePicker/constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
@@ -15,46 +15,30 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 /**
  * Calculates a new date based on the given parameters.
- * @param {string} [dateTypeKey='today'] - Key to determine the type of date to be used as the starting point.
- * Valid values are: 'today', 'first_day_of_week_mon_sun', 'first_day_of_week_sun_sat',
- * 'first_day_of_month', 'first_day_of_quarter', 'first_day_of_year', 'last_day_of_week_mon_sun',
- * 'last_day_of_week_sun_sat', 'last_day_of_month', 'last_day_of_quarter', 'last_day_of_year'.
- * @param {string} [calculationTypeKey='minus'] - Key to determine whether to add or subtract the specified value.
- * Valid values are: 'plus', 'minus'.
- * @param {string} [calculationDateKey='days'] - Key to determine the unit of time to be added or subtracted.
+ * @param {DateTypeKey} [dateTypeKey='today'] - Key to determine the type of date to be used as the starting point.
+ * @param {'minus' | 'plus'} [operator='minus'] - Key to determine whether to add or subtract the specified value.
+ * @param {TCalculationDate} [calculationDateKey='days'] - Key to determine the unit of time to be added or subtracted.
  * Valid values are: 'days', 'weeks', 'months', 'quarters', 'years'.
  * @param {number} [value=0] - Value to be added or subtracted.
  * @param {string} [dateFormat=DEFAULT_DATE_FORMAT] - Format in which to return the new date.
  * @returns {string} The new date in the specified format.
  */
-export const calculationDateAdvanced = (dateTypeKey = 'today', calculationTypeKey = 'minus', calculationDateKey = 'days', value = 0, dateFormat = DEFAULT_DATE_FORMAT, timezone) => {
+export const calculationDateAdvanced = (dateTypeKey = 'today', operator = 'minus', calculationDateKey = 'days', value = 0, dateFormat = DEFAULT_DATE_FORMAT, timezone) => {
+    // Get selected date type
     let date = dayjs().tz(timezone);
-    // let date = dayjs();
     if (DATE_TYPE_MAPPING[dateTypeKey]) {
         date = dateTypeKey.includes('first_day')
             ? date.startOf(DATE_TYPE_MAPPING[dateTypeKey])
-            : dateTypeKey.includes('last_day')
-                ? date.endOf(DATE_TYPE_MAPPING[dateTypeKey])
-                : dayjs();
+            : date.endOf(DATE_TYPE_MAPPING[dateTypeKey]);
     }
-    let newDate = '';
-    newDate =
-        calculationTypeKey === 'plus'
-            ? dayjs(date).add(value, calculationDateKey)
-            : dayjs(date).subtract(value, calculationDateKey);
-    switch (dateTypeKey) {
-        case 'last_day_of_month':
-            if (calculationDateKey === 'months' || calculationDateKey === 'quarters') {
-                newDate = dayjs(newDate).endOf('month');
-            }
-            break;
-        case 'last_day_of_quarter':
-            if (calculationDateKey === 'months' || calculationDateKey === 'quarters') {
-                newDate = dayjs(newDate).endOf('month');
-            }
-            break;
-        default:
-            break;
+    // Calculate new date base on operator and calculation date
+    let newDate = operator === 'plus'
+        ? date.add(value, calculationDateKey)
+        : date.subtract(value, calculationDateKey);
+    // If date type is 'last_day_of_month' or 'last_day_of_quarter', end of month or quarter, return the last day of the month
+    if ((dateTypeKey === 'last_day_of_month' || dateTypeKey === 'last_day_of_quarter') &&
+        (calculationDateKey === 'months' || calculationDateKey === 'quarters')) {
+        newDate = dayjs(newDate).endOf('month');
     }
     return newDate.format(dateFormat);
 };
@@ -74,7 +58,7 @@ export const getCellRender = (current, valueType, info) => {
     if (info.type === 'year')
         return current.year();
     if (info.type === 'month')
-        return MONTH_LABEL_SHORT[current.month()];
+        return current.format('MMM');
     switch (valueType) {
         case 'DAY':
             return current.date();
@@ -83,7 +67,7 @@ export const getCellRender = (current, valueType, info) => {
             return `Quarter ${current.quarter()}`;
         case 'MONTH':
         case 'YEAR_MONTH':
-            return MONTH_LABEL_SHORT[current.month()];
+            return current.format('MMM');
         case 'WEEK':
             return current.isoWeek();
         default:
@@ -91,6 +75,7 @@ export const getCellRender = (current, valueType, info) => {
     }
 };
 /**
+ * Get the type of calendar picker based on valueType
  * @param {ValueTypes} valueType type of value (get from component props)
  * @returns {'date' | 'week' | 'month' | 'quarter' | 'year'} picker ant-design props to render type of calendar
  */
@@ -128,26 +113,19 @@ export const getTimePickerRender = (valueType) => {
             return undefined;
     }
 };
-export function getLabelQuarterRange(quarterOrDay, yearOrFormat, locale, showYear = true) {
-    const dayObj = typeof quarterOrDay === 'number'
-        ? null
-        : dayjs(quarterOrDay || new Date(), yearOrFormat).locale(locale || 'en');
-    const currQuarter = dayObj ? dayObj.quarter() : quarterOrDay;
-    const currYear = dayObj
-        ? showYear
-            ? dayObj.year()
-            : null
-        : typeof yearOrFormat === 'number'
-            ? yearOrFormat
-            : null;
+/**
+ * Get the sub label for current selected quarter
+ */
+export function getLabelQuarterRange(day, format, locale) {
+    const dayObj = dayjs(day || new Date(), format).locale(locale || 'en');
+    const currQuarter = dayObj.quarter();
+    const currYear = dayObj.year();
     const startMonthQuarter = [undefined, 'January', 'April', 'July', 'October'];
     const endMonthQuarter = [undefined, 'March', 'June', 'September', 'December'];
     const endDayQuarter = [undefined, 31, 30, 30, 31];
-    return currYear
-        ? `${startMonthQuarter[currQuarter]} 01, ${currYear} - ${endMonthQuarter[currQuarter]} ${endDayQuarter[currQuarter]}, ${currYear}`
-        : `${startMonthQuarter[currQuarter]} 01 - ${endMonthQuarter[currQuarter]} ${endDayQuarter[currQuarter]}`;
+    return `${startMonthQuarter[currQuarter]} 01, ${currYear} - ${endMonthQuarter[currQuarter]} ${endDayQuarter[currQuarter]}, ${currYear}`;
 }
-export const getFormatDisplay = (operatorKey, type, valueType, formatInputDisplay) => {
+export const getFormatDisplay = (operatorKey, type, valueType) => {
     let formatDisplay = '';
     let timeFormatDisplay = '';
     const isStartDate = operatorKey === 'between' ? type === 'startDate' : operatorKey === 'after';
@@ -156,13 +134,13 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
             formatDisplay = 'YYYY';
             break;
         case 'YEAR_QUARTER':
-            formatDisplay = `${QUARTER_PLACEHOLDER}Q, YYYY`;
+            formatDisplay = '[Quarter] Q, YYYY';
             break;
         case 'YEAR_MONTH':
             formatDisplay = 'MMMM, YYYY';
             break;
         case 'YEAR_WEEK':
-            formatDisplay = `${WEEK_PLACEHOLDER}w, YYYY`;
+            formatDisplay = '[Week] w, YYYY';
             break;
         case 'YEAR_MONTH_DAY':
             formatDisplay = 'MMMM DD, YYYY';
@@ -180,13 +158,13 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
             timeFormatDisplay = 'HH:mm:ss';
             break;
         case 'QUARTER':
-            formatDisplay = `${QUARTER_PLACEHOLDER}Q`;
+            formatDisplay = '[Quarter] Q';
             break;
         case 'MONTH':
             formatDisplay = 'MMMM';
             break;
         case 'WEEK':
-            formatDisplay = `${WEEK_PLACEHOLDER}w`;
+            formatDisplay = '[Week] w';
             break;
         case 'MONTH_DAY':
             formatDisplay = 'MMMM DD';
@@ -208,13 +186,13 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
             timeFormatDisplay = isStartDate ? '00:00:00' : '23:59:59';
             break;
     }
-    return { formatDisplay: formatInputDisplay || formatDisplay, timeFormatDisplay };
+    return { 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.
+ * @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

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

@@ -15,6 +15,9 @@ export interface AdvancedRangePickerProps {
     timeRange: TTimeRange;
     errorMessage?: string;
     showLabel?: boolean;
+    /**
+     * @deprecated showTime (DropdownLabel component) now base on valueType
+     */
     showTime?: boolean;
     timezone?: string;
     separator?: ReactNode;

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

@@ -1,7 +1,7 @@
-var _a, _b;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import dayjs from 'dayjs';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import omit from 'lodash/omit';
 import isEqual from 'react-fast-compare';
 import { useDeepCompareEffect } from '../../../../../hooks';
@@ -11,7 +11,6 @@ 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';
@@ -22,7 +21,22 @@ const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components
 export const AdvancedRangePicker = props => {
     const { t } = i18nInstance;
     // Props
-    const { className, valueType, useFormatMapping, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, popupStyle, isViewMode, onChange, } = props;
+    const { className, valueType, useFormatMapping, timeRange = {
+        startDate: {
+            date: dayjs().format(ADVANCED_RANGE_PICKER_FORMAT.startDate),
+            calculationDate: 'years',
+            value: 1,
+            calculationType: 'minus',
+            dateType: 'today',
+        },
+        endDate: {
+            date: dayjs().format(ADVANCED_RANGE_PICKER_FORMAT.endDate),
+            calculationDate: 'days',
+            value: 1,
+            calculationType: 'minus',
+            dateType: 'today',
+        },
+    }, errorMessage = '', showLabel = true, startDateConfig, endDateConfig, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, popupStyle, isViewMode, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -36,9 +50,21 @@ export const AdvancedRangePicker = props => {
     const onUpdateTimeRange = (key, params, mode = 'user') => {
         try {
             if (typeof onChange === 'function') {
-                const newTimeRange = Object.assign(Object.assign({}, timeRange), { [key]: Object.assign(Object.assign({}, timeRange[key]), params) });
+                const newTimeRange = {
+                    ...timeRange,
+                    [key]: {
+                        ...timeRange[key],
+                        ...params,
+                    },
+                };
                 if (!isEqual(newTimeRange, timeRange)) {
-                    setTimeRange(prev => (Object.assign(Object.assign({}, prev), { [key]: Object.assign(Object.assign({}, timeRange[key]), params) })));
+                    setTimeRange(prev => ({
+                        ...prev,
+                        [key]: {
+                            ...timeRange[key],
+                            ...params,
+                        },
+                    }));
                     if (mode === 'user') {
                         onChange({
                             timeRange: newTimeRange,
@@ -57,39 +83,13 @@ export const AdvancedRangePicker = props => {
             });
         }
     };
-    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: 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: {
-        startDate: {
-            date: dayjs().format(ADVANCED_RANGE_PICKER_FORMAT.startDate),
-            calculationDate: 'years',
-            value: 1,
-            calculationType: 'minus',
-            dateType: 'today',
-        },
-        endDate: {
-            date: dayjs().format(ADVANCED_RANGE_PICKER_FORMAT.endDate),
-            calculationDate: 'days',
-            value: 1,
-            calculationType: 'minus',
-            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,
-    showTime: true,
+    return (_jsxs(Space, { size: 15, align: "end", className: className || '', children: [_jsx(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, calculationTypeKeysShow: startDateConfig?.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', { date, ...option }, 'user'), inputStyle: inputStyle, popupStyle: popupStyle, isViewMode: isViewMode }), separator || null, _jsx(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, calculationTypeKeysShow: endDateConfig?.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', { date, ...option }, 'user'), inputStyle: inputStyle, popupStyle: popupStyle, isViewMode: isViewMode })] }));
 };

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

@@ -5,9 +5,7 @@ interface DropdownLabelProps {
     date?: string;
     format?: string;
     type?: TAdvancedType;
-    showTime?: boolean;
     operatorKey?: TOperatorKey;
-    formatInputDisplay?: string;
 }
 export declare const DropdownLabel: React.FC<DropdownLabelProps>;
 export {};

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

@@ -1,18 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import dayjs from 'dayjs';
 import React from 'react';
 // Components
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
-import { ADVANCED_PICKER_TYPE, DEFAULT_DATE_FORMAT, HIDE_TIME_LABEL_ARR, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, } from '../AdvancedPicker/constants';
+import { ADVANCED_PICKER_TYPE, DEFAULT_DATE_FORMAT, HIDE_TIME_LABEL_ARR, } from '../AdvancedPicker/constants';
 // Instance
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { getFormatDisplay, getLabelQuarterRange } from '../AdvancedPicker/utils';
-export const DropdownLabel = React.memo(({ valueType, date, format, type, showTime, operatorKey, formatInputDisplay }) => {
-    var _a;
+export const DropdownLabel = React.memo(({ valueType, date, format, type, operatorKey }) => {
     const { t } = i18nInstance;
-    const title = (_a = Object.values(ADVANCED_PICKER_TYPE).find(({ value }) => value === type)) === null || _a === void 0 ? void 0 : _a.label;
-    const { timeFormatDisplay } = getFormatDisplay(operatorKey, type, valueType, formatInputDisplay);
+    const title = Object.values(ADVANCED_PICKER_TYPE).find(({ value }) => value === type)?.label;
+    const { timeFormatDisplay } = getFormatDisplay(operatorKey, type, valueType);
     let formatLabel = 'dddd, MMMM DD, YYYY';
     let subLabel = '';
     switch (valueType) {
@@ -20,9 +20,8 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
             formatLabel = 'YYYY';
             break;
         case 'YEAR_QUARTER':
-            formatLabel = `${QUARTER_PLACEHOLDER}Q, YYYY`;
+            formatLabel = '[Quarter] Q, YYYY';
             subLabel = getLabelQuarterRange(date, format || DEFAULT_DATE_FORMAT, 'en');
-            // subLabel = getLabelQuarterRange(date!, format || DEFAULT_DATE_FORMAT, locale);
             break;
         case 'YEAR_MONTH':
             formatLabel = 'MMMM, YYYY';
@@ -30,7 +29,7 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
         case 'YEAR_WEEK': {
             const dayObj = dayjs(date || new Date(), format).locale('en');
             // const dayObj = dayjs(date || new Date(), format).locale(locale || 'en');
-            formatLabel = `${WEEK_PLACEHOLDER}w, YYYY`;
+            formatLabel = '[Week] w, YYYY';
             subLabel = `${dayjs(dayObj).day(0).format('MMMM DD, YYYY')} - ${dayjs(dayObj)
                 .day(6)
                 .format('MMMM DD, YYYY')}`;
@@ -45,13 +44,13 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
             formatLabel = 'dddd, MMMM DD, YYYY';
             break;
         case 'QUARTER':
-            formatLabel = `${QUARTER_PLACEHOLDER}Q`;
+            formatLabel = '[Quarter] Q';
             break;
         case 'MONTH':
             formatLabel = 'MMMM';
             break;
         case 'WEEK':
-            formatLabel = `${WEEK_PLACEHOLDER}w`;
+            formatLabel = '[Week] w';
             break;
         case 'MONTH_DAY':
             formatLabel = 'MMMM DD';
@@ -71,17 +70,9 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
         default:
             break;
     }
-    return (React.createElement("div", { style: { textAlign: 'center' } },
-        title && operatorKey === 'between' && (React.createElement(Typography.Text, { className: "__title", style: { color: '#666666' } }, t(title))),
-        React.createElement("div", { style: { fontWeight: 'bold' } }, dayjs(date || new Date(), format)
-            .locale('en')
-            // .locale(locale || 'en')
-            .format(formatLabel)
-            .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-            .replace(WEEK_PLACEHOLDER, 'Week ')),
-        subLabel ? React.createElement("div", null, subLabel) : null,
-        !HIDE_TIME_LABEL_ARR.includes(valueType || '') && showTime && !subLabel ? (React.createElement("div", { style: { fontWeight: 'bold' } }, dayjs(date || new Date(), format)
-            .locale('en')
-            // .locale(locale || 'en')
-            .format(timeFormatDisplay))) : null));
+    return (_jsxs("div", { style: { textAlign: 'center' }, children: [title && operatorKey === 'between' && (_jsx(Typography.Text, { className: "__title", style: { color: '#666666' }, children: t(title) })), _jsx("div", { style: { fontWeight: 'bold' }, children: dayjs(date || new Date(), format)
+                    .locale('en')
+                    .format(formatLabel) }), subLabel ? _jsx("div", { children: subLabel }) : null, !HIDE_TIME_LABEL_ARR.includes(valueType || '') && !subLabel ? (_jsx("div", { style: { fontWeight: 'bold' }, children: dayjs(date || new Date(), format)
+                    .locale('en')
+                    .format(timeFormatDisplay) })) : null] }));
 });

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

@@ -1,12 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Icon from '@antscorp/icons';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const ErrorMessage = React.memo(({ errorMessage }) => {
-    var _a;
     if (!errorMessage)
         return null;
-    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 5 } },
-        React.createElement(Icon, { type: "icon-ants-remove-circle", style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorError } }),
-        React.createElement(Typography.Text, { type: "danger" }, errorMessage)));
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx(Icon, { type: "icon-ants-remove-circle", style: { color: THEME.token?.colorError } }), _jsx(Typography.Text, { type: "danger", children: errorMessage })] }));
 });

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

@@ -1,17 +1,7 @@
-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;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/destructuring-assignment */
 // Libraries
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Atoms
@@ -21,7 +11,7 @@ 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"]);
+    const { required, focused, onChange, ...restOf } = props;
     // I18n
     const { t } = i18nInstance;
     const [isFocused, setFocused] = useState(false);
@@ -38,14 +28,11 @@ export const DatePickerV2 = props => {
             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)));
+    return (_jsx(DatePickerWrapper, { children: _jsxs(Space, { direction: "vertical", size: 5, children: [_jsx(AntDatePicker, { ...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 ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8 }, children: requiredMsg })) : null] }) }));
 };

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

@@ -1,4 +1,3 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Constants
@@ -6,7 +5,7 @@ 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;
+      font-size: ${THEME.token?.fontSize}px;
     }
   }
 `;

package/es/components/molecules/DisplayFormat/DisplayFormatSelect.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TDatetimeFormatSetting, TNumberFormatSettings } from './components';
+import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+export interface DisplayFormatSelectProps extends React.HTMLAttributes<HTMLDivElement> {
+    onSettingChange: (settings: TDatetimeFormatSetting | TNumberFormatSettings) => void;
+    setting: TDatetimeFormatSetting | TNumberFormatSettings | undefined;
+    formatType: string;
+    disabled?: boolean;
+    infos?: PayloadInfo;
+    url?: string;
+}
+export declare const DisplayFormatSelect: React.FC<DisplayFormatSelectProps>;

package/es/components/molecules/DisplayFormat/DisplayFormatSelect.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useMemo } from 'react';
+import { DisplayFormatSettings } from './DisplayFormatSettings';
+// Types
+import { Select } from '../Select';
+// Constants
+import { DYNAMIC_CONTENT_ATTR_DF_TYPE, NUMBER_SETTINGS_DEFAULT, DATETIME_SETTINGS_DEFAULT, DYNAMIC_CONTENT_DF_FORMAT_TYPE, } from './constants';
+import { useUpdateEffect } from '@antscorp/antsomi-ui/es/hooks';
+export const DisplayFormatSelect = props => {
+    const { onSettingChange, formatType, setting = formatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT, disabled, infos, url, ...rest } = props;
+    const { type: settingType = DYNAMIC_CONTENT_DF_FORMAT_TYPE[formatType] } = setting || {};
+    // Memo
+    const typeOptions = useMemo(() => DYNAMIC_CONTENT_ATTR_DF_TYPE.filter(dfType => dfType.dataType === formatType), [formatType]);
+    // Effects
+    useUpdateEffect(() => {
+        onSettingChange(formatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [formatType]);
+    return (typeOptions.length > 0 && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, ...rest, children: [_jsx(Select, { disabled: disabled, value: settingType, options: typeOptions, onSelect: type => onSettingChange({
+                    ...setting,
+                    type: type,
+                }) }), _jsx(DisplayFormatSettings, { disabled: disabled, onSettingsChange: setting => {
+                    onSettingChange(setting);
+                }, displayFormatType: settingType, formatSettings: setting, url: url ?? '', infos: infos ?? {} })] })));
+};

package/es/components/molecules/DisplayFormat/DisplayFormatSettings.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
+export interface DisplayFormatSettingsProps extends React.HTMLAttributes<HTMLDivElement> {
+    onSettingsChange: (settings: any) => void;
+    formatSettings: any;
+    displayFormatType: TDisplayFormat;
+    dynamicContentType?: string;
+    infos: PayloadInfo;
+    url: string;
+    disabled?: boolean;
+}
+export declare const DisplayFormatSettings: React.FC<DisplayFormatSettingsProps>;