remix-validated-form 4.5.0 → 4.5.3

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

@@ -31,3 +31,4 @@ export declare const useResetFormElement: (formId: InternalFormId) => () => void
 export declare const useSubmitForm: (formId: InternalFormId) => () => void;
 export declare const useFormActionProp: (formId: InternalFormId) => string | undefined;
 export declare const useFormSubactionProp: (formId: InternalFormId) => string | undefined;
+export declare const useFormValues: (formId: InternalFormId) => () => FormData;

package/dist/types/internal/state/createFormStore.d.ts

@@ -42,6 +42,7 @@ export declare type FormState = {
     validate: () => Promise<ValidationResult<unknown>>;
     resetFormElement: () => void;
     submit: () => void;
+    getValues: () => FormData;
 };
 export declare const useRootFormStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormStoreState>, "setState"> & {
     setState(nextStateOrUpdater: FormStoreState | Partial<FormStoreState> | ((state: WritableDraft<FormStoreState>) => void), shouldReplace?: boolean | undefined): void;

package/dist/types/server.d.ts

@@ -1,5 +1,5 @@
 import { FORM_DEFAULTS_FIELD } from "./internal/constants";
-import { ValidatorError } from "./validation/types";
+import { ValidatorError, ValidationErrorResponseData } from "./validation/types";
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
  * When you return this from your action, `ValidatedForm` on the frontend will automatically
@@ -14,7 +14,7 @@ import { ValidatorError } from "./validation/types";
  * if (result.error) return validationError(result.error, result.submittedData);
  * ```
  */
-export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): Response;
+export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): import("@remix-run/server-runtime").TypedResponse<ValidationErrorResponseData>;
 export declare type FormDefaults = {
     [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
 };

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

@@ -51,6 +51,10 @@ export declare type FormHelpers = {
      * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
      */
     submit: () => void;
+    /**
+     * Returns the current form values as FormData
+     */
+    getValues: () => FormData;
 };
 /**
  * Returns helpers that can be used to update the form state.

package/dist/types/userFacingFormContext.d.ts

@@ -74,6 +74,10 @@ export declare type FormContextValue = {
      * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
      */
     submit: () => void;
+    /**
+     * Returns the current form values as FormData
+     */
+    getValues: () => FormData;
 };
 /**
  * Provides access to some of the internal state of the form.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.5.0",
+  "version": "4.5.3",
   "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",
@@ -34,12 +34,10 @@
   ],
   "peerDependencies": {
     "@remix-run/react": "1.x",
-    "@remix-run/server-runtime": "1.x",
     "react": "^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
-    "@remix-run/react": "^1.2.1",
-    "@remix-run/server-runtime": "^1.2.1",
+    "@remix-run/react": "^1.6.5",
     "@types/lodash": "^4.14.178",
     "@types/react": "^18.0.9",
     "fetch-blob": "^3.1.3",

package/src/ValidatedForm.tsx

@@ -98,7 +98,8 @@ const focusFirstInvalidInput = (
   const namesInOrder = [...formElement.elements]
     .map((el) => {
       const input = el instanceof RadioNodeList ? el[0] : el;
-      if (input instanceof HTMLInputElement) return input.name;
+      if (input instanceof HTMLElement && "name" in input)
+        return (input as any).name;
       return null;
     })
     .filter(nonNull)
@@ -129,8 +130,8 @@ const focusFirstInvalidInput = (
       }
     }
 
-    if (elem instanceof HTMLInputElement) {
-      if (elem.type === "hidden") {
+    if (elem instanceof HTMLElement) {
+      if (elem instanceof HTMLInputElement && elem.type === "hidden") {
         continue;
       }
 
@@ -329,7 +330,7 @@ export function ValidatedForm<DataType>({
       // If we use `event.currentTarget` here, it will break because `currentTarget`
       // will have changed since the start of the submission.
       if (fetcher) fetcher.submit(submitter || e.currentTarget);
-      else submit(submitter || target, { method, replace });
+      else submit(submitter || target, { replace });
     }
   };
 

package/src/internal/hooks.ts

@@ -204,3 +204,6 @@ export const useFormActionProp = (formId: InternalFormId) =>
 
 export const useFormSubactionProp = (formId: InternalFormId) =>
   useFormStore(formId, (state) => state.formProps?.subaction);
+
+export const useFormValues = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.getValues);

package/src/internal/state/createFormStore.ts

@@ -51,6 +51,7 @@ export type FormState = {
   validate: () => Promise<ValidationResult<unknown>>;
   resetFormElement: () => void;
   submit: () => void;
+  getValues: () => FormData;
 };
 
 const noOp = () => {};
@@ -84,6 +85,7 @@ const defaultFormState: FormState = {
   },
 
   resetFormElement: noOp,
+  getValues: () => new FormData(),
 };
 
 const createFormState = (
@@ -125,7 +127,6 @@ const createFormState = (
     set((state) => {
       delete state.fieldErrors[fieldName];
     }),
-
   reset: () =>
     set((state) => {
       state.fieldErrors = {};
@@ -208,6 +209,16 @@ const createFormState = (
     formElement.submit();
   },
 
+  getValues: () => {
+    const formElement = get().formElement;
+    invariant(
+      formElement,
+      "Cannot find reference to form. This is probably a bug in remix-validated-form."
+    );
+
+    return new FormData(formElement);
+  },
+
   resetFormElement: () => get().formElement?.reset(),
 });
 

package/src/server.ts

@@ -1,4 +1,4 @@
-import { json } from "@remix-run/server-runtime";
+import { json } from "remix";
 import {
   formDefaultValuesKey,
   FORM_DEFAULTS_FIELD,
@@ -26,7 +26,7 @@ export function validationError(
   error: ValidatorError,
   repopulateFields?: unknown,
   init?: ResponseInit
-): Response {
+) {
   return json<ValidationErrorResponseData>(
     {
       fieldErrors: error.fieldErrors,

package/src/unreleased/formStateHooks.ts

@@ -19,6 +19,7 @@ import {
   useFormActionProp,
   useFormSubactionProp,
   useSubmitForm,
+  useFormValues,
 } from "../internal/hooks";
 import {
   FieldErrors,
@@ -118,6 +119,10 @@ export type FormHelpers = {
    * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
    */
   submit: () => void;
+  /**
+   * Returns the current form values as FormData
+   */
+  getValues: () => FormData;
 };
 
 /**
@@ -134,6 +139,7 @@ export const useFormHelpers = (formId?: string): FormHelpers => {
   const setFieldErrors = useSetFieldErrors(formContext.formId);
   const reset = useResetFormElement(formContext.formId);
   const submit = useSubmitForm(formContext.formId);
+  const getValues = useFormValues(formContext.formId);
   return useMemo(
     () => ({
       setTouched,
@@ -143,6 +149,7 @@ export const useFormHelpers = (formId?: string): FormHelpers => {
       clearAllErrors: () => setFieldErrors({}),
       reset,
       submit,
+      getValues,
     }),
     [
       clearError,
@@ -152,6 +159,7 @@ export const useFormHelpers = (formId?: string): FormHelpers => {
       submit,
       validate,
       validateField,
+      getValues,
     ]
   );
 };

package/src/userFacingFormContext.ts

@@ -83,6 +83,10 @@ export type FormContextValue = {
    * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
    */
   submit: () => void;
+  /**
+   * Returns the current form values as FormData
+   */
+  getValues: () => FormData;
 };
 
 /**
@@ -100,6 +104,7 @@ export const useFormContext = (formId?: string): FormContextValue => {
     validate,
     reset,
     submit,
+    getValues,
   } = useFormHelpers(formId);
 
   const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
@@ -124,6 +129,7 @@ export const useFormContext = (formId?: string): FormContextValue => {
       validate,
       reset,
       submit,
+      getValues,
     }),
     [
       clearAllErrors,
@@ -135,6 +141,7 @@ export const useFormContext = (formId?: string): FormContextValue => {
       submit,
       validate,
       validateField,
+      getValues,
     ]
   );
 };

package/src/validation/validation.test.ts

@@ -56,21 +56,21 @@ const validationTestCases: ValidationTestCase[] = [
     name: "zod",
     validator: withZod(
       z.object({
-        firstName: z.string().nonempty(),
-        lastName: z.string().nonempty(),
+        firstName: z.string().min(1),
+        lastName: z.string().min(1),
         age: z.optional(z.number()),
         address: z.preprocess(
           (value) => (value == null ? {} : value),
           z.object({
-            streetAddress: z.string().nonempty(),
-            city: z.string().nonempty(),
-            country: z.string().nonempty(),
+            streetAddress: z.string().min(1),
+            city: z.string().min(1),
+            country: z.string().min(1),
           })
         ),
         pets: z
           .object({
-            animal: z.string().nonempty(),
-            name: z.string().nonempty(),
+            animal: z.string().min(1),
+            name: z.string().min(1),
           })
           .array()
           .optional(),

package/vite.config.ts

@@ -2,6 +2,6 @@ import { makeConfig } from "vite-config";
 
 export default makeConfig({
   lib: "remix-validated-form",
-  external: ["react", "@remix-run/react", "@remix-run/server-runtime"],
+  external: ["react", "@remix-run/react"],
   dir: __dirname,
 });