Currently, there a few components in the @wordpress/components package that build onto / expand the vanilla HTML select element:

• SelectControl
• CustomSelectControl
• ComboboxControl
• FormTokenField
• ... and probably other components

The goal is explore the feasibility of rewriting some, or all of these components using ariakit's Select component` under the hood

Useful links:

• ariakit examples:
  • Select
  • Select autofill
  • Select combobox
  • Select grid
  • Select group
  • Select custom item
  • Select multiple selection
• proof of concept: https://codesandbox.io/s/ariakit-select-4s12c7

Notes so far:

• ariakit's Select doesn't seem to use a native select element under the hood — this means that current usages of SelectControl where vanilla option and optiongroup elements are being passed as children will not work. This would potentially be a breaking change; to cope with it, we could either keep both the new version and the old version of the component around while we soft deprecate this type of usage, or we could look into a way to automatically detect and "convert" the vanilla HTML elements to the ariakit equivalents
• ariakit adopts a modular approach to how components are exported (SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator). If we want to give our customers the freedom of specifying a custom select item layout, we may have to basically re-export each of these components (while adding some custom styles on top). Not necessarily a bad thing per se, but we should be aware of this shift in the APIs.
• with this approach, SelectControl and CustomSelectControl would practically have the same underlying implementation
• currently, our SelectControl and CustomSelectControl component don't have a way to customize the look of the dropdown itself — should we consider adding adding a "renderValue" prop, used to render a SelectItem both as the dropdown selected item, and each option? (for reference, see the renderValue function in this example)
• should we soft deprecate the "options" prop (currently used to pass data for which options should be displayed in the select), in favour of a more declarative, markup-oriented approach?
• ariakit's Select component uses internally ariakit's Popover — we may ultimately want to switch to that implementation, for consistency and efficiency's sake

TODO:

• Try adding more "gutenberg"-like styles
• Look into advanced examples (multiple selection, combobox)
• Test the component on smaller viewports / mobile devices
• Look at the docs / code and experiment with all available options
• Test controlled vs uncontrolled behavior