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

package/dist/SearchField.js

@@ -1,12 +1,26 @@
-import { Provider, filterDOMProps, useRenderProps } from "./utils.js";
-import { FieldErrorContext } from "./FieldError.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/SearchField.tsx
+import { Provider, attrString as attrString$1, dataAttr, filterDOMProps, useRenderProps, useSlot } from "./utils.js";
 import { TextContext } from "./Text.js";
-import { FormContext } from "./Form.js";
+import { FieldErrorContext } from "./FieldError.js";
+import { FormContext, resolveValidationBehavior } from "./Form.js";
+import { n as LabelContext } from "./Label.js";
 import { useAutocompleteInput } from "./Autocomplete.js";
-import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
-import { Show, createContext, createMemo, onCleanup, onMount, splitProps, useContext } from "solid-js";
-import { createFocusRing, createHover, createPress, createSearchField, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
-import { VALID_VALIDITY_STATE, createSearchFieldState } from "@proyecto-viviana/solid-stately";
+import { createComponent, getNextElement, insert, ref, runHydrationEvents, scope, spread, template } from "@solidjs/web";
+import { Show, createContext, createMemo, onSettled, useContext } from "solid-js";
+import { createFocusRing, createHover, createPress, createSearchField, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { assignRef, splitProps } from "@proyecto-viviana/solidaria/utils";
+import { createSearchFieldState } from "@proyecto-viviana/solid-stately";
 //#region src/SearchField.tsx
 /**
 * SearchField component for solidaria-components
@@ -14,35 +28,11 @@ import { VALID_VALIDITY_STATE, createSearchFieldState } from "@proyecto-viviana/
 * A pre-wired headless search field that combines state + aria hooks.
 * Port of react-aria-components/src/SearchField.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<label>`), _tmpl$3 = /*#__PURE__*/ template(`<input>`), _tmpl$4 = /*#__PURE__*/ template(`<button>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<button>`);
 const SearchFieldContext = 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 eventWithCurrentTarget(event, element) {
 	return new Proxy(event, { get(target, property, receiver) {
 		if (property === "target" || property === "currentTarget") return element;
@@ -61,13 +51,13 @@ function clearDelegatedTextEntryHandlers(element) {
 function SearchField(props) {
 	const formContext = useContext(FormContext);
 	const contextProps = useContext(SearchFieldContext);
-	const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
+	const contextSlotProps = contextProps?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
 	const contextBaseProps = createMemo(() => {
 		if (!contextProps) return {};
 		const { state: _state, inputProps: _inputProps, clearButtonProps: _clearButtonProps, labelProps: _labelProps, descriptionProps: _descriptionProps, errorMessageProps: _errorMessageProps, isDisabled: _isDisabled, isInvalid: _isInvalid, isRequired: _isRequired, isReadOnly: _isReadOnly, setInputRef: _setInputRef, slots: _slots, ...restContextProps } = contextProps;
 		return restContextProps;
 	});
-	const baseProps = contextProps ? mergeProps$2(contextBaseProps(), contextSlotProps ?? {}, props) : props;
+	const baseProps = contextProps ? mergeProps$1(contextBaseProps(), contextSlotProps ?? {}, props) : props;
 	const autocompleteInput = useAutocompleteInput();
 	const autocompleteProps = autocompleteInput ? {
 		get value() {
@@ -78,7 +68,8 @@ function SearchField(props) {
 		onFocus: autocompleteInput.inputProps.onFocus,
 		onBlur: autocompleteInput.inputProps.onBlur
 	} : void 0;
-	const [local, stateProps, ariaProps, rest] = splitProps(withFormValidationBehavior(autocompleteProps ? mergeProps$2(baseProps, autocompleteProps) : baseProps, formContext), [
+	const mergedProps = autocompleteProps ? mergeProps$1(baseProps, autocompleteProps) : baseProps;
+	const [local, stateProps, ariaProps, rest] = splitProps(mergedProps, [
 		"children",
 		"class",
 		"style",
@@ -148,6 +139,7 @@ function SearchField(props) {
 	const setInputRef = (el) => {
 		inputRef = el;
 	};
+	const [labelRef, hasLabel] = useSlot(!ariaProps["aria-label"] && !ariaProps["aria-labelledby"]);
 	const searchFieldAria = createSearchField({
 		get isDisabled() {
 			return ariaProps.isDisabled;
@@ -162,7 +154,7 @@ function SearchField(props) {
 			return ariaProps.isInvalid;
 		},
 		get label() {
-			return ariaProps.label;
+			return ariaProps.label ?? hasLabel();
 		},
 		get "aria-label"() {
 			return ariaProps["aria-label"];
@@ -189,7 +181,7 @@ function SearchField(props) {
 			return ariaProps.form;
 		},
 		get validationBehavior() {
-			return ariaProps.validationBehavior;
+			return resolveValidationBehavior(ariaProps.validationBehavior, formContext);
 		},
 		get type() {
 			return ariaProps.type;
@@ -315,15 +307,12 @@ function SearchField(props) {
 	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
 	const fieldValidation = createMemo(() => {
 		const isInvalid = searchFieldAria.isInvalid;
+		const validationErrors = searchFieldAria.validationErrors;
 		const errorMessage = ariaProps.errorMessage;
 		return {
 			isInvalid,
-			validationErrors: isInvalid && typeof errorMessage === "string" ? [errorMessage] : [],
-			validationDetails: isInvalid ? {
-				...VALID_VALIDITY_STATE,
-				customError: true,
-				valid: false
-			} : VALID_VALIDITY_STATE
+			validationErrors: isInvalid && validationErrors.length === 0 && typeof errorMessage === "string" ? [errorMessage] : validationErrors,
+			validationDetails: searchFieldAria.validationDetails
 		};
 	});
 	const fieldErrorContext = {
@@ -345,6 +334,7 @@ function SearchField(props) {
 		get labelProps() {
 			return searchFieldAria.labelProps;
 		},
+		labelRef,
 		get descriptionProps() {
 			return searchFieldAria.descriptionProps;
 		},
@@ -377,46 +367,67 @@ function SearchField(props) {
 			return searchFieldAria.errorMessageProps;
 		}
 	} };
-	return createComponent(FieldErrorContext.Provider, {
+	const labelContextValue = {
+		ref: labelRef,
+		get id() {
+			return searchFieldAria.labelProps.id;
+		},
+		get htmlFor() {
+			const labelProps = searchFieldAria.labelProps;
+			return attrString$1(labelProps.htmlFor ?? labelProps.for);
+		},
+		get for() {
+			const labelProps = searchFieldAria.labelProps;
+			return attrString$1(labelProps.htmlFor ?? labelProps.for);
+		}
+	};
+	return createComponent(FieldErrorContext, {
 		value: fieldErrorContext,
 		get children() {
-			return createComponent(SearchFieldContext.Provider, {
-				value: contextValue,
+			return createComponent(LabelContext, {
+				value: labelContextValue,
 				get children() {
-					var _el$ = getNextElement(_tmpl$);
-					var _ref$ = local.ref;
-					typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
-					spread(_el$, mergeProps(domProps, {
-						get ["class"]() {
-							return renderProps.class();
-						},
-						get style() {
-							return renderProps.style();
-						},
-						get ["data-empty"]() {
-							return state.value() === "" || void 0;
-						},
-						get ["data-disabled"]() {
-							return ariaProps.isDisabled || void 0;
-						},
-						get ["data-invalid"]() {
-							return searchFieldAria.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(SearchFieldContext, {
+						value: contextValue,
 						get children() {
-							return fieldChildren();
+							var _el$ = getNextElement(_tmpl$);
+							var _ref$ = local.ref;
+							typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => {
+								return _ref$;
+							}, _el$) : local.ref = _el$;
+							spread(_el$, [domProps, {
+								get "class"() {
+									return renderProps.class();
+								},
+								get style() {
+									return renderProps.style();
+								},
+								get "data-empty"() {
+									return dataAttr(state.value() === "");
+								},
+								get "data-disabled"() {
+									return dataAttr(ariaProps.isDisabled);
+								},
+								get "data-invalid"() {
+									return dataAttr(searchFieldAria.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$;
+					});
 				}
 			});
 		}
@@ -432,20 +443,23 @@ function SearchFieldLabel(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-SearchField-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-SearchField-label";
+		},
+		get style() {
+			return props.style;
+		}
+	}], true);
+	insert(_el$2, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$2;
 }
 /**
 * The input element for a search field.
@@ -494,7 +508,11 @@ function SearchFieldInput(props) {
 		return {
 			"aria-controls": inputProps["aria-controls"],
 			"aria-autocomplete": inputProps["aria-autocomplete"],
-			"aria-activedescendant": inputProps["aria-activedescendant"]()
+			"aria-activedescendant": inputProps["aria-activedescendant"](),
+			autoComplete: inputProps.autoComplete,
+			autoCorrect: inputProps.autoCorrect,
+			spellCheck: inputProps.spellCheck,
+			enterKeyHint: inputProps.enterKeyHint
 		};
 	};
 	const mergedInputProps = () => ({
@@ -504,7 +522,7 @@ function SearchFieldInput(props) {
 		...cleanHoverProps(),
 		...autocompleteInputAttrs()
 	});
-	onMount(() => {
+	onSettled(() => {
 		const element = inputElement;
 		if (!element) return;
 		const inputHandler = (event) => {
@@ -522,46 +540,46 @@ function SearchFieldInput(props) {
 		element.addEventListener("input", inputHandler);
 		element.addEventListener("change", changeHandler);
 		clearDelegatedTextEntryHandlers(element);
-		onCleanup(() => {
+		return () => {
 			element.removeEventListener("input", inputHandler);
 			element.removeEventListener("change", changeHandler);
-		});
+		};
 	});
-	return (() => {
-		var _el$3 = getNextElement(_tmpl$3);
-		use((element) => {
+	var _el$3 = getNextElement(_tmpl$3);
+	ref(() => {
+		return (element) => {
 			inputElement = element;
 			context.setInputRef?.(element);
 			autocompleteInput?.inputRef(element);
-			const ref = domProps.ref;
-			if (typeof ref === "function") ref(element);
-		}, _el$3);
-		spread(_el$3, mergeProps(mergedInputProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
-			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() || void 0;
-			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
-			},
-			get ["data-disabled"]() {
-				return context.isDisabled || void 0;
-			},
-			get ["data-invalid"]() {
-				return context.isInvalid || void 0;
-			}
-		}), false, false);
-		runHydrationEvents();
-		return _el$3;
-	})();
+			assignRef(context.inputProps?.ref, element);
+			assignRef(domProps.ref, element);
+		};
+	}, _el$3);
+	spread(_el$3, [mergedInputProps, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get "data-focused"() {
+			return dataAttr(isFocused());
+		},
+		get "data-focus-visible"() {
+			return dataAttr(isFocusVisible());
+		},
+		get "data-hovered"() {
+			return dataAttr(isHovered());
+		},
+		get "data-disabled"() {
+			return dataAttr(context.isDisabled);
+		},
+		get "data-invalid"() {
+			return dataAttr(context.isInvalid);
+		}
+	}], false);
+	runHydrationEvents();
+	return _el$3;
 }
 /**
 * The clear button for a search field.
@@ -617,42 +635,51 @@ function SearchFieldClearButton(props) {
 		},
 		get children() {
 			var _el$4 = getNextElement(_tmpl$4);
-			spread(_el$4, mergeProps(domProps, {
-				"type": "button",
-				get ["aria-label"]() {
-					return context.clearButtonProps?.["aria-label"] ?? "Clear search";
-				},
-				get tabIndex() {
-					return context.clearButtonProps?.tabIndex ?? -1;
-				},
-				get disabled() {
-					return context.clearButtonProps?.disabled;
-				},
-				get onMouseDown() {
-					return context.clearButtonProps?.onMouseDown;
-				}
-			}, cleanPressProps, {
-				"onPointerUp": clear,
-				"onMouseUp": clear,
-				"onClick": clear
-			}, cleanHoverProps, {
-				get ["class"]() {
-					return renderProps.class();
-				},
-				get style() {
-					return renderProps.style();
-				},
-				get ["data-pressed"]() {
-					return isPressed() || void 0;
+			spread(_el$4, [
+				domProps,
+				{
+					type: "button",
+					get "aria-label"() {
+						return context.clearButtonProps?.["aria-label"] ?? "Clear search";
+					},
+					get tabindex() {
+						return context.clearButtonProps?.tabIndex ?? -1;
+					},
+					get disabled() {
+						return context.clearButtonProps?.disabled;
+					},
+					get onMouseDown() {
+						return context.clearButtonProps?.onMouseDown;
+					}
 				},
-				get ["data-hovered"]() {
-					return isHovered() || void 0;
+				cleanPressProps,
+				{
+					onPointerUp: clear,
+					onMouseUp: clear,
+					onClick: clear
 				},
-				get ["data-disabled"]() {
-					return isDisabled() || void 0;
+				cleanHoverProps,
+				{
+					get "class"() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					},
+					get "data-pressed"() {
+						return dataAttr(isPressed());
+					},
+					get "data-hovered"() {
+						return dataAttr(isHovered());
+					},
+					get "data-disabled"() {
+						return dataAttr(isDisabled());
+					}
 				}
-			}), false, true);
-			insert(_el$4, () => renderProps.renderChildren());
+			], true);
+			insert(_el$4, scope(() => {
+				return renderProps.renderChildren();
+			}));
 			runHydrationEvents();
 			return _el$4;
 		}