@wordpress/components 32.1.1-next.v.0 → 32.2.0

package/src/flex/test/__snapshots__/index.tsx.snap

@@ -7,25 +7,25 @@ Snapshot Diff:
 
 @@ -1,22 +1,18 @@
   <div
-    class="components-flex css-1hwd9hm-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
+    class="components-flex css-4xxgm8-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
 -   data-testid="flex"
 +   data-testid="base-flex"
     data-wp-c16t="true"
     data-wp-component="Flex"
   >
     <div
-      class="components-flex-item css-eno349-PolymorphicDiv-Item-sx-Base e19lxcc00"
+      class="components-flex-item css-11ygw1k-PolymorphicDiv-Item-sx-Base e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexItem"
     >
       Item
     </div>
 -   <div
--     class="css-161q9d5-PolymorphicDiv e19lxcc00"
+-     class="css-1ragr82-PolymorphicDiv e19lxcc00"
 -   />
 -   <div />
     <div
-      class="components-flex-item components-flex-block css-10m3u8l-PolymorphicDiv-Item-sx-Base-block e19lxcc00"
+      class="components-flex-item components-flex-block css-1gfd63q-PolymorphicDiv-Item-sx-Base-block e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexBlock"
     >

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

@@ -29,6 +29,10 @@ const meta: Meta< typeof FocalPointPicker > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 export default meta;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -30,15 +30,21 @@ const meta: Meta< typeof FontSizePicker > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 export default meta;
 
-const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
+type FontSizePickerStory = StoryObj< typeof FontSizePicker >;
+
+const FontSizePickerWithState = ( {
 	value,
 	onChange,
 	...props
-} ) => {
+}: React.ComponentProps< typeof FontSizePicker > ) => {
 	const [ fontSize, setFontSize ] = useState( value );
 	return (
 		<FontSizePicker
@@ -53,10 +59,10 @@ const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	);
 };
 
