Select Control (Epic): Refactor and consolidate logic

[joshuatf]

Problem

This issue will act as an epic to house other issues around the __experimentalSelectControl and __experimentalSelectTreeControl components. There are two main issues we're facing with these components:

1. We are duplicating a heavy amount of logic between these two components and should consolidate the efforts to reduce maintenance going forward.
2. Downshift's API has been more limiting than we anticipated and we need to apply workarounds to create our blur/focus/selection logic.

Solution

We should strive to share as much code as possible between these components and break this into meaningful chunks that are reusable.

We can do this with a combination of hooks and pre-made components that handle the default render. If we are careful to decouple the render from the selection logic, we can make these components much more composable reducing limitations moving forward.

This may look something like this:

const {
	isOpen,
	selected,
	select,
	remove,
	comboBoxProps,
	getItemProps,
	menuProps,
} = useDropdown(
	items: [ ... ]
	initialSelected: [],
	multiple: true,
);
return <>
	<ComboBox { ...comboBoxProps }>
		<Menu { ...menuProps } />
		<SelectedItems items={ selected } />
	</ComboBox>
</>

Issues

Tasks

Beta Give feedback

1. Update experimental select control to use dropdown hooks and improve extensibility #38364
   package: @woocommerce/components +1
   
2. Add a draft title or issue reference here
3. Create dropdown hook to house selected item status and item props
4. Create remove method in dropdown hook and connect to the selected item tags
5. Create menu open status in dropdown hook and respective event handlers for blur/focus
6. Create combobox props in dropdown hook
7. Create menu props in dropdown hook
8. [Enhancement] Allow users to add items using keyboard #35851
   focus: new product ux focus: product management priority: high status: blocked team: Mothra +5
9. Create highlighted item status and keyboard handlers for highlighting items
10. Create keyboard handlers for focusing tags and remove buttons
11. Select Control: Update cursor to default cursor to match native select #38229
    focus: new product ux package: @woocommerce/components priority: high team: Mothra +4
12. Select Control: Focus should remain on input when navigating through items #38231
    focus: new product ux package: @woocommerce/components team: Mothra +3
13. Select Control: Update suffix to always be up/down chevron #38227
    focus: product management package: @woocommerce/components team: Mothra +3
    
14. Tree Select Control: Parent should be indeterminate when child is selected but parent is not #38232
    focus: product management needs: design feedback package: @woocommerce/components team: Mothra +4

[joshuatf]

Closing this epic in favor of the FormTokenField component from GB in #45295.

I've left the child issues open and left references to the above issue where related.