@antscorp/antsomi-ui 1.3.3-beta.78 → 1.3.3-beta.79

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

@@ -1,44 +1,30 @@
-import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
-const { t } = i18nInstance;
 export const DATE_TYPES = [
-    { value: 'today', label: t('datePicker.dateTypes.today') },
-    { value: 'first_day_of_week_mon_sun', label: t('datePicker.dateTypes.firstDayOfWeekMonSun') },
-    { value: 'first_day_of_week_sun_sat', label: t('datePicker.dateTypes.firstDayOfWeekSunSat') },
-    { value: 'first_day_of_month', label: t('datePicker.dateTypes.firstDayOfMonth') },
-    { value: 'first_day_of_quarter', label: t('datePicker.dateTypes.firstDayOfQuarter') },
-    { value: 'first_day_of_year', label: t('datePicker.dateTypes.firstDayOfYear') },
-    { value: 'last_day_of_week_mon_sun', label: t('datePicker.dateTypes.lastDayOfWeekMonSun') },
-    { value: 'last_day_of_week_sun_sat', label: t('datePicker.dateTypes.lastDayOfWeekSunSat') },
-    { value: 'last_day_of_month', label: t('datePicker.dateTypes.lastDayOfMonth') },
-    { value: 'last_day_of_quarter', label: t('datePicker.dateTypes.lastDayOfQuarter') },
-    { value: 'last_day_of_year', label: t('datePicker.dateTypes.lastDayOfYear') },
-    { value: 'fixed', label: t('datePicker.dateTypes.fixed') },
+    { value: 'today', label: 'datePicker.dateTypes.today' },
+    { value: 'first_day_of_week_mon_sun', label: 'datePicker.dateTypes.firstDayOfWeekMonSun' },
+    { value: 'first_day_of_week_sun_sat', label: 'datePicker.dateTypes.firstDayOfWeekSunSat' },
+    { value: 'first_day_of_month', label: 'datePicker.dateTypes.firstDayOfMonth' },
+    { value: 'first_day_of_quarter', label: 'datePicker.dateTypes.firstDayOfQuarter' },
+    { value: 'first_day_of_year', label: 'datePicker.dateTypes.firstDayOfYear' },
+    { value: 'last_day_of_week_mon_sun', label: 'datePicker.dateTypes.lastDayOfWeekMonSun' },
+    { value: 'last_day_of_week_sun_sat', label: 'datePicker.dateTypes.lastDayOfWeekSunSat' },
+    { value: 'last_day_of_month', label: 'datePicker.dateTypes.lastDayOfMonth' },
+    { value: 'last_day_of_quarter', label: 'datePicker.dateTypes.lastDayOfQuarter' },
+    { 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: t('global.minus') },
-    { value: 'plus', label: t('global.plus') },
+    { value: 'minus', label: 'global.minus' },
+    { value: 'plus', label: 'global.plus' },
 ];
 export const CALCULATION_DATES = [
-    { value: 'seconds', label: t('datePicker.seconds') },
-    { value: 'minutes', label: t('datePicker.minutes') },
-    { value: 'hours', label: t('datePicker.hours') },
-    { value: 'days', label: t('datePicker.days') },
-    { value: 'weeks', label: t('datePicker.weeks') },
-    { value: 'months', label: t('datePicker.months') },
-    { value: 'quarters', label: t('datePicker.quarters') },
-    { value: 'years', label: t('datePicker.years') },
+    { value: 'seconds', label: 'datePicker.seconds' },
+    { value: 'minutes', label: 'datePicker.minutes' },
+    { value: 'hours', label: 'datePicker.hours' },
+    { value: 'days', label: 'datePicker.days' },
+    { value: 'weeks', label: 'datePicker.weeks' },
+    { value: 'months', label: 'datePicker.months' },
+    { value: 'quarters', label: 'datePicker.quarters' },
+    { value: 'years', label: 'datePicker.years' },
 ];
 export const VALUE_TYPES = {
     INPUT_TEXT: 'INPUT_TEXT',
@@ -86,112 +72,3 @@ export const ADVANCED_PICKER_TYPE = {
         label: 'datePicker.endDate',
     },
 };
