Question regarding how the primitive component are typed

[ladislasdellinger]

Hello everyone,

I have a question regarding how the Radix Primitive component props are typed. As you may know, when asChild === false, Radix renders a default HTML element. For example, if we consider the DropdownMenuRadioGroup element, the props currently look like this:

interface DropdownMenuRadioGroupProps extends ComponentPropsWithoutRef<'div'> {
  value: string;
  onValueChange: (value: string) => void;
  asChild?: boolean;
}

This means that even when asChild === true and the component doesn't render the underlying div, it still accepts all the props from the base div.

I was wondering if there might be a way to improve the typing by creating a structure like this, or if I might be missing something in the asChild pattern:

type DropdownMenuRadioGroupOwnProps = {
  value: string;
  onValueChange: (value: string) => void;
};
type DropdownMenuRadioGroupProps = DropdownMenuRadioGroupOwnProps &
  ({ asChild: true } | ({ asChild?: false } & ComponentPropsWithoutRef<'div'>));

Any insights or suggestions would be greatly appreciated. Thank you!

[benoitgrelard]

I briefly tried it but it seems TS can't resolve it properly for the default case when asChild isn't passed. There might be some limitations there.

[ladislasdellinger]

Hi @benoitgrelard, thanks for your answer.

I'm currently using this pattern and I have no issue. I created a small CodeSandbox to show how it should works, maybe it can helps to find why it was not working for you.

[benoitgrelard]

I believe that TS started to support this at some point, we are not on latest at the moment, hence why it doesn't work right now. There would be more work involved for us to do that. Admittedly this is a small improvement, but not huge anyway.