@wordpress/components 28.3.0 → 28.5.0

package/src/select-control/test/select-control.tsx

@@ -17,8 +17,8 @@ describe( 'SelectControl', () => {
 		expect( screen.queryByRole( 'combobox' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should not render its children', async () => {
-		const user = await userEvent.setup();
+	it( 'should render its children', async () => {
+		const user = userEvent.setup();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -46,8 +46,8 @@ describe( 'SelectControl', () => {
 		);
 	} );
 
-	it( 'should not render its options', async () => {
-		const user = await userEvent.setup();
+	it( 'should render its options', async () => {
+		const user = userEvent.setup();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -81,4 +81,148 @@ describe( 'SelectControl', () => {
 			expect.anything()
 		);
 	} );
+
+	it( 'should pass through options props', () => {
+		render(
+			<SelectControl
+				label="Select"
+				options={ [
+					{
+						value: 'value',
+						label: 'label',
+						'aria-label': 'Aria label',
+					},
+				] }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'option', { name: 'Aria label' } )
+		).toBeInTheDocument();
+	} );
+
+	/* eslint-disable jest/expect-expect */
+	describe( 'static typing', () => {
+		describe( 'single', () => {
+			it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => {
+				const onChange: ( value: 'foo' | 'bar' ) => void = () => {};
+
+				<SelectControl
+					value="narrow"
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					// @ts-expect-error onChange type is not compatible with inferred value type
+					onChange={ onChange }
+				/>;
+
+				<SelectControl
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value="string"
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					// @ts-expect-error "string" is not "narrow" or "value"
+					onChange={ ( value ) => value === 'string' }
+				/>;
+			} );
+
+			it( 'should accept an explicit type argument', () => {
+				<SelectControl< 'narrow' | 'value' >
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value="string"
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							// @ts-expect-error "string" is not "narrow" or "value"
+							value: 'string',
+							label: 'String',
+						},
+					] }
+				/>;
+			} );
+		} );
+
+		describe( 'multiple', () => {
+			it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => {
+				const onChange: (
+					value: ( 'foo' | 'bar' )[]
+				) => void = () => {};
+
+				<SelectControl
+					multiple
+					value={ [ 'narrow' ] }
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					// @ts-expect-error onChange type is not compatible with inferred value type
+					onChange={ onChange }
+				/>;
+
+				<SelectControl
+					multiple
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value={ [ 'string' ] }
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					onChange={ ( value ) =>
+						// @ts-expect-error "string" is not "narrow" or "value"
+						value.forEach( ( v ) => v === 'string' )
+					}
+				/>;
+			} );
+
+			it( 'should accept an explicit type argument', () => {
+				<SelectControl< 'narrow' | 'value' >
+					multiple
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value={ [ 'string' ] }
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							// @ts-expect-error "string" is not "narrow" or "value"
+							value: 'string',
+							label: 'String',
+						},
+					] }
+				/>;
+			} );
+		} );
+	} );
+	/* eslint-enable jest/expect-expect */
 } );

package/src/select-control/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
 import type { InputBaseProps } from '../input-control/types';
 import type { BaseControlProps } from '../base-control/types';
 
-type SelectControlBaseProps = Pick<
+type SelectControlBaseProps< V extends string > = Pick<
 	InputBaseProps,
 	| '__next36pxDefaultSize'
 	| '__next40pxDefaultSize'
@@ -22,9 +22,12 @@ type SelectControlBaseProps = Pick<
 	| 'suffix'
 > &
 	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
-		onBlur?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-		onFocus?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-		options?: {
+		/**
+		 * An array of option property objects to be rendered,
+		 * each with a `label` and `value` property, as well as any other
+		 * `<option>` attributes.
+		 */
+		options?: readonly ( {
 			/**
 			 * The label to be shown to the user.
 			 */
@@ -33,72 +36,80 @@ type SelectControlBaseProps = Pick<
 			 * The internal value used to choose the selected value.
 			 * This is also the value passed to `onChange` when the option is selected.
 			 */
-			value: string;
-			id?: string;
-			/**
-			 * Whether or not the option should have the disabled attribute.
-			 *
-			 * @default false
-			 */
-			disabled?: boolean;
-			/**
-			 * Whether or not the option should be hidden.
-			 *
-			 * @default false
-			 */
-			hidden?: boolean;
-		}[];
+			value: V;
+		} & Omit<
+			React.OptionHTMLAttributes< HTMLOptionElement >,
+			'label' | 'value'
+		> )[];
 		/**
 		 * As an alternative to the `options` prop, `optgroup`s and `options` can be
 		 * passed in as `children` for more customizability.
 		 */
 		children?: ReactNode;
+		/**
+		 * The style variant of the control.
+		 *
+		 * @default 'default'
+		 */
+		variant?: 'default' | 'minimal';
 	};
 
