@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/DatePicker2.jsx

@@ -1,12 +1,38 @@
-import { Provider, dataAttr, useIsHydrated, useRenderProps } from "./utils.jsx";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/DatePicker.tsx
+/*
+* Copyright 2025 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/HiddenDateInput.tsx
+import { Provider, dataAttr, useRenderProps } from "./utils.jsx";
 import { TextContext } from "./Text.jsx";
-import { FormContext } from "./Form.jsx";
+import { FormContext, resolveValidationBehavior } from "./Form.jsx";
+import { Popover } from "./Popover.jsx";
+import { Dialog } from "./Dialog.jsx";
 import { CalendarContext } from "./Calendar.jsx";
 import { RangeCalendarContext } from "./RangeCalendar.jsx";
 import { d as useDateRangePickerContext, 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, createDateField, createDatePicker, createDateRangePicker, createEnterAnimation, createFocusRing, createFormValidation, createHover, createPopover, mergeProps as mergeProps$1, useUNSAFE_PortalContext } from "@proyecto-viviana/solidaria";
+import { Show, createContext, createMemo, createSignal, createTrackedEffect, useContext } from "solid-js";
+import { createDateField, createDatePicker, createDateRangePicker, createFocusRing, createFormValidation, createHover, mergeProps } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { access, createCalendarState, createDateFieldState, createDatePickerState, createRangeCalendarState } from "@proyecto-viviana/solid-stately";
 //#region src/HiddenDateInput.tsx
 /**
@@ -14,6 +40,7 @@ import { access, createCalendarState, createDateFieldState, createDatePickerStat
 *
 * A hidden native date/datetime-local input for form submission.
 * Renders server-side with the initial value for SSR safety.
+* Based on packages/react-aria-components/src/HiddenDateInput.tsx.
 */
 function accessValue(value) {
 	return typeof value === "function" ? value() : value;
@@ -55,14 +82,14 @@ function HiddenDateInput(props) {
 			return props.focus;
 		}
 	}, props.validationState, inputRef);
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const val = formattedValue();
 		const input = inputRef();
 		if (input && input.value !== val) input.value = val;
 	});
 	return <input ref={(el) => {
 		setInputRef(el);
-	}} type={inputType()} name={props.name} form={props.form} value={formattedValue()} autocomplete={props.autoComplete} disabled={props.isDisabled} required={usesNativeValidation() && props.isRequired ? true : void 0} hidden={usesNativeValidation() || void 0} min={hasValidationBehavior() ? void 0 : formattedMin() || void 0} max={hasValidationBehavior() ? void 0 : formattedMax() || void 0} onChange={usesNativeValidation() ? () => {} : void 0} tabIndex={-1} aria-hidden="true" style={{
+	}} type={inputType()} name={props.name} form={props.form} value={formattedValue()} autocomplete={props.autoComplete} disabled={props.isDisabled} required={usesNativeValidation() && props.isRequired ? true : void 0} hidden={usesNativeValidation() || void 0} min={hasValidationBehavior() ? void 0 : formattedMin() || void 0} max={hasValidationBehavior() ? void 0 : formattedMax() || void 0} onChange={usesNativeValidation() ? () => {} : void 0} tabindex={-1} aria-hidden="true" style={{
 		position: "absolute",
 		width: "1px",
 		height: "1px",
@@ -85,33 +112,6 @@ function HiddenDateInput(props) {
 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");
@@ -143,18 +143,14 @@ function useDatePickerContext() {
 * ```
 */
 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>;
+	return <DatePickerInner {...props} />;
 }
 /**
 * 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), [
+	const [local, stateProps, rest] = splitProps(props, [
 		"children",
 		"class",
 		"style",
@@ -194,6 +190,7 @@ function DatePickerInner(props) {
 		"isDateDisabled"
 	]);
 	const [triggerRef, setTriggerRef] = createSignal(null);
+	const [groupRef, setGroupRefState] = createSignal(null);
 	const [fieldRef, setFieldRef] = createSignal(null);
 	const datePickerState = createDatePickerState({
 		get value() {
@@ -261,6 +258,9 @@ function DatePickerInner(props) {
 	};
 	const fieldState = createDateFieldState({
 		...stateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: () => datePickerState.value(),
 		onChange: (value) => {
 			datePickerState.setValue(value);
@@ -276,7 +276,9 @@ function DatePickerInner(props) {
 		maxValue: stateProps.maxValue,
 		isDisabled: stateProps.isDisabled,
 		isReadOnly: stateProps.isReadOnly,
-		locale: stateProps.locale,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		createCalendar: stateProps.createCalendar,
 		isDateUnavailable: stateProps.isDateUnavailable,
 		firstDayOfWeek: stateProps.firstDayOfWeek,
@@ -286,7 +288,7 @@ function DatePickerInner(props) {
 		isDateDisabled: stateProps.isDateDisabled
 	});
 	let wasOpen = false;
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const open = datePickerState.isOpen();
 		if (open && !wasOpen) calendarState.setFocused(true);
 		wasOpen = open;
@@ -308,6 +310,11 @@ function DatePickerInner(props) {
 			const current = triggerRef();
 			if (!current || !current.isConnected) setTriggerRef(() => element);
 		},
+		groupRef,
+		setGroupRef: (element) => {
+			if (!element) return;
+			setGroupRefState(() => element);
+		},
 		pickerAria
 	};
 	const isInvalid = createMemo(() => fieldState.isInvalid() || datePickerState.builtinValidation().isInvalid || Boolean(stateProps.isInvalid));
@@ -323,11 +330,11 @@ function DatePickerInner(props) {
 		style: local.style,
 		defaultClassName: "solidaria-DatePicker"
 	}, renderValues);
-	const validationBehavior = () => stateProps.validationBehavior ?? formContext?.validationBehavior ?? "native";
-	return <DatePickerStateContext.Provider value={fieldState}>
-      <DatePickerContext.Provider value={contextValue}>
+	const validationBehavior = () => resolveValidationBehavior(stateProps.validationBehavior, formContext);
+	return <DatePickerStateContext value={fieldState}>
+      <DatePickerContext value={contextValue}>
         {}
-        <DateFieldContext.Provider value={{
+        <DateFieldContext value={{
 		state: fieldState,
 		aria: {
 			get labelProps() {
@@ -344,7 +351,7 @@ function DatePickerInner(props) {
 			}
 		}
 	}}>
-          <CalendarContext.Provider value={calendarState}>
+          <CalendarContext value={calendarState}>
             {}
             <div ref={setFieldRef} 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: {
@@ -363,16 +370,13 @@ function DatePickerInner(props) {
 		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>;
+          </CalendarContext>
+        </DateFieldContext>
+      </DatePickerContext>
+    </DatePickerStateContext>;
 }
 function DateRangePicker(props) {
-	const isHydrated = useIsHydrated();
-	return <Show when={isHydrated()} fallback={<div class="solidaria-DateRangePicker solidaria-DateRangePicker--placeholder" aria-hidden="true" />}>
-      <DateRangePickerInner {...props} />
-    </Show>;
+	return <DateRangePickerInner {...props} />;
 }
 function DateRangePickerInner(props) {
 	const [local, overlayProps, stateProps, rest] = splitProps(props, [
@@ -418,6 +422,7 @@ function DateRangePickerInner(props) {
 		overlayProps.onOpenChange?.(open);
 	};
 	let triggerRef = null;
+	let groupRef = null;
 	const [fieldRef, setFieldRef] = createSignal(null);
 	const overlayState = {
 		get isOpen() {
@@ -438,6 +443,9 @@ function DateRangePickerInner(props) {
 	};
 	const calendarState = createRangeCalendarState({
 		...stateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: currentRangeValue,
 		onChange: (value) => {
 			setCommittedRangeValue(value);
@@ -445,7 +453,7 @@ function DateRangePickerInner(props) {
 		}
 	});
 	let wasRangeOpen = false;
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const open = overlayState.isOpen;
 		if (open && !wasRangeOpen) calendarState.setFocused(true);
 		wasRangeOpen = open;
@@ -460,7 +468,7 @@ function DateRangePickerInner(props) {
 		if (value && "hour" in value) return "second" in value ? "second" : "minute";
 		return "day";
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const value = currentRangeValue();
 		setStartFieldValue(() => value?.start ?? null);
 		setEndFieldValue(() => value?.end ?? null);
@@ -481,7 +489,9 @@ function DateRangePickerInner(props) {
 		isDisabled: stateProps.isDisabled,
 		isReadOnly: stateProps.isReadOnly,
 		isRequired,
-		locale: access(stateProps.locale),
+		get locale() {
+			return access(stateProps.locale);
+		},
 		granularity: rangeGranularity(),
 		hourCycle: stateProps.hourCycle,
 		hideTimeZone: stateProps.hideTimeZone,
@@ -491,11 +501,17 @@ function DateRangePickerInner(props) {
 	};
 	const startFieldState = createDateFieldState({
 		...rangeFieldStateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: startFieldValue,
 		onChange: (value) => setRangeFieldValue("start", value)
 	});
 	const endFieldState = createDateFieldState({
 		...rangeFieldStateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: endFieldValue,
 		onChange: (value) => setRangeFieldValue("end", value)
 	});
@@ -546,6 +562,11 @@ function DateRangePickerInner(props) {
 			if (!element) return;
 			if (!triggerRef || !triggerRef.isConnected) triggerRef = element;
 		},
+		groupRef: () => groupRef,
+		setGroupRef: (element) => {
+			if (!element) return;
+			groupRef = element;
+		},
 		pickerAria
 	};
 	const renderValues = createMemo(() => ({
@@ -560,9 +581,9 @@ function DateRangePickerInner(props) {
 		style: local.style,
 		defaultClassName: "solidaria-DateRangePicker"
 	}, renderValues);
-	return <DateRangePickerStateContext.Provider value={calendarState}>
-      <DateRangePickerContext.Provider value={contextValue}>
-        <RangeCalendarContext.Provider value={calendarState}>
+	return <DateRangePickerStateContext value={calendarState}>
+      <DateRangePickerContext value={contextValue}>
+        <RangeCalendarContext value={calendarState}>
           {}
           <div ref={setFieldRef} 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: {
@@ -582,9 +603,9 @@ function DateRangePickerInner(props) {
           <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>;
+        </RangeCalendarContext>
+      </DateRangePickerContext>
+    </DateRangePickerStateContext>;
 }
 /**
 * A button that opens the date picker calendar.
@@ -615,11 +636,11 @@ function DatePickerButton(props) {
 		if (typeof props.children === "function") return renderProps.renderChildren();
 		return props.children ?? "📅";
 	};
-	const buttonProps = createMemo(() => mergeProps$1(context.pickerAria.buttonProps, focusProps, hoverProps));
+	const buttonProps = createMemo(() => mergeProps(context.pickerAria.buttonProps, focusProps, hoverProps));
 	return <button ref={(el) => {
 		context.setTriggerRef(el);
 		props.ref?.(el);
-	}} {...buttonProps()} class={renderProps.class()} style={renderProps.style()} disabled={isDisabled()} data-disabled={dataAttr(isDisabled())} data-open={dataAttr(context.overlayState.isOpen)} attr:data-hovered={isHovered() ? "true" : void 0} attr:data-focused={isFocused() ? "true" : void 0} attr:data-focus-visible={isFocusVisible() ? "true" : void 0} attr:data-pressed={context.pickerAria.isButtonPressed() ? "true" : void 0}>
+	}} {...buttonProps()} class={renderProps.class()} style={renderProps.style()} disabled={isDisabled()} data-disabled={dataAttr(isDisabled())} data-open={dataAttr(context.overlayState.isOpen)} data-hovered={dataAttr(isHovered())} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-pressed={dataAttr(context.pickerAria.isButtonPressed())}>
       {getChildren()}
     </button>;
 }
@@ -649,11 +670,11 @@ function DateRangePickerButton(props) {
 		if (typeof props.children === "function") return renderProps.renderChildren();
 		return props.children ?? "📅";
 	};
-	const buttonProps = createMemo(() => mergeProps$1(context.pickerAria.buttonProps, focusProps, hoverProps));
+	const buttonProps = createMemo(() => mergeProps(context.pickerAria.buttonProps, focusProps, hoverProps));
 	return <button ref={(el) => {
 		context.setTriggerRef(el);
 		props.ref?.(el);
-	}} {...buttonProps()} class={renderProps.class()} style={renderProps.style()} disabled={isDisabled()} data-disabled={dataAttr(isDisabled())} data-open={dataAttr(context.overlayState.isOpen)} attr:data-hovered={isHovered() ? "true" : void 0} attr:data-focused={isFocused() ? "true" : void 0} attr:data-focus-visible={isFocusVisible() ? "true" : void 0} attr:data-pressed={context.pickerAria.isButtonPressed() ? "true" : void 0}>
+	}} {...buttonProps()} class={renderProps.class()} style={renderProps.style()} disabled={isDisabled()} data-disabled={dataAttr(isDisabled())} data-open={dataAttr(context.overlayState.isOpen)} data-hovered={dataAttr(isHovered())} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-pressed={dataAttr(context.pickerAria.isButtonPressed())}>
       {getChildren()}
     </button>;
 }
@@ -693,126 +714,36 @@ function DateRangePickerErrorMessage(props) {
       {props.children}
     </span>;
 }
-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));
+function datePickerContentClass(className, defaultClassName) {
+	if (typeof className === "function") return (renderProps) => className({
+		isEntering: renderProps.isEntering,
+		isExiting: renderProps.isExiting,
+		placement: renderProps.placement
 	});
+	return className ?? defaultClassName;
 }
 /**
 * The content area of the date picker (typically contains a Calendar).
+* Overlay enter/exit is owned by Popover, matching RAC DatePicker which renders
+* a Popover + Dialog and has no private animation machine.
 */
 function DatePickerContent(props) {
 	const context = useDatePickerContext();
-	const portalContext = useUNSAFE_PortalContext();
-	const [contentRef, setContentRef] = createSignal();
-	const portalContainer = () => portalContext.getContainer?.() ?? void 0;
-	const popoverAria = createPopover({
-		triggerRef: () => context.triggerRef()?.parentElement ?? context.triggerRef(),
-		popoverRef: () => contentRef() ?? 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 isEntering = createEnterAnimation(contentRef, () => context.overlayState.isOpen);
-	const renderProps = () => ({
-		isEntering: isEntering(),
-		isExiting: false,
-		placement: popoverAria.placement() ?? "bottom"
-	});
-	const resolvedClass = () => {
-		const c = props.class;
-		if (typeof c === "function") return c(renderProps());
-		return c ?? "solidaria-DatePickerContent";
-	};
-	const cleanPopoverProps = () => {
-		const { style: _style, ref: _ref, ...rest } = popoverAria.popoverProps;
-		return rest;
-	};
-	const mergedStyle = () => {
-		return {
-			...popoverAria.popoverProps.style,
-			...props.style
-		};
-	};
-	return <Show when={context.overlayState.isOpen}>
-      <Portal mount={portalContainer()}>
-        <FocusScope contain restoreFocus>
-          {}
-          <div ref={setContentRef} {...cleanPopoverProps()} class={resolvedClass()} style={mergedStyle()} data-placement={popoverAria.placement() ?? "bottom"} data-entering={dataAttr(isEntering())}>
-            {}
-            <section {...context.pickerAria.dialogProps} tabIndex={-1}>
-              {props.children}
-            </section>
-          </div>
-        </FocusScope>
-      </Portal>
-    </Show>;
+	return <Popover trigger="DatePicker" triggerRef={() => context.groupRef() ?? context.triggerRef()} placement="bottom start" offset={8} isOpen={context.overlayState.isOpen} onOpenChange={(open) => {
+		if (open) context.overlayState.open();
+		else context.overlayState.close();
+	}} class={datePickerContentClass(props.class, "solidaria-DatePickerContent")} style={props.style}>
+      <Dialog {...context.pickerAria.dialogProps}>{props.children}</Dialog>
+    </Popover>;
 }
 function DateRangePickerContent(props) {
 	const context = useDateRangePickerContext();
-	const portalContext = useUNSAFE_PortalContext();
-	const [contentRef, setContentRef] = createSignal();
-	const portalContainer = () => portalContext.getContainer?.() ?? void 0;
-	const popoverAria = createPopover({
-		triggerRef: () => context.triggerRef()?.parentElement ?? context.triggerRef(),
-		popoverRef: () => contentRef() ?? 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 isEntering = createEnterAnimation(contentRef, () => context.overlayState.isOpen);
-	const renderProps = () => ({
-		isEntering: isEntering(),
-		isExiting: false,
-		placement: popoverAria.placement() ?? "bottom"
-	});
-	const resolvedClass = () => {
-		const c = props.class;
-		if (typeof c === "function") return c(renderProps());
-		return c ?? "solidaria-DateRangePickerContent";
-	};
-	const cleanPopoverProps = () => {
-		const { style: _style, ref: _ref, ...rest } = popoverAria.popoverProps;
-		return rest;
-	};
-	const mergedStyle = () => {
-		return {
-			...popoverAria.popoverProps.style,
-			...props.style
-		};
-	};
-	return <Show when={context.overlayState.isOpen}>
-      <Portal mount={portalContainer()}>
-        <FocusScope contain restoreFocus>
-          {}
-          <div ref={setContentRef} {...cleanPopoverProps()} class={resolvedClass()} style={mergedStyle()} data-placement={popoverAria.placement() ?? "bottom"} data-entering={dataAttr(isEntering())}>
-            <section {...context.pickerAria.dialogProps} tabIndex={-1}>
-              {props.children}
-            </section>
-          </div>
-        </FocusScope>
-      </Portal>
-    </Show>;
+	return <Popover trigger="DateRangePicker" triggerRef={() => context.groupRef() ?? context.triggerRef()} placement="bottom start" offset={8} isOpen={context.overlayState.isOpen} onOpenChange={(open) => {
+		if (open) context.overlayState.open();
+		else context.overlayState.close();
+	}} class={datePickerContentClass(props.class, "solidaria-DateRangePickerContent")} style={props.style}>
+      <Dialog {...context.pickerAria.dialogProps}>{props.children}</Dialog>
+    </Popover>;
 }
 //#endregion
 export { HiddenDateInput as _, DatePickerDescription as a, DatePickerStateContext as c, DateRangePickerContent as d, DateRangePickerDescription as f, useDatePickerContext as g, DateRangePickerStateContext as h, DatePickerContext as i, DateRangePicker as l, DateRangePickerLabel as m, DatePickerButton as n, DatePickerErrorMessage as o, DateRangePickerErrorMessage as p, DatePickerContent as r, DatePickerLabel as s, DatePicker as t, DateRangePickerButton as u };