@fogpipe/forma-react 0.16.0 → 0.17.1

package/src/FieldRenderer.tsx

@@ -24,6 +24,7 @@ import type {
   ArrayFieldProps,
   ArrayHelpers,
   DisplayFieldProps,
+  MatrixFieldProps,
 } from "./types.js";
 
 /**
@@ -131,6 +132,9 @@ export function FieldRenderer({
 
   const errors = forma.errors.filter((e) => e.field === fieldPath);
   const touched = forma.touched[fieldPath] ?? false;
+  // FieldRenderer doesn't have access to validateOn (it's a FormRenderer prop),
+  // so it uses the default "blur" behavior: show errors after touch or submit.
+  const visibleErrors = touched || forma.isSubmitted ? errors : [];
   const required = forma.required[fieldPath] ?? false;
   const disabled = forma.enabled[fieldPath] === false;
 
@@ -147,6 +151,7 @@ export function FieldRenderer({
     required,
     disabled,
     errors,
+    visibleErrors,
     onChange: (value: unknown) => forma.setFieldValue(fieldPath, value),
     onBlur: () => forma.setFieldTouched(fieldPath),
     // Convenience properties
@@ -175,7 +180,8 @@ export function FieldRenderer({
     | SelectFieldProps
     | MultiSelectFieldProps
     | ArrayFieldProps
-    | DisplayFieldProps = baseProps;
+    | DisplayFieldProps
+    | MatrixFieldProps = baseProps;
 
   if (fieldType === "number") {
     const constraints = getNumberConstraints(schemaProperty);
@@ -313,17 +319,41 @@ export function FieldRenderer({
       minItems,
       maxItems,
     } as ArrayFieldProps;
+  } else if (fieldType === "matrix" && fieldDef.type === "matrix") {
+    // Matrix fields — compute visible rows from visibility engine
+    const matrixValue =
+      (baseProps.value as Record<
+        string,
+        string | number | string[] | number[]
+      > | null) ?? null;
+    const rows = fieldDef.rows.map((row) => ({
+      id: row.id,
+      label: row.label,
+      visible: forma.visibility[`${fieldPath}.${row.id}`] !== false,
+    }));
+    fieldProps = {
+      ...baseProps,
+      fieldType: "matrix",
+      value: matrixValue,
+      onChange: baseProps.onChange as (
+        value: Record<string, string | number | string[] | number[]>,
+      ) => void,
+      rows,
+      columns: fieldDef.columns,
+      multiSelect: fieldDef.multiSelect ?? false,
+    } as MatrixFieldProps;
   } else if (fieldType === "display" && fieldDef.type === "display") {
     // Display fields (read-only presentation content)
     const sourceValue = fieldDef.source
       ? (forma.data[fieldDef.source] ?? forma.computed[fieldDef.source])
       : undefined;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
-      onChange: _onChange,
-      value: _value,
+      onChange: _onChange, // omit from display props
+      value: _value, // omit from display props
       ...displayBaseProps
     } = baseProps;
+    void _onChange;
+    void _value;
     fieldProps = {
       ...displayBaseProps,
       fieldType: "display",

package/src/FormRenderer.tsx

@@ -34,6 +34,7 @@ import type {
   ArrayFieldProps,
   ArrayHelpers,
   DisplayFieldProps,
+  MatrixFieldProps,
 } from "./types.js";
 
 /**
@@ -85,12 +86,7 @@ export interface FormRendererHandle {
  */
 function DefaultLayout({ children, onSubmit, isSubmitting }: LayoutProps) {
   return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSubmit();
-      }}
-    >
+    <form onSubmit={onSubmit}>
       {children}
       <button type="submit" disabled={isSubmitting}>
         {isSubmitting ? "Submitting..." : "Submit"}
@@ -241,7 +237,7 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
       layout: Layout = DefaultLayout,
       fieldWrapper: FieldWrapper = DefaultFieldWrapper,
       pageWrapper: PageWrapper = DefaultPageWrapper,
