@antscorp/antsomi-ui 1.3.3-beta.73 → 1.3.3-beta.75

package/es/components/atoms/Slider/index.js

@@ -9,15 +9,20 @@ export const Slider = memo(props => {
     const { range, value, min = 0, max = 0, className, tooltipVisible } = props;
     const isNegative = useMemo(() => !!(!range && min < 0), [range, min]);
     const calculateWidth = useMemo(() => ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1), [min, max, value]);
-    const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
+    // const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
+    const restProps = omit(props, ['tooltipVisible']);
     if (isNegative) {
         return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
-            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { marks: {
+            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { tooltip: tooltipVisible !== 'default' && {
+                    open: tooltipVisible,
+                }, marks: {
                     0: ' ',
                 } }))));
     }
     return (React.createElement(SliderWrapper, { className: className },
-        React.createElement(AntdSlider, Object.assign({}, restProps))));
+        React.createElement(AntdSlider, Object.assign({}, restProps, { tooltip: tooltipVisible !== 'default' && {
+                open: tooltipVisible,
+            } }))));
 });
 Slider.defaultProps = {
     tooltipVisible: false,

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -312,6 +312,10 @@ export const GlobalStyle = () => {
           }
 
           .antsomi-picker-time-panel {
+            .antsomi-picker-time-panel-column:after {
+              height: 8px;
+            }
+
             .antsomi-picker-time-panel-cell-selected {
               background-color: ${(_8 = THEME.token) === null || _8 === void 0 ? void 0 : _8.colorPrimary};
               color: #fff;

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 // Libraries
-import React, { useMemo, useState } from 'react';
-import { Tooltip, theme } from 'antd';
+import React, { useEffect, useMemo, useCallback, useState } from 'react';
+import { Tooltip, theme, DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import clsx from 'clsx';
 // Hooks
@@ -9,20 +9,21 @@ import { useDeepCompareEffect } from '../../../../../hooks';
 // Icons
 import Icon from '@antscorp/icons';
 import { EventIcon } from '../../../../icons';
-// Atoms
+// Components
 import { Input, InputNumber, Divider, Space, Button, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
-// Molecules
-import { Select, Dropdown, DatePicker } from '@antscorp/antsomi-ui/es/components';
+import { Select, Dropdown } from '@antscorp/antsomi-ui/es/components';
+import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
 // Utils
 import { handleError, reorder } from '@antscorp/antsomi-ui/es/utils';
-import { calculationDateAdvanced, getCellRender, getLabelQuarterRange, getPickerRender, getTimePickerRender, } from './utils';
+import { calculationDateAdvanced, getCellRender, getFormatDisplay, getPickerRender, getTimePickerRender, } from './utils';
 // Styled
 import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, } 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, HIDE_TIME_LABEL_ARR, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, GRANULARITY_MAPPING, } from './constants';
-import { THEME } from '../../../../../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';
 // Instance
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { DropdownLabel } from '../DropdownLabel/DropdownLabel';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
 const { useToken } = theme;
 const { Text } = Typography;
@@ -48,79 +49,7 @@ export const AdvancedPicker = props => {
         const granularityKey = GRANULARITY_MAPPING[valueType || 'YEAR_MONTH_DAY'].reverse();
         return CALCULATION_DATES.filter(calculationDate => granularityKey.includes(calculationDate.value));
     }, [valueType]);
-    const [formatDisplay, timeFormatDisplay] = useMemo(() => {
-        let formatDisplay = '';
-        let timeFormatDisplay = '';
-        let isStartDate = false;
-        // Handle detect day is start or end
-        if (operatorKey === 'between') {
-            isStartDate = type === 'startDate';
-        }
-        else {
-            isStartDate = operatorKey === 'after';
-        }
-        switch (valueType) {
-            case 'YEAR':
-                formatDisplay = 'YYYY';
-                break;
-            case 'YEAR_QUARTER':
-                formatDisplay = `${QUARTER_PLACEHOLDER}Q, YYYY`;
-                break;
-            case 'YEAR_MONTH':
-                formatDisplay = 'MMMM, YYYY';
-                break;
-            case 'YEAR_WEEK':
-                formatDisplay = `${WEEK_PLACEHOLDER}W, YYYY`;
-                break;
-            case 'YEAR_MONTH_DAY':
-                formatDisplay = 'MMMM DD, YYYY';
-                break;
-            case 'YEAR_MONTH_DAY_HOUR':
-                formatDisplay = `MMMM DD, YYYY ${isStartDate ? 'HH:00:00' : 'HH:59:59'}`;
-                timeFormatDisplay = isStartDate ? 'HH:00:00' : 'HH:59:59';
-                break;
-            case 'YEAR_MONTH_DAY_MINUTE':
-                formatDisplay = `MMMM DD, YYYY ${isStartDate ? 'HH:mm:00' : 'HH:mm:59'}`;
-                timeFormatDisplay = isStartDate ? 'HH:mm:00' : 'HH:mm:59';
-                break;
-            case 'YEAR_MONTH_DAY_SECOND':
-                formatDisplay = 'MMMM DD, YYYY HH:mm:ss';
-                timeFormatDisplay = 'HH:mm:ss';
-                break;
-            case 'QUARTER':
-                formatDisplay = `${QUARTER_PLACEHOLDER}Q`;
-                break;
-            case 'MONTH':
-                formatDisplay = 'MMMM';
-                break;
-            case 'WEEK':
-                formatDisplay = `${WEEK_PLACEHOLDER}W`;
-                break;
-            case 'MONTH_DAY':
-                formatDisplay = 'MMMM DD';
-                break;
-            case 'DAY_OF_WEEK':
-                formatDisplay = 'dddd';
-                break;
-            case 'DAY':
-                formatDisplay = 'DD';
-                break;
-            case 'HOUR':
-                formatDisplay = 'HH';
-                break;
-            case 'MINUTE':
-                formatDisplay = 'mm';
-                break;
-            default:
-                formatDisplay = `DD/MM/YYYY - ${isStartDate ? '00:00:00' : '23:59:59'}`;
-                timeFormatDisplay = isStartDate ? '00:00:00' : '23:59:59';
-                break;
-        }
-        if (formatInputDisplay) {
-            formatDisplay = formatInputDisplay;
-        }
-        return [formatDisplay, timeFormatDisplay];
-    }, [valueType, operatorKey, type, formatInputDisplay]);
+    const { formatDisplay } = getFormatDisplay(operatorKey, type, valueType, formatInputDisplay);
     // State
     const [state, setState] = useState({
         isOpen: false,
@@ -168,8 +97,12 @@ export const AdvancedPicker = props => {
         borderRadius: token.borderRadius,
         boxShadow: token.boxShadowSecondary,
     };
+    const selectedDateTitle = dayjs(dateDisplay, format)
+        .format(formatDisplay)
+        .replace(QUARTER_PLACEHOLDER, 'Quarter ')
+        .replace(WEEK_PLACEHOLDER, 'Week ');
     // Effects
-    useDeepCompareEffect(() => {
+    useEffect(() => {
         try {
             if (isOpen) {
                 setState(state => (Object.assign(Object.assign({}, state), { option: state.optionSelected, date: state.dateDisplay })));
@@ -243,69 +176,6 @@ export const AdvancedPicker = props => {
     }, [propsOption, propsDate, format]);
     // Handlers
     const disableDate = current => current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format);
-    const renderLabel = (date, locale = 'en') => {
-        let formatLabel = 'dddd, MMMM DD, YYYY';
-        let subLabel = '';
-        switch (valueType) {
-            case 'YEAR':
-                formatLabel = 'YYYY';
-                break;
-            case 'YEAR_QUARTER':
-                formatLabel = `${QUARTER_PLACEHOLDER}Q, YYYY`;
-                subLabel = getLabelQuarterRange(date, format || DEFAULT_DATE_FORMAT, locale);
-                break;
-            case 'YEAR_MONTH':
-                formatLabel = 'MMMM, YYYY';
-                break;
-            case 'YEAR_WEEK': {
-                const dayObj = dayjs(date || new Date(), format).locale(locale || 'en');
-                formatLabel = `${WEEK_PLACEHOLDER}W, YYYY`;
-                subLabel = `${dayjs(dayObj).day(0).format('MMMM DD, YYYY')} - ${dayjs(dayObj)
-                    .day(6)
-                    .format('MMMM DD, YYYY')}`;
-                break;
-            }
-            case 'YEAR_MONTH_DAY_HOUR':
-                formatLabel = 'dddd, MMMM DD, YYYY';
-                break;
-            case 'QUARTER':
-                formatLabel = `${QUARTER_PLACEHOLDER}Q`;
-                break;
-            case 'MONTH':
-                formatLabel = 'MMMM';
-                break;
-            case 'WEEK':
-                formatLabel = `${WEEK_PLACEHOLDER}W`;
-                break;
-            case 'MONTH_DAY':
-                formatLabel = 'MMMM DD';
-                break;
-            case 'DAY_OF_WEEK':
-                formatLabel = 'dddd';
-                break;
-            case 'DAY':
-                formatLabel = 'DD';
-                break;
-            case 'HOUR':
-                formatLabel = 'HH:00:00';
-                break;
-            case 'MINUTE':
-                formatLabel = '00:mm:00';
-                break;
-            default:
-                break;
-        }
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { style: { fontWeight: 'bold' } }, dayjs(date || new Date(), format)
-                .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(locale || 'en')
-                .format(timeFormatDisplay))) : null));
-    };
     const toggleOpenDropdown = (isOpen) => {
         try {
             setState(() => (Object.assign(Object.assign({}, state), { isOpen: isOpen != null ? isOpen : !state.isOpen })));
@@ -370,13 +240,6 @@ export const AdvancedPicker = props => {
             });
         }
     };
-    const renderDropdownLabel = () => {
-        var _a;
-        const title = (_a = Object.values(ADVANCED_PICKER_TYPE).find(({ value }) => value === type)) === null || _a === void 0 ? void 0 : _a.label;
-        return (React.createElement("div", { style: { textAlign: 'center' } },
-            title && operatorKey === 'between' && (React.createElement(Text, { className: "__title", style: { color: '#666666' } }, t(title))),
-            renderLabel(date, 'en')));
-    };
     const renderDropdownFooter = () => (React.createElement(React.Fragment, null,
         React.createElement(Divider, null),
         React.createElement(DropdownFooter, null,
@@ -391,19 +254,13 @@ export const AdvancedPicker = props => {
                 onChangeOption({ dateType });
             }, 100);
         } }));
-    const renderErrorMessage = () => {
-        var _a;
-        return errorMessage ? (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(Text, { type: "danger" }, errorMessage))) : null;
-    };
     // NOTE: valueType: 'WEEK'; 'DAY_OF_WEEK'; 'MONTH_DAY'; 'DAY'