-export const MONTH_LABEL_SHORT = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-];
-export const MONTH_LABEL_FULL = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-];
-export const DAY_LABEL_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'];
-export const WEEK_ARR = Array.from({ length: 53 }, (_, i) => i + 1);
-export const MONTH_DAY_31 = Array.from({ length: 31 }, (_, i) => i + 1);
-export const MONTH_DAY_30 = Array.from({ length: 30 }, (_, i) => i + 1);
-export const MONTH_DAY_FEB = Array.from({ length: 29 }, (_, i) => i + 1);
-export const MONTH_31 = [0, 2, 4, 6, 7, 9, 11];
-export const MONTH_30 = [3, 5, 8, 10];
-export const DAY_OF_MONTH = [
-    MONTH_DAY_31,
-    MONTH_DAY_FEB,
-    MONTH_DAY_31,
-    MONTH_DAY_30,
-    MONTH_DAY_31,
-    MONTH_DAY_30,
-    MONTH_DAY_31,
-    MONTH_DAY_31,
-    MONTH_DAY_30,
-    MONTH_DAY_31,
-    MONTH_DAY_30,
-    MONTH_DAY_31,
-];
-/** The year with full 366 days of year, use for select day/day of month with include edge case (February 29th) */
-export const ANCHOR_LEAP_YEAR = 2024;
-export const QUARTER_PLACEHOLDER = '%q%';
-export const WEEK_PLACEHOLDER = '%t%';
-export const HIDE_TIME_LABEL_ARR = [
-    'YEAR',
-    'YEAR_MONTH',
-    'YEAR_MONTH_DAY',
-    'QUARTER',
-    'MONTH',
-    'WEEK',
-    'HOUR',
-    'MINUTE',
-    'MONTH_DAY',
-    'DAY_OF_WEEK',
-    'DAY',
-];
-// export const CALCULATION_DATES = [
-//   { value: 'seconds', label: 'datePicker.seconds' },
-//   { value: 'minutes', label: 'datePicker.minutes' },
-//   { value: 'hours', label: 'datePicker.hours' },
-//   { value: 'days', label: 'datePicker.days' },
-//   { value: 'weeks', label: 'datePicker.weeks' },
-//   { value: 'months', label: 'datePicker.months' },
-//   { value: 'quarters', label: 'datePicker.quarters' },
-//   { value: 'years', label: 'datePicker.years' },
-// ];
-// Granularity according to value type (semantic)
-export const GRANULARITY_MAPPING = {
-    YEAR: ['years'],
-    YEAR_QUARTER: ['years', 'quarters'],
-    YEAR_MONTH: ['years', 'quarters', 'months'],
-    YEAR_WEEK: ['years', 'quarters', 'months', 'weeks'],
-    YEAR_MONTH_DAY: ['years', 'quarters', 'months', 'weeks', 'days'],
-    YEAR_MONTH_DAY_HOUR: ['years', 'quarters', 'months', 'weeks', 'days', 'hours'],
-    YEAR_MONTH_DAY_MINUTE: ['years', 'quarters', 'months', 'weeks', 'days', 'hours', 'minutes'],
-    YEAR_MONTH_DAY_SECOND: [
-        'years',
-        'quarters',
-        'months',
-        'weeks',
-        'days',
-        'hours',
-        'minutes',
-        'seconds',
-    ],
-    QUARTER: ['years', 'quarters'],
-    MONTH: ['years', 'quarters', 'months'],
-    WEEK: ['years', 'quarters', 'months', 'weeks'],
-    MONTH_DAY: ['years', 'quarters', 'months', 'weeks', 'days'],
-    DAY_OF_WEEK: ['years', 'quarters', 'months', 'weeks', 'days'],
-    /** Day of Month */
-    DAY: ['years', 'quarters', 'months', 'weeks', 'days'],
-    HOUR: ['years', 'quarters', 'months', 'weeks', 'days', 'hours'],
-    MINUTE: ['years', 'quarters', 'months', 'weeks', 'days', 'hours', 'minutes'],
-    INPUT_NUMBER: ['years', 'months', 'weeks', 'days'],
-    INPUT_TEXT: ['years', 'months', 'weeks', 'days'],
-    INPUT_TEXT_NO_FIELD: ['years', 'months', 'weeks', 'days'],
-    MATCHES_ANY: ['years', 'months', 'weeks', 'days'],
-};

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

