@wordpress/components 32.2.1-next.v.202602111440.0 → 32.2.1

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';
 
 /**
@@ -38,11 +38,13 @@ const meta: Meta< typeof FontSizePicker > = {
 };
 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
@@ -57,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>
@@ -75,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-token-field/style.scss

@@ -25,6 +25,7 @@
 		flex: 1;
 		font-family: inherit;
 		font-size: 16px;
+		line-height: 1; // Override forms.css styles
 		width: 100%;
 		max-width: 100%;
 		margin-left: 4px;

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';
 
 /**
@@ -35,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',
@@ -86,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 (
@@ -104,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',
@@ -135,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/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/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 ) =>

package/src/icon/index.tsx

@@ -22,8 +22,8 @@ import type { IconKey as DashiconIconKey } from '../dashicon/types';
 export type IconType =
 	| DashiconIconKey
 	| ComponentType< { size?: number } >
-	| ( ( props: { size?: number } ) => JSX.Element )
-	| JSX.Element;
+	| ( ( props: { size?: number } ) => React.JSX.Element )
+	| React.JSX.Element;
 
 type AdditionalProps< T > = T extends ComponentType< infer U >
 	? U

package/src/keyboard-shortcuts/index.tsx

@@ -61,7 +61,7 @@ function KeyboardShortcuts( {
 	bindGlobal,
 	eventName,
 }: KeyboardShortcutsProps ) {
-	const target = useRef( null );
+	const target = useRef< HTMLDivElement >( null );
 
 	const element = Object.entries( shortcuts ?? {} ).map(
 		( [ shortcut, callback ] ) => (

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

@@ -513,7 +513,7 @@ const Fill = ( { children }: { children: React.ReactNode } ) => {
 				const { forwardedContext = [] } = fillProps;
 
 				return forwardedContext.reduce(
-					( inner: JSX.Element, [ Provider, props ] ) => (
+					( inner: React.JSX.Element, [ Provider, props ] ) => (
 						<Provider { ...props }>{ inner }</Provider>
 					),
 					innerMarkup

package/src/menu-item/types.ts

@@ -27,7 +27,7 @@ export type MenuItemProps = Pick< ButtonAsButtonProps, 'isDestructive' > & {
 	 *
 	 * @default null
 	 */
-	icon?: JSX.Element | null;
+	icon?: React.JSX.Element | null;
 	/**
 	 * Determines where to display the provided `icon`.
 	 */

package/src/modal/index.tsx

@@ -63,7 +63,7 @@ function UnforwardedModal(
 		__experimentalHideHeader = false,
 	} = props;
 
-	const ref = useRef< HTMLDivElement >();
+	const ref = useRef< HTMLDivElement >( null );
 
 	const instanceId = useInstanceId( Modal );
 	const headingId = title
@@ -113,12 +113,13 @@ function UnforwardedModal(
 
 	// Accessibly isolates/unisolates the modal.
 	useEffect( () => {
-		ariaHelper.modalize( ref.current );
+		ariaHelper.modalize( ref.current! );
 		return () => ariaHelper.unmodalize();
 	}, [] );
 
 	// Keeps a fresh ref for the subsequent effect.
-	const onRequestCloseRef = useRef< ModalProps[ 'onRequestClose' ] >();
+	const onRequestCloseRef =
+		useRef< ModalProps[ 'onRequestClose' ] >( undefined );
 	useEffect( () => {
 		onRequestCloseRef.current = onRequestClose;
 	}, [ onRequestClose ] );

package/src/modal/types.ts

@@ -70,7 +70,7 @@ export type ModalProps = {
 	/**
 	 * If this property is added, an icon will be added before the title.
 	 */
-	icon?: JSX.Element;
+	icon?: React.JSX.Element;
 	/**
 	 * If this property is set to false, the modal will not display a close icon
 	 * and cannot be dismissed.

package/src/modal/use-modal-exit-animation.ts

@@ -3,12 +3,12 @@
  */
 import { useReducedMotion } from '@wordpress/compose';
 import { useCallback, useRef, useState } from '@wordpress/element';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
 import { CONFIG } from '../utils';
-import warning from '@wordpress/warning';
 
 // Animation duration (ms) extracted to JS in order to be used on a setTimeout.
 const FRAME_ANIMATION_DURATION = CONFIG.transitionDuration;
@@ -19,7 +19,7 @@ const FRAME_ANIMATION_DURATION_NUMBER = Number.parseInt(
 const EXIT_ANIMATION_NAME = 'components-modal__disappear-animation';
 
 export function useModalExitAnimation() {
-	const frameRef = useRef< HTMLDivElement >();
+	const frameRef = useRef< HTMLDivElement >( null );
 	const [ isAnimatingOut, setIsAnimatingOut ] = useState( false );
 	const isReducedMotion = useReducedMotion();
 

package/src/navigation/README.md

@@ -218,7 +218,7 @@ If provided, renders `a` instead of `button`.
 
 ### `icon`
 
--   Type: `JSX.Element`
+-   Type: `React.JSX.Element`
 -   Required: No
 
 If no `children` are passed, this prop allows to specify a custom icon for the menu item.

package/src/navigation/types.ts

@@ -180,7 +180,7 @@ export type NavigationItemBaseProps = {
 	 * If no `children` are passed, this prop allows to specify a custom icon for
 	 * the menu item.
 	 */
-	icon?: JSX.Element;
+	icon?: React.JSX.Element;
 	/**
 	 * The unique identifier of the item.
 	 */

package/src/number-control/index.tsx

@@ -72,7 +72,7 @@ function UnforwardedNumberControl(
 			version: '6.3',
 		} );
 	}
-	const inputRef = useRef< HTMLInputElement >();
+	const inputRef = useRef< HTMLInputElement >( null );
 	const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
 
 	const isStepAny = step === 'any';

package/src/palette-edit/index.tsx

@@ -297,7 +297,7 @@ function PaletteEditListView< T extends PaletteElement >( {
 	addColorRef,
 }: PaletteEditListViewProps< T > ) {
 	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
-	const elementsReferenceRef = useRef< typeof elements >();
+	const elementsReferenceRef = useRef< T[] >( undefined );
 	useEffect( () => {
 		elementsReferenceRef.current = elements;
 	}, [ elements ] );
@@ -420,7 +420,7 @@ export function PaletteEdit( {
 		[ isGradient, elements ]
 	);
 
-	const addColorRef = useRef< HTMLButtonElement | null >( null );
+	const addColorRef = useRef< HTMLButtonElement >( null );
 
 	return (
 		<PaletteEditStyles>