-    const customPickerArr = useMemo(() => ({
+    const customPickerArr = {
         WEEK: WEEK_ARR,
         DAY_OF_WEEK: DAY_LABEL_SHORT,
         MONTH_DAY: DAY_OF_MONTH[currMonthSelected],
         DAY: DAY_OF_MONTH[0],
-    }), [currMonthSelected]);
+    };
     const dropdownRender = () => {
         // const customPickerArr = valueType === 'WEEK' ? WEEK_ARR : DAY_LABEL_SHORT;
         const currWeek = dayjs(date, format).isoWeek();
@@ -439,7 +296,8 @@ export const AdvancedPicker = props => {
             }
         };
         return (React.createElement("div", { style: contentStyle },
-            React.createElement(DropdownHeader, { className: "dropdown-header" }, renderDropdownLabel()),
+            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(),
                 option.dateType.value === 'fixed' ? (React.createElement(React.Fragment, null,
@@ -460,15 +318,15 @@ export const AdvancedPicker = props => {
                             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 }) }),
+                    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.map(calculationDate => (Object.assign(Object.assign({}, calculationDate), { label: t(calculationDate.label) }))), value: option.calculationDate.value, onChange: value => {
                             const calculationDate = newCalculationDates.find(calculationDate => calculationDate.value === value);
                             onChangeOption({ calculationDate });
                         } }))),
