@mtes-mct/monitor-ui 2.7.2 → 2.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React UI components and styles for Monitorfish and Monitorenv.",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "license": "AGPL-3.0",
   "engines": {
     "node": ">=18"

package/src/fields/DatePicker/index.d.ts

@@ -1,15 +1,21 @@
 import type { HTMLAttributes } from 'react';
 import type { Promisable } from 'type-fest';
-export type DatePickerProps = Omit<HTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange'> & {
+/**
+ * This type should not be exposed in the final library. It's only exported to be reused in <FormikDatePicker />.
+ *
+ * @private
+ */
+export interface DatePickerProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange'> {
     /** Used to pass something else than `window.document` as a base container to attach global events listeners. */
     baseContainer?: Document | HTMLDivElement | null;
-    defaultValue?: Date;
+    defaultValue?: Date | string;
     disabled?: boolean;
     isCompact?: boolean;
     /** Only allow past dates until today. */
     isHistorical?: boolean;
     isLabelHidden?: boolean;
     isLight?: boolean;
+    isStringDate?: boolean;
     label: string;
     /**
      * Range of minutes used to generate the time picker list.
@@ -23,7 +29,16 @@ export type DatePickerProps = Omit<HTMLAttributes<HTMLFieldSetElement>, 'default
      *
      * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.
      */
-    onChange?: (nextUtcDate: Date) => Promisable<void>;
+    onChange?: ((nextUtcDate: Date) => Promisable<void>) | ((nextUtcDate: string) => Promisable<void>);
     withTime?: boolean;
-};
-export declare function DatePicker({ baseContainer, defaultValue, disabled, isCompact, isHistorical, isLabelHidden, isLight, label, minutesRange, onChange, withTime, ...nativeProps }: DatePickerProps): JSX.Element;
+}
+export interface DatePickerWithDateDateProps extends DatePickerProps {
+    isStringDate?: false;
+    onChange?: (nextUtcDate: Date) => Promisable<void>;
+}
+export interface DatePickerWithStringDateProps extends DatePickerProps {
+    isStringDate: true;
+    onChange?: (nextUtcDate: string) => Promisable<void>;
+}
+export declare function DatePicker(props: DatePickerWithDateDateProps): JSX.Element;
+export declare function DatePicker(props: DatePickerWithStringDateProps): JSX.Element;

package/src/fields/DateRangePicker/index.d.ts

@@ -1,16 +1,22 @@
-import type { DateRange } from '../../types';
+import type { DateAsStringRange, DateRange } from '../../types';
 import type { HTMLAttributes } from 'react';
 import type { Promisable } from 'type-fest';
-export type DateRangePickerProps = Omit<HTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange'> & {
+/**
+ * This type should not be exposed in the final library. It's only exported to be reused in <FormikDateRangePicker />.
+ *
+ * @private
+ */
+export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange'> {
     /** Used to pass something else than `window.document` as a base container to attach global events listeners. */
     baseContainer?: Document | HTMLDivElement | null;
-    defaultValue?: DateRange;
+    defaultValue?: DateRange | DateAsStringRange;
     disabled?: boolean;
     isCompact?: boolean;
     /** Only allow past dates until today. */
     isHistorical?: boolean;
     isLabelHidden?: boolean;
     isLight?: boolean;
+    isStringDate?: boolean;
     label: string;
     /**
      * Range of minutes used to generate the time picker list.
@@ -24,7 +30,16 @@ export type DateRangePickerProps = Omit<HTMLAttributes<HTMLFieldSetElement>, 'de
      *
      * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.
      */
-    onChange?: (nextUtcDateRange: DateRange) => Promisable<void>;
+    onChange?: ((nextUtcDateRange: DateRange) => Promisable<void>) | ((nextUtcDateRange: DateAsStringRange) => Promisable<void>);
     withTime?: boolean;
-};
-export declare function DateRangePicker({ baseContainer, defaultValue, disabled, isCompact, isHistorical, isLabelHidden, isLight, label, minutesRange, onChange, withTime, ...nativeProps }: DateRangePickerProps): JSX.Element;
+}
+export interface DateRangePickerWithDateDateProps extends DateRangePickerProps {
+    isStringDate?: false;
+    onChange?: (nextUtcDateRange: DateRange) => Promisable<void>;
+}
+export interface DateRangePickerWithStringDateProps extends DateRangePickerProps {
+    isStringDate: true;
+    onChange?: (nextUtcDateRange: DateAsStringRange) => Promisable<void>;
+}
+export declare function DateRangePicker(props: DateRangePickerWithDateDateProps): JSX.Element;
+export declare function DateRangePicker(props: DateRangePickerWithStringDateProps): JSX.Element;

package/src/formiks/FormikDatePicker.d.ts

