@wordpress/components 25.6.1 → 25.8.0

package/src/gradient-picker/index.tsx

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
 import { useCallback, useMemo } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
@@ -40,7 +41,7 @@ function SingleOrigin( {
 	gradients,
 	onChange,
 	value,
-	actions,
+	...additionalProps
 }: PickerProps< GradientObject > ) {
 	const gradientOptions = useMemo( () => {
 		return gradients.map( ( { gradient, name }, index ) => (
@@ -70,10 +71,10 @@ function SingleOrigin( {
 		) );
 	}, [ gradients, value, onChange, clearGradient ] );
 	return (
-		<CircularOptionPicker
+		<CircularOptionPicker.OptionGroup
 			className={ className }
 			options={ gradientOptions }
-			actions={ actions }
+			{ ...additionalProps }
 		/>
 	);
 }
@@ -84,15 +85,17 @@ function MultipleOrigin( {
 	gradients,
 	onChange,
 	value,
-	actions,
 	headingLevel,
 }: PickerProps< OriginObject > ) {
+	const instanceId = useInstanceId( MultipleOrigin );
+
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ gradients.map( ( { name, gradients: gradientSet }, index ) => {
+				const id = `color-palette-${ instanceId }-${ index }`;
 				return (
 					<VStack spacing={ 2 } key={ index }>
-						<ColorHeading level={ headingLevel }>
+						<ColorHeading level={ headingLevel } id={ id }>
 							{ name }
 						</ColorHeading>
 						<SingleOrigin
@@ -102,9 +105,7 @@ function MultipleOrigin( {
 								onChange( gradient, index )
 							}
 							value={ value }
-							{ ...( gradients.length === index + 1
-								? { actions }
-								: {} ) }
+							aria-labelledby={ id }
 						/>
 					</VStack>
 				);
@@ -114,10 +115,56 @@ function MultipleOrigin( {
 }
 
 function Component( props: PickerProps< any > ) {
-	if ( isMultipleOriginArray( props.gradients ) ) {
-		return <MultipleOrigin { ...props } />;
+	const {
+		asButtons,
+		loop,
+		actions,
+		headingLevel,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		...additionalProps
+	} = props;
+	const options = isMultipleOriginArray( props.gradients ) ? (
+		<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />
+	) : (
+		<SingleOrigin { ...additionalProps } />
+	);
+
+	let metaProps:
+		| { asButtons: false; loop?: boolean; 'aria-label': string }
+		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
+		| { asButtons: true };
+
+	if ( asButtons ) {
+		metaProps = { asButtons: true };
+	} else {
+		const _metaProps: { asButtons: false; loop?: boolean } = {
+			asButtons: false,
+			loop,
+		};
+
+		if ( ariaLabel ) {
+			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
+		} else if ( ariaLabelledby ) {
+			metaProps = {
+				..._metaProps,
+				'aria-labelledby': ariaLabelledby,
+			};
+		} else {
+			metaProps = {
+				..._metaProps,
+				'aria-label': __( 'Custom color picker.' ),
+			};
+		}
 	}
-	return <SingleOrigin { ...props } />;
+
+	return (
+		<CircularOptionPicker
+			{ ...metaProps }
+			actions={ actions }
+			options={ options }
+		/>
+	);
 }
 
 /**
@@ -174,6 +221,7 @@ export function GradientPicker( {
 	disableCustomGradients = false,
 	__experimentalIsRenderedInSidebar,
 	headingLevel = 2,
+	...additionalProps
 }: GradientPickerComponentProps ) {
 	const clearGradient = useCallback(
 		() => onChange( undefined ),
@@ -211,6 +259,7 @@ export function GradientPicker( {
 				) }
 				{ ( gradients.length || clearable ) && (
 					<Component
+						{ ...additionalProps }
 						className={ className }
 						clearGradient={ clearGradient }
 						gradients={ gradients }

package/src/gradient-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 GradientPicker from '..';
 
-const meta: ComponentMeta< typeof GradientPicker > = {
+const meta: Meta< typeof GradientPicker > = {
 	title: 'Components/GradientPicker',
 	component: GradientPicker,
 	parameters: {
@@ -65,7 +65,7 @@ const GRADIENTS = [
 	},
 ];
 
-const Template: ComponentStory< typeof GradientPicker > = ( {
+const Template: StoryFn< typeof GradientPicker > = ( {
 	onChange,
 	...props
 } ) => {

package/src/gradient-picker/types.ts

@@ -42,7 +42,40 @@ type GradientPickerBaseProps = {
 	 * @default 2
 	 */
 	headingLevel?: HeadingSize;
-};
+	/**
+	 * 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;
+	  }
+);
 
 export type GradientPickerComponentProps = GradientPickerBaseProps & {
 	/**

package/src/grid/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,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { View } from '../../view';
 import { Grid } from '..';
 
-const meta: ComponentMeta< typeof Grid > = {
+const meta: Meta< typeof Grid > = {
 	component: Grid,
 	title: 'Components (Experimental)/Grid',
 	argTypes: {
@@ -51,7 +51,7 @@ const Item = ( props: { children: string } ) => (
 	/>
 );
 
-const Template: ComponentStory< typeof Grid > = ( props ) => (
+const Template: StoryFn< typeof Grid > = ( props ) => (
 	<Grid { ...props }>
 		<Item>One</Item>
 		<Item>Two</Item>
@@ -64,7 +64,7 @@ const Template: ComponentStory< typeof Grid > = ( props ) => (
 	</Grid>
 );
 
-export const Default: ComponentStory< typeof Grid > = Template.bind( {} );
+export const Default: StoryFn< typeof Grid > = Template.bind( {} );
 Default.args = {
 	alignment: 'bottom',
 	columns: 4,

package/src/guide/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
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import Button from '../../button';
 import Guide from '..';
 
-const meta: ComponentMeta< typeof Guide > = {
+const meta: Meta< typeof Guide > = {
 	title: 'Components/Guide',
 	component: Guide,
 	argTypes: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof Guide > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Guide > = ( { onFinish, ...props } ) => {
+const Template: StoryFn< typeof Guide > = ( { onFinish, ...props } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 
 	const openGuide = () => setOpen( true );

package/src/h-stack/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,13 +9,13 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import { View } from '../../../view';
 import { HStack } from '../..';
 
-const meta: ComponentMeta< typeof HStack > = {
+const meta: Meta< typeof HStack > = {
 	component: HStack,
 	title: 'Components (Experimental)/HStack',
 };
 export default meta;
 
-const Template: ComponentStory< typeof HStack > = ( props ) => {
+const Template: StoryFn< typeof HStack > = ( props ) => {
 	return (
 		<HStack
 			style={ { background: '#eee', minHeight: '3rem' } }
@@ -30,7 +30,7 @@ const Template: ComponentStory< typeof HStack > = ( props ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
+export const Default: StoryFn< typeof HStack > = Template.bind( {} );
 Default.args = {
 	spacing: 3,
 };

package/src/h-stack/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 /**
  * Internal dependencies
  */
@@ -40,7 +40,7 @@ const JUSTIFICATIONS = {
 	start: 'start',
 };
 
-const meta: ComponentMeta< typeof HStack > = {
+const meta: Meta< typeof HStack > = {
 	component: HStack,
 	title: 'Components (Experimental)/HStack',
 	argTypes: {
@@ -76,7 +76,7 @@ const meta: ComponentMeta< typeof HStack > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof HStack > = ( args ) => (
+const Template: StoryFn< typeof HStack > = ( args ) => (
 	<HStack { ...args } style={ { background: '#eee', minHeight: '3rem' } }>
 		{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
 			<View key={ text } style={ { background: '#b9f9ff' } }>
@@ -86,7 +86,7 @@ const Template: ComponentStory< typeof HStack > = ( args ) => (
 	</HStack>
 );
 
-export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
+export const Default: StoryFn< typeof HStack > = Template.bind( {} );
 Default.args = {
 	spacing: '3',
 };

package/src/heading/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 { Heading } from '..';
 
-const meta: ComponentMeta< typeof Heading > = {
+const meta: Meta< typeof Heading > = {
 	component: Heading,
 	title: 'Components (Experimental)/Heading',
 	argTypes: {
@@ -33,7 +33,7 @@ const meta: ComponentMeta< typeof Heading > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof Heading > = ( props ) => (
+export const Default: StoryFn< typeof Heading > = ( props ) => (
 	<Heading { ...props } />
 );
 Default.args = {

package/src/higher-order/navigate-regions/index.tsx

@@ -139,11 +139,10 @@ export function useNavigateRegions( shortcuts: Shortcuts = defaultShortcuts ) {
  */
 export default createHigherOrderComponent(
 	( Component ) =>
-		( { shortcuts, ...props } ) =>
-			(
-				<div { ...useNavigateRegions( shortcuts ) }>
-					<Component { ...props } />
-				</div>
-			),
+		( { shortcuts, ...props } ) => (
+			<div { ...useNavigateRegions( shortcuts ) }>
+				<Component { ...props } />
+			</div>
+		),
 	'navigateRegions'
 );

package/src/higher-order/with-filters/test/index.tsx

@@ -52,13 +52,12 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-compose',
-			( FilteredComponent ) => () =>
-				(
-					<div>
-						<FilteredComponent />
-						<ComposedComponent />
-					</div>
-				)
+			( FilteredComponent ) => () => (
+				<div>
+					<FilteredComponent />
+					<ComposedComponent />
+				</div>
+			)
 		);
 		const EnhancedComponent = withFilters( hookName )( MyComponent );
 
@@ -72,12 +71,11 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
+			( FilteredComponent ) => () => (
+				<blockquote>
+					<FilteredComponent />
+				</blockquote>
+			)
 		);
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -100,12 +98,11 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
+			( FilteredComponent ) => () => (
+				<blockquote>
+					<FilteredComponent />
+				</blockquote>
+			)
 		);
 
 		await waitFor( () =>
@@ -125,22 +122,20 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
+			( FilteredComponent ) => () => (
+				<blockquote>
+					<FilteredComponent />
+				</blockquote>
+			)
 		);
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-2',
-			( FilteredComponent ) => () =>
-				(
-					<section>
-						<FilteredComponent />
-					</section>
-				)
+			( FilteredComponent ) => () => (
+				<section>
+					<FilteredComponent />
+				</section>
+			)
 		);
 
 		await waitFor( () =>
@@ -159,12 +154,11 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy',
-			( FilteredComponent ) => () =>
-				(
-					<div>
-						<FilteredComponent />
-					</div>
-				)
+			( FilteredComponent ) => () => (
+				<div>
+					<FilteredComponent />
+				</div>
+			)
 		);
 
 		await waitFor( () =>
@@ -196,12 +190,11 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
+			( FilteredComponent ) => () => (
+				<blockquote>
+					<FilteredComponent />
+				</blockquote>
+			)
 		);
 
 		await waitFor( () =>

package/src/higher-order/with-focus-outside/{index.js → index.tsx}

@@ -1,5 +1,3 @@
-//@ts-nocheck
-
 /**
  * WordPress dependencies
  */
@@ -11,9 +9,14 @@ import {
 
 export default createHigherOrderComponent(
 	( WrappedComponent ) => ( props ) => {
-		const [ handleFocusOutside, setHandleFocusOutside ] = useState();
-		const bindFocusOutsideHandler = useCallback(
-			( node ) =>
+		const [ handleFocusOutside, setHandleFocusOutside ] = useState<
+			undefined | ( ( event: React.FocusEvent ) => void )
+		>( undefined );
+
+		const bindFocusOutsideHandler = useCallback<
+			( node: React.FocusEvent ) => void
+		>(
+			( node: any ) =>
 				setHandleFocusOutside( () =>
 					node?.handleFocusOutside
 						? node.handleFocusOutside.bind( node )

package/src/higher-order/with-focus-outside/test/{index.js → index.tsx}

@@ -12,17 +12,21 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import withFocusOutside from '../';
+import withFocusOutside from '..';
 
-let onFocusOutside;
+interface TestComponentProps {
+	onFocusOutside: ( event: FocusEvent ) => void;
+}
+
+let onFocusOutside: () => void;
 
 describe( 'withFocusOutside', () => {
-	let origHasFocus;
+	let origHasFocus: typeof document.hasFocus;
 
 	const EnhancedComponent = withFocusOutside(
-		class extends Component {
+		class extends Component< TestComponentProps > {
 			handleFocusOutside() {
-				this.props.onFocusOutside();
+				this.props.onFocusOutside( new FocusEvent( 'blur' ) );
 			}
 
 			render() {
@@ -36,15 +40,13 @@ describe( 'withFocusOutside', () => {
 		}
 	);
 
-	class TestComponent extends Component {
-		render() {
-			return <EnhancedComponent { ...this.props } />;
-		}
-	}
+	const TestComponent: React.FC< TestComponentProps > = ( props ) => {
+		return <EnhancedComponent { ...props } />;
+	};
 
 	beforeEach( () => {
 		// Mock document.hasFocus() to always be true for testing
-		// note: we overide this for some tests.
+		// note: we override this for some tests.
 		origHasFocus = document.hasFocus;
 		document.hasFocus = () => true;
 

package/src/higher-order/with-notices/test/index.tsx

@@ -27,7 +27,7 @@ import withNotices from '..';
 import type { WithNoticeProps } from '../types';
 
 // Implementation detail of Notice component used to query the dismissal button.
-const stockDismissText = 'Dismiss this notice';
+const stockDismissText = 'Close';
 
 function noticesFrom( list: string[] ) {
 	return list.map( ( item ) => ( { id: item, content: item } ) );

package/src/higher-order/with-spoken-messages/index.tsx

@@ -17,13 +17,12 @@ import { speak } from '@wordpress/a11y';
  * @return {WPComponent} The wrapped component.
  */
 export default createHigherOrderComponent(
-	( Component ) => ( props ) =>
-		(
-			<Component
-				{ ...props }
-				speak={ speak }
-				debouncedSpeak={ useDebounce( speak, 500 ) }
-			/>
-		),
+	( Component ) => ( props ) => (
+		<Component
+			{ ...props }
+			speak={ speak }
+			debouncedSpeak={ useDebounce( speak, 500 ) }
+		/>
+	),
 	'withSpokenMessages'
 );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,7 @@ import { wordpress } from '@wordpress/icons';
 import Icon from '..';
 import { VStack } from '../../v-stack';
 
-const meta: ComponentMeta< typeof Icon > = {
+const meta: Meta< typeof Icon > = {
 	title: 'Components/Icon',
 	component: Icon,
 	parameters: {
@@ -25,14 +25,14 @@ const meta: ComponentMeta< typeof Icon > = {
 };
 export default meta;
 
-const Template: Story< typeof Icon > = ( args ) => <Icon { ...args } />;
+const Template: StoryFn< typeof Icon > = ( args ) => <Icon { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
 	icon: wordpress,
 };
 
-export const FillColor: Story< typeof Icon > = ( args ) => {
+export const FillColor: StoryFn< typeof Icon > = ( args ) => {
 	return (
 		<div
 			style={ {
@@ -84,7 +84,7 @@ WithAnSVG.args = {
  * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
  * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
  */
-export const WithADashicon: Story< typeof Icon > = ( args ) => {
+export const WithADashicon: StoryFn< typeof Icon > = ( args ) => {
 	return (
 		<VStack>
 			<Icon { ...args } />

package/src/index.ts

@@ -17,7 +17,11 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
-export { __unstableMotion, __unstableAnimatePresence } from './animation';
+export {
+	__unstableMotion,
+	__unstableAnimatePresence,
+	__unstableMotionContext,
+} from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,