-const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( {
+const TwoFontSizePickersWithState = ( {
 	fontSizes,
 	...props
-} ) => {
+}: React.ComponentProps< typeof FontSizePicker > ) => {
 	return (
 		<>
 			<h2>Fewer font sizes</h2>
@@ -71,148 +77,154 @@ const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( {
 	);
 };
 
-export const Default: StoryFn< typeof FontSizePicker > =
-	FontSizePickerWithState.bind( {} );
-Default.args = {
-	__next40pxDefaultSize: true,
-	disableCustomFontSizes: false,
-	fontSizes: [
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-	],
-	value: 16,
-	withSlider: false,
+export const Default: FontSizePickerStory = {
+	render: FontSizePickerWithState,
+	args: {
+		__next40pxDefaultSize: true,
+		disableCustomFontSizes: false,
+		fontSizes: [
+			{
+				name: 'Small',
+				slug: 'small',
+				size: 12,
+			},
+			{
+				name: 'Normal',
+				slug: 'normal',
+				size: 16,
+			},
+			{
+				name: 'Big',
+				slug: 'big',
+				size: 26,
+			},
+		],
+		value: 16,
+		withSlider: false,
+	},
 };
 
-export const WithSlider: StoryFn< typeof FontSizePicker > =
-	FontSizePickerWithState.bind( {} );
-WithSlider.args = {
-	...Default.args,
-	fallbackFontSize: 16,
-	value: undefined,
-	withSlider: true,
+export const WithSlider: FontSizePickerStory = {
+	render: FontSizePickerWithState,
+	args: {
+		...Default.args,
+		fallbackFontSize: 16,
+		value: undefined,
+		withSlider: true,
+	},
 };
 
 /**
  * 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: StoryFn< typeof FontSizePicker > =
-	FontSizePickerWithState.bind( {} );
-WithCustomSizesDisabled.args = {
-	...Default.args,
-	disableCustomFontSizes: true,
+export const WithCustomSizesDisabled: FontSizePickerStory = {
+	render: FontSizePickerWithState,
+	args: {
+		...Default.args,
+		disableCustomFontSizes: true,
+	},
 };
 
 /**
  * When there are more than 5 font size options, the UI is no longer a toggle group.
  */
-export const WithMoreFontSizes: StoryFn< typeof FontSizePicker > =
-	FontSizePickerWithState.bind( {} );
-WithMoreFontSizes.args = {
-	...Default.args,
-	fontSizes: [
-		{
-			name: 'Tiny',
-			slug: 'tiny',
-			size: 8,
-		},
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-		{
-			name: 'Bigger',
-			slug: 'bigger',
-			size: 30,
-		},
-		{
-			name: 'Huge',
-			slug: 'huge',
-			size: 36,
-		},
-	],
-	value: 8,
+export const WithMoreFontSizes: FontSizePickerStory = {
+	render: FontSizePickerWithState,
+	args: {
+		...Default.args,
+		fontSizes: [
+			{
+				name: 'Tiny',
+				slug: 'tiny',
+				size: 8,
+			},
+			{
+				name: 'Small',
+				slug: 'small',
+				size: 12,
+			},
+			{
+				name: 'Normal',
+				slug: 'normal',
+				size: 16,
+			},
+			{
+				name: 'Big',
+				slug: 'big',
+				size: 26,
+			},
+			{
+				name: 'Bigger',
+				slug: 'bigger',
+				size: 30,
+			},
+			{
+				name: 'Huge',
+				slug: 'huge',
+				size: 36,
+			},
+		],
+		value: 8,
+	},
 };
 
 /**
  * When units like `px` are specified explicitly, it will be shown as a label hint.
  */
-export const WithUnits: StoryFn< typeof FontSizePicker > =
-	TwoFontSizePickersWithState.bind( {} );
-WithUnits.args = {
-	...WithMoreFontSizes.args,
-	fontSizes: WithMoreFontSizes.args.fontSizes?.map( ( option ) => ( {
-		...option,
-		size: `${ option.size }px`,
-	} ) ),
-	value: '8px',
+export const WithUnits: FontSizePickerStory = {
+	render: TwoFontSizePickersWithState,
+	args: {
+		...WithMoreFontSizes.args,
+		fontSizes: WithMoreFontSizes.args?.fontSizes?.map( ( option ) => ( {
+			...option,
+			size: `${ option.size }px`,
+		} ) ),
+		value: '8px',
+	},
 };
 
 /**
  * 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: StoryFn< typeof FontSizePicker > =
-	TwoFontSizePickersWithState.bind( {} );
-WithComplexCSSValues.args = {
-	...Default.args,
-	fontSizes: [
-		{
-			name: 'Small',
-			slug: 'small',
-			// Adding just one complex css value is enough
-			size: 'clamp(1.75rem, 3vw, 2.25rem)',
-		},
-		{
-			name: 'Medium',
-			slug: 'medium',
-			size: '1.125rem',
-		},
-		{
-			name: 'Large',
-			slug: 'large',
-			size: '1.7rem',
-		},
-		{
-			name: 'Extra Large',
-			slug: 'extra-large',
-			size: '1.95rem',
-		},
-		{
-			name: 'Extra Extra Large',
-			slug: 'extra-extra-large',
-			size: '2.5rem',
-		},
-		{
-			name: 'Huge',
-			slug: 'huge',
-			size: '2.8rem',
-		},
-	],
-	value: '1.125rem',
+export const WithComplexCSSValues: FontSizePickerStory = {
+	render: TwoFontSizePickersWithState,
+	args: {
+		...Default.args,
+		fontSizes: [
+			{
+				name: 'Small',
+				slug: 'small',
+				// Adding just one complex css value is enough
+				size: 'clamp(1.75rem, 3vw, 2.25rem)',
+			},
+			{
+				name: 'Medium',
+				slug: 'medium',
+				size: '1.125rem',
+			},
+			{
+				name: 'Large',
+				slug: 'large',
+				size: '1.7rem',
+			},
+			{
+				name: 'Extra Large',
+				slug: 'extra-large',
+				size: '1.95rem',
+			},
+			{
+				name: 'Extra Extra Large',
+				slug: 'extra-extra-large',
+				size: '2.5rem',
+			},
+			{
+				name: 'Huge',
+				slug: 'huge',
+				size: '2.8rem',
+			},
+		],
+		value: '1.125rem',
+	},
 };

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

@@ -25,6 +25,10 @@ const meta: Meta< typeof FormFileUpload > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -26,6 +26,11 @@ const meta: Meta< typeof FormToggle > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'For standard toggles with labels, use `ToggleControl` instead.',
+		},
 	},
 };
 export default meta;

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

@@ -30,6 +30,11 @@ const meta: Meta< typeof FormTokenField > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `SearchableChipSelect` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/gradient-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -21,6 +21,10 @@ const meta: Meta< typeof GradientPicker > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 	args: {
 		onChange: fn(),
@@ -31,6 +35,8 @@ const meta: Meta< typeof GradientPicker > = {
 };
 export default meta;
 
+type GradientPickerStory = StoryObj< typeof GradientPicker >;
+
 const GRADIENTS = [
 	{
 		name: 'Vivid cyan blue to vivid purple',
@@ -82,10 +88,10 @@ const GRADIENTS = [
 	},
 ];
 
-const Template: StoryFn< typeof GradientPicker > = ( {
+const Template = ( {
 	onChange,
 	...props
-} ) => {
+}: React.ComponentProps< typeof GradientPicker > ) => {
 	const [ gradient, setGradient ] =
 		useState< ( typeof props )[ 'value' ] >( null );
 	return (
@@ -100,28 +106,32 @@ const Template: StoryFn< typeof GradientPicker > = ( {
 	);
 };
 
-export const Default = Template.bind( {} );
-Default.args = {
-	gradients: GRADIENTS,
+export const Default: GradientPickerStory = {
+	render: Template,
+	args: {
+		gradients: GRADIENTS,
+	},
 };
 
-export const WithNoExistingGradients = Template.bind( {} );
-WithNoExistingGradients.args = {
-	...Default.args,
-	gradients: [],
+export const WithNoExistingGradients: GradientPickerStory = {
+	render: Template,
+	args: {
+		gradients: [],
+	},
 };
 
-export const MultipleOrigins = Template.bind( {} );
-MultipleOrigins.args = {
-	...Default.args,
-	gradients: [
-		{ name: 'Origin 1', gradients: GRADIENTS },
-		{ name: 'Origin 2', gradients: GRADIENTS },
-	],
+export const MultipleOrigins: GradientPickerStory = {
+	render: Template,
+	args: {
+		gradients: [
+			{ name: 'Origin 1', gradients: GRADIENTS },
+			{ name: 'Origin 2', gradients: GRADIENTS },
+		],
+	},
 };
 
-export const CSSVariables: StoryFn< typeof GradientPicker > = ( args ) => {
-	return (
+export const CSSVariables: GradientPickerStory = {
+	render: ( args ) => (
 		<div
 			style={ {
 				'--red': '#f00',
@@ -131,27 +141,27 @@ export const CSSVariables: StoryFn< typeof GradientPicker > = ( args ) => {
 		>
 			<Template { ...args } />
 		</div>
-	);
-};
-CSSVariables.args = {
-	...Default.args,
-	gradients: [
-		{
-			name: 'Red to Yellow',
-			gradient:
-				'linear-gradient(135deg,var(--red) 0%,var(--yellow) 100%)',
-			slug: 'red-to-yellow',
-		},
-		{
-			name: 'Yellow to Blue',
-			gradient:
-				'linear-gradient(135deg,var(--yellow) 0%,var(--blue) 100%)',
-			slug: 'yellow-to-blue',
-		},
-		{
-			name: 'Blue to Red',
-			gradient: 'linear-gradient(135deg,var(--blue) 0%,var(--red) 100%)',
-			slug: 'blue-to-red',
-		},
-	],
+	),
+	args: {
+		gradients: [
+			{
+				name: 'Red to Yellow',
+				gradient:
+					'linear-gradient(135deg,var(--red) 0%,var(--yellow) 100%)',
+				slug: 'red-to-yellow',
+			},
+			{
+				name: 'Yellow to Blue',
+				gradient:
+					'linear-gradient(135deg,var(--yellow) 0%,var(--blue) 100%)',
+				slug: 'yellow-to-blue',
+			},
+			{
+				name: 'Blue to Red',
+				gradient:
+					'linear-gradient(135deg,var(--blue) 0%,var(--red) 100%)',
+				slug: 'blue-to-red',
+			},
+		],
+	},
 };

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

@@ -36,6 +36,11 @@ const meta: Meta< typeof Grid > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation. Write your own CSS instead.',
+		},
 	},
 };
 export default meta;

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

@@ -24,6 +24,12 @@ const meta: Meta< typeof Guide > = {
 		previousButtonText: { control: 'text' },
 		onFinish: { action: 'onFinish' },
 	},
+	parameters: {
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
+	},
 };
 export default meta;
 

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

@@ -74,6 +74,11 @@ const meta: Meta< typeof HStack > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `Stack` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/h-stack/test/index.tsx

@@ -41,7 +41,7 @@ describe( 'props', () => {
 	} );
 
 	test( 'should not pass through invalid props to the `as` component', () => {
-		const AsComponent = ( props: JSX.IntrinsicElements[ 'div' ] ) => {
+		const AsComponent = ( props: React.JSX.IntrinsicElements[ 'div' ] ) => {
 			return <div { ...props } />;
 		};
 

package/src/heading/hook.ts

@@ -16,11 +16,11 @@ export function useHeading(
 		level = 2,
 		color = COLORS.theme.foreground,
 		isBlock = true,
-		weight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
+		weight = CONFIG.fontWeightHeading as React.CSSProperties[ 'fontWeight' ],
 		...otherProps
 	} = useContextSystem( props, 'Heading' );
 
-	const as = ( asProp || `h${ level }` ) as keyof JSX.IntrinsicElements;
+	const as = ( asProp || `h${ level }` ) as keyof React.JSX.IntrinsicElements;
 
 	const a11yProps: {
 		role?: string;

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

@@ -29,6 +29,11 @@ const meta: Meta< typeof Heading > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Values are not aligned with the current design system. Use [typography tokens](?path=/docs/tokens-typography--page) from `@wordpress/base-styles` instead.',
+		},
 	},
 };
 export default meta;

package/src/heading/test/__snapshots__/index.tsx.snap

@@ -5,7 +5,6 @@ exports[`props should render correctly 1`] = `
   color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
-  text-wrap: balance;
   text-wrap: pretty;
   color: var(--wp-components-color-foreground, #1e1e1e);
   font-size: calc(1.95 * 13px);

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

@@ -91,9 +91,9 @@ describe( 'withNotices return type', () => {
 } );
 
 describe( 'withNotices operations', () => {
-	let handle: React.MutableRefObject< any >;
+	let handle: React.RefObject< any >;
 	const Handle = ( props: any ) => {
-		handle = useRef();
+		handle = useRef( null );
 		return <TestNoticeOperations { ...props } ref={ handle } />;
 	};
 

package/src/higher-order/with-notices/types.ts

@@ -31,5 +31,5 @@ export type WithNoticeProps = {
 		 */
 		removeAllNotices: () => void;
 	};
-	noticeUI: false | JSX.Element;
+	noticeUI: false | React.JSX.Element;
 };

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

@@ -4,16 +4,14 @@
 import { createHigherOrderComponent, useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 
-/** @typedef {import('react').ComponentType} ComponentType */
-
 /**
  * A Higher Order Component used to provide speak and debounced speak functions.
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
  *
- * @param {ComponentType} Component The component to be wrapped.
+ * @param {React.ComponentType} Component The component to be wrapped.
  *
- * @return {ComponentType} The wrapped component.
+ * @return {React.ComponentType} The wrapped component.
  */
 export default createHigherOrderComponent(
 	( Component ) =>