@povio/ui 3.4.0-rc.2 → 3.4.0-rc.22

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -1,883 +0,0 @@
-import { UIOverrides } from "../../../../config/uiOverrides.context.js";
-import { Typography } from "../../../text/Typography/Typography.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-import "../../../../config/i18n.js";
-import { FieldController } from "../../shared/form.binding.js";
-import { FormField } from "../../FormField/FormField.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
-import { datePickerInputContentRowDefinition } from "../shared/datePickerInput.cva.js";
-import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
-import { DatePickerInput } from "../shared/DatePickerInput.js";
-import { DateTimeDialog } from "../shared/DateTimeDialog.js";
-import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
-import { getStaticDateRangeSegments, getStaticDateTimeFocusTarget } from "../shared/staticDateTimeSegments.js";
-import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-import { InputFrame } from "../../Skeleton/InputFrame.js";
-import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
-import { RangeCalendar } from "../shared/RangeCalendar.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Button } from "react-aria-components";
-import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
-import { mergeRefs } from "@react-aria/utils";
-import { useTranslation } from "react-i18next";
-import { createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
-import { DateTime } from "luxon";
-import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
-//#region src/components/inputs/DateTime/DateRangePicker/DateRangePicker.tsx
-var DateRangePickerBase = (props) => {
-	const ui = UIConfig.useConfig();
-	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, allowPartialRange: allowPartialRangeProp, minValue, maxValue, ...rest } = props;
-	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
-	const variant = variantProp ?? ui.input.variant;
-	const as = asProp ?? ui.input.as;
-	const size = sizeProp ?? ui.input.size;
-	const isClearable = isClearableProp ?? ui.input.isClearable;
-	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
-	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
-	const todayIconButtonComponent = todayIconButtonComponentProp ?? ui.dateInput.todayIconButtonComponent;
-	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
-	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
-	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
-	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
-	const allowPartialRange = allowPartialRangeProp ?? ui.dateInput.allowPartialRange;
-	const timeZone = ui.dateInput.timeZone;
-	let effectiveTimeZone = getLocalTimeZone();
-	if (timeZone !== "clientLocal") effectiveTimeZone = timeZone;
-	const [validationRangeError, setValidationRangeError] = useState();
-	const datePickerInputRef = useRef(null);
-	const dateRangePickerRef = useMemo(() => ({ get current() {
-		return datePickerInputRef.current?.getContainer?.() || null;
-	} }), []);
-	const normalizedValue = value ?? null;
-	const fieldRangeRef = useRef(normalizedValue);
-	fieldRangeRef.current = normalizedValue;
-	const dialogState = useDateRangePickerState({
-		...rest,
-		value: normalizedValue,
-		shouldCloseOnSelect: false,
-		shouldForceLeadingZeros,
-		minValue,
-		maxValue
-	});
-	const state = useDateRangePickerState({
-		...rest,
-		shouldForceLeadingZeros,
-		value: normalizedValue,
-		minValue,
-		maxValue,
-		onChange: (newValue) => {
-			if (allowPartialRange && newValue === null) return;
-			fieldRangeRef.current = newValue;
-			const isInvalidRange = isValidRange(newValue);
-			onChange?.(newValue);
-			if (isInvalidRange) return;
-			handleCalendarStatesChange(newValue);
-		},
-		shouldCloseOnSelect: false
-	});
-	const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps } = useDateRangePicker({
-		...rest,
-		label,
-		shouldForceLeadingZeros,
-		minValue,
-		maxValue
-	}, state, dateRangePickerRef);
-	const { calendarProps } = useDateRangePicker({
-		...rest,
-		label,
-		shouldForceLeadingZeros,
-		minValue,
-		maxValue
-	}, dialogState, dateRangePickerRef);
-	const emitPartialRangeChange = (part, date) => {
-		if (!allowPartialRange) return;
-		const partialRange = {
-			start: part === "start" ? date : fieldRangeRef.current?.start ?? null,
-			end: part === "end" ? date : fieldRangeRef.current?.end ?? null
-		};
-		fieldRangeRef.current = partialRange;
-		if (partialRange.start && partialRange.end) return;
-		const newValue_0 = partialRange.start || partialRange.end ? partialRange : null;
-		onChange?.(newValue_0);
-	};
-	const { locale } = useLocale$1();
-	useImperativeHandle(ref, () => ({
-		clear: () => {
-			datePickerInputRef.current?.clear();
-		},
-		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
-	}));
-	const handleBlur = (newValue_1) => {
-		onBlur?.({ target: { value: newValue_1 } });
-	};
-	const 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,
-		maxValue
-	});
-	const rightCalendarState = useRangeCalendarState({
-		...calendarProps,
-		locale,
-		createCalendar,
-		pageBehavior: "single",
-		visibleDuration: { months: 1 },
-		defaultFocusedValue: today(effectiveTimeZone).add({ months: 1 }),
-		minValue,
-		maxValue
-	});
-	const [activePreset, setActivePreset] = useState(null);
-	const [rangeSelection, setRangeSelection] = useState({
-		start: value?.start || null,
-		end: value?.end || null,
-		isSelecting: false
-	});
-	const [hoverDate, setHoverDate] = useState(null);
-	const headerProps = {
-		label,
-		tooltipText,
-		helperText,
-		isRequired,
-		rightContent,
-		isHeaderHidden: hideLabel || isHeaderHidden,
-		isDisabled,
-		className: headerClassName,
-		labelProps
-	};
-	const isDateOutsideBounds = useCallback((date_0) => {
-		if (minValue && date_0.compare(minValue) < 0) return true;
-		if (maxValue && date_0.compare(maxValue) > 0) return true;
-		return false;
-	}, [minValue, maxValue]);
-	const clampRangeToBounds = useCallback((range) => {
-		if (range === null) return null;
-		if (minValue && maxValue && minValue.compare(maxValue) > 0) return null;
-		let startDate = range.start;
-		let endDate = range.end;
-		if (minValue && endDate.compare(minValue) < 0 || maxValue && startDate.compare(maxValue) > 0) return null;
-		if (minValue && startDate.compare(minValue) < 0) startDate = minValue;
-		if (maxValue && startDate.compare(maxValue) > 0) startDate = maxValue;
-		if (minValue && endDate.compare(minValue) < 0) endDate = minValue;
-		if (maxValue && endDate.compare(maxValue) > 0) endDate = maxValue;
-		if (startDate.compare(endDate) > 0) return null;
-		return {
-			start: startDate,
-			end: endDate
-		};
-	}, [minValue, maxValue]);
-	const isRangeWithinBounds = useCallback((range_0) => {
-		if (minValue && range_0.start.compare(minValue) < 0) return false;
-		if (maxValue && range_0.end.compare(maxValue) > 0) return false;
-		return true;
-	}, [minValue, maxValue]);
-	const isValidRange = useCallback((newValue_2) => {
-		if (newValue_2?.start && newValue_2?.end) {
-			const startDate_0 = newValue_2.start;
-			if (newValue_2.end.compare(startDate_0) < 0) {
-				setValidationRangeError(t(($) => $.ui.datePicker.errors.endDateBeforeStart, { ns: "ui" }));
-				return true;
-			}
-			setValidationRangeError(void 0);
-		} else setValidationRangeError(void 0);
-		return false;
-	}, [t]);
-	const handleCalendarStatesChange = (newValue_3) => {
-		if (newValue_3) {
-			const clampedValue = clampRangeToBounds(newValue_3);
-			if (!clampedValue) return;
-			if (isValidRange(clampedValue)) return;
-			dialogState.setValue(clampedValue);
-			const startDate_1 = clampedValue.start;
-			const endDate_1 = clampedValue.end;
-			leftCalendarState.setFocusedDate(startDate_1);
-			if (startDate_1.year === endDate_1.year && startDate_1.month === endDate_1.month) rightCalendarState.setFocusedDate(startDate_1.add({ months: 1 }));
-			else rightCalendarState.setFocusedDate(endDate_1);
-			leftCalendarState.setValue(clampedValue);
-			rightCalendarState.setValue(clampedValue);
-			setRangeSelection({
-				start: clampedValue.start,
-				end: clampedValue.end,
-				isSelecting: false
-			});
-			setHoverDate(null);
-			setActivePreset(null);
-		} else {
-			setValidationRangeError(void 0);
-			dialogState.setValue(null);
-			leftCalendarState.setValue(null);
-			rightCalendarState.setValue(null);
-			setRangeSelection({
-				start: null,
-				end: null,
-				isSelecting: false
-			});
-			setHoverDate(null);
-			setActivePreset(null);
-		}
-	};
-	const throttledSetHoverDate = useCallback((date_1) => {
-		requestAnimationFrame(() => {
-			setHoverDate(date_1);
-		});
-	}, []);
-	const handleDateHover = useCallback((date_2) => {
-		if (rangeSelection.isSelecting && rangeSelection.start) throttledSetHoverDate(date_2);
-	}, [
-		rangeSelection.isSelecting,
-		rangeSelection.start,
-		throttledSetHoverDate
-	]);
-	const handleDateSelection = useCallback((date_3, calendarSide) => {
-		if (calendarSide) {
-			const currentVisibleMonth = (calendarSide === "left" ? leftCalendarState : rightCalendarState).visibleRange.start;
-			if (date_3.month !== currentVisibleMonth.month || date_3.year !== currentVisibleMonth.year) if (calendarSide === "left") {
-				leftCalendarState.setFocusedDate(date_3);
-				rightCalendarState.setFocusedDate(date_3.add({ months: 1 }));
-			} else {
-				rightCalendarState.setFocusedDate(date_3);
-				leftCalendarState.setFocusedDate(date_3.subtract({ months: 1 }));
-			}
-		}
-		if (isDateOutsideBounds(date_3)) return;
-		if (!rangeSelection.isSelecting || !rangeSelection.start) {
-			setRangeSelection({
-				start: date_3,
-				end: null,
-				isSelecting: true
-			});
-			setHoverDate(null);
-			leftCalendarState.setValue(null);
-			rightCalendarState.setValue(null);
-		} else {
-			const { start } = rangeSelection;
-			const end = date_3;
-			const clampedRange = clampRangeToBounds({
-				start: start.compare(end) <= 0 ? start : end,
-				end: start.compare(end) <= 0 ? end : start
-			});
-			if (!clampedRange) return;
-			leftCalendarState.setValue(clampedRange);
-			rightCalendarState.setValue(clampedRange);
-			dialogState.setValue(clampedRange);
-			setRangeSelection({
-				start: clampedRange.start,
-				end: clampedRange.end,
-				isSelecting: false
-			});
-			setHoverDate(null);
-			setActivePreset(null);
-		}
-	}, [
-		rangeSelection,
-		leftCalendarState,
-		rightCalendarState,
-		dialogState,
-		isDateOutsideBounds,
-		clampRangeToBounds
-	]);
-	const handleKeyboardNavigation = useCallback((event, date_4, calendarSide_0) => {
-		const currentState_0 = calendarSide_0 === "left" ? leftCalendarState : rightCalendarState;
-		const otherState = calendarSide_0 === "left" ? rightCalendarState : leftCalendarState;
-		let shouldPreventDefault = false;
-		switch (event.key) {
-			case "ArrowRight": {
-				const nextDate = date_4.add({ days: 1 });
-				const currentMonth_2 = currentState_0.visibleRange.start;
-				const otherMonth_2 = otherState.visibleRange.start;
-				if (calendarSide_0 === "left" && nextDate.month !== currentMonth_2.month) if (nextDate.year === otherMonth_2.year && nextDate.month === otherMonth_2.month) {
-					otherState.setFocusedDate(nextDate);
-					shouldPreventDefault = true;
-				} else {
-					rightCalendarState.setFocusedDate(nextDate);
-					shouldPreventDefault = true;
-				}
-				break;
-			}
-			case "ArrowLeft": {
-				const prevDate = date_4.subtract({ days: 1 });
-				const currentMonth_1 = currentState_0.visibleRange.start;
-				const otherMonth_1 = otherState.visibleRange.start;
-				if (calendarSide_0 === "right" && prevDate.month !== currentMonth_1.month) if (prevDate.year === otherMonth_1.year && prevDate.month === otherMonth_1.month) {
-					otherState.setFocusedDate(prevDate);
-					shouldPreventDefault = true;
-				} else {
-					leftCalendarState.setFocusedDate(prevDate);
-					shouldPreventDefault = true;
-				}
-				break;
-			}
-			case "ArrowDown": {
-				const nextWeekDate = date_4.add({ weeks: 1 });
-				const currentMonth_0 = currentState_0.visibleRange.start;
-				const otherMonth_0 = otherState.visibleRange.start;
-				if (calendarSide_0 === "left" && nextWeekDate.month !== currentMonth_0.month) if (nextWeekDate.year === otherMonth_0.year && nextWeekDate.month === otherMonth_0.month) {
-					otherState.setFocusedDate(nextWeekDate);
-					shouldPreventDefault = true;
-				} else {
-					rightCalendarState.setFocusedDate(nextWeekDate);
-					shouldPreventDefault = true;
-				}
-				break;
-			}
-			case "ArrowUp": {
-				const prevWeekDate = date_4.subtract({ weeks: 1 });
-				const currentMonth = currentState_0.visibleRange.start;
-				const otherMonth = otherState.visibleRange.start;
-				if (calendarSide_0 === "right" && prevWeekDate.month !== currentMonth.month) if (prevWeekDate.year === otherMonth.year && prevWeekDate.month === otherMonth.month) {
-					otherState.setFocusedDate(prevWeekDate);
-					shouldPreventDefault = true;
-				} else {
-					leftCalendarState.setFocusedDate(prevWeekDate);
-					shouldPreventDefault = true;
-				}
-				break;
-			}
-			case "Enter":
-			case " ":
-				handleDateSelection(date_4);
-				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_4) => {
-		if (newValue_4 === null) {
-			setValidationRangeError(void 0);
-			leftCalendarState.setValue(null);
-			rightCalendarState.setValue(null);
-			dialogState.setValue(null);
-			setRangeSelection({
-				start: null,
-				end: null,
-				isSelecting: false
-			});
-			setHoverDate(null);
-			return;
-		}
-		const clampedValue_0 = clampRangeToBounds(newValue_4);
-		if (!clampedValue_0) return;
-		if (isValidRange(clampedValue_0)) return;
-		leftCalendarState.setValue(clampedValue_0);
-		rightCalendarState.setValue(clampedValue_0);
-		dialogState.setValue(clampedValue_0);
-		setRangeSelection({
-			start: clampedValue_0.start,
-			end: clampedValue_0.end,
-			isSelecting: false
-		});
-		setHoverDate(null);
-	}, [
-		isValidRange,
-		leftCalendarState,
-		rightCalendarState,
-		dialogState,
-		clampRangeToBounds
-	]);
-	const onApply = () => {
-		let valueToApply = dialogState.value;
-		if (rangeSelection.start && rangeSelection.end) valueToApply = {
-			start: rangeSelection.start,
-			end: rangeSelection.end
-		};
-		if (valueToApply) {
-			const clampedValue_1 = clampRangeToBounds(valueToApply);
-			if (clampedValue_1) {
-				valueToApply = clampedValue_1;
-				state.setValue(clampedValue_1);
-			}
-		}
-		state.toggle();
-	};
-	const onTodayPress = () => {
-		const todayDate = today(effectiveTimeZone);
-		const clampedTodayRange = clampRangeToBounds({
-			start: todayDate,
-			end: todayDate
-		});
-		if (!clampedTodayRange) return;
-		const startDate_2 = clampedTodayRange.start;
-		const endDate_2 = clampedTodayRange.end;
-		leftCalendarState.setFocusedDate(startDate_2);
-		if (startDate_2.year === endDate_2.year && startDate_2.month === endDate_2.month) rightCalendarState.setFocusedDate(startDate_2.add({ months: 1 }));
-		else rightCalendarState.setFocusedDate(endDate_2);
-		syncCalendarStates(clampedTodayRange);
-	};
-	const onInputClear = () => {
-		fieldRangeRef.current = null;
-		onChange?.(null);
-		dialogState.setValue(null);
-		leftCalendarState.setValue(null);
-		rightCalendarState.setValue(null);
-		setRangeSelection({
-			start: null,
-			end: null,
-			isSelecting: false
-		});
-		setHoverDate(null);
-	};
-	const syncSelectionFromControlledValue = () => {
-		const currentValue = state.value;
-		if (!(currentValue != null && currentValue.start != null && currentValue.end != null)) {
-			syncCalendarStates(null);
-			return;
-		}
-		syncCalendarStates(currentValue);
-		const startDate_3 = currentValue.start;
-		const endDate_3 = currentValue.end;
-		leftCalendarState.setFocusedDate(startDate_3);
-		if (startDate_3.year === endDate_3.year && startDate_3.month === endDate_3.month) {
-			rightCalendarState.setFocusedDate(startDate_3.add({ months: 1 }));
-			return;
-		}
-		rightCalendarState.setFocusedDate(endDate_3);
-	};
-	useEffect(() => {
-		if (!state.isOpen) return;
-		syncSelectionFromControlledValue();
-	}, [state.isOpen]);
-	const onOpenChange = (_isOpen) => {
-		state.toggle();
-		syncSelectionFromControlledValue();
-	};
-	const onOpenDropdown = () => {
-		syncSelectionFromControlledValue();
-		state.toggle();
-	};
-	const todayDate_0 = today(effectiveTimeZone);
-	const getThisWeekRange = () => {
-		return {
-			start: startOfWeek(todayDate_0, locale),
-			end: endOfWeek(todayDate_0, locale)
-		};
-	};
-	const getLastWeekRange = () => {
-		const thisWeekStart = startOfWeek(todayDate_0, locale);
-		return {
-			start: thisWeekStart.subtract({ weeks: 1 }),
-			end: thisWeekStart.subtract({ days: 1 })
-		};
-	};
-	const getThisAndLastWeekRange = () => {
-		const thisWeekEnd = endOfWeek(todayDate_0, locale);
-		return {
-			start: startOfWeek(todayDate_0, locale).subtract({ weeks: 1 }),
-			end: thisWeekEnd
-		};
-	};
-	const getThisMonthRange = () => {
-		return {
-			start: startOfMonth(todayDate_0),
-			end: endOfMonth(todayDate_0)
-		};
-	};
-	const getThisAndLastMonthRange = () => {
-		const thisMonthEnd = endOfMonth(todayDate_0);
-		return {
-			start: startOfMonth(todayDate_0).subtract({ months: 1 }),
-			end: thisMonthEnd
-		};
-	};
-	const createPreset = (params) => {
-		let clampedValue_2 = clampRangeToBounds(params.getValue());
-		let isDisabled_0 = false;
-		if (params.keepEnabledUnlessFutureMin) {
-			let minDateIsInFuture = false;
-			if (minValue && minValue.compare(todayDate_0) > 0) minDateIsInFuture = true;
-			if (minDateIsInFuture) {
-				isDisabled_0 = true;
-				clampedValue_2 = null;
-			} else if (!clampedValue_2 && maxValue) clampedValue_2 = {
-				start: maxValue,
-				end: maxValue
-			};
-		}
-		if (!clampedValue_2) isDisabled_0 = true;
-		if (clampedValue_2 && !isRangeWithinBounds(clampedValue_2)) isDisabled_0 = true;
-		return {
-			label: params.label,
-			getValue: params.getValue,
-			clampedValue: clampedValue_2,
-			isDisabled: isDisabled_0
-		};
-	};
-	const presets = [
-		createPreset({
-			label: t(($_0) => $_0.ui.datePicker.presets.thisWeek, { ns: "ui" }),
-			getValue: getThisWeekRange
-		}),
-		createPreset({
-			label: t(($_1) => $_1.ui.datePicker.presets.lastWeek, { ns: "ui" }),
-			getValue: getLastWeekRange
-		}),
-		createPreset({
-			label: t(($_2) => $_2.ui.datePicker.presets.thisAndLastWeek, { ns: "ui" }),
-			getValue: getThisAndLastWeekRange
-		}),
-		createPreset({
-			label: t(($_3) => $_3.ui.datePicker.presets.thisMonth, { ns: "ui" }),
-			getValue: getThisMonthRange
-		}),
-		createPreset({
-			label: t(($_4) => $_4.ui.datePicker.presets.thisAndLastMonth, { ns: "ui" }),
-			getValue: getThisAndLastMonthRange
-		}),
-		createPreset({
-			label: t(($_5) => $_5.ui.datePicker.presets.thisYear, { ns: "ui" }),
-			getValue: () => ({
-				start: startOfYear(todayDate_0),
-				end: todayDate_0
-			})
-		}),
-		createPreset({
-			label: t(($_6) => $_6.ui.datePicker.presets.lastYear, { ns: "ui" }),
-			getValue: () => ({
-				start: startOfYear(todayDate_0.subtract({ years: 1 })),
-				end: endOfYear(todayDate_0.subtract({ years: 1 }))
-			})
-		}),
-		createPreset({
-			label: t(($_7) => $_7.ui.datePicker.presets.thisAndLastYear, { ns: "ui" }),
-			getValue: () => ({
-				start: startOfYear(todayDate_0.subtract({ years: 1 })),
-				end: todayDate_0
-			})
-		}),
-		createPreset({
-			label: t(($_8) => $_8.ui.datePicker.presets.soFar, { ns: "ui" }),
-			getValue: () => ({
-				start: startOfYear(todayDate_0),
-				end: todayDate_0
-			}),
-			keepEnabledUnlessFutureMin: true
-		})
-	];
-	const selectPreset = (preset) => {
-		if (preset.isDisabled || !preset.clampedValue) return;
-		setActivePreset(preset.label);
-		const presetValue = preset.clampedValue;
-		syncCalendarStates(presetValue);
-		const startDate_4 = presetValue.start;
-		leftCalendarState.setFocusedDate(startDate_4);
-		const endDate_4 = presetValue.end;
-		if ((endDate_4.year - startDate_4.year) * 12 + (endDate_4.month - startDate_4.month) > 2) rightCalendarState.setFocusedDate(endDate_4);
-		else {
-			const rightCalendarMonth = startDate_4.add({ months: 1 });
-			rightCalendarState.setFocusedDate(rightCalendarMonth);
-		}
-	};
-	return /* @__PURE__ */ jsx(TooltipWrapper, {
-		as,
-		error,
-		triggerTabIndex: as === "inline" ? -1 : void 0,
-		children: /* @__PURE__ */ jsxs(FormField, {
-			...formFieldProps,
-			as,
-			labelProps,
-			className: clsx("group relative inline-flex w-full flex-col text-left", className),
-			tabIndex: as === "inline" ? -1 : void 0,
-			children: [/* @__PURE__ */ jsx(DatePickerInput, {
-				ref: mergeRefs(ref, datePickerInputRef),
-				as,
-				groupProps,
-				fieldProps: {
-					...startFieldProps,
-					onChange: (date_5) => {
-						startFieldProps.onChange?.(date_5);
-						emitPartialRangeChange("start", date_5);
-					},
-					onBlur: (event_0) => {
-						startFieldProps.onBlur?.(event_0);
-						handleBlur(state.value);
-					}
-				},
-				endFieldProps: {
-					...endFieldProps,
-					onChange: (date_6) => {
-						endFieldProps.onChange?.(date_6);
-						emitPartialRangeChange("end", date_6);
-					},
-					onBlur: (event_1) => {
-						endFieldProps.onBlur?.(event_1);
-						handleBlur(state.value);
-					}
-				},
-				fieldValue: normalizedValue?.start ?? null,
-				endFieldValue: normalizedValue?.end ?? null,
-				isValueControlled: true,
-				hasValue: normalizedValue?.start != null || normalizedValue?.end != null,
-				buttonProps,
-				isDisabled,
-				isInvalid: !!error,
-				disableDropdown,
-				variant,
-				size,
-				isClearable,
-				headerProps,
-				todayIcon,
-				todayIconButtonSize,
-				todayIconButtonComponent,
-				todayIconPlacement,
-				isDirty,
-				disableManualEntry,
-				autoFixYear,
-				placeholder,
-				className: inputClassName,
-				onOpenDropdown,
-				timeZone: effectiveTimeZone,
-				onClear: onInputClear
-			}), /* @__PURE__ */ jsx(DateTimeDialog, {
-				hideSidebar,
-				sidebar: /* @__PURE__ */ jsx("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",
-					children: presets.map((preset_0) => /* @__PURE__ */ jsx(Button, {
-						isDisabled: preset_0.isDisabled,
-						onClick: () => selectPreset(preset_0),
-						className: clsx("w-full px-2 py-1 text-left md:px-list-side-item-left md:py-list-height-item disabled:text-interactive-text-secondary-disabled!", activePreset !== preset_0.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover", activePreset === preset_0.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"),
-						children: /* @__PURE__ */ jsx(Typography, {
-							size: "label-2",
-							sizeMobile: "label-3",
-							as: "span",
-							className: "whitespace-nowrap",
-							children: preset_0.label
-						})
-					}, preset_0.label))
-				}),
-				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
-					isDisabled,
-					isValid: !dialogState.isInvalid && !!dialogState.value,
-					onTodayPress,
-					onApply
-				}),
-				label,
-				triggerRef: dateRangePickerRef,
-				dialogProps,
-				isOpen: state.isOpen,
-				onOpenChange,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "mb-4 flex max-w-[804px] md:mb-0",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "flex flex-1 justify-center",
-						children: /* @__PURE__ */ jsx(RangeCalendar, {
-							leftCalendarState,
-							rightCalendarState,
-							calendarProps,
-							onApply,
-							onRangeChange: syncCalendarStates,
-							onDateSelection: handleDateSelection,
-							onDateHover: handleDateHover,
-							rangeSelection,
-							hoverDate,
-							onKeyboardNavigation: handleKeyboardNavigation
-						})
-					})
-				})
-			})]
-		})
-	});
-};
-var DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props }) => {
-	const ui = UIConfig.useConfig();
-	const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
-	const { locale } = useLocale$1();
-	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
-	const allowPartialRange = props.allowPartialRange ?? ui.dateInput.allowPartialRange;
-	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
-	const inputRef = useRef(null);
-	const { renderRealInput, replayStaticInputPress } = useStaticInputHandoff({
-		inputRef,
-		renderInput,
-		setRenderInput,
-		getFocusTarget: (input, staticTarget) => {
-			const container = input.getContainer?.() ?? input;
-			return container instanceof HTMLElement ? getStaticDateTimeFocusTarget(container, staticTarget) : null;
-		},
-		getPressTarget: (input_0) => {
-			const container_0 = input_0.getContainer?.() ?? input_0;
-			if (!(container_0 instanceof HTMLElement)) return null;
-			return container_0.querySelector("[data-static-press-action]");
-		}
-	});
-	const normalizedValue = props.value ?? null;
-	const formatDateRange = (range) => {
-		if (!range || !range.start && !range.end || !allowPartialRange && (!range.start || !range.end)) return null;
-		if (fullIso) return {
-			start: range.start ? DateTimeUtils.fromCalendarDateToUTCISO(range.start) : null,
-			end: range.end ? DateTimeUtils.fromCalendarDateToUTCISO(range.end, { endOfDay: true }) : null
-		};
-		const startDate = range.start ? DateTimeUtils.fromDateValueToLocal(range.start, "UTC") : null;
-		const endDate = range.end ? DateTimeUtils.fromDateValueToLocal(range.end, "UTC") : null;
-		return {
-			start: startDate ? DateTime.fromJSDate(startDate, { zone: "UTC" }).toISODate() : null,
-			end: endDate ? DateTime.fromJSDate(endDate, { zone: "UTC" }).toISODate() : null
-		};
-	};
-	const parseDateRange = (formattedRange) => {
-		if (!formattedRange || !formattedRange.start && !formattedRange.end || !allowPartialRange && (!formattedRange.start || !formattedRange.end)) return null;
-		if (fullIso) return {
-			start: formattedRange.start ? DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.start) : null,
-			end: formattedRange.end ? DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.end) : null
-		};
-		const startDate_0 = formattedRange.start ? DateTime.fromISO(formattedRange.start, { zone: "UTC" }).toJSDate() : null;
-		const endDate_0 = formattedRange.end ? DateTime.fromISO(formattedRange.end, { zone: "UTC" }).toJSDate() : null;
-		const startZonedDateTime = startDate_0 ? DateTimeUtils.fromLocalToZonedDateTime(startDate_0, "UTC") : null;
-		const endZonedDateTime = endDate_0 ? DateTimeUtils.fromLocalToZonedDateTime(endDate_0, "UTC") : null;
-		return {
-			start: startZonedDateTime ? toCalendarDate(startZonedDateTime) : null,
-			end: endZonedDateTime ? toCalendarDate(endZonedDateTime) : null
-		};
-	};
-	const parseCalendarDate = (formattedDate) => {
-		if (formattedDate == null) return null;
-		if (fullIso) return DateTimeUtils.fromUTCISOToCalendarDate(formattedDate);
-		const date = DateTime.fromISO(formattedDate, { zone: "UTC" }).toJSDate();
-		return toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date, "UTC"));
-	};
-	const dateLimits = {
-		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
-		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
-	};
-	if (!renderInput) {
-		const startDateValue = parseCalendarDate(normalizedValue?.start ?? null);
-		const endDateValue = parseCalendarDate(normalizedValue?.end ?? null);
-		const hasProvidedRangeValue = !!(normalizedValue?.start || normalizedValue?.end);
-		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		const isDisabled = isFormControlDisabled || !!props.isDisabled;
-		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
-		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
-		const todayIconButtonComponent = props.todayIconButtonComponent ?? ui.dateInput.todayIconButtonComponent;
-		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
-		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
-			isDisabled,
-			renderStatic: true,
-			size: todayIconButtonSize,
-			todayIconButtonComponent
-		});
-		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
-		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticSegments = getStaticDateRangeSegments({
-			start: startDateValue,
-			end: endDateValue,
-			locale,
-			shouldForceLeadingZeros,
-			isDisabled,
-			hidePlaceholder: as === "floating" && !hasProvidedRangeValue,
-			disableManualEntry,
-			placeholder: props.placeholder
-		});
-		return /* @__PURE__ */ jsx(InputFrame, {
-			...props,
-			onClear: () => props.onChange?.(null),
-			isDisabled,
-			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
-			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
-			contentClassName: "pr-0!",
-			contentWrapperClassName: datePickerInputContentRowCva({ size }),
-			contentGroup: "date-picker",
-			labelPlacement: "content-row",
-			dataAttributes: {
-				dataIsEmpty: !hasProvidedRangeValue,
-				dataIsFilled: hasProvidedRangeValue,
-				dataIsDirty: props.isDirty,
-				dataIsRequired: props.isRequired,
-				dataIsDisabled: isDisabled,
-				dataDisabled: isDisabled,
-				dataInvalid: !!props.error,
-				dataHasSelection: hasProvidedRangeValue
-			},
-			onStaticInteract: renderRealInput,
-			onStaticPress: replayStaticInputPress,
-			staticPressTarget: "action",
-			actionContent: staticTodayIcon,
-			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
-			showClear: hasProvidedRangeValue,
-			wrapContentAndTrailing: true,
-			contentAndTrailingClassName: "gap-2!",
-			trailingClassName: "py-0! pl-0!",
-			action: showDropdown ? {
-				icon: ui.dateInput.calendarIcon,
-				onClick: () => {},
-				altText: ""
-			} : void 0,
-			children: staticSegments
-		});
-	}
-	return /* @__PURE__ */ jsx(DateRangePickerBase, {
-		...props,
-		...dateLimits,
-		ref: mergeRefs(props.ref, inputRef),
-		value: parseDateRange(normalizedValue),
-		onChange: (value) => props.onChange?.(formatDateRange(value))
-	});
-};
-var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...props }) => {
-	if ("field" in props && props.field) {
-		const { field, ref, ...innerProps } = props;
-		const controlWithOptions = field.form;
-		return /* @__PURE__ */ jsx(FieldController, {
-			control: field.form,
-			name: field.name,
-			render: ({ field: field_0, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateRangePickerInner, {
-				...innerProps,
-				ref: mergeRefs(ref, field_0.ref),
-				value: field_0.value ?? null,
-				onChange: (value) => field_0.onChange(value ?? null),
-				onBlur: field_0.onBlur,
-				isDirty,
-				isDisabled: field_0.disabled || props.isDisabled,
-				isFormControlDisabled: !!controlWithOptions._options?.disabled,
-				error: props.error ?? error?.message,
-				fullIso,
-				minValue,
-				maxValue,
-				renderStaticInput
-			})
-		});
-	}
-	return /* @__PURE__ */ jsx(DateRangePickerInner, {
-		...props,
-		fullIso,
-		minValue,
-		maxValue,
-		renderStaticInput
-	});
-};
-//#endregion
-export { DateRangePicker };