remix-validated-form 4.6.4 → 4.6.5

package/dist/types/ValidatedForm.d.ts

@@ -1,4 +1,4 @@
-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> = {
@@ -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/dist/types/hooks.d.ts

@@ -6,13 +6,13 @@ import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputPro
  *
  * @param formId
  */
-export declare const useIsSubmitting: (formId?: string | undefined) => boolean;
+export declare const useIsSubmitting: (formId?: string) => boolean;
 /**
  * Returns whether or not the current form is valid.
  *
  * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
  */
-export declare const useIsValid: (formId?: string | undefined) => boolean;
+export declare const useIsValid: (formId?: string) => boolean;
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -52,16 +52,16 @@ export declare const useField: (name: string, options?: {
      * when the input needs to receive focus due to a validation error.
      * This is useful for custom components that use a hidden input.
      */
-    handleReceiveFocus?: (() => void) | undefined;
+    handleReceiveFocus?: () => void;
     /**
      * Allows you to specify when a field gets validated (when using getInputProps)
      */
-    validationBehavior?: Partial<ValidationBehaviorOptions> | undefined;
+    validationBehavior?: Partial<ValidationBehaviorOptions>;
     /**
      * The formId of the form you want to use.
      * This is not necesary if the input is used inside a form.
      */
-    formId?: string | undefined;
-} | undefined) => FieldProps;
-export declare const useControlField: <T>(name: string, formId?: string | undefined) => readonly [T, (value: T) => void];
-export declare const useUpdateControlledField: (formId?: string | undefined) => (field: string, value: unknown) => void;
+    formId?: string;
+}) => FieldProps;
+export declare const useControlField: <T>(name: string, formId?: string) => readonly [T, (value: T) => void];
+export declare const useUpdateControlledField: (formId?: string) => (field: string, value: unknown) => void;

package/dist/types/internal/formContext.d.ts

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

package/dist/types/internal/hooks.d.ts

@@ -2,7 +2,7 @@ import { FieldErrors, ValidationErrorResponseData } from "..";
 import { InternalFormContextValue } from "./formContext";
 import { Hydratable } from "./hydratable";
 import { InternalFormId } from "./state/types";
-export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
+export declare const useInternalFormContext: (formId?: string | symbol, hookName?: string) => InternalFormContextValue;
 export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
 export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
 export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;

package/dist/types/internal/logic/requestSubmit.d.ts

@@ -2,4 +2,4 @@
  * Ponyfill of the HTMLFormElement.requestSubmit() method.
  * Based on polyfill from: https://github.com/javan/form-request-submit-polyfill/blob/main/form-request-submit-polyfill.js
  */
-export declare const requestSubmit: (element: HTMLFormElement, submitter?: HTMLElement | undefined) => void;
+export declare const requestSubmit: (element: HTMLFormElement, submitter?: HTMLElement) => void;

package/dist/types/unreleased/formStateHooks.d.ts

@@ -16,7 +16,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 | undefined) => FormState;
+export declare const useFormState: (formId?: string) => FormState;
 export declare type FormHelpers = {
     /**
      * Clear the error of the specified field.
@@ -61,4 +61,4 @@ export declare type FormHelpers = {
  *
  * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
  */
-export declare const useFormHelpers: (formId?: string | undefined) => FormHelpers;
+export declare const useFormHelpers: (formId?: string) => FormHelpers;

package/dist/types/userFacingFormContext.d.ts

@@ -82,4 +82,4 @@ export declare type FormContextValue = {
 /**
  * Provides access to some of the internal state of the form.
  */
-export declare const useFormContext: (formId?: string | undefined) => FormContextValue;
+export declare const useFormContext: (formId?: string) => FormContextValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.6.4",
+  "version": "4.6.5",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./dist/remix-validated-form.cjs.js",
   "main": "./dist/remix-validated-form.umd.js",
@@ -15,7 +15,8 @@
     "dev": "tsc --module ESNext --outDir ./browser --watch",
     "build": "vite build",
     "prepublishOnly": "cp ../../README.md ./README.md && npm run build",
-    "postpublish": "rm ./README.md"
+    "postpublish": "rm ./README.md",
+    "typecheck": "tsc --noEmit"
   },
   "author": {
     "name": "Aaron Pettengill",
@@ -37,7 +38,7 @@
     "react": "^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
-    "@remix-run/react": "^1.6.5",
+    "@remix-run/react": "^1.7.6",
     "@testing-library/react": "^13.3.0",
     "@types/react": "^18.0.9",
     "fetch-blob": "^3.1.3",

package/src/ValidatedForm.tsx

@@ -1,4 +1,5 @@
 import {
+  FetcherWithComponents,
   Form as RemixForm,
   FormMethod,
   useFetcher,
@@ -59,7 +60,7 @@ export 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/src/internal/formContext.ts

@@ -1,4 +1,4 @@
-import { useFetcher } from "@remix-run/react";
+import { FetcherWithComponents } from "@remix-run/react";
 import { createContext } from "react";
 
 export type InternalFormContextValue = {
@@ -6,7 +6,7 @@ export type InternalFormContextValue = {
   action?: string;
   subaction?: string;
   defaultValuesProp?: { [fieldName: string]: any };
-  fetcher?: ReturnType<typeof useFetcher>;
+  fetcher?: FetcherWithComponents<unknown>;
 };
 
 export const InternalFormContext =