OptGroup in SelectControl

[raghavnarang]

Description of feature request
By checking the code of the SelectControl component. It seems that it doesn't support Optgroup tag to group the options of the select HTML element.

OptGroup Reference Link
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup

Proposed Solution
It would be nice if we have OptGroup support in SelectControl component, by passing an array of groups and fields as a nested array in their respective Group.

gutenberg/packages/components/src/select-control/index.js

Lines 112 to 126 in 38de844

	{ options.map( ( option, index ) => {
	const key =
	option.id ||
	`${ option.label }-${ option.value }-${ index }`;
	return (
	<option
	key={ key }
	value={ option.value }
	disabled={ option.disabled }
	>
	{ option.label }
	</option>
	);
	} ) }

[talldan]

@raghavnarang The issue description is a bit brief, would you mind updating it with more information? Thanks.

[raghavnarang]

@raghavnarang The issue description is a bit brief, would you mind updating it with more information? Thanks.

@talldan Issue description updated

[talldan]

Thanks!

[JohnRDOrazio]

I created and tested successfully a patch that introduces this functionality. Now both top-level options and optgroups are supported. Here is the result:

EXAMPLE 1: GROUPED OPTIONS

createElement(SelectControl, {
	value: attributes.FOODPLATTER,
	label: 'Food platter',
	onChange: changeVersion,
	multiple: true,
	options: [ 
		{
			label: 'Fruits',
			value: [
				{ label: 'Apples', value: 'apple' },
				{ label: 'Pears', value: 'pear' },
				{ label: 'Bananas', value: 'banana' }
			]
		},
		{
			label: 'Vegetables',
			value: [
				{ label: 'Celery', value: 'celery' },
				{ label: 'Cucumber', value: 'cucumber' },
				{ label: 'Carrots', value: 'carrots' }
			]
		}
	],
})

EXAMPLE 2: GROUPED OPTIONS with TOP-LEVEL OPTIONS

createElement(SelectControl, {
	value: attributes.FOODPLATTER,
	label: 'Food platter',
	onChange: changeVersion,
	multiple: true,
	options: [ 
		{
			label: 'Fruits',
			value: [
				{ label: 'Apples', value: 'apple' },
				{ label: 'Pears', value: 'pear' },
				{ label: 'Bananas', value: 'banana' }
			]
		},
		{
			label: 'Cold cuts',
			value: 'coldcuts'
		},
		{
			label: 'Vegetables',
			value: [
				{ label: 'Celery', value: 'celery' },
				{ label: 'Cucumber', value: 'cucumber' },
				{ label: 'Carrots', value: 'carrots' }
			]
		}
	],
})

[skorasaurus]

This has been fixed in #29540 with an example at https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/select-control#development-guidelines

Please reopen and comment if this incorrect.