@wordpress/components 39.0.0 → 40.1.1-next.v.202608281122.0

package/src/gradient-picker/index.tsx

@@ -3,10 +3,12 @@ import { useInstanceId } from '@wordpress/compose';
 import { useCallback, useMemo } from '@wordpress/element';
 import CircularOptionPicker, {
 	getComputeCircularOptionPickerCommonProps,
+	warnIfCircularOptionPickerAsButtonsIsSet,
 } from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
-import { ColorHeading } from '../color-palette/styles';
+import { Heading } from '../heading';
+import colorPaletteStyles from '../color-palette/style.module.scss';
 import type {
 	GradientPickerComponentProps,
 	PickerProps,
@@ -35,6 +37,7 @@ function SingleOrigin( {
 	onChange,
 	value,
 	selectedSlug,
+	presentation,
 	...additionalProps
 }: PickerProps< GradientObject > ) {
 	const gradientOptions = useMemo( () => {
@@ -43,9 +46,9 @@ function SingleOrigin( {
 			// strictly by slug, which keeps two entries with the same gradient
 			// value apart. Otherwise selection falls back to matching the
 			// gradient value.
-			const isSelected = selectedSlug
-				? slug === selectedSlug
-				: value === gradient;
+			const isSelected =
+				presentation !== 'command-buttons' &&
+				( selectedSlug ? slug === selectedSlug : value === gradient );
 			return (
 				<CircularOptionPicker.Option
 					key={ slug }
@@ -75,7 +78,14 @@ function SingleOrigin( {
 				/>
 			);
 		} );
-	}, [ gradients, value, onChange, clearGradient, selectedSlug ] );
+	}, [
+		gradients,
+		value,
+		onChange,
+		clearGradient,
+		selectedSlug,
+		presentation,
+	] );
 	return (
 		<CircularOptionPicker.OptionGroup
 			className={ className }
@@ -93,6 +103,7 @@ function MultipleOrigin( {
 	value,
 	selectedSlug,
 	headingLevel,
+	presentation,
 }: PickerProps< OriginObject > ) {
 	const instanceId = useInstanceId( MultipleOrigin );
 
@@ -102,9 +113,13 @@ function MultipleOrigin( {
 				const id = `color-palette-${ instanceId }-${ index }`;
 				return (
 					<VStack spacing={ 2 } key={ index }>
-						<ColorHeading level={ headingLevel } id={ id }>
+						<Heading
+							className={ colorPaletteStyles[ 'color-heading' ] }
+							level={ headingLevel }
+							id={ id }
+						>
 							{ name }
-						</ColorHeading>
+						</Heading>
 						<SingleOrigin
 							clearGradient={ clearGradient }
 							gradients={ gradientSet }
@@ -113,6 +128,7 @@ function MultipleOrigin( {
 							}
 							value={ value }
 							selectedSlug={ selectedSlug }
+							presentation={ presentation }
 							aria-labelledby={ id }
 						/>
 					</VStack>
@@ -125,6 +141,7 @@ function MultipleOrigin( {
 function Component( props: PickerProps< any > ) {
 	const {
 		asButtons,
+		presentation,
 		loop,
 		actions,
 		headingLevel,
@@ -132,17 +149,27 @@ function Component( props: PickerProps< any > ) {
 		'aria-labelledby': ariaLabelledby,
 		...additionalProps
 	} = props;
+	warnIfCircularOptionPickerAsButtonsIsSet( 'GradientPicker', asButtons );
+
+	const { metaProps, labelProps, resolvedPresentation } =
+		getComputeCircularOptionPickerCommonProps(
+			asButtons,
+			loop,
+			ariaLabel,
+			ariaLabelledby,
+			presentation
+		);
 	const options = isMultipleOriginArray( props.gradients ) ? (
-		<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />
+		<MultipleOrigin
+			headingLevel={ headingLevel }
+			{ ...additionalProps }
+			presentation={ resolvedPresentation }
+		/>
 	) : (
-		<SingleOrigin { ...additionalProps } />
-	);
-
-	const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(
-		asButtons,
-		loop,
-		ariaLabel,
-		ariaLabelledby
+		<SingleOrigin
+			{ ...additionalProps }
+			presentation={ resolvedPresentation }
+		/>
 	);
 
 	return (

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

@@ -147,6 +147,11 @@ export const DuplicateGradients: GradientPickerStory = {
 };
 
 export const MultipleOrigins: GradientPickerStory = {
+	parameters: {
+		// FIXME: Multiple Origins: origin groups are missing required ARIA children (aria-required-children).
+		// See: https://github.com/WordPress/gutenberg/issues/81596
+		a11y: { test: 'todo' },
+	},
 	render: Template,
 	args: {
 		gradients: [

package/src/gradient-picker/test/index.tsx

@@ -13,6 +13,90 @@ const DUPLICATE_GRADIENTS = [
 ];
 
 describe( 'GradientPicker', () => {
+	it( 'should use matching values only for display in command button presentation', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+		render(
+			<GradientPicker
+				aria-label="Gradients"
+				gradients={ DUPLICATE_GRADIENTS }
+				value={ GRADIENT_A }
+				selectedSlug="dark-background"
+				onChange={ onChange }
+				presentation="command-buttons"
+				disableCustomGradients
+				clearable={ false }
+			/>
+		);
+
+		const gradient = screen.getByRole( 'button', {
+			name: 'Gradient: Dark Background',
+		} );
+		expect(
+			screen.getByRole( 'group', { name: 'Gradients' } )
+		).toBeVisible();
+		expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		expect( gradient ).not.toHaveAttribute( 'aria-pressed' );
+
+		await user.click( gradient );
+		expect( onChange ).toHaveBeenCalledWith(
+			GRADIENT_A,
+			0,
+			'dark-background'
+		);
+	} );
+
+	it( 'should warn for asButtons and prefer an explicit presentation', () => {
+		render(
+			<GradientPicker
+				aria-label="Gradients"
+				gradients={ DUPLICATE_GRADIENTS }
+				onChange={ jest.fn() }
+				asButtons={ false }
+				presentation="command-buttons"
+				disableCustomGradients
+				clearable={ false }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Gradient: Dark Background',
+			} )
+		).not.toHaveAttribute( 'aria-pressed' );
+		expect( console ).toHaveWarnedWith(
+			'`asButtons` prop in wp.components.GradientPicker is deprecated since version 7.2. Please use `presentation` instead. Note: `asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.'
+		);
+	} );
+
+	it( 'should preserve asButtons as a toggle-button alias', () => {
+		render(
+			<GradientPicker
+				aria-label="Gradients"
+				gradients={ DUPLICATE_GRADIENTS }
+				value={ GRADIENT_A }
+				selectedSlug="dark-background"
+				onChange={ jest.fn() }
+				asButtons
+				disableCustomGradients
+				clearable={ false }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Gradient: Dark Background',
+				pressed: true,
+			} )
+		).toBeVisible();
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Gradient: Dark Text',
+				pressed: false,
+			} )
+		).toBeVisible();
+	} );
+
 	describe( 'duplicate gradients in palette', () => {
 		it( 'should render all swatches even when two entries share the same gradient value', () => {
 			render(

package/src/gradient-picker/types.ts

@@ -1,4 +1,5 @@
 import type { HeadingSize } from '../heading/types';
+import type { CircularOptionPickerProps } from '../circular-option-picker/types';
 
 export type GradientObject = {
 	gradient: string;
@@ -59,15 +60,33 @@ type GradientPickerBaseProps = {
 	 */
 	headingLevel?: HeadingSize;
 	/**
-	 * Whether the control should present as a set of buttons,
-	 * each with its own tab stop.
+	 * How predefined gradient swatches behave and are exposed to assistive
+	 * technology.
 	 *
+	 * - `listbox` uses one tab stop and arrow-key navigation, and exposes
+	 *   selection with `aria-selected`.
+	 * - `toggle-buttons` gives each swatch a tab stop and exposes selection with
+	 *   `aria-pressed`.
+	 * - `command-buttons` gives each swatch a tab stop and exposes no selection
+	 *   state. `value` and `selectedSlug` do not mark predefined swatches as
+	 *   selected, and activating a swatch always calls `onChange` with that
+	 *   swatch. `value` still controls the custom gradient picker.
+	 *
+	 * @default 'listbox'
+	 */
+	presentation?: CircularOptionPickerProps[ 'presentation' ];
+	/**
+	 * Whether the control should present as toggle buttons.
+	 *
+	 * @deprecated Use `presentation="toggle-buttons"` instead. An explicit
+	 * `presentation` takes precedence.
 	 * @default false
+	 * @ignore
 	 */
 	asButtons?: boolean;
 	/**
 	 * Prevents keyboard interaction from wrapping around.
-	 * Only used when `asButtons` is not true.
+	 * Only used with the `listbox` presentation.
 	 *
 	 * @default true
 	 */

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

@@ -182,6 +182,7 @@ function InputField(
 			{ ...props }
 			{ ...dragProps }
 			className="components-input-control__input"
+			data-empty-value={ value ? undefined : '' }
 			disabled={ disabled }
 			dragCursor={ dragCursor }
 			isDragging={ isDragging }

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

@@ -21,7 +21,7 @@ const meta: Meta< typeof InputControl > = {
 		type: { control: { type: 'text' } },
 		value: { control: { disable: true } },
 	},
-	tags: [ 'status-experimental', 'manifest' ],
+	tags: [ 'status-experimental' ],
 	args: {
 		onChange: fn(),
 		onValidate: fn(),
@@ -31,9 +31,9 @@ const meta: Meta< typeof InputControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) in `@wordpress/ui`, but continue using for now.',
+			notes: 'Use [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) from `@wordpress/ui` instead. See the [migration guide](?path=/docs/components-inputcontrol--migration-guide).',
 		},
 	},
 };

package/src/input-control/stories/migration-guide.mdx

@@ -0,0 +1,201 @@
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
+import * as InputControlStories from './index.story';
+
+<Meta of={ InputControlStories } name="Migration Guide" />
+
+# InputControl migration guide
+
+Migrate from [`InputControl`](?path=/docs/components-inputcontrol--docs) in `@wordpress/components` to [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) in `@wordpress/ui`.
+
+The same guidance applies when replacing legacy [`TextControl`](?path=/docs/components-textcontrol--docs) and [`NumberControl`](?path=/docs/components-numbercontrol--docs) usages.
+
+## Basic migration
+
+Update the import and swap the callback prop:
+
+```jsx
+// Before
+import { __experimentalInputControl as InputControl } from '@wordpress/components';
+
+<InputControl
+	label="Width"
+	value={ value }
+	onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
+	help="Enter a value in pixels."
+/>;
+
+// After
+import { InputControl } from '@wordpress/ui';
+
+<InputControl
+	label="Width"
+	value={ value }
+	onValueChange={ ( nextValue ) => setValue( nextValue ) }
+	description="Enter a value in pixels."
+/>;
+```
+
+## Prop mapping
+
+<Markdown>{ `
+| \`@wordpress/components\` | \`@wordpress/ui\` | Notes |
+| --- | --- | --- |
+| \`onChange\` | \`onValueChange\` | Receives the next string value on every change. Legacy \`NumberControl\` also rewrites values to match \`min\`, \`max\`, and \`step\` on Enter and blur; see [Number inputs](#number-inputs). |
+| \`help\` | \`description\` | Use plain text only. |
+| \`help\` with links or other markup | \`details\` | Use when the help text needs semantic content. |
+| \`hideLabelFromVision\` | \`hideLabelFromVision\` | Same behavior. |
+| \`prefix\` / \`suffix\` | \`prefix\` / \`suffix\` | Wrap slot content in [\`InputLayout.Slot\`](?path=/docs/design-system-components-form-primitives-input--docs#with-prefix) instead of \`InputControlPrefixWrapper\` / \`InputControlSuffixWrapper\`. |
+| \`size\` | \`size\` | Supports \`default\` and \`compact\`. |
+| \`type\` | \`type\` | Same HTML input types, including \`number\`. |
+` }</Markdown>
+
+## Labels
+
+`InputControl` requires a `label` prop with a plain `string` value. Legacy `InputControl`, `TextControl`, and `NumberControl` accept an optional `label`, and the legacy `InputControl` `label` can be a `ReactNode`.
+
+When the visible label text already exists elsewhere, pass a descriptive string and hide it visually:
+
+```jsx
+<InputControl
+	label="Search"
+	hideLabelFromVision
+	value={ value }
+	onValueChange={ setValue }
+/>;
+```
+
+When the label is not a plain string, or you need a custom layout, compose the [`Input`](?path=/docs/design-system-components-form-primitives-input--docs) and [`Field`](?path=/docs/design-system-components-form-primitives-field--docs) primitives instead of `InputControl`:
+
+```jsx
+import { Field, Input } from '@wordpress/ui';
+
+<Field.Root>
+	<Field.Label>
+		Custom <strong>label</strong> content
+	</Field.Label>
+	<Input
+		value={ value }
+		onValueChange={ setValue }
+	/>
+</Field.Root>
+```
+
+See the [`Field` stories](?path=/docs/design-system-components-form-primitives-field--docs) for other association patterns, such as external labels with `aria-labelledby`.
+
+## Prefix and suffix slots
+
+Replace the wrapper components with `InputLayout.Slot`:
+
+```jsx
+// Before
+import { Icon } from '@wordpress/components';
+import {
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import { link } from '@wordpress/icons';
+
+<InputControl
+	prefix={
+		<InputControlPrefixWrapper variant="icon">
+			<Icon icon={ link } />
+		</InputControlPrefixWrapper>
+	}
+/>;
+
+// After
+import { Icon, InputControl, InputLayout } from '@wordpress/ui';
+import { link } from '@wordpress/icons';
+
+<InputControl
+	prefix={
+		<InputLayout.Slot padding="minimal">
+			<Icon icon={ link } />
+		</InputLayout.Slot>
+	}
+/>;
+```
+
+Use `padding="minimal"` for icons and controls. Omit it for text prefixes and suffixes such as `@` or `%`.
+
+## Number inputs
+
+Replace `NumberControl` usages with `InputControl` and `type="number"`:
+
+```jsx
+import { InputControl } from '@wordpress/ui';
+
+<InputControl
+	label="Quantity"
+	type="number"
+	min={ 1 }
+	max={ 10 }
+	step={ 1 }
+	value={ value }
+	onValueChange={ setValue }
+/>;
+```
+
+### Value clamping and step alignment
+
+Legacy `NumberControl` rewrites the value on Enter and blur: it clamps to `min`/`max` and aligns to `step`. `@wordpress/ui` `InputControl` passes these constraints to the native `<input type="number">` for validation, but does not rewrite invalid values when the field loses focus.
+
+If you relied on the legacy rewrite behavior, normalize the value yourself. A common pattern is to keep accepting edits in `onValueChange`, then clamp on blur:
+
+```jsx
+import { InputControl } from '@wordpress/ui';
+
+function constrainValue( value, min, max, step ) {
+	const num = parseFloat( value );
+	if ( Number.isNaN( num ) ) {
+		return value;
+	}
+
+	const clamped = Math.min( max, Math.max( min, num ) );
+	if ( step === 'any' ) {
+		return String( clamped );
+	}
+
+	const stepNum = parseFloat( step );
+	const aligned =
+		min + Math.round( ( clamped - min ) / stepNum ) * stepNum;
+	return String( aligned );
+}
+
+<InputControl
+	label="Quantity"
+	type="number"
+	min={ min }
+	max={ max }
+	step={ step }
+	value={ value }
+	onValueChange={ setValue }
+	onBlur={ ( event ) => {
+		setValue( constrainValue( event.target.value, min, max, step ) );
+	} }
+/>;
+```
+
+Adapt the helper to match your product requirements. The legacy component also fires `onChange` while typing with unclamped values, then again with the clamped value on blur.
+
+### Removed NumberControl features
+
+The `@wordpress/ui` `InputControl` does not support these `@wordpress/components` `NumberControl` features:
+
+-   **`spinControls`** — When desired, use explicit controls in a `suffix` slot. See the [`NumberWithSteppers` story](?path=/story/design-system-components-form-inputcontrol--number-with-steppers).
+-   **`isShiftStepEnabled` / `shiftStep`** — Apply larger increments in your stepper handlers or `onValueChange` logic.
+-   **Mouse-drag value changes** — Not recommended, as they can be confusing and are not supported on touch devices.
+
+## Removed features
+
+The `@wordpress/ui` `InputControl` does not support these `@wordpress/components` features:
+
+-   **`labelPosition`** — Only top labels are recommended. If other layouts are necessary, compose using the [`Input`](?path=/docs/design-system-components-form-primitives-input--docs) and [`Field`](?path=/docs/design-system-components-form-primitives-field--docs) primitives.
+-   **`isPressEnterToChange`** — Keep a local draft value and commit to your state on `Enter` or `blur` if you need deferred updates.
+-   **`onValidate`** — Run validation in your `onValueChange` handler instead.
+-   **`isDragEnabled`, `dragDirection`, and related drag callbacks** — Not recommended, as they can be confusing and are not supported on touch devices.
+-   **`__unstableInputWidth`** — If the label needs to be a different width from the input field, compose using the [`Input`](?path=/docs/design-system-components-form-primitives-input--docs) and [`Field`](?path=/docs/design-system-components-form-primitives-field--docs) primitives.
+-   **`__unstableStateReducer`** — This hook intercepted the internal state machine. Some workarounds for known patterns:
+    -   **Display formatting** (for example, zero-padded time segments): always pass a formatted `value`, or format in an `onBlur` handler if updates should be deferred until the field loses focus.
+    -   **Paste normalization**: normalize in `onValueChange`, or handle `onPaste` on `InputControl`.
+    -   **Custom step or spin behavior**: apply adjustments in `onValueChange`, in an `onBlur` handler, or with explicit controls in a `suffix` slot.

package/src/input-control/style.scss

@@ -0,0 +1,11 @@
+@use "@wordpress/base-styles/mixins";
+
+.components-input-control__container {
+	// Don't show the input's focus ring when an auxiliary control in a prefix
+	// or suffix has focus.
+	&:focus-within:not(:has(:is(.components-input-control__prefix, .components-input-control__suffix):focus-within)) {
+		.components-input-control__backdrop {
+			@include mixins.outset-ring__focus();
+		}
+	}
+}

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

@@ -72,17 +72,6 @@ export const Root = styled( Flex )`
 	position: relative;
 	border-radius: ${ CONFIG.radiusSmall };
 	padding-top: 0;
-
-	// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
-	&:focus-within:not( :has( :is( ${ Prefix }, ${ Suffix } ):focus-within ) ) {
-		${ BackdropUI } {
-			border-color: ${ COLORS.ui.borderFocus };
-			box-shadow: ${ CONFIG.controlBoxShadowFocus };
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent;
-			outline-offset: -2px;
-		}
-	}
 `;
 
 const containerDisabledStyles = ( { disabled }: ContainerProps ) => {
@@ -273,6 +262,36 @@ export const Input = styled.input< InputProps >`
 			color: ${ COLORS.ui.darkGrayPlaceholder };
 		}
 
+		&[type='date'],
+		&[type='datetime-local'],
+		&[type='month'],
+		&[type='time'],
+		&[type='week'] {
+			&::-webkit-datetime-edit {
+				display: flex;
+				align-items: center;
+				height: 100%;
+			}
+		}
+
+		/* Hide Safari's value-like placeholder (e.g. \`12:30\`) in empty
+		   date/time inputs. While the input is focused, the browser's
+		   segment editor must stay visible for typing. */
+		@supports ( -webkit-hyphens: none ) and
+			( not ( -moz-appearance: none ) ) {
+			/* Safari only */
+			&[type='date'][data-empty-value]:not( :focus ),
+			&[type='time'][data-empty-value]:not( :focus ),
+			&[type='datetime-local'][data-empty-value]:not( :focus ) {
+				color: transparent;
+
+				/* Hide slashes in date when input is disabled. */
+				&:disabled::-webkit-datetime-edit-text {
+					color: transparent;
+				}
+			}
+		}
+
 		&[type='email'],
 		&[type='url'] {
 			/* rtl:ignore */

package/src/input-control/test/{index.js → index.jsx}

@@ -28,6 +28,16 @@ describe( 'InputControl', () => {
 			expect( input ).toHaveAttribute( 'type', 'number' );
 		} );
 
+		it( 'should flag empty inputs with data-empty-value', () => {
+			const { rerender } = render( <InputControl type="time" /> );
+
+			expect( getInput() ).toHaveAttribute( 'data-empty-value' );
+
+			rerender( <InputControl type="time" value="12:30" /> );
+
+			expect( getInput() ).not.toHaveAttribute( 'data-empty-value' );
+		} );
+
 		it( 'should render label', () => {
 			render( <InputControl label="Hello" value="There" /> );
 

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

@@ -34,7 +34,7 @@ Default.args = {
 			{ /* eslint-disable react/no-unescaped-entities */ }
 			<p>Hit the "a" or "b" key in this textarea:</p>
 			{ /* eslint-enable react/no-unescaped-entities */ }
-			<textarea />
+			<textarea aria-label="Keyboard shortcuts demo" />
 		</div>
 	),
 };
@@ -52,7 +52,7 @@ Default.parameters = {
     <p>
       Hit the "a" or "b" key in this textarea:
     </p>
-    <textarea />
+    <textarea aria-label="Keyboard shortcuts demo" />
   </div>
 </KeyboardShortcuts>
 			`,

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

@@ -3,6 +3,7 @@ import { useState } from '@wordpress/element';
 import MenuGroup from '..';
 import MenuItem from '../../menu-item';
 import MenuItemsChoice from '../../menu-items-choice';
+import { NavigableMenu } from '../../navigable-container';
 
 const meta: Meta< typeof MenuGroup > = {
 	tags: [ 'manifest' ],
@@ -26,10 +27,12 @@ export default meta;
 
 const Template: StoryFn< typeof MenuGroup > = ( args ) => {
 	return (
-		<MenuGroup { ...args }>
-			<MenuItem>Menu Item 1</MenuItem>
-			<MenuItem>Menu Item 2</MenuItem>
-		</MenuGroup>
+		<NavigableMenu>
+			<MenuGroup { ...args }>
+				<MenuItem>Menu Item 1</MenuItem>
+				<MenuItem>Menu Item 2</MenuItem>
+			</MenuGroup>
+		</NavigableMenu>
 	);
 };
 
@@ -49,7 +52,7 @@ const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
 	];
 
 	return (
-		<>
+		<NavigableMenu>
 			<MenuGroup label="View">
 				<MenuItem>Top Toolbar</MenuItem>
 				<MenuItem>Spotlight Mode</MenuItem>
@@ -63,7 +66,7 @@ const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
 					onHover={ () => {} }
 				/>
 			</MenuGroup>
-		</>
+		</NavigableMenu>
 	);
 };
 

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

@@ -3,6 +3,7 @@ import { link, more, check } from '@wordpress/icons';
 import MenuGroup from '../../menu-group';
 import MenuItem from '..';
 import Shortcut from '../../shortcut';
+import { NavigableMenu } from '../../navigable-container';
 
 const meta: Meta< typeof MenuItem > = {
 	tags: [ 'manifest' ],
@@ -37,9 +38,11 @@ export default meta;
 
 const Template: StoryFn< typeof MenuItem > = ( props ) => {
 	return (
-		<MenuGroup>
-			<MenuItem { ...props }>Menu Item 1</MenuItem>
-		</MenuGroup>
+		<NavigableMenu>
+			<MenuGroup>
+				<MenuItem { ...props }>Menu Item 1</MenuItem>
+			</MenuGroup>
+		</NavigableMenu>
 	);
 };