@proyecto-viviana/solidaria-components 0.3.0 → 0.3.2

package/dist/index.jsx

@@ -138,7 +138,7 @@ function filterDOMProps(props, options = {}) {
 function useIsHydrated() {
 	if (isServer) return () => false;
 	const [isHydrated, setIsHydrated] = createSignal(false);
-	requestAnimationFrame(() => {
+	onMount(() => {
 		setIsHydrated(true);
 	});
 	return isHydrated;
@@ -360,6 +360,38 @@ function createLiveCustomRootProps(getProps, getChildren, ref) {
 	});
 	return props;
 }
+const buttonAriaOverrideProps = [
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-details",
+	"aria-haspopup",
+	"aria-expanded",
+	"aria-controls",
+	"aria-pressed",
+	"aria-current",
+	"aria-disabled"
+];
+function createForwardedAriaButtonProps(source, overrides) {
+	const result = {};
+	for (const key in source) Object.defineProperty(result, key, {
+		enumerable: true,
+		configurable: true,
+		get() {
+			return source[key];
+		}
+	});
+	for (const key in overrides) {
+		const descriptor = Object.getOwnPropertyDescriptor(overrides, key);
+		if (!descriptor) continue;
+		Object.defineProperty(result, key, {
+			...descriptor,
+			enumerable: true,
+			configurable: true
+		});
+	}
+	return result;
+}
 const ButtonContext = createContext(null);
 /**
 * A button allows a user to perform an action.
@@ -419,8 +451,7 @@ function Button(props) {
 		if (isDialogTrigger()) dialogTriggerContext.state.toggle();
 		if (isPopoverTrigger()) popoverTriggerContext.state.toggle();
 	};
-	const buttonAria = createButton({
-		...ariaProps,
+	const buttonAria = createButton(createForwardedAriaButtonProps(ariaProps, {
 		onPress: handlePress,
 		get onPressStart() {
 			return resolvePending() ? void 0 : ariaProps.onPressStart;
@@ -440,7 +471,7 @@ function Button(props) {
 		get isDisabled() {
 			return resolveDisabled() || resolvePending();
 		}
-	});
+	}));
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const { isHovered, hoverProps } = createHover({
 		get isDisabled() {
@@ -527,6 +558,11 @@ function Button(props) {
 		]) if (triggerProps[name] != null) next[name] = triggerProps[name];
 		return next;
 	};
+	const directAriaProps = () => {
+		const next = {};
+		for (const name of buttonAriaOverrideProps) next[name] = ariaProps[name];
+		return next;
+	};
 	const disablePendingInteractions = (props) => {
 		if (!resolvePending()) return props;
 		const next = { ...props };
@@ -551,6 +587,7 @@ function Button(props) {
 	const rootProps = () => ({
 		...domProps(),
 		...disablePendingInteractions(cleanButtonProps()),
+		...directAriaProps(),
 		...triggerAriaProps(),
 		...cleanFocusProps(),
 		...cleanHoverProps(),
@@ -2084,6 +2121,12 @@ function clearDelegatedTextEntryHandlers$1(element) {
 function Input(props) {
 	const context = useContext(TextFieldContext);
 	let inputElement;
+	createEffect(() => {
+		context?.setInputId?.(props.id);
+	});
+	onCleanup(() => {
+		context?.setInputId?.(void 0);
+	});
 	const mergedProps = () => {
 		if (context) {
 			const { ref: _ref, ...contextInputProps } = context.inputProps ?? {};
@@ -2136,6 +2179,12 @@ function Input(props) {
 function TextArea(props) {
 	const context = useContext(TextFieldContext);
 	let textAreaElement;
+	createEffect(() => {
+		context?.setInputId?.(props.id);
+	});
+	onCleanup(() => {
+		context?.setInputId?.(void 0);
+	});
 	const mergedProps = () => {
 		if (context) {
 			const { ref: _ref, type: _type, ...contextInputProps } = context.inputProps ?? {};
@@ -2204,7 +2253,7 @@ function TextField(props) {
 	const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
 	const contextBaseProps = createMemo(() => {
 		if (!contextProps) return {};
-		const { labelProps: _labelProps, inputProps: _inputProps, descriptionProps: _descriptionProps, errorMessageProps: _errorMessageProps, isInvalid: _isInvalid, slots: _slots, ...rest } = contextProps;
+		const { labelProps: _labelProps, inputProps: _inputProps, descriptionProps: _descriptionProps, errorMessageProps: _errorMessageProps, isInvalid: _isInvalid, slots: _slots, setInputId: _setInputId, ...rest } = contextProps;
 		return rest;
 	});
 	const [local, ariaProps] = splitProps(withFormValidationBehavior$4(contextProps ? mergeProps$1(contextBaseProps(), contextSlotProps ?? {}, props) : props, formContext), [
@@ -2239,6 +2288,7 @@ function TextField(props) {
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
 		return ariaProps.isDisabled;
 	} });
+	const [inputIdOverride, setInputIdOverride] = createSignal();
 	const renderValues = createMemo(() => ({
 		isDisabled: ariaProps.isDisabled || false,
 		isInvalid: textFieldAria.isInvalid,
@@ -2324,10 +2374,13 @@ function TextField(props) {
 			return textFieldAria.isInvalid;
 		},
 		get inputId() {
-			return textFieldAria.inputProps.id;
+			return inputIdOverride() ?? textFieldAria.inputProps.id;
+		},
+		setInputId(id) {
+			setInputIdOverride(id);
 		}
 	};
-	const fieldChildren = untrack(() => {
+	const FieldChildren = () => untrack(() => {
 		const children = local.children;
 		return typeof children === "function" ? children(childRenderValues) : children;
 	});
@@ -2347,11 +2400,13 @@ function TextField(props) {
 	});
 	const customRootProps = () => ({
 		...rootProps(),
-		children: fieldChildren
+		children: <FieldChildren />
 	});
 	return <FieldErrorContext.Provider value={fieldErrorContext}>
       <TextFieldContext.Provider value={contextValue}>
-        {local.render ? local.render(customRootProps(), renderValues()) : <div {...rootProps()}>{fieldChildren}</div>}
+        {local.render ? local.render(customRootProps(), renderValues()) : <div {...rootProps()}>
+            <FieldChildren />
+          </div>}
       </TextFieldContext.Provider>
     </FieldErrorContext.Provider>;
 }
@@ -4743,6 +4798,7 @@ function SubmenuTrigger(props) {
 	const triggerId = createUniqueId();
 	const menuId = createUniqueId();
 	let hoverTimeout;
+	let hasPointerHover = false;
 	const delay = () => props.delay ?? 200;
 	const clearHoverTimeout = () => {
 		if (hoverTimeout != null) {
@@ -4754,6 +4810,12 @@ function SubmenuTrigger(props) {
 		clearHoverTimeout();
 		state.open();
 	};
+	const queueOpenSubmenu = () => {
+		clearHoverTimeout();
+		const open = () => state.open();
+		if (typeof queueMicrotask === "function") queueMicrotask(open);
+		else Promise.resolve().then(open);
+	};
 	const scheduleOpen = () => {
 		clearHoverTimeout();
 		hoverTimeout = window.setTimeout(() => {
@@ -4761,6 +4823,19 @@ function SubmenuTrigger(props) {
 			state.open();
 		}, delay());
 	};
+	const schedulePointerOpen = (event) => {
+		hasPointerHover = true;
+		if (event.isTrusted === false) {
+			queueOpenSubmenu();
+			return;
+		}
+		scheduleOpen();
+	};
+	const openFromMouseHover = () => {
+		if (state.isOpen()) return;
+		if (hasPointerHover) scheduleOpen();
+		else queueOpenSubmenu();
+	};
 	onCleanup(clearHoverTimeout);
 	const menuTriggerContext = createMemo(() => ({
 		state,
@@ -4793,17 +4868,22 @@ function SubmenuTrigger(props) {
 		props: () => ({
 			id: triggerId,
 			"aria-haspopup": "menu",
-			"aria-expanded": state.isOpen() || void 0,
-			"aria-controls": state.isOpen() ? menuId : void 0,
+			get "aria-expanded"() {
+				return state.isOpen() || void 0;
+			},
+			get "aria-controls"() {
+				return state.isOpen() ? menuId : void 0;
+			},
 			onPointerEnter: (event) => {
 				if (event.pointerType === "touch") return;
-				scheduleOpen();
+				schedulePointerOpen(event);
 			},
 			onPointerOver: (event) => {
 				if (event.pointerType === "touch") return;
-				scheduleOpen();
+				schedulePointerOpen(event);
 			},
-			onMouseEnter: () => scheduleOpen(),
+			onMouseEnter: openFromMouseHover,
+			onMouseOver: openFromMouseHover,
 			onKeyDown: (event) => {
 				if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
 					event.preventDefault();
@@ -5208,6 +5288,7 @@ function Menu(props) {
 		renderItem: (item) => renderDynamicItem(item),
 		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
 	}));
+	const menuItemContextValue = createMemo(() => local.shouldCloseOnSelect !== void 0 ? { closeOnSelect: local.shouldCloseOnSelect } : {});
 	const menuListChildren = () => <SharedElementTransition>
       {state.collection().size === 0 && !usesStaticChildren() && local.renderEmptyState ? <li role="presentation" data-empty-state>
           <div role="menuitem" style={{ display: "contents" }}>
@@ -5277,7 +5358,7 @@ function Menu(props) {
       <MenuStateContext.Provider value={state}>
         <MenuSectionSelectionRegistryContext.Provider value={sectionSelectionRegistry}>
           <StaticMenuCollectionContext.Provider value={usesStaticChildren() ? staticCollectionContext : null}>
-            <MenuItemContext.Provider value={{ closeOnSelect: local.shouldCloseOnSelect }}>
+            <MenuItemContext.Provider value={menuItemContextValue()}>
               <CollectionRendererContext.Provider value={collectionRenderer()}>
                 <>
                   <Show when={ariaProps.label}>
@@ -7652,8 +7733,12 @@ function NumberFieldIncrementButton(props) {
 	const context = useContext(NumberFieldContext);
 	if (!context) throw new Error("NumberFieldIncrementButton must be used within a NumberField");
 	const isDisabled = () => context.isDisabled || !context.state.canIncrement();
+	const pressButtonProps = () => {
+		const { onClick: _onClick, disabled: _disabled, type: _type, tabIndex: _tabIndex, ...rest } = context.incrementButtonProps;
+		return rest;
+	};
 	const buttonAria = createButton({
-		...context.incrementButtonProps,
+		...pressButtonProps(),
 		elementType: "div",
 		get isDisabled() {
 			return isDisabled();
@@ -7698,8 +7783,12 @@ function NumberFieldDecrementButton(props) {
 	const context = useContext(NumberFieldContext);
 	if (!context) throw new Error("NumberFieldDecrementButton must be used within a NumberField");
 	const isDisabled = () => context.isDisabled || !context.state.canDecrement();
+	const pressButtonProps = () => {
+		const { onClick: _onClick, disabled: _disabled, type: _type, tabIndex: _tabIndex, ...rest } = context.decrementButtonProps;
+		return rest;
+	};
 	const buttonAria = createButton({
-		...context.decrementButtonProps,
+		...pressButtonProps(),
 		elementType: "div",
 		get isDisabled() {
 			return isDisabled();
@@ -8642,6 +8731,30 @@ const TooltipTrigger = (props) => {
 const TriggerWrapper = (props) => {
 	const child = () => props.children;
 	const [triggerElement, setTriggerElement] = createSignal(null);
+	const [wrapperElement, setWrapperElement] = createSignal(null);
+	const getWrapperEventProps = () => {
+		const triggerProps = props.triggerProps;
+		const wrapperProps = {};
+		for (const propName of [
+			"onFocus",
+			"onBlur",
+			"onPointerEnter",
+			"onPointerLeave",
+			"onPointerOver",
+			"onPointerOut",
+			"onMouseEnter",
+			"onMouseLeave",
+			"onTouchStart",
+			"onPointerDown",
+			"onKeyDown"
+		]) {
+			const handler = triggerProps[propName];
+			if (typeof handler === "function") wrapperProps[propName] = handler;
+		}
+		if (!wrapperProps.onPointerEnter && typeof triggerProps.onMouseEnter === "function") wrapperProps.onPointerEnter = triggerProps.onMouseEnter;
+		if (!wrapperProps.onPointerLeave && typeof triggerProps.onMouseLeave === "function") wrapperProps.onPointerLeave = triggerProps.onMouseLeave;
+		return wrapperProps;
+	};
 	createEffect(() => {
 		const element = triggerElement();
 		if (!element) return;
@@ -8649,6 +8762,8 @@ const TriggerWrapper = (props) => {
 		const describedBy = triggerProps["aria-describedby"];
 		if (describedBy) element.setAttribute("aria-describedby", describedBy);
 		else element.removeAttribute("aria-describedby");
+		const wrapper = wrapperElement();
+		const targets = Array.from(new Set([element, wrapper].filter(Boolean)));
 		const listeners = [];
 		for (const [propName, eventName] of [
 			["onFocus", "focus"],
@@ -8663,19 +8778,28 @@ const TriggerWrapper = (props) => {
 			["onPointerDown", "pointerdown"],
 			["onKeyDown", "keydown"]
 		]) {
-			const handler = triggerProps[propName];
+			let handler = triggerProps[propName];
+			if (!handler && propName === "onPointerEnter") handler = triggerProps.onMouseEnter;
+			else if (!handler && propName === "onPointerLeave") handler = triggerProps.onMouseLeave;
 			if (typeof handler === "function") {
 				const listener = handler;
-				element.addEventListener(eventName, listener);
-				listeners.push([eventName, listener]);
+				for (const target of targets) {
+					target.addEventListener(eventName, listener);
+					listeners.push([
+						target,
+						eventName,
+						listener
+					]);
+				}
 			}
 		}
 		onCleanup(() => {
-			for (const [eventName, listener] of listeners) element.removeEventListener(eventName, listener);
+			for (const [target, eventName, listener] of listeners) target.removeEventListener(eventName, listener);
 			if (describedBy && element.getAttribute("aria-describedby") === describedBy) element.removeAttribute("aria-describedby");
 		});
 	});
 	const handleRef = (span) => {
+		setWrapperElement(span);
 		const findElementChild = (el) => {
 			for (const child of el.children) {
 				if (child instanceof HTMLElement) return child;
@@ -8709,7 +8833,7 @@ const TriggerWrapper = (props) => {
 			props.ref(immediateChild);
 		} else requestAnimationFrame(resolveRef);
 	};
-	return <span ref={handleRef} style={{ display: "contents" }}>
+	return <span {...getWrapperEventProps()} ref={handleRef} style={{ display: "contents" }}>
       {child()}
     </span>;
 };
@@ -8982,6 +9106,10 @@ function assignRef$7(ref, el) {
 const ComboBoxContext = createContext(null);
 const ComboBoxStateContext = createContext(null);
 const ComboBoxValueContext = ComboBoxContext;
+function callInputKeyDown(handler, event) {
+	if (typeof handler === "function") handler(event);
+	else if (handler) handler[0](handler[1], event);
+}
 /**
 * A combobox combines a text input with a listbox, allowing users to filter a list of options.
 */
@@ -9026,6 +9154,10 @@ function ComboBox(props) {
 	let buttonRef = null;
 	let triggerRef = null;
 	let listBoxRef = null;
+	const optionActions = /* @__PURE__ */ new Map();
+	const runOptionAction = (key) => {
+		optionActions.get(key)?.();
+	};
 	const state = createComboBoxState({
 		get items() {
 			return stateProps.items;
@@ -9106,6 +9238,7 @@ function ComboBox(props) {
 			return ariaProps.isRequired;
 		}
 	});
+	const listState = createComboBoxListStateAdapter(state);
 	const effectiveFormValue = createMemo(() => {
 		if (stateProps.allowsCustomValue) return "text";
 		return stateProps.formValue ?? "key";
@@ -9121,6 +9254,19 @@ function ComboBox(props) {
 			return effectiveFormValue() === "text" ? stateProps.name : void 0;
 		}
 	}), state, () => inputRef, () => buttonRef, () => listBoxRef);
+	const getInputProps = () => {
+		const inputProps = comboBoxAria.inputProps;
+		const originalOnKeyDown = inputProps.onKeyDown;
+		return {
+			...inputProps,
+			onKeyDown: (event) => {
+				const focusedKey = state.focusedKey();
+				const optionAction = event.key === "Enter" && state.isOpen() && focusedKey != null && !state.isKeyDisabled(focusedKey) ? optionActions.get(focusedKey) : void 0;
+				callInputKeyDown(originalOnKeyDown, event);
+				optionAction?.();
+			}
+		};
+	};
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
 		return ariaProps.isDisabled;
 	} });
