Lens generic doesn't work with a WideUnion and a subset of WideUnion

[stefan-huck]

This lib is a huge win for composable forms, love it!

However, if you want to create a ComposableSubForm that expects a WideUnion, but the consumer only provides a narrower subset, it won’t work as expected.

Versions:

"@hookform/lenses": "^0.7.1",
"react-hook-form": "^7.56.2",

type WideUnion = "Foo" | "Bar" | "Baz"
type WideUnionSubset = "Foo" | "Bar"

function ComposeableSubForm({ lens }: { lens: Lens<WideUnion> }) {
  return null
}

function Form() {
  const { control } = useForm({
    values: {
      prop: "Foo" as WideUnionSubset,
    },
  })

  const lens = useLens({ control })

  // Error happens here:
  return <ComposeableSubForm lens={lens.focus("prop")} />
}

Type 'Lens' is not assignable to type 'Lens'.
Type 'LensInterop & PrimitiveLens<"Foo">' is not assignable to type 'Lens'.
Type 'LensInterop & PrimitiveLens<"Foo">' is not assignable to type 'LensInterop & PrimitiveLens<"Baz">'.
Type 'LensInterop & PrimitiveLens<"Foo">' is not assignable to type 'LensInterop'.
The types of 'interop().control._subjects.state' are incompatible between these types.
Type 'FormStateSubjectRef<HookFormControlShim>' is not assignable to type 'FormStateSubjectRef<HookFormControlShim>'.
Type 'FormStateSubjectRef<HookFormControlShim>' is not assignable to type '{ readonly observers: Observer<Partial<FormState<HookFormControlShim>> & { name?: string | undefined; values?: HookFormControlShim | undefined; type?: EventType | undefined; }>[]; subscribe: (value: Observer<Partial<FormState<HookFormControlShim>> & { name?: string | undefined; values?: HookFormControlShim | undefined; type?: EventType | undefined; }>) => Subscription; unsubscribe: Noop; }'.
Types of property 'observers' are incompatible.
Type 'Observer<Partial<FormState<HookFormControlShim>> & { name?: string | undefined; values?: HookFormControlShim | undefined; type?: EventType | undefined; }>[]' is not assignable to type 'Observer<Partial<FormState<HookFormControlShim>> & { name?: string | undefined; values?: HookFormControlShim | undefined; type?: EventType | undefined; }>[]'.
Type 'Observer<Partial<FormState<HookFormControlShim>> & { name?: string | undefined; values?: HookFormControlShim | undefined; type?: EventType | undefined; }>' is not assignable to type 'Observer<Partial<FormState<HookFormControlShim>> & { name?: string | undefined; values?: HookFormControlShim | undefined; type?: EventType | undefined; }>'.
Type 'Partial<FormState<HookFormControlShim>> & { name?: string | undefined; values?: HookFormControlShim | undefined; type?: EventType | undefined; }' is not assignable to type 'Partial<FormState<HookFormControlShim>> & { name?: string | undefined; values?: HookFormControlShim | undefined; type?: EventType | undefined; }'.
Type 'Partial<FormState<HookFormControlShim>> & { name?: string | undefined; values?: HookFormControlShim | undefined; type?: EventType | undefined; }' is not assignable to type 'Partial<FormState<HookFormControlShim>>'.
Types of property 'defaultValues' are incompatible.
Type 'Readonly<{ DO_NOT_USE_HOOK_FORM_CONTROL_SHIM?: WideUnion | undefined; }> | undefined' is not assignable to type 'Readonly<{ DO_NOT_USE_HOOK_FORM_CONTROL_SHIM?: WideUnionSubset | undefined; }> | undefined'.
Type 'Readonly<{ DO_NOT_USE_HOOK_FORM_CONTROL_SHIM?: WideUnion | undefined; }>' is not assignable to type 'Readonly<{ DO_NOT_USE_HOOK_FORM_CONTROL_SHIM?: WideUnionSubset | undefined; }>'.
Types of property 'DO_NOT_USE_HOOK_FORM_CONTROL_SHIM' are incompatible.
Type 'WideUnion | undefined' is not assignable to type 'WideUnionSubset | undefined'.
Type '"Baz"' is not assignable to type 'WideUnionSubset | undefined'.ts(2322)

[aspirisen]

This doesn't look like a bug.

In function ComposeableSubForm({ lens }: { lens: Lens<WideUnion> }) { you define that this component can set either "Foo" or "Bar" or "Baz".

However, you defined that you form can work only with "Foo" or "Bar".
So ComposeableSubForm can set value Baz, but this is not what you expect in your form values in submit handler

[stefan-huck]

Thanks for the answer and sorry for the late response.

An easier example:

const valid = "g" satisfies  "mg" | "g" | "kg" // This is fine for TS

With the generic type Lens its not fine

Type 'Lens<"g">' does not satisfy the expected type 'Lens<"mg" | "g" | "kg">'.

Is this behaviour intended?