-      validateOn,
+      validateOn = "blur",
     } = props;
 
     const forma = useForma({
@@ -298,6 +294,7 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
       optionsVisibility: formaOptionsVisibility,
       touched: formaTouched,
       errors: formaErrors,
+      isSubmitted: formaIsSubmitted,
       setFieldValue,
       setFieldTouched,
       getArrayHelpers,
@@ -341,6 +338,11 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
 
         const errors = formaErrors.filter((e) => e.field === fieldPath);
         const touched = formaTouched[fieldPath] ?? false;
+        const showErrors =
+          validateOn === "change" ||
+          (validateOn === "blur" && touched) ||
+          formaIsSubmitted;
+        const visibleErrors = showErrors ? errors : [];
         const required = formaRequired[fieldPath] ?? false;
         const disabled = formaEnabled[fieldPath] === false;
 
@@ -366,6 +368,7 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
           required,
           disabled,
           errors,
+          visibleErrors,
           onChange: (value: unknown) => setFieldValue(fieldPath, value),
           onBlur: () => setFieldTouched(fieldPath),
           // Convenience properties
@@ -392,7 +395,8 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
           | NumberFieldProps
           | SelectFieldProps
           | ArrayFieldProps
-          | DisplayFieldProps = baseProps;
+          | DisplayFieldProps
+          | MatrixFieldProps = baseProps;
 
         if (fieldType === "number" || fieldType === "integer") {
           const constraints = getNumberConstraints(schemaProperty);
@@ -483,6 +487,28 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
             minItems,
             maxItems,
           } as ArrayFieldProps;
+        } else if (fieldType === "matrix" && fieldDef.type === "matrix") {
+          const matrixValue =
+            (baseProps.value as Record<
+              string,
+              string | number | string[] | number[]
+            > | null) ?? null;
+          const rows = fieldDef.rows.map((row) => ({
+            id: row.id,
+            label: row.label,
+            visible: formaVisibility[`${fieldPath}.${row.id}`] !== false,
+          }));
+          fieldProps = {
+            ...baseProps,
+            fieldType: "matrix",
+            value: matrixValue,
+            onChange: baseProps.onChange as (
+              value: Record<string, string | number | string[] | number[]>,
+            ) => void,
+            rows,
+            columns: fieldDef.columns,
+            multiSelect: fieldDef.multiSelect ?? false,
+          } as MatrixFieldProps;
         } else if (fieldType === "display" && fieldDef.type === "display") {
           // Display fields (read-only presentation content)
           // Resolve source value if the display field has a source property
@@ -553,6 +579,8 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
         formaOptionsVisibility,
         formaTouched,
         formaErrors,
+        formaIsSubmitted,
+        validateOn,
         setFieldValue,
         setFieldTouched,
         getArrayHelpers,
@@ -586,10 +614,20 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
       return <>{renderedFields}</>;
     }, [spec.pages, forma.wizard, PageWrapper, renderedFields]);
 
+    // Wrap submitForm to always call preventDefault when invoked from a form event.
+    // This prevents page refreshes when consumers put onSubmit on a <form> element.
+    const handleSubmit = useCallback(
+      (e?: React.FormEvent) => {
+        e?.preventDefault();
+        forma.submitForm();
+      },
+      [forma.submitForm],
+    );
+
     return (
       <FormaContext.Provider value={forma}>
         <Layout
-          onSubmit={forma.submitForm}
+          onSubmit={handleSubmit}
           isSubmitting={forma.isSubmitting}
           isValid={forma.isValid}
         >

package/src/__tests__/FieldRenderer.test.tsx

@@ -22,6 +22,7 @@ import type {
   ArrayComponentProps,
   ComponentMap,
   LayoutProps,
+  MatrixComponentProps,
   NumberComponentProps,
   IntegerComponentProps,
 } from "../types.js";
@@ -714,4 +715,189 @@ describe("FieldRenderer", () => {
       });
     });
   });
