@wordpress/components 22.1.0 → 23.0.0

package/src/button/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -76,20 +76,20 @@ describe( 'Button', () => {
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-pressed' );
 		} );
 
-		it( 'should render a button element with has-text when children are passed', async () => {
+		it( 'should render a button element with has-text when children are passed', () => {
 			render( <Button icon={ plusCircle }>Children</Button> );
-			await screen.getByRole( 'button' ).focus();
+			act( () => screen.getByRole( 'button' ).focus() );
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
 		} );
 
-		it( 'should render a button element without has-text when children are not passed', async () => {
+		it( 'should render a button element without has-text when children are not passed', () => {
 			render( <Button icon={ plusCircle }></Button> );
 			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
 				'has-text'
 			);
 		} );
 
-		it( 'should render a button element without has-text when children are empty fragment', async () => {
+		it( 'should render a button element without has-text when children are empty fragment', () => {
 			render(
 				<Button icon={ plusCircle }>
 					<></>
@@ -100,7 +100,7 @@ describe( 'Button', () => {
 			);
 		} );
 
-		it( 'should render a button element without has-text when a button wrapped in Tooltip', async () => {
+		it( 'should render a button element without has-text when a button wrapped in Tooltip', () => {
 			render(
 				<Tooltip text="Help text">
 					<Button icon={ plusCircle } />
@@ -184,10 +184,15 @@ describe( 'Button', () => {
 
 		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => {
 			render( <Button icon={ plusCircle } label="WordPress" /> );
+			// Wait for the `floating-ui` effects in `Tooltip`/`Popover` to finish running
+			// See also: https://floating-ui.com/docs/react-dom#testing
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			await act( () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
@@ -218,15 +223,18 @@ describe( 'Button', () => {
 					icon={ plusCircle }
 				/>
 			);
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'Label' } ).focus();
+			await act( async () => {
+				screen.getByRole( 'button', { name: 'Label' } ).focus();
+			} );
 
 			expect( screen.getByText( 'Label' ) ).toBeVisible();
 		} );
 
-		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', () => {
+		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', async () => {
 			render(
 				<Button
 					label="Label"
@@ -237,6 +245,7 @@ describe( 'Button', () => {
 					Children
 				</Button>
 			);
+			await act( () => Promise.resolve() );
 
 			expect(
 				screen.getByRole( 'button', {
@@ -245,7 +254,7 @@ describe( 'Button', () => {
 			).toBeVisible();
 		} );
 
-		it( 'should allow tooltip disable', async () => {
+		it( 'should allow tooltip disable', () => {
 			render(
 				<Button
 					icon={ plusCircle }
@@ -259,7 +268,7 @@ describe( 'Button', () => {
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await button.focus();
+			act( () => button.focus() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
@@ -268,15 +277,18 @@ describe( 'Button', () => {
 			render(
 				<Button icon={ plusCircle } label="WordPress" children={ [] } />
 			);
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			await act( async () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
 
-		it( 'should not show the tooltip when icon and children defined', async () => {
+		it( 'should not show the tooltip when icon and children defined', () => {
 			render(
 				<Button icon={ plusCircle } label="WordPress">
 					Children
@@ -285,7 +297,9 @@ describe( 'Button', () => {
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			act( () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
@@ -296,10 +310,13 @@ describe( 'Button', () => {
 					Children
 				</Button>
 			);
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			await act( async () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );

package/src/card/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -38,27 +38,39 @@ describe( 'Card', () => {
 		} );
 
 		it( 'should remove borders when the isBorderless prop is true', () => {
-			const { rerender, container } = render(
-				<Card>Code is Poetry</Card>
+			const { rerender } = render(
+				<Card data-testid="card-wrapper">Code is Poetry</Card>
 			);
-			expect( container.firstChild ).not.toHaveStyle(
+
+			expect( screen.getByTestId( 'card-wrapper' ) ).not.toHaveStyle(
 				'box-shadow: none'
 			);
 
-			rerender( <Card isBorderless={ true }>Code is Poetry</Card> );
-			expect( container.firstChild ).toHaveStyle( 'box-shadow: none' );
+			rerender(
+				<Card data-testid="card-wrapper" isBorderless>
+					Code is Poetry
+				</Card>
+			);
+
+			expect( screen.getByTestId( 'card-wrapper' ) ).toHaveStyle(
+				'box-shadow: none'
+			);
 		} );
 
 		it( 'should add rounded border when the isRounded prop is true', () => {
-			const { container: containerRounded } = render(
-				<Card isRounded={ true }>Code is Poetry</Card>
+			render(
+				<Card data-testid="card-rounded" isRounded>
+					Code is Poetry
+				</Card>
 			);
-			const { container: containerSquared } = render(
-				<Card isRounded={ false }>Code is Poetry</Card>
+			render(
+				<Card data-testid="card-squared" isRounded={ false }>
+					Code is Poetry
+				</Card>
 			);
 			expect(
-				containerRounded.firstElementChild
-			).toMatchStyleDiffSnapshot( containerSquared.firstElementChild );
+				screen.getByTestId( 'card-rounded' )
+			).toMatchStyleDiffSnapshot( screen.getByTestId( 'card-squared' ) );
 		} );
 
 		it( 'should show a box shadow when the elevation prop is greater than 0', () => {
@@ -94,7 +106,7 @@ describe( 'Card', () => {
 		it( 'should warn when the isElevated prop is passed', () => {
 			// `isElevated` is automatically converted to `elevation="2"`
 			const { container } = render(
-				<Card isElevated={ true }>Code is Poetry</Card>
+				<Card isElevated>Code is Poetry</Card>
 			);
 			expect( container ).toMatchSnapshot();
 
@@ -103,7 +115,7 @@ describe( 'Card', () => {
 
 		it( 'should pass the isBorderless and isSize props from its context to its sub-components', () => {
 			const { container: withoutBorderLarge } = render(
-				<Card isBorderless={ true } size="large">
+				<Card isBorderless size="large">
 					<CardHeader>Header</CardHeader>
 					<CardBody>Body</CardBody>
 					<CardFooter>Footer</CardFooter>
@@ -121,14 +133,14 @@ describe( 'Card', () => {
 
 		it( 'should get the isBorderless and isSize props (passed from its context) overriddenwhen the same props is specified directly on the component', () => {
 			const { container: withoutBorder } = render(
-				<Card isBorderless={ true } size="large">
+				<Card isBorderless size="large">
 					<CardHeader>Header</CardHeader>
 					<CardBody>Body</CardBody>
 					<CardFooter>Footer</CardFooter>
 				</Card>
 			);
 			const { container: withBorder } = render(
-				<Card isBorderless={ true } size="large">
+				<Card isBorderless size="large">
 					<CardHeader isBorderless={ false } size="small">
 						Header
 					</CardHeader>
@@ -165,7 +177,7 @@ describe( 'Card', () => {
 			it( 'should render with a darker background color when isShady is true', () => {
 				const { container } = render( <CardHeader>Header</CardHeader> );
 				const { container: containerShady } = render(
-					<CardHeader isShady={ true }>Header</CardHeader>
+					<CardHeader isShady>Header</CardHeader>
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
@@ -175,7 +187,7 @@ describe( 'Card', () => {
 			it( 'should render with a darker background color when isShady is true', () => {
 				const { container } = render( <CardFooter>Footer</CardFooter> );
 				const { container: containerShady } = render(
-					<CardFooter isShady={ true }>Footer</CardFooter>
+					<CardFooter isShady>Footer</CardFooter>
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
@@ -193,14 +205,14 @@ describe( 'Card', () => {
 			it( 'should render with a darker background color when isShady is true', () => {
 				const { container } = render( <CardBody>Body</CardBody> );
 				const { container: containerShady } = render(
-					<CardBody isShady={ true }>Body</CardBody>
+					<CardBody isShady>Body</CardBody>
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
 
 			it( 'should allow scrolling content with the scrollable prop is true', () => {
 				const { container: containerScrollable } = render(
-					<CardBody isScrollable={ true }>Body</CardBody>
+					<CardBody isScrollable>Body</CardBody>
 				);
 				const { container } = render( <CardBody>Body</CardBody> );
 				expect( container ).toMatchDiffSnapshot( containerScrollable );

package/src/circular-option-picker/style.scss

@@ -26,6 +26,7 @@ $color-palette-circle-spacing: 12px;
 	vertical-align: top;
 	transform: scale(1);
 	transition: 100ms transform ease;
+	will-change: transform;
 	@include reduce-motion("transition");
 
 	&:hover {

package/src/color-palette/index.tsx

@@ -70,7 +70,7 @@ function SinglePalette( {
 					}
 					style={ { backgroundColor: color, color } }
 					onClick={
-						isSelected ? clearColor : () => onChange( color )
+						isSelected ? clearColor : () => onChange( color, index )
 					}
 					aria-label={
 						name
@@ -84,10 +84,6 @@ function SinglePalette( {
 		} );
 	}, [ colors, value, onChange, clearColor ] );
 
-	if ( colors.length === 0 ) {
-		return null;
-	}
-
 	return (
 		<CircularOptionPicker
 			className={ className }
@@ -118,7 +114,9 @@ function MultiplePalettes( {
 						<SinglePalette
 							clearColor={ clearColor }
 							colors={ colorPalette }
-							onChange={ onChange }
+							onChange={ ( newColor ) =>
+								onChange( newColor, index )
+							}
 							value={ value }
 							actions={
 								colors.length === index + 1 ? actions : null

package/src/color-palette/stories/index.tsx

@@ -15,7 +15,6 @@ import { useState } from '@wordpress/element';
 import ColorPalette from '..';
 import Popover from '../../popover';
 import { Provider as SlotFillProvider } from '../../slot-fill';
-import type { ColorObject, PaletteObject } from '../types';
 
 const meta: ComponentMeta< typeof ColorPalette > = {
 	title: 'Components/ColorPalette',
@@ -43,10 +42,7 @@ const Template: ComponentStory< typeof ColorPalette > = ( {
 	onChange,
 	...args
 } ) => {
-	const firstColor =
-		( args.colors as ColorObject[] )[ 0 ].color ||
-		( args.colors as PaletteObject[] )[ 0 ].colors[ 0 ].color;
-	const [ color, setColor ] = useState< string | undefined >( firstColor );
+	const [ color, setColor ] = useState< string | undefined >();
 
 	return (
 		<SlotFillProvider>

package/src/color-palette/test/__snapshots__/index.tsx.snap

@@ -63,10 +63,10 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
           class="components-circular-option-picker__option-wrapper"
         >
           <button
-            aria-label="Color: white"
+            aria-label="Color: green"
             aria-pressed="false"
             class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);"
+            style="background-color: rgb(0, 255, 0); color: rgb(0, 255, 0);"
             type="button"
           />
         </div>
@@ -235,10 +235,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           class="components-circular-option-picker__option-wrapper"
         >
           <button
-            aria-label="Color: white"
+            aria-label="Color: green"
             aria-pressed="false"
             class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);"
+            style="background-color: rgb(0, 255, 0); color: rgb(0, 255, 0);"
             type="button"
           />
         </div>

package/src/color-palette/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -9,24 +9,25 @@ import userEvent from '@testing-library/user-event';
  */
 import ColorPalette from '..';
 
+const EXAMPLE_COLORS = [
+	{ name: 'red', color: '#f00' },
+	{ name: 'green', color: '#0f0' },
+	{ name: 'blue', color: '#00f' },
+];
+const INITIAL_COLOR = EXAMPLE_COLORS[ 0 ].color;
+
+function getWrappingPopoverElement( element: HTMLElement ) {
+	return element.closest( '.components-popover' );
+}
+
 describe( 'ColorPalette', () => {
-	const colors = [
-		{ name: 'red', color: '#f00' },
-		{ name: 'white', color: '#fff' },
-		{ name: 'blue', color: '#00f' },
-	];
-	const currentColor = '#f00';
-	const onChange = jest.fn();
-
-	beforeEach( () => {
-		onChange.mockClear();
-	} );
+	it( 'should render a dynamic toolbar of colors', () => {
+		const onChange = jest.fn();
 
-	test( 'should render a dynamic toolbar of colors', () => {
 		const { container } = render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -34,11 +35,13 @@ describe( 'ColorPalette', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	test( 'should render three color button options', () => {
+	it( 'should render three color button options', () => {
+		const onChange = jest.fn();
+
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -48,15 +51,16 @@ describe( 'ColorPalette', () => {
 		).toHaveLength( 3 );
 	} );
 
-	test( 'should call onClick on an active button with undefined', async () => {
+	it( 'should call onClick on an active button with undefined', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -69,19 +73,22 @@ describe( 'ColorPalette', () => {
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should call onClick on an inactive button', async () => {
+	it( 'should call onClick on an inactive button', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
 
+		// Click the first unpressed button
+		// (i.e. a button representing a color that is not the current color)
 		await user.click(
 			screen.getAllByRole( 'button', {
 				name: /^Color:/,
@@ -89,19 +96,21 @@ describe( 'ColorPalette', () => {
 			} )[ 0 ]
 		);
 
+		// Expect the green color to have been selected
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
-		expect( onChange ).toHaveBeenCalledWith( '#fff' );
+		expect( onChange ).toHaveBeenCalledWith( EXAMPLE_COLORS[ 1 ].color, 1 );
 	} );
 
-	test( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
+	it( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -112,12 +121,14 @@ describe( 'ColorPalette', () => {
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should allow disabling custom color picker', () => {
+	it( 'should allow disabling custom color picker', () => {
+		const onChange = jest.fn();
+
 		const { container } = render(
 			<ColorPalette
-				colors={ colors }
+				colors={ EXAMPLE_COLORS }
 				disableCustomColors
-				value={ currentColor }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -125,15 +136,16 @@ describe( 'ColorPalette', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	test( 'should render dropdown and its content', async () => {
+	it( 'should render dropdown and its content', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -153,12 +165,48 @@ describe( 'ColorPalette', () => {
 		expect( dropdownButton ).toBeVisible();
 
 		expect(
-			within( dropdownButton ).getByText( colors[ 0 ].name )
+			within( dropdownButton ).getByText( EXAMPLE_COLORS[ 0 ].name )
 		).toBeVisible();
+
 		expect(
 			within( dropdownButton ).getByText(
-				colors[ 0 ].color.replace( '#', '' )
+				EXAMPLE_COLORS[ 0 ].color.replace( '#', '' )
 			)
 		).toBeVisible();
+
+		// Check that the popover with custom color input has appeared.
+		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
+
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( dropdownColorInput )
+			).toBePositionedPopover()
+		);
+	} );
+
+	it( 'should show the clear button by default', () => {
+		const onChange = jest.fn();
+
+		render(
+			<ColorPalette
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Clear' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should show the clear button even when `colors` is an empty array', () => {
+		const onChange = jest.fn();
+
+		render( <ColorPalette colors={ [] } onChange={ onChange } /> );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Clear' } )
+		).toBeInTheDocument();
 	} );
 } );

package/src/color-palette/types.ts

@@ -24,7 +24,7 @@ type PaletteProps = {
 	/**
 	 * Callback called when a color is selected.
 	 */
-	onChange: ( newColor?: string ) => void;
+	onChange: ( newColor?: string, index?: number ) => void;
 	value?: string;
 	actions?: ReactNode;
 };

package/src/color-picker/README.md

@@ -6,6 +6,7 @@
 
 ```jsx
 import { ColorPicker } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 function Example() {
 	const [color, setColor] = useState();

package/src/color-picker/input-with-slider.tsx

@@ -60,6 +60,7 @@ export const InputWithSlider = ( {
 				size="__unstable-large"
 			/>
 			<RangeControl
+				__nextHasNoMarginBottom
 				label={ label }
 				hideLabelFromVision
 				min={ min }

package/src/color-picker/styles.ts

@@ -38,10 +38,6 @@ export const SelectControl = styled( InnerSelectControl )`
 export const RangeControl = styled( InnerRangeControl )`
 	flex: 1;
 	margin-right: ${ space( 2 ) };
-
-	${ StyledField } {
-		margin-bottom: 0;
-	}
 `;
 
 // Make the Hue circle picker not go out of the bar.

package/src/confirm-dialog/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. "Experimental" means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md] and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
+`ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md) and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
 
 The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key. It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay).
 
@@ -44,6 +44,7 @@ Let the parent component control when the dialog is open/closed. It's activated
 
 ```jsx
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 function Example() {
 	const [ isOpen, setIsOpen ] = useState( true );
@@ -72,7 +73,7 @@ function Example() {
 
 ### Unsupported: Multiple instances
 
-Multiple `ConfirmDialog's is an edge case that's currently not officially supported by this component. At the moment, new instances will end up closing the last instance due to the way the `Modal` is implemented.
+Multiple `ConfirmDialog`s is an edge case that's currently not officially supported by this component. At the moment, new instances will end up closing the last instance due to the way the `Modal` is implemented.
 
 ## Custom Types
 

package/src/custom-select-control/README.md

@@ -145,6 +145,20 @@ A handler for onMouseOut events.
 -   Type: `Function`
 -   Required: No
 
+#### onFocus
+
+A handler for onFocus events.
+
+-   Type: `Function`
+-   Required: No
+
+#### onBlur
+
+A handler for onBlur events.
+
+-   Type: `Function`
+-   Required: No
+
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.