-                renderErrorMessage()),
+                React.createElement(ErrorMessage, { errorMessage: errorMessage })),
             renderDropdownFooter()));
     };
-    const cellRender = React.useCallback((current, info) => {
+    const cellRender = useCallback((current, info) => {
         const onChangeDatePicker = (value) => {
             try {
                 setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(value).format(format) })));
@@ -516,14 +374,8 @@ export const AdvancedPicker = props => {
     return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container" },
         !!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 || 'YEAR_MONTH_DAY') ? (React.createElement(Tooltip, { title: dayjs(dateDisplay, format)
-                .format(formatDisplay)
-                .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-                .replace(WEEK_PLACEHOLDER, 'Week ') },
-            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: dayjs(dateDisplay, format)
-                        .format(formatDisplay)
-                        .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-                        .replace(WEEK_PLACEHOLDER, 'Week '), onClick: () => toggleOpenDropdown() })), value: dayjs(date, format), style: {
+            !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType || 'YEAR_MONTH_DAY') ? (React.createElement(Tooltip, { title: selectedDateTitle },
+            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: dayjs(date, format), style: {
                     width: 120,
                 }, disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
                     '--error': errorMessage,
@@ -533,10 +385,11 @@ export const AdvancedPicker = props => {
                     'is-hours-picker': valueType === 'HOUR',
                 }), renderExtraFooter: () => (React.createElement(React.Fragment, null,
                     React.createElement(DatePickerHeader, null,
-                        renderDropdownLabel(),
+                        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' } }, renderErrorMessage()),
+                        React.createElement("div", { style: { padding: '0 10px' } },
+                            React.createElement(ErrorMessage, { errorMessage: errorMessage })),
                         renderDropdownFooter()),
                     React.createElement(Divider, null))), picker: getPickerRender(valueType || 'YEAR_MONTH_DAY'), showTime: getTimePickerRender(valueType || 'YEAR_MONTH_DAY')
                     ? {
@@ -546,17 +399,11 @@ export const AdvancedPicker = props => {
                         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: () => toggleOpenDropdown(), overlayStyle: { width: 'fit-content', minWidth: 'auto' } },
-            React.createElement(Tooltip, { title: dayjs(dateDisplay, format)
-                    .format(formatDisplay)
-                    .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-                    .replace(WEEK_PLACEHOLDER, 'Week ') },
+            React.createElement(Tooltip, { title: selectedDateTitle },
                 React.createElement(Input, { disabled: disabled, onClick: () => toggleOpenDropdown(), readOnly: true, suffix: React.createElement(CalendarIconWrapper, { style: {
                             pointerEvents: disabled ? 'none' : 'all',
                         }, onClick: () => toggleOpenDropdown() },
-                        React.createElement(EventIcon, { width: 19, height: 19 })), style: inputStyle, value: dayjs(dateDisplay, format)
-                        .format(formatDisplay)
-                        .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-                        .replace(WEEK_PLACEHOLDER, 'Week '), status: errorMessage ? 'error' : '' }))))));
+                        React.createElement(EventIcon, { width: 19, height: 19 })), style: inputStyle, value: selectedDateTitle, status: errorMessage ? 'error' : '' }))))));
 };
 AdvancedPicker.defaultProps = {
     label: '',

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

@@ -3,6 +3,18 @@ export declare const DATE_TYPES: {
     value: string;
     label: string;
 }[];
+export declare const DATE_TYPE_MAPPING: {
+    first_day_of_week_mon_sun: string;
+    first_day_of_week_sun_sat: string;
+    first_day_of_month: string;
+    first_day_of_quarter: string;
+    first_day_of_year: string;
+    last_day_of_week_mon_sun: string;
+    last_day_of_week_sun_sat: string;
+    last_day_of_month: string;
+    last_day_of_quarter: string;
+    last_day_of_year: string;
+};
 export declare const CALCULATION_TYPES: {
     value: string;
     label: string;

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

@@ -12,6 +12,18 @@ export const DATE_TYPES = [
     { value: 'last_day_of_year', label: 'datePicker.dateTypes.lastDayOfYear' },
     { value: 'fixed', label: 'datePicker.dateTypes.fixed' },
 ];
+export const DATE_TYPE_MAPPING = {
+    first_day_of_week_mon_sun: 'isoWeek',
+    first_day_of_week_sun_sat: 'week',
+    first_day_of_month: 'month',
+    first_day_of_quarter: 'quarter',
+    first_day_of_year: 'year',
+    last_day_of_week_mon_sun: 'isoWeek',
+    last_day_of_week_sun_sat: 'week',
+    last_day_of_month: 'month',
+    last_day_of_quarter: 'quarter',
+    last_day_of_year: 'year',
+};
 export const CALCULATION_TYPES = [
     { value: 'minus', label: 'global.minus' },
     { value: 'plus', label: 'global.plus' },

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

@@ -3,7 +3,7 @@ var _a, _b, _c, _d, _e;
 import { THEME } from '../../../../../constants';
 import styled from 'styled-components';
 export const DropdownContent = styled.div `
-  width: 230px;
+  width: 250px;
   padding: 10px 10px 0px 10px;
   display: flex;
   flex-direction: column;

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

@@ -1,6 +1,6 @@
 import type { Dayjs } from 'dayjs';
 import type { CellRenderInfo } from 'rc-picker/es/interface';
-import { ValueTypes } from './types';
+import { TAdvancedType, TOperatorKey, ValueTypes } from './types';
 /**
  * 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.
@@ -33,3 +33,7 @@ export declare const getPickerRender: (valueType: ValueTypes) => 'date' | 'week'
 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) => {
+    formatDisplay: string;
+    timeFormatDisplay: string;
+};

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

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 // Constants
-import { DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT } from './constants';
+import { DATE_TYPE_MAPPING, DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, } from './constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
 /**
@@ -23,43 +23,12 @@ dayjs.extend(quarterOfYear);
  */
 export const calculationDateAdvanced = (dateTypeKey = 'today', calculationTypeKey = 'minus', calculationDateKey = 'days', value = 0, dateFormat = DEFAULT_DATE_FORMAT) => {
     let date = dayjs();
-    switch (dateTypeKey) {
-        case 'today':
-            date = dayjs();
-            break;
-        case 'first_day_of_week_mon_sun':
-            date = dayjs().startOf('isoWeek');
-            break;
-        case 'first_day_of_week_sun_sat':
-            date = dayjs().startOf('week');
-            break;
-        case 'first_day_of_month':
-            date = dayjs().startOf('month');
-            break;
-        case 'first_day_of_quarter':
-            date = dayjs().startOf('quarter');
-            break;
-        case 'first_day_of_year':
-            date = dayjs().startOf('year');
-            break;
-        case 'last_day_of_week_mon_sun':
-            date = dayjs().endOf('isoWeek');
-            break;
-        case 'last_day_of_week_sun_sat':
-            date = dayjs().endOf('week');
-            break;
-        case 'last_day_of_month':
-            date = dayjs().endOf('month');
-            break;
-        case 'last_day_of_quarter':
-            date = dayjs().endOf('quarter');
-            break;
-        case 'last_day_of_year':
-            date = dayjs().endOf('year');
-            break;
-        default:
-            date = dayjs();
-            break;
+    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();
     }
     let newDate = '';
     newDate =
@@ -171,3 +140,66 @@ export function getLabelQuarterRange(quarterOrDay, yearOrFormat, locale, showYea
         ? `${startMonthQuarter[currQuarter]} 01, ${currYear} - ${endMonthQuarter[currQuarter]} ${endDayQuarter[currQuarter]}, ${currYear}`
         : `${startMonthQuarter[currQuarter]} 01 - ${endMonthQuarter[currQuarter]} ${endDayQuarter[currQuarter]}`;
 }
+export const getFormatDisplay = (operatorKey, type, valueType, formatInputDisplay) => {
+    let formatDisplay = '';
+    let timeFormatDisplay = '';
+    const isStartDate = operatorKey === 'between' ? type === 'startDate' : operatorKey === 'after';
+    switch (valueType) {
+        case 'YEAR':
+            formatDisplay = 'YYYY';
+            break;
+        case 'YEAR_QUARTER':
+            formatDisplay = `${QUARTER_PLACEHOLDER}Q, YYYY`;
+            break;
+        case 'YEAR_MONTH':
+            formatDisplay = 'MMMM, YYYY';
+            break;
+        case 'YEAR_WEEK':
+            formatDisplay = `${WEEK_PLACEHOLDER}W, YYYY`;
+            break;
+        case 'YEAR_MONTH_DAY':
+            formatDisplay = 'MMMM DD, YYYY';
+            break;
+        case 'YEAR_MONTH_DAY_HOUR':
+            formatDisplay = `MMMM DD, YYYY ${isStartDate ? 'HH:00:00' : 'HH:59:59'}`;
+            timeFormatDisplay = isStartDate ? 'HH:00:00' : 'HH:59:59';
+            break;
+        case 'YEAR_MONTH_DAY_MINUTE':
+            formatDisplay = `MMMM DD, YYYY ${isStartDate ? 'HH:mm:00' : 'HH:mm:59'}`;
+            timeFormatDisplay = isStartDate ? 'HH:mm:00' : 'HH:mm:59';
+            break;
+        case 'YEAR_MONTH_DAY_SECOND':
+            formatDisplay = 'MMMM DD, YYYY HH:mm:ss';
+            timeFormatDisplay = 'HH:mm:ss';
+            break;
+        case 'QUARTER':
+            formatDisplay = `${QUARTER_PLACEHOLDER}Q`;
+            break;
+        case 'MONTH':
+            formatDisplay = 'MMMM';
+            break;
+        case 'WEEK':
+            formatDisplay = `${WEEK_PLACEHOLDER}W`;
+            break;
+        case 'MONTH_DAY':
+            formatDisplay = 'MMMM DD';
+            break;
+        case 'DAY_OF_WEEK':
+            formatDisplay = 'dddd';
+            break;
+        case 'DAY':
+            formatDisplay = 'DD';
+            break;
+        case 'HOUR':
+            formatDisplay = 'HH';
+            break;
+        case 'MINUTE':
+            formatDisplay = 'mm';
+            break;
+        default:
+            formatDisplay = `DD/MM/YYYY - ${isStartDate ? '00:00:00' : '23:59:59'}`;
+            timeFormatDisplay = isStartDate ? '00:00:00' : '23:59:59';
+            break;
+    }
+    return { formatDisplay: formatInputDisplay || formatDisplay, timeFormatDisplay };
+};

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { TShowCalculationTypeCondition } from '../AdvancedPicker/types';
+import { TShowCalculationTypeCondition, ValueTypes } from '../AdvancedPicker/types';
 import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
 export interface AdvancedRangePickerProps {
+    valueType?: ValueTypes;
     disabled?: boolean;
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
     startDateConfig?: TDateConfig;

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

@@ -1,8 +1,9 @@
 // Libraries
 import dayjs from 'dayjs';
-import React from 'react';
+import React, { useState } from 'react';
 import omit from 'lodash/omit';
 import isEqual from 'react-fast-compare';
+import { useDeepCompareEffect } from '../../../../../hooks';
 // Atoms
 import { Space } from '../../../../atoms';
 // Molecules
@@ -16,20 +17,31 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.tsx';
 export const AdvancedRangePicker = props => {
-    // const { t } = useTranslation();
     const { t } = i18nInstance;
     // Props
-    const { timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, onChange, } = props;
+    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, onChange, } = props;
+    const [timeRangeState, setTimeRange] = useState(timeRange);
+    useDeepCompareEffect(() => {
+        if (typeof onChange === 'function') {
+            onChange({
+                timeRange: timeRangeState,
+                mode: 'system',
+            });
+        }
+    }, [timeRangeState]);
     // Handles
     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) });
                 if (!isEqual(newTimeRange, timeRange)) {
-                    onChange({
-                        timeRange: newTimeRange,
-                        mode,
-                    });
+                    setTimeRange(prev => (Object.assign(Object.assign({}, prev), { [key]: Object.assign(Object.assign({}, timeRange[key]), params) })));
+                    if (mode === 'user') {
+                        onChange({
+                            timeRange: newTimeRange,
+                            mode,
+                        });
+                    }
                 }
             }
         }
@@ -43,8 +55,8 @@ export const AdvancedRangePicker = props => {
         }
     };
     return (React.createElement(Space, { size: 20 },
-        React.createElement(AdvancedPicker, { 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, onUpdatedNewDate: date => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
-        React.createElement(AdvancedPicker, { 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, onUpdatedNewDate: date => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.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, onUpdatedNewDate: date => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, onUpdatedNewDate: date => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TAdvancedType, TOperatorKey, ValueTypes } from '../AdvancedPicker/types';
+interface DropdownLabelProps {
+    valueType?: ValueTypes;
+    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

@@ -0,0 +1,82 @@
+// 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';
+// 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;
+    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);
+    let formatLabel = 'dddd, MMMM DD, YYYY';
+    let subLabel = '';
+    switch (valueType) {
+        case 'YEAR':
+            formatLabel = 'YYYY';
+            break;
+        case 'YEAR_QUARTER':
+            formatLabel = `${QUARTER_PLACEHOLDER}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';
+            break;
+        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`;
+            subLabel = `${dayjs(dayObj).day(0).format('MMMM DD, YYYY')} - ${dayjs(dayObj)
+                .day(6)
+                .format('MMMM DD, YYYY')}`;
+            break;
+        }
+        case 'YEAR_MONTH_DAY_HOUR':
+            formatLabel = 'dddd, MMMM DD, YYYY';
+            break;
+        case 'QUARTER':
+            formatLabel = `${QUARTER_PLACEHOLDER}Q`;
+            break;
+        case 'MONTH':
+            formatLabel = 'MMMM';
+            break;
+        case 'WEEK':
+            formatLabel = `${WEEK_PLACEHOLDER}W`;
+            break;
+        case 'MONTH_DAY':
+            formatLabel = 'MMMM DD';
+            break;
+        case 'DAY_OF_WEEK':
+            formatLabel = 'dddd';
+            break;
+        case 'DAY':
+            formatLabel = 'DD';
+            break;
+        case 'HOUR':
+            formatLabel = 'HH:00:00';
+            break;
+        case 'MINUTE':
+            formatLabel = '00:mm:00';
+            break;
+        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));
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ErrorMessageProps {
+    errorMessage?: string;
+}
+export declare const ErrorMessage: React.FC<ErrorMessageProps>;
+export {};

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

@@ -0,0 +1,12 @@
+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)));
+});

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

@@ -37,7 +37,7 @@ export const FontSettingEdit = ({ settings, styles, showSettings, onChange, }) =
     [settings]);
     const filteredSetting = useMemo(() => {
         if (!showSettings || (showSettings === null || showSettings === void 0 ? void 0 : showSettings.length) === 0) {
-            return Object.keys(settingMap).map(keySetting => settingMap[keySetting]);
+            return Object.keys(settingMap).map(keySetting => (React.createElement(React.Fragment, { key: keySetting }, settingMap[keySetting])));
         }
         return showSettings.map(keySetting => settingMap[keySetting]);
     }, [showSettings, settingMap]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.73",
+  "version": "1.3.3-beta.75",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -33,9 +33,11 @@
     "serve-storybook": "serve storybook-static",
     "version": "auto-changelog -p && git add CHANGELOG.md",
     "test": "jest",
+    "test:clean": "rimraf coverage",
+    "test:update-snapshot": "jest -u",
     "test:changed": "jest --onlyChanged",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
+    "test:coverage": "yarn test:clean && yarn jest --coverage",
     "ts-compile": "tsc -p tsconfig.esm.json",
     "copy-files": "copyfiles -u 1 src/**/*.json src/**/*.svg src/**/*.scss src/**/*.png es"
   },
@@ -88,7 +90,6 @@
     "lodash": "^4.17.21",
     "moment": "2.29.2",
     "qs": "6.10.3",
-    "rc-picker": "^4.1.1",
     "react-color": "2.19.3",
     "react-draggable": "^4.4.5",
     "react-markdown": "^8.0.7",
@@ -108,6 +109,8 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-jsx": "^7.23.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@babel/plugin-transform-react-jsx-source": "^7.23.3",
     "@babel/plugin-transform-runtime": "^7.23.6",
@@ -137,6 +140,7 @@
     "@typescript-eslint/parser": "^5.55.0",
     "@vitejs/plugin-react": "^3.1.0",
     "auto-changelog": "^2.4.0",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.3.0",
     "babel-plugin-import": "^1.13.8",
     "babel-plugin-module-resolver": "^5.0.0",