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

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

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

package/src/icon/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/input-control/index.tsx

@@ -138,5 +138,6 @@ export function UnforwardedInputControl(
  * ```
  */
 export const InputControl = forwardRef( UnforwardedInputControl );
+InputControl.displayName = 'InputControl';
 
 export default InputControl;

package/src/input-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';
 
 /**
@@ -45,7 +45,7 @@ const meta: Meta< typeof InputControl > = {
 export default meta;
 
 const Template: StoryFn< typeof InputControl > = ( args ) => (
-	<InputControl { ...args } />
+	<InputControl __next40pxDefaultSize { ...args } />
 );
 
 export const Default = Template.bind( {} );
@@ -123,6 +123,7 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
 	const [ visible, setVisible ] = useState( false );
 	return (
 		<InputControl
+			__next40pxDefaultSize
 			type={ visible ? 'text' : 'password' }
 			suffix={
 				<InputControlSuffixWrapper variant="control">

package/src/input-control/styles/input-control-styles.tsx

@@ -314,10 +314,6 @@ const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 		padding-bottom: 0;
 		max-width: 100%;
 		z-index: 1;
-
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
 	}
 `;
 

package/src/item-group/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/keyboard-shortcuts/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/menu/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryObj, Meta } from '@storybook/react-webpack5';
+import type { StoryObj, Meta } from '@storybook/react-vite';
 import { css } from '@emotion/react';
 import { fn } from 'storybook/test';
 