+
+  // ============================================================================
+  // Matrix Field Rendering
+  // ============================================================================
+
+  describe("matrix field rendering", () => {
+    it("should pass matrix props to matrix component", () => {
+      let capturedProps: MatrixComponentProps["field"] | null = null;
+
+      const spec: Forma = {
+        version: "1.0",
+        meta: { id: "test", title: "Test" },
+        schema: {
+          type: "object",
+          properties: {
+            rating: {
+              type: "object",
+              properties: {
+                speed: { type: "integer", enum: [1, 2, 3] },
+                quality: { type: "integer", enum: [1, 2, 3] },
+              },
+            },
+          },
+        },
+        fields: {
+          rating: {
+            type: "matrix",
+            label: "Rating",
+            rows: [
+              { id: "speed", label: "Speed" },
+              { id: "quality", label: "Quality" },
+            ],
+            columns: [
+              { value: 1, label: "Poor" },
+              { value: 2, label: "OK" },
+              { value: 3, label: "Great" },
+            ],
+            multiSelect: false,
+          },
+        },
+        fieldOrder: ["rating"],
+      };
+
+      const components: ComponentMap = {
+        ...createTestComponentMap(),
+        matrix: ({ field: props }: MatrixComponentProps) => {
+          capturedProps = props;
+          return <div data-testid="matrix-field">matrix</div>;
+        },
+      };
+
+      render(
+        <FormRenderer
+          spec={spec}
+          initialData={{ rating: { speed: 2, quality: 3 } }}
+          components={components}
+        />,
+      );
+
+      expect(capturedProps).not.toBeNull();
+      expect(capturedProps!.fieldType).toBe("matrix");
+      expect(capturedProps!.value).toEqual({ speed: 2, quality: 3 });
+      expect(capturedProps!.rows).toEqual([
+        { id: "speed", label: "Speed", visible: true },
+        { id: "quality", label: "Quality", visible: true },
+      ]);
+      expect(capturedProps!.columns).toEqual([
+        { value: 1, label: "Poor" },
+        { value: 2, label: "OK" },
+        { value: 3, label: "Great" },
+      ]);
+      expect(capturedProps!.multiSelect).toBe(false);
+    });
+
+    it("should compute row visibility from visibleWhen expressions", () => {
+      let capturedProps: MatrixComponentProps["field"] | null = null;
+
+      const spec: Forma = {
+        version: "1.0",
+        meta: { id: "test", title: "Test" },
+        schema: {
+          type: "object",
+          properties: {
+            show_quality: { type: "boolean" },
+            rating: {
+              type: "object",
+              properties: {
+                speed: { type: "integer", enum: [1, 2, 3] },
+                quality: { type: "integer", enum: [1, 2, 3] },
+              },
+            },
+          },
+        },
+        fields: {
+          show_quality: { type: "boolean", label: "Show Quality" },
+          rating: {
+            type: "matrix",
+            label: "Rating",
+            rows: [
+              { id: "speed", label: "Speed" },
+              {
+                id: "quality",
+                label: "Quality",
+                visibleWhen: "show_quality = true",
+              },
+            ],
+            columns: [
+              { value: 1, label: "Poor" },
+              { value: 2, label: "OK" },
+              { value: 3, label: "Great" },
+            ],
+          },
+        },
+        fieldOrder: ["show_quality", "rating"],
+      };
+
+      const components: ComponentMap = {
+        ...createTestComponentMap(),
+        matrix: ({ field: props }: MatrixComponentProps) => {
+          capturedProps = props;
+          return <div data-testid="matrix-field">matrix</div>;
+        },
+      };
+
+      render(
+        <FormRenderer
+          spec={spec}
+          initialData={{ show_quality: false }}
+          components={components}
+        />,
+      );
+
+      expect(capturedProps).not.toBeNull();
+      expect(capturedProps!.rows).toEqual([
+        { id: "speed", label: "Speed", visible: true },
+        { id: "quality", label: "Quality", visible: false },
+      ]);
+    });
+
+    it("should default multiSelect to false when not specified", () => {
+      let capturedProps: MatrixComponentProps["field"] | null = null;
+
+      const spec: Forma = {
+        version: "1.0",
+        meta: { id: "test", title: "Test" },
+        schema: {
+          type: "object",
+          properties: {
+            rating: {
+              type: "object",
+              properties: {
+                a: { type: "integer", enum: [1, 2] },
+              },
+            },
+          },
+        },
+        fields: {
+          rating: {
+            type: "matrix",
+            label: "Rating",
+            rows: [{ id: "a", label: "A" }],
+            columns: [
+              { value: 1, label: "1" },
+              { value: 2, label: "2" },
+            ],
+            // multiSelect not set
+          },
+        },
+        fieldOrder: ["rating"],
+      };
+
+      const components: ComponentMap = {
+        ...createTestComponentMap(),
+        matrix: ({ field: props }: MatrixComponentProps) => {
+          capturedProps = props;
+          return <div data-testid="matrix-field">matrix</div>;
+        },
+      };
+
+      render(<FormRenderer spec={spec} components={components} />);
+
+      expect(capturedProps).not.toBeNull();
+      expect(capturedProps!.multiSelect).toBe(false);
+    });
+  });
 });

