remix-validated-form 4.6.4 → 4.6.6

package/.turbo/turbo-build.log

@@ -1,17 +1,17 @@
 $ vite build
-vite v2.9.5 building for production...
+vite v2.9.15 building for production...
 transforming...
-✓ 289 modules transformed.
+✓ 291 modules transformed.
 rendering chunks...
-dist/remix-validated-form.cjs.js   32.65 KiB / gzip: 11.34 KiB
-dist/remix-validated-form.cjs.js.map 168.30 KiB
-dist/remix-validated-form.es.js   66.83 KiB / gzip: 15.64 KiB
-dist/remix-validated-form.es.js.map 165.89 KiB
-dist/remix-validated-form.umd.js   32.84 KiB / gzip: 11.42 KiB
-dist/remix-validated-form.umd.js.map 168.25 KiB
-
-[vite:dts] Start generate declaration files...
-[vite:dts] Declaration files built in 2581ms.
-
+dist/remix-validated-form.cjs.js   32.76 KiB / gzip: 11.39 KiB
+dist/remix-validated-form.cjs.js.map 168.68 KiB
+dist/remix-validated-form.es.js   67.07 KiB / gzip: 15.71 KiB
+dist/remix-validated-form.es.js.map 166.22 KiB
 No name was provided for external module 'react' in output.globals – guessing 'React'
 No name was provided for external module '@remix-run/react' in output.globals – guessing 'react'
+dist/remix-validated-form.umd.js   32.95 KiB / gzip: 11.46 KiB
+dist/remix-validated-form.umd.js.map 168.64 KiB
+
+[vite:dts] Start generate declaration files...
+[vite:dts] Declaration files built in 1834ms.
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1 @@
+$ tsc --noEmit

package/README.md

@@ -1,6 +1,6 @@
 # Remix Validated Form
 
