Merge pull request #119 from watershed-climate/sterling-06-07-allow_u…

…nion_props_on_mapped_components

allow union props on mapped components

src/__tests__/createSchemaForm.test.tsx

@@ -74,6 +74,47 @@ describe("createSchemaForm", () => {
     expect(screen.queryByTestId(testIds.textFieldTwo)).toBeTruthy();
     expect(screen.queryByTestId(testIds.booleanField)).toBeTruthy();
   });
+  it("should allow union props in components", () => {
+    const testSchema = z.object({
+      textField: z.string(),
+    });
+
+    function TextField(props: { testText: string } | { testNumber: number }) {
+      return (
+        <div>{"testText" in props ? props.testText : props.testNumber}</div>
+      );
+    }
+
+    const mapping = [[z.string(), TextField] as const] as const;
+    const TSForm = createTsForm(mapping);
+
+    render(
+      <TSForm
+        onSubmit={() => {}}
+        schema={testSchema}
+        props={{
+          textField: {
+            testText: "text",
+          },
+        }}
+      />
+    );
+
+    expect(screen.queryByText("text")).toBeTruthy();
+    render(
+      <TSForm
+        onSubmit={() => {}}
+        schema={testSchema}
+        props={{
+          textField: {
+            testNumber: 101,
+          },
+        }}
+      />
+    );
+
+    expect(screen.queryByText("101")).toBeTruthy();
+  });
   it("should type the onSubmit properly", () => {
     const testSchema = z.object({
       textField: z.string(),

src/createSchemaForm.tsx

@@ -25,6 +25,7 @@ import {
 import { getComponentForZodType } from "./getComponentForZodType";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
+  DistributiveOmit,
   IndexOf,
   IndexOfUnwrapZodType,
   RequireKeysWithRequiredChildren,
@@ -210,7 +211,7 @@ export type PropType<
               any,
               any
             ] // I guess this tells typescript it has a second element? errors without this check.
-          ? Omit<
+          ? DistributiveOmit<
               ComponentProps<GetTupleFromMapping<Mapping, SchemaType, key>[1]>,
               PropsMapType[number][1]
             > &
@@ -316,7 +317,10 @@ export type RTFFormProps<
     /**
      * Props to pass to the form container component (by default the props that "form" tags accept)
      */
-    formProps?: Omit<ComponentProps<FormType>, "children" | "onSubmit">;
+    formProps?: DistributiveOmit<
+      ComponentProps<FormType>,
+      "children" | "onSubmit"
+    >;
   }>;
 
 /**

src/typeUtilities.ts

@@ -55,8 +55,11 @@ export type SafeOmit<T, Key extends keyof T> = IsEmpty<
 /**
  * @internal
  */
-export type DistributiveOmit<T, K extends keyof T> = T extends any
-  ? SafeOmit<T, K>
+export type DistributiveOmit<T, K extends keyof T> = T extends T
+  ? // Typescript actually is fine with Omit<T, K>, but this is surprising because
+    // K might include elements that are not in every member of the union T. In other words,
+    // K does not extend keyof T.
+    Omit<T, K & keyof T>
   : never;
 
 /**