Add disabled prop (#10)

Author: marcomuser

package-lock.json

@@ -40,7 +40,7 @@
     "playwright": "^1.49.1",
     "prettier": "^3.4.2",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.20.0",
+    "typescript-eslint": "^8.21.0",
     "vitest": "^3.0.2",
     "vitest-browser-react": "^0.0.4"
   }

package.json

@@ -32,6 +32,6 @@
     "react": ">=19.0.0"
   },
   "dependencies": {
-    "type-fest": "^4.32.0"
+    "type-fest": "^4.33.0"
   }
 }

packages/core/package.json

@@ -66,6 +66,11 @@ interface FormProviderProps<
    * ```
    */
   ref: RefObject<HTMLFormElement | null>;
+  /**
+   * Disables all associated form inputs when `true`, unless overridden by setting `disabled` in `getFieldProps`.
+   * This may be used with `isPending` from `useActionState` to disable inputs during a pending request.
+   */
+  disabled?: boolean;
   children:
     | ReactNode
     | ((props: FormContextValue<DefaultValues, Meta>) => ReactNode);
@@ -78,13 +83,14 @@ export function FormProvider<
   defaultValues,
   meta,
   ref,
+  disabled,
   children,
 }: FormProviderProps<DefaultValues, Meta>): JSX.Element {
   const props: FormContextValue<DefaultValues, Meta> = {
     defaultValues: serialize(defaultValues),
     meta,
     formRef: ref,
-    getFieldProps: (options) => getFieldProps(ref, options),
+    getFieldProps: (options) => getFieldProps(ref, { disabled, ...options }),
   };
 
   return (

packages/core/src/FormProvider.tsx

@@ -44,11 +44,13 @@ const validityMap: Readonly<
 export interface FieldOptions<FormValues> extends ConstraintOptions {
   name: PathsFromObject<FormValues>;
   onChange?: (event: ChangeEvent<any>) => void;
+  disabled?: boolean | undefined;
   ref?: RefObject<unknown>;
 }
 
 export interface FieldProps extends ConstraintProps {
   name: string;
+  disabled?: boolean | undefined;
   onChange: (event: ChangeEvent<any>) => void;
   ref: RefCallback<unknown>;
 }
@@ -57,10 +59,11 @@ export function getFieldProps<FormValues>(
   formRef: RefObject<HTMLFormElement | null>,
   options: FieldOptions<FormValues>,
 ): FieldProps {
-  const { name, onChange, ref, ...constraints } = options;
+  const { name, onChange, ref, disabled, ...constraints } = options;
 
   return {
     name,
+    disabled,
     ...getConstraintProps(constraints),
     ref: getRefCallback(constraints, ref),
     onChange: getChangeHandler(constraints, onChange),

packages/core/src/getFieldProps.ts

@@ -1,7 +1,7 @@
 import { useActionState, useRef } from "react";
-import { parse } from "../../../../src/parse.js";
-import { FormProvider } from "../../../../src/FormProvider.js";
-import { useFormContext } from "../../../../src/useFormContext.js";
+import { parse } from "../../../src/parse.js";
+import { FormProvider } from "../../../src/FormProvider.js";
+import { useFormContext } from "../../../src/useFormContext.js";
 
 interface FormValues {
   name: string;
@@ -41,7 +41,11 @@ async function submit(
   };
 }
 
-export function FormWithNativeReporting() {
+export function FormWithNativeReporting({
+  disabled = false,
+}: {
+  disabled?: boolean;
+}) {
   const formRef = useRef<HTMLFormElement>(null);
   const [actionState, formAction, isPending] = useActionState(submit, {});
 
@@ -50,6 +54,7 @@ export function FormWithNativeReporting() {
       ref={formRef}
       defaultValues={actionState.defaultValues}
       meta={actionState.meta}
+      disabled={disabled}
     >
       {({ getFieldProps, defaultValues }) => (
         <form

packages/core/test/browser/integration/fixtures/FormWithNativeReporting.tsx renamed to packages/core/test/browser/fixtures/FormWithNativeReporting.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { render } from "vitest-browser-react";
-import { FormWithNativeReporting } from "./fixtures/FormWithNativeReporting.js";
 import { userEvent } from "@vitest/browser/context";
+import { FormWithNativeReporting } from "../fixtures/FormWithNativeReporting.js";
 
 describe("UI integration tests with native validity reporting", () => {
   it("displays success message after successful submit", async () => {
@@ -116,4 +116,20 @@ describe("UI integration tests with native validity reporting", () => {
     await expect.element(comment).toHaveValue("This is a long enough comment");
     await expect.element(agreement).toBeChecked();
   });
+
+  it("disables all associated fields when disabled prop in FormProvider is true", async () => {
+    const screen = render(<FormWithNativeReporting disabled />);
+
+    const name = screen.getByLabelText("name");
+    const animal = screen.getByLabelText("animal");
+    const color = screen.getByLabelText("color");
+    const comment = screen.getByLabelText("comment");
+    const agreement = screen.getByLabelText("agreement");
+
+    await expect.element(name).toBeDisabled();
+    await expect.element(animal).toBeDisabled();
+    await expect.element(color).toBeDisabled();
+    await expect.element(comment).toBeDisabled();
+    await expect.element(agreement).toBeDisabled();
+  });
 });