Select Primitive PDR

[kawikabader]

rendered

[kbader-godaddy]

REMOVED

[changeset-bot]

⚠️ No Changeset found

Latest commit: 72a05c6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[jsmith9-godaddy]

I was thinking this would take a more re-usable component direction. With the slots, we should be able to pass down any props needed to properly align the components.

<Select>
  <Button slot="trigger"><Text slot="value" /></Button>
  <Popover slot="popover">
    <Listbox slot="list">
	  <ListboxItem>My First Value</ListboxItem>
    </ListBox>
  </Popover>
  <Text slot="description" />
  <Text slot="errorMessage" />
</Select>

I believe this approach simplifies the composition, and more freely allows custom components to be used ie <MyCustomContainer slot="description" />.

[kawikabader]

A few design questions @jsmith9-godaddy :

1. For the popover slot, should Select call useOverlay/useOverlayPosition internally and merge those props onto the slotted component? Or should users provide a Popover that handles overlay/positioning?

2. React Aria's CollectionBuilder uses createLeafComponent(ItemNode, ...) to connect items. Both ListBoxItem and SelectOption use this pattern. If we use ListBoxItem directly with slot="list", SelectOption's value prop convenience (mapping to id) would be lost. Should we:

   • Use ListBoxItem directly and require users to provide id?
   • Or keep SelectOption for the value → id mapping?

3. With slot-based composition, compile-time checks are harder (ensuring triggerProps go to a button-like component, menuProps to a listbox-like component). Document expected prop types per slot, or add typed helpers/wrappers?

4. Bento's slot system uses the slots prop for customization (e.g., slots={{ 'trigger.value': {...} }}), while this finds children by their slot prop. These are different patterns. Should this be:

   • A separate pattern specific to Select?
   • Or extend the slot system to support both patterns?

5. React Aria provides mergeRefs from @react-aria/utils (used in checkbox, radio, pressable). Should we use that instead of a custom implementation for consistency?

[jsmith9-godaddy]

1. Yes, the idea is the root component Select would be the coordinator that applies all necessary props to the appropriate slot
2. React Aria follows a similar pattern to what I described by using Listbox: https://react-spectrum.adobe.com/react-aria/Select.html#example
3. Could we not type the slots with interfaces that a consumer could use if they wanted to create a custom component for that slot?
4. Extend the slot system to fit the composition strategy we want to implement
5. Yes, utilize any utils from @react-aria/utils that we need