@povio/ui 3.4.0-rc.19 → 3.4.0-rc.20

package/dist/DatePickerInput-C2z1kgaC.js

@@ -0,0 +1,598 @@
+import { t as createLucideIcon } from "./createLucideIcon-CskCrR9z.js";
+import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { r as FormFieldLabel } from "./FormField-DoGaUqFm.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { R as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $507fabe10e71c6fb$export$ffd9e5021c1fb2d6, t as $6179b936705e76d3$export$ae780daf29e6d456 } from "./useHover-DwfnacVy.js";
+import { b as $16f0b7bb276bc17e$export$5591b0b878c1a989, c as useFirefoxDateSegmentSelectionGuard, f as useDateFieldState, l as DateSegmentItem } from "./staticDateTimeSegments-CKL9PuGV.js";
+import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-Cq7t4Xxl.js";
+import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-CLFkoJMP.js";
+import { n as $9ab94262bd0047c7$export$420e68273165f4ec, t as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-DuXtCnJj.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import { IconButton } from "./components/icon-button.js";
+import { InlineIconButton } from "./components/inline-icon-button.js";
+import { r as InputClear } from "./TooltipWrapper-CLMp_zj4.js";
+import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-KYGD4Bdz.js";
+import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
+import { t as DateUtils } from "./date.utils-B8_QF9y6.js";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { CalendarDate, CalendarDateTime, createCalendar, getLocalTimeZone, isSameDay, today } from "@internationalized/date";
+import { useCalendarCell, useCalendarGrid } from "@react-aria/calendar";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+/**
+* @license lucide-react v1.28.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const Type = createLucideIcon("type", [
+	["path", {
+		d: "M12 4v16",
+		key: "1654pz"
+	}],
+	["path", {
+		d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2",
+		key: "e0r10z"
+	}],
+	["path", {
+		d: "M9 20h6",
+		key: "s66wpe"
+	}]
+]);
+//#endregion
+//#region src/components/inputs/DateTime/shared/CalendarCell.tsx
+const isRange = (state) => {
+	return "highlightedRange" in state;
+};
+const CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection = true, shouldCloseOnSelect = true, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props }) => {
+	const ref = useRef(null);
+	const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange, isFocused } = useCalendarCell(props, state, ref);
+	const { focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+	const onClick = useCallback((event) => {
+		buttonProps.onClick?.(event);
+		if (onDateSelection) onDateSelection(props.date);
+		if (shouldCloseOnSelect && !isDisabled && (shouldApplyOnDateSelection || isSelected)) onApply?.(props.date);
+	}, [
+		buttonProps,
+		onDateSelection,
+		props.date,
+		isDisabled,
+		shouldApplyOnDateSelection,
+		isSelected,
+		shouldCloseOnSelect,
+		onApply
+	]);
+	const onDoubleClick = useCallback((event) => {
+		if (isDisabled) return;
+		event.preventDefault();
+		onDoubleClickApply?.(props.date);
+	}, [
+		isDisabled,
+		onDoubleClickApply,
+		props.date
+	]);
+	const selectionState = useMemo(() => {
+		let isSelectionStart = false;
+		let isSelectionEnd = false;
+		let isSelectedCell = false;
+		let isInRange = false;
+		let isHoverRange = false;
+		let isSelectingMode = false;
+		if (rangeSelection?.start) {
+			isSelectionStart = isSameDay(props.date, rangeSelection.start);
+			isSelectionEnd = rangeSelection.end ? isSameDay(props.date, rangeSelection.end) : false;
+			isSelectedCell = isSelectionStart || isSelectionEnd;
+			isSelectingMode = rangeSelection.isSelecting && !rangeSelection.end;
+			if (rangeSelection.start && rangeSelection.end) {
+				const dateValue = props.date;
+				const isAfterStart = dateValue.compare(rangeSelection.start) > 0;
+				const isBeforeEnd = dateValue.compare(rangeSelection.end) < 0;
+				isInRange = isAfterStart && isBeforeEnd;
+			}
+			if (rangeSelection.isSelecting && rangeSelection.start && hoverDate && !rangeSelection.end) {
+				const dateValue = props.date;
+				const { start } = rangeSelection;
+				const end = hoverDate;
+				const earlierDate = start.compare(end) <= 0 ? start : end;
+				const laterDate = start.compare(end) <= 0 ? end : start;
+				const isAfterStart = dateValue.compare(earlierDate) > 0;
+				const isBeforeEnd = dateValue.compare(laterDate) < 0;
+				isHoverRange = isAfterStart && isBeforeEnd;
+			}
+		} else {
+			isSelectionStart = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.start) : isSelected;
+			isSelectionEnd = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.end) : isSelected;
+			isSelectedCell = isSelectionStart || isSelectionEnd || !isRange(state) && isSelected;
+			isInRange = isRange(state) && isSelected && !isSelectionStart && !isSelectionEnd;
+			if (isRange(state) && state.highlightedRange && !isSelected) {
+				const dateValue = props.date;
+				const isAfterStart = dateValue.compare(state.highlightedRange.start) > 0;
+				const isBeforeEnd = dateValue.compare(state.highlightedRange.end) < 0;
+				isHoverRange = isAfterStart && isBeforeEnd;
+			}
+		}
+		return {
+			isSelectionStart,
+			isSelectionEnd,
+			isSelectedCell,
+			isInRange,
+			isHoverRange,
+			isSelectingMode
+		};
+	}, [
+		props.date,
+		rangeSelection,
+		state,
+		isSelected,
+		hoverDate
+	]);
+	const handleEvent = (event, eventHandler) => {
+		if (isOutsideVisibleRange) {
+			state.selectDate(props.date);
+			state.setFocusedDate(props.date);
+		}
+		eventHandler?.(event);
+		if (isSelected && shouldCloseOnSelect) onApply?.(props.date);
+	};
+	const onMouseEnter = useCallback(() => {
+		if (onDateHover && selectionState.isSelectingMode) onDateHover(props.date);
+	}, [
+		onDateHover,
+		selectionState.isSelectingMode,
+		props.date
+	]);
+	const onMouseLeave = useCallback(() => {
+		if (onDateHover && selectionState.isSelectingMode) onDateHover(null);
+	}, [onDateHover, selectionState.isSelectingMode]);
+	const cellClassName = useMemo(() => {
+		const { isSelectedCell, isInRange, isHoverRange, isSelectingMode, isSelectionStart, isSelectionEnd } = selectionState;
+		return clsx("mx-auto flex h-10 w-full max-w-10 items-center justify-center rounded-button-rounding-m p-2", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", "border border-transparent border-solid", !isSelectedCell && !isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-idle", !isSelectedCell && isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-disabled", isSelectedCell && !isOutsideVisibleRange && "bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle", isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionStart && !isSelectionEnd && "rounded-r-none", isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionEnd && !isSelectionStart && "rounded-l-none", isDisabled && !isOutsideVisibleRange && "cursor-default", isDisabled && "opacity-20", !isSelectedCell && !isInRange && !isHoverRange && !isSelectingMode && !isDisabled && !isOutsideVisibleRange && "[@media(pointer:fine)]:hover:border-elevation-outline-default-1 [@media(pointer:fine)]:hover:text-interactive-text-secondary-hover", isInRange && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover", isHoverRange && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover", !isInRange && !isSelectedCell && isSelectingMode && "hover:bg-interactive-contained-primary-idle hover:text-interactive-text-primary-idle-inverted", isSelectingMode && !isSelectedCell && !isInRange && !isHoverRange && !isDisabled && !isOutsideVisibleRange && "transition-all duration-75 hover:border-elevation-outline-default-1", isFocused && !isSelectedCell && !isDisabled && !isOutsideVisibleRange && "ring-2 ring-inset ring-interactive-contained-primary-focus");
+	}, [
+		selectionState,
+		isOutsideVisibleRange,
+		rangeSelection,
+		isDisabled,
+		isFocused
+	]);
+	return /* @__PURE__ */ jsx("td", {
+		...cellProps,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			...$3ef42575df84b30b$export$9d1611c77c2fe928(buttonProps, focusProps),
+			"aria-disabled": void 0,
+			onMouseEnter,
+			onMouseLeave,
+			className: cellClassName,
+			onClick: (e) => handleEvent(e, onClick),
+			onDoubleClick,
+			onKeyDown: (e) => handleEvent(e, () => onKeyboardNavigation?.(e, props.date)),
+			children: /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				size: "label-2",
+				className: "block w-6 overflow-hidden text-ellipsis text-center",
+				children: formattedDate
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/inputs/DateTime/shared/CalendarGrid.tsx
+const WEEK_INDICES = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5
+];
+const NO_CALENDAR_OFFSET = {};
+const CalendarGrid = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection, shouldCloseOnSelect, offset = NO_CALENDAR_OFFSET, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props }) => {
+	const { gridProps, headerProps, weekDays } = useCalendarGrid({
+		...props,
+		weekdayStyle: "short"
+	}, state);
+	const startDate = state.visibleRange.start.add(offset);
+	const handleDateSelection = (date) => {
+		onDateSelection?.(date, calendarSide);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("h-72 w-full px-3 py-1 md:w-80", className),
+		children: /* @__PURE__ */ jsxs("table", {
+			...gridProps,
+			cellPadding: "0",
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx("thead", {
+				...headerProps,
+				children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day) => /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx(Typography, {
+					size: "label-2",
+					className: "bg-elevation-fill-default-1 py-2 text-interactive-text-secondary-idle",
+					children: day.substring(0, 2)
+				}) }, day)) })
+			}), /* @__PURE__ */ jsx("tbody", { children: WEEK_INDICES.map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, {
+				state,
+				date,
+				onApply,
+				onDoubleClickApply,
+				shouldApplyOnDateSelection,
+				shouldCloseOnSelect,
+				onDateSelection: handleDateSelection,
+				onDateHover,
+				rangeSelection,
+				hoverDate,
+				onKeyboardNavigation
+			}, i) : /* @__PURE__ */ jsx("td", {}, i)) }, weekIndex)) })]
+		})
+	});
+};
+//#endregion
+//#region src/components/inputs/DateTime/shared/DateField.tsx
+const omitNullValue = ({ value: _value, ...props }) => props;
+const DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, segmentGroup, shouldAutoFixYear = false, preserveNullValue = false, ...props }) => {
+	const { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	const previousValueRef = useRef(props.value);
+	const dateFieldProps = props.value == null && !preserveNullValue ? omitNullValue(props) : props;
+	const state = useDateFieldState({
+		...dateFieldProps,
+		isDisabled,
+		isReadOnly: disableManualEntry,
+		locale,
+		createCalendar
+	});
+	const dataFieldRef = useRef(null);
+	const { fieldProps } = $16f0b7bb276bc17e$export$5591b0b878c1a989({
+		...dateFieldProps,
+		isDisabled,
+		isReadOnly: disableManualEntry
+	}, state, dataFieldRef);
+	const isSegmentVisible = useCallback((segmentType) => {
+		if (dateGranularity === "day") return true;
+		if (dateGranularity === "month") return segmentType !== "day";
+		if (dateGranularity === "year") return segmentType === "year";
+		return true;
+	}, [dateGranularity]);
+	const getSegmentsToRender = useCallback(() => {
+		const segments = [];
+		for (const segment of state.segments) if (segment.type !== "literal") {
+			if (isSegmentVisible(segment.type)) segments.push(segment);
+		} else if (segments.length > 0 && segments.at(-1)?.type !== "literal") segments.push(segment);
+		return segments;
+	}, [state.segments, isSegmentVisible]);
+	const segmentsToRender = useMemo(() => getSegmentsToRender(), [getSegmentsToRender]);
+	const getSegmentNumber = (segment) => {
+		if (!segment) return null;
+		if (typeof segment.value === "number" && !Number.isNaN(segment.value)) return segment.value;
+		const parsedValue = parseInt(segment.text ?? "");
+		return Number.isNaN(parsedValue) ? null : parsedValue;
+	};
+	const autoFixYear = () => {
+		const monthSegment = state.segments.find((segment) => segment.type === "month");
+		const daySegment = state.segments.find((segment) => segment.type === "day");
+		const yearSegment = state.segments.find((segment) => segment.type === "year");
+		const hourSegment = state.segments.find((segment) => segment.type === "hour");
+		const minuteSegment = state.segments.find((segment) => segment.type === "minute");
+		const isMonthFilled = monthSegment && !monthSegment.isPlaceholder;
+		const isDayFilled = daySegment && !daySegment.isPlaceholder;
+		const isYearFilled = yearSegment && !yearSegment.isPlaceholder && yearSegment.text?.length > 0;
+		const isYearComplete = isYearFilled && yearSegment.text?.length === 4;
+		const isYearEmpty = yearSegment && !(parseInt(yearSegment.text) && yearSegment.text?.length === 4);
+		const isDateFilled = isMonthFilled && isDayFilled && isYearFilled;
+		const isHourEmpty = hourSegment && (hourSegment.isPlaceholder || Number.isNaN(parseInt(hourSegment.text ?? "", 10)));
+		const isMinuteEmpty = minuteSegment && (minuteSegment.isPlaceholder || Number.isNaN(parseInt(minuteSegment.text ?? "", 10)));
+		const month = getSegmentNumber(monthSegment);
+		const day = getSegmentNumber(daySegment);
+		const segmentYear = getSegmentNumber(yearSegment);
+		let correctedValue = null;
+		if (!isTimeOptional && isDateFilled && minuteSegment && isMinuteEmpty) {
+			let minute = minuteSegment?.value || 0;
+			if (minuteSegment?.text?.length && minuteSegment?.text?.length > 0) {
+				minute = parseInt(minuteSegment?.text ?? "00");
+				if (isNaN(minute)) minute = 0;
+			}
+			state.setSegment("minute", minute);
+		}
+		if (!isTimeOptional && isDateFilled && hourSegment && isHourEmpty) {
+			let hour = hourSegment?.value || 0;
+			if (hourSegment?.text?.length && hourSegment?.text?.length > 0) {
+				hour = parseInt(hourSegment?.text ?? "00");
+				if (isNaN(hour)) hour = 0;
+			}
+			state.setSegment("hour", hour);
+		}
+		if (shouldAutoFixYear && isMonthFilled && isDayFilled && isYearEmpty) {
+			let correctedYear = (/* @__PURE__ */ new Date()).getFullYear();
+			if (yearSegment?.text?.length && yearSegment?.text?.length === 2) correctedYear = parseInt(`20${yearSegment?.text}`);
+			state.setSegment("year", correctedYear);
+			const hasDateSegments = month !== null && day !== null;
+			const hasTimeSegment = !!(hourSegment || minuteSegment);
+			if (state.value) correctedValue = state.value.set({ year: correctedYear });
+			else if (hasDateSegments && hasTimeSegment) correctedValue = new CalendarDateTime(correctedYear, month, day, getSegmentNumber(hourSegment) ?? 0, getSegmentNumber(minuteSegment) ?? 0);
+			else if (hasDateSegments) correctedValue = new CalendarDate(correctedYear, month, day);
+		}
+		if (isTimeOptional && !state.value && isMonthFilled && isDayFilled && isYearComplete && hourSegment?.isPlaceholder && minuteSegment?.isPlaceholder && month !== null && day !== null && segmentYear !== null) correctedValue = new CalendarDateTime(segmentYear, month, day, 0, 0, 0, 0);
+		const valueToCorrect = correctedValue ?? state.value;
+		if (!valueToCorrect) return;
+		const { year } = valueToCorrect;
+		if (shouldAutoFixYear && year >= 0 && year <= 99) {
+			const correctedYear = year <= 50 ? 2e3 + year : 1900 + year;
+			correctedValue = valueToCorrect.set({ year: correctedYear });
+		}
+		if (correctedValue) {
+			state.setValue(correctedValue);
+			props.onChange?.(correctedValue);
+		}
+	};
+	const handleBlur = (e) => {
+		if ((shouldAutoFixYear || isTimeOptional) && !e.currentTarget.contains(e.relatedTarget)) autoFixYear();
+		fieldProps.onBlur?.(e);
+	};
+	useImperativeHandle(ref, () => ({
+		clearField: () => {
+			state.setValue(null);
+		},
+		autoFixYear
+	}));
+	useEffect(() => {
+		if (previousValueRef.current != null && props.value == null && state.value !== null) state.setValue(null);
+		previousValueRef.current = props.value;
+	}, [props.value, state]);
+	useEffect(() => {
+		onClearChange?.(state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false));
+	}, [state.segments, onClearChange]);
+	const getFormattedDisplayValue = () => {
+		if (!disableManualEntry) return null;
+		if (!format) return null;
+		if (!state.value) return null;
+		const jsDate = DateTimeUtils.fromDateValueToLocal(state.value, timeZone);
+		if (Number.isNaN(jsDate.getTime())) return null;
+		return DateUtils.formatDate(jsDate, format);
+	};
+	const formattedDisplayValue = getFormattedDisplayValue();
+	let fieldContent = /* @__PURE__ */ jsx(Fragment$1, { children: segmentsToRender.map((segment, i) => /* @__PURE__ */ jsx(DateSegmentItem, {
+		segment,
+		segmentGroup,
+		state,
+		isDisabled,
+		hidePlaceholder
+	}, i)) });
+	if (formattedDisplayValue) fieldContent = /* @__PURE__ */ jsx("span", {
+		className: clsx("select-none", isDisabled && "text-interactive-text-secondary-disabled"),
+		children: formattedDisplayValue
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...fieldProps,
+		ref: dataFieldRef,
+		onBlur: handleBlur,
+		className: clsx("relative w-full", disableManualEntry && "pointer-events-none"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex",
+			children: fieldContent
+		})
+	});
+};
+//#endregion
+//#region src/components/inputs/DateTime/shared/datePickerInput.cva.ts
+const datePickerInputContentRowDefinition = UIOverrides.defineConfig({
+	base: ["flex items-center gap-input-gap-input-text-to-elements"],
+	config: {
+		variants: { size: {
+			"extra-small": "",
+			small: "",
+			default: "",
+			large: ""
+		} },
+		defaultVariants: { size: "default" }
+	}
+});
+//#endregion
+//#region src/components/inputs/DateTime/shared/datePickerTodayIcon.tsx
+const getDatePickerTodayIcon = (todayIcon) => {
+	if (!todayIcon) return null;
+	return todayIcon === true ? /* @__PURE__ */ jsx("span", {
+		className: "grid size-6 shrink-0 place-items-center",
+		children: /* @__PURE__ */ jsx(Type, {
+			className: "size-4",
+			strokeWidth: 2.5
+		})
+	}) : todayIcon;
+};
+const renderDatePickerTodayIcon = (todayIcon, options) => {
+	const icon = getDatePickerTodayIcon(todayIcon);
+	if (!icon) return;
+	const { className, isDisabled, onPress, renderStatic, size = "none", todayIconButtonComponent = "iconButton" } = options ?? {};
+	const buttonProps = {
+		label: "",
+		icon,
+		size,
+		isDisabled,
+		onPress
+	};
+	if (todayIconButtonComponent === "inlineIconButton") return /* @__PURE__ */ jsx(InlineIconButton, {
+		...buttonProps,
+		staticRender: renderStatic,
+		className: className ?? "relative z-raised !border-none"
+	});
+	return /* @__PURE__ */ jsx(IconButton, {
+		...buttonProps,
+		className: className ?? "relative z-raised"
+	});
+};
+//#endregion
+//#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
+const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, isClearableIfDisabled, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, onClear: onClearProp, ...props }) => {
+	const uiConfig = UIConfig.useConfig();
+	const timeZone = timeZoneProp ?? uiConfig.dateInput.timeZone;
+	let effectiveTimeZone = getLocalTimeZone();
+	if (timeZone !== "clientLocal") effectiveTimeZone = timeZone;
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
+	const [canClear, setCanClear] = useState(false);
+	const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({ isDisabled });
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({ onFocusWithinChange: (isFocusWithin) => {
+		setIsFocused(isFocusWithin);
+		if (!isFocusWithin && autoFixYear) {
+			dateFieldRef.current?.autoFixYear();
+			endDateFieldRef.current?.autoFixYear();
+		}
+	} });
+	const { isFocusVisible } = $507fabe10e71c6fb$export$ffd9e5021c1fb2d6();
+	const dateFieldRef = useRef(null);
+	const endDateFieldRef = useRef(null);
+	const containerRef = useRef(null);
+	useFirefoxDateSegmentSelectionGuard(containerRef);
+	const normalizedFieldProps = {
+		...fieldProps,
+		value: isValueControlled ? fieldValue ?? null : fieldProps.value ?? null,
+		shouldAutoFixYear: autoFixYear
+	};
+	const normalizedEndFieldProps = endFieldProps ? {
+		...endFieldProps,
+		value: isValueControlled ? endFieldValue ?? null : endFieldProps.value ?? null,
+		shouldAutoFixYear: autoFixYear
+	} : void 0;
+	const clearInput = useCallback(() => {
+		if (onClearProp) onClearProp();
+		else {
+			dateFieldRef.current?.clearField();
+			endDateFieldRef.current?.clearField();
+			fieldProps.onChange?.(null);
+			endFieldProps?.onChange?.(null);
+		}
+		setCanClear(false);
+	}, [
+		endFieldProps,
+		fieldProps,
+		onClearProp
+	]);
+	useImperativeHandle(ref, () => ({
+		clear: clearInput,
+		getContainer: () => containerRef.current
+	}), [clearInput]);
+	const onClearChange = useCallback((canClearInput) => {
+		setCanClear(canClearInput);
+	}, []);
+	const showClear = (!isDisabled || isClearableIfDisabled === true) && (canClear || hasValue || normalizedFieldProps.value != null || normalizedEndFieldProps?.value != null);
+	const isTodayIconDisabled = isDisabled || buttonProps.isDisabled;
+	const onToday = () => {
+		if (isTodayIconDisabled) return;
+		if (isDateTime) {
+			const calendarDateTime = DateTimeUtils.getCurrentWallClockCalendarDateTime();
+			fieldProps.onChange?.(calendarDateTime);
+			if (endFieldProps) endFieldProps.onChange?.(calendarDateTime);
+		} else {
+			fieldProps.onChange?.(today(effectiveTimeZone));
+			if (endFieldProps) endFieldProps.onChange?.(today(effectiveTimeZone));
+		}
+	};
+	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
+	const todayIconButton = renderDatePickerTodayIcon(todayIcon, {
+		isDisabled: isTodayIconDisabled,
+		onPress: onToday,
+		size: todayIconButtonSize,
+		todayIconButtonComponent
+	});
+	const shouldRenderTodayIconWithFieldLabel = todayIconPlacement === "fieldLabel";
+	const pickerIcon = isDateTime ? uiConfig.dateInput.dateTimeIcon : uiConfig.dateInput.calendarIcon;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		...groupProps,
+		...focusWithinProps,
+		...hoverProps,
+		className: clsx("group group/date-picker-content relative flex items-center justify-between gap-2", shouldShrinkInput ? "min-w-0" : "min-w-input-width-min-width", groupProps.className, inputBaseCva({
+			variant,
+			as,
+			...props
+		}), className),
+		"data-rac": "",
+		"data-datetime-input": "",
+		"data-hovered": isHovered || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-is-disabled": isDisabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		"data-is-empty": normalizedFieldProps.value == null || void 0,
+		"data-focus-within": isFocused || void 0,
+		"data-focus-visible": isFocused && isFocusVisible || void 0,
+		"data-has-selection": normalizedFieldProps.value != null || void 0,
+		"data-is-dirty": isDirty || void 0,
+		"data-is-required": isRequired || void 0,
+		"data-is-filled": normalizedFieldProps.value != null || void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx("flex items-center gap-input-gap-input-text-to-elements pr-0!", shouldShrinkInput ? "min-w-0 flex-1 w-full" : "w-full", inputSizeCva({
+				size,
+				as
+			})),
+			children: [
+				as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					...headerProps
+				}),
+				shouldRenderTodayIconWithFieldLabel && todayIconButton,
+				/* @__PURE__ */ jsxs("div", {
+					className: datePickerInputContentRowCva({ size }),
+					children: [
+						disableManualEntry && /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+							onPress: onOpenDropdown,
+							className: "absolute inset-0 z-base",
+							isDisabled
+						}),
+						!shouldRenderTodayIconWithFieldLabel && todayIconButton,
+						disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
+							size: "label-1",
+							className: "text-text-default-3",
+							children: placeholder
+						}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DateField, {
+							ref: dateFieldRef,
+							...normalizedFieldProps,
+							isDisabled,
+							isInvalid,
+							onClearChange,
+							hidePlaceholder,
+							disableManualEntry,
+							dateGranularity,
+							isTimeOptional,
+							preserveNullValue: isValueControlled && !endFieldProps,
+							format,
+							timeZone: effectiveTimeZone,
+							segmentGroup: normalizedEndFieldProps ? "start" : void 0
+						}), normalizedEndFieldProps && /* @__PURE__ */ jsxs(Fragment$1, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
+							className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
+							children: "–"
+						}), /* @__PURE__ */ jsx(DateField, {
+							ref: endDateFieldRef,
+							...normalizedEndFieldProps,
+							isDisabled,
+							isInvalid,
+							onClearChange,
+							hidePlaceholder,
+							disableManualEntry,
+							isTimeOptional,
+							format,
+							timeZone: effectiveTimeZone,
+							segmentGroup: "end"
+						})] })] })
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
+				onClear: clearInput,
+				show: showClear
+			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
+				label: "",
+				color: "secondary",
+				...buttonProps,
+				icon: pickerIcon,
+				isDisabled,
+				className: "border-0!",
+				"data-static-press-action": ""
+			})]
+		})]
+	});
+};
+//#endregion
+export { CalendarGrid as i, renderDatePickerTodayIcon as n, datePickerInputContentRowDefinition as r, DatePickerInput as t };