@proyecto-viviana/solidaria-components 0.3.1 → 0.3.2

package/dist/index.js

@@ -383,6 +383,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.
@@ -442,8 +474,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;
@@ -463,7 +494,7 @@ function Button(props) {
 		get isDisabled() {
 			return resolveDisabled() || resolvePending();
 		}
-	});
+	}));
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const { isHovered, hoverProps } = createHover({
 		get isDisabled() {
@@ -550,6 +581,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 };
@@ -577,6 +613,7 @@ function Button(props) {
 	const rootProps = () => ({
 		...domProps(),
 		...disablePendingInteractions(cleanButtonProps()),
+		...directAriaProps(),
 		...triggerAriaProps(),
 		...cleanFocusProps(),
 		...cleanHoverProps(),
@@ -2606,6 +2643,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 ?? {};
@@ -2664,6 +2707,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 ?? {};
@@ -2738,7 +2787,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$2(contextBaseProps(), contextSlotProps ?? {}, props) : props, formContext), [
@@ -2773,6 +2822,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,
@@ -2858,10 +2908,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;
 	});
@@ -2881,7 +2934,7 @@ function TextField(props) {
 	});
 	const customRootProps = () => ({
 		...rootProps(),
-		children: fieldChildren
+		children: createComponent(FieldChildren, {})
 	});
 	return createComponent(FieldErrorContext.Provider, {
 		value: fieldErrorContext,
@@ -2892,7 +2945,7 @@ function TextField(props) {
 					return memo(() => !!local.render)() ? local.render(customRootProps(), renderValues()) : (() => {
 						var _el$4 = getNextElement(_tmpl$4$19);
 						spread(_el$4, mergeProps(rootProps), false, true);
-						insert(_el$4, fieldChildren);
+						insert(_el$4, createComponent(FieldChildren, {}));
 						runHydrationEvents();
 						return _el$4;
 					})();
@@ -5713,6 +5766,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) {
@@ -5724,6 +5778,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(() => {
@@ -5731,6 +5791,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,
@@ -5763,17 +5836,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();
@@ -6234,6 +6312,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 = () => createComponent(SharedElementTransition, { get children() {
 		return memo(() => !!(state.collection().size === 0 && !usesStaticChildren() && local.renderEmptyState))() ? (() => {
 			var _el$2 = getNextElement(_tmpl$2$28), _el$3 = _el$2.firstChild;
@@ -6347,7 +6426,7 @@ function Menu(props) {
 								get children() {
 									return createComponent(MenuItemContext.Provider, {
 										get value() {
-											return { closeOnSelect: local.shouldCloseOnSelect };
+											return menuItemContextValue();
 										},
 										get children() {
 											return createComponent(CollectionRendererContext.Provider, {
@@ -9483,8 +9562,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();
@@ -9552,8 +9635,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();
@@ -10638,7 +10725,7 @@ Slider.Output = SliderOutput;
 * A tooltip displays a description of an element on hover or focus.
 * Port of react-aria-components/src/Tooltip.tsx
 */
-var _tmpl$$26 = /* @__PURE__ */ template(`<span style=display:contents>`), _tmpl$2$21 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$26 = /* @__PURE__ */ template(`<span>`), _tmpl$2$21 = /* @__PURE__ */ template(`<div>`);
 const TooltipTriggerContext = createContext(null);
 const TooltipContext = TooltipTriggerContext;
 const TooltipTriggerStateContext = createContext(null);
@@ -10732,6 +10819,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;
@@ -10739,6 +10850,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"],
@@ -10753,19 +10866,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;
@@ -10802,7 +10924,9 @@ const TriggerWrapper = (props) => {
 	return (() => {
 		var _el$ = getNextElement(_tmpl$$26);
 		use(handleRef, _el$);
+		spread(_el$, mergeProps(getWrapperEventProps, { "style": { display: "contents" } }), false, true);
 		insert(_el$, child);
+		runHydrationEvents();
 		return _el$;
 	})();
 };
@@ -11139,6 +11263,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.
 */
@@ -11183,6 +11311,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;
@@ -11263,6 +11395,7 @@ function ComboBox(props) {
 			return ariaProps.isRequired;
 		}
 	});
+	const listState = createComboBoxListStateAdapter(state);
 	const effectiveFormValue = createMemo(() => {
 		if (stateProps.allowsCustomValue) return "text";
 		return stateProps.formValue ?? "key";
@@ -11278,6 +11411,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;
 	} });
@@ -11309,9 +11455,13 @@ function ComboBox(props) {
 		get value() {
 			return {
 				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,
@@ -11335,6 +11485,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
 			};
 		},
@@ -11703,7 +11858,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({
@@ -11720,7 +11875,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,
@@ -11819,12 +11974,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() {
@@ -11836,9 +11999,6 @@ function ComboBoxOption(props) {
 		get "aria-label"() {
 			return ariaProps["aria-label"];
 		},
-		get onAction() {
-			return local.onAction;
-		},
 		shouldSelectOnPressUp: true,
 		shouldFocusOnHover: true,
 		shouldUseVirtualFocus: true,
@@ -11851,8 +12011,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(),
@@ -12956,6 +13119,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;
@@ -13005,7 +13173,7 @@ function Popover(props) {
 		get children() {
 			return createComponent(FocusScope, {
 				get contain() {
-					return shouldBeDialog();
+					return shouldContainFocus();
 				},
 				restoreFocus: true,
 				get children() {
@@ -14301,6 +14469,7 @@ function Tag(props) {
 		get key() {
 			return local.id;
 		},
+		role: "row",
 		get isDisabled() {
 			return local.isDisabled || groupContext?.isDisabled;
 		},
@@ -16412,8 +16581,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() {