react-form-action 1.2.0 → 1.2.2

package/README.md

@@ -230,26 +230,29 @@ export const signUp = authAction
         message: "Passwords don't match",
       })
   )
-  .run(async ({ ctx: { t }, input: { email, password } }) => {
+  .run(async ({ ctx, input }) => {
     // implementation
   });
 
 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

@@ -3,6 +3,7 @@ import React__default, { FormHTMLAttributes } from 'react';
 import { RenderProp } from 'react-render-prop-type';
 import { F as FormState, b as InitialState, I as InvalidState, a as FailureState, S as SuccessState } from './createFormAction-3a51310f.js';
 import { useFormStatus } from 'react-dom';
+import { ZodFormattedError } from 'zod';
 
 type FormStateProps<Data, Error, ValidationError, Payload> = {
     action: (state: FormState<Data, Error, ValidationError>, payload: Payload) => Promise<FormState<Data, Error, ValidationError>>;
@@ -24,4 +25,17 @@ declare function Form<Data, Error, ValidationError>({ children, action, initialD
 
 declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;
 
-export { Form, FormProps, FormStateProps, FormStatus, initial };
+declare const SEPARATOR: ".";
+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 InferZodErrorPaths<Errors> = Errors extends ZodFormattedError<infer E> ? Paths<E> : never;
+type ZodFieldErrorProps<Errors extends ZodFormattedError<any>> = {
+    errors: Errors;
+    name?: "" | InferZodErrorPaths<Errors>;
+} & Partial<RenderProp<{
+    errors: readonly string[];
+}>>;
+declare function ZodFieldError<Errors extends ZodFormattedError<any>>({ errors, name, children, }: ZodFieldErrorProps<Errors>): React__default.ReactNode;
+
+export { Form, FormProps, FormStateProps, FormStatus, InferZodErrorPaths, Paths, ZodFieldError, ZodFieldErrorProps, initial };

package/dist/client.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
@@ -54,20 +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",
-    "next": "^14.0.2",
     "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"
   }
 }