@mtes-mct/monitor-ui 1.3.0 → 1.5.0

package/formiks/FormikSelect.d.ts

@@ -1,5 +1,3 @@
 import type { SelectProps } from '../fields/Select';
-export declare type FormikSelectProps = Omit<SelectProps, 'name' | 'onChange'> & {
-    name: string;
-};
+export declare type FormikSelectProps = Omit<SelectProps, 'defaultValue' | 'onChange'>;
 export declare function FormikSelect({ name, ...originalProps }: FormikSelectProps): JSX.Element;

package/formiks/FormikTextInput.d.ts

@@ -0,0 +1,3 @@
+import type { TextInputProps } from '../fields/TextInput';
+export declare type FormikTextInputProps = Omit<TextInputProps, 'defaultValue' | 'onChange'>;
+export declare function FormikTextInput({ name, ...originalProps }: FormikTextInputProps): JSX.Element;

package/formiks/FormikTextarea.d.ts

@@ -0,0 +1,3 @@
+import type { TextareaProps } from '../fields/Textarea';
+export declare type FormikTextareaProps = Omit<TextareaProps, 'defaultValue' | 'onChange'>;
+export declare function FormikTextarea({ name, ...originalProps }: FormikTextareaProps): JSX.Element;

package/index.d.ts

@@ -1,18 +1,34 @@
 export * as MUI from './constants';
 export { THEME } from './theme';
+export { Checkbox } from './fields/Checkbox';
 export { DateRangePicker } from './fields/DateRangePicker';
 export { DatePicker } from './fields/DatePicker';
+export { MultiSelect } from './fields/MultiSelect';
 export { Select } from './fields/Select';
+export { Textarea } from './fields/Textarea';
+export { TextInput } from './fields/TextInput';
+export { FormikCheckbox } from './formiks/FormikCheckbox';
 export { FormikDatePicker } from './formiks/FormikDatePicker';
 export { FormikDateRangePicker } from './formiks/FormikDateRangePicker';
 export { FormikEffect } from './formiks/FormikEffect';
+export { FormikMultiSelect } from './formiks/FormikMultiSelect';
 export { FormikSelect } from './formiks/FormikSelect';
+export { FormikTextarea } from './formiks/FormikTextarea';
+export { FormikTextInput } from './formiks/FormikTextInput';
 export { ThemeProvider } from './ThemeProvider';
 export type { PartialTheme, Theme } from './theme';
+export type { CheckboxProps } from './fields/Checkbox';
 export type { DateRangePickerProps } from './fields/DateRangePicker';
 export type { DatePickerProps } from './fields/DatePicker';
+export type { MultiSelectProps } from './fields/MultiSelect';
 export type { SelectProps } from './fields/Select';
+export type { TextareaProps } from './fields/Textarea';
+export type { TextInputProps } from './fields/TextInput';
+export type { FormikCheckboxProps } from './formiks/FormikCheckbox';
 export type { FormikDatePickerProps } from './formiks/FormikDatePicker';
 export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker';
 export type { FormikEffectProps } from './formiks/FormikEffect';
+export type { FormikMultiSelectProps } from './formiks/FormikMultiSelect';
 export type { FormikSelectProps } from './formiks/FormikSelect';
+export type { FormikTextareaProps } from './formiks/FormikTextarea';
+export type { FormikTextInputProps } from './formiks/FormikTextInput';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React UI components and styles for Monitorfish and Monitorenv.",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "license": "AGPL-3.0",
   "engines": {
     "node": "18",
@@ -9,19 +9,14 @@
   },
   "dependencies": {
     "@babel/runtime": "7.19.4",
-    "date-fns": "2.29.3",
-    "dayjs": "1.11.5",
-    "lodash.throttle": "4.1.1",
     "prop-types": "15.8.1",
-    "ramda": "0.28.0",
-    "rsuite": "5.19.1",
-    "tslib": "2.4.0",
-    "type-fest": "3.1.0"
+    "tslib": "2.4.0"
   },
   "peerDependencies": {
     "formik": "^2.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "rsuite": "^5.0.0",
     "styled-components": "^5.0.0"
   },
   "//": "https://github.com/okonet/lint-staged/issues/825#issuecomment-674575655",

package/src/ThemeProvider.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { mergeDeepRight } from 'ramda';
+import mergeDeepRight from '../.yarn/cache/ramda-npm-0.28.0-6a5fe8f6cc-44ea6e5010.zip/node_modules/ramda/es/mergeDeepRight.js';
 import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { THEME } from './theme.js';
 

