@persona/design-system 0.1.7 → 0.1.8

package/dist/DatePicker-DY1YA_Fu.mjs

@@ -0,0 +1,922 @@
+import { isDisabled, isFocused, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { focusWithinOutline } from "./mixins/focus.mjs";
+import inputMixin from "./mixins/input.mjs";
+import { t as Card_default } from "./Card-BMCB9eFC.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
+import { t as IconButton } from "./IconButton-CIWiEsS-.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-CPYXo61N.mjs";
+import { t as ClearButton } from "./Input-BFI_e7aU.mjs";
+import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
+import { a as FormLabel } from "./FormControl-B28qa7aQ.mjs";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
+import { ArrowLeftIcon, ArrowRightIcon, CircleXInverseIcon } from "@persona/icons";
+import { range } from "lodash/fp.js";
+import { VisuallyHidden, mergeProps, useButton, useCalendar, useCalendarCell, useCalendarGrid, useDateFormatter, useDatePicker, useDateRangePicker, useFocusWithin, useLocale, usePress, useRangeCalendar } from "react-aria";
+import { useCalendarState, useDatePickerState, useDateRangePickerState, useRangeCalendarState } from "react-stately";
+import { Settings } from "luxon";
+import { mergeRefs } from "@react-aria/utils";
+import { CalendarDate, GregorianCalendar, endOfMonth, endOfYear, getWeeksInMonth, isSameDay, isSameMonth, parseAbsolute, startOfMonth, startOfYear, toCalendarDateTime, today } from "@internationalized/date";
+import { useDateField, useDateSegment } from "@react-aria/datepicker";
+import { useLocale as useLocale$1 } from "@react-aria/i18n";
+import { useDateFieldState } from "@react-stately/datepicker";
+//#region components/DatePicker/Calendar/CalendarBase.tsx
+const CalendarContainer = styled.div`
+  display: inline-block;
+`;
+const CalendarHeader = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${Spacing[2]};
+`;
+const CalendarHeading = styled.div`
+  ${Typography.TextLargeBold};
+  flex: 1;
+  text-align: center;
+`;
+const StyledCalendarButton = styled(IconButton)`
+  width: 32px;
+  height: 32px;
+`;
+const CalendarButton = (props) => {
+	const ref = useRef();
+	const { buttonProps } = useButton(props, ref);
+	return /* @__PURE__ */ jsx(StyledCalendarButton, {
+		...buttonProps,
+		className: props.className,
+		ref,
+		children: props.children
+	});
+};
+//#endregion
+//#region components/DatePicker/Calendar/CalendarCell.tsx
+const CalendarCellContainer = styled.td`
+  text-align: center;
+  width: 38px;
+  height: 38px;
+  padding: 0px;
+`;
+const CalendarCellButton = styled.button`
+  ${Typography.TextMedium};
+  border-style: none;
+  padding: 0;
+  background: none;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  position: relative;
+
+  ${({ isSelected }) => isSelected && css`
+      background: ${Color.CorePurple100};
+    `}
+
+  ${({ isSelectionStart }) => isSelectionStart && css`
+      background: ${Color.BackgroundButtonPrimary};
+      color: ${Color.TextInverse};
+      border-top-left-radius: ${BorderRadius.Sm};
+      border-bottom-left-radius: ${BorderRadius.Sm};
+    `}
+
+  ${({ isSelectionEnd }) => isSelectionEnd && css`
+      background: ${Color.BackgroundButtonPrimary};
+      color: ${Color.TextInverse};
+      border-top-right-radius: ${BorderRadius.Sm};
+      border-bottom-right-radius: ${BorderRadius.Sm};
+    `}
+
+  ${({ isDisabled }) => isDisabled && css`
+      color: ${Color.CoreSlate300};
+    `}
+
+  ${({ isInvalid }) => isInvalid && css`
+      background: ${Color.BackgroundButtonDanger};
+      color: ${Color.TextInverse};
+    `}
+
+  &:focus-visible {
+    outline: 2px solid ${Color.BorderFocus};
+    outline-offset: -2px;
+    box-shadow: ${Color.PrimaryWhite} 0px 0px 0px 3px inset;
+    z-index: 1;
+  }
+`;
+const CalendarCell = ({ state, date, currentMonth }) => {
+	const ref = useRef();
+	const { cellProps, buttonProps, isSelected, isInvalid, isDisabled, formattedDate } = useCalendarCell({ date }, state, ref);
+	const highlightedRange = "highlightedRange" in state && state.highlightedRange;
+	const isOutsideMonth = !isSameMonth(currentMonth, date);
+	const isSelectionStart = highlightedRange ? isSameDay(date, highlightedRange.start) : isSelected;
+	const isSelectionEnd = highlightedRange ? isSameDay(date, highlightedRange.end) : isSelected;
+	return /* @__PURE__ */ jsx(CalendarCellContainer, {
+		...cellProps,
+		children: /* @__PURE__ */ jsx(CalendarCellButton, {
+			...buttonProps,
+			hidden: isOutsideMonth,
+			isSelected,
+			isSelectionStart,
+			isSelectionEnd,
+			isInvalid,
+			isDisabled,
+			ref,
+			children: formattedDate
+		})
+	});
+};
+//#endregion
+//#region components/DatePicker/Calendar/CalendarGrid.tsx
+const CalendarGridContainer = styled.table`
+  width: 266px;
+  border-spacing: 0px;
+  border-collapse: collapse;
+
+  &:focus-visible {
+    outline: 2px solid ${Color.BorderFocus};
+    outline-offset: 1px;
+  }
+`;
+const CalendarGridDayHeader = styled.th`
+  ${Typography.TextMedium};
+  color: ${Color.TextSecondary};
+`;
+const CalendarGrid = ({ state, offset = {}, skipFromTabOrder = false }) => {
+	const { locale } = useLocale();
+	const startDate = state.visibleRange.start.add(offset);
+	const { gridProps, headerProps, weekDays } = useCalendarGrid({
+		startDate,
+		endDate: endOfMonth(startDate)
+	}, state);
+	const weeksInMonth = getWeeksInMonth(startDate, locale);
+	return /* @__PURE__ */ jsxs(CalendarGridContainer, {
+		...skipFromTabOrder ? {
+			...gridProps,
+			tabIndex: -1
+		} : gridProps,
+		children: [/* @__PURE__ */ jsx("thead", {
+			...headerProps,
+			children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx(CalendarGridDayHeader, { children: day }, index)) })
+		}), /* @__PURE__ */ jsx("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, {
+			state,
+			date,
+			currentMonth: startDate
+		}, i) : /* @__PURE__ */ jsx("td", {}, i)) }, weekIndex)) })]
+	});
+};
+//#endregion
+//#region components/DatePicker/common.ts
+const createCalendar = () => new GregorianCalendar();
+//#endregion
+//#region components/DatePicker/Calendar/Calendar.tsx
+const Calendar = (props) => {
+	const { locale } = useLocale();
+	const state = useCalendarState({
+		...props,
+		locale,
+		createCalendar
+	});
+	const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(props, state);
+	return /* @__PURE__ */ jsxs(CalendarContainer, {
+		...calendarProps,
+		ref: props.calendarRef,
+		children: [/* @__PURE__ */ jsxs(CalendarHeader, { children: [
+			/* @__PURE__ */ jsx(CalendarButton, {
+				...prevButtonProps,
+				children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+			}),
+			/* @__PURE__ */ jsx(CalendarHeading, { children: title }),
+			/* @__PURE__ */ jsx(CalendarButton, {
+				...nextButtonProps,
+				children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+			})
+		] }), /* @__PURE__ */ jsx(CalendarGrid, { state })]
+	});
+};
+//#endregion
+//#region components/DatePicker/DateField.tsx
+const DateSegmentContainer = styled.div`
+  font-variant-numeric: tabular-nums;
+  box-sizing: content-box;
+  text-align: end;
+
+  ${isFocused} {
+    outline: 2px solid ${Color.BorderFocus};
+    outline-offset: 1px;
+    background-color: ${Color.CorePurple200};
+  }
+
+  ${({ $isComma, $isTimezone }) => ($isComma || $isTimezone) && css`
+      margin-left: 0.25ch;
+      margin-right: 0.25ch;
+    `}
+
+  ${({ $isTimezone }) => $isTimezone && css`
+      color: ${Color.TextSecondary};
+      pointer-events: none;
+
+      &:focus {
+        outline: none;
+        background-color: transparent;
+      }
+    `}
+`;
+const DateSegmentPlaceholder = styled.span`
+  display: block;
+  width: 100%;
+  pointer-events: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  ${({ isPlaceholder }) => isPlaceholder ? css`
+          height: 100%;
+          color: ${({ theme }) => theme.color.text.tertiary};
+        ` : css`
+          visibility: hidden;
+          height: 0;
+        `}
+  ${({ type }) => type === "literal" && css`
+      padding-left: ${Spacing[1]};
+      padding-right: ${Spacing[1]};
+    `}
+  ${({ type, isPlaceholder }) => type === "month" && isPlaceholder && css`
+      width: 3ch;
+    `}
+`;
+function DateSegment({ segment, state }) {
+	const ref = useRef();
+	const { segmentProps } = useDateSegment(segment, state, ref);
+	let minWidth;
+	switch (segment.type) {
+		case "dayPeriod":
+			minWidth = "2.75ch";
+			break;
+		default:
+			minWidth = `${segment.maxValue != null && String(segment.maxValue).length + .25}ch`;
+			break;
+	}
+	const isComma = segment.type === "literal" && segment.text === ", ";
+	const isTimezone = segment.type === "timeZoneName";
+	return /* @__PURE__ */ jsxs(DateSegmentContainer, {
+		...segmentProps,
+		ref,
+		style: {
+			...segmentProps.style,
+			minWidth
+		},
+		$isComma: isComma,
+		$isTimezone: isTimezone,
+		...isTimezone && {
+			tabIndex: -1,
+			role: "presentation"
+		},
+		children: [segment.placeholder && /* @__PURE__ */ jsx(DateSegmentPlaceholder, {
+			"aria-hidden": "true",
+			isPlaceholder: segment.isPlaceholder,
+			type: segment.type,
+			children: segment.placeholder
+		}), segment.isPlaceholder ? "" : segment.text]
+	});
+}
+const InputBox = styled.div`
+  ${inputMixin};
+  display: flex;
+  padding-left: ${Spacing[2]};
+  padding-right: ${Spacing[2]};
+  line-height: 1;
+  position: relative;
+
+  &${isFocusedVisible}${isNotDisabled} {
+    position: relative;
+    z-index: 1;
+  }
+
+  ${focusWithinOutline}
+
+  ${({ $inputPosition }) => {
+	switch ($inputPosition) {
+		case "start": return css`
+          border-top-right-radius: 0px;
+          border-bottom-right-radius: 0px;
+        `;
+		case "end": return css`
+          margin-left: -1px;
+          border-top-left-radius: 0px;
+          border-bottom-left-radius: 0px;
+        `;
+	}
+}}
+`;
+const DateField = forwardRef(function DateField(props, forwardedRef) {
+	const { locale } = useLocale$1();
+	const state = useDateFieldState({
+		...props,
+		locale,
+		createCalendar
+	});
+	const ref = useRef();
+	const { fieldProps } = useDateField(props, state, ref);
+	return /* @__PURE__ */ jsx(InputBox, {
+		...fieldProps,
+		...props.dateFieldProps || {},
+		ref: mergeRefs(ref, forwardedRef),
+		focused: props.focused,
+		disabled: props.disabled,
+		"aria-label": props["aria-label"],
+		$size: props.size ?? "md",
+		$inputPosition: props.inputPosition,
+		hasError: props.hasError,
+		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, {
+			segment,
+			state
+		}, i))
+	});
+});
+//#endregion
+//#region components/DatePicker/DatePicker.tsx
+const OpenButton$1 = ({ calendarRef }) => {
+	const openCalBtnRef = useRef(null);
+	const { buttonProps } = useButton({ onPress: () => {
+		if (calendarRef.current) calendarRef.current.querySelector("button[aria-label=\"Previous\"]").focus();
+	} }, openCalBtnRef);
+	return /* @__PURE__ */ jsx("button", {
+		...buttonProps,
+		ref: openCalBtnRef,
+		"aria-label": "Open calendar"
+	});
+};
+const DatePicker = (props) => {
+	const state = useDatePickerState(props);
+	const ref = useRef(null);
+	const fieldRef = useRef(null);
+	const { groupProps, fieldProps, calendarProps } = useDatePicker(props, state, ref);
+	const calendarRef = useRef(null);
+	const [isClosing, setIsClosing] = useState(false);
+	const { focusWithinProps } = useFocusWithin({
+		onFocusWithin: () => {
+			if (!state.isOpen && !isClosing) state.setOpen(true);
+		},
+		onBlurWithin: (e) => {
+			if (e.relatedTarget && !calendarRef?.current?.contains(e.relatedTarget) && state.isOpen) state.setOpen(false);
+		}
+	});
+	const handleOutsideClick = (e) => {
+		const target = e.target;
+		if (ref.current?.contains(target)) return;
+		if (state.isOpen) state.setOpen(false);
+	};
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter" && !state.isOpen) {
+			event.preventDefault();
+			state.setOpen(true);
+		}
+	}, [state]);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		children: /* @__PURE__ */ jsxs(Popover_default, {
+			open: state.isOpen,
+			modal: false,
+			contentProps: {
+				style: { zIndex: props.useModalZIndex ? Z_INDICES.modalDropdown : Z_INDICES.dropdown },
+				align: "start",
+				"aria-modal": true,
+				onInteractOutside: handleOutsideClick,
+				onEscapeKeyDown: () => {
+					state.setOpen(false);
+				},
+				onCloseAutoFocus: (e) => {
+					e.preventDefault();
+					setIsClosing(true);
+					if (fieldRef.current) {
+						const firstEditableSegment = fieldRef.current.querySelector("[tabindex=\"0\"]");
+						if (firstEditableSegment instanceof HTMLElement) firstEditableSegment.focus();
+					}
+					requestAnimationFrame(() => setIsClosing(false));
+				},
+				noPadding: true
+			},
+			children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("div", {
+					...mergeProps(groupProps, focusWithinProps),
+					ref,
+					style: {
+						display: "flex",
+						position: "relative"
+					},
+					children: [/* @__PURE__ */ jsx(DateField, {
+						ref: fieldRef,
+						id: props.id,
+						dateFieldProps: props.dateFieldProps,
+						disabled: props.disabled,
+						size: props.size,
+						...mergeProps(fieldProps, { onKeyDown: handleKeyDown }),
+						value: fieldProps.value ?? void 0
+					}), /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(OpenButton$1, { calendarRef }) })]
+				})
+			}), /* @__PURE__ */ jsx(Calendar, {
+				...calendarProps,
+				autoFocus: void 0,
+				calendarRef,
+				id: "calendar-popover"
+			})]
+		})
+	});
+};
+//#endregion
+//#region components/DatePicker/Calendar/RangeCalendarPresets.tsx
+const getDefaultPresets = (tz) => {
+	const now = today(tz);
+	return [
+		{
+			label: "Last 7 days",
+			range: {
+				start: now.subtract({ days: 7 }),
+				end: now
+			}
+		},
+		{
+			label: "Last 14 days",
+			range: {
+				start: now.subtract({ days: 14 }),
+				end: now
+			}
+		},
+		{
+			label: "Last 30 days",
+			range: {
+				start: now.subtract({ days: 30 }),
+				end: now
+			}
+		},
+		{
+			label: "This month",
+			range: {
+				start: startOfMonth(now),
+				end: now
+			}
+		},
+		{
+			label: "Last month",
+			range: {
+				start: startOfMonth(now.subtract({ months: 1 })),
+				end: endOfMonth(now.subtract({ months: 1 }))
+			}
+		},
+		{
+			label: "This year",
+			range: {
+				start: startOfYear(now),
+				end: now
+			}
+		},
+		{
+			label: "Last year",
+			range: {
+				start: startOfYear(now.subtract({ years: 1 })),
+				end: endOfYear(now.subtract({ years: 1 }))
+			}
+		}
+	];
+};
+/**
+* Compare two date values by year/month/day only, ignoring time components.
+*/
+const datesMatchByDay = (a, b) => a.year === b.year && a.month === b.month && a.day === b.day;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledPresetButton = styled(MenuItem)`
+  ${({ selected }) => !selected && css`
+      &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {
+        background-color: transparent;
+      }
+    `}
+
+  &:focus-visible {
+    // MenuItems default to outline: none, so we need to override it here.
+    outline: 2px solid ${Color.BorderFocus} !important;
+    outline-offset: 1px;
+  }
+`;
+const PresetButton = ({ state, preset, isSelected, setDateMode, ...props }) => {
+	const ref = useRef();
+	const { buttonProps } = useButton({ onPress: () => {
+		state.setValue(preset.range);
+		setDateMode(null);
+	} }, ref);
+	const { "aria-current": _ariaCurrent, ...mergedProps } = mergeProps(props, buttonProps);
+	return /* @__PURE__ */ jsx(StyledPresetButton, {
+		selected: isSelected,
+		...mergedProps,
+		ref,
+		children: preset.label
+	});
+};
+const DateRangePickerPresets = ({ presetsFn = getDefaultPresets, state, setDateMode, ...props }) => {
+	const presets = presetsFn(Settings.defaultZone.name);
+	const { value } = state;
+	const selectedPresetIndex = value ? presets.findIndex((preset) => datesMatchByDay(preset.range.start, value.start) && datesMatchByDay(preset.range.end, value.end)) : -1;
+	return /* @__PURE__ */ jsx(Container, {
+		...props,
+		children: /* @__PURE__ */ jsx(MenuList, {
+			"aria-label": "Date range presets",
+			children: presets.map((preset, i) => /* @__PURE__ */ jsx(PresetButton, {
+				preset,
+				state,
+				setDateMode,
+				isSelected: i === selectedPresetIndex
+			}, i))
+		})
+	});
+};
+const arePropsEqual = (prevProps, nextProps) => {
+	const prevValue = prevProps.state.value;
+	const nextValue = nextProps.state.value;
+	if (!prevValue && !nextValue) return true;
+	if (!prevValue || !nextValue) return false;
+	return prevValue.start.compare(nextValue.start) === 0 && prevValue.end.compare(nextValue.end) === 0;
+};
+var RangeCalendarPresets_default = memo(DateRangePickerPresets, arePropsEqual);
+//#endregion
+//#region components/DatePicker/Calendar/RangeCalendar.tsx
+const RangeCalendarHeader = styled(CalendarHeader)`
+  gap: ${Spacing[5]};
+`;
+const CalendarHeaderMonth = styled.div`
+  display: grid;
+  grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
+  grid-template-areas: 'prev title next';
+  width: 266px;
+  align-items: center;
+`;
+const CalendarGrids = styled.div`
+  display: flex;
+  gap: ${Spacing[5]};
+  align-items: start;
+`;
+const PrevButton = styled(CalendarButton)`
+  grid-area: prev;
+  justify-self: start;
+  border-radius: ${BorderRadius.Sm};
+`;
+const NextButton = styled(CalendarButton)`
+  grid-area: next;
+  justify-self: end;
+  border-radius: ${BorderRadius.Sm};
+`;
+const RangeCalendarHeading = styled(CalendarHeading)`
+  grid-area: title;
+`;
+const RangeCalendarContainer = styled.div`
+  display: flex;
+`;
+const PresetsContainer = styled(Card_default.Body)`
+  border-right: 1px solid ${Color.BorderHairline};
+`;
+const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePresets, setDateMode, setValue, granularity, ...props }) => {
+	const visibleMonths = 2;
+	const { locale } = useLocale();
+	const timezoneName = Settings.defaultZone.name;
+	const rangeCalendarState = useRangeCalendarState({
+		...props,
+		minValue: minDate,
+		maxValue: maxDate,
+		visibleDuration: { months: visibleMonths },
+		locale,
+		createCalendar
+	});
+	const state = {
+		...rangeCalendarState,
+		setValue: (value) => {
+			if (!value || granularity === "day") {
+				rangeCalendarState.setValue(value);
+				return;
+			}
+			setValue({
+				start: toCalendarDateTime(value.start),
+				end: toCalendarDateTime(value.end)
+			});
+		},
+		selectDate: (date) => {
+			if (onSelectDate) {
+				onSelectDate(date);
+				rangeCalendarState.setAnchorDate(null);
+			} else rangeCalendarState.selectDate(date);
+		}
+	};
+	const ref = useRef();
+	const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(props, state, ref);
+	const monthDateFormatter = useDateFormatter({
+		month: "long",
+		year: "numeric",
+		timeZone: timezoneName
+	});
+	const monthHeaders = range(0, visibleMonths).map((i) => {
+		return /* @__PURE__ */ jsxs(CalendarHeaderMonth, { children: [
+			i === 0 && /* @__PURE__ */ jsx(PrevButton, {
+				...prevButtonProps,
+				children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+			}),
+			/* @__PURE__ */ jsx(RangeCalendarHeading, {
+				"aria-hidden": true,
+				children: monthDateFormatter.format(state.visibleRange.start.add({ months: i }).toDate(timezoneName))
+			}),
+			i === visibleMonths - 1 && /* @__PURE__ */ jsx(NextButton, {
+				...nextButtonProps,
+				children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+			})
+		] }, `calendar-month-${i}`);
+	});
+	const monthGrids = range(0, visibleMonths).map((i) => {
+		return /* @__PURE__ */ jsx(CalendarGrid, {
+			state,
+			offset: { months: i },
+			skipFromTabOrder: i > 0
+		}, `calendar-grid-${i}`);
+	});
+	return /* @__PURE__ */ jsxs(RangeCalendarContainer, {
+		ref: calendarRef,
+		children: [!hidePresets && /* @__PURE__ */ jsx(PresetsContainer, {
+			padding: Spacing[3],
+			children: /* @__PURE__ */ jsx(RangeCalendarPresets_default, {
+				state,
+				setDateMode
+			})
+		}), /* @__PURE__ */ jsx(Card_default.Body, {
+			padding: Spacing[3],
+			children: /* @__PURE__ */ jsxs(CalendarContainer, {
+				...calendarProps,
+				ref,
+				children: [/* @__PURE__ */ jsxs(RangeCalendarHeader, { children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+					isFocusable: false,
+					children: calendarProps["aria-label"]
+				}), monthHeaders] }), /* @__PURE__ */ jsx(CalendarGrids, { children: monthGrids })]
+			})
+		})]
+	});
+};
+//#endregion
+//#region components/DatePicker/DateRangePicker.tsx
+const DateRangeContainer = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const DateRangeInputs = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const CustomFormLabel = styled(FormLabel)`
+  margin-bottom: ${Spacing[2]};
+  ${Typography.TextMediumBold};
+`;
+const OpenButton = ({ onOpen, disabled }) => {
+	const openCalBtnRef = useRef(null);
+	const { buttonProps } = useButton({
+		isDisabled: disabled,
+		onPress: onOpen
+	}, openCalBtnRef);
+	return /* @__PURE__ */ jsx("button", {
+		...buttonProps,
+		type: "button",
+		ref: openCalBtnRef,
+		"aria-label": "Open calendar",
+		tabIndex: -1
+	});
+};
+const ClearRangeButton = styled(ClearButton)`
+  height: 16px;
+  width: 16px;
+  margin-left: ${Spacing[2]};
+
+  &${isDisabled}, &:disabled {
+    background-color: transparent;
+  }
+`;
+const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className, calendarZIndex, portalContainer, ...props }) => {
+	const state = useDateRangePickerState({
+		granularity,
+		hideTimeZone,
+		...props
+	});
+	const ref = useRef(null);
+	const startFieldRef = useRef(null);
+	const endFieldRef = useRef(null);
+	const calendarRef = useRef(null);
+	const [dateMode, setDateMode] = useState(null);
+	const [isClosing, setIsClosing] = useState(false);
+	const { groupProps, startFieldProps, endFieldProps, calendarProps, labelProps } = useDateRangePicker({
+		granularity,
+		hideTimeZone,
+		...props
+	}, state, ref);
+	const focusCalendar = useCallback(() => {
+		requestAnimationFrame(() => {
+			(calendarRef.current?.querySelector("[role=\"menuitem\"], button:not(:disabled), [tabindex=\"0\"]"))?.focus();
+		});
+	}, []);
+	const openCalendar = useCallback(() => {
+		if (!props.disabled && !state.isOpen && !isClosing) state.setOpen(true);
+	}, [
+		isClosing,
+		props.disabled,
+		state
+	]);
+	const openCalendarWithFocus = useCallback(() => {
+		openCalendar();
+		focusCalendar();
+	}, [focusCalendar, openCalendar]);
+	useEffect(() => {
+		if (!props.dateRange.startDate || !props.dateRange.endDate) return;
+		if (!props.dateRange.startDate.isValid || !props.dateRange.endDate.isValid) return;
+		const startDate = props.dateRange.startDate.setZone(Settings.defaultZone);
+		const endDate = props.dateRange.endDate.setZone(Settings.defaultZone);
+		if (!startDate.isValid || !endDate.isValid) return;
+		const dateRangeV2 = {
+			start: state.hasTime ? parseAbsolute(startDate.toISO(), Settings.defaultZone.name) : new CalendarDate(startDate.year, startDate.month, startDate.day),
+			end: state.hasTime ? parseAbsolute(endDate.toISO(), Settings.defaultZone.name) : new CalendarDate(endDate.year, endDate.month, endDate.day)
+		};
+		state.setValue(dateRangeV2);
+	}, [
+		props.dateRange.startDate,
+		props.dateRange.endDate,
+		granularity
+	]);
+	const prevValueRef = useRef(state.value);
+	useEffect(() => {
+		const prevValue = prevValueRef.current;
+		const currentValue = state.value;
+		prevValueRef.current = currentValue;
+		const startChanged = prevValue?.start && currentValue?.start ? prevValue.start.compare(currentValue.start) !== 0 : prevValue?.start !== currentValue?.start;
+		const endChanged = prevValue?.end && currentValue?.end ? prevValue.end.compare(currentValue.end) !== 0 : prevValue?.end !== currentValue?.end;
+		const datesAreDifferent = currentValue?.start && currentValue?.end && currentValue.start.compare(currentValue.end) !== 0;
+		if (state.isOpen && startChanged && endChanged && datesAreDifferent) state.setOpen(false);
+	}, [state.value, state.isOpen]);
+	const { focusWithinProps: startFocusWithinProps } = useFocusWithin({ onFocusWithin: () => {
+		setDateMode("start");
+		openCalendar();
+	} });
+	const { focusWithinProps: endFocusWithinProps } = useFocusWithin({ onFocusWithin: () => {
+		setDateMode("end");
+		openCalendar();
+	} });
+	const { focusWithinProps: containerFocusProps } = useFocusWithin({ onBlurWithin: () => {
+		requestAnimationFrame(() => {
+			const activeElement = document.activeElement;
+			const isFocusInDateRangeInput = activeElement instanceof Node && ref.current?.contains(activeElement);
+			const isFocusInCalendar = activeElement instanceof Node && calendarRef.current?.contains(activeElement);
+			if (isFocusInDateRangeInput || isFocusInCalendar) return;
+			setDateMode(null);
+			if (state.isOpen) state.setOpen(false);
+		});
+	} });
+	const handleOutsideClick = (e) => {
+		const target = e.target;
+		if (ref.current?.contains(target)) return;
+		if (state.isOpen) {
+			setDateMode(null);
+			state.setOpen(false);
+		}
+	};
+	const { pressProps: pressClearProps } = usePress({ onPress: () => {
+		state.setValue(null);
+		if (props.onClear) props.onClear();
+	} });
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			openCalendarWithFocus();
+		}
+	}, [openCalendarWithFocus]);
+	const isValueNull = state.value && state.value.start == null && state.value.end == null;
+	return /* @__PURE__ */ jsxs(DateRangeContainer, {
+		"data-test": props.dataTest,
+		className,
+		children: [props.label && /* @__PURE__ */ jsx(CustomFormLabel, {
+			...labelProps,
+			children: props.label
+		}), /* @__PURE__ */ jsxs(Popover_default, {
+			open: state.isOpen,
+			modal: false,
+			portalProps: portalContainer ? { container: portalContainer } : void 0,
+			contentProps: {
+				align: "start",
+				"aria-modal": true,
+				"aria-label": props["aria-label"] ?? void 0,
+				onInteractOutside: handleOutsideClick,
+				onOpenAutoFocus: (e) => {
+					e.preventDefault();
+				},
+				onEscapeKeyDown: () => {
+					state.setOpen(false);
+					if (dateMode) {
+						const seg = (dateMode === "start" ? startFieldRef : endFieldRef).current?.querySelector("[tabindex=\"0\"]");
+						if (seg instanceof HTMLElement) seg.focus();
+					}
+				},
+				onCloseAutoFocus: (e) => {
+					e.preventDefault();
+					setIsClosing(true);
+					requestAnimationFrame(() => setIsClosing(false));
+				},
+				noPadding: true,
+				style: { zIndex: calendarZIndex },
+				zIndex: calendarZIndex
+			},
+			children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(DateRangeInputs, {
+					...mergeProps(groupProps, containerFocusProps),
+					ref,
+					children: [
+						/* @__PURE__ */ jsx(DateField, {
+							ref: startFieldRef,
+							inputPosition: "start",
+							focused: dateMode === "start",
+							disabled: props.disabled,
+							size: props.size,
+							...mergeProps(startFieldProps, startFocusWithinProps, { onKeyDown: handleKeyDown })
+						}),
+						/* @__PURE__ */ jsx(DateField, {
+							ref: endFieldRef,
+							inputPosition: "end",
+							focused: dateMode === "end",
+							disabled: props.disabled,
+							size: props.size,
+							...mergeProps(endFieldProps, endFocusWithinProps, { onKeyDown: handleKeyDown })
+						}),
+						props.showClear && /* @__PURE__ */ jsx(ClearRangeButton, {
+							...pressClearProps,
+							type: "button",
+							disabled: isValueNull,
+							"aria-label": "Clear date range",
+							children: /* @__PURE__ */ jsx(CircleXInverseIcon, {})
+						}),
+						/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(OpenButton, {
+							onOpen: openCalendarWithFocus,
+							disabled: props.disabled
+						}) })
+					]
+				})
+			}), /* @__PURE__ */ jsx(RangeCalendar, {
+				...calendarProps,
+				autoFocus: void 0,
+				calendarRef,
+				setDateMode,
+				setValue: state.setValue,
+				granularity,
+				hidePresets: props.hidePresets,
+				onSelectDate: (dateVal) => {
+					/**
+					* Please use caution when editing the logic below.
+					* It is specific to react-aria's date picker and can be brittle.
+					*/
+					if (dateVal) {
+						const date = state.hasTime ? toCalendarDateTime(dateVal) : dateVal;
+						if (dateMode === "start") {
+							if (state.value.end == null && state.value.start == null) state.setValue({
+								start: date,
+								end: date
+							});
+							else if (state.value.end && date.compare(state.value.end) > 0) state.setValue({
+								start: state.value.end,
+								end: state.value.end.set(dateVal)
+							});
+							else state.setValue({
+								start: state.value.start == null ? date : state.value.start.set(dateVal),
+								end: state.value.end
+							});
+							setDateMode("end");
+						} else {
+							if (state.value.end == null && state.value.start == null) state.setValue({
+								start: date,
+								end: date
+							});
+							else if (state.value.start && date.compare(state.value.start) < 0) state.setValue({
+								start: state.value.start.set(dateVal),
+								end: state.value.start
+							});
+							else state.setValue({
+								start: state.value.start,
+								end: state.value.end == null ? date : state.value.end.set(dateVal)
+							});
+							state.setOpen(false);
+						}
+					}
+				},
+				minDate: props.minDate,
+				maxDate: props.maxDate
+			})]
+		})]
+	});
+};
+//#endregion
+export { Calendar as i, DatePicker as n, DateField as r, DateRangePicker as t };
+
+//# sourceMappingURL=DatePicker-DY1YA_Fu.mjs.map