New: custom select dropdown example

[rodgobbi]

What's Changed

• Add an example with Custom Select Dropdown using a simplified version of shadcn/ui's Select.
• Update Custom Components docs, adding the new example for reference.

Notes

Using shadcn/ui's Select requires adding @radix-ui/react-select, which brings a lot of dependencies, but are only needed for development to use in the new example.
Another possible approach would be implementing a custom Select that is very simplified (also missing a lot of accessibility features already provided by radix-ui) for the example.

Demo

CustomDropdown.mov

[gpbl]

Look great to me, thanks for digging into that select library.

• We should implement an onValueChange as we suggested in Make it easier to replace Select/Dropdown components #2676 (comment) and then update the example.
• Keyboard navigation seems broken, but I can't say if it’s an issue with the original library.

[gpbl]

The idea is to add a onValueChange to the props:

Suggested change

	const { options, value, onChange, "aria-label": ariaLabel } = props;
	const container = use(ContainerContext);
	const handleValueChange = (newValue: string) => {
	const { options, value, onValueChange, "aria-label": ariaLabel } = props;
	const container = use(ContainerContext);
	const handleValueChange = onValueChange

[rodgobbi]

Keyboard navigation seems broken, but I can't say if it’s an issue with the original library.

Good catch @gpbl
I noticed this but missed writing a note about it.
The issue only happens in the docs, when the example is mounted in the doc window sandbox, I don't know if the shadow-dom sandbox causes some issue to radix, but running the example normally on the browser works fine.