<Root> component as a possibly unnecessary part of a component namespace.

[dzianis-l]

Hi all,

Lot's of composite components like accordion, popover and even smaller ones like accessible-icon have the Root component which appears to be just a renamed export of a component itself.
Just to my personal understanding this feels new to how components used to be exported, however confusing.

E.g. this is the actual usage of let's say the AccessibleIcon component

// the two named exports confuse of what  an actual component for usage is. 
// Feels like <AccessibleIcon> but what the <Root> component is necessary for then?

import { Root, AccessibleIcon } from '@radix-ui/react-accessible-icon'; 

1. // is this a rendered icon in the end?
 <AccessibleIcon label={'test-label'}>
     <svg></svg>
</AccessibleIcon>

2. // or is this an icon?
<Root label={'test-label'}>
    <svg></svg>
</Root>

3. // or this one?
<Root label={'test-label'}>
    <AccessibleIcon label={'test-label'}>
        <svg></svg>
    </AccessibleIcon>
</Root>

// All the options appear to valid from the standpoint of type checking.

However as so to get a grasp of right component API there is a necessity to drill down to their implementation.

Thus, a few questions but about the same thing

1. Why would the Root export name be necessary for?

export {
    AccessibleIcon,
    // no Root - no point of confusion
}

2. Could there be static properties on a functional component approach as a matter of choice?

// popover.tsx

const Popover = (...) => {...}

Popover.Trigger = PopoverTrigger
Popover.Content = PopoverContent

export {
    Popover,
    PopoverTrigger,
    PopoverContent,
    // no Root, no point of confusion
...
}

// consumer.tsx

import {Popover, PopoverTrigger, PopoverPortal, PopoverContent}
...
1. valid dot-notation configuration
<Popover>
    <Popover.Trigger>open</Popover.Trigger>
    <Popover.Portal>
        <Popover.Content>{...}</Popover.Content>
    </Popover.Portal>
</Popover>

2. valid composition configuration
<Popover>
    <PopoverTrigger>open</Popover.Trigger>
    <PopoverPortal>
        <PopoverContent>{...}</PopoverContent>
    </PopoverPortal>
</Popover>

I'm not saying there is something wrong to be immediately fixed however I was wondering about alternatives here.
I would really appreciate elaboration on that approach and any further clarifying piece of feedback. Or just another points of view would be cool to hear.

Thanks!