@povio/ui 3.4.0-rc.14 → 3.4.0-rc.16

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

@@ -16,17 +16,16 @@ import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
 import { clsx } from "clsx";
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 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 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, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, allowPartialRange: allowPartialRangeProp, minValue, maxValue, ...rest } = props;
@@ -100,8 +99,8 @@ var DateRangePickerBase = (props) => {
 		};
 		fieldRangeRef.current = partialRange;
 		if (partialRange.start && partialRange.end) return;
-		const newValue_0 = partialRange.start || partialRange.end ? partialRange : null;
-		onChange?.(newValue_0);
+		const newValue = partialRange.start || partialRange.end ? partialRange : null;
+		onChange?.(newValue);
 	};
 	const { locale } = useLocale$1();
 	useImperativeHandle(ref, () => ({
@@ -110,8 +109,8 @@ var DateRangePickerBase = (props) => {
 		},
 		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
 	}));
-	const handleBlur = (newValue_1) => {
-		onBlur?.({ target: { value: newValue_1 } });
+	const handleBlur = (newValue) => {
+		onBlur?.({ target: { value: newValue } });
 	};
 	const formFieldProps = {
 		error: error || validationRangeError,
@@ -163,9 +162,9 @@ var DateRangePickerBase = (props) => {
 		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;
+	const isDateOutsideBounds = useCallback((date) => {
+		if (minValue && date.compare(minValue) < 0) return true;
+		if (maxValue && date.compare(maxValue) > 0) return true;
 		return false;
 	}, [minValue, maxValue]);
 	const clampRangeToBounds = useCallback((range) => {
@@ -184,15 +183,15 @@ var DateRangePickerBase = (props) => {
 			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;
+	const isRangeWithinBounds = useCallback((range) => {
+		if (minValue && range.start.compare(minValue) < 0) return false;
+		if (maxValue && range.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) {
+	const isValidRange = useCallback((newValue) => {
+		if (newValue?.start && newValue?.end) {
+			const startDate = newValue.start;
+			if (newValue.end.compare(startDate) < 0) {
 				setValidationRangeError(t(($) => $.ui.datePicker.errors.endDateBeforeStart, { ns: "ui" }));
 				return true;
 			}
@@ -200,17 +199,17 @@ var DateRangePickerBase = (props) => {
 		} else setValidationRangeError(void 0);
 		return false;
 	}, [t]);
-	const handleCalendarStatesChange = (newValue_3) => {
-		if (newValue_3) {
-			const clampedValue = clampRangeToBounds(newValue_3);
+	const handleCalendarStatesChange = (newValue) => {
+		if (newValue) {
+			const clampedValue = clampRangeToBounds(newValue);
 			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);
+			const startDate = clampedValue.start;
+			const endDate = clampedValue.end;
+			leftCalendarState.setFocusedDate(startDate);
+			if (startDate.year === endDate.year && startDate.month === endDate.month) rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
+			else rightCalendarState.setFocusedDate(endDate);
 			leftCalendarState.setValue(clampedValue);
 			rightCalendarState.setValue(clampedValue);
 			setRangeSelection({
@@ -234,33 +233,33 @@ var DateRangePickerBase = (props) => {
 			setActivePreset(null);
 		}
 	};
-	const throttledSetHoverDate = useCallback((date_1) => {
+	const throttledSetHoverDate = useCallback((date) => {
 		requestAnimationFrame(() => {
-			setHoverDate(date_1);
+			setHoverDate(date);
 		});
 	}, []);
-	const handleDateHover = useCallback((date_2) => {
-		if (rangeSelection.isSelecting && rangeSelection.start) throttledSetHoverDate(date_2);
+	const handleDateHover = useCallback((date) => {
+		if (rangeSelection.isSelecting && rangeSelection.start) throttledSetHoverDate(date);
 	}, [
 		rangeSelection.isSelecting,
 		rangeSelection.start,
 		throttledSetHoverDate
 	]);
-	const handleDateSelection = useCallback((date_3, calendarSide) => {
+	const handleDateSelection = useCallback((date, 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 }));
+			if (date.month !== currentVisibleMonth.month || date.year !== currentVisibleMonth.year) if (calendarSide === "left") {
+				leftCalendarState.setFocusedDate(date);
+				rightCalendarState.setFocusedDate(date.add({ months: 1 }));
 			} else {
-				rightCalendarState.setFocusedDate(date_3);
-				leftCalendarState.setFocusedDate(date_3.subtract({ months: 1 }));
+				rightCalendarState.setFocusedDate(date);
+				leftCalendarState.setFocusedDate(date.subtract({ months: 1 }));
 			}
 		}
-		if (isDateOutsideBounds(date_3)) return;
+		if (isDateOutsideBounds(date)) return;
 		if (!rangeSelection.isSelecting || !rangeSelection.start) {
 			setRangeSelection({
-				start: date_3,
+				start: date,
 				end: null,
 				isSelecting: true
 			});
@@ -269,11 +268,12 @@ var DateRangePickerBase = (props) => {
 			rightCalendarState.setValue(null);
 		} else {
 			const { start } = rangeSelection;
-			const end = date_3;
-			const clampedRange = clampRangeToBounds({
+			const end = date;
+			const newRange = {
 				start: start.compare(end) <= 0 ? start : end,
 				end: start.compare(end) <= 0 ? end : start
-			});
+			};
+			const clampedRange = clampRangeToBounds(newRange);
 			if (!clampedRange) return;
 			leftCalendarState.setValue(clampedRange);
 			rightCalendarState.setValue(clampedRange);
@@ -294,16 +294,16 @@ var DateRangePickerBase = (props) => {
 		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;
+	const handleKeyboardNavigation = useCallback((event, date, calendarSide) => {
+		const currentState = calendarSide === "left" ? leftCalendarState : rightCalendarState;
+		const otherState = calendarSide === "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) {
+				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);
 					shouldPreventDefault = true;
 				} else {
@@ -313,10 +313,10 @@ var DateRangePickerBase = (props) => {
 				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) {
+				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);
 					shouldPreventDefault = true;
 				} else {
@@ -326,10 +326,10 @@ var DateRangePickerBase = (props) => {
 				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) {
+				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);
 					shouldPreventDefault = true;
 				} else {
@@ -339,10 +339,10 @@ var DateRangePickerBase = (props) => {
 				break;
 			}
 			case "ArrowUp": {
-				const prevWeekDate = date_4.subtract({ weeks: 1 });
-				const currentMonth = currentState_0.visibleRange.start;
+				const prevWeekDate = date.subtract({ weeks: 1 });
+				const currentMonth = currentState.visibleRange.start;
 				const otherMonth = otherState.visibleRange.start;
-				if (calendarSide_0 === "right" && prevWeekDate.month !== currentMonth.month) if (prevWeekDate.year === otherMonth.year && prevWeekDate.month === otherMonth.month) {
+				if (calendarSide === "right" && prevWeekDate.month !== currentMonth.month) if (prevWeekDate.year === otherMonth.year && prevWeekDate.month === otherMonth.month) {
 					otherState.setFocusedDate(prevWeekDate);
 					shouldPreventDefault = true;
 				} else {
@@ -353,7 +353,7 @@ var DateRangePickerBase = (props) => {
 			}
 			case "Enter":
 			case " ":
-				handleDateSelection(date_4);
+				handleDateSelection(date);
 				shouldPreventDefault = true;
 				break;
 			case "Escape":
@@ -364,8 +364,6 @@ var DateRangePickerBase = (props) => {
 				});
 				setHoverDate(null);
 				shouldPreventDefault = true;
-				break;
-			default: break;
 		}
 		if (shouldPreventDefault) {
 			event.preventDefault();
@@ -377,8 +375,8 @@ var DateRangePickerBase = (props) => {
 		rightCalendarState,
 		handleDateSelection
 	]);
-	const syncCalendarStates = useCallback((newValue_4) => {
-		if (newValue_4 === null) {
+	const syncCalendarStates = useCallback((newValue) => {
+		if (newValue === null) {
 			setValidationRangeError(void 0);
 			leftCalendarState.setValue(null);
 			rightCalendarState.setValue(null);
@@ -391,15 +389,15 @@ var DateRangePickerBase = (props) => {
 			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);
+		const clampedValue = clampRangeToBounds(newValue);
+		if (!clampedValue) return;
+		if (isValidRange(clampedValue)) return;
+		leftCalendarState.setValue(clampedValue);
+		rightCalendarState.setValue(clampedValue);
+		dialogState.setValue(clampedValue);
 		setRangeSelection({
-			start: clampedValue_0.start,
-			end: clampedValue_0.end,
+			start: clampedValue.start,
+			end: clampedValue.end,
 			isSelecting: false
 		});
 		setHoverDate(null);
@@ -417,10 +415,10 @@ var DateRangePickerBase = (props) => {
 			end: rangeSelection.end
 		};
 		if (valueToApply) {
-			const clampedValue_1 = clampRangeToBounds(valueToApply);
-			if (clampedValue_1) {
-				valueToApply = clampedValue_1;
-				state.setValue(clampedValue_1);
+			const clampedValue = clampRangeToBounds(valueToApply);
+			if (clampedValue) {
+				valueToApply = clampedValue;
+				state.setValue(clampedValue);
 			}
 		}
 		state.toggle();
@@ -432,11 +430,11 @@ var DateRangePickerBase = (props) => {
 			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);
+		const startDate = clampedTodayRange.start;
+		const endDate = clampedTodayRange.end;
+		leftCalendarState.setFocusedDate(startDate);
+		if (startDate.year === endDate.year && startDate.month === endDate.month) rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
+		else rightCalendarState.setFocusedDate(endDate);
 		syncCalendarStates(clampedTodayRange);
 	};
 	const onInputClear = () => {
@@ -459,14 +457,14 @@ var DateRangePickerBase = (props) => {
 			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 }));
+		const startDate = currentValue.start;
+		const endDate = currentValue.end;
+		leftCalendarState.setFocusedDate(startDate);
+		if (startDate.year === endDate.year && startDate.month === endDate.month) {
+			rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
 			return;
 		}
-		rightCalendarState.setFocusedDate(endDate_3);
+		rightCalendarState.setFocusedDate(endDate);
 	};
 	useEffect(() => {
 		if (!state.isOpen) return;
@@ -480,110 +478,110 @@ var DateRangePickerBase = (props) => {
 		syncSelectionFromControlledValue();
 		state.toggle();
 	};
-	const todayDate_0 = today(effectiveTimeZone);
+	const todayDate = today(effectiveTimeZone);
 	const getThisWeekRange = () => {
 		return {
-			start: startOfWeek(todayDate_0, locale),
-			end: endOfWeek(todayDate_0, locale)
+			start: startOfWeek(todayDate, locale),
+			end: endOfWeek(todayDate, locale)
 		};
 	};
 	const getLastWeekRange = () => {
-		const thisWeekStart = startOfWeek(todayDate_0, locale);
+		const thisWeekStart = startOfWeek(todayDate, locale);
 		return {
 			start: thisWeekStart.subtract({ weeks: 1 }),
 			end: thisWeekStart.subtract({ days: 1 })
 		};
 	};
 	const getThisAndLastWeekRange = () => {
-		const thisWeekEnd = endOfWeek(todayDate_0, locale);
+		const thisWeekEnd = endOfWeek(todayDate, locale);
 		return {
-			start: startOfWeek(todayDate_0, locale).subtract({ weeks: 1 }),
+			start: startOfWeek(todayDate, locale).subtract({ weeks: 1 }),
 			end: thisWeekEnd
 		};
 	};
 	const getThisMonthRange = () => {
 		return {
-			start: startOfMonth(todayDate_0),
-			end: endOfMonth(todayDate_0)
+			start: startOfMonth(todayDate),
+			end: endOfMonth(todayDate)
 		};
 	};
 	const getThisAndLastMonthRange = () => {
-		const thisMonthEnd = endOfMonth(todayDate_0);
+		const thisMonthEnd = endOfMonth(todayDate);
 		return {
-			start: startOfMonth(todayDate_0).subtract({ months: 1 }),
+			start: startOfMonth(todayDate).subtract({ months: 1 }),
 			end: thisMonthEnd
 		};
 	};
 	const createPreset = (params) => {
-		let clampedValue_2 = clampRangeToBounds(params.getValue());
-		let isDisabled_0 = false;
+		let clampedValue = clampRangeToBounds(params.getValue());
+		let isDisabled = false;
 		if (params.keepEnabledUnlessFutureMin) {
 			let minDateIsInFuture = false;
-			if (minValue && minValue.compare(todayDate_0) > 0) minDateIsInFuture = true;
+			if (minValue && minValue.compare(todayDate) > 0) minDateIsInFuture = true;
 			if (minDateIsInFuture) {
-				isDisabled_0 = true;
-				clampedValue_2 = null;
-			} else if (!clampedValue_2 && maxValue) clampedValue_2 = {
+				isDisabled = true;
+				clampedValue = null;
+			} else if (!clampedValue && maxValue) clampedValue = {
 				start: maxValue,
 				end: maxValue
 			};
 		}
-		if (!clampedValue_2) isDisabled_0 = true;
-		if (clampedValue_2 && !isRangeWithinBounds(clampedValue_2)) isDisabled_0 = true;
+		if (!clampedValue) isDisabled = true;
+		if (clampedValue && !isRangeWithinBounds(clampedValue)) isDisabled = true;
 		return {
 			label: params.label,
 			getValue: params.getValue,
-			clampedValue: clampedValue_2,
-			isDisabled: isDisabled_0
+			clampedValue,
+			isDisabled
 		};
 	};
 	const presets = [
 		createPreset({
-			label: t(($_0) => $_0.ui.datePicker.presets.thisWeek, { ns: "ui" }),
+			label: t(($) => $.ui.datePicker.presets.thisWeek, { ns: "ui" }),
 			getValue: getThisWeekRange
 		}),
 		createPreset({
-			label: t(($_1) => $_1.ui.datePicker.presets.lastWeek, { ns: "ui" }),
+			label: t(($) => $.ui.datePicker.presets.lastWeek, { ns: "ui" }),
 			getValue: getLastWeekRange
 		}),
 		createPreset({
-			label: t(($_2) => $_2.ui.datePicker.presets.thisAndLastWeek, { ns: "ui" }),
+			label: t(($) => $.ui.datePicker.presets.thisAndLastWeek, { ns: "ui" }),
 			getValue: getThisAndLastWeekRange
 		}),
 		createPreset({
-			label: t(($_3) => $_3.ui.datePicker.presets.thisMonth, { ns: "ui" }),
+			label: t(($) => $.ui.datePicker.presets.thisMonth, { ns: "ui" }),
 			getValue: getThisMonthRange
 		}),
 		createPreset({
-			label: t(($_4) => $_4.ui.datePicker.presets.thisAndLastMonth, { ns: "ui" }),
+			label: t(($) => $.ui.datePicker.presets.thisAndLastMonth, { ns: "ui" }),
 			getValue: getThisAndLastMonthRange
 		}),
 		createPreset({
-			label: t(($_5) => $_5.ui.datePicker.presets.thisYear, { ns: "ui" }),
+			label: t(($) => $.ui.datePicker.presets.thisYear, { ns: "ui" }),
 			getValue: () => ({
-				start: startOfYear(todayDate_0),
-				end: todayDate_0
+				start: startOfYear(todayDate),
+				end: todayDate
 			})
 		}),
 		createPreset({
-			label: t(($_6) => $_6.ui.datePicker.presets.lastYear, { ns: "ui" }),
+			label: t(($) => $.ui.datePicker.presets.lastYear, { ns: "ui" }),
 			getValue: () => ({
-				start: startOfYear(todayDate_0.subtract({ years: 1 })),
-				end: endOfYear(todayDate_0.subtract({ years: 1 }))
+				start: startOfYear(todayDate.subtract({ years: 1 })),
+				end: endOfYear(todayDate.subtract({ years: 1 }))
 			})
 		}),
 		createPreset({
-			label: t(($_7) => $_7.ui.datePicker.presets.thisAndLastYear, { ns: "ui" }),
+			label: t(($) => $.ui.datePicker.presets.thisAndLastYear, { ns: "ui" }),
 			getValue: () => ({
-				start: startOfYear(todayDate_0.subtract({ years: 1 })),
-				end: todayDate_0
+				start: startOfYear(todayDate.subtract({ years: 1 })),
+				end: todayDate
 			})
 		}),
 		createPreset({
-			label: t(($_8) => $_8.ui.datePicker.presets.soFar, { ns: "ui" }),
+			label: t(($) => $.ui.datePicker.presets.soFar, { ns: "ui" }),
 			getValue: () => ({
-				start: startOfYear(todayDate_0),
-				end: todayDate_0
+				start: startOfYear(todayDate),
+				end: todayDate
 			}),
 			keepEnabledUnlessFutureMin: true
 		})
@@ -593,12 +591,12 @@ var DateRangePickerBase = (props) => {
 		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);
+		const startDate = presetValue.start;
+		leftCalendarState.setFocusedDate(startDate);
+		const endDate = presetValue.end;
+		if ((endDate.year - startDate.year) * 12 + (endDate.month - startDate.month) > 2) rightCalendarState.setFocusedDate(endDate);
 		else {
-			const rightCalendarMonth = startDate_4.add({ months: 1 });
+			const rightCalendarMonth = startDate.add({ months: 1 });
 			rightCalendarState.setFocusedDate(rightCalendarMonth);
 		}
 	};
@@ -618,23 +616,23 @@ var DateRangePickerBase = (props) => {
 				groupProps,
 				fieldProps: {
 					...startFieldProps,
-					onChange: (date_5) => {
-						startFieldProps.onChange?.(date_5);
-						emitPartialRangeChange("start", date_5);
+					onChange: (date) => {
+						startFieldProps.onChange?.(date);
+						emitPartialRangeChange("start", date);
 					},
-					onBlur: (event_0) => {
-						startFieldProps.onBlur?.(event_0);
+					onBlur: (event) => {
+						startFieldProps.onBlur?.(event);
 						handleBlur(state.value);
 					}
 				},
 				endFieldProps: {
 					...endFieldProps,
-					onChange: (date_6) => {
-						endFieldProps.onChange?.(date_6);
-						emitPartialRangeChange("end", date_6);
+					onChange: (date) => {
+						endFieldProps.onChange?.(date);
+						emitPartialRangeChange("end", date);
 					},
-					onBlur: (event_1) => {
-						endFieldProps.onBlur?.(event_1);
+					onBlur: (event) => {
+						endFieldProps.onBlur?.(event);
 						handleBlur(state.value);
 					}
 				},
@@ -667,18 +665,18 @@ var DateRangePickerBase = (props) => {
 				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: presets.map((preset) => /* @__PURE__ */ jsx(Button, {
+						isDisabled: preset.isDisabled,
+						onClick: () => selectPreset(preset),
+						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.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"),
 						children: /* @__PURE__ */ jsx(Typography, {
 							size: "label-2",
 							sizeMobile: "label-3",
 							as: "span",
 							className: "whitespace-nowrap",
-							children: preset_0.label
+							children: preset.label
 						})
-					}, preset_0.label))
+					}, preset.label))
 				}),
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -713,7 +711,7 @@ var DateRangePickerBase = (props) => {
 		})
 	});
 };
-var DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props }) => {
+const DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
 	const { locale } = useLocale$1();
@@ -729,10 +727,10 @@ var DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticIn
 			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]");
+		getPressTarget: (input) => {
+			const container = input.getContainer?.() ?? input;
+			if (!(container instanceof HTMLElement)) return null;
+			return container.querySelector("[data-static-press-action]");
 		}
 	});
 	const normalizedValue = props.value ?? null;
@@ -745,8 +743,8 @@ var DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticIn
 		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
+			start: startDate ? startDate.toISOString().slice(0, 10) : null,
+			end: endDate ? endDate.toISOString().slice(0, 10) : null
 		};
 	};
 	const parseDateRange = (formattedRange) => {
@@ -755,25 +753,30 @@ var DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticIn
 			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;
+		const startDate = formattedRange.start ? /* @__PURE__ */ new Date(`${formattedRange.start}T00:00:00.000Z`) : null;
+		const endDate = formattedRange.end ? /* @__PURE__ */ new Date(`${formattedRange.end}T00:00:00.000Z`) : null;
+		const startZonedDateTime = startDate ? DateTimeUtils.fromLocalToZonedDateTime(startDate, "UTC") : null;
+		const endZonedDateTime = endDate ? DateTimeUtils.fromLocalToZonedDateTime(endDate, "UTC") : null;
 		return {
 			start: startZonedDateTime ? toCalendarDate(startZonedDateTime) : null,
 			end: endZonedDateTime ? toCalendarDate(endZonedDateTime) : null
 		};
 	};
-	const parseCalendarDate = (formattedDate) => {
+	const parseCalendarDate = useCallback((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 = {
+		const date = /* @__PURE__ */ new Date(`${formattedDate}T00:00:00.000Z`);
+		const zonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(date, "UTC");
+		return toCalendarDate(zonedDateTime);
+	}, [fullIso]);
+	const dateLimits = useMemo(() => ({
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
-	};
+	}), [
+		minValue,
+		maxValue,
+		parseCalendarDate
+	]);
 	if (!renderInput) {
 		const startDateValue = parseCalendarDate(normalizedValue?.start ?? null);
 		const endDateValue = parseCalendarDate(normalizedValue?.end ?? null);
@@ -848,21 +851,21 @@ var DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticIn
 		onChange: (value) => props.onChange?.(formatDateRange(value))
 	});
 };
-var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...props }) => {
+const DateRangePickerComponent = ({ 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, {
+			render: ({ field, 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,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value ?? null,
+				onChange: (value) => field.onChange(value ?? null),
+				onBlur: field.onBlur,
 				isDirty,
-				isDisabled: field_0.disabled || props.isDisabled,
+				isDisabled: field.disabled || props.isDisabled,
 				isFormControlDisabled: !!controlWithOptions._options?.disabled,
 				error: props.error ?? error?.message,
 				fullIso,
@@ -880,5 +883,6 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		renderStaticInput
 	});
 };
+const DateRangePicker = memo(DateRangePickerComponent);
 //#endregion
 export { DateRangePicker };