Export component prop types

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.5.0

What browser are you using?

N/A

Reproduction URL

N/A

Describe your issue

In React + Typescript, a common pattern I follow is to wrap a library component for styling or custom behaviour before exposing it to the rest of the codebase. I like to mirror the underlying component props so that Typescript intellisense can provide the same prop hints to for the wrapper component as the underlying library component.

Here is an example of what I want:

// Wrapping a tab for custom styling. TabProps, however, does not exist;
function TemplateLibraryTab({ children, ...props }: TabProps) {
  return (
    <Tab
      {...props}
      className={({ selected }) =>
        clsx("p-2 rounded", selected ? "text-gray-900" : "text-gray-500")
      }
    >
      {children}
    </Tab>
  )
}

HeadlessUI does not seem to expose these props, or at least I could not find them. Would it be possible to export these prop types for this purpose? I think it is a strong use-case.

[CapitaineToinon]

Thanks to discussions/601, I got it working like this:

import { ComponentType } from 'react'
import { Dialog as HeadlessDialog } from '@headlessui/react'

type ExtractProps<T> = T extends ComponentType<infer P> ? P : T

function DialogRoot(props: ExtractProps<typeof HeadlessDialog>) {
  // add your own logic here
  return <HeadlessDialog {...props} />
}

You may also need to do something like this if you want the nested components to work too.

export let Dialog = Object.assign(DialogRoot, {
	Backdrop: HeadlessDialog.Backdrop,
	Panel: HeadlessDialog.Panel,
	Overlay: HeadlessDialog.Overlay,
	Title: HeadlessDialog.Title,
	Description: HeadlessDialog.Description,
})

[ZerNico]

I have been doing React.ComponentProps for exactly the same use case (I wrap all the components I import) and it worked very well so far! However v1.6.0 breaks this for me. Would love to know if there is a workaround at least, otherwise will stay with v1.5.

Yup for some reason it broke now.

Type '(<TTag extends ElementType<any> = "button">(props: Props<TTag, TabRenderPropArg, TabPropsWeControl>, ref: Ref<HTMLElement>) => ReactElement<...>) & { ...; } & { ...; }' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'. Type '(<TTag extends ElementType<any> = "button">(props: Props<TTag, TabRenderPropArg, TabPropsWeControl>, ref: Ref<HTMLElement>) => ReactElement<...>) & { ...; } & { ...; }' is not assignable to type '(props: any) => ReactElement<any, any>'.

Exporting the PropTypes would probably still be the nicer solution.