@@ -1,57 +1,13 @@
-var _a, _b, _c, _d, _e;
+var _a, _b, _c;
 // Libraries
 import { THEME } from '../../../../../constants';
 import styled from 'styled-components';
 export const DropdownContent = styled.div `
-  width: 250px;
+  width: 230px;
   padding: 10px 10px 0px 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
-
-  .custom-picker-content {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    row-gap: 12px;
-    height: 120px;
-    overflow-y: auto;
-
-    &.day-of-month-container {
-      grid-template-columns: repeat(7, 1fr);
-    }
-
-    & > .custom-picker-item {
-      padding: 2px 8px;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &.custom-picker-item-selected {
-        background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
-        color: #fff;
-        &:hover {
-          background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
-        }
-      }
-
-      &:hover {
-        background-color: rgba(34, 34, 34, 0.04);
-      }
-    }
-  }
-
-  .month-controller {
-    display: flex;
-    justify-content: space-around;
-    user-select: none;
-    i {
-      cursor: pointer;
-      &:hover {
-        color: #000;
-      }
-    }
-  }
 `;
 export const DropdownHeader = styled.div `
   padding: 10px 10px 0px 10px;
@@ -61,7 +17,7 @@ export const DropdownHeader = styled.div `
   text-align: center;
 
   > .__title {
-    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw6};
   }
 `;
 export const DropdownFooter = styled.div `
@@ -78,8 +34,8 @@ export const DatePickerHeader = styled.div `
   line-height: 1.6 !important;
 `;
 export const DatePickerCustomInput = styled.input `
-  font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
-  color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw10} !important;
+  font-family: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontFamily};
+  color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw10} !important;
 `;
 export const DatePickerFooter = styled.div `
   position: absolute;

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

@@ -1,4 +1,3 @@
-import { VALUE_TYPES } from './constants';
 export type TOption = {
     dateType: TDateType;
     calculationType: TCalculationType;
@@ -13,24 +12,3 @@ export type TCalculationType = 'minus' | 'plus' | '';
 export type TCalculationDate = 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'quarters' | 'years' | '';
 export type TOperatorKey = 'after' | 'between' | 'before';
 export type TAdvancedType = 'startDate' | 'endDate';
-/**
- * @description Mapping ValueTypes to Semantic
- * @example ```valueType -> semantic```
- * @type YEAR -> 'YYYY'
- * @type YEAR_QUARTER -> 'QQ YYYY'
- * @type YEAR_MONTH -> 'MM YYYY'
- * @type YEAR_WEEK -> 'WW YYYY'
- * @type YEAR_MONTH_DAY -> 'MM DD YYYY'
- * @type YEAR_MONTH_DAY_HOUR -> 'MM DD YYYY HH'
- * @type YEAR_MONTH_DAY_MINUTE -> 'MM DD YYYY HH MM'
- * @type YEAR_MONTH_DAY_SECOND -> 'MM DD YYYY HH MM SS'
- * @type QUARTER -> 'QQ'
- * @type MONTH -> 'MM'
- * @type WEEK -> 'WW'
- * @type MONTH_DAY -> 'MM DD'
- * @type DAY_OF_WEEK -> 'D'
- * @type DAY -> 'DD'
- * @type HOUR -> 'HH'
- * @type MINUTE -> 'MM'
- */
-export type ValueTypes = (typeof VALUE_TYPES)[keyof typeof VALUE_TYPES];

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

@@ -1,6 +1,3 @@
-import type { Dayjs } from 'dayjs';
-import type { CellRenderInfo } from 'rc-picker/es/interface';
-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.
@@ -16,24 +13,3 @@ import { TAdvancedType, TOperatorKey, ValueTypes } from './types';
  * @returns {string} The new date in the specified format.
  */
 export declare const calculationDateAdvanced: (dateTypeKey?: string, calculationTypeKey?: string, calculationDateKey?: any, value?: number, dateFormat?: string) => any;
-/**
- * Get text of calendar cell base on valueType (semantic/date format)
- * @link https://ant.design/components/date-picker#components-date-picker-demo-cell-render
- * @param {number | Dayjs} current params of cellRender function
- * @param {CellRenderInfo<Dayjs>} info params of cellRender function
- * @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;
-/**
- * @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) => {
-    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 { DATE_TYPE_MAPPING, DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, } from './constants';
+import { DEFAULT_DATE_FORMAT } from './constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
 /**
@@ -23,12 +23,43 @@ dayjs.extend(quarterOfYear);
  */
 export const calculationDateAdvanced = (dateTypeKey = 'today', calculationTypeKey = 'minus', calculationDateKey = 'days', value = 0, dateFormat = DEFAULT_DATE_FORMAT) => {
     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();
+    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;
     }
     let newDate = '';
     newDate =
@@ -51,155 +82,3 @@ export const calculationDateAdvanced = (dateTypeKey = 'today', calculationTypeKe
     }
     return newDate.format(dateFormat);
 };
-/**
- * Get text of calendar cell base on valueType (semantic/date format)
- * @link https://ant.design/components/date-picker#components-date-picker-demo-cell-render
- * @param {number | Dayjs} current params of cellRender function
- * @param {CellRenderInfo<Dayjs>} info params of cellRender function
- * @param {ValueTypes} valueType type of value (get from component props)
- * @returns {number | string} label of cell according to valueType
- */
-export const getCellRender = (current, valueType, info) => {
-    if (typeof current === 'number')
-        return current;
-    if (info.type === 'decade')
-        return `${current.year()}-${current.year() + 10}`;
-    if (info.type === 'year')
-        return current.year();
-    if (info.type === 'month')
-        return MONTH_LABEL_SHORT[current.month()];
-    switch (valueType) {
-        case 'DAY':
-            return current.date();
-        case 'QUARTER':
-        case 'YEAR_QUARTER':
-            return `Quarter ${current.quarter()}`;
-        case 'MONTH':
-        case 'YEAR_MONTH':
-            return MONTH_LABEL_SHORT[current.month()];
-        case 'WEEK':
-            return current.isoWeek();
-        default:
-            return current.date();
-    }
-};
-/**
- * @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 const getPickerRender = (valueType) => {
-    switch (valueType) {
-        case 'DAY':
-            return 'date';
-        case 'YEAR':
-            return 'year';
-        case 'QUARTER':
-        case 'YEAR_QUARTER':
-            return 'quarter';
-        case 'MONTH':
-        case 'YEAR_MONTH':
-            return 'month';
-        case 'WEEK':
-        case 'YEAR_WEEK':
-            return 'week';
-        default:
-            return 'date';
-    }
-};
-export const getTimePickerRender = (valueType) => {
-    switch (valueType) {
-        case 'HOUR':
-        case 'YEAR_MONTH_DAY_HOUR':
-            return 'HH';
-        case 'YEAR_MONTH_DAY_MINUTE':
-            return 'HHmm';
-        case 'YEAR_MONTH_DAY_SECOND':
-            return 'HHmmss';
-        case 'MINUTE':
-            return 'mm';
-        default:
-            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;
-    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]}`;
-}
-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,8 +1,7 @@
 import React from 'react';
