react-form-action 1.2.1 → 1.2.3

package/README.md

@@ -50,7 +50,7 @@ const i18nMiddleware = async () => {
 const authAction = formAction
   .use(i18nMiddleware)
   .use(async ({ ctx: { t } }) =>
-    console.log("🎉 context enhanced by previous middlewares 🎉", t)
+    console.log("🎉 context enhanced by previous middlewares 🎉", t),
   )
   .error(({ error }) => {
     if (error instanceof DbError) {
@@ -85,7 +85,7 @@ export const signUp = authAction
       .refine((data) => data.password === data.confirm, {
         message: "Passwords don't match",
         path: ["confirm"],
-      })
+      }),
   ) // if using refinement, only one input call is permited, as schema with ZodEffects is not extendable.
   .run(async ({ ctx: { t }, input: { email, password } }) => {
     // 🎉 passwords match!
@@ -161,7 +161,7 @@ export const updateUser = createFormAction<
 
       return failure({ message: "Failed to update user." });
     }
-  }
+  },
 );
 ```
 
@@ -237,19 +237,22 @@ export const signUp = authAction
 export function SignUpForm() {
   return (
     <Form action={signUp} initialData="">
-      {({ error, data, validationError }) => (
-        <>
-          {/*
-            When the "name" prop is ommited, the top-level error will be rendered e.g.:
-            "Passwords don't match"
-          */}
-          <ZodFieldError errors={validationError} />
-          {/* Access fields by their name: */}
-          <ZodFieldError errors={validationError} name="password" />
-          {/* Access nested fields by dot access notation: */}
-          <ZodFieldError errors={validationError} name="user.email" />
-        </>
-      )}
+      {({ isInvalid, validationError }) =>
+        {/* Render ZodFieldError behind the isInvalid flag to narrow type (omits the possibility of null) */}
+        isInvalid && (
+          <>
+            {/*
+              When the "name" prop is ommited, the top-level error will be rendered e.g.:
+              "Passwords don't match"
+            */}
+            <ZodFieldError errors={validationError} />
+            {/* Access fields by their name: */}
+            <ZodFieldError errors={validationError} name="password" />
+            {/* Access nested fields by dot access notation: */}
+            <ZodFieldError errors={validationError} name="user.email" />
+          </>
+        )
+      }
     </Form>
   );
 }

package/dist/client.d.mts

@@ -26,15 +26,16 @@ declare function Form<Data, Error, ValidationError>({ children, action, initialD
 declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;
 
 declare const SEPARATOR: ".";
-type Paths<Err extends object> = {
+type Paths<Err> = {
     [k in keyof Err]: k extends string ? Err[k] extends object ? `${k}${typeof SEPARATOR}${Paths<Err[k]>}` : k : never;
 }[keyof Err];
-type ZodFieldErrorProps<Errors extends ZodFormattedError<any>> = Errors extends ZodFormattedError<infer E extends object> ? {
+type InferZodErrorPaths<Errors> = Errors extends ZodFormattedError<infer E> ? Paths<E> : never;
+type ZodFieldErrorProps<Errors extends ZodFormattedError<any>> = {
     errors: Errors;
-    name?: "" | Paths<E>;
+    name?: "" | InferZodErrorPaths<Errors>;
 } & Partial<RenderProp<{
     errors: readonly string[];
-}>> : any;
+}>>;
 declare function ZodFieldError<Errors extends ZodFormattedError<any>>({ errors, name, children, }: ZodFieldErrorProps<Errors>): React__default.ReactNode;
 
-export { Form, FormProps, FormStateProps, FormStatus, ZodFieldError, ZodFieldErrorProps, initial };
+export { Form, FormProps, FormStateProps, FormStatus, InferZodErrorPaths, Paths, ZodFieldError, ZodFieldErrorProps, initial };

package/dist/client.mjs

@@ -1 +1 @@
-"use client";import l from"react";import{useActionState as F}from"react";import{useFormStatus as c}from"react-dom";function s({children:t}){return t(c())}function f(t){return{type:"initial",data:t,error:null,validationError:null}}var i={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1};function T({children:t,action:a,initialData:n,permalink:e,...o}){let[r,m]=F(a,f(n),e),d=r.type==="initial"?{...r,...i,isInitial:!0}:r.type==="invalid"?{...r,...i,isInvalid:!0}:r.type==="failure"?{...r,...i,isFailure:!0}:{...r,...i,isSuccess:!0};return l.createElement("form",{action:m,...o},l.createElement(s,null,({pending:u})=>t({...d,isPending:u})))}import p from"react";var E=".",S=Object.freeze({_errors:Object.freeze([])});function v({errors:t,name:a="",children:n=({errors:e})=>p.createElement(p.Fragment,null,e[0])}){if(a.length===0)return n({errors:t._errors});let e=a.split(E),o=t;for(;e.length;){let r=e.shift();o=o[r]??S}return n({errors:o._errors})}export{T as Form,s as FormStatus,v as ZodFieldError,f as initial};
+"use client";import d from"react";import{useActionState as u}from"react";function c(t){return{type:"initial",data:t,error:null,validationError:null}}var i={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1};function P({children:t,action:a,initialData:n,permalink:e,...o}){let[r,l,p]=u(a,c(n),e),m=r.type==="initial"?{...r,...i,isInitial:!0}:r.type==="invalid"?{...r,...i,isInvalid:!0}:r.type==="failure"?{...r,...i,isFailure:!0}:{...r,...i,isSuccess:!0};return d.createElement("form",{action:l,...o},t({...m,isPending:p}))}import{useFormStatus as E}from"react-dom";function D({children:t}){return t(E())}import s from"react";var f=".",F=Object.freeze({_errors:Object.freeze([])});function v({errors:t,name:a="",children:n=({errors:e})=>s.createElement(s.Fragment,null,e[0])}){if(a.length===0)return n({errors:t._errors});let e=a.split(f),o=t;for(;e.length;){let r=e.shift();o=o[r]??F}return n({errors:o._errors})}export{P as Form,D as FormStatus,v as ZodFieldError,c as initial};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
@@ -54,19 +54,20 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.1",
     "@vitejs/plugin-react": "^4.3.4",
     "happy-dom": "^15.11.7",
     "npm-check-updates": "^17.1.11",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-render-prop-type": "^0.1.0",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
     "vitest": "^1.3.1",
-    "zod": "^3.22.4",
+    "zod": "^3.23.8",
     "zod-form-data": "^2.0.2"
   }
 }