package/src/fields/Checkbox.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { Checkbox as Checkbox$1 } from 'rsuite';
+
+function Checkbox({ label, onChange, ...originalProps }) {
+    const key = useMemo(() => `${originalProps.name}-${String(originalProps.defaultChecked)}`, [originalProps.defaultChecked, originalProps.name]);
+    const handleChange = useCallback((_, isChecked) => {
+        if (!onChange) {
+            return;
+        }
+        onChange(isChecked);
+    }, [onChange]);
+    return (jsx(Checkbox$1, { onChange: handleChange, ...originalProps, children: label }, key));
+}
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/src/fields/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/fields/Checkbox.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { Checkbox as RsuiteCheckbox } from 'rsuite'\n\nimport type { CheckboxProps as RsuiteCheckboxProps } from 'rsuite'\nimport type { ValueType } from 'rsuite/esm/Checkbox'\nimport type { Promisable } from 'type-fest'\n\nexport type CheckboxProps = Omit<RsuiteCheckboxProps, 'checked' | 'onChange'> & {\n  label: string\n  name: string\n  onChange?: (isCheched: boolean) => Promisable<void>\n}\nexport function Checkbox({ label, onChange, ...originalProps }: CheckboxProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${String(originalProps.defaultChecked)}`,\n    [originalProps.defaultChecked, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (_: ValueType | undefined, isChecked: boolean) => {\n      if (!onChange) {\n        return\n      }\n\n      onChange(isChecked)\n    },\n    [onChange]\n  )\n\n  return (\n    <RsuiteCheckbox key={key} onChange={handleChange} {...originalProps}>\n      {label}\n    </RsuiteCheckbox>\n  )\n}\n"],"names":["_jsx","RsuiteCheckbox"],"mappings":";;;;AAYM,SAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAiB,EAAA;AAC3E,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAA,EAAG,aAAa,CAAC,IAAI,CAAA,CAAA,EAAI,MAAM,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA,CAAE,EACrE,CAAC,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,CACnD,CAAA;IAED,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAwB,EAAE,SAAkB,KAAI;QAC/C,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;QAED,QAAQ,CAAC,SAAS,CAAC,CAAA;AACrB,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;AAED,IAAA,QACEA,GAAA,CAACC,UAAc,EAAA,EAAW,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,YAChE,KAAK,EAAA,EADa,GAAG,CAEP,EAClB;AACH;;;;"}

package/src/fields/DatePicker/index.js

@@ -23,7 +23,7 @@ function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedDateTupleRef.current]);
     const submit = useCallback(() => {
-        if (!selectedDateRef.current) {
+        if (!onChange || !selectedDateRef.current) {
             return;
         }
         const nextDate = getUtcizedDayjs(selectedDateRef.current).toDate();

package/src/fields/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/fields/DatePicker/index.tsx"],"sourcesContent":["// TODO We should make this component both form- & a11y-compliant with a `name` and proper (aria-)labels.\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { useForceUpdate } from '../../hooks/useForceUpdate'\nimport { getLocalizedDayjs } from '../../utils/getLocalizedDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { DateInput } from '../DateRangePicker/DateInput'\nimport { TimeInput } from '../DateRangePicker/TimeInput'\nimport { getDateFromDateAndTimeTuple, getDateTupleFromDate, getTimeTupleFromDate } from '../DateRangePicker/utils'\nimport { CalendarPicker } from './CalendarPicker'\n\nimport type { DateOrTimeInputRef, DateTuple, TimeTuple } from '../DateRangePicker/types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type DatePickerProps = {\n  defaultValue?: Date\n  /** Only allow past dates until today. */\n  isHistorical?: boolean\n  isLabelHidden?: boolean\n  label: string\n  /**\n   * Range of minutes used to generate the time picker list.\n   *\n   * @example\n   * `15` would produce a list with `..., 10:45, 11:00, 11:15, ...`.\n   */\n  minutesRange?: number\n  /**\n   * Called each time the date range picker is changed to a new valid value.\n   *\n   * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.\n   */\n  onChange: (nextUtcDate: Date) => Promisable<void>\n  withTime?: boolean\n}\nexport function DatePicker({\n  defaultValue,\n  isHistorical = false,\n  isLabelHidden = false,\n  label,\n  minutesRange = 15,\n  onChange,\n  withTime = false\n}: DatePickerProps) {\n  const dateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const timeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n\n  const isCalendarPickerOpenRef = useRef(false)\n\n  const selectedDateRef = useRef<Date | undefined>(defaultValue ? getLocalizedDayjs(defaultValue).toDate() : undefined)\n  const selectedDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedDateRef.current))\n  const selectedTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedDateRef.current))\n\n  const { forceUpdate } = useForceUpdate()\n\n  const rangeCalendarPickerDefaultValue = useMemo(\n    () =>\n      selectedDateTupleRef.current\n        ? getDateFromDateAndTimeTuple(selectedDateTupleRef.current, ['00', '00'])\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectedDateTupleRef.current]\n  )\n\n  const submit = useCallback(() => {\n    if (!selectedDateRef.current) {\n      return\n    }\n\n    const nextDate = getUtcizedDayjs(selectedDateRef.current).toDate()\n\n    onChange(nextDate)\n  }, [onChange])\n\n  const closeCalendarPicker = useCallback(() => {\n    isCalendarPickerOpenRef.current = false\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  const handleClickOutside = useCallback(\n    (event: globalThis.MouseEvent) => {\n      const target = event.target as Node | null\n\n      if (dateInputRef.current.boxSpan.contains(target)) {\n        return\n      }\n\n      closeCalendarPicker()\n    },\n    [closeCalendarPicker]\n  )\n\n  const handleDateInputNext = useCallback(() => {\n    if (!withTime) {\n      return\n    }\n\n    timeInputRef.current.focus()\n  }, [withTime])\n\n  const handleDateInputFilled = useCallback(\n    (nextDateTuple: DateTuple) => {\n      selectedDateTupleRef.current = nextDateTuple\n\n      // If there is no time input or a time has already been selected,\n      if (!withTime || selectedTimeTupleRef.current) {\n        // we must update the selected date and call onChange()\n        const timeTuple = (withTime ? selectedTimeTupleRef.current : ['00', '00']) as TimeTuple\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, timeTuple)\n\n        selectedDateRef.current = nextDate\n\n        submit()\n      }\n\n      handleDateInputNext()\n    },\n    [handleDateInputNext, submit, withTime]\n  )\n\n  const handleCalendarPickerChange = useCallback(\n    (nextDateTuple: DateTuple) => {\n      // If this is a date picker without a time input,\n      if (!withTime) {\n        // we have to fix the date at the beginning of the day\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, ['00', '00'])\n\n        selectedDateRef.current = nextDate\n      }\n\n      // If this is a date picker with a time input,\n      else {\n        // we include the selected time if it exists, set it at the beginning of the day if not\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, selectedTimeTupleRef.current || ['00', '00'])\n        selectedDateRef.current = nextDate\n      }\n\n      selectedDateTupleRef.current = nextDateTuple\n      selectedTimeTupleRef.current = getTimeTupleFromDate(selectedDateRef.current)\n\n      closeCalendarPicker()\n      forceUpdate()\n\n      submit()\n    },\n    [closeCalendarPicker, forceUpdate, submit, withTime]\n  )\n\n  const handleTimeInputFilled = useCallback(\n    (nextTimeTuple: TimeTuple) => {\n      // If a date has already been selected\n      if (selectedDateTupleRef.current) {\n        // we must update the selected date accordingly and submit it\n        const nextDate = getDateFromDateAndTimeTuple(selectedDateTupleRef.current, nextTimeTuple)\n\n        selectedDateRef.current = nextDate\n\n        submit()\n      }\n\n      selectedTimeTupleRef.current = nextTimeTuple\n\n      submit()\n    },\n    [submit]\n  )\n\n  const openCalendarPicker = useCallback(() => {\n    isCalendarPickerOpenRef.current = true\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  useEffect(() => {\n    window.document.addEventListener('click', handleClickOutside)\n\n    return () => {\n      window.document.removeEventListener('click', handleClickOutside)\n    }\n  }, [handleClickOutside])\n\n  return (\n    <Fieldset className=\"DateRangePicker\">\n      <Legend isHidden={isLabelHidden}>{label}</Legend>\n\n      <Box>\n        <Field>\n          <DateInput\n            ref={dateInputRef}\n            defaultValue={selectedDateTupleRef.current}\n            isForcedFocused={isCalendarPickerOpenRef.current}\n            onChange={handleDateInputFilled}\n            onClick={openCalendarPicker}\n            onNext={handleDateInputNext}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={timeInputRef}\n              defaultValue={selectedTimeTupleRef.current}\n              minutesRange={minutesRange}\n              onBack={() => dateInputRef.current.focus(true)}\n              onChange={handleTimeInputFilled}\n              onFocus={closeCalendarPicker}\n              onPrevious={() => dateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n      </Box>\n\n      {isCalendarPickerOpenRef.current && (\n        <CalendarPicker\n          defaultValue={rangeCalendarPickerDefaultValue}\n          isHistorical={isHistorical}\n          onChange={handleCalendarPickerChange}\n        />\n      )}\n    </Fieldset>\n  )\n}\n\nconst Fieldset = styled.fieldset`\n  border: 0;\n  margin: 0;\n  padding: 0;\n`\n\nconst Box = styled.div`\n  * {\n    font-weight: 500;\n    line-height: 1;\n  }\n\n  color: ${p => p.theme.color.gunMetal};\n  font-size: 13px;\n  position: relative;\n`\n\nconst Legend = styled.legend<{\n  isHidden: boolean\n}>`\n  color: ${p => p.theme.color.slateGray};\n  display: ${p => (p.isHidden ? 'none' : 'table')};\n  font-weight: inherit;\n  margin-bottom: 0.5rem;\n  padding: 0;\n`\n\nconst Field = styled.span<{\n  isEndDateField?: boolean\n  isTimeField?: boolean\n}>`\n  font-size: inherit;\n  margin-left: ${p => {\n    if (p.isEndDateField) {\n      return '0.625rem'\n    }\n\n    return p.isTimeField ? '0.125rem' : 0\n  }};\n`\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/fields/DatePicker/index.tsx"],"sourcesContent":["// TODO We should make this component both form- & a11y-compliant with a `name` and proper (aria-)labels.\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { useForceUpdate } from '../../hooks/useForceUpdate'\nimport { getLocalizedDayjs } from '../../utils/getLocalizedDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { DateInput } from '../DateRangePicker/DateInput'\nimport { TimeInput } from '../DateRangePicker/TimeInput'\nimport { getDateFromDateAndTimeTuple, getDateTupleFromDate, getTimeTupleFromDate } from '../DateRangePicker/utils'\nimport { CalendarPicker } from './CalendarPicker'\n\nimport type { DateOrTimeInputRef, DateTuple, TimeTuple } from '../DateRangePicker/types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type DatePickerProps = {\n  defaultValue?: Date\n  /** Only allow past dates until today. */\n  isHistorical?: boolean\n  isLabelHidden?: boolean\n  label: string\n  /**\n   * Range of minutes used to generate the time picker list.\n   *\n   * @example\n   * `15` would produce a list with `..., 10:45, 11:00, 11:15, ...`.\n   */\n  minutesRange?: number\n  /**\n   * Called each time the date range picker is changed to a new valid value.\n   *\n   * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.\n   */\n  onChange?: (nextUtcDate: Date) => Promisable<void>\n  withTime?: boolean\n}\nexport function DatePicker({\n  defaultValue,\n  isHistorical = false,\n  isLabelHidden = false,\n  label,\n  minutesRange = 15,\n  onChange,\n  withTime = false\n}: DatePickerProps) {\n  const dateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const timeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n\n  const isCalendarPickerOpenRef = useRef(false)\n\n  const selectedDateRef = useRef<Date | undefined>(defaultValue ? getLocalizedDayjs(defaultValue).toDate() : undefined)\n  const selectedDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedDateRef.current))\n  const selectedTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedDateRef.current))\n\n  const { forceUpdate } = useForceUpdate()\n\n  const rangeCalendarPickerDefaultValue = useMemo(\n    () =>\n      selectedDateTupleRef.current\n        ? getDateFromDateAndTimeTuple(selectedDateTupleRef.current, ['00', '00'])\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectedDateTupleRef.current]\n  )\n\n  const submit = useCallback(() => {\n    if (!onChange || !selectedDateRef.current) {\n      return\n    }\n\n    const nextDate = getUtcizedDayjs(selectedDateRef.current).toDate()\n\n    onChange(nextDate)\n  }, [onChange])\n\n  const closeCalendarPicker = useCallback(() => {\n    isCalendarPickerOpenRef.current = false\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  const handleClickOutside = useCallback(\n    (event: globalThis.MouseEvent) => {\n      const target = event.target as Node | null\n\n      if (dateInputRef.current.boxSpan.contains(target)) {\n        return\n      }\n\n      closeCalendarPicker()\n    },\n    [closeCalendarPicker]\n  )\n\n  const handleDateInputNext = useCallback(() => {\n    if (!withTime) {\n      return\n    }\n\n    timeInputRef.current.focus()\n  }, [withTime])\n\n  const handleDateInputFilled = useCallback(\n    (nextDateTuple: DateTuple) => {\n      selectedDateTupleRef.current = nextDateTuple\n\n      // If there is no time input or a time has already been selected,\n      if (!withTime || selectedTimeTupleRef.current) {\n        // we must update the selected date and call onChange()\n        const timeTuple = (withTime ? selectedTimeTupleRef.current : ['00', '00']) as TimeTuple\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, timeTuple)\n\n        selectedDateRef.current = nextDate\n\n        submit()\n      }\n\n      handleDateInputNext()\n    },\n    [handleDateInputNext, submit, withTime]\n  )\n\n  const handleCalendarPickerChange = useCallback(\n    (nextDateTuple: DateTuple) => {\n      // If this is a date picker without a time input,\n      if (!withTime) {\n        // we have to fix the date at the beginning of the day\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, ['00', '00'])\n\n        selectedDateRef.current = nextDate\n      }\n\n      // If this is a date picker with a time input,\n      else {\n        // we include the selected time if it exists, set it at the beginning of the day if not\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, selectedTimeTupleRef.current || ['00', '00'])\n        selectedDateRef.current = nextDate\n      }\n\n      selectedDateTupleRef.current = nextDateTuple\n      selectedTimeTupleRef.current = getTimeTupleFromDate(selectedDateRef.current)\n\n      closeCalendarPicker()\n      forceUpdate()\n\n      submit()\n    },\n    [closeCalendarPicker, forceUpdate, submit, withTime]\n  )\n\n  const handleTimeInputFilled = useCallback(\n    (nextTimeTuple: TimeTuple) => {\n      // If a date has already been selected\n      if (selectedDateTupleRef.current) {\n        // we must update the selected date accordingly and submit it\n        const nextDate = getDateFromDateAndTimeTuple(selectedDateTupleRef.current, nextTimeTuple)\n\n        selectedDateRef.current = nextDate\n\n        submit()\n      }\n\n      selectedTimeTupleRef.current = nextTimeTuple\n\n      submit()\n    },\n    [submit]\n  )\n\n  const openCalendarPicker = useCallback(() => {\n    isCalendarPickerOpenRef.current = true\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  useEffect(() => {\n    window.document.addEventListener('click', handleClickOutside)\n\n    return () => {\n      window.document.removeEventListener('click', handleClickOutside)\n    }\n  }, [handleClickOutside])\n\n  return (\n    <Fieldset className=\"DateRangePicker\">\n      <Legend isHidden={isLabelHidden}>{label}</Legend>\n\n      <Box>\n        <Field>\n          <DateInput\n            ref={dateInputRef}\n            defaultValue={selectedDateTupleRef.current}\n            isForcedFocused={isCalendarPickerOpenRef.current}\n            onChange={handleDateInputFilled}\n            onClick={openCalendarPicker}\n            onNext={handleDateInputNext}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={timeInputRef}\n              defaultValue={selectedTimeTupleRef.current}\n              minutesRange={minutesRange}\n              onBack={() => dateInputRef.current.focus(true)}\n              onChange={handleTimeInputFilled}\n              onFocus={closeCalendarPicker}\n              onPrevious={() => dateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n      </Box>\n\n      {isCalendarPickerOpenRef.current && (\n        <CalendarPicker\n          defaultValue={rangeCalendarPickerDefaultValue}\n          isHistorical={isHistorical}\n          onChange={handleCalendarPickerChange}\n        />\n      )}\n    </Fieldset>\n  )\n}\n\nconst Fieldset = styled.fieldset`\n  border: 0;\n  margin: 0;\n  padding: 0;\n`\n\nconst Box = styled.div`\n  * {\n    font-weight: 500;\n    line-height: 1;\n  }\n\n  color: ${p => p.theme.color.gunMetal};\n  font-size: 13px;\n  position: relative;\n`\n\nconst Legend = styled.legend<{\n  isHidden: boolean\n}>`\n  color: ${p => p.theme.color.slateGray};\n  display: ${p => (p.isHidden ? 'none' : 'table')};\n  font-weight: inherit;\n  margin-bottom: 0.5rem;\n  padding: 0;\n`\n\nconst Field = styled.span<{\n  isEndDateField?: boolean\n  isTimeField?: boolean\n}>`\n  font-size: inherit;\n  margin-left: ${p => {\n    if (p.isEndDateField) {\n      return '0.625rem'\n    }\n\n    return p.isTimeField ? '0.125rem' : 0\n  }};\n`\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAsCM,SAAU,UAAU,CAAC,EACzB,YAAY,EACZ,YAAY,GAAG,KAAK,EACpB,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,YAAY,GAAG,EAAE,EACjB,QAAQ,EACR,QAAQ,GAAG,KAAK,EACA,EAAA;AAChB,IAAA,MAAM,YAAY,GAAG,MAAM,EAA0C,CAAA;AACrE,IAAA,MAAM,YAAY,GAAG,MAAM,EAA0C,CAAA;AAErE,IAAA,MAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAE7C,MAAM,eAAe,GAAG,MAAM,CAAmB,YAAY,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IACrH,MAAM,oBAAoB,GAAG,MAAM,CAAwB,oBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAA;IACzG,MAAM,oBAAoB,GAAG,MAAM,CAAwB,oBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAA;AAEzG,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAA;IAExC,MAAM,+BAA+B,GAAG,OAAO,CAC7C,MACE,oBAAoB,CAAC,OAAO;AAC1B,UAAE,2BAA2B,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACzE,UAAE,SAAS;;AAEf,IAAA,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAC/B,CAAA;AAED,IAAA,MAAM,MAAM,GAAG,WAAW,CAAC,MAAK;AAC9B,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;YACzC,OAAM;AACP,SAAA;QAED,MAAM,QAAQ,GAAG,eAAe,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAA;QAElE,QAAQ,CAAC,QAAQ,CAAC,CAAA;AACpB,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEd,IAAA,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAK;AAC3C,QAAA,uBAAuB,CAAC,OAAO,GAAG,KAAK,CAAA;AAEvC,QAAA,WAAW,EAAE,CAAA;AACf,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;AAEjB,IAAA,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,KAA4B,KAAI;AAC/B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAA;QAE1C,IAAI,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YACjD,OAAM;AACP,SAAA;AAED,QAAA,mBAAmB,EAAE,CAAA;AACvB,KAAC,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAA;AAED,IAAA,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAK;QAC3C,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;AAED,QAAA,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;AAC9B,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEd,IAAA,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,aAAwB,KAAI;AAC3B,QAAA,oBAAoB,CAAC,OAAO,GAAG,aAAa,CAAA;;AAG5C,QAAA,IAAI,CAAC,QAAQ,IAAI,oBAAoB,CAAC,OAAO,EAAE;;AAE7C,YAAA,MAAM,SAAS,IAAI,QAAQ,GAAG,oBAAoB,CAAC,OAAO,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAc,CAAA;YACvF,MAAM,QAAQ,GAAG,2BAA2B,CAAC,aAAa,EAAE,SAAS,CAAC,CAAA;AAEtE,YAAA,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAA;AAElC,YAAA,MAAM,EAAE,CAAA;AACT,SAAA;AAED,QAAA,mBAAmB,EAAE,CAAA;KACtB,EACD,CAAC,mBAAmB,EAAE,MAAM,EAAE,QAAQ,CAAC,CACxC,CAAA;AAED,IAAA,MAAM,0BAA0B,GAAG,WAAW,CAC5C,CAAC,aAAwB,KAAI;;QAE3B,IAAI,CAAC,QAAQ,EAAE;;AAEb,YAAA,MAAM,QAAQ,GAAG,2BAA2B,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;AAEzE,YAAA,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAA;AACnC,SAAA;;AAGI,aAAA;;AAEH,YAAA,MAAM,QAAQ,GAAG,2BAA2B,CAAC,aAAa,EAAE,oBAAoB,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;AACzG,YAAA,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAA;AACnC,SAAA;AAED,QAAA,oBAAoB,CAAC,OAAO,GAAG,aAAa,CAAA;QAC5C,oBAAoB,CAAC,OAAO,GAAG,oBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;AAE5E,QAAA,mBAAmB,EAAE,CAAA;AACrB,QAAA,WAAW,EAAE,CAAA;AAEb,QAAA,MAAM,EAAE,CAAA;KACT,EACD,CAAC,mBAAmB,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,CACrD,CAAA;AAED,IAAA,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,aAAwB,KAAI;;QAE3B,IAAI,oBAAoB,CAAC,OAAO,EAAE;;YAEhC,MAAM,QAAQ,GAAG,2BAA2B,CAAC,oBAAoB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAA;AAEzF,YAAA,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAA;AAElC,YAAA,MAAM,EAAE,CAAA;AACT,SAAA;AAED,QAAA,oBAAoB,CAAC,OAAO,GAAG,aAAa,CAAA;AAE5C,QAAA,MAAM,EAAE,CAAA;AACV,KAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAA;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;AAC1C,QAAA,uBAAuB,CAAC,OAAO,GAAG,IAAI,CAAA;AAEtC,QAAA,WAAW,EAAE,CAAA;AACf,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,SAAS,CAAC,MAAK;QACb,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAA;AAE7D,QAAA,OAAO,MAAK;YACV,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAA;AAClE,SAAC,CAAA;AACH,KAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;AAExB,IAAA,QACEA,IAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,iBAAiB,EACnC,QAAA,EAAA,CAAAC,GAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,aAAa,EAAG,QAAA,EAAA,KAAK,EAAU,CAAA,EAEjDD,IAAC,CAAA,GAAG,EACF,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,KAAK,EACJ,EAAA,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,YAAY,EACjB,YAAY,EAAE,oBAAoB,CAAC,OAAO,EAC1C,eAAe,EAAE,uBAAuB,CAAC,OAAO,EAChD,QAAQ,EAAE,qBAAqB,EAC/B,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,mBAAmB,EAAA,CAC3B,EACI,CAAA,EAEP,QAAQ,KACPA,GAAC,CAAA,KAAK,EAAC,EAAA,WAAW,kBAChBA,GAAC,CAAA,SAAS,EACR,EAAA,GAAG,EAAE,YAAY,EACjB,YAAY,EAAE,oBAAoB,CAAC,OAAO,EAC1C,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAC9C,QAAQ,EAAE,qBAAqB,EAC/B,OAAO,EAAE,mBAAmB,EAC5B,UAAU,EAAE,MAAM,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAA,CAClD,EACI,CAAA,CACT,IACG,EAEL,uBAAuB,CAAC,OAAO,KAC9BA,GAAA,CAAC,cAAc,EAAA,EACb,YAAY,EAAE,+BAA+B,EAC7C,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,0BAA0B,EAAA,CACpC,CACH,CAAA,EAAA,CACQ,EACZ;AACH,CAAC;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAA,CAAA;;;;CAI/B,CAAA;AAED,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;WAMX,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;;;CAGrC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAE1B,CAAA;WACS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAA;AAC1B,WAAA,EAAA,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;;;;CAIhD,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAGvB,CAAA;;AAEe,eAAA,EAAA,CAAC,IAAG;IACjB,IAAI,CAAC,CAAC,cAAc,EAAE;AACpB,QAAA,OAAO,UAAU,CAAA;AAClB,KAAA;IAED,OAAO,CAAC,CAAC,WAAW,GAAG,UAAU,GAAG,CAAC,CAAA;AACvC,CAAC,CAAA;CACF;;;;"}

package/src/fields/DateRangePicker/RangeCalendarPicker.js

@@ -10,7 +10,7 @@ import { sortDates } from '../../utils/sortDates.js';
 import { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation.js';
 import { RSUITE_CALENDAR_LOCALE } from './constants.js';
 import { getDateTupleFromDate } from './utils.js';
-import dayjs from 'dayjs';
+import dayjs_minExports from '../../../_virtual/dayjs.min2.js';
 
 function RangeCalendarPicker({ defaultValue, isHistorical, onChange }) {
     const boxRef = useRef();
@@ -32,7 +32,7 @@ function RangeCalendarPicker({ defaultValue, isHistorical, onChange }) {
         const nextDateTupleRange = [startDateTuple, endDateTuple];
         onChange(nextDateTupleRange);
     }, [onChange]);
-    const renderTitle = useCallback((date) => capitalizeFirstLetter(dayjs(date).format('MMMM YYYY')), []);
+    const renderTitle = useCallback((date) => capitalizeFirstLetter(dayjs_minExports(date).format('MMMM YYYY')), []);
     useEffect(() => {
         // We wait for the <Box /> to render so that `boxRef` is defined
         // and can be used as a container for <RsuiteDateRangePicker />

package/src/fields/DateRangePicker/RangeCalendarPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeCalendarPicker.js","sources":["../../../../src/fields/DateRangePicker/RangeCalendarPicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { DateRangePicker as RsuiteDateRangePicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter'\nimport { dayjs } from '../../utils/dayjs'\nimport { getUtcDayjs } from '../../utils/getUtcDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { sortDates } from '../../utils/sortDates'\nimport { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation'\nimport { RSUITE_CALENDAR_LOCALE } from './constants'\nimport { getDateTupleFromDate } from './utils'\n\nimport type { DateRange } from '../../types'\nimport type { DateTupleRange } from './types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\ntype RangeCalendarPickerProps = {\n  defaultValue?: DateRange\n  isHistorical?: boolean\n  onChange: (nextDateTupleRange: DateTupleRange) => Promisable<void>\n}\nexport function RangeCalendarPicker({ defaultValue, isHistorical, onChange }: RangeCalendarPickerProps) {\n  const boxRef = useRef() as MutableRefObject<HTMLDivElement>\n  const selectedFirstDate = useRef<Date>()\n  const calendarRef = useRef<any>()\n\n  const [isFirstLoad, setIsFirstLoad] = useState(true)\n\n  const controlledValue = useMemo(\n    () => (defaultValue ? (sortDates(defaultValue) as DateRange) : undefined),\n    [defaultValue]\n  )\n  const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), [])\n  const disabledDate = useMemo(\n    () => (date: Date) => isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false,\n    [isHistorical, utcTodayAsDayjs]\n  )\n\n  const handleSelect = useCallback(\n    (nextDate: Date) => {\n      if (!selectedFirstDate.current) {\n        selectedFirstDate.current = nextDate\n\n        return\n      }\n\n      const sortedDateRange = sortDates([selectedFirstDate.current, nextDate]) as DateRange\n      const [startDate, endDate] = sortedDateRange\n      const startDateTuple = getDateTupleFromDate(startDate)\n      const endDateTuple = getDateTupleFromDate(endDate)\n      const nextDateTupleRange = [startDateTuple, endDateTuple] as DateTupleRange\n\n      onChange(nextDateTupleRange)\n    },\n    [onChange]\n  )\n\n  const renderTitle = useCallback((date: Date) => capitalizeFirstLetter(dayjs(date).format('MMMM YYYY')), [])\n\n  useEffect(() => {\n    // We wait for the <Box /> to render so that `boxRef` is defined\n    // and can be used as a container for <RsuiteDateRangePicker />\n    setIsFirstLoad(false)\n  }, [])\n\n  return (\n    <Box ref={boxRef} onClick={stopMouseEventPropagation}>\n      {!isFirstLoad && (\n        <RsuiteDateRangePicker\n          ref={calendarRef}\n          container={boxRef.current}\n          disabledDate={disabledDate}\n          format=\"yyyy-MM-dd\"\n          locale={RSUITE_CALENDAR_LOCALE}\n          onSelect={handleSelect}\n          open\n          ranges={[]}\n          renderTitle={renderTitle}\n          // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`\n          value={controlledValue}\n        />\n      )}\n    </Box>\n  )\n}\n\nconst Box = styled.div`\n  height: 0;\n  position: relative;\n  user-select: none;\n\n  .rs-picker-toggle {\n    display: none;\n  }\n\n  .rs-picker-daterange-panel {\n    height: 290px;\n  }\n\n  .rs-picker-daterange-menu {\n    border: solid 1px ${p => p.theme.color.lightGray};\n    border-radius: 0;\n    margin-top: 0.25rem;\n\n    .rs-picker-daterange-header,\n    .rs-calendar-header-time-toolbar,\n    .rs-picker-toolbar {\n      display: none;\n    }\n\n    .rs-calendar {\n      height: auto !important;\n      padding: 0;\n\n      :first-child {\n        border-right: solid 1px ${p => p.theme.color.lightGray};\n      }\n\n      .rs-calendar-header {\n        border-bottom: solid 1px ${p => p.theme.color.lightGray};\n        padding: 0.5rem;\n\n        .rs-calendar-header-month-toolbar {\n          align-items: center;\n          color: ${p => p.theme.color.slateGray};\n          display: flex;\n          justify-content: space-between;\n\n          .rs-calendar-header-title {\n            font-size: inherit;\n            text-transform: uppercase;\n\n            &.rs-calendar-header-error {\n              color: ${p => p.theme.color.slateGray};\n\n              :hover {\n                color: ${p => p.theme.color.slateGray};\n              }\n            }\n          }\n        }\n      }\n\n      .rs-calendar-view {\n        padding: 0.75rem 0.5rem 0;\n\n        .rs-calendar-table-cell {\n          padding: 0 0 0.25rem 0;\n          width: 33px;\n\n          &.rs-calendar-table-cell-in-range:before {\n            background-color: ${p => p.theme.color.blueGray[25]};\n            height: 33px;\n            margin-top: 0;\n          }\n\n          > .rs-calendar-table-cell-content {\n            align-items: center;\n            border-radius: 0 !important;\n            display: inline-flex;\n            height: 33px;\n            justify-content: center;\n            padding-bottom: 3px;\n            width: 33px;\n          }\n          :hover .rs-calendar-table-cell-content {\n            background-color: ${p => p.theme.color.blueYonder[25]};\n            color: ${p => p.theme.color.blueYonder[100]};\n          }\n          &[role='columnheader'] .rs-calendar-table-cell-content,\n          &[role='columnheader']:hover .rs-calendar-table-cell-content {\n            background-color: transparent;\n            color: ${p => p.theme.color.slateGray};\n          }\n          &.rs-calendar-table-cell-disabled .rs-calendar-table-cell-content {\n            background-color: transparent;\n            color: ${p => p.theme.color.lightGray};\n          }\n          &.rs-calendar-table-cell-selected > .rs-calendar-table-cell-content {\n            background-color: ${p => p.theme.color.blueGray[100]};\n          }\n        }\n      }\n    }\n  }\n`\n"],"names":["_jsx","RsuiteDateRangePicker"],"mappings":"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"}
+{"version":3,"file":"RangeCalendarPicker.js","sources":["../../../../src/fields/DateRangePicker/RangeCalendarPicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { DateRangePicker as RsuiteDateRangePicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter'\nimport { dayjs } from '../../utils/dayjs'\nimport { getUtcDayjs } from '../../utils/getUtcDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { sortDates } from '../../utils/sortDates'\nimport { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation'\nimport { RSUITE_CALENDAR_LOCALE } from './constants'\nimport { getDateTupleFromDate } from './utils'\n\nimport type { DateRange } from '../../types'\nimport type { DateTupleRange } from './types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\ntype RangeCalendarPickerProps = {\n  defaultValue?: DateRange\n  isHistorical?: boolean\n  onChange: (nextDateTupleRange: DateTupleRange) => Promisable<void>\n}\nexport function RangeCalendarPicker({ defaultValue, isHistorical, onChange }: RangeCalendarPickerProps) {\n  const boxRef = useRef() as MutableRefObject<HTMLDivElement>\n  const selectedFirstDate = useRef<Date>()\n  const calendarRef = useRef<any>()\n\n  const [isFirstLoad, setIsFirstLoad] = useState(true)\n\n  const controlledValue = useMemo(\n    () => (defaultValue ? (sortDates(defaultValue) as DateRange) : undefined),\n    [defaultValue]\n  )\n  const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), [])\n  const disabledDate = useMemo(\n    () => (date: Date) => isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false,\n    [isHistorical, utcTodayAsDayjs]\n  )\n\n  const handleSelect = useCallback(\n    (nextDate: Date) => {\n      if (!selectedFirstDate.current) {\n        selectedFirstDate.current = nextDate\n\n        return\n      }\n\n      const sortedDateRange = sortDates([selectedFirstDate.current, nextDate]) as DateRange\n      const [startDate, endDate] = sortedDateRange\n      const startDateTuple = getDateTupleFromDate(startDate)\n      const endDateTuple = getDateTupleFromDate(endDate)\n      const nextDateTupleRange = [startDateTuple, endDateTuple] as DateTupleRange\n\n      onChange(nextDateTupleRange)\n    },\n    [onChange]\n  )\n\n  const renderTitle = useCallback((date: Date) => capitalizeFirstLetter(dayjs(date).format('MMMM YYYY')), [])\n\n  useEffect(() => {\n    // We wait for the <Box /> to render so that `boxRef` is defined\n    // and can be used as a container for <RsuiteDateRangePicker />\n    setIsFirstLoad(false)\n  }, [])\n\n  return (\n    <Box ref={boxRef} onClick={stopMouseEventPropagation}>\n      {!isFirstLoad && (\n        <RsuiteDateRangePicker\n          ref={calendarRef}\n          container={boxRef.current}\n          disabledDate={disabledDate}\n          format=\"yyyy-MM-dd\"\n          locale={RSUITE_CALENDAR_LOCALE}\n          onSelect={handleSelect}\n          open\n          ranges={[]}\n          renderTitle={renderTitle}\n          // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`\n          value={controlledValue}\n        />\n      )}\n    </Box>\n  )\n}\n\nconst Box = styled.div`\n  height: 0;\n  position: relative;\n  user-select: none;\n\n  .rs-picker-toggle {\n    display: none;\n  }\n\n  .rs-picker-daterange-panel {\n    height: 290px;\n  }\n\n  .rs-picker-daterange-menu {\n    border: solid 1px ${p => p.theme.color.lightGray};\n    border-radius: 0;\n    margin-top: 0.25rem;\n\n    .rs-picker-daterange-header,\n    .rs-calendar-header-time-toolbar,\n    .rs-picker-toolbar {\n      display: none;\n    }\n\n    .rs-calendar {\n      height: auto !important;\n      padding: 0;\n\n      :first-child {\n        border-right: solid 1px ${p => p.theme.color.lightGray};\n      }\n\n      .rs-calendar-header {\n        border-bottom: solid 1px ${p => p.theme.color.lightGray};\n        padding: 0.5rem;\n\n        .rs-calendar-header-month-toolbar {\n          align-items: center;\n          color: ${p => p.theme.color.slateGray};\n          display: flex;\n          justify-content: space-between;\n\n          .rs-calendar-header-title {\n            font-size: inherit;\n            text-transform: uppercase;\n\n            &.rs-calendar-header-error {\n              color: ${p => p.theme.color.slateGray};\n\n              :hover {\n                color: ${p => p.theme.color.slateGray};\n              }\n            }\n          }\n        }\n      }\n\n      .rs-calendar-view {\n        padding: 0.75rem 0.5rem 0;\n\n        .rs-calendar-table-cell {\n          padding: 0 0 0.25rem 0;\n          width: 33px;\n\n          &.rs-calendar-table-cell-in-range:before {\n            background-color: ${p => p.theme.color.blueGray[25]};\n            height: 33px;\n            margin-top: 0;\n          }\n\n          > .rs-calendar-table-cell-content {\n            align-items: center;\n            border-radius: 0 !important;\n            display: inline-flex;\n            height: 33px;\n            justify-content: center;\n            padding-bottom: 3px;\n            width: 33px;\n          }\n          :hover .rs-calendar-table-cell-content {\n            background-color: ${p => p.theme.color.blueYonder[25]};\n            color: ${p => p.theme.color.blueYonder[100]};\n          }\n          &[role='columnheader'] .rs-calendar-table-cell-content,\n          &[role='columnheader']:hover .rs-calendar-table-cell-content {\n            background-color: transparent;\n            color: ${p => p.theme.color.slateGray};\n          }\n          &.rs-calendar-table-cell-disabled .rs-calendar-table-cell-content {\n            background-color: transparent;\n            color: ${p => p.theme.color.lightGray};\n          }\n          &.rs-calendar-table-cell-selected > .rs-calendar-table-cell-content {\n            background-color: ${p => p.theme.color.blueGray[100]};\n          }\n        }\n      }\n    }\n  }\n`\n"],"names":["dayjs","_jsx","RsuiteDateRangePicker"],"mappings":"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"}