-import { TShowCalculationTypeCondition, ValueTypes } from '../AdvancedPicker/types';
+import { TShowCalculationTypeCondition } 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,9 +1,8 @@
 // Libraries
 import dayjs from 'dayjs';
-import React, { useState } from 'react';
+import React from 'react';
 import omit from 'lodash/omit';
 import isEqual from 'react-fast-compare';
-import { useDeepCompareEffect } from '../../../../../hooks';
 // Atoms
 import { Space } from '../../../../atoms';
 // Molecules
@@ -17,31 +16,20 @@ 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 { 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]);
+    const { timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, onChange, } = props;
     // 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)) {
-                    setTimeRange(prev => (Object.assign(Object.assign({}, prev), { [key]: Object.assign(Object.assign({}, timeRange[key]), params) })));
-                    if (mode === 'user') {
-                        onChange({
-                            timeRange: newTimeRange,
-                            mode,
-                        });
-                    }
+                    onChange({
+                        timeRange: newTimeRange,
+                        mode,
+                    });
                 }
             }
         }
@@ -55,8 +43,8 @@ export const AdvancedRangePicker = props => {
         }
     };
     return (React.createElement(Space, { size: 20 },
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, 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') })));
+        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') })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

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 => (React.createElement(React.Fragment, { key: keySetting }, settingMap[keySetting])));
+            return Object.keys(settingMap).map(keySetting => settingMap[keySetting]);
         }
         return showSettings.map(keySetting => settingMap[keySetting]);
     }, [showSettings, settingMap]);

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

@@ -18,8 +18,6 @@ export const StyledModal = styled(AntdModal) `
         width: 50px;
         height: 50px;
         line-height: 50px;
-        align-items: center;
-        justify-content: center;
       }
     }
     .antsomi-modal-header {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").DefaultOptionType | import("rc-tree-select/lib/TreeSelect").BaseOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
+export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").BaseOptionType | import("rc-tree-select/lib/TreeSelect").DefaultOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     displayName?: string | undefined;