cross-state 1.5.1 → 1.6.0

package/dist/react/index.cjs

@@ -59,8 +59,8 @@ function useClosestForm() {
 }
 
 //#endregion
-//#region src/react/form/formField.tsx
-function FormField({ name = "", component, commitOnBlur, commitDebounce, render, inputFilter, defaultValue, serialize, deserialize = (x) => x, onChange, onBlur,...restProps }) {
+//#region src/react/form/legacyFormField.tsx
+function LegacyFormField({ name = "", component, commitOnBlur, commitDebounce, inputFilter, defaultValue, serialize, deserialize = (x) => x, onChange, onBlur,...restProps }) {
 	const form = this.useForm();
 	const getFormState = () => ({
 		...form,
@@ -110,10 +110,6 @@ function FormField({ name = "", component, commitOnBlur, commitDebounce, render,
 		...form.getField(name),
 		hasTriggeredValidations
 	}, form);
-	if (render) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: render(props, {
-		...form.getField(name),
-		hasTriggeredValidations
-	}, form) ?? null });
 	if (component) return (0, react.createElement)(component, {
 		...restProps,
 		...props
@@ -121,6 +117,63 @@ function FormField({ name = "", component, commitOnBlur, commitDebounce, render,
 	return null;
 }
 
+//#endregion
+//#region src/react/form/formField.tsx
+function FormField({ name = "", commitOnBlur, commitDebounce, children, render = children, includeNestedErrors }) {
+	const form = this.useForm();
+	const field = this.useField(name);
+	const hasTriggeredValidations = this.useFormState((form$1) => form$1.hasTriggeredValidations);
+	const renderProps = useFormFieldProps.call(this, {
+		name,
+		commitOnBlur,
+		commitDebounce,
+		includeNestedErrors
+	});
+	if (render) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: render(renderProps, {
+		...field,
+		hasTriggeredValidations
+	}, form) });
+	return null;
+}
+function useFormFieldProps({ name = "", commitOnBlur, commitDebounce, includeNestedErrors }) {
+	const form = this.useForm();
+	const field = this.useField(name, { includeNestedErrors });
+	const hasTriggeredValidations = this.useFormState((form$1) => form$1.hasTriggeredValidations);
+	const [localValue, setLocalValue] = (0, react.useState)();
+	const commitDebounceMs = commitDebounce !== void 0 ? require_store.calcDuration(commitDebounce) : void 0;
+	const commitLocalValue = require_storeMethods.useLatestFunction(() => {
+		field.setValue(localValue);
+		setLocalValue(void 0);
+	});
+	(0, react.useEffect)(() => {
+		if (localValue === void 0 || commitDebounceMs === void 0 || commitDebounceMs <= 0) return;
+		const timeout = setTimeout(commitLocalValue, commitDebounceMs);
+		return () => clearTimeout(timeout);
+	}, [
+		localValue,
+		commitDebounceMs,
+		commitLocalValue
+	]);
+	let props = {
+		name,
+		value: localValue ?? field.value,
+		onChange: require_storeMethods.useLatestFunction((event) => {
+			const value = typeof event === "object" && event !== null && "target" in event ? event.target.value : event;
+			if (commitOnBlur || commitDebounceMs !== void 0 && commitDebounceMs > 0) setLocalValue(value);
+			else field.setValue(value);
+		}),
+		onBlur: require_storeMethods.useLatestFunction(() => {
+			if (localValue !== void 0) commitLocalValue();
+		}),
+		"data-invalid": field.errors.length > 0 ? true : void 0
+	};
+	if (this.options.transformFieldProps) props = this.options.transformFieldProps(props, {
+		...field,
+		hasTriggeredValidations
+	}, form);
+	return props;
+}
+
 //#endregion
 //#region src/react/form/formForEach.tsx
 function FormForEach({ name, renderElement, renderAdditionalElement, filter, children }) {
@@ -221,25 +274,12 @@ function useFormAutosave(form) {
 
 //#endregion
 //#region src/react/form/form.tsx
-function FormContainer({ form,...formProps }) {
+const FormContainer = (0, react.forwardRef)(function FormContainer$1({ form,...formProps }, ref) {
 	const formInstance = form.useForm();
 	const hasTriggeredValidations = form.useFormState((state) => state.hasTriggeredValidations);
 	const hasErrors = form.useFormState((state) => hasTriggeredValidations && state.errors.size > 0);
-	const formRef = (0, react.useRef)(null);
-	const updateValidity = require_storeMethods.useLatestFunction((errors, buttonElement) => {
-		const formElement = formRef.current;
-		if (!formElement) return;
-		for (const element of Array.from(formElement.elements)) if ("name" in element && "setCustomValidity" in element) element.setCustomValidity(errors.get(element.name)?.join("\n") ?? "");
-		if (buttonElement && "setCustomValidity" in buttonElement) {
-			const errorString = [...errors.values()].flat().join("\n");
-			buttonElement.setCustomValidity(errorString);
-		}
-	});
-	(0, react.useEffect)(() => {
-		return formInstance.formState.map(() => formInstance.getErrors()).subscribe((errors) => updateValidity(errors));
-	}, [formInstance, updateValidity]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
-		ref: formRef,
+		ref,
 		noValidate: true,
 		...formProps,
 		className: [formProps.className, hasTriggeredValidations ? formInstance.options.validatedClass ?? "validated" : void 0].filter(Boolean).join(" "),
@@ -250,11 +290,8 @@ function FormContainer({ form,...formProps }) {
 			try {
 				formInstance.formState.set("saveInProgress", true);
 				event.preventDefault();
-				const formElement = event.currentTarget;
-				const buttonElement = event.nativeEvent instanceof SubmitEvent && event.nativeEvent.submitter instanceof HTMLButtonElement ? event.nativeEvent.submitter : void 0;
-				updateValidity(formInstance.getErrors(), buttonElement);
-				if (formInstance.options.reportValidity) formElement.reportValidity();
-				if (formInstance.validate()) await formProps.onSubmit?.(event, {
+				const button = event.nativeEvent instanceof SubmitEvent && event.nativeEvent.submitter instanceof HTMLButtonElement ? event.nativeEvent.submitter : void 0;
+				if (formInstance.validate({ button })) await formProps.onSubmit?.(event, {
 					...formInstance,
 					...getDerivedState(formInstance)
 				});
@@ -263,30 +300,32 @@ function FormContainer({ form,...formProps }) {
 			}
 		}
 	});
-}
-function getField(form, path) {
+});
+function getField(form, name, { includeNestedErrors } = {}) {
 	return {
 		get originalValue() {
-			return form.original !== void 0 ? require_propAccess.get(form.original, path) : void 0;
+			return form.original !== void 0 ? require_propAccess.get(form.original, name) : void 0;
 		},
 		get value() {
-			return require_propAccess.get(form.getDraft() ?? form.original ?? form.options.defaultValue, path);
+			return require_propAccess.get(form.getDraft() ?? form.original ?? form.options.defaultValue, name);
 		},
 		setValue(update) {
 			form.formState.set("draft", (draft = form.original ?? form.options.defaultValue) => {
-				if (update instanceof Function) update = update(require_propAccess.get(draft, path));
-				return require_propAccess.set(draft, path, update);
+				if (update instanceof Function) update = update(require_propAccess.get(draft, name));
+				return require_propAccess.set(draft, name, update);
 			});
 		},
 		get hasChange() {
 			return !require_propAccess.deepEqual(this.originalValue, this.value, { undefinedEqualsAbsent: true });
 		},
 		get errors() {
-			return form.getErrors().get(path) ?? [];
+			const errors = form.getErrors();
+			if (includeNestedErrors) return Array.from(errors.entries()).filter(([key]) => key === name || key.startsWith(`${name}.`)).flatMap(([, value]) => value);
+			else return errors.get(name) ?? [];
 		},
 		get names() {
 			const { value } = this;
-			if (require_propAccess.isObject(value)) return Object.keys(value).map((key) => require_propAccess.join(path, key));
+			if (require_propAccess.isObject(value)) return Object.keys(value).map((key) => require_propAccess.join(name, key));
 			return [];
 		},
 		add(...args) {
@@ -382,12 +421,18 @@ var Form = class Form {
 			...getDerivedState(form)
 		}), useStoreOptions);
 	}
-	useField(path, useStoreOptions) {
+	useField(name, { includeNestedErrors,...useStoreOptions } = {}) {
 		const form = this.useForm();
-		this.useFormState((form$1) => [form$1.getField(path).value, form$1.original], useStoreOptions);
-		return form.getField(path);
+		this.useFormState((form$1) => [form$1.getField(name).value, form$1.original], useStoreOptions);
+		return form.getField(name, { includeNestedErrors });
+	}
+	useFieldProps(name, options) {
+		return useFormFieldProps.call(this, {
+			name,
+			...options
+		});
 	}
-	Form({ defaultValue, validations, localizeError, autoSave, transform, validatedClass, original, onSubmit, reportValidity, transformFieldProps,...formProps }) {
+	Form({ defaultValue, validations, initiallyTriggerValidations, localizeError, autoSave, transform, validatedClass, original, onSubmit, reportValidity, transformFieldProps,...formProps }) {
 		const options = {
 			defaultValue: {
 				...this.options.defaultValue,
@@ -403,16 +448,17 @@ var Form = class Form {
 			validatedClass: validatedClass ?? this.options.validatedClass,
 			original: original ?? this.options.original,
 			onSubmit: onSubmit ?? this.options.onSubmit,
-			reportValidity: reportValidity ?? this.options.reportValidity ?? true,
+			reportValidity: reportValidity ?? this.options.reportValidity ?? "browser",
 			transformFieldProps: transformFieldProps ?? this.options.transformFieldProps
 		};
 		const formState = (0, react.useMemo)(() => {
 			return require_store.createStore({
 				draft: void 0,
-				hasTriggeredValidations: false,
+				hasTriggeredValidations: initiallyTriggerValidations ?? false,
 				saveInProgress: false
 			});
 		}, []);
+		const formRef = (0, react.useRef)(null);
 		let lastDraft;
 		const cache = /* @__PURE__ */ new Map();
 		function lazy(key, fn) {
@@ -446,6 +492,9 @@ var Form = class Form {
 			flushAutosave() {
 				return autosave.flush();
 			},
+			cancelAutosave() {
+				return autosave.cancel();
+			},
 			hasChanges() {
 				return lazy("hasChanges", () => !require_propAccess.deepEqual(this.getDraft(), options.original ?? options.defaultValue, { undefinedEqualsAbsent: true }));
 			},
@@ -455,8 +504,27 @@ var Form = class Form {
 			isValid() {
 				return lazy("isValid", () => this.getErrors().size === 0);
 			},
-			validate() {
+			validate({ reportValidity: reportValidity$1 = options.reportValidity, button } = {}) {
 				formState.set("hasTriggeredValidations", true);
+				updateValidity(this.getErrors(), button);
+				switch (reportValidity$1) {
+					case "browser":
+						formRef.current?.reportValidity();
+						break;
+					case true:
+					case "scrollTo":
+						{
+							const invalidElement = document.querySelector(":invalid, [data-invalid=\"true\"]");
+							if (invalidElement && invalidElement instanceof HTMLElement) {
+								invalidElement.scrollIntoView({
+									behavior: "smooth",
+									block: "center"
+								});
+								invalidElement.focus({ preventScroll: true });
+							}
+						}
+						break;
+				}
 				return this.isValid();
 			},
 			reset() {
@@ -464,7 +532,7 @@ var Form = class Form {
 				formState.set("hasTriggeredValidations", false);
 			}
 		};
-		context.getField = (path) => lazy(path, () => getField(context, path));
+		context.getField = (path, options$1) => lazy(`${path}:${options$1?.includeNestedErrors}`, () => getField(context, path, options$1));
 		(0, react.useEffect)(() => {
 			const transform$1 = options.transform;
 			if (!transform$1) return;
@@ -474,6 +542,18 @@ var Form = class Form {
 				if (!require_propAccess.deepEqual(result, value)) context.formState.set("draft", result);
 			});
 		});
+		function updateValidity(errors, buttonElement) {
+			const formElement = formRef.current;
+			if (!formElement) return;
+			for (const element of Array.from(formElement.elements)) if ("name" in element && "setCustomValidity" in element) element.setCustomValidity(errors.get(element.name)?.join("\n") ?? "");
+			if (buttonElement && "setCustomValidity" in buttonElement) {
+				const errorString = [...errors.values()].flat().join("\n");
+				buttonElement.setCustomValidity(errorString);
+			}
+		}
+		(0, react.useEffect)(() => {
+			return formState.map(() => context.getErrors()).subscribe((errors) => updateValidity(errors));
+		});
 		const autosave = useFormAutosave(context);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GeneralFormContext.Provider, {
 			value: this,
@@ -491,10 +571,8 @@ var Form = class Form {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(this.useFormState(selector)) });
 	}
 	Field(props) {
-		return Reflect.apply(FormField, this, [{
-			component: "input",
-			...props
-		}]);
+		if (props.component) return Reflect.apply(LegacyFormField, this, [props]);
+		return Reflect.apply(FormField, this, [props]);
 	}
 	ForEach(props) {
 		return Reflect.apply(FormForEach, this, [props]);