@@ -666,7 +666,10 @@ export const InsideModal: StoryObj< typeof Menu > = {
 								</Menu>
 							</Menu.Popover>
 						</Menu>
-						<Button onClick={ () => setModalOpen( false ) }>
+						<Button
+							__next40pxDefaultSize
+							onClick={ () => setModalOpen( false ) }
+						>
 							Close modal
 						</Button>
 					</Modal>

package/src/menu-group/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/menu-item/index.tsx

@@ -109,5 +109,6 @@ function UnforwardedMenuItem(
  * ```
  */
 export const MenuItem = forwardRef( UnforwardedMenuItem );
+MenuItem.displayName = 'MenuItem';
 
 export default MenuItem;

package/src/menu-item/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/menu-items-choice/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/modal/index.tsx

@@ -415,5 +415,6 @@ function UnforwardedModal(
  * ```
  */
 export const Modal = forwardRef( UnforwardedModal );
+Modal.displayName = 'Modal';
 
 export default Modal;

package/src/modal/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';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,11 @@ const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 
 	return (
 		<>
-			<Button variant="secondary" onClick={ openModal }>
+			<Button
+				__next40pxDefaultSize
+				variant="secondary"
+				onClick={ openModal }
+			>
 				Open Modal
 			</Button>
 			{ isOpen && (
@@ -80,7 +84,11 @@ const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 						style={ { marginBottom: '20px' } }
 					/>
 
-					<Button variant="secondary" onClick={ closeModal }>
+					<Button
+						__next40pxDefaultSize
+						variant="secondary"
+						onClick={ closeModal }
+					>
 						Close Modal
 					</Button>
 				</Modal>

package/src/navigable-container/menu.tsx

@@ -96,5 +96,6 @@ export function UnforwardedNavigableMenu(
  *  ```
  */
 export const NavigableMenu = forwardRef( UnforwardedNavigableMenu );
+NavigableMenu.displayName = 'NavigableMenu';
 
 export default NavigableMenu;

package/src/navigable-container/stories/navigable-menu.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/navigable-container/stories/tabbable-container.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/navigable-container/tabbable.tsx

@@ -88,5 +88,6 @@ export function UnforwardedTabbableContainer(
  *  ```
  */
 export const TabbableContainer = forwardRef( UnforwardedTabbableContainer );
+TabbableContainer.displayName = 'TabbableContainer';
 
 export default TabbableContainer;

package/src/navigation/back-button/index.tsx

@@ -68,5 +68,6 @@ function UnforwardedNavigationBackButton(
 export const NavigationBackButton = forwardRef(
 	UnforwardedNavigationBackButton
 );
+NavigationBackButton.displayName = 'NavigationBackButton';
 
 export default NavigationBackButton;

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

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

package/src/navigation/stories/utils/controlled-state.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryFn } from '@storybook/react';
+import type { StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies
@@ -32,6 +32,7 @@ export const ControlledStateStory: StoryFn< typeof Navigation > = ( {
 		children: React.ReactNode;
 	} ) => (
 		<Button
+			__next40pxDefaultSize
 			href={ href }
 			// Since we're not actually navigating pages, simulate it with onClick.
 			onClick={
@@ -121,6 +122,7 @@ export const ControlledStateStory: StoryFn< typeof Navigation > = ( {
 				</p>
 				<p>
 					<Button
+						__next40pxDefaultSize
 						variant="secondary"
 						onClick={ () => {
 							setActiveMenu( 'nested-sub-menu' );
@@ -131,6 +133,7 @@ export const ControlledStateStory: StoryFn< typeof Navigation > = ( {
 				</p>
 				<p>
 					<Button
+						__next40pxDefaultSize
 						variant="secondary"
 						onClick={ () => {
 							setActiveItem( 'child-2' );

package/src/navigation/stories/utils/default.tsx

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

package/src/navigation/stories/utils/group.tsx

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

package/src/navigation/stories/utils/hide-if-empty.tsx

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

package/src/navigation/stories/utils/more-examples.tsx

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

package/src/navigation/stories/utils/search.tsx

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

package/src/navigator/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';
 
 /**
  * Internal dependencies
@@ -141,6 +141,7 @@ const NavigatorButtonWithSkipFocus = ( {
 
 	return (
 		<Button
+			__next40pxDefaultSize
 			{ ...props }
 			style={ {
 				marginInline: '8px',

package/src/navigator/test/index.tsx

@@ -20,7 +20,7 @@ import type { NavigateOptions } from '../types';
 
 const INVALID_HTML_ATTRIBUTE = {
 	raw: '/ "\'><=invalid_path',
-	escaped: "/ &quot;'&gt;<=invalid_path",
+	escaped: "/ &quot;'&gt;&lt;=invalid_path",
 };
 
 const PATHS = {

package/src/notice/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/number-control/index.tsx

@@ -281,5 +281,6 @@ function UnforwardedNumberControl(
 }
 
 export const NumberControl = forwardRef( UnforwardedNumberControl );
+NumberControl.displayName = 'NumberControl';
 
 export default NumberControl;

package/src/number-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';
 
 /**
  * WordPress dependencies
@@ -44,6 +44,7 @@ const Template: StoryFn< typeof NumberControl > = ( {
 	return (
 		<>
 			<NumberControl
+				__next40pxDefaultSize
 				{ ...props }
 				value={ value }
 				onChange={ ( v, extra ) => {

package/src/palette-edit/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/panel/body.tsx

@@ -147,5 +147,6 @@ const PanelBodyTitle = forwardRef(
 );
 
 export const PanelBody = forwardRef( UnforwardedPanelBody );
+PanelBody.displayName = 'PanelBody';
 
 export default PanelBody;

package/src/panel/index.tsx

@@ -44,5 +44,6 @@ function UnforwardedPanel(
  * ```
  */
 export const Panel = forwardRef( UnforwardedPanel );
+Panel.displayName = 'Panel';
 
 export default Panel;

package/src/panel/row.tsx

@@ -33,5 +33,6 @@ function UnforwardedPanelRow(
  * It is a flex container with a top margin for spacing.
  */
 export const PanelRow = forwardRef( UnforwardedPanelRow );
+PanelRow.displayName = 'PanelRow';
 
 export default PanelRow;

package/src/panel/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/placeholder/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/popover/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
@@ -114,6 +114,7 @@ export const Default: StoryObj< typeof Popover > = {
 					} }
 				>
 					<Button
+						__next40pxDefaultSize
 						variant="secondary"
 						onClick={ toggleVisible }
 						ref={ buttonRef }
@@ -209,6 +210,7 @@ export const DynamicHeight: StoryObj< typeof Popover > = {
 				<div style={ { padding: '20px' } }>
 					<div>
 						<Button
+							__next40pxDefaultSize
 							variant="primary"
 							onClick={ increase }
 							style={ {
@@ -218,7 +220,11 @@ export const DynamicHeight: StoryObj< typeof Popover > = {
 							Increase Size
 						</Button>
 
-						<Button variant="primary" onClick={ decrease }>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							onClick={ decrease }
+						>
 							Decrease Size
 						</Button>
 					</div>
@@ -302,6 +308,7 @@ export const WithCloseHandlers: StoryObj< typeof Popover > = {
 				} }
 			>
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ toggleVisible }
 					ref={ buttonRef }

package/src/private-apis.ts

@@ -14,6 +14,7 @@ import Badge from './badge';
 import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
 import {
 	ValidatedCheckboxControl,
+	ValidatedComboboxControl,
 	ValidatedInputControl,
 	ValidatedNumberControl,
 	ValidatedSelectControl,
@@ -43,6 +44,7 @@ lock( privateApis, {
 	Picker,
 	ValidatedInputControl,
 	ValidatedCheckboxControl,
+	ValidatedComboboxControl,
 	ValidatedNumberControl,
 	ValidatedSelectControl,
 	ValidatedRadioControl,

package/src/progress-bar/index.tsx

@@ -60,5 +60,6 @@ function UnforwardedProgressBar(
  * ```
  */
 export const ProgressBar = forwardRef( UnforwardedProgressBar );
+ProgressBar.displayName = 'ProgressBar';
 
 export default ProgressBar;

package/src/progress-bar/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/query-controls/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/radio-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';
 
 /**
  * WordPress dependencies

package/src/radio-group/index.tsx

@@ -74,4 +74,5 @@ function UnforwardedRadioGroup(
  * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
  */
 export const RadioGroup = forwardRef( UnforwardedRadioGroup );
+RadioGroup.displayName = 'RadioGroup';
 export default RadioGroup;

package/src/radio-group/radio.tsx

@@ -43,6 +43,8 @@ function UnforwardedRadio(
 			ref={ ref }
 			value={ value }
 			render={
+				// Disable: the parent component already takes care of the `__next40pxDefaultSize` prop.
+				// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 				<Button
 					variant={ isChecked ? 'primary' : 'secondary' }
 					{ ...props }
@@ -58,4 +60,5 @@ function UnforwardedRadio(
  * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
  */
 export const Radio = forwardRef( UnforwardedRadio );
+Radio.displayName = 'Radio';
 export default Radio;

package/src/radio-group/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/range-control/index.tsx

@@ -405,5 +405,6 @@ function UnforwardedRangeControl(
  * ```
  */
 export const RangeControl = forwardRef( UnforwardedRangeControl );
+RangeControl.displayName = 'RangeControl';
 
 export default RangeControl;

package/src/range-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';
 
 /**
@@ -66,6 +66,7 @@ const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 
 	return (
 		<RangeControl
+			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v ) => {
@@ -100,6 +101,7 @@ export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 	return (
 		<>
 			<RangeControl
+				__next40pxDefaultSize
 				{ ...args }
 				value={ value }
 				onChange={ ( v ) => {
@@ -130,6 +132,7 @@ const MarkTemplate: StoryFn< typeof RangeControl > = ( {
 		<>
 			<h2>{ label }</h2>
 			<RangeControl
+				__next40pxDefaultSize
 				{ ...args }
 				label="Automatic marks"
 				marks
@@ -140,6 +143,7 @@ const MarkTemplate: StoryFn< typeof RangeControl > = ( {
 				value={ automaticValue }
 			/>
 			<RangeControl
+				__next40pxDefaultSize
 				{ ...args }
 				label="Custom marks"
 				onChange={ ( v ) => {

package/src/resizable-box/index.tsx

@@ -134,5 +134,6 @@ function UnforwardedResizableBox(
 }
 
 export const ResizableBox = forwardRef( UnforwardedResizableBox );
+ResizableBox.displayName = 'ResizableBox';
 
 export default ResizableBox;