react-form-action 2.15.1 → 2.17.0

package/README.md

@@ -24,6 +24,7 @@ End-to-end typesafe success, error & validation state control for Next.js form a
 - ✅ Binds the action with the arguments from the _args_ prop.
 - ✅ Has an optional `validate` prop to validate the form data client-side before calling the server action.
 - ✅ Enables you to reset the action state with the `reset()` callback.
+- ✅ `useResetAction()` hook (or `<ResetAction />` component) to automatically initialize your action when the hook/component unmounts.
 
 **Context-bound `<Form />` component**
 
@@ -335,6 +336,44 @@ export function SignUpAction({ children }: PropsWithChildren) {
 }
 ```
 
+#### Automatic action state reset (when unmounting component)
+
+Works with Next.js routing, where routes are wrapped in `<Activity />`.
+
+```tsx
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { Action, ResetAction } from "react-form-action/client";
+
+import { updateUser } from "./action";
+
+export function UpdateUserAction({ children }: PropsWithChildren) {
+  return (
+    <Action
+      action={updateUser}
+      initialData={undefined}
+    >
+      {/* IMPORTANT: must be rendered as a child of the <Action /> context. */}
+      <ResetAction />
+      {children}
+    </Action>
+  );
+}
+```
+
+When you prefer hooks to JSX, you can use the `useResetAction()` usually in your forms:
+
+```tsx
+import { Form, useResetAction } from "react-form-action/client";
+
+function MyForm() {
+  useResetAction();
+
+  return <Form>...</Form>
+}
+``` 
+
 
 ### `<Form>` Component
 

package/dist/client.d.mts

@@ -2,19 +2,26 @@ import { a as FormAction, c as SuccessState, i as FailureState, o as InitialStat
 import React$1, { JSX, PropsWithChildren } from "react";
 import { $ZodErrorTree } from "zod/v4/core";
 //#region src/Action.d.ts
-type ActionProps<Data, Error, ValidationError, Arguments extends unknown[] = []> = PropsWithChildren<Arguments extends [unknown, ...unknown[]] ? {
+type ActionProps<Data, Error, ValidationError, Arguments extends unknown[] = []> = PropsWithChildren<{
+  /**
+   * Whether the form action should automatically reset when unmounted.
+   */
+  autoReset?: boolean;
+  /**
+   * A function to validate the form data before submission.
+   * When the function returns a ValidationError value, the action state will turn to "invalid".
+   * Return nullable value, to proceed with the submission.
+   */
+  validate?: (payload: FormData) => ValidationError | undefined | null;
+  permalink?: string;
+  initialData: Data;
+} & (Arguments extends [unknown, ...unknown[]] ? {
   action: FormAction<Data, Error, ValidationError, FormData, Arguments>;
   args: Arguments;
-  initialData: Data;
-  permalink?: string;
-  validate?: (payload: FormData) => null | ValidationError;
 } : {
   action: FormAction<Data, Error, ValidationError, FormData, Arguments>;
-  initialData: Data;
   args?: undefined;
-  permalink?: string;
-  validate?: (payload: FormData) => null | ValidationError;
-}>;
+})>;
 type ActionStatusFlags<T extends ActionState<unknown, unknown, unknown>["type"] | unknown = unknown> = {
   isInitial: T extends "initial" ? true : false;
   isInvalid: T extends "invalid" ? true : false;
@@ -40,13 +47,13 @@ type SpreadActionContext<Data = unknown, Error = unknown, ValidationError = unkn
  * A hook to consume the form action state from the context.
  */
 declare function useActionContext<Data, Error, ValidationError, Args extends unknown[] = []>(_action?: FormAction<Data, Error, ValidationError, FormData, Args>): SpreadActionContext<Data, Error, ValidationError>;
-declare function Action<Data, Error, ValidationError, Args extends unknown[] = []>({ children, action: formAction, initialData, args, permalink, validate }: ActionProps<Data, Error, ValidationError, Args>): import("react").JSX.Element;
+declare function Action<Data, Error, ValidationError, Args extends unknown[] = []>({ children, action: formAction, initialData, args, permalink, validate, autoReset }: ActionProps<Data, Error, ValidationError, Args>): import("react").JSX.Element;
 //#endregion
 //#region src/ZodFieldError.d.ts
 declare const SEPARATOR: ".";
 type Paths<Shape extends $ZodErrorTree<object>, Props = Required<NonNullable<Shape["properties"]>>> = { [k in keyof Props]: k extends string ? NonNullable<Props[k]> extends $ZodErrorTree<object> ? "properties" extends keyof NonNullable<Props[k]> ? `${k}${typeof SEPARATOR}${Paths<NonNullable<Props[k]>>}` : k : k : never; }[keyof Props];
 type InferZodErrorPaths<T> = T extends $ZodErrorTree<object> ? Paths<T> : never;
-type ZodFieldErrorProps<Errors extends $ZodErrorTree<any>, Name extends "" | InferZodErrorPaths<Errors>> = {
+type ZodFieldErrorProps<Errors extends $ZodErrorTree<unknown>, Name extends "" | InferZodErrorPaths<Errors>> = {
   errors: Errors;
   name: Name;
   children?: (props: ZodFieldErrorChildrenProps<Name>) => React$1.ReactNode;
@@ -123,4 +130,14 @@ declare function Pending({ children }: PropsWithChildren | {
   }) => React.ReactNode;
 }): import("react").ReactNode;
 //#endregion
-export { Action, ActionContextState, ActionProps, Form, FormProps, InferZodErrorPaths, Paths, Pending, SpreadActionContext, ZodFieldError, ZodFieldErrorChildrenProps, ZodFieldErrorProps, createComponents, noError, useActionContext };
+//#region src/useResetAction.d.ts
+/**
+ * Hook to automatically reset the action when the component unmounts, unless it is in the initial state.
+ */
+declare function useResetAction(): void;
+/**
+ * Component that automatically resets the action when it unmounts, unless it is in the initial state.
+ */
+declare function ResetAction(): null;
+//#endregion
+export { Action, ActionContextState, ActionProps, Form, FormProps, InferZodErrorPaths, Paths, Pending, ResetAction, SpreadActionContext, ZodFieldError, ZodFieldErrorChildrenProps, ZodFieldErrorProps, createComponents, noError, useActionContext, useResetAction };

package/dist/client.mjs

@@ -1 +1 @@
-"use client";import{n as e,t}from"./createFormAction-BwMYAzm2.mjs";import{createContext as n,startTransition as r,use as i,useActionState as a,useCallback as o}from"react";import{Fragment as s,jsx as c}from"react/jsx-runtime";const l={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},u=n(null);function d(e){let t=i(u);if(!t)throw Error(`ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?`);return t}function f({children:n,action:i,initialData:s,args:d,permalink:f,validate:p}){let m=d?i.bind(null,...d):i,[h,g,_]=a(async(n,r)=>{if(r===null)return e(s);if(p){let e=await t(({invalid:e,success:t})=>async(n,r)=>{let i=p(r);return i?e(i):t(!0)})(n,r);if(e.type===`invalid`)return e}return m(n,r)},e(s),f),v=o(()=>{r(()=>{g(null)})},[g]),y=h.type===`initial`?{...h,...l,action:g,reset:v,isPending:_,isInitial:!0}:h.type===`invalid`?{...h,...l,action:g,reset:v,isPending:_,isInvalid:!0}:h.type===`failure`?{...h,...l,action:g,reset:v,isPending:_,isFailure:!0}:{...h,...l,action:g,reset:v,isPending:_,isSuccess:!0};return c(u,{value:y,children:n})}const p=Object.freeze({errors:Object.freeze([])});function m({errors:e,name:t,children:n=({error:e})=>c(s,{children:e})}){if(t.length===0)return n({name:t,error:e.errors[0],errors:e.errors});let r=t.split(`.`),i=e;for(let e of r){if(!i.properties){i=p;break}i=i.properties[e]??p}return n({name:t,error:i.errors[0],errors:i.errors})}function h(e,t={}){function n({name:n,children:r}){let i=d(e),{isInvalid:a,validationError:o}=i,l=r??(({error:e})=>a&&c(s,{children:e}));return c(m,{errors:o??p,name:n,children:e=>{let n=Object.fromEntries(Object.entries(t.fieldProps??{}).map(([t,n])=>[t,n(i,e)]));return l({...e,...n})}})}function r({children:t}){let{isFailure:n,error:r}=d(e);return n?typeof t==`function`?t({isFailure:n,error:r}):t:null}function i({children:t}){let{isSuccess:n,data:r}=d(e);return typeof t==`function`?t({isSuccess:n,data:r}):n&&t}function a({children:t}){let{isInvalid:n,validationError:r}=d(e);return typeof t==`function`?t({isInvalid:n,validationError:r}):n&&t}return{FieldError:n,Failure:r,Success:i,Invalid:a}}function g({autoReset:e=!1,...t}){let{action:n}=d();return c(`form`,{...e?{action:n}:{onSubmit:e=>{e.preventDefault();let t=e.currentTarget;r(()=>{n(new FormData(t))})}},...t})}function _({children:e}){let{isPending:t}=d();return typeof e==`function`?e({isPending:t}):t&&e}export{f as Action,g as Form,_ as Pending,m as ZodFieldError,h as createComponents,p as noError,d as useActionContext};
+"use client";import{n as e,t}from"./createFormAction-BwMYAzm2.mjs";import{createContext as n,startTransition as r,use as i,useActionState as a,useCallback as o,useEffect as s}from"react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";function d(){let{reset:e,isInitial:t}=h();s(()=>()=>{t||e()},[t,e])}function f(){return d(),null}const p={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},m=n(null);function h(e){let t=i(m);if(!t)throw Error(`ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?`);return t}function g({children:n,action:i,initialData:s,args:c,permalink:d,validate:h,autoReset:g}){let _=c?i.bind(null,...c):i,[v,y,b]=a(async(n,r)=>{if(r===null)return e(s);if(h){let e=await t(({invalid:e,success:t})=>async(n,r)=>{let i=h(r);return i?e(i):t(!0)})(n,r);if(e.type===`invalid`)return e}return _(n,r)},e(s),d),x={action:y,reset:o(()=>{r(()=>{y(null)})},[y]),isPending:b},S=v.type===`initial`?{...x,...v,...p,isInitial:!0}:v.type===`invalid`?{...x,...v,...p,isInvalid:!0}:v.type===`failure`?{...x,...v,...p,isFailure:!0}:{...x,...v,...p,isSuccess:!0};return u(m,{value:S,children:[g&&l(f,{}),n]})}const _=Object.freeze({errors:Object.freeze([])});function v({errors:e,name:t,children:n=({error:e})=>l(c,{children:e})}){if(t.length===0)return n({name:t,error:e.errors[0],errors:e.errors});let r=t.split(`.`),i=e;for(let e of r){if(!i.properties){i=_;break}i=i.properties[e]??_}return n({name:t,error:i.errors[0],errors:i.errors})}function y(e,t={}){function n({name:n,children:r}){let i=h(e),{isInvalid:a,validationError:o}=i,s=r??(({error:e})=>a&&l(c,{children:e}));return l(v,{errors:o??_,name:n,children:e=>{let n=Object.fromEntries(Object.entries(t.fieldProps??{}).map(([t,n])=>[t,n(i,e)]));return s({...e,...n})}})}function r({children:t}){let{isFailure:n,error:r}=h(e);return n?typeof t==`function`?t({isFailure:n,error:r}):t:null}function i({children:t}){let{isSuccess:n,data:r}=h(e);return typeof t==`function`?t({isSuccess:n,data:r}):n&&t}function a({children:t}){let{isInvalid:n,validationError:r}=h(e);return typeof t==`function`?t({isInvalid:n,validationError:r}):n&&t}return{FieldError:n,Failure:r,Success:i,Invalid:a}}function b({autoReset:e=!1,...t}){let{action:n}=h();return l(`form`,{...e?{action:n}:{onSubmit:e=>{e.preventDefault();let t=e.currentTarget;r(()=>{n(new FormData(t))})}},...t})}function x({children:e}){let{isPending:t}=h();return typeof e==`function`?e({isPending:t}):t&&e}export{g as Action,b as Form,x as Pending,f as ResetAction,v as ZodFieldError,y as createComponents,_ as noError,h as useActionContext,d as useResetAction};

package/dist/index.d.mts

@@ -6,6 +6,6 @@ import { ZodObject, z } from "zod";
  * @param schema z.object(...) schema
  * @returns validate function
  */
-declare function validateSchema<T extends ZodObject>(schema: T): (formData: FormData) => z.core.$ZodErrorTree<z.TypeOf<T>, string> | null;
+declare function validateSchema<T extends ZodObject>(schema: T): (formData: FormData) => z.core.$ZodErrorTree<z.infer<T>, string> | null;
 //#endregion
 export { ActionState, FailureState, Flatten, FormAction, InitialState, InvalidState, SuccessState, createFormAction, formAction, initial, validateSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "2.15.1",
+  "version": "2.17.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
@@ -19,7 +19,7 @@
     "lint:write": "biome lint ./src --write",
     "format": "biome format --write .",
     "format:check": "biome check .",
-    "ncu": "ncu --interactive --format group",
+    "check-updates": "ncu --interactive --format group",
     "pub:next": "npm publish --tag next"
   },
   "exports": {
@@ -57,22 +57,22 @@
     "zod-form-data": "^3.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.10",
+    "@biomejs/biome": "^2.5.11",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.6",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
-    "@vitejs/plugin-react": "^6.1.0",
-    "happy-dom": "^20.11.8",
+    "@vitejs/plugin-react": "^6.1.1",
+    "happy-dom": "^20.12.0",
     "npm-check-updates": "^23.1.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tsdown": "^0.22.14",
     "typescript": "^7.0.2",
     "vitest": "^4.1.11",
-    "zod": "^4.4.3",
+    "zod": "^4.5.4",
     "zod-form-data": "^3.0.3"
   }
 }