tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

Better support for exactOptionalPropertyTypes: true #3388

Open jakubmazanec opened 2 months ago

jakubmazanec commented 2 months ago

Describe the bug and the expected behavior

When TypeScript compiler option exactOptionalPropertyTypes is set to true, you cannot pass undefined as a value to an object property that is marked as optional but without explicit undefined type. While IMO very useful option, it can lead to bad DX, because it can cause TypeScript errors:

import {Checkbox} from '@headlessui/react';

type CustomComponentProps = {
  name?: string | undefined;
}

let CustomComponent = ({name}: CustomComponentProps ) => {
 return <Checkbox name={name} />; // error here, because `name` prop can be `undefined`
}

I therefore prefer that "input" types (like function parameters, properties in options objects, etc.) have explicit undefined added to them; e.g. here should look like this:

export type CheckboxProps<
  TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG,
  TType = string,
> = Props<
  TTag,
  CheckboxRenderPropArg,
  CheckboxPropsWeControl,
  {
    value?: TType | undefined
    disabled?: boolean | undefined
    indeterminate?: boolean | undefined

    checked?: boolean | undefined
    defaultChecked?: boolean | undefined
    autoFocus?: boolean | undefined
    form?: string | undefined
    name?: string | undefined
    onChange?: ((checked: boolean) => void) | undefined
  }
>

Would it be possible to add undefined to all input types? Thank you.