Consider switching from react-select to Adobe’s React Spectrum

[fregante]

React Spectrum is Adobe’s customizable and accessible component system. You can gauge the quality by checking out its documentation pages: https://spectrum.adobe.com/page/combo-box/

While React Select works reasonably well, its virtual counterpart isn't ideal:

pixiebrix-extension/src/Globals.d.ts

Lines 27 to 30 in 295e7b4

	// Package has no types: https://github.com/guiyep/react-select-virtualized/issues/293
	declare module "react-select-virtualized" {
	export { default } from "react-select";
	}

pixiebrix-extension/src/icons/IconSelector.tsx

Lines 18 to 19 in 295e7b4

	// Required for react-select-virtualized https://github.com/guiyep/react-select-virtualized/issues/283
	import "regenerator-runtime/runtime";

pixiebrix-extension/src/icons/IconSelector.tsx

Lines 82 to 85 in 295e7b4

	// Only style the selected value because `react-select-virtualized`
	// does not allow the customization of the list
	// https://github.com/guiyep/react-select-virtualized/issues/13#issuecomment-527238574
	components={{ SingleValue }}

Not to mention that this isn't great UI to pick icons, and there's no way to customize it:

I don't know if react-spectrum performs well on long lists of items but if there's interest we could look into it. It also has several other high-quality components that could always be useful.

[fregante]

I don't know if react-spectrum performs well on long lists

It looks like it automatically virtualizes them!

Design goals
…
Async loading
Virtualization for large collections
Infinite scrolling to load more items on demand

[fregante]

It can also replace react-autocomplete, which currently has a different look from react-select and is only used in SelectorSelectorWidget:

https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#custom-value

It also supports the usage described in #688

[twschiller]

Closing because it's not on our priority radar. Can revisit during future design system update