react-form-action 2.7.0 → 2.8.0

package/README.md

@@ -223,10 +223,12 @@ export default function Page({
   const locale = await localeParam();
   const { userId } = await params;
 
-  const action = updateUser.bind(null, userId, locale);
-
   return (
-    <Action action={action} initialData="">
+    <Action
+      action={updateUser}
+      args={[userId, await localeParam()]}
+      initialData=""
+    >
       <SubscribeForm />
     </Action>
   );

package/dist/client.d.mts

@@ -3,10 +3,16 @@ import React__default, { PropsWithChildren, JSX } from 'react';
 import { F as FormAction, A as ActionState, I as InitialState, a as InvalidState, b as FailureState, S as SuccessState } from './createFormAction-DjhozgiG.mjs';
 import { $ZodErrorTree } from 'zod/v4/core';
 
-type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
-    action: FormAction<Data, Error, ValidationError>;
+type ActionProps<Data, Error, ValidationError, Arguments extends unknown[] = []> = PropsWithChildren<Arguments extends [unknown] ? {
+    action: FormAction<Data, Error, ValidationError, FormData, Arguments>;
+    args: Arguments;
     initialData: Data;
     permalink?: string;
+} : {
+    action: FormAction<Data, Error, ValidationError, FormData, Arguments>;
+    initialData: Data;
+    args?: undefined;
+    permalink?: string;
 }>;
 type ActionStatusFlags<T extends ActionState<unknown, unknown, unknown>["type"] | unknown = unknown> = {
     isInitial: T extends "initial" ? true : false;
@@ -28,8 +34,8 @@ 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>(action?: FormAction<Data, Error, ValidationError>): SpreadActionContext<Data, Error, ValidationError>;
-declare function Action<Data, Error, ValidationError>({ children, action: formAction, initialData, permalink, }: ActionProps<Data, Error, ValidationError>): React__default.JSX.Element;
+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, }: ActionProps<Data, Error, ValidationError, Args>): React__default.JSX.Element;
 
 type FormProps = Omit<JSX.IntrinsicElements["form"], "action"> & {
     /**
@@ -65,7 +71,7 @@ declare function ZodFieldError<Errors extends $ZodErrorTree<object>, Name extend
 /**
  * Creates a typed components for actions created with the formAction builder.
  */
-declare function createComponents<Data, Error, ValidationError extends $ZodErrorTree<any>>(action: FormAction<Data, Error, ValidationError>): {
+declare function createComponents<Data, Error, ValidationError extends $ZodErrorTree<any>, Args extends unknown[] = []>(action: FormAction<Data, Error, ValidationError, FormData, Args>): {
     FieldError: <Name extends "" | InferZodErrorPaths<ValidationError>>({ name, children, }: {
         name: Name;
         children?: (props: ZodFieldErrorChildrenProps<Name>) => React__default.ReactNode;
@@ -79,6 +85,15 @@ declare function createComponents<Data, Error, ValidationError extends $ZodError
             data: Data;
         }) => React__default.ReactNode;
     }) => React__default.ReactNode;
+    Invalid: ({ children, }: PropsWithChildren | {
+        children?: (props: {
+            isInvalid: false;
+            validationError: null;
+        } | {
+            isInvalid: true;
+            validationError: ValidationError;
+        }) => React__default.ReactNode;
+    }) => React__default.ReactNode;
 };
 
 /**

package/dist/client.mjs

@@ -1 +1 @@
-"use client";import{a as u}from"./chunk-LPB4R2UB.mjs";import S from"react";import{createContext as A,use as P}from"react";import{useActionState as y}from"react";var c={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},m=A(null);function a(o){let t=P(m);if(!t)throw new Error("ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?");return t}function b({children:o,action:t,initialData:i,permalink:e}){let[r,n,s]=y(t,u(i),e),d=r.type==="initial"?{...r,...c,action:n,isPending:s,isInitial:!0}:r.type==="invalid"?{...r,...c,action:n,isPending:s,isInvalid:!0}:r.type==="failure"?{...r,...c,action:n,isPending:s,isFailure:!0}:{...r,...c,action:n,isPending:s,isSuccess:!0};return S.createElement(m,{value:d},o)}import h,{startTransition as F}from"react";function I({autoReset:o=!1,...t}){let{action:i}=a();return h.createElement("form",{...o?{action:i}:{onSubmit:r=>{r.preventDefault();let n=r.currentTarget;F(()=>{i(new FormData(n))})}},...t})}import p from"react";import f from"react";var C=".",l=Object.freeze({errors:Object.freeze([])});function E({errors:o,name:t,children:i=({error:e})=>f.createElement(f.Fragment,null,e)}){if(t.length===0)return i({name:t,error:o.errors[0],errors:o.errors});let e=t.split(C),r=o;for(;e.length;){let n=e.shift();if(!r.properties){r=l;break}r=r.properties[n]??l}return i({name:t,error:r.errors[0],errors:r.errors})}function J(o){function t({name:e,children:r}){let{isInvalid:n,validationError:s}=a(o);return p.createElement(E,{errors:s??l,name:e},r??(({error:x})=>n&&p.createElement(p.Fragment,null,x)))}function i({children:e}){let{isSuccess:r,data:n}=a(o);return typeof e=="function"?e(r?{isSuccess:r,data:n}:{isSuccess:r,data:n}):r&&e}return{FieldError:t,Success:i}}function q({children:o}){let{isPending:t}=a();return typeof o=="function"?o({isPending:t}):t&&o}export{b as Action,I as Form,q as Pending,E as ZodFieldError,J as createComponents,l as noError,a as useActionContext};
+"use client";import{a as f}from"./chunk-LPB4R2UB.mjs";import S from"react";import{useActionState as F,createContext as P,use as y}from"react";var c={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},E=P(null);function s(e){let t=y(E);if(!t)throw new Error("ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?");return t}function v({children:e,action:t,initialData:a,args:i,permalink:r}){let o=i?t.bind(null,...i):t,[n,l,d]=F(o,f(a),r),u=n.type==="initial"?{...n,...c,action:l,isPending:d,isInitial:!0}:n.type==="invalid"?{...n,...c,action:l,isPending:d,isInvalid:!0}:n.type==="failure"?{...n,...c,action:l,isPending:d,isFailure:!0}:{...n,...c,action:l,isPending:d,isSuccess:!0};return S.createElement(E,{value:u},e)}import h,{startTransition as g}from"react";function I({autoReset:e=!1,...t}){let{action:a}=s();return h.createElement("form",{...e?{action:a}:{onSubmit:r=>{r.preventDefault();let o=r.currentTarget;g(()=>{a(new FormData(o))})}},...t})}import m from"react";import x from"react";var C=".",p=Object.freeze({errors:Object.freeze([])});function A({errors:e,name:t,children:a=({error:i})=>x.createElement(x.Fragment,null,i)}){if(t.length===0)return a({name:t,error:e.errors[0],errors:e.errors});let i=t.split(C),r=e;for(;i.length;){let o=i.shift();if(!r.properties){r=p;break}r=r.properties[o]??p}return a({name:t,error:r.errors[0],errors:r.errors})}function J(e){function t({name:r,children:o}){let{isInvalid:n,validationError:l}=s(e);return m.createElement(A,{errors:l??p,name:r},o??(({error:u})=>n&&m.createElement(m.Fragment,null,u)))}function a({children:r}){let{isSuccess:o,data:n}=s(e);return typeof r=="function"?r(o?{isSuccess:o,data:n}:{isSuccess:o,data:n}):o&&r}function i({children:r}){let{isInvalid:o,validationError:n}=s(e);return typeof r=="function"?r(o?{isInvalid:o,validationError:n}:{isInvalid:o,validationError:n}):o&&r}return{FieldError:t,Success:a,Invalid:i}}function q({children:e}){let{isPending:t}=s();return typeof e=="function"?e({isPending:t}):t&&e}export{v as Action,I as Form,q as Pending,A as ZodFieldError,J as createComponents,p as noError,s as useActionContext};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",