react-form-action 1.4.1 → 1.5.0

package/dist/client.d.mts

@@ -1,9 +1,9 @@
 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>;
@@ -23,10 +23,14 @@ type ActionContextState<T extends ActionState<unknown, unknown, unknown>> = T &
     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 const useActionContext: () => ActionContextState<ActionState<unknown, unknown, unknown>>;
+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"> & {
@@ -40,13 +44,26 @@ type ActionFormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "action"> & {
 };
 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> = {
@@ -91,17 +108,4 @@ declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormS
  */
 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;
-
-export { Action, ActionContextState, ActionForm, ActionFormProps, ActionProps, Form, FormContext, FormMetaState, FormProps, FormStateProps, FormStatus, InferZodErrorPaths, Paths, Pending, ZodFieldError, ZodFieldErrorProps, createForm, initial, useActionContext, 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 k from"react";import{createContext as D,use as T}from"react";import{useActionState as w}from"react";function h(t){return{type:"initial",data:t,error:null,validationError:null}}var l={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},d=D(null),f=()=>{let t=T(d);if(!t)throw new Error("ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?");return t};function _({children:t,action:e,initialData:n,permalink:a}){let[r,i,o]=w(e,h(n),a),s=r.type==="initial"?{...r,...l,action:i,isPending:o,isInitial:!0}:r.type==="invalid"?{...r,...l,action:i,isPending:o,isInvalid:!0}:r.type==="failure"?{...r,...l,action:i,isPending:o,isFailure:!0}:{...r,...l,action:i,isPending:o,isSuccess:!0};return k.createElement(d,{value:s},t)}import v,{startTransition as g}from"react";function G({autoReset:t=!1,...e}){let{action:n}=f();return v.createElement("form",{...t?{action:n}:{onSubmit:r=>{r.preventDefault();let i=r.currentTarget;g(()=>{n(new FormData(i))})}},...e})}import S from"react";import C,{useTransition as I}from"react";import{useActionState as b}from"react";function M(t){return{type:"initial",data:t,error:null,validationError:null}}var u={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1};function F({children:t,action:e,initialData:n,permalink:a,autoReset:r=!1,...i}){let[o,s,m]=b(e,M(n),a),[,y]=I(),A=o.type==="initial"?{...o,...u,isPending:m,isInitial:!0}:o.type==="invalid"?{...o,...u,isPending:m,isInvalid:!0}:o.type==="failure"?{...o,...u,isPending:m,isFailure:!0}:{...o,...u,isPending:m,isSuccess:!0};return C.createElement("form",{...r?{action:s}:{onSubmit:p=>{p.preventDefault();let P=p.currentTarget;y(()=>{s(new FormData(P))})}},...i},t(A))}import{createContext as V,use as R}from"react";var c=V(null),E=()=>{let t=R(c);if(!t)throw new Error("Form Context must be initialized before use.");return t};function ot(t){return{Form:({children:n,...a})=>S.createElement(F,{action:t,...a},r=>S.createElement(c,{value:r},n))}}import{useFormStatus as Z}from"react-dom";function at({children:t}){return t(Z())}function mt({children:t}){let{isPending:e}=E();return e&&t}import x from"react";var H=".",L=Object.freeze({_errors:Object.freeze([])});function ct({errors:t,name:e="",children:n=({errors:a})=>x.createElement(x.Fragment,null,a[0])}){if(e.length===0)return n({errors:t._errors});let a=e.split(H),r=t;for(;a.length;){let i=a.shift();r=r[i]??L}return n({errors:r._errors})}export{_ as Action,G as ActionForm,F as Form,c as FormContext,at as FormStatus,mt as Pending,ct as ZodFieldError,ot as createForm,M as initial,f as useActionContext,E 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.1",
+  "version": "1.5.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",