@tamagui/form 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/Form.mjs

@@ -1,57 +1,208 @@
-import { View, createStyledContext, styled } from "@tamagui/core";
+import { View, createStyledContext, createStyledHOC, isWeb, styled } from "@tamagui/core";
+import { focusFocusable } from "@tamagui/focusable";
 import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+
 const FORM_NAME = "Form";
-const FormFrame = styled(View, {
-  name: FORM_NAME,
-  render: "form"
-});
-const FormContext = createStyledContext({
-  onSubmit: void 0
+const EMPTY_ERRORS = {};
+const defaultSubmitAttemptedRef = { current: false };
+const defaultFormElementRef = { current: null };
+const FormRegistryContext = React.createContext({
+	validationMode: "onSubmit",
+	errors: EMPTY_ERRORS,
+	formElementRef: defaultFormElementRef,
+	submitAttemptedRef: defaultSubmitAttemptedRef,
+	clearErrors: () => {},
+	getValues: () => ({}),
+	registerField: () => () => {}
 });
-const {
-  useStyledContext: useFormContext,
-  Provider: FormProvider
-} = FormContext;
-const FormTriggerFrame = styled(View, {
-  name: "FormTrigger"
-});
-const FormTrigger = FormTriggerFrame.styleable((props, forwardedRef) => {
-  const {
-    scope,
-    children,
-    onPress,
-    ...triggerProps
-  } = props;
-  const context = useFormContext(scope);
-  return /* @__PURE__ */jsx(FormTriggerFrame, {
-    role: "button",
-    ...triggerProps,
-    ref: forwardedRef,
-    onPress: composeEventHandlers(onPress, context.onSubmit),
-    children
-  });
+const useFormRegistryContext = () => React.useContext(FormRegistryContext);
+const FormContext = createStyledContext({ onSubmit: void 0 });
+const { useStyledContext: useFormContext, Provider: FormProvider } = FormContext;
+const FormFrame = styled(View, {
+	displayName: FORM_NAME,
+	render: "form"
 });
-const FormComponent = FormFrame.styleable(function Form({
-  scope,
-  onSubmit,
-  ...props
-}, ref) {
-  return /* @__PURE__ */jsx(FormProvider, {
-    scope,
-    onSubmit,
-    children: /* @__PURE__ */jsx(FormFrame, {
-      ref,
-      ...props,
-      onSubmit: e => {
-        e.preventDefault();
-        onSubmit?.();
-      }
-    })
-  });
+const FormTriggerFrame = styled(View, { displayName: "FormTrigger" });
+const FormTrigger = createStyledHOC(FormTriggerFrame, (props, forwardedRef) => {
+	const { scope, children, onPress, ...triggerProps } = props;
+	const context = useFormContext(scope);
+	return /* @__PURE__ */ jsx(FormTriggerFrame, {
+		role: "button",
+		...triggerProps,
+		ref: forwardedRef,
+		onPress: composeEventHandlers(onPress, context.onSubmit),
+		children
+	});
 });
-const Form2 = withStaticProperties(FormComponent, {
-  Trigger: FormTrigger
+function hasError(errors, name) {
+	if (!name || !Object.hasOwn(errors, name)) {
+		return false;
+	}
+	const error = errors[name];
+	return Array.isArray(error) ? error.length > 0 : Boolean(error);
+}
+const FormComponent = createStyledHOC(FormFrame, function Form({ scope, validationMode = "onSubmit", errors: externalErrors, actionsRef, onSubmit, ...props }, forwardedRef) {
+	const registryRef = React.useRef(/* @__PURE__ */ new Map());
+	const formElementRef = React.useRef(null);
+	const submittedRef = React.useRef(false);
+	const submitAttemptedRef = React.useRef(false);
+	const pendingSubmitDetailsRef = React.useRef(null);
+	const onSubmitRef = React.useRef(onSubmit);
+	onSubmitRef.current = onSubmit;
+	const [errors, setErrors] = React.useState(externalErrors ?? EMPTY_ERRORS);
+	const errorsRef = React.useRef(errors);
+	errorsRef.current = errors;
+	React.useEffect(() => {
+		const next = externalErrors ?? EMPTY_ERRORS;
+		errorsRef.current = next;
+		setErrors(next);
+	}, [externalErrors]);
+	const registerField = React.useCallback((id, registration) => {
+		registryRef.current.set(id, registration);
+		return () => {
+			if (registryRef.current.get(id) === registration) {
+				registryRef.current.delete(id);
+			}
+		};
+	}, []);
+	const getValues = React.useCallback(() => {
+		const values = {};
+		for (const field of registryRef.current.values()) {
+			if (field.name) {
+				values[field.name] = field.getValue();
+			}
+		}
+		return values;
+	}, []);
+	const clearErrors = React.useCallback((name) => {
+		if (!name || !hasError(errorsRef.current, name)) {
+			return;
+		}
+		const next = { ...errorsRef.current };
+		delete next[name];
+		errorsRef.current = next;
+		setErrors(next);
+	}, []);
+	const focusFirstInvalid = React.useCallback(() => {
+		let hasInvalid = false;
+		for (const field of registryRef.current.values()) {
+			if (!hasError(errorsRef.current, field.name) && field.validityData.state.valid !== false) {
+				continue;
+			}
+			hasInvalid = true;
+			const control = field.controlRef.current;
+			if (isWeb && control?.focus) {
+				control.focus();
+				if (control.tagName === "INPUT" || control.tagName === "TEXTAREA") {
+					control.select?.();
+				}
+				return true;
+			}
+			if (!isWeb && field.controlId) {
+				focusFocusable(field.controlId);
+				return true;
+			}
+			if (control?.focus) {
+				control.focus();
+				return true;
+			}
+		}
+		return hasInvalid;
+	}, []);
+	const performSubmit = React.useCallback((details) => {
+		submitAttemptedRef.current = true;
+		for (const field of registryRef.current.values()) {
+			field.validate();
+		}
+		if (focusFirstInvalid()) {
+			return;
+		}
+		submittedRef.current = true;
+		void onSubmitRef.current?.(getValues(), details);
+	}, [focusFirstInvalid, getValues]);
+	const requestSubmit = React.useCallback((event) => {
+		event?.preventDefault?.();
+		const details = {
+			reason: "trigger-press",
+			event: event?.nativeEvent ?? event,
+			trigger: event?.currentTarget
+		};
+		if (isWeb && formElementRef.current?.requestSubmit) {
+			pendingSubmitDetailsRef.current = details;
+			formElementRef.current.requestSubmit();
+			return;
+		}
+		performSubmit(details);
+	}, [performSubmit]);
+	React.useEffect(() => {
+		if (!submittedRef.current) {
+			return;
+		}
+		submittedRef.current = false;
+		focusFirstInvalid();
+	}, [errors, focusFirstInvalid]);
+	React.useImperativeHandle(actionsRef, () => ({ validate(fieldName) {
+		if (fieldName) {
+			for (const field of registryRef.current.values()) {
+				if (field.name === fieldName) {
+					field.validate();
+					return;
+				}
+			}
+			return;
+		}
+		for (const field of registryRef.current.values()) {
+			field.validate();
+		}
+	} }), []);
+	const registryContext = React.useMemo(() => ({
+		validationMode,
+		errors,
+		formElementRef,
+		submitAttemptedRef,
+		clearErrors,
+		getValues,
+		registerField
+	}), [
+		clearErrors,
+		errors,
+		getValues,
+		registerField,
+		validationMode
+	]);
+	return /* @__PURE__ */ jsx(FormRegistryContext.Provider, {
+		value: registryContext,
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			scope,
+			onSubmit: requestSubmit,
+			children: /* @__PURE__ */ jsx(FormFrame, {
+				...props,
+				ref: (element) => {
+					formElementRef.current = element;
+					if (typeof forwardedRef === "function") {
+						forwardedRef(element);
+					} else if (forwardedRef) {
+						forwardedRef.current = element;
+					}
+				},
+				noValidate: true,
+				onSubmit: (event) => {
+					event.preventDefault();
+					const pendingDetails = pendingSubmitDetailsRef.current;
+					pendingSubmitDetailsRef.current = null;
+					performSubmit(pendingDetails ?? {
+						reason: "submit",
+						event: event.nativeEvent ?? event,
+						trigger: event.nativeEvent?.submitter
+					});
+				}
+			})
+		})
+	});
 });
-export { Form2 as Form, FormContext, FormFrame, FormProvider, FormTrigger, useFormContext };
+const Form2 = withStaticProperties(FormComponent, { Trigger: FormTrigger });
+
+export { Form2 as Form, FormContext, FormFrame, FormProvider, FormRegistryContext, FormTrigger, useFormContext, useFormRegistryContext };
 //# sourceMappingURL=Form.mjs.map

package/dist/esm/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["View","createStyledContext","styled","composeEventHandlers","withStaticProperties","jsx","FORM_NAME","FormFrame","name","render","FormContext","onSubmit","useStyledContext","useFormContext","Provider","FormProvider","FormTriggerFrame","FormTrigger","styleable","props","forwardedRef","scope","children","onPress","triggerProps","context","role","ref","FormComponent","Form","e","preventDefault","Form2","Trigger"],"sources":["../../src/Form.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,IAAA,EAAMC,mBAAA,EAAqBC,MAAA,QAAc;AAClD,SAASC,oBAAA,EAAsBC,oBAAA,QAA4B;AA+CrD,SAAAC,GAAA;AA7CN,MAAMC,SAAA,GAAY;AAEX,MAAMC,SAAA,GAAYL,MAAA,CAAOF,IAAA,EAAM;EACpCQ,IAAA,EAAMF,SAAA;EACNG,MAAA,EAAQ;AACV,CAAC;AAUM,MAAMC,WAAA,GAAcT,mBAAA,CAAsC;EAC/DU,QAAA,EAAU;AACZ,CAAqB;AAEd,MAAM;EAAEC,gBAAA,EAAkBC,cAAA;EAAgBC,QAAA,EAAUC;AAAa,IAAIL,WAAA;AAY5E,MAAMM,gBAAA,GAAmBd,MAAA,CAAOF,IAAA,EAAM;EACpCQ,IAAA,EAAM;AACR,CAAC;AAMM,MAAMS,WAAA,GAAcD,gBAAA,CAAiBE,SAAA,CAC1C,CAACC,KAAA,EAAOC,YAAA,KAAiB;EACvB,MAAM;IAAEC,KAAA;IAAOC,QAAA;IAAUC,OAAA;IAAS,GAAGC;EAAa,IAAIL,KAAA;EACtD,MAAMM,OAAA,GAAUZ,cAAA,CAAeQ,KAAK;EAEpC,OACE,eAAAhB,GAAA,CAACW,gBAAA;IACCU,IAAA,EAAK;IACJ,GAAGF,YAAA;IACJG,GAAA,EAAKP,YAAA;IACLG,OAAA,EAASpB,oBAAA,CAAqBoB,OAAA,EAASE,OAAA,CAAQd,QAAQ;IAEtDW;EAAA,CACH;AAEJ,CACF;AAMA,MAAMM,aAAA,GAAgBrB,SAAA,CAAUW,SAAA,CAA0B,SAASW,KACjE;EAAER,KAAA;EAAOV,QAAA;EAAU,GAAGQ;AAAM,GAC5BQ,GAAA,EACA;EACA,OACE,eAAAtB,GAAA,CAACU,YAAA;IAAaM,KAAA;IAAcV,QAAA;IAC1BW,QAAA,iBAAAjB,GAAA,CAACE,SAAA;MACCoB,GAAA;MACC,GAAIR,KAAA;MACLR,QAAA,EAAWmB,CAAA,IAAW;QACpBA,CAAA,CAAEC,cAAA,CAAe;QACjBpB,QAAA,GAAW;MACb;IAAA,CACF;EAAA,CACF;AAEJ,CAAC;AAEM,MAAMqB,KAAA,GAAO5B,oBAAA,CAAqBwB,aAAA,EAAe;EACtDK,OAAA,EAAShB;AACX,CAAC","ignoreList":[]}
+{"version":3,"file":"Form.js","names":[],"sources":["esm/Form.js"],"sourcesContent":["import { createStyledContext, createStyledHOC, isWeb, styled, View } from \"@tamagui/core\";\nimport { focusFocusable } from \"@tamagui/focusable\";\nimport { composeEventHandlers, withStaticProperties } from \"@tamagui/helpers\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst FORM_NAME = \"Form\";\nconst EMPTY_ERRORS = {};\nconst defaultSubmitAttemptedRef = { current: false };\nconst defaultFormElementRef = { current: null };\nconst FormRegistryContext = React.createContext({\n  validationMode: \"onSubmit\",\n  errors: EMPTY_ERRORS,\n  formElementRef: defaultFormElementRef,\n  submitAttemptedRef: defaultSubmitAttemptedRef,\n  clearErrors: () => {\n  },\n  getValues: () => ({}),\n  registerField: () => () => {\n  }\n});\nconst useFormRegistryContext = () => React.useContext(FormRegistryContext);\nconst FormContext = createStyledContext({\n  onSubmit: void 0\n});\nconst { useStyledContext: useFormContext, Provider: FormProvider } = FormContext;\nconst FormFrame = styled(View, {\n  displayName: FORM_NAME,\n  render: \"form\"\n});\nconst FormTriggerFrame = styled(View, {\n  displayName: \"FormTrigger\"\n});\nconst FormTrigger = createStyledHOC(\n  FormTriggerFrame,\n  (props, forwardedRef) => {\n    const { scope, children, onPress, ...triggerProps } = props;\n    const context = useFormContext(scope);\n    return /* @__PURE__ */ jsx(\n      FormTriggerFrame,\n      {\n        role: \"button\",\n        ...triggerProps,\n        ref: forwardedRef,\n        onPress: composeEventHandlers(onPress, context.onSubmit),\n        children\n      }\n    );\n  }\n);\nfunction hasError(errors, name) {\n  if (!name || !Object.hasOwn(errors, name)) {\n    return false;\n  }\n  const error = errors[name];\n  return Array.isArray(error) ? error.length > 0 : Boolean(error);\n}\nconst FormComponent = createStyledHOC(\n  FormFrame,\n  function Form({\n    scope,\n    validationMode = \"onSubmit\",\n    errors: externalErrors,\n    actionsRef,\n    onSubmit,\n    ...props\n  }, forwardedRef) {\n    const registryRef = React.useRef(/* @__PURE__ */ new Map());\n    const formElementRef = React.useRef(null);\n    const submittedRef = React.useRef(false);\n    const submitAttemptedRef = React.useRef(false);\n    const pendingSubmitDetailsRef = React.useRef(null);\n    const onSubmitRef = React.useRef(onSubmit);\n    onSubmitRef.current = onSubmit;\n    const [errors, setErrors] = React.useState(externalErrors ?? EMPTY_ERRORS);\n    const errorsRef = React.useRef(errors);\n    errorsRef.current = errors;\n    React.useEffect(() => {\n      const next = externalErrors ?? EMPTY_ERRORS;\n      errorsRef.current = next;\n      setErrors(next);\n    }, [externalErrors]);\n    const registerField = React.useCallback(\n      (id, registration) => {\n        registryRef.current.set(id, registration);\n        return () => {\n          if (registryRef.current.get(id) === registration) {\n            registryRef.current.delete(id);\n          }\n        };\n      },\n      []\n    );\n    const getValues = React.useCallback(() => {\n      const values = {};\n      for (const field of registryRef.current.values()) {\n        if (field.name) {\n          values[field.name] = field.getValue();\n        }\n      }\n      return values;\n    }, []);\n    const clearErrors = React.useCallback((name) => {\n      if (!name || !hasError(errorsRef.current, name)) {\n        return;\n      }\n      const next = { ...errorsRef.current };\n      delete next[name];\n      errorsRef.current = next;\n      setErrors(next);\n    }, []);\n    const focusFirstInvalid = React.useCallback(() => {\n      let hasInvalid = false;\n      for (const field of registryRef.current.values()) {\n        if (!hasError(errorsRef.current, field.name) && field.validityData.state.valid !== false) {\n          continue;\n        }\n        hasInvalid = true;\n        const control = field.controlRef.current;\n        if (isWeb && control?.focus) {\n          control.focus();\n          if (control.tagName === \"INPUT\" || control.tagName === \"TEXTAREA\") {\n            control.select?.();\n          }\n          return true;\n        }\n        if (!isWeb && field.controlId) {\n          focusFocusable(field.controlId);\n          return true;\n        }\n        if (control?.focus) {\n          control.focus();\n          return true;\n        }\n      }\n      return hasInvalid;\n    }, []);\n    const performSubmit = React.useCallback(\n      (details) => {\n        submitAttemptedRef.current = true;\n        for (const field of registryRef.current.values()) {\n          field.validate();\n        }\n        if (focusFirstInvalid()) {\n          return;\n        }\n        submittedRef.current = true;\n        void onSubmitRef.current?.(getValues(), details);\n      },\n      [focusFirstInvalid, getValues]\n    );\n    const requestSubmit = React.useCallback(\n      (event) => {\n        event?.preventDefault?.();\n        const details = {\n          reason: \"trigger-press\",\n          event: event?.nativeEvent ?? event,\n          trigger: event?.currentTarget\n        };\n        if (isWeb && formElementRef.current?.requestSubmit) {\n          pendingSubmitDetailsRef.current = details;\n          formElementRef.current.requestSubmit();\n          return;\n        }\n        performSubmit(details);\n      },\n      [performSubmit]\n    );\n    React.useEffect(() => {\n      if (!submittedRef.current) {\n        return;\n      }\n      submittedRef.current = false;\n      focusFirstInvalid();\n    }, [errors, focusFirstInvalid]);\n    React.useImperativeHandle(\n      actionsRef,\n      () => ({\n        validate(fieldName) {\n          if (fieldName) {\n            for (const field of registryRef.current.values()) {\n              if (field.name === fieldName) {\n                field.validate();\n                return;\n              }\n            }\n            return;\n          }\n          for (const field of registryRef.current.values()) {\n            field.validate();\n          }\n        }\n      }),\n      []\n    );\n    const registryContext = React.useMemo(\n      () => ({\n        validationMode,\n        errors,\n        formElementRef,\n        submitAttemptedRef,\n        clearErrors,\n        getValues,\n        registerField\n      }),\n      [clearErrors, errors, getValues, registerField, validationMode]\n    );\n    return /* @__PURE__ */ jsx(FormRegistryContext.Provider, { value: registryContext, children: /* @__PURE__ */ jsx(FormProvider, { scope, onSubmit: requestSubmit, children: /* @__PURE__ */ jsx(\n      FormFrame,\n      {\n        ...props,\n        ref: (element) => {\n          formElementRef.current = element;\n          if (typeof forwardedRef === \"function\") {\n            forwardedRef(element);\n          } else if (forwardedRef) {\n            forwardedRef.current = element;\n          }\n        },\n        noValidate: true,\n        onSubmit: (event) => {\n          event.preventDefault();\n          const pendingDetails = pendingSubmitDetailsRef.current;\n          pendingSubmitDetailsRef.current = null;\n          performSubmit(\n            pendingDetails ?? {\n              reason: \"submit\",\n              event: event.nativeEvent ?? event,\n              trigger: event.nativeEvent?.submitter\n            }\n          );\n        }\n      }\n    ) }) });\n  }\n);\nconst Form2 = withStaticProperties(FormComponent, {\n  Trigger: FormTrigger\n});\nexport {\n  Form2 as Form,\n  FormContext,\n  FormFrame,\n  FormProvider,\n  FormRegistryContext,\n  FormTrigger,\n  useFormContext,\n  useFormRegistryContext\n};\n//# sourceMappingURL=Form.js.map\n"],"mappings":";;;;;;;AAKA,MAAM,YAAY;AAClB,MAAM,eAAe,CAAC;AACtB,MAAM,4BAA4B,EAAE,SAAS,MAAM;AACnD,MAAM,wBAAwB,EAAE,SAAS,KAAK;AAC9C,MAAM,sBAAsB,MAAM,cAAc;CAC9C,gBAAgB;CAChB,QAAQ;CACR,gBAAgB;CAChB,oBAAoB;CACpB,mBAAmB,CACnB;CACA,kBAAkB,CAAC;CACnB,2BAA2B,CAC3B;AACF,CAAC;AACD,MAAM,+BAA+B,MAAM,WAAW,mBAAmB;AACzE,MAAM,cAAc,oBAAoB,EACtC,UAAU,KAAK,EACjB,CAAC;AACD,MAAM,EAAE,kBAAkB,gBAAgB,UAAU,iBAAiB;AACrE,MAAM,YAAY,OAAO,MAAM;CAC7B,aAAa;CACb,QAAQ;AACV,CAAC;AACD,MAAM,mBAAmB,OAAO,MAAM,EACpC,aAAa,cACf,CAAC;AACD,MAAM,cAAc,gBAClB,mBACC,OAAO,iBAAiB;CACvB,MAAM,EAAE,OAAO,UAAU,SAAS,GAAG,iBAAiB;CACtD,MAAM,UAAU,eAAe,KAAK;CACpC,OAAuB,oBACrB,kBACA;EACE,MAAM;EACN,GAAG;EACH,KAAK;EACL,SAAS,qBAAqB,SAAS,QAAQ,QAAQ;EACvD;CACF,CACF;AACF,CACF;AACA,SAAS,SAAS,QAAQ,MAAM;CAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO,OAAO,QAAQ,IAAI,GAAG;EACzC,OAAO;CACT;CACA,MAAM,QAAQ,OAAO;CACrB,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,IAAI,QAAQ,KAAK;AAChE;AACA,MAAM,gBAAgB,gBACpB,WACA,SAAS,KAAK,EACZ,OACA,iBAAiB,YACjB,QAAQ,gBACR,YACA,UACA,GAAG,SACF,cAAc;CACf,MAAM,cAAc,MAAM,uBAAuB,IAAI,IAAI,CAAC;CAC1D,MAAM,iBAAiB,MAAM,OAAO,IAAI;CACxC,MAAM,eAAe,MAAM,OAAO,KAAK;CACvC,MAAM,qBAAqB,MAAM,OAAO,KAAK;CAC7C,MAAM,0BAA0B,MAAM,OAAO,IAAI;CACjD,MAAM,cAAc,MAAM,OAAO,QAAQ;CACzC,YAAY,UAAU;CACtB,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,kBAAkB,YAAY;CACzE,MAAM,YAAY,MAAM,OAAO,MAAM;CACrC,UAAU,UAAU;CACpB,MAAM,gBAAgB;EACpB,MAAM,OAAO,kBAAkB;EAC/B,UAAU,UAAU;EACpB,UAAU,IAAI;CAChB,GAAG,CAAC,cAAc,CAAC;CACnB,MAAM,gBAAgB,MAAM,aACzB,IAAI,iBAAiB;EACpB,YAAY,QAAQ,IAAI,IAAI,YAAY;EACxC,aAAa;GACX,IAAI,YAAY,QAAQ,IAAI,EAAE,MAAM,cAAc;IAChD,YAAY,QAAQ,OAAO,EAAE;GAC/B;EACF;CACF,GACA,CAAC,CACH;CACA,MAAM,YAAY,MAAM,kBAAkB;EACxC,MAAM,SAAS,CAAC;EAChB,KAAK,MAAM,SAAS,YAAY,QAAQ,OAAO,GAAG;GAChD,IAAI,MAAM,MAAM;IACd,OAAO,MAAM,QAAQ,MAAM,SAAS;GACtC;EACF;EACA,OAAO;CACT,GAAG,CAAC,CAAC;CACL,MAAM,cAAc,MAAM,aAAa,SAAS;EAC9C,IAAI,CAAC,QAAQ,CAAC,SAAS,UAAU,SAAS,IAAI,GAAG;GAC/C;EACF;EACA,MAAM,OAAO,EAAE,GAAG,UAAU,QAAQ;EACpC,OAAO,KAAK;EACZ,UAAU,UAAU;EACpB,UAAU,IAAI;CAChB,GAAG,CAAC,CAAC;CACL,MAAM,oBAAoB,MAAM,kBAAkB;EAChD,IAAI,aAAa;EACjB,KAAK,MAAM,SAAS,YAAY,QAAQ,OAAO,GAAG;GAChD,IAAI,CAAC,SAAS,UAAU,SAAS,MAAM,IAAI,KAAK,MAAM,aAAa,MAAM,UAAU,OAAO;IACxF;GACF;GACA,aAAa;GACb,MAAM,UAAU,MAAM,WAAW;GACjC,IAAI,SAAS,SAAS,OAAO;IAC3B,QAAQ,MAAM;IACd,IAAI,QAAQ,YAAY,WAAW,QAAQ,YAAY,YAAY;KACjE,QAAQ,SAAS;IACnB;IACA,OAAO;GACT;GACA,IAAI,CAAC,SAAS,MAAM,WAAW;IAC7B,eAAe,MAAM,SAAS;IAC9B,OAAO;GACT;GACA,IAAI,SAAS,OAAO;IAClB,QAAQ,MAAM;IACd,OAAO;GACT;EACF;EACA,OAAO;CACT,GAAG,CAAC,CAAC;CACL,MAAM,gBAAgB,MAAM,aACzB,YAAY;EACX,mBAAmB,UAAU;EAC7B,KAAK,MAAM,SAAS,YAAY,QAAQ,OAAO,GAAG;GAChD,MAAM,SAAS;EACjB;EACA,IAAI,kBAAkB,GAAG;GACvB;EACF;EACA,aAAa,UAAU;EACvB,KAAK,YAAY,UAAU,UAAU,GAAG,OAAO;CACjD,GACA,CAAC,mBAAmB,SAAS,CAC/B;CACA,MAAM,gBAAgB,MAAM,aACzB,UAAU;EACT,OAAO,iBAAiB;EACxB,MAAM,UAAU;GACd,QAAQ;GACR,OAAO,OAAO,eAAe;GAC7B,SAAS,OAAO;EAClB;EACA,IAAI,SAAS,eAAe,SAAS,eAAe;GAClD,wBAAwB,UAAU;GAClC,eAAe,QAAQ,cAAc;GACrC;EACF;EACA,cAAc,OAAO;CACvB,GACA,CAAC,aAAa,CAChB;CACA,MAAM,gBAAgB;EACpB,IAAI,CAAC,aAAa,SAAS;GACzB;EACF;EACA,aAAa,UAAU;EACvB,kBAAkB;CACpB,GAAG,CAAC,QAAQ,iBAAiB,CAAC;CAC9B,MAAM,oBACJ,mBACO,EACL,SAAS,WAAW;EAClB,IAAI,WAAW;GACb,KAAK,MAAM,SAAS,YAAY,QAAQ,OAAO,GAAG;IAChD,IAAI,MAAM,SAAS,WAAW;KAC5B,MAAM,SAAS;KACf;IACF;GACF;GACA;EACF;EACA,KAAK,MAAM,SAAS,YAAY,QAAQ,OAAO,GAAG;GAChD,MAAM,SAAS;EACjB;CACF,EACF,IACA,CAAC,CACH;CACA,MAAM,kBAAkB,MAAM,eACrB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAa;EAAQ;EAAW;EAAe;CAAc,CAChE;CACA,OAAuB,oBAAI,oBAAoB,UAAU;EAAE,OAAO;EAAiB,UAA0B,oBAAI,cAAc;GAAE;GAAO,UAAU;GAAe,UAA0B,oBACzL,WACA;IACE,GAAG;IACH,MAAM,YAAY;KAChB,eAAe,UAAU;KACzB,IAAI,OAAO,iBAAiB,YAAY;MACtC,aAAa,OAAO;KACtB,OAAO,IAAI,cAAc;MACvB,aAAa,UAAU;KACzB;IACF;IACA,YAAY;IACZ,WAAW,UAAU;KACnB,MAAM,eAAe;KACrB,MAAM,iBAAiB,wBAAwB;KAC/C,wBAAwB,UAAU;KAClC,cACE,kBAAkB;MAChB,QAAQ;MACR,OAAO,MAAM,eAAe;MAC5B,SAAS,MAAM,aAAa;KAC9B,CACF;IACF;GACF,CACF;EAAE,CAAC;CAAE,CAAC;AACR,CACF;AACA,MAAM,QAAQ,qBAAqB,eAAe,EAChD,SAAS,YACX,CAAC"}

package/dist/esm/Form.native.js

@@ -1,58 +1,310 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { View, createStyledContext, styled } from "@tamagui/core";
+import { jsx } from "react/jsx-runtime";
+import { View, createStyledContext, createStyledHOC, isWeb, styled } from "@tamagui/core";
+import { focusFocusable } from "@tamagui/focusable";
 import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
+import * as React from "react";
+
 var FORM_NAME = "Form";
-var FormFrame = styled(View, {
-  name: FORM_NAME,
-  render: "form"
-});
-var FormContext = createStyledContext({
-  onSubmit: void 0
+var EMPTY_ERRORS = {};
+var defaultSubmitAttemptedRef = { current: false };
+var defaultFormElementRef = { current: null };
+var FormRegistryContext = /* @__PURE__ */ React.createContext({
+	validationMode: "onSubmit",
+	errors: EMPTY_ERRORS,
+	formElementRef: defaultFormElementRef,
+	submitAttemptedRef: defaultSubmitAttemptedRef,
+	clearErrors: function() {},
+	getValues: function() {
+		return {};
+	},
+	registerField: function() {
+		return function() {};
+	}
 });
-var {
-  useStyledContext: useFormContext,
-  Provider: FormProvider
-} = FormContext;
-var FormTriggerFrame = styled(View, {
-  name: "FormTrigger"
-});
-var FormTrigger = FormTriggerFrame.styleable(function (props, forwardedRef) {
-  var {
-    scope,
-    children,
-    onPress,
-    ...triggerProps
-  } = props;
-  var context = useFormContext(scope);
-  return /* @__PURE__ */_jsx(FormTriggerFrame, {
-    role: "button",
-    ...triggerProps,
-    ref: forwardedRef,
-    onPress: composeEventHandlers(onPress, context.onSubmit),
-    children
-  });
+var useFormRegistryContext = function() {
+	return React.useContext(FormRegistryContext);
+};
+var FormContext = createStyledContext({ onSubmit: void 0 });
+var { useStyledContext: useFormContext, Provider: FormProvider } = FormContext;
+var FormFrame = styled(View, {
+	displayName: FORM_NAME,
+	render: "form"
 });
-var FormComponent = FormFrame.styleable(function Form(param, ref) {
-  var {
-    scope,
-    onSubmit,
-    ...props
-  } = param;
-  return /* @__PURE__ */_jsx(FormProvider, {
-    scope,
-    onSubmit,
-    children: /* @__PURE__ */_jsx(FormFrame, {
-      ref,
-      ...props,
-      onSubmit: function (e) {
-        e.preventDefault();
-        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
-      }
-    })
-  });
+var FormTriggerFrame = styled(View, { displayName: "FormTrigger" });
+var FormTrigger = createStyledHOC(FormTriggerFrame, function(props, forwardedRef) {
+	var { scope, children, onPress, ...triggerProps } = props;
+	var context = useFormContext(scope);
+	return /* @__PURE__ */ jsx(FormTriggerFrame, {
+		role: "button",
+		...triggerProps,
+		ref: forwardedRef,
+		onPress: composeEventHandlers(onPress, context.onSubmit),
+		children
+	});
 });
-var Form2 = withStaticProperties(FormComponent, {
-  Trigger: FormTrigger
+function hasError(errors, name) {
+	if (!name || !Object.hasOwn(errors, name)) {
+		return false;
+	}
+	var error = errors[name];
+	return Array.isArray(error) ? error.length > 0 : Boolean(error);
+}
+var FormComponent = createStyledHOC(FormFrame, function Form(param, forwardedRef) {
+	var { scope, validationMode = "onSubmit", errors: externalErrors, actionsRef, onSubmit, ...props } = param;
+	var registryRef = React.useRef(/* @__PURE__ */ new Map());
+	var formElementRef = React.useRef(null);
+	var submittedRef = React.useRef(false);
+	var submitAttemptedRef = React.useRef(false);
+	var pendingSubmitDetailsRef = React.useRef(null);
+	var onSubmitRef = React.useRef(onSubmit);
+	onSubmitRef.current = onSubmit;
+	var [errors, setErrors] = React.useState(externalErrors !== null && externalErrors !== void 0 ? externalErrors : EMPTY_ERRORS);
+	var errorsRef = React.useRef(errors);
+	errorsRef.current = errors;
+	React.useEffect(function() {
+		var next = externalErrors !== null && externalErrors !== void 0 ? externalErrors : EMPTY_ERRORS;
+		errorsRef.current = next;
+		setErrors(next);
+	}, [externalErrors]);
+	var registerField = React.useCallback(function(id, registration) {
+		registryRef.current.set(id, registration);
+		return function() {
+			if (registryRef.current.get(id) === registration) {
+				registryRef.current.delete(id);
+			}
+		};
+	}, []);
+	var getValues = React.useCallback(function() {
+		var values = {};
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = registryRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var field = _step.value;
+				if (field.name) {
+					values[field.name] = field.getValue();
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		return values;
+	}, []);
+	var clearErrors = React.useCallback(function(name) {
+		if (!name || !hasError(errorsRef.current, name)) {
+			return;
+		}
+		var next = { ...errorsRef.current };
+		delete next[name];
+		errorsRef.current = next;
+		setErrors(next);
+	}, []);
+	var focusFirstInvalid = React.useCallback(function() {
+		var hasInvalid = false;
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = registryRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var field = _step.value;
+				if (!hasError(errorsRef.current, field.name) && field.validityData.state.valid !== false) {
+					continue;
+				}
+				hasInvalid = true;
+				var control = field.controlRef.current;
+				if (isWeb && (control === null || control === void 0 ? void 0 : control.focus)) {
+					control.focus();
+					if (control.tagName === "INPUT" || control.tagName === "TEXTAREA") {
+						var _control_select;
+						(_control_select = control.select) === null || _control_select === void 0 ? void 0 : _control_select.call(control);
+					}
+					return true;
+				}
+				if (!isWeb && field.controlId) {
+					focusFocusable(field.controlId);
+					return true;
+				}
+				if (control === null || control === void 0 ? void 0 : control.focus) {
+					control.focus();
+					return true;
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		return hasInvalid;
+	}, []);
+	var performSubmit = React.useCallback(function(details) {
+		var _onSubmitRef_current;
+		submitAttemptedRef.current = true;
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = registryRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var field = _step.value;
+				field.validate();
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		if (focusFirstInvalid()) {
+			return;
+		}
+		submittedRef.current = true;
+		void ((_onSubmitRef_current = onSubmitRef.current) === null || _onSubmitRef_current === void 0 ? void 0 : _onSubmitRef_current.call(onSubmitRef, getValues(), details));
+	}, [focusFirstInvalid, getValues]);
+	var requestSubmit = React.useCallback(function(event) {
+		var _event_preventDefault, _formElementRef_current;
+		event === null || event === void 0 ? void 0 : (_event_preventDefault = event.preventDefault) === null || _event_preventDefault === void 0 ? void 0 : _event_preventDefault.call(event);
+		var _event_nativeEvent;
+		var details = {
+			reason: "trigger-press",
+			event: (_event_nativeEvent = event === null || event === void 0 ? void 0 : event.nativeEvent) !== null && _event_nativeEvent !== void 0 ? _event_nativeEvent : event,
+			trigger: event === null || event === void 0 ? void 0 : event.currentTarget
+		};
+		if (isWeb && ((_formElementRef_current = formElementRef.current) === null || _formElementRef_current === void 0 ? void 0 : _formElementRef_current.requestSubmit)) {
+			pendingSubmitDetailsRef.current = details;
+			formElementRef.current.requestSubmit();
+			return;
+		}
+		performSubmit(details);
+	}, [performSubmit]);
+	React.useEffect(function() {
+		if (!submittedRef.current) {
+			return;
+		}
+		submittedRef.current = false;
+		focusFirstInvalid();
+	}, [errors, focusFirstInvalid]);
+	React.useImperativeHandle(actionsRef, function() {
+		return { validate(fieldName) {
+			if (fieldName) {
+				var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+				try {
+					for (var _iterator = registryRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+						var field = _step.value;
+						if (field.name === fieldName) {
+							field.validate();
+							return;
+						}
+					}
+				} catch (err) {
+					_didIteratorError = true;
+					_iteratorError = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion && _iterator.return != null) {
+							_iterator.return();
+						}
+					} finally {
+						if (_didIteratorError) {
+							throw _iteratorError;
+						}
+					}
+				}
+				return;
+			}
+			var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+			try {
+				for (var _iterator1 = registryRef.current.values()[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+					var field1 = _step1.value;
+					field1.validate();
+				}
+			} catch (err) {
+				_didIteratorError1 = true;
+				_iteratorError1 = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+						_iterator1.return();
+					}
+				} finally {
+					if (_didIteratorError1) {
+						throw _iteratorError1;
+					}
+				}
+			}
+		} };
+	}, []);
+	var registryContext = React.useMemo(function() {
+		return {
+			validationMode,
+			errors,
+			formElementRef,
+			submitAttemptedRef,
+			clearErrors,
+			getValues,
+			registerField
+		};
+	}, [
+		clearErrors,
+		errors,
+		getValues,
+		registerField,
+		validationMode
+	]);
+	return /* @__PURE__ */ jsx(FormRegistryContext.Provider, {
+		value: registryContext,
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			scope,
+			onSubmit: requestSubmit,
+			children: /* @__PURE__ */ jsx(FormFrame, {
+				...props,
+				ref: function(element) {
+					formElementRef.current = element;
+					if (typeof forwardedRef === "function") {
+						forwardedRef(element);
+					} else if (forwardedRef) {
+						forwardedRef.current = element;
+					}
+				},
+				noValidate: true,
+				onSubmit: function(event) {
+					var _event_nativeEvent;
+					event.preventDefault();
+					var pendingDetails = pendingSubmitDetailsRef.current;
+					pendingSubmitDetailsRef.current = null;
+					var _event_nativeEvent1;
+					performSubmit(pendingDetails !== null && pendingDetails !== void 0 ? pendingDetails : {
+						reason: "submit",
+						event: (_event_nativeEvent1 = event.nativeEvent) !== null && _event_nativeEvent1 !== void 0 ? _event_nativeEvent1 : event,
+						trigger: (_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : _event_nativeEvent.submitter
+					});
+				}
+			})
+		})
+	});
 });
-export { Form2 as Form, FormContext, FormFrame, FormProvider, FormTrigger, useFormContext };
+var Form2 = withStaticProperties(FormComponent, { Trigger: FormTrigger });
+
+export { Form2 as Form, FormContext, FormFrame, FormProvider, FormRegistryContext, FormTrigger, useFormContext, useFormRegistryContext };
 //# sourceMappingURL=Form.native.js.map