Merge pull request #1997 from quantified-uncertainty/rhf-fixes

Fix types for react-hook-form 7.45

packages/hub/src/relative-values/components/RelativeValuesDefinitionForm/index.tsx

@@ -241,7 +241,7 @@ const HTMLForm: FC = () => {
                   label: item.id,
                   value: item.id,
                 }))}
-                onChange={(item) => field.onChange(item?.value)}
+                onChange={(item) => field.onChange(item?.value ?? null)}
                 isClearable={true}
               />
             );

packages/ui/package.json

@@ -37,7 +37,7 @@
     "framer-motion": "^10.12.18",
     "react-colorful": "^5.6.1",
     "react-hook-form": "^7.45.1",
-    "react-textarea-autosize": "^8.5.0",
+    "react-textarea-autosize": "8.4.1",
     "react-use": "^17.4.0"
   },
   "devDependencies": {

packages/ui/src/forms/common/ControlledFormField.tsx

@@ -1,34 +1,44 @@
 import { ReactNode } from "react";
 import {
-  ControllerRenderProps,
-  FieldPath,
+  FieldPathByValue,
   FieldValues,
   RegisterOptions,
 } from "react-hook-form";
 
 import { ControlledFormInput } from "./ControlledFormInput.js";
 import { FieldLayout, FormFieldLayoutProps } from "./FormFieldLayout.js";
+import { PatchedControllerRenderProps } from "./types.js";
 
 export type ControlledFormFieldProps<
   TValues extends FieldValues,
-  TName extends FieldPath<TValues> = FieldPath<TValues>
+  TValueType = unknown,
+  TName extends FieldPathByValue<TValues, TValueType> = FieldPathByValue<
+    TValues,
+    TValueType
+  >
 > = FormFieldLayoutProps & {
   name: TName;
   rules?: RegisterOptions<TValues, TName>;
-  children: (props: ControllerRenderProps<TValues, TName>) => ReactNode;
+  children: (
+    props: PatchedControllerRenderProps<TValues, TValueType, TName>
+  ) => ReactNode;
 };
 
 export function ControlledFormField<
   TValues extends FieldValues,
-  TName extends FieldPath<TValues> = FieldPath<TValues>
+  TValueType,
+  TName extends FieldPathByValue<TValues, TValueType> = FieldPathByValue<
+    TValues,
+    TValueType
+  >
 >({
   name,
   rules,
   label,
   description,
   inlineLabel,
   children,
-}: ControlledFormFieldProps<TValues, TName>) {
+}: ControlledFormFieldProps<TValues, TValueType, TName>) {
   return (
     <FieldLayout
       label={label}

packages/ui/src/forms/common/ControlledFormInput.tsx

@@ -2,28 +2,40 @@ import { ReactNode } from "react";
 import {
   Controller,
   ControllerRenderProps,
-  FieldPath,
+  FieldPathByValue,
+  FieldPathValue,
   FieldValues,
   UseControllerProps,
   useFormContext,
 } from "react-hook-form";
 
 import { WithRHFError } from "./WithRHFError.js";
+import { PatchedControllerRenderProps } from "./types.js";
 
 type Props<
   TValues extends FieldValues,
-  TName extends FieldPath<TValues> = FieldPath<TValues>
+  TValueType,
+  TName extends FieldPathByValue<TValues, TValueType> = FieldPathByValue<
+    TValues,
+    TValueType
+  >
 > = {
   name: TName;
   rules?: UseControllerProps<TValues, TName>["rules"];
-  children: (props: ControllerRenderProps<TValues, TName>) => ReactNode;
+  children: (
+    props: PatchedControllerRenderProps<TValues, TValueType, TName>
+  ) => ReactNode;
 };
 
 // Helper component for custom controlled react-hook-form connected components.
 export function ControlledFormInput<
   TValues extends FieldValues,
-  TName extends FieldPath<TValues> = FieldPath<TValues>
->({ name, rules, children }: Props<TValues, TName>) {
+  TValueType,
+  TName extends FieldPathByValue<TValues, TValueType> = FieldPathByValue<
+    TValues,
+    TValueType
+  >
+>({ name, rules, children }: Props<TValues, TValueType, TName>) {
   const { control } = useFormContext<TValues>();
 
   return (
@@ -32,7 +44,17 @@ export function ControlledFormInput<
         name={name}
         control={control}
         rules={rules}
-        render={({ field }) => <div>{children(field) ?? null}</div>}
+        render={({ field }) => (
+          <div>
+            {children(
+              // our controller components don't allow ChangeEvent events;
+              // also, Typescript is not smart enough to infer that FieldPathByValue is the inverse of FieldPathValue
+              field as Omit<typeof field, "onChange"> & {
+                onChange: (event: TValueType) => void;
+              }
+            )}
+          </div>
+        )}
       />
     </WithRHFError>
   );

packages/ui/src/forms/common/types.ts

@@ -1,4 +1,10 @@
-import { FieldPath, FieldValues, RegisterOptions } from "react-hook-form";
+import {
+  ControllerRenderProps,
+  FieldPath,
+  FieldPathByValue,
+  FieldValues,
+  RegisterOptions,
+} from "react-hook-form";
 import { FormFieldLayoutProps } from "./FormFieldLayout.js";
 
 type StringRules<
@@ -18,15 +24,21 @@ type NumberRules<
 // These types is useful for specific field/*FormField declarations.
 export type CommonStringFieldProps<
   TValues extends FieldValues,
-  TName extends FieldPath<TValues> = FieldPath<TValues>
+  TName extends FieldPathByValue<TValues, string> = FieldPathByValue<
+    TValues,
+    string
+  >
 > = Omit<FormFieldLayoutProps, "inlineLabel"> & {
   name: TName;
   rules?: StringRules<TValues, TName>;
 };
 
 export type CommonNumberFieldProps<
   TValues extends FieldValues,
-  TName extends FieldPath<TValues> = FieldPath<TValues>
+  TName extends FieldPathByValue<
+    TValues,
+    number | undefined
+  > = FieldPathByValue<TValues, number | undefined>
 > = Omit<FormFieldLayoutProps, "inlineLabel"> & {
   name: TName;
   rules?: NumberRules<TValues, TName>;
@@ -40,3 +52,14 @@ export type CommonUnknownFieldProps<
   // TODO - allow more rules?
   rules?: Pick<RegisterOptions<TValues, TName>, "required" | "validate">;
 };
+
+export type PatchedControllerRenderProps<
+  TValues extends FieldValues,
+  TValueType,
+  TName extends FieldPathByValue<TValues, TValueType> = FieldPathByValue<
+    TValues,
+    TValueType
+  >
+> = Omit<ControllerRenderProps<TValues, TName>, "onChange"> & {
+  onChange: (event: TValueType) => void;
+};

packages/ui/src/forms/fields/ColorFormField.tsx

@@ -1,15 +1,18 @@
-import { FieldPath, FieldValues } from "react-hook-form";
+import { FieldPathByValue, FieldValues } from "react-hook-form";
 
 import { ControlledFormField } from "../common/ControlledFormField.js";
-import { StyledColorInput } from "../styled/StyledColorInput.js";
 import { CommonStringFieldProps } from "../common/types.js";
+import { StyledColorInput } from "../styled/StyledColorInput.js";
 
 export function ColorFormField<
   TValues extends FieldValues,
-  TName extends FieldPath<TValues> = FieldPath<TValues>
+  TName extends FieldPathByValue<TValues, string> = FieldPathByValue<
+    TValues,
+    string
+  >
 >({ ...fieldProps }: CommonStringFieldProps<TValues, TName>) {
   return (
-    <ControlledFormField {...fieldProps} inlineLabel>
+    <ControlledFormField<TValues, string, TName> {...fieldProps} inlineLabel>
       {({ value, onChange }) => (
         <StyledColorInput value={value} onChange={onChange} />
       )}

packages/ui/src/forms/fields/NumberFormField.tsx

@@ -1,12 +1,15 @@
-import { FieldPath, FieldValues } from "react-hook-form";
+import { FieldPathByValue, FieldValues } from "react-hook-form";
 
 import { ControlledFormField } from "../common/ControlledFormField.js";
 import { CommonNumberFieldProps } from "../common/types.js";
 import { StyledInput, type StyledInputProps } from "../styled/StyledInput.js";
 
 export function NumberFormField<
   TValues extends FieldValues,
-  TName extends FieldPath<TValues> = FieldPath<TValues>
+  TName extends FieldPathByValue<
+    TValues,
+    number | undefined
+  > = FieldPathByValue<TValues, number | undefined>
 >({
   placeholder,
   rules = {},

packages/ui/src/forms/fields/TextAreaFormField.tsx

@@ -1,4 +1,4 @@
-import { FieldPath, FieldValues } from "react-hook-form";
+import { FieldPathByValue, FieldValues } from "react-hook-form";
 
 import { FormField } from "../common/FormField.js";
 import { CommonStringFieldProps } from "../common/types.js";
@@ -9,7 +9,10 @@ import {
 
 export function TextAreaFormField<
   TValues extends FieldValues,
-  TName extends FieldPath<TValues> = FieldPath<TValues>
+  TName extends FieldPathByValue<TValues, string> = FieldPathByValue<
+    TValues,
+    string
+  >
 >({
   placeholder,
   ...fieldProps

packages/ui/src/forms/fields/TextFormField.tsx

@@ -1,12 +1,15 @@
-import { FieldPath, FieldValues } from "react-hook-form";
+import { FieldPathByValue, FieldValues } from "react-hook-form";
 
 import { FormField } from "../common/FormField.js";
 import { CommonStringFieldProps } from "../common/types.js";
 import { StyledInput, type StyledInputProps } from "../styled/StyledInput.js";
 
 export function TextFormField<
   TValues extends FieldValues,
-  TName extends FieldPath<TValues> = FieldPath<TValues>
+  TName extends FieldPathByValue<TValues, string> = FieldPathByValue<
+    TValues,
+    string
+  >
 >({
   placeholder,
   size,

packages/ui/src/forms/styled/StyledTextArea.tsx

@@ -1,7 +1,12 @@
 import { TextareaHTMLAttributes, forwardRef } from "react";
-import TextareaAutosize from "react-textarea-autosize";
+import ImportedTextareaAutosize from "react-textarea-autosize";
 import { clsx } from "clsx";
 
+// ESM hack; can be removed after we upgrade to >8.5.0
+// but that depends on https://github.com/Andarist/react-textarea-autosize/issues/379
+const TextareaAutosize =
+  ImportedTextareaAutosize as unknown as typeof ImportedTextareaAutosize.default;
+
 export type StyledTextAreaProps = Omit<
   TextareaHTMLAttributes<HTMLTextAreaElement>,
   "className" | "style"

yarn.lock

@@ -4509,7 +4509,7 @@ __metadata:
     react-colorful: ^5.6.1
     react-dom: ^18.2.0
     react-hook-form: ^7.45.1
-    react-textarea-autosize: ^8.5.0
+    react-textarea-autosize: 8.4.1
     react-use: ^17.4.0
     rollup-plugin-node-builtins: ^2.1.2
     storybook: ^7.0.24
@@ -19627,7 +19627,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-textarea-autosize@npm:^8.3.2":
+"react-textarea-autosize@npm:8.4.1, react-textarea-autosize@npm:^8.3.2":
   version: 8.4.1
   resolution: "react-textarea-autosize@npm:8.4.1"
   dependencies:
@@ -19640,19 +19640,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-textarea-autosize@npm:^8.5.0":
-  version: 8.5.0
-  resolution: "react-textarea-autosize@npm:8.5.0"
-  dependencies:
-    "@babel/runtime": ^7.20.13
-    use-composed-ref: ^1.3.0
-    use-latest: ^1.2.1
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: c5fde6100b74277d75a796a7b3b2287759ed16173c34b58cfa541bca474a09d23e7695f6c9aab4e9b5f35cb4f05792d5e0fb669d926efba536f82c7b7b75e5e4
-  languageName: node
-  linkType: hard
-
 "react-transition-group@npm:^4.3.0":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"