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

package/dist/DateField2.js

@@ -1,12 +1,41 @@
-import { Provider, dataAttr, useIsHydrated, useRenderProps } from "./utils.js";
+/*
+* 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.
+*/
+/*
+* 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/DateField.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/HiddenDateInput.tsx
+import { Provider, dataAttr, useRenderProps } from "./utils.js";
 import { TextContext } from "./Text.js";
-import { FormContext } from "./Form.js";
-import { className, createComponent, effect, getNextElement, insert, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
-import { Index, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { createDateField, createDateSegment, createFocusRing, createHover, createVisuallyHidden, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { FormContext, resolveValidationBehavior } from "./Form.js";
+import { className, createComponent, effect, getNextElement, insert, readShallow, ref, runHydrationEvents, scope, setAttribute, setProperty, spread, style, template } from "@solidjs/web";
+import { For, Show, createContext, createMemo, createSignal, createTrackedEffect, useContext } from "solid-js";
+import { createDateField, createDateSegment, createFocusRing, createHover, createVisuallyHidden, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { access, createDateFieldState } from "@proyecto-viviana/solid-stately";
 import { parseDate, parseDateTime, toCalendarDate, toCalendarDateTime, toLocalTimeZone } from "@internationalized/date";
 //#region src/DateRangePickerContext.tsx
+/**
+* Local Solid context shared by the date-range picker fields.
+* The owning DatePicker module records the upstream component source.
+*/
 const DateRangePickerContext = createContext(null);
 function useDateRangePickerContext() {
 	const context = useContext(DateRangePickerContext);
@@ -21,36 +50,12 @@ function useDateRangePickerContext() {
 * Pre-wired headless date field component with segment-based editing.
 * Port of react-aria-components/src/DateField.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div class="solidaria-DateField solidaria-DateField--placeholder"aria-hidden=true>`), _tmpl$2 = /*#__PURE__*/ template(`<div>`), _tmpl$3 = /*#__PURE__*/ template(`<div><input tabindex=-1 form>`), _tmpl$4 = /*#__PURE__*/ template(`<input>`), _tmpl$5 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><input tabindex=-1 form>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span>`);
 const DateFieldContext = createContext(null);
 const DateFieldStateContext = 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 useDateFieldContext() {
 	const context = useContext(DateFieldContext);
 	if (!context) throw new Error("DateField components must be used within a DateField");
@@ -78,25 +83,14 @@ function useDateInputContext(slot) {
 * ```
 */
 function DateField(props) {
-	const isHydrated = useIsHydrated();
-	const formContext = useContext(FormContext);
-	return createComponent(Show, {
-		get when() {
-			return isHydrated();
-		},
-		get fallback() {
-			return getNextElement(_tmpl$);
-		},
-		get children() {
-			return createComponent(DateFieldInner, mergeProps(props, { __formContext: formContext }));
-		}
-	});
+	return createComponent(DateFieldInner, props);
 }
 /**
 * Internal DateField component that renders after client mount.
 */
 function DateFieldInner(props) {
-	const [local, stateProps, rest] = splitProps(withFormValidationBehavior(props, props.__formContext ?? useContext(FormContext)), [
+	const formContext = props.__formContext ?? useContext(FormContext);
+	const [local, stateProps, rest] = splitProps(props, [
 		"children",
 		"class",
 		"style",
@@ -133,7 +127,7 @@ function DateFieldInner(props) {
 		isDisabled: access(stateProps.isDisabled),
 		isReadOnly: access(stateProps.isReadOnly),
 		isRequired: access(stateProps.isRequired),
-		validationBehavior: stateProps.validationBehavior ?? "native",
+		validationBehavior: resolveValidationBehavior(stateProps.validationBehavior, formContext),
 		description: stateProps.description,
 		errorMessage: stateProps.errorMessage,
 		inputRef: () => validationInputRef() ?? void 0
@@ -157,10 +151,10 @@ function DateFieldInner(props) {
 			return fieldAria.errorMessageProps;
 		}
 	} };
-	return createComponent(DateFieldStateContext.Provider, {
+	return createComponent(DateFieldStateContext, {
 		value: state,
 		get children() {
-			return createComponent(DateFieldContext.Provider, {
+			return createComponent(DateFieldContext, {
 				value: {
 					state,
 					aria: {
@@ -171,7 +165,7 @@ function DateFieldInner(props) {
 							return fieldAria.fieldProps;
 						},
 						get hiddenInputProps() {
-							return mergeProps$2(fieldAria.inputProps, { ref: setValidationInputRef });
+							return mergeProps$1(fieldAria.inputProps, { ref: setValidationInputRef });
 						},
 						get descriptionProps() {
 							return fieldAria.descriptionProps;
@@ -183,32 +177,34 @@ function DateFieldInner(props) {
 				},
 				get children() {
 					return [(() => {
-						var _el$2 = getNextElement(_tmpl$2);
-						use(setFieldRef, _el$2);
-						insert(_el$2, createComponent(Provider, {
+						var _el$ = getNextElement(_tmpl$);
+						ref(() => {
+							return setFieldRef;
+						}, _el$);
+						insert(_el$, createComponent(Provider, {
 							values: [[TextContext, textSlots]],
 							get children() {
 								return local.children;
 							}
 						}));
-						effect((_p$) => {
-							var _v$ = renderProps.class(), _v$2 = renderProps.style(), _v$3 = dataAttr(state.isDisabled()), _v$4 = dataAttr(state.isReadOnly()), _v$5 = dataAttr(state.isRequired()), _v$6 = dataAttr(state.isInvalid());
-							_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-							_p$.t = style(_el$2, _v$2, _p$.t);
-							_v$3 !== _p$.a && setAttribute(_el$2, "data-disabled", _p$.a = _v$3);
-							_v$4 !== _p$.o && setAttribute(_el$2, "data-readonly", _p$.o = _v$4);
-							_v$5 !== _p$.i && setAttribute(_el$2, "data-required", _p$.i = _v$5);
-							_v$6 !== _p$.n && setAttribute(_el$2, "data-invalid", _p$.n = _v$6);
-							return _p$;
-						}, {
-							e: void 0,
-							t: void 0,
-							a: void 0,
-							o: void 0,
-							i: void 0,
-							n: void 0
+						effect(() => {
+							return {
+								e: readShallow(renderProps.class()),
+								t: readShallow(renderProps.style()),
+								a: dataAttr(state.isDisabled()),
+								o: dataAttr(state.isReadOnly()),
+								i: dataAttr(state.isRequired()),
+								n: dataAttr(state.isInvalid())
+							};
+						}, ({ e, t, a, o, i, n }, _p$) => {
+							className(_el$, e, _p$?.e);
+							style(_el$, t, _p$?.t);
+							a !== _p$?.a && setAttribute(_el$, "data-disabled", a);
+							o !== _p$?.o && setAttribute(_el$, "data-readonly", o);
+							i !== _p$?.i && setAttribute(_el$, "data-required", i);
+							n !== _p$?.n && setAttribute(_el$, "data-invalid", n);
 						});
-						return _el$2;
+						return _el$;
 					})(), createComponent(RootHiddenDateInput, {
 						get autoComplete() {
 							return rest.autoComplete;
@@ -243,8 +239,8 @@ const HIDDEN_GRANULARITY_MAP = {
 };
 /**
 * The always-rendered hidden date input at the DateField root — a faithful port
-* of react-aria-components' HiddenDateInput (private/HiddenDateInput.mjs). It is
-* NOT a validation input: it is a clipped, aria-hidden, tabIndex={-1} native
+* of react-aria-components/src/HiddenDateInput.tsx. It is NOT a validation
+* input: it is a clipped, aria-hidden, tabindex={-1} native
 * date input that mirrors the current value for browser autofill. `form=""`
 * detaches it from form submission (the DateInput's <Input> submits), so it
 * never double-counts in FormData. RAC renders it unconditionally, which is why
@@ -286,32 +282,34 @@ function RootHiddenDateInput(props) {
 			state.setValue(targetValue);
 		} catch {}
 	};
-	return (() => {
-		var _el$3 = getNextElement(_tmpl$3), _el$4 = _el$3.firstChild;
-		spread(_el$3, mergeProps(() => visuallyHiddenProps(), {
-			"aria-hidden": "true",
-			"data-testid": "hidden-dateinput-container"
-		}), false, true);
-		_el$4.addEventListener("change", onChange);
-		effect((_p$) => {
-			var _v$7 = props.autoComplete, _v$8 = props.isDisabled, _v$9 = inputType(), _v$0 = props.name, _v$1 = inputStep();
-			_v$7 !== _p$.e && setAttribute(_el$4, "autocomplete", _p$.e = _v$7);
-			_v$8 !== _p$.t && setProperty(_el$4, "disabled", _p$.t = _v$8);
-			_v$9 !== _p$.a && setAttribute(_el$4, "type", _p$.a = _v$9);
-			_v$0 !== _p$.o && setAttribute(_el$4, "name", _p$.o = _v$0);
-			_v$1 !== _p$.i && setAttribute(_el$4, "step", _p$.i = _v$1);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0
-		});
-		effect(() => setProperty(_el$4, "value", dateValue()));
-		runHydrationEvents();
-		return _el$3;
-	})();
+	var _el$2 = getNextElement(_tmpl$2);
+	var _el$3 = _el$2.firstChild;
+	spread(_el$2, [() => {
+		return visuallyHiddenProps();
+	}, {
+		"aria-hidden": "true",
+		"data-testid": "hidden-dateinput-container"
+	}], true);
+	_el$3.addEventListener("change", onChange);
+	effect(() => {
+		return {
+			e: props.autoComplete,
+			t: props.isDisabled,
+			a: inputType(),
+			o: props.name,
+			i: inputStep(),
+			n: dateValue()
+		};
+	}, ({ e, t, a, o, i, n }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$3, "autocomplete", e);
+		t !== _p$?.t && setAttribute(_el$3, "disabled", t);
+		a !== _p$?.a && setAttribute(_el$3, "type", a);
+		o !== _p$?.o && setAttribute(_el$3, "name", o);
+		i !== _p$?.i && setAttribute(_el$3, "step", i);
+		setProperty(_el$3, "value", n);
+	});
+	runHydrationEvents();
+	return _el$2;
 }
 /**
 * The input area containing date segments.
@@ -330,40 +328,47 @@ function DateInput(props) {
 		style: props.style,
 		defaultClassName: "solidaria-DateInput"
 	}, renderValues);
-	const inputDivProps = createMemo(() => mergeProps$2(aria.inputProps, {
+	const inputDivProps = createMemo(() => mergeProps$1(aria.inputProps, {
 		onFocusIn: () => setIsFocused(true),
 		onFocusOut: () => setIsFocused(false),
 		style: renderProps.style()
 	}));
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const element = inputRef();
 		const handler = props.onPointerDownCapture;
 		if (!element || !handler) return;
 		const listener = (event) => handler(event);
 		element.addEventListener("pointerdown", listener, { capture: true });
-		onCleanup(() => element.removeEventListener("pointerdown", listener, { capture: true }));
+		_s2Cleanups.push(() => element.removeEventListener("pointerdown", listener, { capture: true }));
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	return createComponent(DateFieldContext.Provider, {
+	return createComponent(DateFieldContext, {
 		value: context,
 		get children() {
 			return [(() => {
-				var _el$5 = getNextElement(_tmpl$2);
-				use(setInputRef, _el$5);
-				spread(_el$5, mergeProps(inputDivProps, {
-					get ["class"]() {
+				var _el$4 = getNextElement(_tmpl$);
+				ref(() => {
+					return setInputRef;
+				}, _el$4);
+				spread(_el$4, [inputDivProps, {
+					get "class"() {
 						return renderProps.class();
 					},
-					get ["data-disabled"]() {
+					get "data-disabled"() {
 						return dataAttr(state.isDisabled());
 					},
-					get ["data-focused"]() {
+					get "data-focused"() {
 						return dataAttr(isFocused());
 					}
-				}), false, true);
-				insert(_el$5, createComponent(Index, {
+				}], true);
+				insert(_el$4, createComponent(For, {
 					get each() {
 						return state.segments();
 					},
+					keyed: false,
 					children: (segment) => {
 						const liveSegment = new Proxy({}, {
 							get: (_t, key) => segment()[key],
@@ -373,16 +378,18 @@ function DateInput(props) {
 					}
 				}));
 				runHydrationEvents();
-				return _el$5;
+				return _el$4;
 			})(), createComponent(Show, {
 				get when() {
 					return aria.hiddenInputProps;
 				},
 				children: (hiddenInputProps) => (() => {
-					var _el$6 = getNextElement(_tmpl$4);
-					spread(_el$6, mergeProps(() => hiddenInputProps()), false, false);
+					var _el$5 = getNextElement(_tmpl$3);
+					spread(_el$5, () => {
+						return hiddenInputProps();
+					}, false);
 					runHydrationEvents();
-					return _el$6;
+					return _el$5;
 				})()
 			})];
 		}
@@ -422,79 +429,87 @@ function DateSegment(props) {
 		if (typeof props.children === "function") return renderProps.renderChildren();
 		return props.segment.text;
 	};
-	const segmentElementProps = createMemo(() => mergeProps$2(segmentAria.segmentProps, focusProps, hoverProps, { style: renderProps.style() }));
-	return (() => {
-		var _el$7 = getNextElement(_tmpl$5);
-		use(setSegmentRef, _el$7);
-		spread(_el$7, mergeProps(segmentElementProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get ["data-placeholder"]() {
-				return props.segment.isPlaceholder || void 0;
-			},
-			get ["data-invalid"]() {
-				return state.isInvalid() || void 0;
-			},
-			get ["data-readonly"]() {
-				return state.isReadOnly() || void 0;
-			},
-			get ["data-disabled"]() {
-				return state.isDisabled() || void 0;
-			},
-			get ["data-type"]() {
-				return props.segment.type;
-			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
-			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
-			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() || void 0;
-			}
-		}), false, true);
-		insert(_el$7, getChildren);
-		runHydrationEvents();
-		return _el$7;
-	})();
+	const segmentElementProps = createMemo(() => mergeProps$1(segmentAria.segmentProps, focusProps, hoverProps, { style: renderProps.style() }));
+	var _el$6 = getNextElement(_tmpl$4);
+	ref(() => {
+		return setSegmentRef;
+	}, _el$6);
+	spread(_el$6, [segmentElementProps, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get "data-placeholder"() {
+			return dataAttr(props.segment.isPlaceholder);
+		},
+		get "data-invalid"() {
+			return dataAttr(state.isInvalid());
+		},
+		get "data-readonly"() {
+			return dataAttr(state.isReadOnly());
+		},
+		get "data-disabled"() {
+			return dataAttr(state.isDisabled());
+		},
+		get "data-type"() {
+			return props.segment.type;
+		},
+		get "data-hovered"() {
+			return dataAttr(isHovered());
+		},
+		get "data-focused"() {
+			return dataAttr(isFocused());
+		},
+		get "data-focus-visible"() {
+			return dataAttr(isFocusVisible());
+		}
+	}], true);
+	insert(_el$6, scope(() => {
+		return getChildren();
+	}));
+	runHydrationEvents();
+	return _el$6;
 }
 function DateFieldLabel(props) {
 	const { aria } = useDateFieldContext();
-	return (() => {
-		var _el$8 = getNextElement(_tmpl$5);
-		spread(_el$8, mergeProps(() => aria.labelProps, { get ["class"]() {
-			return props.class;
-		} }), false, true);
-		insert(_el$8, () => props.children);
-		runHydrationEvents();
-		return _el$8;
-	})();
+	var _el$7 = getNextElement(_tmpl$4);
+	spread(_el$7, [() => {
+		return aria.labelProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$7, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$7;
 }
 function DateFieldDescription(props) {
 	const { aria } = useDateFieldContext();
-	return (() => {
-		var _el$9 = getNextElement(_tmpl$5);
-		spread(_el$9, mergeProps(() => aria.descriptionProps, { get ["class"]() {
-			return props.class;
-		} }), false, true);
-		insert(_el$9, () => props.children);
-		runHydrationEvents();
-		return _el$9;
-	})();
+	var _el$8 = getNextElement(_tmpl$4);
+	spread(_el$8, [() => {
+		return aria.descriptionProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$8, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$8;
 }
 function DateFieldErrorMessage(props) {
 	const { aria } = useDateFieldContext();
-	return (() => {
-		var _el$0 = getNextElement(_tmpl$5);
-		spread(_el$0, mergeProps(() => aria.errorMessageProps, { get ["class"]() {
-			return props.class;
-		} }), false, true);
-		insert(_el$0, () => props.children);
-		runHydrationEvents();
-		return _el$0;
-	})();
+	var _el$9 = getNextElement(_tmpl$4);
+	spread(_el$9, [() => {
+		return aria.errorMessageProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$9, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$9;
 }
 //#endregion
 export { DateFieldLabel as a, DateSegment as c, useDateRangePickerContext as d, DateFieldErrorMessage as i, useDateFieldContext as l, DateFieldContext as n, DateFieldStateContext as o, DateFieldDescription as r, DateInput as s, DateField as t, DateRangePickerContext as u };