@povio/ui 0.0.2 → 0.0.3

package/src/components/inputs/DateTime/DateRangePicker/DateRangePicker.tsx

@@ -0,0 +1,808 @@
+import {
+  CalendarDate,
+  createCalendar,
+  endOfMonth,
+  endOfWeek,
+  endOfYear,
+  getLocalTimeZone,
+  startOfMonth,
+  startOfWeek,
+  startOfYear,
+  toCalendarDate,
+  today,
+} from "@internationalized/date";
+import { mergeRefs } from "@react-aria/utils";
+import type { RangeValue } from "@react-types/shared";
+import { clsx } from "clsx";
+import { DateTime } from "luxon";
+import { type KeyboardEvent, type Ref, useCallback, useRef, useState } from "react";
+import { type DateValue, useDateRangePicker, useLocale } from "react-aria";
+import { Button as AriaButton } from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { type DateRangePickerStateOptions, useDateRangePickerState, useRangeCalendarState } from "react-stately";
+
+import { DatePickerInput } from "#ui/components/inputs/DateTime/shared/DatePickerInput";
+import { DateTimeDialog } from "#ui/components/inputs/DateTime/shared/DateTimeDialog";
+import { DateTimeDialogFooter } from "#ui/components/inputs/DateTime/shared/DateTimeDialogFooter";
+import { RangeCalendar } from "#ui/components/inputs/DateTime/shared/RangeCalendar";
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import type { InputVariantProps } from "#ui/components/inputs/shared/input.cva";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { ns } from "#ui/config/i18n";
+import { UIConfig } from "#ui/config/uiConfig.context";
+import { DateTimeUtils } from "#ui/utils/date-time.utils";
+
+// Workaround for bug in React Aria (https://github.com/adobe/react-spectrum/issues/3256#issuecomment-1825942096)
+const PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
+
+interface DateRangePickerBaseProps
+  extends FormFieldProps,
+    InputVariantProps,
+    Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
+  ref?: Ref<HTMLDivElement>;
+  disableDropdown?: boolean;
+  isClearable?: boolean;
+  hideSidebar?: boolean;
+  className?: string;
+  todayIcon?: boolean;
+}
+
+interface DateRange {
+  start: DateValue;
+  end: DateValue;
+}
+
+interface DatePreset {
+  label: string;
+  getValue: () => DateRange;
+}
+
+const DateRangePickerBase = (props: DateRangePickerBaseProps) => {
+  const ui = UIConfig.useConfig();
+  const { t } = useTranslation();
+  const {
+    ref,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    onChange,
+    value,
+    disableDropdown,
+    className,
+    hideSidebar,
+    todayIcon,
+    hideLabel = ui.input.hideLabel,
+    variant = ui.input.variant,
+    as = ui.input.as,
+    size = ui.input.size,
+    isClearable = ui.input.isClearable,
+    ...rest
+  } = props;
+
+  const [validationRangeError, setValidationRangeError] = useState<string | undefined>();
+
+  const dialogState = useDateRangePickerState({ ...rest, value, shouldCloseOnSelect: false });
+  const state = useDateRangePickerState({
+    ...rest,
+    value,
+    onChange: (newValue) => {
+      if (isValidRange(newValue)) {
+        return;
+      }
+
+      onChange?.(newValue);
+      handleCalendarStatesChange(newValue);
+    },
+    shouldCloseOnSelect: false,
+  });
+
+  const dateRangePickerRef = useRef<HTMLDivElement>(null);
+
+  const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps } = useDateRangePicker(
+    { ...rest, label },
+    state,
+    dateRangePickerRef,
+  );
+  const { calendarProps } = useDateRangePicker({ ...rest, label }, dialogState, dateRangePickerRef);
+
+  const { locale } = useLocale();
+
+  const formFieldProps: FormFieldProps = {
+    error: error || validationRangeError,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const leftCalendarState = useRangeCalendarState({
+    ...calendarProps,
+    locale,
+    createCalendar,
+    pageBehavior: "single",
+    visibleDuration: { months: 1 },
+    minValue: undefined,
+    maxValue: undefined,
+  });
+
+  const rightCalendarState = useRangeCalendarState({
+    ...calendarProps,
+    locale,
+    createCalendar,
+    pageBehavior: "single",
+    visibleDuration: { months: 1 },
+    defaultFocusedValue: today(getLocalTimeZone()).add({ months: 1 }),
+    minValue: undefined,
+    maxValue: undefined,
+  });
+
+  const [activePreset, setActivePreset] = useState<string | null>(null);
+  const [rangeSelection, setRangeSelection] = useState<{
+    start: DateValue | null;
+    end: DateValue | null;
+    isSelecting: boolean;
+  }>({
+    start: value?.start || null,
+    end: value?.end || null,
+    isSelecting: false,
+  });
+
+  const [hoverDate, setHoverDate] = useState<DateValue | null>(null);
+
+  const headerProps: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  const isValidRange = useCallback(
+    (newValue: RangeValue<DateValue> | null) => {
+      if (newValue?.start && newValue?.end) {
+        const startDate = newValue.start;
+        const endDate = newValue.end;
+
+        if (endDate.compare(startDate) < 0) {
+          setValidationRangeError(
+            t(($) => $.ui.datePicker.errors.endDateBeforeStart, {
+              ns,
+            }),
+          );
+          return true;
+        }
+        setValidationRangeError(undefined);
+      } else {
+        setValidationRangeError(undefined);
+      }
+      return false;
+    },
+    [t],
+  );
+
+  const handleCalendarStatesChange = (newValue: RangeValue<DateValue> | null) => {
+    if (newValue) {
+      if (isValidRange(newValue)) {
+        return;
+      }
+
+      dialogState.setValue(newValue);
+
+      const startDate = newValue.start as CalendarDate;
+      const endDate = newValue.end as CalendarDate;
+
+      leftCalendarState.setFocusedDate(startDate);
+
+      if (startDate.year === endDate.year && startDate.month === endDate.month) {
+        rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
+      } else {
+        rightCalendarState.setFocusedDate(endDate);
+      }
+
+      leftCalendarState.setValue(newValue);
+      rightCalendarState.setValue(newValue);
+      setRangeSelection({
+        start: newValue.start,
+        end: newValue.end,
+        isSelecting: false,
+      });
+      setHoverDate(null);
+      setActivePreset(null);
+    } else {
+      setValidationRangeError(undefined);
+      dialogState.setValue(null);
+      leftCalendarState.setValue(null);
+      rightCalendarState.setValue(null);
+      setRangeSelection({
+        start: null,
+        end: null,
+        isSelecting: false,
+      });
+      setHoverDate(null);
+      setActivePreset(null);
+    }
+  };
+
+  const throttledSetHoverDate = useCallback((date: DateValue | null) => {
+    requestAnimationFrame(() => {
+      setHoverDate(date);
+    });
+  }, []);
+
+  const handleDateHover = useCallback(
+    (date: DateValue | null) => {
+      if (rangeSelection.isSelecting && rangeSelection.start) {
+        throttledSetHoverDate(date);
+      }
+    },
+    [rangeSelection.isSelecting, rangeSelection.start, throttledSetHoverDate],
+  );
+
+  const handleDateSelection = useCallback(
+    (date: DateValue, calendarSide?: "left" | "right") => {
+      if (calendarSide) {
+        const currentState = calendarSide === "left" ? leftCalendarState : rightCalendarState;
+        const currentVisibleMonth = currentState.visibleRange.start;
+
+        if (date.month !== currentVisibleMonth.month || date.year !== currentVisibleMonth.year) {
+          if (calendarSide === "left") {
+            leftCalendarState.setFocusedDate(date as CalendarDate);
+            rightCalendarState.setFocusedDate((date as CalendarDate).add({ months: 1 }));
+          } else {
+            rightCalendarState.setFocusedDate(date as CalendarDate);
+            leftCalendarState.setFocusedDate((date as CalendarDate).subtract({ months: 1 }));
+          }
+        }
+      }
+
+      if (!rangeSelection.isSelecting || !rangeSelection.start) {
+        setRangeSelection({
+          start: date,
+          end: null,
+          isSelecting: true,
+        });
+        setHoverDate(null);
+        leftCalendarState.setValue(null);
+        rightCalendarState.setValue(null);
+      } else {
+        const { start } = rangeSelection;
+        const end = date;
+
+        const finalStart = start.compare(end) <= 0 ? start : end;
+        const finalEnd = start.compare(end) <= 0 ? end : start;
+
+        const newRange = { start: finalStart, end: finalEnd };
+
+        leftCalendarState.setValue(newRange);
+        rightCalendarState.setValue(newRange);
+        dialogState.setValue(newRange);
+
+        setRangeSelection({
+          start: finalStart,
+          end: finalEnd,
+          isSelecting: false,
+        });
+        setHoverDate(null);
+
+        setActivePreset(null);
+      }
+    },
+    [rangeSelection, leftCalendarState, rightCalendarState, dialogState],
+  );
+
+  const handleKeyboardNavigation = useCallback(
+    (event: KeyboardEvent, date: DateValue, calendarSide: "left" | "right") => {
+      const currentState = calendarSide === "left" ? leftCalendarState : rightCalendarState;
+      const otherState = calendarSide === "left" ? rightCalendarState : leftCalendarState;
+
+      let shouldPreventDefault = false;
+      switch (event.key) {
+        case "ArrowRight": {
+          const nextDate = date.add({ days: 1 });
+          const currentMonth = currentState.visibleRange.start;
+          const otherMonth = otherState.visibleRange.start;
+
+          if (calendarSide === "left" && nextDate.month !== currentMonth.month) {
+            if (nextDate.year === otherMonth.year && nextDate.month === otherMonth.month) {
+              otherState.setFocusedDate(nextDate as CalendarDate);
+              shouldPreventDefault = true;
+            } else {
+              rightCalendarState.setFocusedDate(nextDate as CalendarDate);
+              shouldPreventDefault = true;
+            }
+          }
+          break;
+        }
+
+        case "ArrowLeft": {
+          const prevDate = date.subtract({ days: 1 });
+          const currentMonth = currentState.visibleRange.start;
+          const otherMonth = otherState.visibleRange.start;
+
+          if (calendarSide === "right" && prevDate.month !== currentMonth.month) {
+            if (prevDate.year === otherMonth.year && prevDate.month === otherMonth.month) {
+              otherState.setFocusedDate(prevDate as CalendarDate);
+              shouldPreventDefault = true;
+            } else {
+              leftCalendarState.setFocusedDate(prevDate as CalendarDate);
+              shouldPreventDefault = true;
+            }
+          }
+          break;
+        }
+
+        case "ArrowDown": {
+          const nextWeekDate = date.add({ weeks: 1 });
+          const currentMonth = currentState.visibleRange.start;
+          const otherMonth = otherState.visibleRange.start;
+
+          if (calendarSide === "left" && nextWeekDate.month !== currentMonth.month) {
+            if (nextWeekDate.year === otherMonth.year && nextWeekDate.month === otherMonth.month) {
+              otherState.setFocusedDate(nextWeekDate as CalendarDate);
+              shouldPreventDefault = true;
+            } else {
+              rightCalendarState.setFocusedDate(nextWeekDate as CalendarDate);
+              shouldPreventDefault = true;
+            }
+          }
+          break;
+        }
+
+        case "ArrowUp": {
+          const prevWeekDate = date.subtract({ weeks: 1 });
+          const currentMonth = currentState.visibleRange.start;
+          const otherMonth = otherState.visibleRange.start;
+
+          if (calendarSide === "right" && prevWeekDate.month !== currentMonth.month) {
+            if (prevWeekDate.year === otherMonth.year && prevWeekDate.month === otherMonth.month) {
+              otherState.setFocusedDate(prevWeekDate as CalendarDate);
+              shouldPreventDefault = true;
+            } else {
+              leftCalendarState.setFocusedDate(prevWeekDate as CalendarDate);
+              shouldPreventDefault = true;
+            }
+          }
+          break;
+        }
+
+        case "Enter":
+        case " ": {
+          handleDateSelection(date);
+          shouldPreventDefault = true;
+          break;
+        }
+
+        case "Escape": {
+          setRangeSelection({
+            start: null,
+            end: null,
+            isSelecting: false,
+          });
+          setHoverDate(null);
+          shouldPreventDefault = true;
+          break;
+        }
+
+        default:
+          break;
+      }
+
+      if (shouldPreventDefault) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      return shouldPreventDefault;
+    },
+    [leftCalendarState, rightCalendarState, handleDateSelection],
+  );
+
+  const syncCalendarStates = useCallback(
+    (newValue: DateRange | null) => {
+      if (isValidRange(newValue)) {
+        return;
+      }
+
+      leftCalendarState.setValue(newValue);
+      rightCalendarState.setValue(newValue);
+      dialogState.setValue(newValue);
+
+      if (newValue) {
+        setRangeSelection({
+          start: newValue.start,
+          end: newValue.end,
+          isSelecting: false,
+        });
+      } else {
+        setRangeSelection({
+          start: null,
+          end: null,
+          isSelecting: false,
+        });
+      }
+
+      setHoverDate(null);
+    },
+    [isValidRange, leftCalendarState, rightCalendarState, dialogState],
+  );
+
+  const onApply = () => {
+    const valueToApply =
+      rangeSelection.start && rangeSelection.end
+        ? { start: rangeSelection.start, end: rangeSelection.end }
+        : dialogState.value;
+
+    if (valueToApply) {
+      state.setValue(valueToApply as DateRange);
+    }
+    state.toggle();
+  };
+
+  const onTodayPress = () => {
+    const todayDate = today(getLocalTimeZone());
+    leftCalendarState.setFocusedDate(todayDate);
+    rightCalendarState.setFocusedDate(todayDate.add({ months: 1 }));
+  };
+
+  const onOpenChange = (isOpen: boolean) => {
+    state.toggle();
+    if (!isOpen) {
+      if (state.value) {
+        dialogState.setValue(state.value as DateRange);
+        leftCalendarState.setValue(state.value as DateRange);
+        rightCalendarState.setValue(state.value as DateRange);
+
+        const startDate = (state.value.start as CalendarDate) || today(getLocalTimeZone());
+        const endDate = (state.value.end as CalendarDate) || today(getLocalTimeZone()).add({ months: 1 });
+
+        leftCalendarState.setFocusedDate(startDate);
+
+        if (startDate.year === endDate.year && startDate.month === endDate.month) {
+          rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
+        } else {
+          rightCalendarState.setFocusedDate(endDate);
+        }
+
+        setRangeSelection({
+          start: state.value.start,
+          end: state.value.end,
+          isSelecting: false,
+        });
+      }
+    }
+  };
+
+  const todayDate = today(getLocalTimeZone());
+
+  const getThisWeekRange = (): DateRange => {
+    const start = startOfWeek(todayDate, locale);
+    const end = endOfWeek(todayDate, locale);
+    return { start, end };
+  };
+
+  const getLastWeekRange = (): DateRange => {
+    const thisWeekStart = startOfWeek(todayDate, locale);
+    const lastWeekStart = thisWeekStart.subtract({ weeks: 1 });
+    const lastWeekEnd = thisWeekStart.subtract({ days: 1 });
+    return { start: lastWeekStart, end: lastWeekEnd };
+  };
+
+  const getThisAndLastWeekRange = (): DateRange => {
+    const thisWeekEnd = endOfWeek(todayDate, locale);
+    const lastWeekStart = startOfWeek(todayDate, locale).subtract({ weeks: 1 });
+    return { start: lastWeekStart, end: thisWeekEnd };
+  };
+
+  const getThisMonthRange = (): DateRange => {
+    const start = startOfMonth(todayDate);
+    const end = endOfMonth(todayDate);
+    return { start, end };
+  };
+
+  const getThisAndLastMonthRange = (): DateRange => {
+    const thisMonthEnd = endOfMonth(todayDate);
+    const lastMonthStart = startOfMonth(todayDate).subtract({ months: 1 });
+    return { start: lastMonthStart, end: thisMonthEnd };
+  };
+
+  const presets: DatePreset[] = [
+    {
+      label: t(($) => $.ui.datePicker.presets.thisWeek, {
+        ns,
+      }),
+      getValue: getThisWeekRange,
+    },
+    {
+      label: t(($) => $.ui.datePicker.presets.lastWeek, {
+        ns,
+      }),
+      getValue: getLastWeekRange,
+    },
+    {
+      label: t(($) => $.ui.datePicker.presets.thisAndLastWeek, {
+        ns,
+      }),
+      getValue: getThisAndLastWeekRange,
+    },
+    {
+      label: t(($) => $.ui.datePicker.presets.thisMonth, {
+        ns,
+      }),
+      getValue: getThisMonthRange,
+    },
+    {
+      label: t(($) => $.ui.datePicker.presets.thisAndLastMonth, {
+        ns,
+      }),
+      getValue: getThisAndLastMonthRange,
+    },
+    {
+      label: t(($) => $.ui.datePicker.presets.thisYear, {
+        ns,
+      }),
+      getValue: () => ({ start: startOfYear(todayDate), end: todayDate }),
+    },
+    {
+      label: t(($) => $.ui.datePicker.presets.lastYear, {
+        ns,
+      }),
+      getValue: () => ({
+        start: startOfYear(todayDate.subtract({ years: 1 })),
+        end: endOfYear(todayDate.subtract({ years: 1 })),
+      }),
+    },
+    {
+      label: t(($) => $.ui.datePicker.presets.thisAndLastYear, {
+        ns,
+      }),
+      getValue: () => ({ start: startOfYear(todayDate.subtract({ years: 1 })), end: todayDate }),
+    },
+    {
+      label: t(($) => $.ui.datePicker.presets.soFar, {
+        ns,
+      }),
+      getValue: () => ({ start: startOfYear(todayDate), end: todayDate }),
+    },
+  ];
+
+  const selectPreset = (preset: DatePreset) => {
+    setActivePreset(preset.label);
+    const presetValue = preset.getValue();
+    syncCalendarStates(presetValue);
+
+    const startDate = presetValue.start as CalendarDate;
+    leftCalendarState.setFocusedDate(startDate);
+
+    const endDate = presetValue.end as CalendarDate;
+    const monthsDifference = (endDate.year - startDate.year) * 12 + (endDate.month - startDate.month);
+
+    if (monthsDifference > 2) {
+      rightCalendarState.setFocusedDate(endDate);
+    } else {
+      const rightCalendarMonth = startDate.add({ months: 1 });
+      rightCalendarState.setFocusedDate(rightCalendarMonth);
+    }
+  };
+
+  return (
+    <FormField
+      {...formFieldProps}
+      as={as}
+      labelProps={labelProps}
+      className={clsx("relative inline-flex w-full flex-col text-left", className)}
+    >
+      <DatePickerInput
+        ref={mergeRefs(ref, dateRangePickerRef)}
+        as={as}
+        groupProps={groupProps}
+        fieldProps={{ ...startFieldProps, placeholderValue: PLACEHOLDER_VALUE }}
+        endFieldProps={{ ...endFieldProps, placeholderValue: PLACEHOLDER_VALUE }}
+        buttonProps={buttonProps}
+        isDisabled={isDisabled}
+        isInvalid={!!error}
+        disableDropdown={disableDropdown}
+        variant={variant}
+        size={size}
+        isClearable={isClearable}
+        headerProps={headerProps}
+        todayIcon={todayIcon}
+      />
+      <DateTimeDialog
+        hideSidebar={hideSidebar}
+        sidebar={
+          <div className="flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden">
+            {presets.map((preset) => (
+              <AriaButton
+                key={preset.label}
+                onClick={() => selectPreset(preset)}
+                className={clsx(
+                  "w-full px-2 py-1 text-left md:px-list-side-item md:py-list-height-item",
+                  activePreset !== preset.label &&
+                    "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover",
+                  activePreset === preset.label &&
+                    "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted",
+                )}
+              >
+                <Typography
+                  size="label-2"
+                  sizeMobile="label-3"
+                  as="span"
+                  className="whitespace-nowrap"
+                >
+                  {preset.label}
+                </Typography>
+              </AriaButton>
+            ))}
+          </div>
+        }
+        footer={
+          <DateTimeDialogFooter
+            isValid={!dialogState.isInvalid && !!dialogState.value}
+            onTodayPress={onTodayPress}
+            onApply={onApply}
+          />
+        }
+        label={label}
+        triggerRef={dateRangePickerRef}
+        dialogProps={dialogProps}
+        isOpen={state.isOpen}
+        onOpenChange={onOpenChange}
+      >
+        <div className="mb-4 flex max-w-[804px] md:mb-0">
+          <div className="flex flex-1 justify-center">
+            <RangeCalendar
+              leftCalendarState={leftCalendarState}
+              rightCalendarState={rightCalendarState}
+              calendarProps={calendarProps}
+              onApply={onApply}
+              onRangeChange={syncCalendarStates}
+              onDateSelection={handleDateSelection}
+              onDateHover={handleDateHover}
+              rangeSelection={rangeSelection}
+              hoverDate={hoverDate}
+              onKeyboardNavigation={handleKeyboardNavigation}
+            />
+          </div>
+        </div>
+      </DateTimeDialog>
+    </FormField>
+  );
+};
+
+export interface DateRangePickerProps
+  extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
+  value?: { start: string | null; end: string | null } | null;
+  onChange?: (value: { start: string | null; end: string | null } | null) => void;
+  fullIso?: boolean;
+  minValue?: DateValue | string;
+  maxValue?: DateValue | string;
+}
+
+export type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<
+  DateRangePickerProps,
+  TFieldValues
+>;
+
+export const DateRangePicker = <TFieldValues extends FieldValues>({
+  fullIso = true,
+  minValue,
+  maxValue,
+  ...props
+}: ControlledDateRangePickerProps<TFieldValues>) => {
+  const formatDateRange = (
+    range: RangeValue<CalendarDate> | null,
+  ): { start: string | null; end: string | null } | null => {
+    if (!range?.start || !range?.end) {
+      return null;
+    }
+
+    if (fullIso) {
+      return {
+        start: DateTimeUtils.fromCalendarDateToUTCISO(range.start),
+        end: DateTimeUtils.fromCalendarDateToUTCISO(range.end, { endOfDay: true }),
+      };
+    }
+
+    const startDate = DateTimeUtils.fromDateValueToLocal(range.start);
+    const endDate = DateTimeUtils.fromDateValueToLocal(range.end);
+    return {
+      start: DateTime.fromJSDate(startDate).toISODate(),
+      end: DateTime.fromJSDate(endDate).toISODate(),
+    };
+  };
+
+  const parseDateRange = (
+    formattedRange?: { start: string | null; end: string | null } | null,
+  ): RangeValue<CalendarDate> | null | undefined => {
+    if (!formattedRange?.start || !formattedRange?.end) {
+      return formattedRange as null | undefined;
+    }
+
+    if (fullIso) {
+      return {
+        start: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.start),
+        end: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.end),
+      };
+    }
+
+    const startDate = DateTime.fromISO(formattedRange.start).toJSDate();
+    const endDate = DateTime.fromISO(formattedRange.end).toJSDate();
+    const startZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(startDate);
+    const endZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(endDate);
+    return {
+      start: toCalendarDate(startZonedDateTime),
+      end: toCalendarDate(endZonedDateTime),
+    };
+  };
+
+  const parseCalendarDate = (formattedDate?: string | null): CalendarDate | null | undefined => {
+    if (formattedDate == null) {
+      return formattedDate;
+    }
+
+    if (fullIso) {
+      return DateTimeUtils.fromUTCISOToCalendarDate(formattedDate);
+    }
+
+    const date = DateTime.fromISO(formattedDate).toJSDate();
+    const zonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(date);
+    return toCalendarDate(zonedDateTime);
+  };
+
+  const dateLimits = {
+    minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
+    maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue,
+  };
+
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <DateRangePickerBase
+            {...innerProps}
+            {...dateLimits}
+            ref={mergeRefs(ref, field.ref)}
+            value={parseDateRange(field.value)}
+            onChange={(value) => field.onChange(formatDateRange(value))}
+            onBlur={field.onBlur}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return (
+    <DateRangePickerBase
+      {...props}
+      {...dateLimits}
+      value={parseDateRange(props.value)}
+      onChange={(value) => props.onChange?.(formatDateRange(value))}
+    />
+  );
+};