-export type SelectControlSingleSelectionProps = SelectControlBaseProps & {
-	/**
-	 * If this property is added, multiple values can be selected. The `value` passed should be an array.
-	 *
-	 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
-	 *
-	 * @default false
-	 */
-	multiple?: false;
-	value?: string;
-	/**
-	 * A function that receives the value of the new option that is being selected as input.
-	 *
-	 * If `multiple` is `true`, the value received is an array of the selected value.
-	 * Otherwise, the value received is a single value with the new selected value.
-	 */
-	onChange?: (
-		value: string,
-		extra?: { event?: ChangeEvent< HTMLSelectElement > }
-	) => void;
-};
+export type SelectControlSingleSelectionProps< V extends string = string > =
+	SelectControlBaseProps< V > & {
+		/**
+		 * If this property is added, multiple values can be selected. The `value` passed should be an array.
+		 *
+		 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
+		 *
+		 * @default false
+		 */
+		multiple?: false;
+		/**
+		 * The value of the selected option.
+		 *
+		 * If `multiple` is true, the `value` should be an array with the values of the selected options.
+		 */
+		value?: NoInfer< V >;
+		/**
+		 * A function that receives the value of the new option that is being selected as input.
+		 *
+		 * If `multiple` is `true`, the value received is an array of the selected value.
+		 * Otherwise, the value received is a single value with the new selected value.
+		 */
+		onChange?: (
+			value: NoInfer< V >,
+			extra?: { event?: ChangeEvent< HTMLSelectElement > }
+		) => void;
+	};
 
-export type SelectControlMultipleSelectionProps = SelectControlBaseProps & {
-	/**
-	 * If this property is added, multiple values can be selected. The `value` passed should be an array.
-	 *
-	 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
-	 *
-	 * @default false
-	 */
-	multiple: true;
-	value?: string[];
-	/**
-	 * A function that receives the value of the new option that is being selected as input.
-	 *
-	 * If `multiple` is `true`, the value received is an array of the selected value.
-	 * Otherwise, the value received is a single value with the new selected value.
-	 */
-	onChange?: (
-		value: string[],
-		extra?: { event?: ChangeEvent< HTMLSelectElement > }
-	) => void;
-};
+export type SelectControlMultipleSelectionProps< V extends string > =
+	SelectControlBaseProps< V > & {
+		/**
+		 * If this property is added, multiple values can be selected. The `value` passed should be an array.
+		 *
+		 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
+		 *
+		 * @default false
+		 */
+		multiple: true;
+		/**
+		 * The value of the selected option.
+		 *
+		 * If `multiple` is true, the `value` should be an array with the values of the selected options.
+		 */
+		value?: NoInfer< V >[];
+		/**
+		 * A function that receives the value of the new option that is being selected as input.
+		 *
+		 * If `multiple` is `true`, the value received is an array of the selected value.
+		 * Otherwise, the value received is a single value with the new selected value.
+		 */
+		onChange?: (
+			value: NoInfer< V >[],
+			extra?: { event?: ChangeEvent< HTMLSelectElement > }
+		) => void;
+	};
 
-export type SelectControlProps =
-	| SelectControlSingleSelectionProps
-	| SelectControlMultipleSelectionProps;
+export type SelectControlProps< V extends string = string > =
+	| SelectControlSingleSelectionProps< V >
+	| SelectControlMultipleSelectionProps< V >;

package/src/style.scss

@@ -19,7 +19,6 @@
 @import "./combobox-control/style.scss";
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
-@import "./custom-select-control/style.scss";
 @import "./dimension-control/style.scss";
 @import "./draggable/style.scss";
 @import "./drop-zone/style.scss";
@@ -50,6 +49,7 @@
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";
+@import "./toggle-control/style.scss";
 @import "./toolbar/toolbar/style.scss";
 @import "./toolbar/toolbar-button/style.scss";
 @import "./toolbar/toolbar-group/style.scss";

package/src/tab-panel/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, hover, click, sleep } from '@ariakit/test';
+import { press, hover, click } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -155,7 +155,6 @@ describe.each( [
 			// Tab to focus the tablist. Make sure alpha is focused, and that the
 			// corresponding tooltip is shown.
 			expect( screen.queryByText( 'Alpha' ) ).not.toBeInTheDocument();
-			await sleep();
 			await press.Tab();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 			expect( screen.getByText( 'Alpha' ) ).toBeInTheDocument();
@@ -627,7 +626,6 @@ describe.each( [
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -665,7 +663,6 @@ describe.each( [
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -703,7 +700,6 @@ describe.each( [
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -799,7 +795,6 @@ describe.each( [
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
@@ -841,7 +836,6 @@ describe.each( [
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
@@ -849,7 +843,6 @@ describe.each( [
 
 			// Because all other tabs should have `tabindex=-1`, pressing Tab
 			// should NOT move the focus to the next tab, which is Beta.
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Beta' } )

package/src/tabs/styles.ts

@@ -75,13 +75,15 @@ export const Tab = styled( Ariakit.Tab )`
 		margin-left: 0;
 		font-weight: 500;
 		text-align: inherit;
+		hyphens: auto;
+		color: ${ COLORS.theme.foreground };
 
 		&[aria-disabled='true'] {
 			cursor: default;
-			opacity: 0.3;
+			color: ${ COLORS.ui.textDisabled };
 		}
 
-		&:hover {
+		&:not( [aria-disabled='true'] ):hover {
 			color: ${ COLORS.theme.accent };
 		}
 
@@ -119,6 +121,12 @@ export const Tab = styled( Ariakit.Tab )`
 			opacity: 1;
 		}
 	}
+
+	[aria-orientation='vertical'] & {
+		min-height: ${ space(
+			10
+		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
+	}
 `;
 
 export const TabPanel = styled( Ariakit.TabPanel )`