@wordpress/components 25.6.1 → 25.8.0

package/src/duotone-picker/types.ts

@@ -39,7 +39,40 @@ export type DuotonePickerProps = {
 	 * Callback which is called when the duotone colors change.
 	 */
 	onChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;
-};
+	/**
+	 * Whether the control should present as a set of buttons,
+	 * each with its own tab stop.
+	 *
+	 * @default false
+	 */
+	asButtons?: boolean;
+	/**
+	 * Prevents keyboard interaction from wrapping around.
+	 * Only used when `asButtons` is not true.
+	 *
+	 * @default true
+	 */
+	loop?: boolean;
+} & (
+	| {
+			/**
+			 * A label to identify the purpose of the control.
+			 *
+			 * @todo [#54055] Either this or `aria-labelledby` should be required
+			 */
+			'aria-label'?: string;
+			'aria-labelledby'?: never;
+	  }
+	| {
+			/**
+			 * An ID of an element to provide a label for the control.
+			 *
+			 * @todo [#54055] Either this or `aria-label` should be required
+			 */
+			'aria-labelledby'?: string;
+			'aria-label'?: never;
+	  }
+);
 
 type Color = {
 	color: string;

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

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { Elevation } from '..';
 
-const meta: ComponentMeta< typeof Elevation > = {
+const meta: Meta< typeof Elevation > = {
 	component: Elevation,
 	title: 'Components (Experimental)/Elevation',
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof Elevation > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Elevation > = ( args ) => {
+const Template: StoryFn< typeof Elevation > = ( args ) => {
 	return (
 		<div
 			style={ {
@@ -38,7 +38,7 @@ const Template: ComponentStory< typeof Elevation > = ( args ) => {
 	);
 };
 
-const InteractiveTemplate: ComponentStory< typeof Elevation > = ( args ) => {
+const InteractiveTemplate: StoryFn< typeof Elevation > = ( args ) => {
 	return (
 		<button
 			style={ {
@@ -55,7 +55,7 @@ const InteractiveTemplate: ComponentStory< typeof Elevation > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Elevation > = Template.bind( {} );
+export const Default: StoryFn< typeof Elevation > = Template.bind( {} );
 Default.args = {
 	value: 5,
 };
@@ -64,7 +64,7 @@ Default.args = {
  * Enable the `isInteractive` prop to automatically generate values
  * for the hover/active/focus states.
  */
-export const WithInteractive: ComponentStory< typeof Elevation > =
+export const WithInteractive: StoryFn< typeof Elevation > =
 	InteractiveTemplate.bind( {} );
 WithInteractive.args = {
 	...Default.args,
@@ -75,7 +75,7 @@ WithInteractive.args = {
  * You can also provide custom values for the hover/active/focus states
  * instead of using the `isInteractive` prop.
  */
-export const WithCustomInteractive: ComponentStory< typeof Elevation > =
+export const WithCustomInteractive: StoryFn< typeof Elevation > =
 	InteractiveTemplate.bind( {} );
 WithCustomInteractive.args = {
 	...Default.args,

package/src/external-link/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import ExternalLink from '..';
 
-const meta: ComponentMeta< typeof ExternalLink > = {
+const meta: Meta< typeof ExternalLink > = {
 	component: ExternalLink,
 	title: 'Components/ExternalLink',
 	argTypes: {
@@ -23,13 +23,11 @@ const meta: ComponentMeta< typeof ExternalLink > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ExternalLink > = ( { ...args } ) => {
+const Template: StoryFn< typeof ExternalLink > = ( { ...args } ) => {
 	return <ExternalLink { ...args } />;
 };
 
-export const Default: ComponentStory< typeof ExternalLink > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ExternalLink > = Template.bind( {} );
 Default.args = {
 	children: 'WordPress',
 	href: 'https://wordpress.org',

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,9 +9,11 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Flex, FlexItem, FlexBlock } from '../';
 import { View } from '../../view';
 
-const meta: ComponentMeta< typeof Flex > = {
+const meta: Meta< typeof Flex > = {
 	component: Flex,
 	title: 'Components/Flex',
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { FlexBlock, FlexItem },
 	argTypes: {
 		align: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
@@ -38,7 +40,7 @@ const GrayBox = ( { children }: { children: string } ) => (
 	<View style={ { backgroundColor: '#eee', padding: 10 } }>{ children }</View>
 );
 
-export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
+export const Default: StoryFn< typeof Flex > = ( { ...args } ) => {
 	return (
 		<Flex { ...args }>
 			<FlexItem>
@@ -55,9 +57,7 @@ export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
 };
 Default.args = {};
 
-export const ResponsiveDirection: ComponentStory< typeof Flex > = ( {
-	...args
-} ) => {
+export const ResponsiveDirection: StoryFn< typeof Flex > = ( { ...args } ) => {
 	return (
 		<Flex { ...args }>
 			<FlexItem>

package/src/focal-point-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
  */
 import FocalPointPicker from '..';
 
-const meta: ComponentMeta< typeof FocalPointPicker > = {
+const meta: Meta< typeof FocalPointPicker > = {
 	title: 'Components/FocalPointPicker',
 	component: FocalPointPicker,
 	argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta< typeof FocalPointPicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof FocalPointPicker > = ( {
+const Template: StoryFn< typeof FocalPointPicker > = ( {
 	onChange,
 	...props
 } ) => {

package/src/focusable-iframe/{index.js → index.tsx}

@@ -3,12 +3,15 @@
  */
 import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
 import deprecated from '@wordpress/deprecated';
-
 /**
- * @param {Object}                                 props
- * @param {import('react').Ref<HTMLIFrameElement>} props.iframeRef
+ * Internal dependencies
  */
-export default function FocusableIframe( { iframeRef, ...props } ) {
+import type { FocusableIframeProps } from './types';
+
+export default function FocusableIframe( {
+	iframeRef,
+	...props
+}: FocusableIframeProps ) {
 	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
 	deprecated( 'wp.components.FocusableIframe', {
 		since: '5.9',

package/src/focusable-iframe/types.ts

@@ -0,0 +1,9 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithoutRef } from 'react';
+
+export interface FocusableIframeProps
+	extends ComponentPropsWithoutRef< 'iframe' > {
+	iframeRef: React.Ref< HTMLIFrameElement >;
+}

package/src/font-size-picker/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ export default {
 	component: FontSizePicker,
 };
 
-const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	value,
 	...props
 } ) => {
@@ -32,7 +32,7 @@ const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FontSizePicker > =
+export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
 	fontSizes: [

package/src/font-size-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import FontSizePicker from '../';
 
-const meta: ComponentMeta< typeof FontSizePicker > = {
+const meta: Meta< typeof FontSizePicker > = {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta< typeof FontSizePicker > = {
 };
 export default meta;
 
-const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	value,
 	onChange,
 	...props
@@ -45,7 +45,7 @@ const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
+const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( {
 	fontSizes,
 	...props
 } ) => {
@@ -63,7 +63,7 @@ const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FontSizePicker > =
+export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
@@ -90,7 +90,7 @@ Default.args = {
 	withSlider: false,
 };
 
-export const WithSlider: ComponentStory< typeof FontSizePicker > =
+export const WithSlider: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithSlider.args = {
 	...Default.args,
@@ -103,7 +103,7 @@ WithSlider.args = {
  * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
  * only be able to pick one of the predefined sizes passed in `fontSizes`.
  */
-export const WithCustomSizesDisabled: ComponentStory< typeof FontSizePicker > =
+export const WithCustomSizesDisabled: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithCustomSizesDisabled.args = {
 	...Default.args,
@@ -113,7 +113,7 @@ WithCustomSizesDisabled.args = {
 /**
  * When there are more than 5 font size options, the UI is no longer a toggle group.
  */
-export const WithMoreFontSizes: ComponentStory< typeof FontSizePicker > =
+export const WithMoreFontSizes: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithMoreFontSizes.args = {
 	...Default.args,
@@ -155,7 +155,7 @@ WithMoreFontSizes.args = {
 /**
  * When units like `px` are specified explicitly, it will be shown as a label hint.
  */
-export const WithUnits: ComponentStory< typeof FontSizePicker > =
+export const WithUnits: StoryFn< typeof FontSizePicker > =
 	TwoFontSizePickersWithState.bind( {} );
 WithUnits.args = {
 	...WithMoreFontSizes.args,
@@ -170,7 +170,7 @@ WithUnits.args = {
  * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
  * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
  */
-export const WithComplexCSSValues: ComponentStory< typeof FontSizePicker > =
+export const WithComplexCSSValues: StoryFn< typeof FontSizePicker > =
 	TwoFontSizePickersWithState.bind( {} );
 WithComplexCSSValues.args = {
 	...Default.args,

package/src/form-file-upload/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { upload as uploadIcon } from '@wordpress/icons';
  */
 import FormFileUpload from '..';
 
-const meta: ComponentMeta< typeof FormFileUpload > = {
+const meta: Meta< typeof FormFileUpload > = {
 	title: 'Components/FormFileUpload',
 	component: FormFileUpload,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof FormFileUpload > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof FormFileUpload > = ( props ) => {
+const Template: StoryFn< typeof FormFileUpload > = ( props ) => {
 	return <FormFileUpload { ...props } />;
 };
 

package/src/form-toggle/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { FormToggle } from '..';
 
-const meta: ComponentMeta< typeof FormToggle > = {
+const meta: Meta< typeof FormToggle > = {
 	component: FormToggle,
 	title: 'Components/FormToggle',
 	argTypes: {
@@ -30,10 +30,7 @@ const meta: ComponentMeta< typeof FormToggle > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof FormToggle > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof FormToggle > = ( { onChange, ...args } ) => {
 	const [ isChecked, setChecked ] = useState( true );
 
 	return (
@@ -48,5 +45,5 @@ const Template: ComponentStory< typeof FormToggle > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FormToggle > = Template.bind( {} );
+export const Default: StoryFn< typeof FormToggle > = Template.bind( {} );
 Default.args = {};

package/src/form-token-field/README.md

@@ -62,6 +62,7 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
 -   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.5. (The prop can be safely removed once this happens.)
+-   `tokenizeOnBlur` - If true, add any incompleteTokenValue as a new token when the field loses focus.
 
 ## Usage
 

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

@@ -73,6 +73,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__next40pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
 		__nextHasNoMarginBottom = false,
+		tokenizeOnBlur = false,
 	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(
 		props,
 		'wp.components.FormTokenField'
@@ -167,6 +168,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			__experimentalValidateInput( incompleteTokenValue )
 		) {
 			setIsActive( false );
+			if ( tokenizeOnBlur && inputHasValidValue() ) {
+				addNewToken( incompleteTokenValue );
+			}
 		} else {
 			// Reset to initial state
 			setIncompleteTokenValue( '' );
@@ -451,7 +455,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		setSelectedSuggestionScroll( false );
 		setIsExpanded( ! __experimentalExpandOnFocus );
 
-		if ( isActive ) {
+		if ( isActive && ! tokenizeOnBlur ) {
 			focus();
 		}
 	}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import FormTokenField from '../';
 
-const meta: ComponentMeta< typeof FormTokenField > = {
+const meta: Meta< typeof FormTokenField > = {
 	component: FormTokenField,
 	title: 'Components/FormTokenField',
 	argTypes: {
@@ -42,9 +42,7 @@ const continents = [
 	'Oceania',
 ];
 
-const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( {
-	...args
-} ) => {
+const DefaultTemplate: StoryFn< typeof FormTokenField > = ( { ...args } ) => {
 	const [ selectedContinents, setSelectedContinents ] = useState<
 		ComponentProps< typeof FormTokenField >[ 'value' ]
 	>( [] );
@@ -58,14 +56,15 @@ const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FormTokenField > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof FormTokenField > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Type a continent',
 	suggestions: continents,
 };
 
-export const Async: ComponentStory< typeof FormTokenField > = ( {
+export const Async: StoryFn< typeof FormTokenField > = ( {
 	suggestions,
 	...args
 } ) => {
@@ -102,7 +101,7 @@ Async.args = {
 	suggestions: continents,
 };
 
-export const DropdownSelector: ComponentStory< typeof FormTokenField > =
+export const DropdownSelector: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 DropdownSelector.args = {
 	...Default.args,
@@ -115,7 +114,7 @@ DropdownSelector.args = {
  * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
  * and is subject to change.)
  */
-export const WithCustomRenderItem: ComponentStory< typeof FormTokenField > =
+export const WithCustomRenderItem: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 WithCustomRenderItem.args = {
 	...Default.args,
@@ -129,7 +128,7 @@ WithCustomRenderItem.args = {
  * `true` will be tokenized. (This is still an experimental feature and is
  * subject to change.)
  */
-export const WithValidatedInput: ComponentStory< typeof FormTokenField > =
+export const WithValidatedInput: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 WithValidatedInput.args = {
 	...Default.args,

package/src/form-token-field/style.scss

@@ -157,21 +157,21 @@
 .components-form-token-field__suggestions-list {
 	flex: 1 0 100%;
 	min-width: 100%;
-	max-height: 9em;
+	max-height: $grid-unit-80 * 2;
 	overflow-y: auto;
 	transition: all 0.15s ease-in-out;
 	@include reduce-motion("transition");
 	list-style: none;
-	border-top: $border-width solid $components-color-border;
+	box-shadow: inset 0 $border-width 0 0 $gray-600; // Matches the border color of the input.
 	margin: 0;
-	padding: 0;
 }
 
 .components-form-token-field__suggestion {
-	color: $gray-700;
+	color: $gray-900;
 	display: block;
 	font-size: $default-font-size;
-	padding: 4px 8px;
+	padding: $grid-unit-10 $grid-unit-15;
+	min-height: $button-size-compact;
 	margin: 0;
 	cursor: pointer;
 
@@ -180,7 +180,3 @@
 		color: $white;
 	}
 }
-
-.components-form-token-field__suggestion-match {
-	text-decoration: underline;
-}

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

@@ -205,7 +205,42 @@ describe( 'FormTokenField', () => {
 			] );
 		} );
 
-		it( "should not add a token with the input's value when pressing the tab key", async () => {
+		it( 'should add a token with the input value with onBlur when `tokenizeOnBlur` prop is `true`', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+
+			const { rerender } = render(
+				<FormTokenFieldWithState onChange={ onChangeSpy } />
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Add 'grapefruit' token by typing it and check blur of field does not tokenize it.
+			await user.type( input, 'grapefruit' );
+			await user.click( document.body );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 0 );
+			expectTokensNotToBeInTheDocument( [ 'grapefruit' ] );
+
+			rerender(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					tokenizeOnBlur
+				/>
+			);
+			await user.clear( input );
+
+			// Add 'grapefruit' token by typing it and check blur of field tokenizes it.
+			await user.type( input, 'grapefruit' );
+
+			await user.click( document.body );
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 1, [
+				'grapefruit',
+			] );
+			expectTokensToBeInTheDocument( [ 'grapefruit' ] );
+		} );
+
+		it( "should not add a token with the input's value when tokenizeOnBlur is not set and pressing the tab key", async () => {
 			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();

package/src/form-token-field/types.ts

@@ -182,13 +182,19 @@ export interface FormTokenFieldProps
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * If true, add any incompleteTokenValue as a new token when the field loses focus.
+	 *
+	 * @default false
+	 */
+	tokenizeOnBlur?: boolean;
 }
 
 /**
  * `T` can be either a `string` or an object which must have a `value` prop as a string.
  */
 export interface SuggestionsListProps<
-	T = string | ( Record< string, unknown > & { value: string } )
+	T = string | ( Record< string, unknown > & { value: string } ),
 > {
 	selectedIndex: number;
 	scrollIntoView: boolean;

package/src/gradient-picker/README.md

@@ -102,3 +102,17 @@ The heading level. Only applies in cases where gradients are provided from multi
 
 -   Required: No
 -   Default: `2`
+
+### `asButtons`: `boolean`
+
+Whether the control should present as a set of buttons, each with its own tab stop.
+
+- Required: No
+- Default: `false`
+
+### `loop`: `boolean`
+
+Prevents keyboard interaction from wrapping around. Only used when `asButtons` is not true.
+
+- Required: No
+- Default: `true`