react-form-action 2.17.0 → 2.18.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

@@ -106,6 +106,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

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}){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";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:e,value:t,...n}){return l(`input`,{type:`hidden`,name:e,defaultValue:t,...n})}function r({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 i({children:t}){let{isFailure:n,error:r}=h(e);return n?typeof t==`function`?t({isFailure:n,error:r}):t:null}function a({children:t}){let{isSuccess:n,data:r}=h(e);return typeof t==`function`?t({isSuccess:n,data:r}):n&&t}function o({children:t}){let{isInvalid:n,validationError:r}=h(e);return typeof t==`function`?t({isInvalid:n,validationError:r}):n&&t}return{FieldError:r,Failure:i,Success:a,Invalid:o,Value:n}}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/package.json

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