svelte-headlessui
svelte-headlessui copied to clipboard
Add index signature to `TRenderProps` to allow passing `data-*` attributes
Hi @rgossiaux, thank you for your work. We're using version 1.0.2
.
We need to pass data-*
attributes to HeadlessUI components, e.g.:
<Switch data-some-attr="foo" ...>
...
</Switch>
The attributes are correctly passed to the HTML element:
<button data-some-attr="foo" ...>
...
</button>
However, running tsc --noEmit
, TypeScript complains that:
Object literal may only specify known properties, and '"data-some-attr"' does not exist in type 'Omit<TRenderProps<{ checked: boolean; }, "button", "button">, TInternalProps | "as" | "static" | "unmount"> & { as?: "button" | undefined; } & { checked: boolean; }'
Would it be ok to modify the definition of TRenderProps
to include an index signature:
[attr: string]: string
We could also enforce that index props start with data-
, although this is not necessary.
If you give me the green light, I will send a PR. Thank you!