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

package/dist/NumberField.js

@@ -1,8 +1,24 @@
-import { Provider, filterDOMProps, 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.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/NumberField.tsx
+import { Provider, attrString as attrString$1, attrTrue, dataAttr, filterDOMProps, useRenderProps, useSlot } from "./utils.js";
 import { TextContext } from "./Text.js";
-import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
-import { createContext, createMemo, splitProps, useContext } from "solid-js";
+import { FieldErrorContext } from "./FieldError.js";
+import { FormContext, resolveValidationBehavior } from "./Form.js";
+import { n as LabelContext } from "./Label.js";
+import { createComponent, getNextElement, insert, ref, runHydrationEvents, scope, spread, template } from "@solidjs/web";
+import { createContext, createMemo, createSignal, useContext } from "solid-js";
 import { createButton, createFocusRing, createHover, createNumberField } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createNumberFieldState } from "@proyecto-viviana/solid-stately";
 //#region src/NumberField.tsx
 /**
@@ -11,13 +27,16 @@ import { createNumberFieldState } from "@proyecto-viviana/solid-stately";
 * A pre-wired headless number field that combines state + aria hooks.
 * Port of react-aria-components/src/NumberField.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<label>`), _tmpl$3 = /*#__PURE__*/ template(`<input>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<input>`);
 const NumberFieldContext = createContext(null);
 const NumberFieldStateContext = createContext(null);
 /**
 * A number field allows a user to enter a number and increment/decrement the value.
 */
 function NumberField(props) {
+	const formContext = useContext(FormContext);
 	const [local, stateProps, ariaProps, rest] = splitProps(props, [
 		"children",
 		"class",
@@ -54,7 +73,11 @@ function NumberField(props) {
 		"onKeyUp",
 		"onPaste",
 		"onCopy",
-		"onCut"
+		"onCut",
+		"validationBehavior",
+		"commitBehavior",
+		"validate",
+		"validationState"
 	]);
 	const state = createNumberFieldState({
 		get value() {
@@ -86,15 +109,34 @@ function NumberField(props) {
 		},
 		get isReadOnly() {
 			return ariaProps.isReadOnly;
+		},
+		get isInvalid() {
+			return ariaProps.isInvalid;
+		},
+		get validationState() {
+			return ariaProps.validationState;
+		},
+		get validate() {
+			return ariaProps.validate;
+		},
+		get name() {
+			return ariaProps.name;
+		},
+		get validationBehavior() {
+			return resolveValidationBehavior(ariaProps.validationBehavior, formContext);
+		},
+		get commitBehavior() {
+			return ariaProps.commitBehavior;
 		}
 	});
-	let inputRef;
+	const [inputEl, setInputEl] = createSignal(void 0, { ownedWrite: true });
 	const setInputRef = (el) => {
-		inputRef = el;
+		setInputEl(el);
 	};
+	const [labelRef, hasLabel] = useSlot(!ariaProps["aria-label"] && !ariaProps["aria-labelledby"]);
 	const numberFieldAria = createNumberField({
 		get label() {
-			return ariaProps.label;
+			return ariaProps.label ?? hasLabel();
 		},
 		get "aria-label"() {
 			return ariaProps["aria-label"];
@@ -158,11 +200,23 @@ function NumberField(props) {
 		},
 		get onCut() {
 			return ariaProps.onCut;
+		},
+		get validationBehavior() {
+			return ariaProps.validationBehavior;
+		},
+		get commitBehavior() {
+			return ariaProps.commitBehavior;
+		},
+		get validate() {
+			return ariaProps.validate;
+		},
+		get validationState() {
+			return ariaProps.validationState;
 		}
-	}, state, () => inputRef ?? null);
+	}, state, () => inputEl() ?? null);
 	const renderValues = createMemo(() => ({
 		isDisabled: ariaProps.isDisabled ?? false,
-		isInvalid: ariaProps.isInvalid ?? false,
+		isInvalid: numberFieldAria.isInvalid,
 		isRequired: ariaProps.isRequired ?? false,
 		isReadOnly: ariaProps.isReadOnly ?? false,
 		value: state.numberValue()
@@ -180,7 +234,7 @@ function NumberField(props) {
 			return ariaProps.isDisabled ?? false;
 		},
 		get isInvalid() {
-			return ariaProps.isInvalid ?? false;
+			return numberFieldAria.isInvalid;
 		},
 		get isRequired() {
 			return ariaProps.isRequired ?? false;
@@ -224,7 +278,7 @@ function NumberField(props) {
 			return ariaProps.isDisabled ?? false;
 		},
 		get isInvalid() {
-			return ariaProps.isInvalid ?? false;
+			return numberFieldAria.isInvalid;
 		},
 		get isRequired() {
 			return ariaProps.isRequired ?? false;
@@ -232,7 +286,22 @@ function NumberField(props) {
 		get isReadOnly() {
 			return ariaProps.isReadOnly ?? false;
 		},
-		setInputRef
+		setInputRef,
+		labelRef
+	};
+	const labelContextValue = {
+		ref: labelRef,
+		get id() {
+			return numberFieldAria.labelProps.id;
+		},
+		get htmlFor() {
+			const labelProps = numberFieldAria.labelProps;
+			return attrString$1(labelProps.htmlFor ?? labelProps.for);
+		},
+		get for() {
+			const labelProps = numberFieldAria.labelProps;
+			return attrString$1(labelProps.htmlFor ?? labelProps.for);
+		}
 	};
 	const textSlots = { slots: {
 		get description() {
@@ -242,41 +311,68 @@ function NumberField(props) {
 			return numberFieldAria.errorMessageProps;
 		}
 	} };
-	return createComponent(NumberFieldStateContext.Provider, {
-		value: state,
+	const fieldValidation = createMemo(() => {
+		const isInvalid = numberFieldAria.isInvalid;
+		const validationErrors = numberFieldAria.validationErrors;
+		const errorMessage = ariaProps.errorMessage;
+		return {
+			isInvalid,
+			validationErrors: isInvalid && validationErrors.length === 0 && typeof errorMessage === "string" ? [errorMessage] : validationErrors,
+			validationDetails: numberFieldAria.validationDetails
+		};
+	});
+	return createComponent(FieldErrorContext, {
+		value: {
+			get validation() {
+				return fieldValidation();
+			},
+			get errorMessageProps() {
+				return numberFieldAria.errorMessageProps;
+			}
+		},
 		get children() {
-			return createComponent(NumberFieldContext.Provider, {
-				value: contextValue,
+			return createComponent(LabelContext, {
+				value: labelContextValue,
 				get children() {
-					var _el$ = getNextElement(_tmpl$);
-					spread(_el$, mergeProps(domProps, {
-						get ["class"]() {
-							return renderProps.class();
-						},
-						get style() {
-							return renderProps.style();
-						},
-						get ["data-disabled"]() {
-							return ariaProps.isDisabled || void 0;
-						},
-						get ["data-invalid"]() {
-							return ariaProps.isInvalid || void 0;
-						},
-						get ["data-required"]() {
-							return ariaProps.isRequired || void 0;
-						},
-						get ["data-readonly"]() {
-							return ariaProps.isReadOnly || void 0;
-						}
-					}), false, true);
-					insert(_el$, createComponent(Provider, {
-						values: [[TextContext, textSlots]],
+					return createComponent(NumberFieldStateContext, {
+						value: state,
 						get children() {
-							return fieldChildren();
+							return createComponent(NumberFieldContext, {
+								value: contextValue,
+								get children() {
+									var _el$ = getNextElement(_tmpl$);
+									spread(_el$, [domProps, {
+										get "class"() {
+											return renderProps.class();
+										},
+										get style() {
+											return renderProps.style();
+										},
+										get "data-disabled"() {
+											return dataAttr(ariaProps.isDisabled);
+										},
+										get "data-invalid"() {
+											return dataAttr(numberFieldAria.isInvalid);
+										},
+										get "data-required"() {
+											return dataAttr(ariaProps.isRequired);
+										},
+										get "data-readonly"() {
+											return dataAttr(ariaProps.isReadOnly);
+										}
+									}], true);
+									insert(_el$, createComponent(Provider, {
+										values: [[TextContext, textSlots]],
+										get children() {
+											return fieldChildren();
+										}
+									}));
+									runHydrationEvents();
+									return _el$;
+								}
+							});
 						}
-					}));
-					runHydrationEvents();
-					return _el$;
+					});
 				}
 			});
 		}
@@ -292,20 +388,23 @@ function NumberFieldLabel(props) {
 		const { ref: _ref, ...rest } = context.labelProps;
 		return rest;
 	};
-	return (() => {
-		var _el$2 = getNextElement(_tmpl$2);
-		spread(_el$2, mergeProps(cleanLabelProps, {
-			get ["class"]() {
-				return props.class ?? "solidaria-NumberField-label";
-			},
-			get style() {
-				return props.style;
-			}
-		}), false, true);
-		insert(_el$2, () => props.children);
-		runHydrationEvents();
-		return _el$2;
-	})();
+	var _el$2 = getNextElement(_tmpl$2);
+	ref(() => {
+		return (el) => context.labelRef?.(el);
+	}, _el$2);
+	spread(_el$2, [cleanLabelProps, {
+		get "class"() {
+			return props.class ?? "solidaria-NumberField-label";
+		},
+		get style() {
+			return props.style;
+		}
+	}], true);
+	insert(_el$2, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$2;
 }
 /**
 * The input group for a number field (contains input and buttons).
@@ -322,20 +421,24 @@ function NumberFieldGroup(props) {
 		const { ref: _ref, ...rest } = context.groupProps;
 		return rest;
 	};
-	return (() => {
-		var _el$3 = getNextElement(_tmpl$);
-		spread(_el$3, mergeProps(domProps, cleanGroupProps, {
-			get ["class"]() {
+	var _el$3 = getNextElement(_tmpl$);
+	spread(_el$3, [
+		domProps,
+		cleanGroupProps,
+		{
+			get "class"() {
 				return local.class ?? "solidaria-NumberField-group";
 			},
 			get style() {
 				return local.style;
 			}
-		}), false, true);
-		insert(_el$3, () => local.children);
-		runHydrationEvents();
-		return _el$3;
-	})();
+		}
+	], true);
+	insert(_el$3, scope(() => {
+		return local.children;
+	}));
+	runHydrationEvents();
+	return _el$3;
 }
 /**
 * The input element for a number field.
@@ -380,37 +483,43 @@ function NumberFieldInput(props) {
 		context.inputProps.onInput?.(event);
 		domProps.onInput?.(event);
 	};
-	return (() => {
-		var _el$4 = getNextElement(_tmpl$3);
-		var _ref$ = context.setInputRef;
-		typeof _ref$ === "function" ? use(_ref$, _el$4) : context.setInputRef = _el$4;
-		spread(_el$4, mergeProps(domProps, cleanInputProps, cleanFocusProps, cleanHoverProps, {
-			"onInput": handleInput,
-			get ["class"]() {
+	var _el$4 = getNextElement(_tmpl$3);
+	var _ref$ = context.setInputRef;
+	typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => {
+		return _ref$;
+	}, _el$4) : context.setInputRef = _el$4;
+	spread(_el$4, [
+		domProps,
+		cleanInputProps,
+		cleanFocusProps,
+		cleanHoverProps,
+		{
+			onInput: handleInput,
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return renderProps.style();
 			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
+			get "data-focused"() {
+				return dataAttr(isFocused());
 			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() || void 0;
+			get "data-focus-visible"() {
+				return dataAttr(isFocusVisible());
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			get "data-hovered"() {
+				return dataAttr(isHovered());
 			},
-			get ["data-disabled"]() {
-				return context.isDisabled || void 0;
+			get "data-disabled"() {
+				return dataAttr(context.isDisabled);
 			},
-			get ["data-invalid"]() {
-				return context.isInvalid || void 0;
+			get "data-invalid"() {
+				return dataAttr(context.isInvalid);
 			}
-		}), false, false);
-		runHydrationEvents();
-		return _el$4;
-	})();
+		}
+	], false);
+	runHydrationEvents();
+	return _el$4;
 }
 /**
 * The increment button for a number field.
@@ -426,7 +535,7 @@ function NumberFieldIncrementButton(props) {
 	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;
+		const { onClick: _onClick, disabled: _disabled, type: _type, tabindex: _tabIndex, ...rest } = context.incrementButtonProps;
 		return rest;
 	};
 	const buttonAria = createButton({
@@ -460,32 +569,37 @@ function NumberFieldIncrementButton(props) {
 		const { ref: _ref, ...rest } = hoverProps;
 		return rest;
 	};
-	return (() => {
-		var _el$5 = getNextElement(_tmpl$);
-		spread(_el$5, mergeProps(domProps, cleanButtonProps, cleanHoverProps, {
-			get ["aria-disabled"]() {
-				return isDisabled() || void 0;
+	var _el$5 = getNextElement(_tmpl$);
+	spread(_el$5, [
+		domProps,
+		cleanButtonProps,
+		cleanHoverProps,
+		{
+			get "aria-disabled"() {
+				return attrTrue(isDisabled());
 			},
-			get ["class"]() {
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return renderProps.style();
 			},
-			get ["data-pressed"]() {
-				return buttonAria.isPressed() || void 0;
+			get "data-pressed"() {
+				return dataAttr(buttonAria.isPressed());
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			get "data-hovered"() {
+				return dataAttr(isHovered());
 			},
-			get ["data-disabled"]() {
-				return isDisabled() || void 0;
+			get "data-disabled"() {
+				return dataAttr(isDisabled());
 			}
-		}), false, true);
-		insert(_el$5, () => renderProps.renderChildren());
-		runHydrationEvents();
-		return _el$5;
-	})();
+		}
+	], true);
+	insert(_el$5, scope(() => {
+		return renderProps.renderChildren();
+	}));
+	runHydrationEvents();
+	return _el$5;
 }
 /**
 * The decrement button for a number field.
@@ -501,7 +615,7 @@ function NumberFieldDecrementButton(props) {
 	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;
+		const { onClick: _onClick, disabled: _disabled, type: _type, tabindex: _tabIndex, ...rest } = context.decrementButtonProps;
 		return rest;
 	};
 	const buttonAria = createButton({
@@ -535,32 +649,37 @@ function NumberFieldDecrementButton(props) {
 		const { ref: _ref, ...rest } = hoverProps;
 		return rest;
 	};
-	return (() => {
-		var _el$6 = getNextElement(_tmpl$);
-		spread(_el$6, mergeProps(domProps, cleanButtonProps, cleanHoverProps, {
-			get ["aria-disabled"]() {
-				return isDisabled() || void 0;
+	var _el$6 = getNextElement(_tmpl$);
+	spread(_el$6, [
+		domProps,
+		cleanButtonProps,
+		cleanHoverProps,
+		{
+			get "aria-disabled"() {
+				return attrTrue(isDisabled());
 			},
-			get ["class"]() {
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return renderProps.style();
 			},
-			get ["data-pressed"]() {
-				return buttonAria.isPressed() || void 0;
+			get "data-pressed"() {
+				return dataAttr(buttonAria.isPressed());
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			get "data-hovered"() {
+				return dataAttr(isHovered());
 			},
-			get ["data-disabled"]() {
-				return isDisabled() || void 0;
+			get "data-disabled"() {
+				return dataAttr(isDisabled());
 			}
-		}), false, true);
-		insert(_el$6, () => renderProps.renderChildren());
-		runHydrationEvents();
-		return _el$6;
-	})();
+		}
+	], true);
+	insert(_el$6, scope(() => {
+		return renderProps.renderChildren();
+	}));
+	runHydrationEvents();
+	return _el$6;
 }
 NumberField.Label = NumberFieldLabel;
 NumberField.Group = NumberFieldGroup;