@fogpipe/forma-react 0.10.4 → 0.11.2

package/src/FieldRenderer.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from "react";
-import type { FieldDefinition, JSONSchemaProperty } from "@fogpipe/forma-core";
+import type { FieldDefinition, JSONSchemaProperty, SelectOption } from "@fogpipe/forma-core";
 import { useFormaContext } from "./context.js";
 import type {
   ComponentMap,
@@ -153,20 +153,24 @@ export function FieldRenderer({ fieldPath, components, className }: FieldRendere
       max: constraints.max,
     } as IntegerFieldProps;
   } else if (fieldType === "select") {
+    // Use pre-computed visible options from memoized map
+    const visibleOptions = (forma.optionsVisibility[fieldPath] ?? []) as SelectOption[];
     fieldProps = {
       ...baseProps,
       fieldType: "select",
       value: baseProps.value as string | null,
       onChange: baseProps.onChange as (value: string | null) => void,
-      options: fieldDef.options ?? [],
+      options: visibleOptions,
     } as SelectFieldProps;
   } else if (fieldType === "multiselect") {
+    // Use pre-computed visible options from memoized map
+    const visibleOptions = (forma.optionsVisibility[fieldPath] ?? []) as SelectOption[];
     fieldProps = {
       ...baseProps,
       fieldType: "multiselect",
       value: (baseProps.value as string[] | undefined) ?? [],
       onChange: baseProps.onChange as (value: string[]) => void,
-      options: fieldDef.options ?? [],
+      options: visibleOptions,
     } as MultiSelectFieldProps;
   } else if (fieldType === "array" && fieldDef.itemFields) {
     const arrayValue = (baseProps.value as unknown[] | undefined) ?? [];
@@ -204,7 +208,12 @@ export function FieldRenderer({ fieldPath, components, className }: FieldRendere
       getItemFieldProps: (index: number, fieldName: string) => {
         const itemFieldDef = itemFieldDefs[fieldName];
         const itemPath = `${fieldPath}[${index}].${fieldName}`;
-        const itemValue = (arrayValue[index] as Record<string, unknown>)?.[fieldName];
+        const item = (arrayValue[index] as Record<string, unknown>) ?? {};
+        const itemValue = item[fieldName];
+
+        // Use pre-computed visible options from memoized map
+        const visibleOptions = forma.optionsVisibility[itemPath] as SelectOption[] | undefined;
+
         return {
           name: itemPath,
           value: itemValue,
@@ -219,14 +228,14 @@ export function FieldRenderer({ fieldPath, components, className }: FieldRendere
           errors: forma.errors.filter((e) => e.field === itemPath),
           onChange: (value: unknown) => {
             const newArray = [...arrayValue];
-            const item = (newArray[index] ?? {}) as Record<string, unknown>;
-            newArray[index] = { ...item, [fieldName]: value };
+            const existingItem = (newArray[index] ?? {}) as Record<string, unknown>;
+            newArray[index] = { ...existingItem, [fieldName]: value };
             forma.setFieldValue(fieldPath, newArray);
           },
           onBlur: () => forma.setFieldTouched(itemPath),
           itemIndex: index,
           fieldName,
-          options: itemFieldDef?.options,
+          options: visibleOptions,
         };
       },
       minItems,

package/src/FormRenderer.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { forwardRef, useImperativeHandle, useRef, useMemo, useCallback } from "react";
-import type { Forma, FieldDefinition, ValidationResult, JSONSchemaProperty } from "@fogpipe/forma-core";
+import type { Forma, FieldDefinition, ValidationResult, JSONSchemaProperty, SelectOption } from "@fogpipe/forma-core";
 import { useForma } from "./useForma.js";
 import { FormaContext } from "./context.js";
 import type { ComponentMap, LayoutProps, FieldWrapperProps, PageWrapperProps, BaseFieldProps, TextFieldProps, NumberFieldProps, SelectFieldProps, ArrayFieldProps, ArrayHelpers } from "./types.js";
@@ -309,7 +309,7 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
           fieldType,
           value: baseProps.value as string | string[] | null,
           onChange: baseProps.onChange as (value: string | string[] | null) => void,
-          options: fieldDef.options ?? [],
+          options: forma.optionsVisibility[fieldPath] ?? fieldDef.options ?? [],
         } as SelectFieldProps;
       } else if (fieldType === "array" && fieldDef.itemFields) {
         const arrayValue = Array.isArray(baseProps.value) ? baseProps.value : [];
@@ -330,11 +330,12 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
         const getItemFieldPropsExtended = (index: number, fieldName: string) => {
           const baseProps = baseHelpers.getItemFieldProps(index, fieldName);
           const itemFieldDef = itemFieldDefs[fieldName];
+          const itemPath = `${fieldPath}[${index}].${fieldName}`;
           return {
             ...baseProps,
             itemIndex: index,
             fieldName,
-            options: itemFieldDef?.options,
+            options: (forma.optionsVisibility[itemPath] as SelectOption[] | undefined) ?? itemFieldDef?.options,
           };
         };
 

package/src/__tests__/FormRenderer.test.tsx

@@ -735,6 +735,192 @@ describe("FormRenderer", () => {
     });
   });
 
