@wordpress/components 26.0.2 → 27.0.0

package/src/custom-select-control-v2/types.ts

@@ -3,30 +3,23 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
+import type { FocusEventHandler, MouseEventHandler } from 'react';
 
-export type CustomSelectContext =
-	| {
-			/**
-			 * The store object returned by Ariakit's `useSelectStore` hook.
-			 */
-			store: Ariakit.SelectStore;
-	  }
-	| undefined;
-
-export type CustomSelectProps = {
+export type CustomSelectStore = {
 	/**
-	 * The child elements. This should be composed of CustomSelectItem components.
+	 * The store object returned by Ariakit's `useSelectStore` hook.
 	 */
-	children: React.ReactNode;
+	store: Ariakit.SelectStore;
+};
+
+export type CustomSelectContext = CustomSelectStore | undefined;
+
+export type CustomSelectButtonProps = {
 	/**
-	 * An optional default value for the control. If left `undefined`, the first
-	 * non-disabled item will be used.
+	 * An optional default value for the control when used in uncontrolled mode.
+	 * If left `undefined`, the first non-disabled item will be used.
 	 */
 	defaultValue?: string | string[];
-	/**
-	 * Label for the control.
-	 */
-	label: string;
 	/**
 	 * A function that receives the new value of the input.
 	 */
@@ -42,13 +35,148 @@ export type CustomSelectProps = {
 	 *
 	 * @default 'default'
 	 */
-	size?: 'default' | 'small';
+	size?: 'compact' | 'default' | 'small';
 	/**
-	 * Can be used to externally control the value of the control.
+	 * The value of the control when used in uncontrolled mode.
 	 */
 	value?: string | string[];
 };
 
+export type _CustomSelectProps = {
+	/**
+	 * The child elements. This should be composed of `CustomSelectItem` components.
+	 */
+	children: React.ReactNode;
+	/**
+	 * Used to visually hide the label. It will always be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * Accessible label for the control.
+	 */
+	label: string;
+};
+
+export type CustomSelectProps = _CustomSelectProps &
+	Omit< CustomSelectButtonProps, 'size' > & {
+		/**
+		 * The size of the control.
+		 *
+		 * @default 'default'
+		 */
+		size?: Exclude< CustomSelectButtonProps[ 'size' ], 'small' >;
+	};
+
+/**
+ * The legacy object structure for the options array.
+ */
+type LegacyOption = {
+	key: string;
+	name: string;
+	style?: React.CSSProperties;
+	className?: string;
+	__experimentalHint?: string;
+};
+
+/**
+ * The legacy object returned from the onChange event.
+ */
+type LegacyOnChangeObject = {
+	highlightedIndex?: number;
+	inputValue?: string;
+	isOpen?: boolean;
+	type?: string;
+	selectedItem: LegacyOption;
+};
+
+export type LegacyCustomSelectProps = {
+	children?: never;
+	/**
+	 * Optional classname for the component.
+	 */
+	className?: string;
+	/**
+	 * Used to visually hide the label. It will always be visible to screen readers.
+	 *
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * Pass in a description that will be shown to screen readers associated with the
+	 * select trigger button. If no value is passed, the text "Currently selected:
+	 * selectedItem.name" will be used fully translated.
+	 */
+	describedBy?: string;
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * Function called with the control's internal state changes. The `selectedItem`
+	 * property contains the next selected item.
+	 */
+	onChange?: ( newValue: LegacyOnChangeObject ) => void;
+	/**
+	 * A handler for `onBlur` events.
+	 *
+	 * @ignore
+	 */
+	onBlur?: FocusEventHandler< HTMLButtonElement >;
+	/**
+	 * A handler for `onFocus` events.
+	 *
+	 * @ignore
+	 */
+	onFocus?: FocusEventHandler< HTMLButtonElement >;
+	/**
+	 * A handler for `onMouseOver` events.
+	 *
+	 * @ignore
+	 */
+	onMouseOut?: MouseEventHandler< HTMLButtonElement >;
+	/**
+	 * A handler for `onMouseOut` events.
+	 *
+	 * @ignore
+	 */
+	onMouseOver?: MouseEventHandler< HTMLButtonElement >;
+	/**
+	 * The options that can be chosen from.
+	 */
+	options: Array< LegacyOption >;
+	/**
+	 * The size of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'small' | '__unstable-large';
+	/**
+	 * Can be used to externally control the value of the control.
+	 */
+	value?: LegacyOption;
+	/**
+	 * Legacy way to add additional text to the right of each option.
+	 *
+	 * @default false
+	 */
+	__experimentalShowSelectedHint?: boolean;
+	/**
+	 * Opt-in prop for an unconstrained width style which became the default in
+	 * WordPress 6.5. The prop is no longer needed and can be safely removed.
+	 *
+	 * @deprecated
+	 * @ignore
+	 */
+	__nextUnconstrainedWidth?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
+};
+
 export type CustomSelectItemProps = {
 	/**
 	 * The value of the select item. This will be used as the children if

package/src/dropdown-menu-v2/stories/index.story.tsx

@@ -56,6 +56,7 @@ const meta: Meta< typeof DropdownMenu > = {
 		children: { control: { type: null } },
 		trigger: { control: { type: null } },
 	},
+	tags: [ 'status-private' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		badges: [ 'private' ],

package/src/dropdown-menu-v2/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, hover, type } from '@ariakit/test';
+import { press, click, hover, sleep, type } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -123,6 +123,7 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
+			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -153,6 +154,7 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
+			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -908,6 +910,7 @@ describe( 'DropdownMenu', () => {
 
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the DropdownMenu to close.
+			await sleep();
 			await press.Tab();
 			expect( outerButton ).toBeInTheDocument();
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();

package/src/font-size-picker/font-size-picker-select.tsx

@@ -69,7 +69,6 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 	return (
 		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__nextUnconstrainedWidth
 			className="components-font-size-picker__select"
 			label={ __( 'Font size' ) }
 			hideLabelFromVision

package/src/form-token-field/index.tsx

@@ -28,6 +28,7 @@ import {
 } from '../base-control/styles/base-control-styles';
 import { Spacer } from '../spacer';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
 const identity = ( value: string ) => value;
 
@@ -194,15 +195,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	function onKeyDown( event: KeyboardEvent ) {
 		let preventDefault = false;
 
-		if (
-			event.defaultPrevented ||
-			// Ignore keydowns from IMEs
-			event.nativeEvent.isComposing ||
-			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
-			// is `isComposing=false`, even though it's technically still part of the composition.
-			// These can only be detected by keyCode.
-			event.keyCode === 229
-		) {
+		if ( event.defaultPrevented ) {
 			return;
 		}
 		switch ( event.key ) {
@@ -689,7 +682,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 	if ( ! disabled ) {
 		tokenFieldProps = Object.assign( {}, tokenFieldProps, {
-			onKeyDown,
+			onKeyDown: withIgnoreIMEEvents( onKeyDown ),
 			onKeyPress,
 			onFocus: onFocusHandler,
 		} );

package/src/form-token-field/suggestions-list.tsx

@@ -1,14 +1,12 @@
 /**
  * External dependencies
  */
-import scrollView from 'dom-scroll-into-view';
 import classnames from 'classnames';
 import type { MouseEventHandler, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -32,8 +30,6 @@ export function SuggestionsList< T extends string | { value: string } >( {
 	instanceId,
 	__experimentalRenderItem,
 }: SuggestionsListProps< T > ) {
-	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
-
 	const listRef = useRefEffect< HTMLUListElement >(
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
@@ -44,16 +40,10 @@ export function SuggestionsList< T extends string | { value: string } >( {
 				scrollIntoView &&
 				listNode.children[ selectedIndex ]
 			) {
-				setScrollingIntoView( true );
-				scrollView(
-					listNode.children[ selectedIndex ] as HTMLLIElement,
-					listNode,
-					{
-						onlyScrollIfNeeded: true,
-					}
-				);
-				rafId = requestAnimationFrame( () => {
-					setScrollingIntoView( false );
+				listNode.children[ selectedIndex ].scrollIntoView( {
+					behavior: 'instant',
+					block: 'nearest',
+					inline: 'nearest',
 				} );
 			}
 
@@ -68,9 +58,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 
 	const handleHover = ( suggestion: T ) => {
 		return () => {
-			if ( ! scrollingIntoView ) {
-				onHover?.( suggestion );
-			}
+			onHover?.( suggestion );
 		};
 	};
 

package/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js

@@ -45,7 +45,7 @@ export default function useScrollToSection(
 			if (
 				! scrollViewRef.current ||
 				! scrollEnabled ||
-				! scrollViewMeasurements
+				! scrollViewMeasurements.current
 			) {
 				return;
 			}

package/src/modal/index.tsx

@@ -41,6 +41,7 @@ import * as ariaHelper from './aria-helper';
 import Button from '../button';
 import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
 const ModalContext = createContext<
@@ -196,17 +197,6 @@ function UnforwardedModal(
 	}, [ isContentScrollable, childrenContainerRef ] );
 
 	function handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {
-		if (
-			// Ignore keydowns from IMEs
-			event.nativeEvent.isComposing ||
-			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
-			// is `isComposing=false`, even though it's technically still part of the composition.
-			// These can only be detected by keyCode.
-			event.keyCode === 229
-		) {
-			return;
-		}
-
 		if (
 			shouldCloseOnEsc &&
 			( event.code === 'Escape' || event.key === 'Escape' ) &&
@@ -265,7 +255,7 @@ function UnforwardedModal(
 				'components-modal__screen-overlay',
 				overlayClassName
 			) }
-			onKeyDown={ handleEscapeKeyDown }
+			onKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }
 			{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }
 		>
 			<StyleProvider document={ document }>

package/src/modal/style.scss

@@ -15,6 +15,7 @@
 
 // The modal window element.
 .components-modal__frame {
+	@include reset;
 	// Use the entire viewport on smaller screens.
 	margin: $grid-unit-50 0 0 0;
 	width: 100%;

package/src/progress-bar/stories/index.story.tsx

@@ -14,6 +14,7 @@ const meta: Meta< typeof ProgressBar > = {
 	argTypes: {
 		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
 	},
+	tags: [ 'status-private' ],
 	parameters: {
 		badges: [ 'private' ],
 		controls: {

package/src/progress-bar/styles.ts

@@ -30,7 +30,7 @@ export const Track = styled.div`
 	/* Text color at 10% opacity */
 	background-color: color-mix(
 		in srgb,
-		var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ),
+		${ COLORS.theme.foreground },
 		transparent 90%
 	);
 	border-radius: ${ CONFIG.radiusBlockUi };
@@ -52,7 +52,7 @@ export const Indicator = styled.div< {
 	/* Text color at 90% opacity */
 	background-color: color-mix(
 		in srgb,
-		var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ),
+		${ COLORS.theme.foreground },
 		transparent 10%
 	);
 

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 } from '@ariakit/test';
+import { press, hover, click, sleep } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -155,6 +155,7 @@ 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();
@@ -626,6 +627,7 @@ 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();
 
@@ -663,6 +665,7 @@ 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();
 
@@ -700,6 +703,7 @@ 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();
 
@@ -795,6 +799,7 @@ 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 );
@@ -836,6 +841,7 @@ 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' } )
@@ -843,6 +849,7 @@ 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/stories/index.story.tsx

@@ -28,6 +28,7 @@ const meta: Meta< typeof Tabs > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Tabs.TabPanel': Tabs.TabPanel,
 	},
+	tags: [ 'status-private' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		badges: [ 'private' ],

package/src/tabs/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, click } from '@ariakit/test';
+import { press, click, sleep } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -194,12 +194,14 @@ describe( 'Tabs', () => {
 
 			// 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' } )
 			).toHaveFocus();
 
 			// By default the tabpanel should receive focus
+			await sleep();
 			await press.Tab();
 			expect( selectedTabPanel ).toHaveFocus();
 		} );
@@ -229,12 +231,14 @@ describe( 'Tabs', () => {
 
 			// 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' } )
 			).toHaveFocus();
 			// Because the alpha tabpanel is set to `focusable: false`, pressing
 			// the Tab key should focus the button, not the tabpanel
+			await sleep();
 			await press.Tab();
 			expect( alphaButton ).toHaveFocus();
 		} );
@@ -305,6 +309,7 @@ describe( 'Tabs', () => {
 			// 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();
 
@@ -338,6 +343,7 @@ describe( 'Tabs', () => {
 			// 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();
 
@@ -373,6 +379,7 @@ describe( 'Tabs', () => {
 			// 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();
 
@@ -472,6 +479,7 @@ describe( 'Tabs', () => {
 			// 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();
 			// Confirm onSelect has not been re-called
@@ -514,6 +522,7 @@ describe( 'Tabs', () => {
 
 			// 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' } )
@@ -522,6 +531,7 @@ describe( 'Tabs', () => {
 			// Because all other tabs should have `tabindex=-1`, pressing Tab
 			// should NOT move the focus to the next tab, which is Beta.
 			// Instead, focus should go to the currently selected tabpanel (alpha).
+			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tabpanel', {
@@ -832,6 +842,7 @@ describe( 'Tabs', () => {
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 				// Move focus to the tablist, make sure alpha is focused.
+				await sleep();
 				await press.Tab();
 				expect(
 					screen.getByRole( 'tab', { name: 'Alpha' } )
@@ -1185,10 +1196,18 @@ describe( 'Tabs', () => {
 							/>
 						);
 
+						// Due to the timing of the component re-rendering, we
+						// need to force a delay to ensure the test doesn't run
+						// the upcoming assertions too early.
+						// see https://github.com/WordPress/gutenberg/pull/58629#issuecomment-1924875249
+						await sleep();
+
 						// Tab key should focus the currently selected tab, which is Beta.
 						await press.Tab();
-						expect( await getSelectedTab() ).toHaveTextContent(
-							'Beta'
+						await waitFor( async () =>
+							expect( await getSelectedTab() ).toHaveTextContent(
+								'Beta'
+							)
 						);
 						expect( await getSelectedTab() ).toHaveFocus();
 
@@ -1201,9 +1220,11 @@ describe( 'Tabs', () => {
 						);
 
 						// When the selected tab is changed, it should not automatically receive focus.
+
 						expect( await getSelectedTab() ).toHaveTextContent(
 							'Gamma'
 						);
+
 						expect(
 							screen.getByRole( 'tab', { name: 'Beta' } )
 						).toHaveFocus();
@@ -1228,7 +1249,9 @@ describe( 'Tabs', () => {
 						);
 
 						// Tab key should focus the currently selected tab, which is Beta.
+						await sleep();
 						await press.Tab();
+						await sleep();
 						await press.Tab();
 						expect( await getSelectedTab() ).toHaveTextContent(
 							'Beta'
@@ -1247,9 +1270,11 @@ describe( 'Tabs', () => {
 						);
 
 						// When the selected tab is changed, it should not automatically receive focus.
+
 						expect( await getSelectedTab() ).toHaveTextContent(
 							'Gamma'
 						);
+
 						expect(
 							screen.getByRole( 'tab', { name: 'Beta' } )
 						).toHaveFocus();
@@ -1261,6 +1286,7 @@ describe( 'Tabs', () => {
 						).toHaveFocus();
 
 						// Press tab, move focus back to the tablist
+						await sleep();
 						await press.Tab();
 
 						const betaTab = screen.getByRole( 'tab', {
@@ -1282,6 +1308,7 @@ describe( 'Tabs', () => {
 			it( 'should automatically select a newly focused tab', async () => {
 				render( <ControlledTabs tabs={ TABS } selectedTabId="beta" /> );
 
+				await sleep();
 				await press.Tab();
 
 				// Tab key should focus the currently selected tab, which is Beta.
@@ -1307,10 +1334,13 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 
 				// Tab key should focus the currently selected tab, which is Beta.
+				await sleep();
 				await press.Tab();
-				expect(
-					await screen.findByRole( 'tab', { name: 'Beta' } )
-				).toHaveFocus();
+				await waitFor( async () =>
+					expect(
+						await screen.findByRole( 'tab', { name: 'Beta' } )
+					).toHaveFocus()
+				);
 
 				// Arrow key should move focus but not automatically change the selected tab.
 				await press.ArrowRight();

package/src/theme/stories/index.story.tsx

@@ -18,6 +18,7 @@ const meta: Meta< typeof Theme > = {
 		accent: { control: { type: 'color' } },
 		background: { control: { type: 'color' } },
 	},
+	tags: [ 'status-private' ],
 	parameters: {
 		badges: [ 'private' ],
 		controls: { expanded: true },