@wordpress/components 32.0.1-next.v.0 → 32.1.0

package/src/color-palette/index.tsx

@@ -365,5 +365,6 @@ function UnforwardedColorPalette(
  * ```
  */
 export const ColorPalette = forwardRef( UnforwardedColorPalette );
+ColorPalette.displayName = 'ColorPalette';
 
 export default ColorPalette;

package/src/color-palette/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**

package/src/combobox-control/index.tsx

@@ -45,7 +45,7 @@ interface DetectOutsideComponentProps {
 }
 
 const DetectOutside = withFocusOutside(
-	class extends Component< DetectOutsideComponentProps > {
+	class DetectOutsideComponent extends Component< DetectOutsideComponentProps > {
 		handleFocusOutside( event: React.FocusEvent ) {
 			this.props.onFocusOutside( event );
 		}

package/src/combobox-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -69,6 +69,7 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 	return (
 		<>
 			<ComboboxControl
+				__next40pxDefaultSize
 				{ ...args }
 				value={ value }
 				onChange={ ( ...changeArgs ) => {

package/src/composite/legacy/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/composite/legacy/stories/utils.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryContext } from '@storybook/react';
+import type { StoryContext } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/confirm-dialog/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -58,7 +58,11 @@ const Template: StoryFn< typeof ConfirmDialog > = ( {
 
 	return (
 		<>
-			<Button variant="primary" onClick={ () => setIsOpen( true ) }>
+			<Button
+				__next40pxDefaultSize
+				variant="primary"
+				onClick={ () => setIsOpen( true ) }
+			>
 				Open ConfirmDialog
 			</Button>
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 /**
  * WordPress dependencies

package/src/custom-select-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -57,6 +57,7 @@ const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 
 	return (
 		<CustomSelectControl
+			__next40pxDefaultSize
 			{ ...props }
 			onChange={ onChange }
 			value={ value }

package/src/custom-select-control-v2/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**

package/src/date-time/date-time/index.tsx

@@ -78,5 +78,6 @@ function UnforwardedDateTimePicker(
  * ```
  */
 export const DateTimePicker = forwardRef( UnforwardedDateTimePicker );
+DateTimePicker.displayName = 'DateTimePicker';
 
 export default DateTimePicker;

package/src/date-time/stories/date-time.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/date-time/stories/date.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/date-time/stories/time.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/disclosure/index.tsx

@@ -40,4 +40,5 @@ const UnforwardedDisclosureContent = (
 };
 
 export const DisclosureContent = forwardRef( UnforwardedDisclosureContent );
+DisclosureContent.displayName = 'DisclosureContent';
 export default DisclosureContent;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import type { DragEvent } from 'react';
 import { fn } from 'storybook/test';
 

package/src/drop-zone/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -49,6 +49,7 @@ export const Default: StoryObj< typeof Dropdown > = {
 	args: {
 		renderToggle: ( { isOpen, onToggle } ) => (
 			<Button
+				__next40pxDefaultSize
 				onClick={ onToggle }
 				aria-expanded={ isOpen }
 				variant="primary"

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**

package/src/duotone-picker/stories/duotone-picker.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/duotone-picker/stories/duotone-swatch.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/external-link/index.tsx

@@ -92,5 +92,6 @@ function UnforwardedExternalLink(
  * ```
  */
 export const ExternalLink = forwardRef( UnforwardedExternalLink );
+ExternalLink.displayName = 'ExternalLink';
 
 export default ExternalLink;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**

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

@@ -295,5 +295,6 @@ const UnforwardedFontSizePicker = (
 };
 
 export const FontSizePicker = forwardRef( UnforwardedFontSizePicker );
+FontSizePicker.displayName = 'FontSizePicker';
 
 export default FontSizePicker;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryFn } from '@storybook/react-webpack5';
+import type { StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies
@@ -25,6 +25,7 @@ const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	const [ fontSize, setFontSize ] = useState( value );
 	return (
 		<FontSizePicker
+			__next40pxDefaultSize
 			{ ...props }
 			value={ fontSize }
 			onChange={ setFontSize }
@@ -35,6 +36,7 @@ const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
+	__next40pxDefaultSize: true,
 	fontSizes: [
 		{
 			name: 'Small',

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -42,6 +42,7 @@ const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	const [ fontSize, setFontSize ] = useState( value );
 	return (
 		<FontSizePicker
+			__next40pxDefaultSize
 			{ ...props }
 			value={ fontSize }
 			onChange={ ( nextValue ) => {

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

@@ -54,6 +54,8 @@ export function FormFileUpload( {
 	const ui = render ? (
 		render( { openFileDialog } )
 	) : (
+		// Disable reason: the parent component already takes care of the `__next40pxDefaultSize` prop.
+		// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 		<Button onClick={ openFileDialog } { ...props }>
 			{ children }
 		</Button>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ const meta: Meta< typeof FormFileUpload > = {
 export default meta;
 
 const Template: StoryFn< typeof FormFileUpload > = ( props ) => {
-	return <FormFileUpload { ...props } />;
+	return <FormFileUpload __next40pxDefaultSize { ...props } />;
 };
 
 export const Default = Template.bind( {} );

package/src/form-toggle/index.tsx

@@ -79,5 +79,6 @@ function UnforwardedFormToggle(
  * ```
  */
 export const FormToggle = forwardRef( UnforwardedFormToggle );
+FormToggle.displayName = 'FormToggle';
 
 export default FormToggle;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import type { ComponentProps } from 'react';
 /**
  * WordPress dependencies
@@ -50,6 +50,7 @@ const DefaultTemplate: StoryFn< typeof FormTokenField > = ( { ...args } ) => {
 
 	return (
 		<FormTokenField
+			__next40pxDefaultSize
 			{ ...args }
 			value={ selectedContinents }
 			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
@@ -90,6 +91,7 @@ export const Async: StoryFn< typeof FormTokenField > = ( {
 
 	return (
 		<FormTokenField
+			__next40pxDefaultSize
 			{ ...args }
 			value={ selectedContinents }
 			suggestions={ availableContinents }

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

@@ -92,5 +92,6 @@ export function UnForwardedTokenInput(
 }
 
 export const TokenInput = forwardRef( UnForwardedTokenInput );
+TokenInput.displayName = 'TokenInput';
 
 export default TokenInput;

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

@@ -70,13 +70,13 @@ export default function Token( {
 				<span aria-hidden="true">{ transformedValue }</span>
 			</span>
 
+			{ /* Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence. */ }
+			{ /* eslint-disable-next-line @wordpress/components-no-unsafe-button-disabled */ }
 			<Button
 				className="components-form-token-field__remove-token"
 				size="small"
 				icon={ closeSmall }
 				onClick={ ! disabled ? onClick : undefined }
-				// Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.
-				// eslint-disable-next-line no-restricted-syntax
 				disabled={ disabled }
 				label={ messages.remove }
 				aria-describedby={ `components-form-token-field__token-text-${ instanceId }` }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,11 @@ const Template: StoryFn< typeof Guide > = ( { onFinish, ...props } ) => {
 
 	return (
 		<>
-			<Button variant="secondary" onClick={ openGuide }>
+			<Button
+				__next40pxDefaultSize
+				variant="secondary"
+				onClick={ openGuide }
+			>
 				Open Guide
 			</Button>
 			{ isOpen && (

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryFn, Meta } from '@storybook/react-webpack5';
+import type { StoryFn, Meta } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryFn, Meta } from '@storybook/react-webpack5';
+import type { StoryFn, Meta } from '@storybook/react-vite';
 /**
  * Internal dependencies
  */

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

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

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

package/src/higher-order/with-fallback-styles/index.tsx

@@ -26,7 +26,7 @@ export default (
 	) => { [ key: string ]: any }
 ) =>
 	createHigherOrderComponent( ( WrappedComponent ) => {
-		return class extends Component< Props, State > {
+		return class WithFallbackStyles extends Component< Props, State > {
 			nodeRef?: HTMLElement;
 
 			constructor( props: Props ) {

package/src/higher-order/with-focus-outside/index.tsx

@@ -8,31 +8,32 @@ import {
 } from '@wordpress/compose';
 
 export default createHigherOrderComponent(
-	( WrappedComponent ) => ( props ) => {
-		const [ handleFocusOutside, setHandleFocusOutside ] = useState<
-			undefined | ( ( event: React.FocusEvent ) => void )
-		>( undefined );
+	( WrappedComponent ) =>
+		function WithFocusOutside( props ) {
+			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 )
-						: undefined
-				),
-			[]
-		);
+			const bindFocusOutsideHandler = useCallback<
+				( node: React.FocusEvent ) => void
+			>(
+				( node: any ) =>
+					setHandleFocusOutside( () =>
+						node?.handleFocusOutside
+							? node.handleFocusOutside.bind( node )
+							: undefined
+					),
+				[]
+			);
 
-		return (
-			<div { ...useFocusOutside( handleFocusOutside ) }>
-				<WrappedComponent
-					ref={ bindFocusOutsideHandler }
-					{ ...props }
-				/>
-			</div>
-		);
-	},
+			return (
+				<div { ...useFocusOutside( handleFocusOutside ) }>
+					<WrappedComponent
+						ref={ bindFocusOutsideHandler }
+						{ ...props }
+					/>
+				</div>
+			);
+		},
 	'withFocusOutside'
 );