@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/SearchField.js

@@ -0,0 +1,643 @@
+import { Provider, filterDOMProps, useRenderProps } from "./utils.js";
+import { FieldErrorContext } from "./FieldError.js";
+import { TextContext } from "./Text.js";
+import { FormContext } from "./Form.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";
+//#region src/SearchField.tsx
+/**
+* SearchField component for solidaria-components
+*
+* 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>`);
+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;
+		const value = Reflect.get(target, property, receiver);
+		return typeof value === "function" ? value.bind(target) : value;
+	} });
+}
+function clearDelegatedTextEntryHandlers(element) {
+	const delegatedElement = element;
+	delete delegatedElement.$$input;
+	delete delegatedElement.$$change;
+}
+/**
+* A search field allows a user to enter and clear a search query.
+*/
+function SearchField(props) {
+	const formContext = useContext(FormContext);
+	const contextProps = useContext(SearchFieldContext);
+	const contextSlotProps = contextProps?.slots?.[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 [local, stateProps, ariaProps, rest] = splitProps(withFormValidationBehavior(contextProps ? mergeProps$2(contextBaseProps(), contextSlotProps ?? {}, props) : props, formContext), [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"ref"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"onSubmit",
+		"onClear"
+	], [
+		"label",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"isDisabled",
+		"isReadOnly",
+		"isRequired",
+		"isInvalid",
+		"description",
+		"errorMessage",
+		"id",
+		"autoFocus",
+		"excludeFromTabOrder",
+		"name",
+		"form",
+		"validationBehavior",
+		"type",
+		"placeholder",
+		"autoComplete",
+		"inputMode",
+		"enterKeyHint",
+		"autoCorrect",
+		"autoCapitalize",
+		"spellCheck",
+		"maxLength",
+		"minLength",
+		"pattern",
+		"onFocus",
+		"onBlur",
+		"onFocusChange",
+		"onKeyDown",
+		"onKeyUp",
+		"onCopy",
+		"onCut",
+		"onPaste",
+		"onCompositionStart",
+		"onCompositionEnd",
+		"onCompositionUpdate",
+		"onSelect",
+		"onBeforeInput",
+		"onInput"
+	]);
+	const state = createSearchFieldState({
+		get value() {
+			return stateProps.value;
+		},
+		get defaultValue() {
+			return stateProps.defaultValue;
+		},
+		get onChange() {
+			return stateProps.onChange;
+		}
+	});
+	let inputRef;
+	const setInputRef = (el) => {
+		inputRef = el;
+	};
+	const searchFieldAria = createSearchField({
+		get isDisabled() {
+			return ariaProps.isDisabled;
+		},
+		get isReadOnly() {
+			return ariaProps.isReadOnly;
+		},
+		get isRequired() {
+			return ariaProps.isRequired;
+		},
+		get isInvalid() {
+			return ariaProps.isInvalid;
+		},
+		get label() {
+			return ariaProps.label;
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return ariaProps["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return ariaProps["aria-describedby"];
+		},
+		get description() {
+			return ariaProps.description;
+		},
+		get errorMessage() {
+			return ariaProps.errorMessage;
+		},
+		get placeholder() {
+			return ariaProps.placeholder;
+		},
+		get name() {
+			return ariaProps.name;
+		},
+		get form() {
+			return ariaProps.form;
+		},
+		get validationBehavior() {
+			return ariaProps.validationBehavior;
+		},
+		get type() {
+			return ariaProps.type;
+		},
+		get autoFocus() {
+			return ariaProps.autoFocus;
+		},
+		get excludeFromTabOrder() {
+			return ariaProps.excludeFromTabOrder;
+		},
+		get autoComplete() {
+			return ariaProps.autoComplete;
+		},
+		get inputMode() {
+			return ariaProps.inputMode;
+		},
+		get enterKeyHint() {
+			return ariaProps.enterKeyHint;
+		},
+		get autoCorrect() {
+			return ariaProps.autoCorrect;
+		},
+		get autoCapitalize() {
+			return ariaProps.autoCapitalize;
+		},
+		get spellCheck() {
+			return ariaProps.spellCheck;
+		},
+		get maxLength() {
+			return ariaProps.maxLength;
+		},
+		get minLength() {
+			return ariaProps.minLength;
+		},
+		get pattern() {
+			return ariaProps.pattern;
+		},
+		get onFocus() {
+			return ariaProps.onFocus;
+		},
+		get onBlur() {
+			return ariaProps.onBlur;
+		},
+		get onFocusChange() {
+			return ariaProps.onFocusChange;
+		},
+		get onKeyDown() {
+			return ariaProps.onKeyDown;
+		},
+		get onKeyUp() {
+			return ariaProps.onKeyUp;
+		},
+		get onCopy() {
+			return ariaProps.onCopy;
+		},
+		get onCut() {
+			return ariaProps.onCut;
+		},
+		get onPaste() {
+			return ariaProps.onPaste;
+		},
+		get onCompositionStart() {
+			return ariaProps.onCompositionStart;
+		},
+		get onCompositionEnd() {
+			return ariaProps.onCompositionEnd;
+		},
+		get onCompositionUpdate() {
+			return ariaProps.onCompositionUpdate;
+		},
+		get onSelect() {
+			return ariaProps.onSelect;
+		},
+		get onBeforeInput() {
+			return ariaProps.onBeforeInput;
+		},
+		get onInput() {
+			return ariaProps.onInput;
+		},
+		get onSubmit() {
+			return stateProps.onSubmit;
+		},
+		get onClear() {
+			return stateProps.onClear;
+		}
+	}, state, () => inputRef ?? null);
+	const renderValues = createMemo(() => ({
+		isEmpty: state.value() === "",
+		isDisabled: ariaProps.isDisabled ?? false,
+		isInvalid: searchFieldAria.isInvalid ?? false,
+		isRequired: ariaProps.isRequired ?? false,
+		isReadOnly: ariaProps.isReadOnly ?? false,
+		value: state.value()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-SearchField"
+	}, renderValues);
+	const childRenderValues = {
+		get isEmpty() {
+			return state.value() === "";
+		},
+		get isDisabled() {
+			return ariaProps.isDisabled ?? false;
+		},
+		get isInvalid() {
+			return searchFieldAria.isInvalid ?? false;
+		},
+		get isRequired() {
+			return ariaProps.isRequired ?? false;
+		},
+		get isReadOnly() {
+			return ariaProps.isReadOnly ?? false;
+		},
+		get value() {
+			return state.value();
+		}
+	};
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const fieldValidation = createMemo(() => {
+		const isInvalid = searchFieldAria.isInvalid;
+		const errorMessage = ariaProps.errorMessage;
+		return {
+			isInvalid,
+			validationErrors: isInvalid && typeof errorMessage === "string" ? [errorMessage] : [],
+			validationDetails: isInvalid ? {
+				...VALID_VALIDITY_STATE,
+				customError: true,
+				valid: false
+			} : VALID_VALIDITY_STATE
+		};
+	});
+	const fieldErrorContext = {
+		get validation() {
+			return fieldValidation();
+		},
+		get errorMessageProps() {
+			return searchFieldAria.errorMessageProps;
+		}
+	};
+	const contextValue = {
+		state,
+		get inputProps() {
+			return searchFieldAria.inputProps;
+		},
+		get clearButtonProps() {
+			return searchFieldAria.clearButtonProps;
+		},
+		get labelProps() {
+			return searchFieldAria.labelProps;
+		},
+		get descriptionProps() {
+			return searchFieldAria.descriptionProps;
+		},
+		get errorMessageProps() {
+			return searchFieldAria.errorMessageProps;
+		},
+		get isDisabled() {
+			return ariaProps.isDisabled ?? false;
+		},
+		get isInvalid() {
+			return searchFieldAria.isInvalid ?? false;
+		},
+		get isRequired() {
+			return ariaProps.isRequired ?? false;
+		},
+		get isReadOnly() {
+			return ariaProps.isReadOnly ?? false;
+		},
+		setInputRef
+	};
+	const fieldChildren = () => {
+		const children = local.children;
+		return typeof children === "function" ? children(childRenderValues) : children;
+	};
+	const textSlots = { slots: {
+		get description() {
+			return searchFieldAria.descriptionProps;
+		},
+		get errorMessage() {
+			return searchFieldAria.errorMessageProps;
+		}
+	} };
+	return createComponent(FieldErrorContext.Provider, {
+		value: fieldErrorContext,
+		get children() {
+			return createComponent(SearchFieldContext.Provider, {
+				value: contextValue,
+				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]],
+						get children() {
+							return fieldChildren();
+						}
+					}));
+					runHydrationEvents();
+					return _el$;
+				}
+			});
+		}
+	});
+}
+/**
+* The label for a search field.
+*/
+function SearchFieldLabel(props) {
+	const context = useContext(SearchFieldContext);
+	if (!context) throw new Error("SearchFieldLabel must be used within a SearchField");
+	const cleanLabelProps = () => {
+		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;
+	})();
+}
+/**
+* The input element for a search field.
+*/
+function SearchFieldInput(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot"
+	]);
+	let inputElement;
+	const context = useContext(SearchFieldContext);
+	if (!context) throw new Error("SearchFieldInput must be used within a SearchField");
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return context.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered(),
+		isDisabled: !!context.isDisabled,
+		isInvalid: !!context.isInvalid
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-SearchField-input"
+	}, renderValues);
+	const cleanInputProps = () => {
+		const { ref: _ref, ...rest } = context.inputProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const mergedInputProps = () => ({
+		...domProps,
+		...cleanInputProps(),
+		...cleanFocusProps(),
+		...cleanHoverProps()
+	});
+	onMount(() => {
+		const element = inputElement;
+		if (!element) return;
+		const inputHandler = (event) => {
+			const handler = mergedInputProps().onInput;
+			handler?.(eventWithCurrentTarget(event, element));
+			clearDelegatedTextEntryHandlers(element);
+			event.stopPropagation();
+		};
+		const changeHandler = (event) => {
+			const handler = mergedInputProps().onChange;
+			handler?.(eventWithCurrentTarget(event, element));
+			clearDelegatedTextEntryHandlers(element);
+			event.stopPropagation();
+		};
+		element.addEventListener("input", inputHandler);
+		element.addEventListener("change", changeHandler);
+		clearDelegatedTextEntryHandlers(element);
+		onCleanup(() => {
+			element.removeEventListener("input", inputHandler);
+			element.removeEventListener("change", changeHandler);
+		});
+	});
+	return (() => {
+		var _el$3 = getNextElement(_tmpl$3);
+		use((element) => {
+			inputElement = element;
+			context.setInputRef?.(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;
+	})();
+}
+/**
+* The clear button for a search field.
+*/
+function SearchFieldClearButton(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(SearchFieldContext);
+	if (!context) throw new Error("SearchFieldClearButton must be used within a SearchField");
+	const isDisabled = () => !!(context.isDisabled || context.isReadOnly);
+	const isEmpty = () => (context.state?.value() ?? "") === "";
+	const clear = () => {
+		if (!isDisabled() && !isEmpty()) context.clearButtonProps?.onClick();
+	};
+	const { isPressed, pressProps } = createPress({
+		get isDisabled() {
+			return context.isDisabled || context.isReadOnly;
+		},
+		onClick: clear,
+		onPress: clear
+	});
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return context.isDisabled || context.isReadOnly;
+	} });
+	const renderValues = createMemo(() => ({
+		isPressed: isPressed(),
+		isHovered: isHovered(),
+		isDisabled: isDisabled()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-SearchField-clear"
+	}, renderValues);
+	const cleanPressProps = () => {
+		const { ref: _ref, ...rest } = pressProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	return createComponent(Show, {
+		get when() {
+			return !isEmpty();
+		},
+		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;
+				},
+				get ["data-hovered"]() {
+					return isHovered() || void 0;
+				},
+				get ["data-disabled"]() {
+					return isDisabled() || void 0;
+				}
+			}), false, true);
+			insert(_el$4, () => renderProps.renderChildren());
+			runHydrationEvents();
+			return _el$4;
+		}
+	});
+}
+SearchField.Label = SearchFieldLabel;
+SearchField.Input = SearchFieldInput;
+SearchField.ClearButton = SearchFieldClearButton;
+//#endregion
+export { SearchField, SearchFieldClearButton, SearchFieldContext, SearchFieldInput, SearchFieldLabel };
+
+//# sourceMappingURL=SearchField.js.map