@wordpress/components 32.0.1-next.ba3aee3a2.0 → 32.0.2-next.v.0

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'
 );

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/index.ts

@@ -218,6 +218,12 @@ export {
 	useSlot as __experimentalUseSlot,
 	useSlotFills as __experimentalUseSlotFills,
 } from './slot-fill';
+export type {
+	SlotKey,
+	SlotComponentProps,
+	FillComponentProps,
+	DistributiveOmit,
+} from './slot-fill/types';
 export { default as __experimentalStyleProvider } from './style-provider';
 export { ZStack as __experimentalZStack } from './z-stack';
 

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/popover.tsx

@@ -84,6 +84,7 @@ export const Popover = forwardRef<
 			shift={ shift ?? ( menuContext.store.parent ? -4 : 0 ) }
 			hideOnHoverOutside={ false }
 			data-side={ appliedPlacementSide }
+			data-submenu={ !! menuContext.store.parent || undefined }
 			wrapperProps={ wrapperProps }
 			hideOnEscape={ hideOnEscape }
 			unmountOnHide

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/styles.ts

@@ -72,32 +72,42 @@ export const Menu = styled( Ariakit.Menu )< Pick< ContextProps, 'variant' > >`
 			${ DROPDOWN_MOTION_CSS.FADE_EASING };
 		will-change: transform, opacity;
 
-		/* Regardless of the side, fade in and out. */
-		opacity: 0;
-		&[data-enter] {
-			opacity: 1;
-		}
-
-		/* Slide in the direction the menu is opening. */
-		&[data-side='bottom'] {
-			transform: translateY( -${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&[data-side='top'] {
-			transform: translateY( ${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&[data-side='left'] {
-			transform: translateX( ${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&[data-side='right'] {
-			transform: translateX( -${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&[data-enter][data-side='bottom'],
-		&[data-enter][data-side='top'] {
-			transform: translateY( 0 );
-		}
-		&[data-enter][data-side='left'],
-		&[data-enter][data-side='right'] {
-			transform: translateX( 0 );
+		&:not( [data-submenu] ) {
+			/* Regardless of the side, fade in and out. */
+			opacity: 0;
+			&[data-enter] {
+				opacity: 1;
+			}
+
+			/* Slide in the direction the menu is opening. */
+			&[data-side='bottom'] {
+				transform: translateY(
+					-${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE }
+				);
+			}
+			&[data-side='top'] {
+				transform: translateY(
+					${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE }
+				);
+			}
+			&[data-side='left'] {
+				transform: translateX(
+					${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE }
+				);
+			}
+			&[data-side='right'] {
+				transform: translateX(
+					-${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE }
+				);
+			}
+			&[data-enter][data-side='bottom'],
+			&[data-enter][data-side='top'] {
+				transform: translateY( 0 );
+			}
+			&[data-enter][data-side='left'],
+			&[data-enter][data-side='right'] {
+				transform: translateX( 0 );
+			}
 		}
 	}
 `;

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 }