react-form-action 1.4.0 → 1.5.0

package/dist/client.d.mts

@@ -1,17 +1,69 @@
-import * as react from 'react';
-import react__default, { PropsWithChildren, FormHTMLAttributes } from 'react';
+import * as React from 'react';
+import React__default, { PropsWithChildren, FormHTMLAttributes } from 'react';
 import { b as FormAction, A as ActionState, a as InitialState, I as InvalidState, F as FailureState, S as SuccessState } from './createFormAction-4e719362.js';
+import { ZodFormattedError } from 'zod';
 import { RenderProp } from 'react-render-prop-type';
 import { useFormStatus } from 'react-dom';
-import { ZodFormattedError } from 'zod';
+
+type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
+    action: FormAction<Data, Error, ValidationError>;
+    initialData: Data;
+    permalink?: string;
+}>;
+type ActionStatusFlags<T extends ActionState<unknown, unknown, unknown>["type"] | unknown = unknown> = {
+    isInitial: T extends "initial" ? true : false;
+    isInvalid: T extends "invalid" ? true : false;
+    isFailure: T extends "failure" ? true : false;
+    isSuccess: T extends "success" ? true : false;
+};
+type ActionContextState<T extends ActionState<unknown, unknown, unknown>> = T & ActionStatusFlags<T["type"]> & {
+    /**
+     * The dispatch function returned from React.useActionState()
+     */
+    action: (payload: FormData) => void;
+    isPending: boolean;
+};
+/**
+ * NOTE: ActionContextState<ActionState<...>> would not allow discriminate the union inside of the ActionState.
+ */
+type SpreadActionContext<Data = unknown, Error = unknown, ValidationError = unknown> = ActionContextState<InitialState<Data>> | ActionContextState<InvalidState<ValidationError>> | ActionContextState<FailureState<Error>> | ActionContextState<SuccessState<Data>>;
+/**
+ * A hook to consume the form action state from the context.
+ */
+declare function useActionContext<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;
+
+type ActionFormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "action"> & {
+    /**
+     * Opt-in into automatic form reset by using the form "action" prop.
+     * By default, the onSubmit with a custom transition which opts-out of the implicit form reset.
+     * See for more. https://github.com/facebook/react/issues/29034
+     * @default false
+     */
+    autoReset?: boolean;
+};
+declare function ActionForm({ autoReset, ...props }: ActionFormProps): React__default.JSX.Element;
+
+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;
 
 /**
- * Creates a Form component which state is accessible via context - useFormContext() hook.
+ * Creates a typed components for actions created with the formAction builder.
  */
-declare function createForm<Data, Error = Data, ValidationError = Record<string, never>>(action: FormAction<Data, Error, ValidationError>): {
-    Form: ({ children, ...props }: PropsWithChildren<{
-        initialData: Data;
-    }>) => react__default.JSX.Element;
+declare function createComponents<Data, Error, ValidationError extends ZodFormattedError<any>>(action: FormAction<Data, Error, ValidationError>): {
+    FieldError: ({ name, }: React__default.PropsWithChildren<{
+        name?: "" | InferZodErrorPaths<ValidationError> | undefined;
+    }>) => false | React__default.JSX.Element;
 };
 
 type FormStateProps<Data, Error, ValidationError, Payload> = {
@@ -37,36 +89,23 @@ type FormMetaState<T extends ActionState<unknown, unknown, unknown>> = T & FormS
     isPending: boolean;
 };
 type FormProps<Data, Error, ValidationError> = Omit<FormHTMLAttributes<HTMLFormElement>, "action" | "children"> & FormStateProps<Data, Error, ValidationError, FormData> & RenderProp<FormMetaState<InitialState<Data>> | FormMetaState<InvalidState<ValidationError>> | FormMetaState<FailureState<Error>> | FormMetaState<SuccessState<Data>>>;
-declare function Form<Data, Error, ValidationError>({ children, action, initialData, permalink, autoReset, ...props }: FormProps<Data, Error, ValidationError>): react__default.JSX.Element;
+declare function Form<Data, Error, ValidationError>({ children, action, initialData, permalink, autoReset, ...props }: FormProps<Data, Error, ValidationError>): React__default.JSX.Element;
 
 /**
  * A context exposing the form action state.
  * @private You don't need to use this component directly. Use the `createForm` function instead.
  */
-declare const FormContext: react.Context<FormMetaState<ActionState<unknown, unknown, unknown>> | null>;
+declare const FormContext: React.Context<FormMetaState<ActionState<unknown, unknown, unknown>> | null>;
 /**
  * A hook to consume the form action state from the context.
  */
 declare const useFormContext: () => FormMetaState<ActionState<unknown, unknown, unknown>>;
 
-declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): react.ReactNode;
+declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;
 
 /**
  * Conditionally renders the children, when the form action is in the "pending" state.
  */
-declare function Pending({ children }: PropsWithChildren): react.ReactNode;
-
-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;
+declare function Pending({ children }: PropsWithChildren): React.ReactNode;
 
