react-form-action 2.17.1 → 2.19.0

package/README.md

@@ -451,6 +451,40 @@ export function SignUpForm() {
 }
 ```
 
+#### `<Value>`
+
+Renders a hidden `<input>` with a fixed value, so a form can submit a value without a visible field. Use it to send the same form with different values, e.g. one submit button per decision.
+
+Props:
+- `name` - the form field name. Like `<FieldError>`, it is typed to the paths of the action's input schema.
+- `value` - the string value submitted with the form.
+- Any other `<input>` attributes are passed through to the hidden input.
+
+```tsx
+import { Action, Form, createComponents } from "react-form-action/client";
+
+import { decisionAction } from "./actions";
+
+// 🌟 The name prop is bound to the decisionAction input schema
+const { Value } = createComponents(decisionAction);
+
+export function DecisionForm() {
+  return (
+    <Action action={decisionAction}>
+      <Form>
+        {/* 👉 Submits decision=accept when the button is clicked */}
+        <Value name="decision" value="accept" />
+        <button type="submit">Accept</button>
+      </Form>
+      <Form>
+        <Value name="decision" value="deny" />
+        <button type="submit">Deny</button>
+      </Form>
+    </Action>
+  );
+}
+```
+
 #### `<Success>`
 
 #### When children are JSX

package/dist/client.d.mts

@@ -1,5 +1,6 @@
 import { a as FormAction, c as SuccessState, i as FailureState, o as InitialState, r as ActionState, s as InvalidState, t as Flatten } from "./formAction-0eiUHrXx.mjs";
-import React$1, { JSX, PropsWithChildren } from "react";
+import React$1, { JSX, PropsWithChildren, ReactNode } from "react";
+import { FormStatus } from "react-dom";
 import { $ZodErrorTree } from "zod/v4/core";
 //#region src/Action.d.ts
 type ActionProps<Data, Error, ValidationError, Arguments extends unknown[] = []> = PropsWithChildren<{
@@ -106,6 +107,10 @@ declare function createComponents<Data, Error, ValidationError extends $ZodError
       validationError: ValidationError;
     }) => React$1.ReactNode;
   }) => React$1.ReactNode;
+  Value: <Name extends "" | InferZodErrorPaths<ValidationError>>({ name, value, ...props }: {
+    name: Name;
+    value: string;
+  } & React$1.InputHTMLAttributes<HTMLInputElement>) => React$1.JSX.Element;
 };
 //#endregion
 //#region src/Form.d.ts
@@ -130,6 +135,25 @@ declare function Pending({ children }: PropsWithChildren | {
   }) => React.ReactNode;
 }): import("react").ReactNode;
 //#endregion
+//#region src/Submit.d.ts
+type SubmitChildrenProps = FormStatus & {
+  /**
+   * Whether the **action** is pending. It will disable the submit button when true.
+   */
+  disabled: boolean;
+};
+type SubmitProps = {
+  /**
+   * A render prop to render the submit button.
+   */
+  children: (props: SubmitChildrenProps) => ReactNode;
+};
+/**
+ * A submit status component that tracks both the action & form pending states.
+ * NOTE: must be rendered within a <form>.
+ */
+declare function Submit({ children }: SubmitProps): ReactNode;
+//#endregion
 //#region src/useResetAction.d.ts
 /**
  * Hook to automatically reset the action when the component unmounts, unless it is in the initial state.
@@ -140,4 +164,4 @@ declare function useResetAction(): void;
  */
 declare function ResetAction(): null;
 //#endregion
-export { Action, ActionContextState, ActionProps, Form, FormProps, InferZodErrorPaths, Paths, Pending, ResetAction, SpreadActionContext, ZodFieldError, ZodFieldErrorChildrenProps, ZodFieldErrorProps, createComponents, noError, useActionContext, useResetAction };
+export { Action, ActionContextState, ActionProps, Form, FormProps, InferZodErrorPaths, Paths, Pending, ResetAction, SpreadActionContext, Submit, 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,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=!0}){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};
+"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";import{useFormStatus as d}from"react-dom";function f(){let{reset:e,isInitial:t}=g();s(()=>()=>{t||e()},[t,e])}function p(){return f(),null}const m={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},h=n(null);function g(e){let t=i(h);if(!t)throw Error(`ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?`);return t}function _({children:n,action:i,initialData:s,args:c,permalink:d,validate:f,autoReset:g=!0}){let _=c?i.bind(null,...c):i,[v,y,b]=a(async(n,r)=>{if(r===null)return e(s);if(f){let e=await t(({invalid:e,success:t})=>async(n,r)=>{let i=f(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,...m,isInitial:!0}:v.type===`invalid`?{...x,...v,...m,isInvalid:!0}:v.type===`failure`?{...x,...v,...m,isFailure:!0}:{...x,...v,...m,isSuccess:!0};return u(h,{value:S,children:[g&&l(p,{}),n]})}const v=Object.freeze({errors:Object.freeze([])});function y({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=v;break}i=i.properties[e]??v}return n({name:t,error:i.errors[0],errors:i.errors})}function b(e,t={}){function n({name:e,value:t,...n}){return l(`input`,{type:`hidden`,name:e,defaultValue:t,...n})}function r({name:n,children:r}){let i=g(e),{isInvalid:a,validationError:o}=i,s=r??(({error:e})=>a&&l(c,{children:e}));return l(y,{errors:o??v,name:n,children:e=>{let n=Object.fromEntries(Object.entries(t.fieldProps??{}).map(([t,n])=>[t,n(i,e)]));return s({...e,...n})}})}function i({children:t}){let{isFailure:n,error:r}=g(e);return n?typeof t==`function`?t({isFailure:n,error:r}):t:null}function a({children:t}){let{isSuccess:n,data:r}=g(e);return typeof t==`function`?t({isSuccess:n,data:r}):n&&t}function o({children:t}){let{isInvalid:n,validationError:r}=g(e);return typeof t==`function`?t({isInvalid:n,validationError:r}):n&&t}return{FieldError:r,Failure:i,Success:a,Invalid:o,Value:n}}function x({autoReset:e=!1,...t}){let{action:n}=g();return l(`form`,{...e?{action:n}:{onSubmit:e=>{e.preventDefault();let t=e.currentTarget;r(()=>{n(new FormData(t))})}},...t})}function S({children:e}){let{isPending:t}=g();return typeof e==`function`?e({isPending:t}):t&&e}function C({children:e}){let{isPending:t}=g();return e({...d(),disabled:t})}export{_ as Action,x as Form,S as Pending,p as ResetAction,C as Submit,y as ZodFieldError,b as createComponents,v as noError,g as useActionContext,f as useResetAction};

package/package.json

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