@@ -1,5 +1,9 @@
-import type { DatePickerProps } from '../fields/DatePicker';
-export type FormikDatePickerProps = Omit<DatePickerProps, 'onChange'> & {
+import type { DatePickerWithDateDateProps, DatePickerWithStringDateProps } from '../fields/DatePicker';
+export interface FormikDatePickerWithDateDateProps extends Omit<DatePickerWithDateDateProps, 'onChange'> {
     name: string;
-};
-export declare function FormikDatePicker({ name, ...originalProps }: FormikDatePickerProps): JSX.Element;
+}
+export interface FormikDatePickerWithStringDateProps extends Omit<DatePickerWithStringDateProps, 'onChange'> {
+    name: string;
+}
+export declare function FormikDatePicker(props: FormikDatePickerWithDateDateProps): JSX.Element;
+export declare function FormikDatePicker(props: FormikDatePickerWithStringDateProps): JSX.Element;

package/src/formiks/FormikDateRangePicker.d.ts

@@ -1,5 +1,9 @@
-import type { DateRangePickerProps } from '../fields/DateRangePicker';
-export type FormikDateRangePickerProps = Omit<DateRangePickerProps, 'onChange'> & {
+import type { DateRangePickerWithDateDateProps, DateRangePickerWithStringDateProps } from '../fields/DateRangePicker';
+export interface FormikDateRangePickerWithDateDateProps extends Omit<DateRangePickerWithDateDateProps, 'onChange'> {
     name: string;
-};
-export declare function FormikDateRangePicker({ name, ...originalProps }: FormikDateRangePickerProps): JSX.Element;
+}
+export interface FormikDateRangePickerWithStringDateProps extends Omit<DateRangePickerWithStringDateProps, 'onChange'> {
+    name: string;
+}
+export declare function FormikDateRangePicker(props: FormikDateRangePickerWithDateDateProps): JSX.Element;
+export declare function FormikDateRangePicker(props: FormikDateRangePickerWithStringDateProps): JSX.Element;

package/src/index.d.ts

@@ -40,7 +40,7 @@ export * as Icon from './icons';
 export { useClickOutside } from './hooks/useClickOutside';
 export { useForceUpdate } from './hooks/useForceUpdate';
 export type { PartialTheme, Theme } from './theme';
-export type { DateRange, IconProps, Option } from './types';
+export type { DateAsStringRange, DateRange, IconProps, Option } from './types';
 export type { DropdownProps, DropdownItemProps } from './components/Dropdown';
 export type { ButtonProps } from './elements/Button';
 export type { FieldProps } from './elements/Field';
@@ -52,8 +52,8 @@ export type { TagProps } from './elements/Tag';
 export type { TagGroupProps } from './elements/TagGroup';
 export type { AutoCompleteProps } from './fields/AutoComplete';
 export type { CheckboxProps } from './fields/Checkbox';
-export type { DatePickerProps } from './fields/DatePicker';
-export type { DateRangePickerProps } from './fields/DateRangePicker';
+export type { DatePickerWithDateDateProps, DatePickerWithStringDateProps } from './fields/DatePicker';
+export type { DateRangePickerWithDateDateProps, DateRangePickerWithStringDateProps } from './fields/DateRangePicker';
 export type { MultiCheckboxProps } from './fields/MultiCheckbox';
 export type { MultiSelectProps } from './fields/MultiSelect';
 export type { MultiRadioProps } from './fields/MultiRadio';
@@ -64,8 +64,8 @@ export type { TextareaProps } from './fields/Textarea';
 export type { TextInputProps } from './fields/TextInput';
 export type { FormikAutoCompleteProps } from './formiks/FormikAutoComplete';
 export type { FormikCheckboxProps } from './formiks/FormikCheckbox';
-export type { FormikDatePickerProps } from './formiks/FormikDatePicker';
-export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker';
+export type { FormikDatePickerWithDateDateProps, FormikDatePickerWithStringDateProps } from './formiks/FormikDatePicker';
+export type { FormikDateRangePickerWithDateDateProps, FormikDateRangePickerWithStringDateProps } from './formiks/FormikDateRangePicker';
 export type { FormikEffectProps } from './formiks/FormikEffect';
 export type { FormikMultiCheckboxProps } from './formiks/FormikMultiCheckbox';
 export type { FormikMultiSelectProps } from './formiks/FormikMultiSelect';

package/src/types.d.ts

@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react';
 export type DateRange = [Date, Date];
+export type DateAsStringRange = [string, string];
 export type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;

package/src/utils/getLocalizedDayjs.d.ts

@@ -5,4 +5,4 @@ import type { Dayjs } from 'dayjs';
  * @example
  * `2022-01-02T03:04:05.006Z` => `2022-01-02T03:04:05.006+01:00` (or `+02:00` during DST) in Europe/Paris timezone.
  */
-export declare function getLocalizedDayjs(utcDate: Date): Dayjs;
+export declare function getLocalizedDayjs(utcDate: Date | string): Dayjs;