-export { Form, FormContext, FormMetaState, FormProps, FormStateProps, FormStatus, InferZodErrorPaths, Paths, Pending, ZodFieldError, ZodFieldErrorProps, createForm, initial, useFormContext };
+export { Action, ActionContextState, ActionForm, ActionFormProps, ActionProps, Form, FormContext, FormMetaState, FormProps, FormStateProps, FormStatus, InferZodErrorPaths, Paths, Pending, ZodFieldError, ZodFieldErrorProps, createComponents, initial, useActionContext, useFormContext };

package/dist/client.mjs

@@ -1 +1 @@
-"use client";import f from"react";import x,{useTransition as P}from"react";import{useActionState as D}from"react";function k(r){return{type:"initial",data:r,error:null,validationError:null}}var s={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1};function c({children:r,action:e,initialData:a,permalink:t,autoReset:o=!1,...m}){let[n,l,i]=D(e,k(a),t),[,E]=P(),S=n.type==="initial"?{...n,...s,isPending:i,isInitial:!0}:n.type==="invalid"?{...n,...s,isPending:i,isInvalid:!0}:n.type==="failure"?{...n,...s,isPending:i,isFailure:!0}:{...n,...s,isPending:i,isSuccess:!0};return x.createElement("form",{...o?{action:l}:{onSubmit:u=>{u.preventDefault();let y=u.currentTarget;E(()=>{l(new FormData(y))})}},...m},r(S))}import{createContext as A,use as h}from"react";var p=A(null),d=()=>{let r=h(p);if(!r)throw new Error("Form Context must be initialized before use.");return r};function z(r){return{Form:({children:a,...t})=>f.createElement(c,{action:r,...t},o=>f.createElement(p,{value:o},a))}}import{useFormStatus as T}from"react-dom";function W({children:r}){return r(T())}function $({children:r}){let{isPending:e}=d();return e&&r}import F from"react";var g=".",v=Object.freeze({_errors:Object.freeze([])});function G({errors:r,name:e="",children:a=({errors:t})=>F.createElement(F.Fragment,null,t[0])}){if(e.length===0)return a({errors:r._errors});let t=e.split(g),o=r;for(;t.length;){let m=t.shift();o=o[m]??v}return a({errors:o._errors})}export{c as Form,p as FormContext,W as FormStatus,$ as Pending,G as ZodFieldError,z as createForm,k as initial,d as useFormContext};
+"use client";import y from"react";import{createContext as A,use as P}from"react";import{useActionState as D}from"react";function k(t){return{type:"initial",data:t,error:null,validationError:null}}var u={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},d=A(null);function s(){let t=P(d);if(!t)throw new Error("ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?");return t}function j({children:t,action:o,initialData:n,permalink:a}){let[r,i,e]=D(o,k(n),a),l=r.type==="initial"?{...r,...u,action:i,isPending:e,isInitial:!0}:r.type==="invalid"?{...r,...u,action:i,isPending:e,isInvalid:!0}:r.type==="failure"?{...r,...u,action:i,isPending:e,isFailure:!0}:{...r,...u,action:i,isPending:e,isSuccess:!0};return y.createElement(d,{value:l},t)}import T,{startTransition as w}from"react";function B({autoReset:t=!1,...o}){let{action:n}=s();return T.createElement("form",{...t?{action:n}:{onSubmit:r=>{r.preventDefault();let i=r.currentTarget;w(()=>{n(new FormData(i))})}},...o})}import v from"react";import f from"react";var C=".",h=Object.freeze({_errors:Object.freeze([])});function E({errors:t,name:o="",children:n=({errors:a})=>f.createElement(f.Fragment,null,a[0])}){if(o.length===0)return n({errors:t._errors});let a=o.split(C),r=t;for(;a.length;){let i=a.shift();r=r[i]??h}return n({errors:r._errors})}function Y(t){function o({name:n}){let{isInvalid:a,validationError:r}=s();return a&&v.createElement(E,{errors:r,name:n})}return{FieldError:o}}import I,{useTransition as g}from"react";import{useActionState as b}from"react";function V(t){return{type:"initial",data:t,error:null,validationError:null}}var m={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1};function et({children:t,action:o,initialData:n,permalink:a,autoReset:r=!1,...i}){let[e,l,c]=b(o,V(n),a),[,S]=g(),F=e.type==="initial"?{...e,...m,isPending:c,isInitial:!0}:e.type==="invalid"?{...e,...m,isPending:c,isInvalid:!0}:e.type==="failure"?{...e,...m,isPending:c,isFailure:!0}:{...e,...m,isPending:c,isSuccess:!0};return I.createElement("form",{...r?{action:l}:{onSubmit:p=>{p.preventDefault();let x=p.currentTarget;S(()=>{l(new FormData(x))})}},...i},t(F))}import{createContext as M,use as Z}from"react";var R=M(null),it=()=>{let t=Z(R);if(!t)throw new Error("Form Context must be initialized before use.");return t};import{useFormStatus as H}from"react-dom";function ct({children:t}){return t(H())}function pt({children:t}){let{isPending:o}=s();return o&&t}export{j as Action,B as ActionForm,et as Form,R as FormContext,ct as FormStatus,pt as Pending,E as ZodFieldError,Y as createComponents,V as initial,s as useActionContext,it as useFormContext};

package/package.json

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