@wordpress/components 31.0.1-next.8fd3f8831.0 → 32.0.0

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/stories/index.story.tsx

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryFn } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
 
 /**
  * WordPress dependencies
@@ -21,7 +21,6 @@ const meta: Meta< typeof InputControl > = {
 	title: 'Components/Selection & Input/Common/InputControl',
 	id: 'components-inputcontrol',
 	component: InputControl,
-	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
@@ -46,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( {} );
@@ -124,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';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies
@@ -13,7 +13,6 @@ type ItemProps = React.ComponentPropsWithoutRef< typeof Item >;
 
 const meta: Meta< typeof ItemGroup > = {
 	component: ItemGroup,
-	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Item },
 	title: 'Components/ItemGroup',
 	argTypes: {

package/src/keyboard-shortcuts/stories/index.story.tsx

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

package/src/menu/popover.tsx

@@ -71,7 +71,7 @@ export const Popover = forwardRef<
 	}
 
 	return (
-		<Ariakit.Menu
+		<Styled.Menu
 			{ ...otherProps }
 			ref={ ref }
 			modal={ modal }
@@ -84,20 +84,13 @@ 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
-			render={ ( renderProps ) => (
-				// Two wrappers are needed for the entry animation, where the menu
-				// container scales with a different factor than its contents.
-				// The {...renderProps} are passed to the inner wrapper, so that the
-				// menu element is the direct parent of the menu item elements.
-				<Styled.PopoverOuterWrapper variant={ menuContext.variant }>
-					<Styled.PopoverInnerWrapper { ...renderProps } />
-				</Styled.PopoverOuterWrapper>
-			) }
+			variant={ menuContext.variant }
 		>
 			{ children }
-		</Ariakit.Menu>
+		</Styled.Menu>
 	);
 } );

package/src/menu/stories/best-practices.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import * as MenuStories from './index.story';
 

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

@@ -1,9 +1,9 @@
 /**
  * External dependencies
  */
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-vite';
 import { css } from '@emotion/react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 
 /**
  * WordPress dependencies
@@ -28,29 +28,18 @@ const meta: Meta< typeof Menu > = {
 	title: 'Components/Actions/Menu',
 	component: Menu,
 	subcomponents: {
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Item: Menu.Item,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		CheckboxItem: Menu.CheckboxItem,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Group: Menu.Group,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		GroupLabel: Menu.GroupLabel,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Separator: Menu.Separator,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Context: Menu.Context,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		RadioItem: Menu.RadioItem,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		ItemLabel: Menu.ItemLabel,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		ItemHelpText: Menu.ItemHelpText,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		TriggerButton: Menu.TriggerButton,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		SubmenuTriggerItem: Menu.SubmenuTriggerItem,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Popover: Menu.Popover,
 	},
 	args: {
@@ -677,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

@@ -32,10 +32,25 @@ const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VAR
 
 const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
 
-export const PopoverOuterWrapper = styled.div<
-	Pick< ContextProps, 'variant' >
->`
+export const Menu = styled( Ariakit.Menu )< Pick< ContextProps, 'variant' > >`
 	position: relative;
+	/* Same as popover component */
+	/* TODO: is there a way to read the sass variable? */
+	z-index: 1000000;
+
+	display: grid;
+	grid-template-columns: ${ GRID_TEMPLATE_COLS };
+	grid-template-rows: auto;
+
+	box-sizing: border-box;
+	min-width: 160px;
+	max-width: 320px;
+	max-height: var( --popover-available-height );
+
+	padding: ${ CONTENT_WRAPPER_PADDING };
+
+	overscroll-behavior: contain;
+	overflow: auto;
 
 	background-color: ${ COLORS.ui.background };
 	border-radius: ${ CONFIG.radiusMedium };
@@ -45,7 +60,8 @@ export const PopoverOuterWrapper = styled.div<
 			: DEFAULT_BOX_SHADOW };
 	` }
 
-	overflow: hidden;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent !important;
 
 	/* Open/close animation */
 	@media not ( prefers-reduced-motion ) {
@@ -56,60 +72,46 @@ export const PopoverOuterWrapper = styled.div<
 			${ DROPDOWN_MOTION_CSS.FADE_EASING };
 		will-change: transform, opacity;
 
-		/* Regardless of the side, fade in and out. */
-		opacity: 0;
-		&:has( [data-enter] ) {
-			opacity: 1;
-		}
-
-		/* Slide in the direction the menu is opening. */
-		&:has( [data-side='bottom'] ) {
-			transform: translateY( -${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&:has( [data-side='top'] ) {
-			transform: translateY( ${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&:has( [data-side='left'] ) {
-			transform: translateX( ${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&:has( [data-side='right'] ) {
-			transform: translateX( -${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&:has( [data-enter][data-side='bottom'] ),
-		&:has( [data-enter][data-side='top'] ) {
-			transform: translateY( 0 );
-		}
-		&:has( [data-enter][data-side='left'] ),
-		&:has( [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 );
+			}
 		}
 	}
 `;
 
-export const PopoverInnerWrapper = styled.div`
-	position: relative;
-	/* Same as popover component */
-	/* TODO: is there a way to read the sass variable? */
-	z-index: 1000000;
-
-	display: grid;
-	grid-template-columns: ${ GRID_TEMPLATE_COLS };
-	grid-template-rows: auto;
-
-	box-sizing: border-box;
-	min-width: 160px;
-	max-width: 320px;
-	max-height: var( --popover-available-height );
-
-	padding: ${ CONTENT_WRAPPER_PADDING };
-
-	overscroll-behavior: contain;
-	overflow: auto;
-
-	/* Only visible in Windows High Contrast mode */
-	outline: 2px solid transparent !important;
-`;
-
 const baseItem = css`
 	all: unset;
 
@@ -181,7 +183,7 @@ const baseItem = css`
 	}
 
 	/* When the item is the trigger of an open submenu */