package/src/fields/DateRangePicker/index.js

@@ -32,7 +32,7 @@ function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = f
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedEndDateTupleRef.current, selectedStartDateTupleRef.current]);
     const submit = useCallback(() => {
-        if (!selectedStartDateRef.current || !selectedEndDateRef.current) {
+        if (!onChange || !selectedStartDateRef.current || !selectedEndDateRef.current) {
             return;
         }
         const utcizedStartDate = getUtcizedDayjs(selectedStartDateRef.current).toDate();

package/src/fields/DateRangePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/fields/DateRangePicker/index.tsx"],"sourcesContent":["// TODO We should make this component both form- & a11y-compliant with a `name` and proper (aria-)labels.\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { useForceUpdate } from '../../hooks/useForceUpdate'\nimport { getLocalizedDayjs } from '../../utils/getLocalizedDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { DateInput } from './DateInput'\nimport { RangeCalendarPicker } from './RangeCalendarPicker'\nimport { TimeInput } from './TimeInput'\nimport { DateOrTimeInputRef, DateRangePosition, DateTuple, DateTupleRange, TimeTuple } from './types'\nimport { getDateFromDateAndTimeTuple, getDateTupleFromDate, getTimeTupleFromDate } from './utils'\n\nimport type { DateRange } from '../../types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type DateRangePickerProps = {\n  defaultValue?: DateRange\n  /** Only allow past dates until today. */\n  isHistorical?: boolean\n  isLabelHidden?: boolean\n  label: string\n  /**\n   * Range of minutes used to generate the time picker list.\n   *\n   * @example\n   * `15` would produce a list with `..., 10:45, 11:00, 11:15, ...`.\n   */\n  minutesRange?: number\n  /**\n   * Called each time the date range picker is changed to a new valid value.\n   *\n   * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.\n   */\n  onChange: (nextUtcDateRange: DateRange) => Promisable<void>\n  withTime?: boolean\n}\nexport function DateRangePicker({\n  defaultValue,\n  isHistorical = false,\n  isLabelHidden = false,\n  label,\n  minutesRange = 15,\n  onChange,\n  withTime = false\n}: DateRangePickerProps) {\n  const startDateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const startTimeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const endDateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const endTimeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n\n  const isRangeCalendarPickerOpenRef = useRef(false)\n\n  const selectedStartDateRef = useRef<Date | undefined>(\n    defaultValue ? getLocalizedDayjs(defaultValue[0]).toDate() : undefined\n  )\n  const selectedEndDateRef = useRef<Date | undefined>(\n    defaultValue ? getLocalizedDayjs(defaultValue[1]).toDate() : undefined\n  )\n  const selectedStartDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedStartDateRef.current))\n  const selectedEndDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedEndDateRef.current))\n  const selectedStartTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedStartDateRef.current))\n  const selectedEndTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedEndDateRef.current))\n\n  const { forceUpdate } = useForceUpdate()\n\n  const rangeCalendarPickerDefaultValue = useMemo(\n    () =>\n      selectedStartDateTupleRef.current && selectedEndDateTupleRef.current\n        ? ([\n            getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, ['00', '00']),\n            getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, ['00', '00'], true)\n          ] as DateRange)\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectedEndDateTupleRef.current, selectedStartDateTupleRef.current]\n  )\n\n  const submit = useCallback(() => {\n    if (!selectedStartDateRef.current || !selectedEndDateRef.current) {\n      return\n    }\n\n    const utcizedStartDate = getUtcizedDayjs(selectedStartDateRef.current).toDate()\n    const utcizedEndDate = getUtcizedDayjs(selectedEndDateRef.current).toDate()\n\n    const nextDateRange: DateRange = [utcizedStartDate, utcizedEndDate]\n    onChange(nextDateRange)\n  }, [onChange])\n\n  const closeRangeCalendarPicker = useCallback(() => {\n    isRangeCalendarPickerOpenRef.current = false\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  const handleClickOutside = useCallback(\n    (event: globalThis.MouseEvent) => {\n      const target = event.target as Node | null\n\n      if (startDateInputRef.current.boxSpan.contains(target) || endDateInputRef.current.boxSpan.contains(target)) {\n        return\n      }\n\n      closeRangeCalendarPicker()\n    },\n    [closeRangeCalendarPicker]\n  )\n\n  const handleEndDateInputNext = useCallback(() => {\n    if (!withTime) {\n      return\n    }\n\n    endTimeInputRef.current.focus()\n  }, [withTime])\n\n  const handleEndDateInputPrevious = useCallback(() => {\n    if (withTime) {\n      startTimeInputRef.current.focus(true)\n\n      return\n    }\n\n    startDateInputRef.current.focus(true)\n  }, [withTime])\n\n  const handleStartDateInputNext = useCallback(() => {\n    if (withTime) {\n      startTimeInputRef.current.focus()\n\n      return\n    }\n\n    endDateInputRef.current.focus()\n  }, [withTime])\n\n  const handleDateInputFilled = useCallback(\n    (position: DateRangePosition, nextDateTuple: DateTuple) => {\n      if (position === DateRangePosition.START) {\n        selectedStartDateTupleRef.current = nextDateTuple\n\n        // If there is no time input or a start time has already been selected,\n        if (!withTime || selectedStartTimeTupleRef.current) {\n          // we must update the selected start date and call onChange()\n          const startTimeTuple = (withTime ? selectedStartTimeTupleRef.current : ['00', '00']) as TimeTuple\n          const nextStartDate = getDateFromDateAndTimeTuple(nextDateTuple, startTimeTuple)\n\n          selectedStartDateRef.current = nextStartDate\n\n          submit()\n        }\n\n        handleStartDateInputNext()\n      } else {\n        selectedEndDateTupleRef.current = nextDateTuple\n\n        // If there is no time input or an end time has already been selected,\n        if (!withTime || selectedEndTimeTupleRef.current) {\n          // we must update the selected end date and call onChange()\n          const endTimeTuple = (withTime ? selectedEndTimeTupleRef.current : ['23', '59']) as TimeTuple\n          const nextEndDate = getDateFromDateAndTimeTuple(nextDateTuple, endTimeTuple, true)\n\n          selectedEndDateRef.current = nextEndDate\n\n          submit()\n        }\n\n        handleEndDateInputNext()\n      }\n    },\n    [handleEndDateInputNext, handleStartDateInputNext, submit, withTime]\n  )\n\n  const handleRangeCalendarPickerChange = useCallback(\n    (nextDateTupleRange: DateTupleRange) => {\n      const [nextStartDateTuple, nextEndDateTuple] = nextDateTupleRange\n\n      // If this is a date picker without a time input,\n      if (!withTime) {\n        // we have to fix the start date at the beginning of the day\n        const nextStartDate = getDateFromDateAndTimeTuple(nextStartDateTuple, ['00', '00'])\n        // and the end date at the end of the day\n        const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, ['23', '59'], true)\n\n        selectedStartDateRef.current = nextStartDate\n        selectedEndDateRef.current = nextEndDate\n      }\n\n      // If this is a date picker with a time input,\n      else {\n        // we include the selected start time if it exists, set it at the beginning of the day if not\n        const nextStartDate = getDateFromDateAndTimeTuple(\n          nextStartDateTuple,\n          selectedStartTimeTupleRef.current || ['00', '00']\n        )\n        selectedStartDateRef.current = nextStartDate\n\n        // we include the selected end time if it exists, set it at the end of the day if not\n        const nextEndDate = getDateFromDateAndTimeTuple(\n          nextEndDateTuple,\n          selectedEndTimeTupleRef.current || ['23', '59'],\n          true\n        )\n\n        selectedEndDateRef.current = nextEndDate\n      }\n\n      selectedStartDateTupleRef.current = nextStartDateTuple\n      selectedStartTimeTupleRef.current = getTimeTupleFromDate(selectedStartDateRef.current)\n      selectedEndDateTupleRef.current = nextEndDateTuple\n      selectedEndTimeTupleRef.current = getTimeTupleFromDate(selectedEndDateRef.current)\n\n      closeRangeCalendarPicker()\n      forceUpdate()\n\n      submit()\n    },\n    [closeRangeCalendarPicker, forceUpdate, submit, withTime]\n  )\n\n  const handleTimeInputFilled = useCallback(\n    (position: DateRangePosition, nextTimeTuple: TimeTuple) => {\n      if (position === DateRangePosition.START) {\n        // If a start date has already been selected\n        if (selectedStartDateTupleRef.current) {\n          // we must update the selected start date accordingly and submit it\n          const nextStartDate = getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, nextTimeTuple)\n\n          selectedStartDateRef.current = nextStartDate\n\n          submit()\n        }\n\n        selectedStartTimeTupleRef.current = nextTimeTuple\n\n        endDateInputRef.current.focus()\n      } else {\n        // If an end date has already been selected\n        if (selectedEndDateTupleRef.current) {\n          // we must update the selected end date accordingly and submit it\n          const nextEndDate = getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, nextTimeTuple, true)\n\n          selectedEndDateRef.current = nextEndDate\n\n          submit()\n        }\n\n        selectedEndTimeTupleRef.current = nextTimeTuple\n      }\n\n      submit()\n    },\n    [submit]\n  )\n\n  const openRangeCalendarPicker = useCallback(() => {\n    isRangeCalendarPickerOpenRef.current = true\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  useEffect(() => {\n    window.document.addEventListener('click', handleClickOutside)\n\n    return () => {\n      window.document.removeEventListener('click', handleClickOutside)\n    }\n  }, [handleClickOutside])\n\n  return (\n    <Fieldset className=\"DateRangePicker\">\n      <Legend isHidden={isLabelHidden}>{label}</Legend>\n\n      <Box>\n        <Field>\n          <DateInput\n            ref={startDateInputRef}\n            defaultValue={selectedStartDateTupleRef.current}\n            isForcedFocused={isRangeCalendarPickerOpenRef.current}\n            isStartDate\n            onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple)}\n            onClick={openRangeCalendarPicker}\n            onNext={handleStartDateInputNext}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={startTimeInputRef}\n              defaultValue={selectedStartTimeTupleRef.current}\n              isStartDate\n              minutesRange={minutesRange}\n              onBack={() => startDateInputRef.current.focus(true)}\n              onChange={nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple)}\n              onFocus={closeRangeCalendarPicker}\n              onNext={() => endDateInputRef.current.focus()}\n              onPrevious={() => startDateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n\n        <Field isEndDateField>\n          <DateInput\n            ref={endDateInputRef}\n            defaultValue={selectedEndDateTupleRef.current}\n            isEndDate\n            isForcedFocused={isRangeCalendarPickerOpenRef.current}\n            onBack={handleEndDateInputPrevious}\n            onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple)}\n            onClick={openRangeCalendarPicker}\n            onNext={handleEndDateInputNext}\n            onPrevious={handleEndDateInputPrevious}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={endTimeInputRef}\n              defaultValue={selectedEndTimeTupleRef.current}\n              minutesRange={minutesRange}\n              onBack={() => endDateInputRef.current.focus(true)}\n              onChange={nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple)}\n              onFocus={closeRangeCalendarPicker}\n              onPrevious={() => endDateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n      </Box>\n\n      {isRangeCalendarPickerOpenRef.current && (\n        <RangeCalendarPicker\n          defaultValue={rangeCalendarPickerDefaultValue}\n          isHistorical={isHistorical}\n          onChange={handleRangeCalendarPickerChange}\n        />\n      )}\n    </Fieldset>\n  )\n}\n\nconst Fieldset = styled.fieldset`\n  border: 0;\n  margin: 0;\n  padding: 0;\n`\n\nconst Box = styled.div`\n  * {\n    font-weight: 500;\n    line-height: 1;\n  }\n\n  color: ${p => p.theme.color.gunMetal};\n  font-size: 13px;\n  position: relative;\n`\n\nconst Legend = styled.legend<{\n  isHidden: boolean\n}>`\n  color: ${p => p.theme.color.slateGray};\n  display: ${p => (p.isHidden ? 'none' : 'table')};\n  font-weight: inherit;\n  margin-bottom: 0.5rem;\n  padding: 0;\n`\n\nconst Field = styled.span<{\n  isEndDateField?: boolean\n  isTimeField?: boolean\n}>`\n  font-size: inherit;\n  margin-left: ${p => {\n    if (p.isEndDateField) {\n      return '0.625rem'\n    }\n\n    return p.isTimeField ? '0.125rem' : 0\n  }};\n`\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/fields/DateRangePicker/index.tsx"],"sourcesContent":["// TODO We should make this component both form- & a11y-compliant with a `name` and proper (aria-)labels.\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { useForceUpdate } from '../../hooks/useForceUpdate'\nimport { getLocalizedDayjs } from '../../utils/getLocalizedDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { DateInput } from './DateInput'\nimport { RangeCalendarPicker } from './RangeCalendarPicker'\nimport { TimeInput } from './TimeInput'\nimport { DateOrTimeInputRef, DateRangePosition, DateTuple, DateTupleRange, TimeTuple } from './types'\nimport { getDateFromDateAndTimeTuple, getDateTupleFromDate, getTimeTupleFromDate } from './utils'\n\nimport type { DateRange } from '../../types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type DateRangePickerProps = {\n  defaultValue?: DateRange\n  /** Only allow past dates until today. */\n  isHistorical?: boolean\n  isLabelHidden?: boolean\n  label: string\n  /**\n   * Range of minutes used to generate the time picker list.\n   *\n   * @example\n   * `15` would produce a list with `..., 10:45, 11:00, 11:15, ...`.\n   */\n  minutesRange?: number\n  /**\n   * Called each time the date range picker is changed to a new valid value.\n   *\n   * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.\n   */\n  onChange?: (nextUtcDateRange: DateRange) => Promisable<void>\n  withTime?: boolean\n}\nexport function DateRangePicker({\n  defaultValue,\n  isHistorical = false,\n  isLabelHidden = false,\n  label,\n  minutesRange = 15,\n  onChange,\n  withTime = false\n}: DateRangePickerProps) {\n  const startDateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const startTimeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const endDateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const endTimeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n\n  const isRangeCalendarPickerOpenRef = useRef(false)\n\n  const selectedStartDateRef = useRef<Date | undefined>(\n    defaultValue ? getLocalizedDayjs(defaultValue[0]).toDate() : undefined\n  )\n  const selectedEndDateRef = useRef<Date | undefined>(\n    defaultValue ? getLocalizedDayjs(defaultValue[1]).toDate() : undefined\n  )\n  const selectedStartDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedStartDateRef.current))\n  const selectedEndDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedEndDateRef.current))\n  const selectedStartTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedStartDateRef.current))\n  const selectedEndTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedEndDateRef.current))\n\n  const { forceUpdate } = useForceUpdate()\n\n  const rangeCalendarPickerDefaultValue = useMemo(\n    () =>\n      selectedStartDateTupleRef.current && selectedEndDateTupleRef.current\n        ? ([\n            getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, ['00', '00']),\n            getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, ['00', '00'], true)\n          ] as DateRange)\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectedEndDateTupleRef.current, selectedStartDateTupleRef.current]\n  )\n\n  const submit = useCallback(() => {\n    if (!onChange || !selectedStartDateRef.current || !selectedEndDateRef.current) {\n      return\n    }\n\n    const utcizedStartDate = getUtcizedDayjs(selectedStartDateRef.current).toDate()\n    const utcizedEndDate = getUtcizedDayjs(selectedEndDateRef.current).toDate()\n\n    const nextDateRange: DateRange = [utcizedStartDate, utcizedEndDate]\n    onChange(nextDateRange)\n  }, [onChange])\n\n  const closeRangeCalendarPicker = useCallback(() => {\n    isRangeCalendarPickerOpenRef.current = false\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  const handleClickOutside = useCallback(\n    (event: globalThis.MouseEvent) => {\n      const target = event.target as Node | null\n\n      if (startDateInputRef.current.boxSpan.contains(target) || endDateInputRef.current.boxSpan.contains(target)) {\n        return\n      }\n\n      closeRangeCalendarPicker()\n    },\n    [closeRangeCalendarPicker]\n  )\n\n  const handleEndDateInputNext = useCallback(() => {\n    if (!withTime) {\n      return\n    }\n\n    endTimeInputRef.current.focus()\n  }, [withTime])\n\n  const handleEndDateInputPrevious = useCallback(() => {\n    if (withTime) {\n      startTimeInputRef.current.focus(true)\n\n      return\n    }\n\n    startDateInputRef.current.focus(true)\n  }, [withTime])\n\n  const handleStartDateInputNext = useCallback(() => {\n    if (withTime) {\n      startTimeInputRef.current.focus()\n\n      return\n    }\n\n    endDateInputRef.current.focus()\n  }, [withTime])\n\n  const handleDateInputFilled = useCallback(\n    (position: DateRangePosition, nextDateTuple: DateTuple) => {\n      if (position === DateRangePosition.START) {\n        selectedStartDateTupleRef.current = nextDateTuple\n\n        // If there is no time input or a start time has already been selected,\n        if (!withTime || selectedStartTimeTupleRef.current) {\n          // we must update the selected start date and call onChange()\n          const startTimeTuple = (withTime ? selectedStartTimeTupleRef.current : ['00', '00']) as TimeTuple\n          const nextStartDate = getDateFromDateAndTimeTuple(nextDateTuple, startTimeTuple)\n\n          selectedStartDateRef.current = nextStartDate\n\n          submit()\n        }\n\n        handleStartDateInputNext()\n      } else {\n        selectedEndDateTupleRef.current = nextDateTuple\n\n        // If there is no time input or an end time has already been selected,\n        if (!withTime || selectedEndTimeTupleRef.current) {\n          // we must update the selected end date and call onChange()\n          const endTimeTuple = (withTime ? selectedEndTimeTupleRef.current : ['23', '59']) as TimeTuple\n          const nextEndDate = getDateFromDateAndTimeTuple(nextDateTuple, endTimeTuple, true)\n\n          selectedEndDateRef.current = nextEndDate\n\n          submit()\n        }\n\n        handleEndDateInputNext()\n      }\n    },\n    [handleEndDateInputNext, handleStartDateInputNext, submit, withTime]\n  )\n\n  const handleRangeCalendarPickerChange = useCallback(\n    (nextDateTupleRange: DateTupleRange) => {\n      const [nextStartDateTuple, nextEndDateTuple] = nextDateTupleRange\n\n      // If this is a date picker without a time input,\n      if (!withTime) {\n        // we have to fix the start date at the beginning of the day\n        const nextStartDate = getDateFromDateAndTimeTuple(nextStartDateTuple, ['00', '00'])\n        // and the end date at the end of the day\n        const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, ['23', '59'], true)\n\n        selectedStartDateRef.current = nextStartDate\n        selectedEndDateRef.current = nextEndDate\n      }\n\n      // If this is a date picker with a time input,\n      else {\n        // we include the selected start time if it exists, set it at the beginning of the day if not\n        const nextStartDate = getDateFromDateAndTimeTuple(\n          nextStartDateTuple,\n          selectedStartTimeTupleRef.current || ['00', '00']\n        )\n        selectedStartDateRef.current = nextStartDate\n\n        // we include the selected end time if it exists, set it at the end of the day if not\n        const nextEndDate = getDateFromDateAndTimeTuple(\n          nextEndDateTuple,\n          selectedEndTimeTupleRef.current || ['23', '59'],\n          true\n        )\n\n        selectedEndDateRef.current = nextEndDate\n      }\n\n      selectedStartDateTupleRef.current = nextStartDateTuple\n      selectedStartTimeTupleRef.current = getTimeTupleFromDate(selectedStartDateRef.current)\n      selectedEndDateTupleRef.current = nextEndDateTuple\n      selectedEndTimeTupleRef.current = getTimeTupleFromDate(selectedEndDateRef.current)\n\n      closeRangeCalendarPicker()\n      forceUpdate()\n\n      submit()\n    },\n    [closeRangeCalendarPicker, forceUpdate, submit, withTime]\n  )\n\n  const handleTimeInputFilled = useCallback(\n    (position: DateRangePosition, nextTimeTuple: TimeTuple) => {\n      if (position === DateRangePosition.START) {\n        // If a start date has already been selected\n        if (selectedStartDateTupleRef.current) {\n          // we must update the selected start date accordingly and submit it\n          const nextStartDate = getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, nextTimeTuple)\n\n          selectedStartDateRef.current = nextStartDate\n\n          submit()\n        }\n\n        selectedStartTimeTupleRef.current = nextTimeTuple\n\n        endDateInputRef.current.focus()\n      } else {\n        // If an end date has already been selected\n        if (selectedEndDateTupleRef.current) {\n          // we must update the selected end date accordingly and submit it\n          const nextEndDate = getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, nextTimeTuple, true)\n\n          selectedEndDateRef.current = nextEndDate\n\n          submit()\n        }\n\n        selectedEndTimeTupleRef.current = nextTimeTuple\n      }\n\n      submit()\n    },\n    [submit]\n  )\n\n  const openRangeCalendarPicker = useCallback(() => {\n    isRangeCalendarPickerOpenRef.current = true\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  useEffect(() => {\n    window.document.addEventListener('click', handleClickOutside)\n\n    return () => {\n      window.document.removeEventListener('click', handleClickOutside)\n    }\n  }, [handleClickOutside])\n\n  return (\n    <Fieldset className=\"DateRangePicker\">\n      <Legend isHidden={isLabelHidden}>{label}</Legend>\n\n      <Box>\n        <Field>\n          <DateInput\n            ref={startDateInputRef}\n            defaultValue={selectedStartDateTupleRef.current}\n            isForcedFocused={isRangeCalendarPickerOpenRef.current}\n            isStartDate\n            onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple)}\n            onClick={openRangeCalendarPicker}\n            onNext={handleStartDateInputNext}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={startTimeInputRef}\n              defaultValue={selectedStartTimeTupleRef.current}\n              isStartDate\n              minutesRange={minutesRange}\n              onBack={() => startDateInputRef.current.focus(true)}\n              onChange={nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple)}\n              onFocus={closeRangeCalendarPicker}\n              onNext={() => endDateInputRef.current.focus()}\n              onPrevious={() => startDateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n\n        <Field isEndDateField>\n          <DateInput\n            ref={endDateInputRef}\n            defaultValue={selectedEndDateTupleRef.current}\n            isEndDate\n            isForcedFocused={isRangeCalendarPickerOpenRef.current}\n            onBack={handleEndDateInputPrevious}\n            onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple)}\n            onClick={openRangeCalendarPicker}\n            onNext={handleEndDateInputNext}\n            onPrevious={handleEndDateInputPrevious}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={endTimeInputRef}\n              defaultValue={selectedEndTimeTupleRef.current}\n              minutesRange={minutesRange}\n              onBack={() => endDateInputRef.current.focus(true)}\n              onChange={nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple)}\n              onFocus={closeRangeCalendarPicker}\n              onPrevious={() => endDateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n      </Box>\n\n      {isRangeCalendarPickerOpenRef.current && (\n        <RangeCalendarPicker\n          defaultValue={rangeCalendarPickerDefaultValue}\n          isHistorical={isHistorical}\n          onChange={handleRangeCalendarPickerChange}\n        />\n      )}\n    </Fieldset>\n  )\n}\n\nconst Fieldset = styled.fieldset`\n  border: 0;\n  margin: 0;\n  padding: 0;\n`\n\nconst Box = styled.div`\n  * {\n    font-weight: 500;\n    line-height: 1;\n  }\n\n  color: ${p => p.theme.color.gunMetal};\n  font-size: 13px;\n  position: relative;\n`\n\nconst Legend = styled.legend<{\n  isHidden: boolean\n}>`\n  color: ${p => p.theme.color.slateGray};\n  display: ${p => (p.isHidden ? 'none' : 'table')};\n  font-weight: inherit;\n  margin-bottom: 0.5rem;\n  padding: 0;\n`\n\nconst Field = styled.span<{\n  isEndDateField?: boolean\n  isTimeField?: boolean\n}>`\n  font-size: inherit;\n  margin-left: ${p => {\n    if (p.isEndDateField) {\n      return '0.625rem'\n    }\n\n    return p.isTimeField ? '0.125rem' : 0\n  }};\n`\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/src/fields/DateRangePicker/utils.js

@@ -1,5 +1,5 @@
 import '../../utils/dayjs.js';
-import dayjs from 'dayjs';
+import dayjs_minExports from '../../../_virtual/dayjs.min2.js';
 
 // TODO Use `date-fns` instead of `dayjs`.
 function formatNumberAsDoubleDigit(numberLike) {
@@ -8,7 +8,7 @@ function formatNumberAsDoubleDigit(numberLike) {
 function getDateFromDateAndTimeTuple(dateTuple, timeTuple, isEnd = false) {
     const [year, month, day] = dateTuple;
     const [hour, minute] = timeTuple;
-    const rawDateAsDayjs = dayjs()
+    const rawDateAsDayjs = dayjs_minExports()
         .year(Number(year))
         .month(Number(month) - 1)
         .date(Number(day))

package/src/fields/DateRangePicker/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/fields/DateRangePicker/utils.ts"],"sourcesContent":["// TODO Use `date-fns` instead of `dayjs`.\n\nimport { dayjs } from '../../utils/dayjs'\n\nimport type { Option } from '../../types'\nimport type { DateTuple, TimeTuple } from './types'\n\nexport function formatNumberAsDoubleDigit(numberLike: number | string): string {\n  return String(numberLike).padStart(2, '0')\n}\n\nexport function getDateFromDateAndTimeTuple(dateTuple: DateTuple, timeTuple: TimeTuple, isEnd: boolean = false): Date {\n  const [year, month, day] = dateTuple\n  const [hour, minute] = timeTuple\n\n  const rawDateAsDayjs = dayjs()\n    .year(Number(year))\n    .month(Number(month) - 1)\n    .date(Number(day))\n    .hour(Number(hour))\n    .minute(Number(minute))\n\n  return isEnd\n    ? rawDateAsDayjs\n        .endOf('minute')\n        // TODO For some reason the API can't handle miliseconds in dates.\n        // That's why we set it to 0 (instead of 999)\n        .millisecond(0)\n        .toDate()\n    : rawDateAsDayjs.startOf('minute').toDate()\n}\n\nexport function getDateTupleFromDate(date: undefined): undefined\nexport function getDateTupleFromDate(date: Date): DateTuple\nexport function getDateTupleFromDate(date?: Date): DateTuple | undefined\nexport function getDateTupleFromDate(date?: Date): DateTuple | undefined {\n  if (!date) {\n    return undefined\n  }\n\n  return [\n    String(date.getFullYear()),\n    formatNumberAsDoubleDigit(date.getMonth() + 1),\n    formatNumberAsDoubleDigit(date.getDate())\n  ]\n}\n\n/**\n * Generate a list of ranged time options.\n *\n * @example\n * ```\n * (minutesRange = 30) => ([\n *   { label: '00:00', value: ['00', '00'] },\n *   { label: '00:30', value: ['00', '30'] },\n *   { label: '01:00', value: ['01', '00'] },\n *   { label: '01:30', value: ['01', '30'] },\n *   { label: '02:00', value: ['02', '00'] },\n *   ...\n * ])\n * ```\n */\nexport const getRangedTimeOptions = (minutesRange: number): Option<TimeTuple>[] => {\n  const perHourOptionsLength = 60 / minutesRange\n  const totalOptionsLength = 24 * perHourOptionsLength\n\n  return new Array(totalOptionsLength).fill(undefined).map((_, index) => {\n    const hour = Math.floor(index / perHourOptionsLength)\n    const minute = minutesRange * (index % perHourOptionsLength)\n    const label = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`\n    const value: TimeTuple = [formatNumberAsDoubleDigit(hour), formatNumberAsDoubleDigit(minute)]\n\n    return {\n      label,\n      value\n    }\n  })\n}\n\nexport function getTimeTupleFromDate(date?: Date): TimeTuple | undefined {\n  if (!date) {\n    return undefined\n  }\n\n  return [formatNumberAsDoubleDigit(date.getHours()), formatNumberAsDoubleDigit(date.getMinutes())]\n}\n"],"names":[],"mappings":";;;AAAA;AAOM,SAAU,yBAAyB,CAAC,UAA2B,EAAA;IACnE,OAAO,MAAM,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;AAC5C,CAAC;AAEK,SAAU,2BAA2B,CAAC,SAAoB,EAAE,SAAoB,EAAE,QAAiB,KAAK,EAAA;IAC5G,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;AACpC,IAAA,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,SAAS,CAAA;IAEhC,MAAM,cAAc,GAAG,KAAK,EAAE;AAC3B,SAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAClB,SAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACxB,SAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AACjB,SAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAClB,SAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;AAEzB,IAAA,OAAO,KAAK;AACV,UAAE,cAAc;aACX,KAAK,CAAC,QAAQ,CAAC;;;aAGf,WAAW,CAAC,CAAC,CAAC;AACd,aAAA,MAAM,EAAE;UACX,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAA;AAC/C,CAAC;AAKK,SAAU,oBAAoB,CAAC,IAAW,EAAA;IAC9C,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,SAAS,CAAA;AACjB,KAAA;IAED,OAAO;AACL,QAAA,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;AAC1B,QAAA,yBAAyB,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;AAC9C,QAAA,yBAAyB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;KAC1C,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;AAcG;AACU,MAAA,oBAAoB,GAAG,CAAC,YAAoB,KAAyB;AAChF,IAAA,MAAM,oBAAoB,GAAG,EAAE,GAAG,YAAY,CAAA;AAC9C,IAAA,MAAM,kBAAkB,GAAG,EAAE,GAAG,oBAAoB,CAAA;AAEpD,IAAA,OAAO,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAI;QACpE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,oBAAoB,CAAC,CAAA;QACrD,MAAM,MAAM,GAAG,YAAY,IAAI,KAAK,GAAG,oBAAoB,CAAC,CAAA;QAC5D,MAAM,KAAK,GAAG,CAAA,EAAG,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA,CAAA,EAAI,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA,CAAE,CAAA;AACnF,QAAA,MAAM,KAAK,GAAc,CAAC,yBAAyB,CAAC,IAAI,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC,CAAA;QAE7F,OAAO;YACL,KAAK;YACL,KAAK;SACN,CAAA;AACH,KAAC,CAAC,CAAA;AACJ,EAAC;AAEK,SAAU,oBAAoB,CAAC,IAAW,EAAA;IAC9C,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,SAAS,CAAA;AACjB,KAAA;AAED,IAAA,OAAO,CAAC,yBAAyB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAA;AACnG;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/fields/DateRangePicker/utils.ts"],"sourcesContent":["// TODO Use `date-fns` instead of `dayjs`.\n\nimport { dayjs } from '../../utils/dayjs'\n\nimport type { Option } from '../../types'\nimport type { DateTuple, TimeTuple } from './types'\n\nexport function formatNumberAsDoubleDigit(numberLike: number | string): string {\n  return String(numberLike).padStart(2, '0')\n}\n\nexport function getDateFromDateAndTimeTuple(dateTuple: DateTuple, timeTuple: TimeTuple, isEnd: boolean = false): Date {\n  const [year, month, day] = dateTuple\n  const [hour, minute] = timeTuple\n\n  const rawDateAsDayjs = dayjs()\n    .year(Number(year))\n    .month(Number(month) - 1)\n    .date(Number(day))\n    .hour(Number(hour))\n    .minute(Number(minute))\n\n  return isEnd\n    ? rawDateAsDayjs\n        .endOf('minute')\n        // TODO For some reason the API can't handle miliseconds in dates.\n        // That's why we set it to 0 (instead of 999)\n        .millisecond(0)\n        .toDate()\n    : rawDateAsDayjs.startOf('minute').toDate()\n}\n\nexport function getDateTupleFromDate(date: undefined): undefined\nexport function getDateTupleFromDate(date: Date): DateTuple\nexport function getDateTupleFromDate(date?: Date): DateTuple | undefined\nexport function getDateTupleFromDate(date?: Date): DateTuple | undefined {\n  if (!date) {\n    return undefined\n  }\n\n  return [\n    String(date.getFullYear()),\n    formatNumberAsDoubleDigit(date.getMonth() + 1),\n    formatNumberAsDoubleDigit(date.getDate())\n  ]\n}\n\n/**\n * Generate a list of ranged time options.\n *\n * @example\n * ```\n * (minutesRange = 30) => ([\n *   { label: '00:00', value: ['00', '00'] },\n *   { label: '00:30', value: ['00', '30'] },\n *   { label: '01:00', value: ['01', '00'] },\n *   { label: '01:30', value: ['01', '30'] },\n *   { label: '02:00', value: ['02', '00'] },\n *   ...\n * ])\n * ```\n */\nexport const getRangedTimeOptions = (minutesRange: number): Option<TimeTuple>[] => {\n  const perHourOptionsLength = 60 / minutesRange\n  const totalOptionsLength = 24 * perHourOptionsLength\n\n  return new Array(totalOptionsLength).fill(undefined).map((_, index) => {\n    const hour = Math.floor(index / perHourOptionsLength)\n    const minute = minutesRange * (index % perHourOptionsLength)\n    const label = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`\n    const value: TimeTuple = [formatNumberAsDoubleDigit(hour), formatNumberAsDoubleDigit(minute)]\n\n    return {\n      label,\n      value\n    }\n  })\n}\n\nexport function getTimeTupleFromDate(date?: Date): TimeTuple | undefined {\n  if (!date) {\n    return undefined\n  }\n\n  return [formatNumberAsDoubleDigit(date.getHours()), formatNumberAsDoubleDigit(date.getMinutes())]\n}\n"],"names":["dayjs"],"mappings":";;;AAAA;AAOM,SAAU,yBAAyB,CAAC,UAA2B,EAAA;IACnE,OAAO,MAAM,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;AAC5C,CAAC;AAEK,SAAU,2BAA2B,CAAC,SAAoB,EAAE,SAAoB,EAAE,QAAiB,KAAK,EAAA;IAC5G,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;AACpC,IAAA,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,SAAS,CAAA;IAEhC,MAAM,cAAc,GAAGA,gBAAK,EAAE;AAC3B,SAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAClB,SAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACxB,SAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AACjB,SAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAClB,SAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;AAEzB,IAAA,OAAO,KAAK;AACV,UAAE,cAAc;aACX,KAAK,CAAC,QAAQ,CAAC;;;aAGf,WAAW,CAAC,CAAC,CAAC;AACd,aAAA,MAAM,EAAE;UACX,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAA;AAC/C,CAAC;AAKK,SAAU,oBAAoB,CAAC,IAAW,EAAA;IAC9C,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,SAAS,CAAA;AACjB,KAAA;IAED,OAAO;AACL,QAAA,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;AAC1B,QAAA,yBAAyB,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;AAC9C,QAAA,yBAAyB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;KAC1C,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;AAcG;AACU,MAAA,oBAAoB,GAAG,CAAC,YAAoB,KAAyB;AAChF,IAAA,MAAM,oBAAoB,GAAG,EAAE,GAAG,YAAY,CAAA;AAC9C,IAAA,MAAM,kBAAkB,GAAG,EAAE,GAAG,oBAAoB,CAAA;AAEpD,IAAA,OAAO,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAI;QACpE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,oBAAoB,CAAC,CAAA;QACrD,MAAM,MAAM,GAAG,YAAY,IAAI,KAAK,GAAG,oBAAoB,CAAC,CAAA;QAC5D,MAAM,KAAK,GAAG,CAAA,EAAG,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA,CAAA,EAAI,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA,CAAE,CAAA;AACnF,QAAA,MAAM,KAAK,GAAc,CAAC,yBAAyB,CAAC,IAAI,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC,CAAA;QAE7F,OAAO;YACL,KAAK;YACL,KAAK;SACN,CAAA;AACH,KAAC,CAAC,CAAA;AACJ,EAAC;AAEK,SAAU,oBAAoB,CAAC,IAAW,EAAA;IAC9C,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,SAAS,CAAA;AACjB,KAAA;AAED,IAAA,OAAO,CAAC,yBAAyB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAA;AACnG;;;;"}

package/src/fields/MultiSelect.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { TagPicker } from 'rsuite';
+import styled from 'styled-components';
+
+function MultiSelect({ onChange, options, 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+searchable = false, ...originalProps }) {
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback((nextValue) => {
+        if (!onChange) {
+            return;
+        }
+        const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
+        onChange(normalizedNextValue);
+    }, [onChange]);
+    return jsx(StyledTagPicker, { data: options, onChange: handleChange, searchable: searchable, ...originalProps }, key);
+}
+const StyledTagPicker = styled(TagPicker) `
+  cursor: pointer;
+
+  > .rs-picker-toggle {
+    cursor: inherit;
+  }
+`;
+
+export { MultiSelect };
+//# sourceMappingURL=MultiSelect.js.map

package/src/fields/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/fields/MultiSelect.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { TagPicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { Option } from '../types'\nimport type { TagPickerProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {\n  defaultValue?: string[]\n  name: string\n  onChange?: (nextValue: string[] | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function MultiSelect({\n  onChange,\n  options,\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  searchable = false,\n  ...originalProps\n}: MultiSelectProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (nextValue: string[] | null) => {\n      if (!onChange) {\n        return\n      }\n\n      const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue\n\n      onChange(normalizedNextValue)\n    },\n    [onChange]\n  )\n\n  return <StyledTagPicker key={key} data={options} onChange={handleChange} searchable={searchable} {...originalProps} />\n}\n\nconst StyledTagPicker = styled(TagPicker)`\n  cursor: pointer;\n\n  > .rs-picker-toggle {\n    cursor: inherit;\n  }\n`\n"],"names":["_jsx"],"mappings":";;;;;SAcgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO;AACP;AACA,UAAU,GAAG,KAAK,EAClB,GAAG,aAAa,EACC,EAAA;AACjB,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAA0B,KAAI;QAC7B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;AAED,QAAA,MAAM,mBAAmB,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;QAEnF,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;AAED,IAAA,OAAOA,IAAC,eAAe,EAAA,EAAW,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAA,GAAM,aAAa,EAArF,EAAA,GAAG,CAAsF,CAAA;AACxH,CAAC;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,CAAA;;;;;;CAMxC;;;;"}

package/src/fields/Select.js

@@ -1,38 +1,25 @@
 import { jsx } from 'react/jsx-runtime';
-import { useCallback } from 'react';
-import { SelectPicker, TagPicker } from 'rsuite';
+import { useMemo, useCallback } from 'react';
+import { SelectPicker } from 'rsuite';
 import styled from 'styled-components';
 
-function Select({ isMulti = false, label, name, onChange, options, 
+function Select({ onChange, options, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 searchable = false, ...originalProps }) {
-    const handleChange = useCallback((valueOrValues) => {
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback((nextValue) => {
         if (!onChange) {
             return;
         }
-        const normalizedValueOrValues = !valueOrValues || (Array.isArray(valueOrValues) && !valueOrValues.length) ? undefined : valueOrValues;
-        onChange(normalizedValueOrValues);
+        const normalizedNextValue = nextValue ?? undefined;
+        onChange(normalizedNextValue);
     }, [onChange]);
-    if (isMulti) {
-        return (jsx(StyledTagPicker, { data: options, onChange: handleChange, placeholder: label, searchable: searchable, ...originalProps }));
-    }
     return (jsx(StyledSelectPicker, { data: options, 
         // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.
         // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`
-        onChange: handleChange, placeholder: label, searchable: searchable, ...originalProps }));
+        onChange: handleChange, searchable: searchable, ...originalProps }, key));
 }
-const StyledSelectPicker = styled(SelectPicker) `
-  display: inline-flex;
-  width: 9.25rem;
-`;
-const StyledTagPicker = styled(TagPicker) `
-  cursor: pointer;
-  width: 9.25rem;
-
-  > .rs-picker-toggle {
-    cursor: inherit;
-  }
-`;
+const StyledSelectPicker = styled(SelectPicker) ``;
 
 export { Select };
 //# sourceMappingURL=Select.js.map

package/src/fields/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/fields/Select.tsx"],"sourcesContent":["import { useCallback } from 'react'\nimport { SelectPicker, TagPicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { Option } from '../types'\nimport type { TagPickerProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type SelectProps = Omit<TagPickerProps, 'as' | 'data' | 'onChange' | 'placeholder'> & {\n  isMulti?: boolean\n  label: string\n  name: string\n  onChange: (valueOrValues: string | string[] | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function Select({\n  isMulti = false,\n  label,\n  name,\n  onChange,\n  options,\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  searchable = false,\n  ...originalProps\n}: SelectProps) {\n  const handleChange = useCallback(\n    (valueOrValues: string | string[] | null) => {\n      if (!onChange) {\n        return\n      }\n\n      const normalizedValueOrValues =\n        !valueOrValues || (Array.isArray(valueOrValues) && !valueOrValues.length) ? undefined : valueOrValues\n\n      onChange(normalizedValueOrValues)\n    },\n    [onChange]\n  )\n\n  if (isMulti) {\n    return (\n      <StyledTagPicker\n        data={options}\n        onChange={handleChange}\n        placeholder={label}\n        searchable={searchable}\n        {...originalProps}\n      />\n    )\n  }\n\n  return (\n    <StyledSelectPicker\n      data={options}\n      // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.\n      // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`\n      onChange={handleChange as any}\n      placeholder={label}\n      searchable={searchable}\n      {...originalProps}\n    />\n  )\n}\n\nconst StyledSelectPicker = styled(SelectPicker)`\n  display: inline-flex;\n  width: 9.25rem;\n`\n\nconst StyledTagPicker = styled(TagPicker)`\n  cursor: pointer;\n  width: 9.25rem;\n\n  > .rs-picker-toggle {\n    cursor: inherit;\n  }\n`\n"],"names":["_jsx"],"mappings":";;;;;AAegB,SAAA,MAAM,CAAC,EACrB,OAAO,GAAG,KAAK,EACf,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO;AACP;AACA,UAAU,GAAG,KAAK,EAClB,GAAG,aAAa,EACJ,EAAA;AACZ,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,aAAuC,KAAI;QAC1C,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;QAED,MAAM,uBAAuB,GAC3B,CAAC,aAAa,KAAK,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,aAAa,CAAA;QAEvG,QAAQ,CAAC,uBAAuB,CAAC,CAAA;AACnC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;AAED,IAAA,IAAI,OAAO,EAAE;QACX,QACEA,IAAC,eAAe,EAAA,EACd,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,UAAU,EAClB,GAAA,aAAa,EACjB,CAAA,EACH;AACF,KAAA;AAED,IAAA,QACEA,GAAC,CAAA,kBAAkB,EACjB,EAAA,IAAI,EAAE,OAAO;;;AAGb,QAAA,QAAQ,EAAE,YAAmB,EAC7B,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,UAAU,EAAA,GAClB,aAAa,EAAA,CACjB,EACH;AACH,CAAC;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA,CAAA;;;CAG9C,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,CAAA;;;;;;;CAOxC;;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/fields/Select.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { SelectPicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { Option } from '../types'\nimport type { SelectPickerProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type SelectProps = Omit<SelectPickerProps<any>, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {\n  defaultValue?: string\n  name: string\n  onChange?: (nextValue: string | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function Select({\n  onChange,\n  options,\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  searchable = false,\n  ...originalProps\n}: SelectProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (nextValue: string | null) => {\n      if (!onChange) {\n        return\n      }\n\n      const normalizedNextValue = nextValue ?? undefined\n\n      onChange(normalizedNextValue)\n    },\n    [onChange]\n  )\n\n  return (\n    <StyledSelectPicker\n      key={key}\n      data={options}\n      // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.\n      // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`\n      onChange={handleChange as any}\n      searchable={searchable}\n      {...originalProps}\n    />\n  )\n}\n\nconst StyledSelectPicker = styled(SelectPicker)``\n"],"names":["_jsx"],"mappings":";;;;;SAcgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAO;AACP;AACA,UAAU,GAAG,KAAK,EAClB,GAAG,aAAa,EACJ,EAAA;AACZ,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAAwB,KAAI;QAC3B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;AAED,QAAA,MAAM,mBAAmB,GAAG,SAAS,IAAI,SAAS,CAAA;QAElD,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;AAED,IAAA,QACEA,GAAC,CAAA,kBAAkB,EAEjB,EAAA,IAAI,EAAE,OAAO;;;AAGb,QAAA,QAAQ,EAAE,YAAmB,EAC7B,UAAU,EAAE,UAAU,EAClB,GAAA,aAAa,EANZ,EAAA,GAAG,CAOR,EACH;AACH,CAAC;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA,EAAE;;;;"}

package/src/fields/TextInput.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { Input } from 'rsuite';
+import styled from 'styled-components';
+
+function TextInput({ onChange, ...originalProps }) {
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback((nextValue) => {
+        if (!onChange) {
+            return;
+        }
+        const normalizedNextValue = nextValue && nextValue.trim().length ? nextValue : undefined;
+        onChange(normalizedNextValue);
+    }, [onChange]);
+    return jsx(StyledInput, { onChange: handleChange, ...originalProps }, key);
+}
+const StyledInput = styled(Input) `
+  background-color: ${p => p.theme.color.white};
+`;
+
+export { StyledInput, TextInput };
+//# sourceMappingURL=TextInput.js.map

package/src/fields/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["../../../src/fields/TextInput.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { Input } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { InputProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'onChange' | 'value'> & {\n  defaultValue?: string\n  name: string\n  onChange?: (nextValue: string | undefined) => Promisable<void>\n}\nexport function TextInput({ onChange, ...originalProps }: TextInputProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (nextValue: string | null) => {\n      if (!onChange) {\n        return\n      }\n\n      const normalizedNextValue = nextValue && nextValue.trim().length ? nextValue : undefined\n\n      onChange(normalizedNextValue)\n    },\n    [onChange]\n  )\n\n  return <StyledInput key={key} onChange={handleChange} {...originalProps} />\n}\n\nexport const StyledInput = styled(Input)`\n  background-color: ${p => p.theme.color.white};\n`\n"],"names":["_jsx"],"mappings":";;;;;AAYM,SAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAkB,EAAA;AACtE,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAAwB,KAAI;QAC3B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;AAED,QAAA,MAAM,mBAAmB,GAAG,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;QAExF,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,OAAOA,GAAA,CAAC,WAAW,EAAA,EAAW,QAAQ,EAAE,YAAY,EAAA,GAAM,aAAa,EAAA,EAA9C,GAAG,CAA+C,CAAA;AAC7E,CAAC;MAEY,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA;sBAClB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAA;;;;;"}

package/src/fields/Textarea.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useCallback } from 'react';
+import { Input } from 'rsuite';
+import styled from 'styled-components';
+
+function Textarea({ onChange, rows = 3, ...originalProps }) {
+    const inputRef = useRef();
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback(() => {
+        if (!onChange) {
+            return;
+        }
+        const nextValue = inputRef.current.value.trim();
+        const normalizedNextValue = nextValue.length ? nextValue : undefined;
+        onChange(normalizedNextValue);
+    }, [onChange]);
+    return jsx(StyledInput, { ref: inputRef, as: "textarea", onChange: handleChange, rows: rows, ...originalProps }, key);
+}
+const StyledInput = styled(Input) ``;
+
+export { StyledInput, Textarea };
+//# sourceMappingURL=Textarea.js.map

package/src/fields/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../src/fields/Textarea.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef } from 'react'\nimport { Input } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { MutableRefObject, TextareaHTMLAttributes } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'onChange' | 'value'> & {\n  defaultValue?: string\n  name: string\n  onChange?: (nextValue: string | undefined) => Promisable<void>\n}\nexport function Textarea({ onChange, rows = 3, ...originalProps }: TextareaProps) {\n  const inputRef = useRef() as MutableRefObject<HTMLTextAreaElement>\n\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(() => {\n    if (!onChange) {\n      return\n    }\n\n    const nextValue = inputRef.current.value.trim()\n    const normalizedNextValue = nextValue.length ? nextValue : undefined\n\n    onChange(normalizedNextValue)\n  }, [onChange])\n\n  return <StyledInput key={key} ref={inputRef} as=\"textarea\" onChange={handleChange} rows={rows} {...originalProps} />\n}\n\nexport const StyledInput = styled(Input)``\n"],"names":["_jsx"],"mappings":";;;;;AAYgB,SAAA,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,aAAa,EAAiB,EAAA;AAC9E,IAAA,MAAM,QAAQ,GAAG,MAAM,EAA2C,CAAA;AAElE,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;QACpC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;QAED,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;AAC/C,QAAA,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;QAEpE,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAOA,GAAA,CAAC,WAAW,EAAW,EAAA,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAC,UAAU,EAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,KAAM,aAAa,EAAA,EAAvF,GAAG,CAAwF,CAAA;AACtH,CAAC;AAEY,MAAA,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA;;;;"}