Typescript issues when trying to customize components

[vdeantoni]

Hello,

I'd love to use headless-ui to create a custom ui library.

I'm trying to do something similar to this: https://www.radix-ui.com/docs/primitives/components/popover#custom-apis

Where it allows me to customize the behavior as well as add some basic style while keeping the original API.

I tried to do that with the Popover component, but due to the way the types are setup I couldn't.

I put together a quick repro here: https://codesandbox.io/s/gracious-cloud-29igl7?file=/src/Popover.tsx

The first problem is that I can't easily extract the Popover type. The PR #2313 might help with that.

The second problem is that HasDisplayName has displayName as a required field, but I believe is shouldn't. See the react one: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L356

Any thoughts? Am I missing something?

[its-monotype]

You can try extracting props type like this:

import { Combobox as ComboboxPrimitive } from '@headlessui/react';

export type ComboboxProps = React.ComponentProps<typeof ComboboxPrimitive>;

[its-monotype]

it not worked(