+  // ============================================================================
+  // Option Visibility (visibleWhen on select options)
+  // ============================================================================
+
+  describe("option visibility in FormRenderer", () => {
+    it("should filter select options based on visibleWhen expressions", async () => {
+      const user = userEvent.setup();
+      const spec = createTestSpec({
+        fields: {
+          department: {
+            type: "select",
+            label: "Department",
+            options: [
+              { value: "engineering", label: "Engineering" },
+              { value: "sales", label: "Sales" },
+            ],
+          },
+          position: {
+            type: "select",
+            label: "Position",
+            options: [
+              { value: "dev", label: "Developer", visibleWhen: 'department = "engineering"' },
+              { value: "qa", label: "QA Engineer", visibleWhen: 'department = "engineering"' },
+              { value: "rep", label: "Sales Rep", visibleWhen: 'department = "sales"' },
+              { value: "mgr", label: "Sales Manager", visibleWhen: 'department = "sales"' },
+            ],
+          },
+        },
+      });
+
+      render(
+        <FormRenderer
+          spec={spec}
+          components={createTestComponentMap()}
+        />
+      );
+
+      // Initially no department selected - no position options should show
+      const positionSelect = screen.getByTestId("field-position").querySelector("select")!;
+      // Only the placeholder "Select..." option should be present
+      expect(positionSelect.querySelectorAll("option")).toHaveLength(1);
+
+      // Select Engineering department
+      const departmentSelect = screen.getByTestId("field-department").querySelector("select")!;
+      await user.selectOptions(departmentSelect, "engineering");
+
+      // Now only engineering positions should show
+      await waitFor(() => {
+        const options = positionSelect.querySelectorAll("option");
+        // placeholder + 2 engineering options
+        expect(options).toHaveLength(3);
+        expect(screen.getByText("Developer")).toBeInTheDocument();
+        expect(screen.getByText("QA Engineer")).toBeInTheDocument();
+        expect(screen.queryByText("Sales Rep")).not.toBeInTheDocument();
+        expect(screen.queryByText("Sales Manager")).not.toBeInTheDocument();
+      });
+
+      // Switch to Sales department
+      await user.selectOptions(departmentSelect, "sales");
+
+      // Now only sales positions should show
+      await waitFor(() => {
+        const options = positionSelect.querySelectorAll("option");
+        // placeholder + 2 sales options
+        expect(options).toHaveLength(3);
+        expect(screen.getByText("Sales Rep")).toBeInTheDocument();
+        expect(screen.getByText("Sales Manager")).toBeInTheDocument();
+        expect(screen.queryByText("Developer")).not.toBeInTheDocument();
+        expect(screen.queryByText("QA Engineer")).not.toBeInTheDocument();
+      });
+    });
+
+    it("should show all options when none have visibleWhen", () => {
+      const spec = createTestSpec({
+        fields: {
+          color: {
+            type: "select",
+            label: "Color",
+            options: [
+              { value: "red", label: "Red" },
+              { value: "blue", label: "Blue" },
+              { value: "green", label: "Green" },
+            ],
+          },
+        },
+      });
+
+      render(
+        <FormRenderer
+          spec={spec}
+          components={createTestComponentMap()}
+        />
+      );
+
+      expect(screen.getByText("Red")).toBeInTheDocument();
+      expect(screen.getByText("Blue")).toBeInTheDocument();
+      expect(screen.getByText("Green")).toBeInTheDocument();
+    });
+
+    it("should filter multiselect options based on visibleWhen expressions", async () => {
+      const user = userEvent.setup();
+      const spec = createTestSpec({
+        fields: {
+          tier: {
+            type: "select",
+            label: "Tier",
+            options: [
+              { value: "basic", label: "Basic" },
+              { value: "premium", label: "Premium" },
+            ],
+          },
+          features: {
+            type: "multiselect",
+            label: "Features",
+            options: [
+              { value: "email", label: "Email Support" },
+              { value: "phone", label: "Phone Support", visibleWhen: 'tier = "premium"' },
+              { value: "priority", label: "Priority Queue", visibleWhen: 'tier = "premium"' },
+            ],
+          },
+        },
+      });
+
+      render(
+        <FormRenderer
+          spec={spec}
+          components={createTestComponentMap()}
+        />
+      );
+
+      // Initially no tier selected - only non-conditional option visible
+      const featuresSelect = screen.getByTestId("field-features").querySelector("select")!;
+      await waitFor(() => {
+        // placeholder + 1 option without visibleWhen
+        expect(featuresSelect.querySelectorAll("option")).toHaveLength(2);
+        expect(screen.getByText("Email Support")).toBeInTheDocument();
+        expect(screen.queryByText("Phone Support")).not.toBeInTheDocument();
+      });
+
+      // Select Premium tier
+      const tierSelect = screen.getByTestId("field-tier").querySelector("select")!;
+      await user.selectOptions(tierSelect, "premium");
+
+      // All options should now show
+      await waitFor(() => {
+        // placeholder + 3 options
+        expect(featuresSelect.querySelectorAll("option")).toHaveLength(4);
+        expect(screen.getByText("Email Support")).toBeInTheDocument();
+        expect(screen.getByText("Phone Support")).toBeInTheDocument();
+        expect(screen.getByText("Priority Queue")).toBeInTheDocument();
+      });
+    });
+
+    it("should return empty options when all are filtered out", async () => {
+      const spec = createTestSpec({
+        fields: {
+          category: {
+            type: "select",
+            label: "Category",
+            options: [
+              { value: "a", label: "Option A", visibleWhen: 'toggle = true' },
+              { value: "b", label: "Option B", visibleWhen: 'toggle = true' },
+            ],
+          },
+          toggle: {
+            type: "boolean",
+            label: "Toggle",
+          },
+        },
+      });
+
+      render(
+        <FormRenderer
+          spec={spec}
+          initialData={{ toggle: false }}
+          components={createTestComponentMap()}
+        />
+      );
+
+      // All options have visibleWhen that evaluates to false
+      const categorySelect = screen.getByTestId("field-category").querySelector("select")!;
+      // Only placeholder
+      expect(categorySelect.querySelectorAll("option")).toHaveLength(1);
+    });
+  });
+
   // ============================================================================
   // Array Field Interactions
   // ============================================================================