package/src/__tests__/FormRenderer.test.tsx

@@ -1386,4 +1386,150 @@ describe("FormRenderer", () => {
       });
     });
   });
+
+  // ============================================================================
+  // onSubmit preventDefault
+  // ============================================================================
+
+  describe("onSubmit preventDefault", () => {
+    it("should call preventDefault when onSubmit is invoked with a form event", async () => {
+      const submitHandler = vi.fn();
+
+      // Custom layout that puts onSubmit directly on a <form> element
+      function CustomLayout({ children, onSubmit }: LayoutProps) {
+        return (
+          <form onSubmit={onSubmit} data-testid="form">
+            {children}
+            <button type="submit">Submit</button>
+          </form>
+        );
+      }
+
+      const spec = createTestSpec({
+        fields: {
+          name: { type: "text", label: "Name" },
+        },
+      });
+
+      render(
+        <FormRenderer
+          spec={spec}
+          components={createTestComponentMap()}
+          layout={CustomLayout}
+          onSubmit={submitHandler}
+          initialData={{ name: "John" }}
+        />,
+      );
+
+      const form = screen.getByTestId("form");
+
+      // Create a real submit event and spy on preventDefault
+      const preventDefaultSpy = vi.fn();
+      const submitEvent = new Event("submit", {
+        bubbles: true,
+        cancelable: true,
+      });
+      Object.defineProperty(submitEvent, "preventDefault", {
+        value: preventDefaultSpy,
+      });
+
+      await act(async () => {
+        form.dispatchEvent(submitEvent);
+      });
+
+      // preventDefault should have been called by the wrapper
+      expect(preventDefaultSpy).toHaveBeenCalled();
+    });
+
+    it("should work when onSubmit is called without an event (programmatic)", async () => {
+      const submitHandler = vi.fn();
+
+      // Custom layout that calls onSubmit programmatically (no event)
+      function CustomLayout({ children, onSubmit }: LayoutProps) {
+        return (
+          <div>
+            {children}
+            <button
+              type="button"
+              onClick={() => onSubmit()}
+              data-testid="submit-btn"
+            >
+              Submit
+            </button>
+          </div>
+        );
+      }
+
+      const spec = createTestSpec({
+        fields: {
+          name: { type: "text", label: "Name" },
+        },
+      });
+
+      render(
+        <FormRenderer
+          spec={spec}
+          components={createTestComponentMap()}
+          layout={CustomLayout}
+          onSubmit={submitHandler}
+          initialData={{ name: "John" }}
+        />,
+      );
+
+      await act(async () => {
+        screen.getByTestId("submit-btn").click();
+      });
+
+      await waitFor(() => {
+        expect(submitHandler).toHaveBeenCalledWith({ name: "John" });
+      });
+    });
+
+    it("LayoutProps.onSubmit accepts an optional event parameter", () => {
+      // Type-level test: verify the signature compiles
+      const _layout: React.FC<LayoutProps> = ({ onSubmit }) => {
+        return (
+          <form onSubmit={onSubmit}>
+            <button onClick={() => onSubmit()}>Submit</button>
+          </form>
+        );
+      };
+      expect(_layout).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // visibleErrors
+  // ============================================================================
+
+  describe("visibleErrors", () => {
+    it("FormRenderer passes visibleErrors to components", () => {
+      const spec = createTestSpec({
+        fields: {
+          name: { type: "text", label: "Name", required: true },
+        },
+      });
+
+      let capturedVisibleErrors: unknown[] | undefined;
+
+      const components = {
+        ...createTestComponentMap(),
+        text: ({ field: props }: { field: { visibleErrors?: unknown[] } }) => {
+          capturedVisibleErrors = props.visibleErrors;
+          return <div data-testid="text-field">text</div>;
+        },
+      };
+
+      render(
+        <FormRenderer
+          spec={spec}
+          components={components as ReturnType<typeof createTestComponentMap>}
+          validateOn="blur"
+        />,
+      );
+
+      // visibleErrors should be an empty array (field not touched, validateOn=blur)
+      expect(capturedVisibleErrors).toEqual([]);
+    });
+  });
 });