-A form library built for [remix](https://remix.run) to make validation easy.
+A form library built for [Remix](https://remix.run) to make validation easy.
 
 - Client-side, field-by-field and form-level validation
 - Re-use validation on the server
@@ -107,7 +107,8 @@ export const MySubmitButton = () => {
 Now that we have our components, making a form is easy!
 
 ```tsx
-import { ActionFunction, LoaderFunction, redirect, useLoaderData } from "remix";
+import { DataFunctionArgs, json, redirect } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
 import * as yup from "yup";
 import { validationError, ValidatedForm, withYup } from "remix-validated-form";
 import { MyInput, MySubmitButton } from "~/components/Input";
@@ -121,7 +122,7 @@ const validator = withYup(
   })
 );
 
-export const action: ActionFunction = async ({ request }) => {
+export const action = async ({ request }: DataFunctionArgs) => {
   const fieldValues = await validator.validate(await request.formData());
   if (fieldValues.error) return validationError(fieldValues.error);
   const { firstName, lastName, email } = fieldValues.data;
@@ -131,18 +132,18 @@ export const action: ActionFunction = async ({ request }) => {
   return redirect("/");
 };
 
-export const loader: LoaderFunction = () => {
-  return {
+export const loader = async (args: DataFunctionArgs) => {
+  return json({
     defaultValues: {
       firstName: "Jane",
       lastName: "Doe",
       email: "jane.doe@example.com",
     },
-  };
+  });
 };
 
 export default function MyForm() {
-  const { defaultValues } = useLoaderData();
+  const { defaultValues } = useLoaderData<typeof loader>();
   return (
     <ValidatedForm
       validator={validator}
@@ -164,7 +165,7 @@ You can use nested objects and arrays by using a period (`.`) or brackets (`[]`)
 
 ```tsx
 export default function MyForm() {
-  const { defaultValues } = useLoaderData();
+  const { defaultValues } = useLoaderData<typeof loader>();
   return (
     <ValidatedForm
       validator={validator}
@@ -257,7 +258,7 @@ We recommend this approach since the validation will still work even if JS is di
 ## How do we trigger toast messages on success?
 
 Problem: how do we trigger a toast message on success if the action redirects away from the form route? The Remix solution is to flash a message in the session and pick this up in a loader function, probably in root.tsx
-See the [Remix](https://remix.run/docs/en/v1/api/remix#sessionflashkey-value) documentation for more information.
+See the [Remix](https://remix.run/docs/en/v1/utils/sessions#sessionflashkey-value) documentation for more information.
 
 ## Why is my cancel button triggering form submission?
 

package/browser/ValidatedForm.d.ts

@@ -1,7 +1,7 @@
-import { Form as RemixForm, useFetcher } from "@remix-run/react";
+import { FetcherWithComponents, Form as RemixForm } from "@remix-run/react";
 import React, { ComponentProps } from "react";
 import { Validator } from "./validation/types";
-export declare type FormProps<DataType> = {
+export type FormProps<DataType> = {
     /**
      * A `Validator` object that describes how to validate the form.
      */
@@ -16,7 +16,7 @@ export declare type FormProps<DataType> = {
      * The form will use the fetcher for loading states, action data, etc
      * instead of the default form action.
      */
-    fetcher?: ReturnType<typeof useFetcher>;
+    fetcher?: FetcherWithComponents<any>;
     /**
      * Accepts an object of default values for the form
      * that will automatically be propagated to the form fields via `useField`.

package/browser/hooks.d.ts

@@ -13,7 +13,7 @@ export declare const useIsSubmitting: (formId?: string) => boolean;
  * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
  */
 export declare const useIsValid: (formId?: string) => boolean;
-export declare type FieldProps = {
+export type FieldProps = {
     /**
      * The validation error message if there is one.
      */

package/browser/internal/formContext.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { useFetcher } from "@remix-run/react";
-export declare type InternalFormContextValue = {
+import { FetcherWithComponents } from "@remix-run/react";
+export type InternalFormContextValue = {
     formId: string | symbol;
     action?: string;
     subaction?: string;
     defaultValuesProp?: {
         [fieldName: string]: any;
     };
-    fetcher?: ReturnType<typeof useFetcher>;
+    fetcher?: FetcherWithComponents<unknown>;
 };
 export declare const InternalFormContext: import("react").Context<InternalFormContextValue | null>;

package/browser/internal/getInputProps.d.ts

@@ -1,10 +1,10 @@
-export declare type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
-export declare type ValidationBehaviorOptions = {
+export type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
+export type ValidationBehaviorOptions = {
     initial: ValidationBehavior;
     whenTouched: ValidationBehavior;
     whenSubmitted: ValidationBehavior;
 };
-export declare type CreateGetInputPropsOptions = {
+export type CreateGetInputPropsOptions = {
     clearError: () => void;
     validate: () => void;
     defaultValue?: any;
@@ -14,9 +14,9 @@ export declare type CreateGetInputPropsOptions = {
     validationBehavior?: Partial<ValidationBehaviorOptions>;
     name: string;
 };
-declare type HandledProps = "name" | "defaultValue" | "defaultChecked";
-declare type Callbacks = "onChange" | "onBlur";
-declare type MinimalInputProps = {
+type HandledProps = "name" | "defaultValue" | "defaultChecked";
+type Callbacks = "onChange" | "onBlur";
+type MinimalInputProps = {
     onChange?: (...args: any[]) => void;
     onBlur?: (...args: any[]) => void;
     defaultValue?: any;
@@ -24,6 +24,6 @@ declare type MinimalInputProps = {
     name?: string;
     type?: string;
 };
-export declare type GetInputProps = <T extends MinimalInputProps>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
+export type GetInputProps = <T extends MinimalInputProps>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
 export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
 export {};

package/browser/internal/hydratable.d.ts

@@ -3,7 +3,7 @@
  * around data that needs to come from the server initially,
  * but from the internal state after hydration.
  */
-export declare type Hydratable<T> = {
+export type Hydratable<T> = {
     hydrateTo: (data: T) => T;
     map: <U>(fn: (data: T) => U) => Hydratable<U>;
 };

package/browser/internal/state/createFormStore.d.ts

@@ -1,7 +1,7 @@
 import { WritableDraft } from "immer/dist/internal";
 import { FieldErrors, TouchedFields, ValidationResult, Validator } from "../../validation/types";
 import { InternalFormId } from "./types";
-export declare type SyncedFormProps = {
+export type SyncedFormProps = {
     formId?: string;
     action?: string;
     subaction?: string;
@@ -11,7 +11,7 @@ export declare type SyncedFormProps = {
     registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
     validator: Validator<unknown>;
 };
-export declare type FormStoreState = {
+export type FormStoreState = {
     forms: {
         [formId: InternalFormId]: FormState;
     };
@@ -19,7 +19,7 @@ export declare type FormStoreState = {
     registerForm: (formId: InternalFormId) => void;
     cleanupForm: (formId: InternalFormId) => void;
 };
-export declare type FormState = {
+export type FormState = {
     isHydrated: boolean;
     isSubmitting: boolean;
     hasBeenSubmitted: boolean;

package/browser/internal/state/fieldArray.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-export declare type FieldArrayValidationBehavior = "onChange" | "onSubmit";
-export declare type FieldArrayValidationBehaviorOptions = {
+export type FieldArrayValidationBehavior = "onChange" | "onSubmit";
+export type FieldArrayValidationBehaviorOptions = {
     initial: FieldArrayValidationBehavior;
     whenSubmitted: FieldArrayValidationBehavior;
 };
-export declare type FieldArrayHelpers<Item = any> = {
+export type FieldArrayHelpers<Item = any> = {
     push: (item: Item) => void;
     swap: (indexA: number, indexB: number) => void;
     move: (from: number, to: number) => void;
@@ -14,12 +14,12 @@ export declare type FieldArrayHelpers<Item = any> = {
     pop: () => void;
     replace: (index: number, value: Item) => void;
 };
-export declare type UseFieldArrayOptions = {
+export type UseFieldArrayOptions = {
     formId?: string;
     validationBehavior?: Partial<FieldArrayValidationBehaviorOptions>;
 };
 export declare function useFieldArray<Item = any>(name: string, { formId, validationBehavior }?: UseFieldArrayOptions): [itemDefaults: Item[], helpers: FieldArrayHelpers<any>, error: string | undefined];
-export declare type FieldArrayProps = {
+export type FieldArrayProps = {
     name: string;
     children: (itemDefaults: any[], helpers: FieldArrayHelpers, error: string | undefined) => React.ReactNode;
     formId?: string;

package/browser/internal/state/types.d.ts

@@ -1 +1 @@
-export declare type InternalFormId = string | symbol;
+export type InternalFormId = string | symbol;

package/browser/server.d.ts

@@ -15,7 +15,7 @@ import { ValidatorError, ValidationErrorResponseData } from "./validation/types"
  * ```
  */
 export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): import("@remix-run/server-runtime").TypedResponse<ValidationErrorResponseData>;
-export declare type FormDefaults = {
+export type FormDefaults = {
     [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
 };
 export declare const setFormDefaults: <DataType = any>(formId: string, defaultValues: Partial<DataType>) => FormDefaults;

package/browser/unreleased/formStateHooks.d.ts

@@ -1,5 +1,5 @@
 import { FieldErrors, TouchedFields, ValidationResult } from "../validation/types";
-export declare type FormState = {
+export type FormState = {
     fieldErrors: FieldErrors;
     isSubmitting: boolean;
     hasBeenSubmitted: boolean;
@@ -17,7 +17,7 @@ export declare type FormState = {
  * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
  */
 export declare const useFormState: (formId?: string) => FormState;
-export declare type FormHelpers = {
+export type FormHelpers = {
     /**
      * Clear the error of the specified field.
      */

package/browser/userFacingFormContext.d.ts

@@ -1,5 +1,5 @@
 import { FieldErrors, TouchedFields, ValidationResult } from "./validation/types";
-export declare type FormContextValue = {
+export type FormContextValue = {
     /**
      * All the errors in all the fields in the form.
      */

package/browser/validation/types.d.ts

@@ -1,58 +1,58 @@
-export declare type FieldErrors = Record<string, string>;
-export declare type TouchedFields = Record<string, boolean>;
-export declare type GenericObject = {
+export type FieldErrors = Record<string, string>;
+export type TouchedFields = Record<string, boolean>;
+export type GenericObject = {
     [key: string]: any;
 };
-export declare type ValidatorError = {
+export type ValidatorError = {
     subaction?: string;
     formId?: string;
     fieldErrors: FieldErrors;
 };
-export declare type ValidationErrorResponseData = {
+export type ValidationErrorResponseData = {
     subaction?: string;
     formId?: string;
     fieldErrors: FieldErrors;
     repopulateFields?: unknown;
 };
-export declare type BaseResult = {
+export type BaseResult = {
     submittedData: GenericObject;
     formId?: string;
 };
-export declare type ErrorResult = BaseResult & {
+export type ErrorResult = BaseResult & {
     error: ValidatorError;
     data: undefined;
 };
-export declare type SuccessResult<DataType> = BaseResult & {
+export type SuccessResult<DataType> = BaseResult & {
     data: DataType;
     error: undefined;
 };
 /**
  * The result when validating a form.
  */
-export declare type ValidationResult<DataType> = SuccessResult<DataType> | ErrorResult;
+export type ValidationResult<DataType> = SuccessResult<DataType> | ErrorResult;
 /**
  * The result when validating an individual field in a form.
  */
-export declare type ValidateFieldResult = {
+export type ValidateFieldResult = {
     error?: string;
 };
 /**
  * A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
  */
-export declare type Validator<DataType> = {
+export type Validator<DataType> = {
     validate: (unvalidatedData: GenericObject) => Promise<ValidationResult<DataType>>;
     validateField: (unvalidatedData: GenericObject, field: string) => Promise<ValidateFieldResult>;
 };
-export declare type Valid<DataType> = {
+export type Valid<DataType> = {
     data: DataType;
     error: undefined;
 };
-export declare type Invalid = {
+export type Invalid = {
     error: FieldErrors;
     data: undefined;
 };
-export declare type CreateValidatorArg<DataType> = {
+export type CreateValidatorArg<DataType> = {
     validate: (unvalidatedData: GenericObject) => Promise<Valid<DataType> | Invalid>;
     validateField: (unvalidatedData: GenericObject, field: string) => Promise<ValidateFieldResult>;
 };
-export declare type ValidatorData<T extends Validator<any>> = T extends Validator<infer U> ? U : never;
+export type ValidatorData<T extends Validator<any>> = T extends Validator<infer U> ? U : never;