@@ -9150,9 +9296,13 @@ function ComboBox(props) {
 	const ComboBoxChildren = () => typeof local.children === "function" ? local.children(renderValues()) : local.children;
 	return <ComboBoxContext.Provider value={{
 		state,
-		inputProps: () => comboBoxAria.inputProps,
+		listState,
+		inputProps: getInputProps,
 		buttonProps: () => comboBoxAria.buttonProps,
-		listBoxProps: () => comboBoxAria.listBoxProps,
+		listBoxProps: () => ({
+			...comboBoxAria.listBoxProps,
+			onAction: runOptionAction
+		}),
 		labelProps: () => comboBoxAria.labelProps,
 		descriptionProps: () => comboBoxAria.descriptionProps,
 		errorMessageProps: () => comboBoxAria.errorMessageProps,
@@ -9176,6 +9326,11 @@ function ComboBox(props) {
 		setListBoxRef: (el) => {
 			listBoxRef = el;
 		},
+		registerOptionAction: (key, action) => {
+			if (action) optionActions.set(key, action);
+			else optionActions.delete(key);
+		},
+		runOptionAction,
 		slots: local.slots
 	}}>
       <ComboBoxStateContext.Provider value={state}>
@@ -9379,7 +9534,7 @@ function ComboBoxListBox(props) {
 	const rawContext = useContext(ComboBoxContext);
 	if (!rawContext) throw new Error("ComboBoxListBox must be used within a ComboBox");
 	const context = rawContext;
-	const { state: comboBoxState, isOpen, inputRef, buttonRef, setListBoxRef } = context;
+	const { state: comboBoxState, listState, isOpen, inputRef, buttonRef, setListBoxRef } = context;
 	const state = comboBoxState;
 	let listBoxRef;
 	createInteractOutside({
@@ -9396,7 +9551,7 @@ function ComboBoxListBox(props) {
 			return !isOpen();
 		}
 	});
-	const { listBoxProps } = createListBox(context.listBoxProps, createComboBoxListStateAdapter(state));
+	const { listBoxProps } = createListBox(context.listBoxProps, listState);
 	const renderValues = createMemo(() => ({ isFocused: state.isFocused() }));
 	const renderProps = useRenderProps({
 		class: local.class,
@@ -9456,12 +9611,20 @@ function ComboBoxOption(props) {
 	]);
 	const stateContext = useContext(ComboBoxStateContext);
 	const comboBoxContext = useContext(ComboBoxContext);
-	if (!stateContext) throw new Error("ComboBoxOption must be used within a ComboBox");
+	if (!stateContext || !comboBoxContext) throw new Error("ComboBoxOption must be used within a ComboBox");
 	const state = stateContext;
+	const listState = comboBoxContext.listState;
 	const optionId = () => {
 		const listBoxId = getComboBoxData(state)?.listBoxId;
 		return listBoxId ? `${listBoxId}-option-${local.id}` : String(local.id);
 	};
+	createEffect(() => {
+		const key = local.id;
+		comboBoxContext?.registerOptionAction(key, local.onAction);
+		onCleanup(() => {
+			comboBoxContext?.registerOptionAction(key, void 0);
+		});
+	});
 	const optionAria = createOption({
 		key: local.id,
 		get optionId() {
@@ -9473,9 +9636,6 @@ function ComboBoxOption(props) {
 		get "aria-label"() {
 			return ariaProps["aria-label"];
 		},
-		get onAction() {
-			return local.onAction;
-		},
 		shouldSelectOnPressUp: true,
 		shouldFocusOnHover: true,
 		shouldUseVirtualFocus: true,
@@ -9488,8 +9648,11 @@ function ComboBoxOption(props) {
 		},
 		get onHoverChange() {
 			return ariaProps.onHoverChange;
+		},
+		get onAction() {
+			return local.onAction;
 		}
-	}, createComboBoxListStateAdapter(state));
+	}, listState);
 	const isOptionFocusVisible = () => optionAria.isFocusVisible() || optionAria.isFocused() && (comboBoxContext?.isFocusVisible() ?? false);
 	const renderValues = createMemo(() => ({
 		isSelected: optionAria.isSelected(),
@@ -10047,7 +10210,9 @@ function ModalContent(props) {
 		isExiting: local.isExiting ?? false
 	}));
 	const renderProps = useRenderProps({
-		children: props.children,
+		get children() {
+			return props.children;
+		},
 		class: local.class,
 		style: local.style,
 		defaultClassName: "solidaria-Modal"
@@ -10267,7 +10432,9 @@ function Popover(props) {
 		isExiting: local.isExiting ?? false
 	}));
 	const renderProps = useRenderProps({
-		children: props.children,
+		get children() {
+			return props.children;
+		},
 		class: local.class,
 		style: local.style,
 		defaultClassName: "solidaria-Popover"
@@ -10308,6 +10475,11 @@ function Popover(props) {
 		};
 	};
 	const shouldBeDialog = () => !local.isNonModal || resolvedTrigger() === "SubmenuTrigger";
+	const shouldContainFocus = () => {
+		if (!shouldBeDialog()) return false;
+		const trigger = resolvedTrigger();
+		return trigger !== "MenuTrigger" && trigger !== "SubmenuTrigger";
+	};
 	const portalContext = useUNSAFE_PortalContext();
 	const portalContainer = () => {
 		if (isSubPopover()) return popoverGroupContext?.() ?? portalContext.getContainer?.() ?? void 0;
@@ -10332,7 +10504,7 @@ function Popover(props) {
 		placement: popoverAria.placement,
 		arrowProps: () => popoverAria.arrowProps
 	}}>
-      <FocusScope contain={shouldBeDialog()} restoreFocus>
+      <FocusScope contain={shouldContainFocus()} restoreFocus>
         <div {...domProps()} {...cleanPopoverProps()} ref={popoverRef} id={overlayId()} role={shouldBeDialog() ? "dialog" : void 0} tabIndex={shouldBeDialog() ? -1 : void 0} class={renderProps.class()} style={mergedStyle()} data-trigger={resolvedTrigger()} data-placement={popoverAria.placement()} data-entering={dataAttr(local.isEntering)} data-exiting={dataAttr(local.isExiting)}>
           <Show when={!local.isNonModal}>
             <PopoverDismissButton onDismiss={close} />
@@ -10475,7 +10647,9 @@ function ToastRegion(props) {
 	});
 	const renderValues = createMemo(() => ({ visibleToasts: () => state()?.visibleToasts() ?? [] }));
 	const renderProps = useRenderProps({
-		children: props.children,
+		get children() {
+			return props.children;
+		},
 		class: local.class,
 		style: local.style,
 		defaultClassName: "solidaria-ToastRegion"
@@ -11206,6 +11380,7 @@ function Tag(props) {
 		get key() {
 			return local.id;
 		},
+		role: "row",
 		get isDisabled() {
 			return local.isDisabled || groupContext?.isDisabled;
 		},
@@ -12537,8 +12712,60 @@ function DatePickerInner(props) {
 	const [triggerRef, setTriggerRef] = createSignal(null);
 	const [fieldRef, setFieldRef] = createSignal(null);
 	const datePickerState = createDatePickerState({
-		...stateProps,
-		shouldCloseOnSelect: local.shouldCloseOnSelect
+		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() {