-	${ PopoverInnerWrapper }:not(:focus) &:not(:focus)[aria-expanded="true"] {
+	${ Menu }:not(:focus) &:not(:focus)[aria-expanded="true"] {
 		background-color: ${ LIGHT_BACKGROUND_COLOR };
 		color: ${ COLORS.theme.foreground };
 	}
@@ -279,9 +281,9 @@ export const ItemSuffixWrapper = styled.span`
 	 * When the parent menu item is active, except when it's a non-focused/hovered
 	 * submenu trigger (in that case, color should not be inherited)
 	 */
-	[data-active-item]:not( [data-focus-visible] ) *:not(${ PopoverInnerWrapper }) &,
+	[data-active-item]:not( [data-focus-visible] ) *:not(${ Menu }) &,
 	/* When the parent menu item is disabled */
-	[aria-disabled='true'] *:not(${ PopoverInnerWrapper }) & {
+	[aria-disabled='true'] *:not(${ Menu }) & {
 		color: inherit;
 	}
 `;
@@ -344,10 +346,8 @@ export const ItemHelpText = styled( Truncate )`
 	color: ${ LIGHTER_TEXT_COLOR };
 	overflow-wrap: anywhere;
 
-	[data-active-item]:not( [data-focus-visible] )
-		*:not( ${ PopoverInnerWrapper } )
-		&,
-	[aria-disabled='true'] *:not( ${ PopoverInnerWrapper } ) & {
+	[data-active-item]:not( [data-focus-visible] ) *:not( ${ Menu } ) &,
+	[aria-disabled='true'] *:not( ${ Menu } ) & {
 		color: inherit;
 	}
 `;

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react-vite';
+
 /**
  * WordPress dependencies
  */
@@ -10,11 +15,6 @@ import MenuGroup from '..';
 import MenuItem from '../../menu-item';
 import MenuItemsChoice from '../../menu-items-choice';
 
-/**
- * External dependencies
- */
-import type { Meta, StoryFn } from '@storybook/react';
-
 const meta: Meta< typeof MenuGroup > = {
 	title: 'Components/Actions/MenuGroup',
 	component: MenuGroup,

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
+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';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryFn, Meta } from '@storybook/react';
+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/stories/navigable-menu.story.tsx

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

package/src/navigable-container/stories/tabbable-container.story.tsx

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

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

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import type { Meta } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
 
 /**
  * Internal dependencies
@@ -30,13 +30,9 @@ const meta: Meta< typeof Navigation > = {
 	id: 'components-navigation',
 	component: Navigation,
 	subcomponents: {
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		NavigationBackButton,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		NavigationGroup,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		NavigationItem,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		NavigationMenu,
 	},
 	argTypes: {

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';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 /**
  * Internal dependencies
@@ -14,11 +14,8 @@ import { Navigator, useNavigator } from '../';
 const meta: Meta< typeof Navigator > = {
 	component: Navigator,
 	subcomponents: {
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Screen: Navigator.Screen,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Button: Navigator.Button,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		BackButton: Navigator.BackButton,
 	},
 	title: 'Components/Navigation/Navigator',
@@ -144,6 +141,7 @@ const NavigatorButtonWithSkipFocus = ( {
 
 	return (
 		<Button
+			__next40pxDefaultSize
 			{ ...props }
 			style={ {
 				marginInline: '8px',

package/src/notice/README.md

@@ -144,13 +144,14 @@ A deprecated alternative to `onRemove`. This prop is kept for compatibility reas
 An array of notice actions. Each member object should contain:
 
 - `label`: `string` containing the text of the button/link
-- `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify what the action does.
-- `openInNewTab`: `boolean` (optional) When set to `true`, opens the URL in a new browser tab.
+- `url`: `string` (optional) The href URL for the action button. If provided, the action will render as an anchor tag.
+- `onClick`: `( event: SyntheticEvent ) => void` (optional) Function to call when clicked. Can be used alongside `url`.
+- `disabled`: `boolean` (optional) Whether the action button is disabled.
 - `className`: `string` (optional) to add custom classes to the button styles.
 - `noDefaultClasses`: `boolean` (optional) A value of `true` will remove all default styling.
 - `variant`: `'primary' | 'secondary' | 'link'` (optional) You can denote a primary button action for a notice by passing a value of `primary`.
 
-The default appearance of an action button is inferred based on whether `url` or `onClick` are provided, rendering the button as a link if appropriate. If both props are provided, `url` takes precedence, and the action button will render as an anchor tag.
+The default `variant` of an action button is `'secondary'` if only `onClick` is provided, or `'link'` if `url` is provided.
 
 ## Related components
 

package/src/notice/index.tsx

@@ -123,6 +123,7 @@ function Notice( {
 									noDefaultClasses = false,
 									onClick,
 									url,
+									disabled,
 								}: NoticeAction &
 									// `isPrimary` is a legacy prop included for
 									// backcompat, but `variant` should be used
@@ -152,7 +153,9 @@ function Notice( {
 										key={ index }
 										href={ url }
 										variant={ computedVariant }
-										onClick={ url ? undefined : onClick }
+										onClick={ onClick }
+										disabled={ disabled }
+										accessibleWhenDisabled
 										className={ clsx(
 											'components-notice__action',
 											buttonCustomClasses