@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/DatePicker.jsx

@@ -0,0 +1,682 @@
+import { Provider, dataAttr, useIsHydrated, useRenderProps } from "./utils.jsx";
+import { TextContext } from "./Text.jsx";
+import { FormContext } from "./Form.jsx";
+import { CalendarContext } from "./Calendar.jsx";
+import { RangeCalendarContext } from "./RangeCalendar.jsx";
+import { d as useDateRangePickerContext, f as HiddenDateInput, n as DateFieldContext, u as DateRangePickerContext } from "./DateField2.jsx";
+import { Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { Portal } from "solid-js/web";
+import { FocusScope, createDatePicker, createDateRangePicker, createPopover, useUNSAFE_PortalContext } from "@proyecto-viviana/solidaria";
+import { access, createCalendarState, createDateFieldState, createDatePickerState, createRangeCalendarState } from "@proyecto-viviana/solid-stately";
+//#region src/DatePicker.tsx
+/**
+* DatePicker component for solidaria-components
+*
+* Pre-wired headless date picker component that combines a date field with a calendar popup.
+* Port of react-aria-components/src/DatePicker.tsx
+*/
+const DatePickerContext = createContext(null);
+const DatePickerStateContext = createContext(null);
+const DateRangePickerStateContext = createContext(null);
+function withFormValidationBehavior(props, formContext) {
+	if (!formContext?.validationBehavior) return props;
+	return new Proxy(props, {
+		get(target, property, receiver) {
+			const localValue = Reflect.get(target, property, receiver);
+			if (property === "validationBehavior" && localValue === void 0) return formContext.validationBehavior;
+			return localValue;
+		},
+		has(target, property) {
+			return Reflect.has(target, property) || property === "validationBehavior" && formContext.validationBehavior !== void 0;
+		},
+		ownKeys(target) {
+			const keys = new Set(Reflect.ownKeys(target));
+			if (formContext.validationBehavior !== void 0) keys.add("validationBehavior");
+			return Array.from(keys);
+		},
+		getOwnPropertyDescriptor(target, property) {
+			const descriptor = Reflect.getOwnPropertyDescriptor(target, property);
+			if (descriptor) return descriptor;
+			if (property === "validationBehavior" && formContext.validationBehavior !== void 0) return {
+				enumerable: true,
+				configurable: true,
+				get: () => formContext.validationBehavior
+			};
+		}
+	});
+}
+function useDatePickerContext() {
+	const context = useContext(DatePickerContext);
+	if (!context) throw new Error("DatePicker components must be used within a DatePicker");
+	return context;
+}
+/**
+* A date picker combines a DateField and a Calendar popover.
+*
+* @example
+* ```tsx
+* <DatePicker label="Event date">
+*   <Label>Event date</Label>
+*   <Group>
+*     <DateInput>
+*       {(segment) => <DateSegment segment={segment} />}
+*     </DateInput>
+*     <DatePickerButton>📅</DatePickerButton>
+*   </Group>
+*   <Popover>
+*     <Dialog>
+*       <Calendar>
+*         <CalendarGrid>
+*           {(date) => <CalendarCell date={date} />}
+*         </CalendarGrid>
+*       </Calendar>
+*     </Dialog>
+*   </Popover>
+* </DatePicker>
+* ```
+*/
+function DatePicker(props) {
+	const isHydrated = useIsHydrated();
+	const formContext = useContext(FormContext);
+	return <Show when={isHydrated()} fallback={<div class="solidaria-DatePicker solidaria-DatePicker--placeholder" aria-hidden="true" />}>
+      <DatePickerInner {...props} __formContext={formContext} />
+    </Show>;
+}
+/**
+* Internal DatePicker component that renders after client mount.
+*/
+function DatePickerInner(props) {
+	const formContext = props.__formContext ?? useContext(FormContext);
+	const [local, stateProps, rest] = splitProps(withFormValidationBehavior(props, formContext), [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"shouldCloseOnSelect",
+		"__formContext"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"isOpen",
+		"defaultOpen",
+		"onOpenChange",
+		"minValue",
+		"maxValue",
+		"isInvalid",
+		"isDisabled",
+		"isReadOnly",
+		"isRequired",
+		"locale",
+		"granularity",
+		"hourCycle",
+		"hideTimeZone",
+		"placeholderValue",
+		"shouldForceLeadingZeros",
+		"createCalendar",
+		"validationState",
+		"validationBehavior",
+		"validate",
+		"description",
+		"errorMessage",
+		"isDateUnavailable",
+		"firstDayOfWeek",
+		"visibleMonths",
+		"pageBehavior",
+		"selectionAlignment",
+		"isDateDisabled"
+	]);
+	const [triggerRef, setTriggerRef] = createSignal(null);
+	const [fieldRef, setFieldRef] = createSignal(null);
+	const datePickerState = createDatePickerState({
+		get value() {
+			return stateProps.value;
+		},
+		get defaultValue() {
+			return stateProps.defaultValue;
+		},
+		get onChange() {
+			return stateProps.onChange;
+		},
+		get minValue() {
+			return stateProps.minValue;
+		},
+		get maxValue() {
+			return stateProps.maxValue;
+		},
+		get isDisabled() {
+			return stateProps.isDisabled;
+		},
+		get isReadOnly() {
+			return stateProps.isReadOnly;
+		},
+		get isRequired() {
+			return stateProps.isRequired;
+		},
+		get granularity() {
+			return stateProps.granularity;
+		},
+		get hourCycle() {
+			return stateProps.hourCycle;
+		},
+		get hideTimeZone() {
+			return stateProps.hideTimeZone;
+		},
+		get placeholderValue() {
+			return stateProps.placeholderValue;
+		},
+		get shouldCloseOnSelect() {
+			return local.shouldCloseOnSelect;
+		},
+		get defaultOpen() {
+			return stateProps.defaultOpen;
+		},
+		get isOpen() {
+			return stateProps.isOpen;
+		},
+		get onOpenChange() {
+			return stateProps.onOpenChange;
+		},
+		get isDateUnavailable() {
+			return stateProps.isDateUnavailable;
+		},
+		get validationState() {
+			return stateProps.validationState;
+		}
+	});
+	const overlayState = {
+		get isOpen() {
+			return datePickerState.isOpen();
+		},
+		open: datePickerState.open,
+		close: datePickerState.close,
+		toggle: () => datePickerState.setOpen(!datePickerState.isOpen())
+	};
+	const fieldState = createDateFieldState({
+		...stateProps,
+		value: () => datePickerState.value(),
+		onChange: (value) => {
+			datePickerState.setValue(value);
+		}
+	});
+	const calendarState = createCalendarState({
+		value: () => datePickerState.value(),
+		onChange: (value) => {
+			if (!value) return;
+			datePickerState.setDateValue(value);
+		},
+		minValue: stateProps.minValue,
+		maxValue: stateProps.maxValue,
+		isDisabled: stateProps.isDisabled,
+		isReadOnly: stateProps.isReadOnly,
+		locale: stateProps.locale,
+		createCalendar: stateProps.createCalendar,
+		isDateUnavailable: stateProps.isDateUnavailable,
+		firstDayOfWeek: stateProps.firstDayOfWeek,
+		visibleMonths: stateProps.visibleMonths,
+		pageBehavior: stateProps.pageBehavior,
+		selectionAlignment: stateProps.selectionAlignment,
+		isDateDisabled: stateProps.isDateDisabled
+	});
+	const pickerAria = createDatePicker(() => ({
+		...rest,
+		description: stateProps.description,
+		errorMessage: stateProps.errorMessage
+	}), fieldState, overlayState, calendarState);
+	const contextValue = {
+		fieldState,
+		datePickerState,
+		calendarState,
+		overlayState,
+		triggerRef,
+		setTriggerRef: (element) => {
+			if (!element) return;
+			const current = triggerRef();
+			if (!current || !current.isConnected) setTriggerRef(() => element);
+		},
+		pickerAria
+	};
+	const isInvalid = createMemo(() => fieldState.isInvalid() || datePickerState.builtinValidation().isInvalid || Boolean(stateProps.isInvalid));
+	const renderValues = createMemo(() => ({
+		isDisabled: fieldState.isDisabled(),
+		isReadOnly: fieldState.isReadOnly(),
+		isRequired: fieldState.isRequired(),
+		isInvalid: isInvalid(),
+		isOpen: overlayState.isOpen
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-DatePicker"
+	}, renderValues);
+	const validationBehavior = () => stateProps.validationBehavior ?? formContext?.validationBehavior ?? "native";
+	return <DatePickerStateContext.Provider value={fieldState}>
+      <DatePickerContext.Provider value={contextValue}>
+        {}
+        <DateFieldContext.Provider value={{
+		state: fieldState,
+		aria: {
+			labelProps: pickerAria.labelProps,
+			inputProps: pickerAria.fieldProps,
+			descriptionProps: pickerAria.descriptionProps,
+			errorMessageProps: pickerAria.errorMessageProps
+		}
+	}}>
+          <CalendarContext.Provider value={calendarState}>
+            <div ref={setFieldRef} {...pickerAria.groupProps} class={renderProps.class()} style={renderProps.style()} data-disabled={dataAttr(fieldState.isDisabled())} data-readonly={dataAttr(fieldState.isReadOnly())} data-required={dataAttr(fieldState.isRequired())} data-invalid={dataAttr(isInvalid())} data-open={dataAttr(overlayState.isOpen)}>
+              <Provider values={[[TextContext, { slots: {
+		get description() {
+			return pickerAria.descriptionProps;
+		},
+		get errorMessage() {
+			return pickerAria.errorMessageProps;
+		}
+	} }]]}>
+                {props.children}
+              </Provider>
+            </div>
+            <Show when={rest.name}>
+              <HiddenDateInput name={rest.name} form={rest.form} value={() => datePickerState.value()} autoComplete={rest.autoComplete} isDisabled={fieldState.isDisabled()} isRequired={fieldState.isRequired()} validationBehavior={validationBehavior()} validationState={fieldState} focus={() => {
+		fieldRef()?.querySelector("[role=\"spinbutton\"]")?.focus();
+	}} minValue={() => access(stateProps.minValue)} maxValue={() => access(stateProps.maxValue)} granularity={datePickerState.granularity} />
+            </Show>
+          </CalendarContext.Provider>
+        </DateFieldContext.Provider>
+      </DatePickerContext.Provider>
+    </DatePickerStateContext.Provider>;
+}
+function DateRangePicker(props) {
+	const isHydrated = useIsHydrated();
+	return <Show when={isHydrated()} fallback={<div class="solidaria-DateRangePicker solidaria-DateRangePicker--placeholder" aria-hidden="true" />}>
+      <DateRangePickerInner {...props} />
+    </Show>;
+}
+function DateRangePickerInner(props) {
+	const [local, overlayProps, stateProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"shouldCloseOnSelect"
+	], [
+		"defaultOpen",
+		"isOpen",
+		"onOpenChange"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"minValue",
+		"maxValue",
+		"isDisabled",
+		"isReadOnly",
+		"focusedValue",
+		"defaultFocusedValue",
+		"onFocusChange",
+		"locale",
+		"granularity",
+		"hourCycle",
+		"hideTimeZone",
+		"placeholderValue",
+		"createCalendar",
+		"isDateUnavailable",
+		"visibleMonths",
+		"isDateDisabled",
+		"validationState",
+		"allowsNonContiguousRanges",
+		"firstDayOfWeek",
+		"pageBehavior",
+		"selectionAlignment"
+	]);
+	const [internalOpen, setInternalOpen] = createSignal(overlayProps.defaultOpen ?? false);
+	const isOpen = () => access(overlayProps.isOpen) ?? internalOpen();
+	const setOpen = (open) => {
+		if (access(overlayProps.isOpen) === void 0) setInternalOpen(open);
+		overlayProps.onOpenChange?.(open);
+	};
+	let triggerRef = null;
+	const overlayState = {
+		get isOpen() {
+			return isOpen();
+		},
+		open: () => setOpen(true),
+		close: () => setOpen(false),
+		toggle: () => setOpen(!isOpen())
+	};
+	const [internalRangeValue, setInternalRangeValue] = createSignal(stateProps.defaultValue ?? null);
+	const currentRangeValue = createMemo(() => {
+		const controlled = access(stateProps.value);
+		return controlled !== void 0 ? controlled : internalRangeValue();
+	});
+	const setCommittedRangeValue = (value) => {
+		if (access(stateProps.value) === void 0) setInternalRangeValue(() => value);
+		stateProps.onChange?.(value);
+	};
+	const calendarState = createRangeCalendarState({
+		...stateProps,
+		value: currentRangeValue,
+		onChange: (value) => {
+			setCommittedRangeValue(value);
+			if (local.shouldCloseOnSelect !== false && value?.start && value?.end) setOpen(false);
+		}
+	});
+	const isInvalid = createMemo(() => Boolean(rest.isInvalid) || calendarState.validationState() === "invalid");
+	const isRequired = createMemo(() => Boolean(rest.isRequired));
+	const [startFieldValue, setStartFieldValue] = createSignal(currentRangeValue()?.start ?? null);
+	const [endFieldValue, setEndFieldValue] = createSignal(currentRangeValue()?.end ?? null);
+	const rangeGranularity = createMemo(() => {
+		if (stateProps.granularity) return stateProps.granularity;
+		const value = currentRangeValue()?.start ?? currentRangeValue()?.end;
+		if (value && "hour" in value) return "second" in value ? "second" : "minute";
+		return "day";
+	});
+	createEffect(() => {
+		const value = currentRangeValue();
+		setStartFieldValue(() => value?.start ?? null);
+		setEndFieldValue(() => value?.end ?? null);
+	});
+	const setRangeFieldValue = (part, nextValue) => {
+		if (part === "start") setStartFieldValue(() => nextValue);
+		else setEndFieldValue(() => nextValue);
+		const nextStart = part === "start" ? nextValue : startFieldValue();
+		const nextEnd = part === "end" ? nextValue : endFieldValue();
+		setCommittedRangeValue(nextStart && nextEnd ? {
+			start: nextStart,
+			end: nextEnd
+		} : null);
+	};
+	const rangeFieldStateProps = {
+		minValue: stateProps.minValue,
+		maxValue: stateProps.maxValue,
+		isDisabled: stateProps.isDisabled,
+		isReadOnly: stateProps.isReadOnly,
+		isRequired,
+		locale: access(stateProps.locale),
+		granularity: rangeGranularity(),
+		hourCycle: stateProps.hourCycle,
+		hideTimeZone: stateProps.hideTimeZone,
+		placeholderValue: stateProps.placeholderValue,
+		validationState: () => isInvalid() ? "invalid" : access(stateProps.validationState),
+		isDateUnavailable: stateProps.isDateUnavailable ? (date) => stateProps.isDateUnavailable(date, null) : void 0
+	};
+	const startFieldState = createDateFieldState({
+		...rangeFieldStateProps,
+		value: startFieldValue,
+		onChange: (value) => setRangeFieldValue("start", value)
+	});
+	const endFieldState = createDateFieldState({
+		...rangeFieldStateProps,
+		value: endFieldValue,
+		onChange: (value) => setRangeFieldValue("end", value)
+	});
+	const pickerAria = createDateRangePicker(() => ({
+		...rest,
+		description: props.description,
+		errorMessage: props.errorMessage
+	}), calendarState, overlayState);
+	const contextValue = {
+		calendarState,
+		startFieldState,
+		endFieldState,
+		startFieldContext: {
+			state: startFieldState,
+			aria: {
+				labelProps: {},
+				get inputProps() {
+					return pickerAria.startInputProps;
+				},
+				get descriptionProps() {
+					return pickerAria.descriptionProps;
+				},
+				get errorMessageProps() {
+					return pickerAria.errorMessageProps;
+				}
+			}
+		},
+		endFieldContext: {
+			state: endFieldState,
+			aria: {
+				labelProps: {},
+				get inputProps() {
+					return pickerAria.endInputProps;
+				},
+				get descriptionProps() {
+					return pickerAria.descriptionProps;
+				},
+				get errorMessageProps() {
+					return pickerAria.errorMessageProps;
+				}
+			}
+		},
+		overlayState,
+		triggerRef: () => triggerRef,
+		setTriggerRef: (element) => {
+			if (!element) return;
+			if (!triggerRef || !triggerRef.isConnected) triggerRef = element;
+		},
+		pickerAria
+	};
+	const renderValues = createMemo(() => ({
+		isDisabled: calendarState.isDisabled(),
+		isReadOnly: calendarState.isReadOnly(),
+		isRequired: isRequired(),
+		isInvalid: isInvalid(),
+		isOpen: overlayState.isOpen
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-DateRangePicker"
+	}, renderValues);
+	return <DateRangePickerStateContext.Provider value={calendarState}>
+      <DateRangePickerContext.Provider value={contextValue}>
+        <RangeCalendarContext.Provider value={calendarState}>
+          <div {...pickerAria.groupProps} class={renderProps.class()} style={renderProps.style()} data-disabled={dataAttr(calendarState.isDisabled())} data-readonly={dataAttr(calendarState.isReadOnly())} data-required={dataAttr(isRequired())} data-invalid={dataAttr(isInvalid())} data-open={dataAttr(overlayState.isOpen)}>
+            <Provider values={[[TextContext, { slots: {
+		get description() {
+			return pickerAria.descriptionProps;
+		},
+		get errorMessage() {
+			return pickerAria.errorMessageProps;
+		}
+	} }]]}>
+              {props.children}
+            </Provider>
+          </div>
+          <Show when={rest.startName}>
+            <HiddenDateInput name={rest.startName} form={rest.form} value={() => currentRangeValue()?.start ?? null} isDisabled={access(stateProps.isDisabled) ?? false} minValue={() => access(stateProps.minValue)} maxValue={() => access(stateProps.maxValue)} granularity={rangeGranularity()} />
+          </Show>
+          <Show when={rest.endName}>
+            <HiddenDateInput name={rest.endName} form={rest.form} value={() => currentRangeValue()?.end ?? null} isDisabled={access(stateProps.isDisabled) ?? false} minValue={() => access(stateProps.minValue)} maxValue={() => access(stateProps.maxValue)} granularity={rangeGranularity()} />
+          </Show>
+        </RangeCalendarContext.Provider>
+      </DateRangePickerContext.Provider>
+    </DateRangePickerStateContext.Provider>;
+}
+/**
+* A button that opens the date picker calendar.
+*/
+function DatePickerButton(props) {
+	const context = useDatePickerContext();
+	const renderValues = createMemo(() => ({
+		isDisabled: context.fieldState.isDisabled() || (props.isDisabled ?? false),
+		isOpen: context.overlayState.isOpen
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-DatePickerButton"
+	}, renderValues);
+	const getChildren = () => {
+		if (typeof props.children === "function") return renderProps.renderChildren();
+		return props.children ?? "📅";
+	};
+	return <button ref={(el) => {
+		context.setTriggerRef(el);
+	}} {...context.pickerAria.buttonProps} class={renderProps.class()} style={renderProps.style()} disabled={context.fieldState.isDisabled() || props.isDisabled} data-disabled={dataAttr(context.fieldState.isDisabled() || props.isDisabled)} data-open={dataAttr(context.overlayState.isOpen)}>
+      {getChildren()}
+    </button>;
+}
+function DateRangePickerButton(props) {
+	const context = useDateRangePickerContext();
+	const renderValues = createMemo(() => ({
+		isDisabled: context.calendarState.isDisabled() || (props.isDisabled ?? false),
+		isOpen: context.overlayState.isOpen
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-DateRangePickerButton"
+	}, renderValues);
+	const getChildren = () => {
+		if (typeof props.children === "function") return renderProps.renderChildren();
+		return props.children ?? "📅";
+	};
+	return <button ref={(el) => context.setTriggerRef(el)} {...context.pickerAria.buttonProps} class={renderProps.class()} style={renderProps.style()} disabled={context.calendarState.isDisabled() || props.isDisabled} data-disabled={dataAttr(context.calendarState.isDisabled() || props.isDisabled)} data-open={dataAttr(context.overlayState.isOpen)}>
+      {getChildren()}
+    </button>;
+}
+function DatePickerLabel(props) {
+	const context = useDatePickerContext();
+	return <span {...context.pickerAria.labelProps} class={props.class}>
+      {props.children}
+    </span>;
+}
+function DatePickerDescription(props) {
+	const context = useDatePickerContext();
+	return <p {...context.pickerAria.descriptionProps} class={props.class}>
+      {props.children}
+    </p>;
+}
+function DatePickerErrorMessage(props) {
+	const context = useDatePickerContext();
+	return <p {...context.pickerAria.errorMessageProps} class={props.class}>
+      {props.children}
+    </p>;
+}
+function DateRangePickerLabel(props) {
+	const context = useDateRangePickerContext();
+	return <span {...context.pickerAria.labelProps} class={props.class}>
+      {props.children}
+    </span>;
+}
+function DateRangePickerDescription(props) {
+	const context = useDateRangePickerContext();
+	return <p {...context.pickerAria.descriptionProps} class={props.class}>
+      {props.children}
+    </p>;
+}
+function DateRangePickerErrorMessage(props) {
+	const context = useDateRangePickerContext();
+	return <p {...context.pickerAria.errorMessageProps} class={props.class}>
+      {props.children}
+    </p>;
+}
+function createEscapeDismissFallback(isOpen, close) {
+	createEffect(() => {
+		if (!isOpen() || typeof document === "undefined") return;
+		const onKeyDown = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+			close();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+	});
+}
+/**
+* The content area of the date picker (typically contains a Calendar).
+*/
+function DatePickerContent(props) {
+	const context = useDatePickerContext();
+	const portalContext = useUNSAFE_PortalContext();
+	let contentRef;
+	const portalContainer = () => portalContext.getContainer?.() ?? void 0;
+	const popoverAria = createPopover({
+		triggerRef: () => context.triggerRef()?.parentElement ?? context.triggerRef(),
+		popoverRef: () => null,
+		placement: "bottom start",
+		offset: 8,
+		isNonModal: false,
+		isKeyboardDismissDisabled: false
+	}, {
+		isOpen: () => context.overlayState.isOpen,
+		open: context.overlayState.open,
+		close: context.overlayState.close,
+		toggle: context.overlayState.toggle
+	});
+	createEscapeDismissFallback(() => context.overlayState.isOpen, context.overlayState.close);
+	const cleanPopoverProps = () => {
+		const { style: _style, ref: _ref, ...rest } = popoverAria.popoverProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		return {
+			...popoverAria.popoverProps.style,
+			...props.style
+		};
+	};
+	createEffect(() => {
+		if (!context.overlayState.isOpen) requestAnimationFrame(() => context.triggerRef()?.focus());
+	});
+	return <Show when={context.overlayState.isOpen}>
+      <Portal mount={portalContainer()}>
+        <FocusScope contain restoreFocus>
+          <div ref={contentRef} {...cleanPopoverProps()} {...context.pickerAria.dialogProps} tabIndex={-1} class={props.class ?? "solidaria-DatePickerContent"} style={mergedStyle()} data-placement={popoverAria.placement() ?? void 0}>
+            {props.children}
+          </div>
+        </FocusScope>
+      </Portal>
+    </Show>;
+}
+function DateRangePickerContent(props) {
+	const context = useDateRangePickerContext();
+	const portalContext = useUNSAFE_PortalContext();
+	let contentRef;
+	const portalContainer = () => portalContext.getContainer?.() ?? void 0;
+	const popoverAria = createPopover({
+		triggerRef: () => context.triggerRef()?.parentElement ?? context.triggerRef(),
+		popoverRef: () => null,
+		placement: "bottom start",
+		offset: 8,
+		isNonModal: false,
+		isKeyboardDismissDisabled: false
+	}, {
+		isOpen: () => context.overlayState.isOpen,
+		open: context.overlayState.open,
+		close: context.overlayState.close,
+		toggle: context.overlayState.toggle
+	});
+	createEscapeDismissFallback(() => context.overlayState.isOpen, context.overlayState.close);
+	const cleanPopoverProps = () => {
+		const { style: _style, ref: _ref, ...rest } = popoverAria.popoverProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		return {
+			...popoverAria.popoverProps.style,
+			...props.style
+		};
+	};
+	createEffect(() => {
+		if (!context.overlayState.isOpen) requestAnimationFrame(() => context.triggerRef()?.focus());
+	});
+	return <Show when={context.overlayState.isOpen}>
+      <Portal mount={portalContainer()}>
+        <FocusScope contain restoreFocus>
+          <div ref={contentRef} {...cleanPopoverProps()} {...context.pickerAria.dialogProps} tabIndex={-1} class={props.class ?? "solidaria-DateRangePickerContent"} style={mergedStyle()} data-placement={popoverAria.placement() ?? void 0}>
+            {props.children}
+          </div>
+        </FocusScope>
+      </Portal>
+    </Show>;
+}
+//#endregion
+export { DatePicker, DatePickerButton, DatePickerContent, DatePickerContext, DatePickerDescription, DatePickerErrorMessage, DatePickerLabel, DatePickerStateContext, DateRangePicker, DateRangePickerButton, DateRangePickerContent, DateRangePickerContext, DateRangePickerDescription, DateRangePickerErrorMessage, DateRangePickerLabel, DateRangePickerStateContext, HiddenDateInput, useDatePickerContext, useDateRangePickerContext };
+
+//# sourceMappingURL=DatePicker.jsx.map