@wordpress/components 33.0.0 → 33.1.0

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

@@ -95,7 +95,7 @@ describe( 'ColorPicker', () => {
 			await user.clear( hexInput );
 			await user.type( hexInput, '1ab' );
 
-			expect( onChangeComplete ).toHaveBeenCalledTimes( 3 );
+			expect( onChangeComplete ).toHaveBeenCalledTimes( 4 );
 			expect( onChangeComplete ).toHaveBeenLastCalledWith(
 				legacyColorMatcher
 			);
@@ -126,9 +126,31 @@ describe( 'ColorPicker', () => {
 			await user.clear( hexInput );
 			await user.type( hexInput, '1ab' );
 
-			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenCalledTimes( 4 );
 			expect( onChange ).toHaveBeenLastCalledWith( '#11aabb' );
 		} );
+
+		it( 'should reset color to black when the hex input is completely cleared', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const color = '#11aabb';
+
+			render(
+				<ColorPicker
+					onChange={ onChange }
+					color={ color }
+					enableAlpha={ false }
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hex' );
+
+			const hexInput = screen.getByRole( 'textbox' );
+			await user.clear( hexInput );
+
+			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
+		} );
 	} );
 
 	describe.each( [

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

@@ -50,7 +50,7 @@ const meta: Meta< typeof ComboboxControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `SearchableSelectControl` in `@wordpress/ui`, but continue using for now.',
 		},

package/src/composite/legacy/test/index.tsx

@@ -341,7 +341,7 @@ describe.each( [
 ] )( '%s', ( _when, rtl ) => {
 	const { previous, next, first, last } = getKeys( rtl );
 
-	async function useOneDimensionalTest( initialState?: InitialState ) {
+	async function renderOneDimensionalTest( initialState?: InitialState ) {
 		const Test = () => (
 			<OneDimensionalTest
 				state={ useCompositeState( { rtl, ...initialState } ) }
@@ -351,7 +351,7 @@ describe.each( [
 		return getOneDimensionalItems();
 	}
 
-	async function useTwoDimensionalTest( initialState?: InitialState ) {
+	async function renderTwoDimensionalTest( initialState?: InitialState ) {
 		const Test = () => (
 			<TwoDimensionalTest
 				state={ useCompositeState( { rtl, ...initialState } ) }
@@ -361,7 +361,7 @@ describe.each( [
 		return getTwoDimensionalItems();
 	}
 
-	async function useShiftTest( shift: boolean ) {
+	async function renderShiftTest( shift: boolean ) {
 		const Test = () => (
 			<ShiftTest state={ useCompositeState( { rtl, shift } ) } />
 		);
@@ -371,7 +371,7 @@ describe.each( [
 
 	describe( 'In one dimension', () => {
 		test( 'All directions work with no orientation', async () => {
-			const { item1, item2, item3 } = await useOneDimensionalTest();
+			const { item1, item2, item3 } = await renderOneDimensionalTest();
 
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
@@ -406,7 +406,7 @@ describe.each( [
 		} );
 
 		test( 'Only left/right work with horizontal orientation', async () => {
-			const { item1, item2, item3 } = await useOneDimensionalTest( {
+			const { item1, item2, item3 } = await renderOneDimensionalTest( {
 				orientation: 'horizontal',
 			} );
 
@@ -435,7 +435,7 @@ describe.each( [
 		} );
 
 		test( 'Only up/down work with vertical orientation', async () => {
-			const { item1, item2, item3 } = await useOneDimensionalTest( {
+			const { item1, item2, item3 } = await renderOneDimensionalTest( {
 				orientation: 'vertical',
 			} );
 
@@ -464,7 +464,7 @@ describe.each( [
 		} );
 
 		test( 'Focus wraps with loop enabled', async () => {
-			const { item1, item2, item3 } = await useOneDimensionalTest( {
+			const { item1, item2, item3 } = await renderOneDimensionalTest( {
 				loop: true,
 			} );
 
@@ -488,7 +488,7 @@ describe.each( [
 	describe( 'In two dimensions', () => {
 		test( 'All directions work as standard', async () => {
 			const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
-				await useTwoDimensionalTest();
+				await renderTwoDimensionalTest();
 
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
@@ -524,7 +524,7 @@ describe.each( [
 
 		test( 'Focus wraps around rows/columns with loop enabled', async () => {
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
-				await useTwoDimensionalTest( { loop: true } );
+				await renderTwoDimensionalTest( { loop: true } );
 
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
@@ -548,7 +548,7 @@ describe.each( [
 
 		test( 'Focus moves between rows/columns with wrap enabled', async () => {
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
-				await useTwoDimensionalTest( { wrap: true } );
+				await renderTwoDimensionalTest( { wrap: true } );
 
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
@@ -577,7 +577,7 @@ describe.each( [
 		} );
 
 		test( 'Focus wraps around start/end with loop and wrap enabled', async () => {
-			const { itemA1, itemC3 } = await useTwoDimensionalTest( {
+			const { itemA1, itemC3 } = await renderTwoDimensionalTest( {
 				loop: true,
 				wrap: true,
 			} );
@@ -596,7 +596,7 @@ describe.each( [
 
 		test( 'Focus shifts if vertical neighbour unavailable when shift enabled', async () => {
 			const { itemA1, itemB1, itemB2, itemC1 } =
-				await useShiftTest( true );
+				await renderShiftTest( true );
 
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
@@ -617,7 +617,7 @@ describe.each( [
 		} );
 
 		test( 'Focus does not shift if vertical neighbour unavailable when shift not enabled', async () => {
-			const { itemA1, itemB1, itemB2 } = await useShiftTest( false );
+			const { itemA1, itemB1, itemB2 } = await renderShiftTest( false );
 
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();

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

@@ -49,7 +49,7 @@ const meta: Meta< typeof Composite > = {
 			canvas: { sourceState: 'shown' },
 		},
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -34,7 +34,7 @@ const meta: Meta< typeof ConfirmDialog > = {
 			expanded: true,
 		},
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 		docs: { canvas: { sourceState: 'shown' } },

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

@@ -76,7 +76,6 @@ const GradientTypePicker = ( {
 	);
 
 	if ( type === 'linear-gradient' && gradientAST.orientation ) {
-		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		lastLinearOrientationAngle.current = Number(
 			gradientAST.orientation.value
 		);

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

@@ -32,7 +32,7 @@ const meta: Meta< typeof CustomSelectControl > = {
 			source: { excludeDecorators: true },
 		},
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `SelectControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -32,7 +32,7 @@ const meta: Meta< typeof Disabled > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -37,7 +37,7 @@ const meta: Meta< typeof DropZone > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -43,7 +43,7 @@ const meta: Meta< typeof Dropdown > = {
 			expanded: true,
 		},
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -25,7 +25,7 @@ const meta: Meta< typeof DuotonePicker > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -15,7 +15,7 @@ const meta: Meta< typeof DuotoneSwatch > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

package/src/external-link/style.scss

@@ -24,6 +24,9 @@
 		outline:
 			var(--wpds-border-width-focus) solid
 			var(--wpds-color-stroke-focus-brand);
+		// Override style from wp-admin common.css.
+		box-shadow: none;
+		border-radius: 0;
 	}
 }
 
@@ -34,6 +37,7 @@
 }
 
 .components-external-link__icon {
+	line-height: 1;
 	display: inline-block;
 	margin-inline-start: var(--wpds-dimension-padding-xs);
 	font-weight: var(--wpds-typography-font-weight-regular);

package/src/focal-point-picker/README.md

@@ -1,28 +1,32 @@
 # FocalPointPicker
 
-Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image. This component addresses a specific problem: with large background images it is common to see undesirable crops, especially when viewing on smaller viewports such as mobile phones. This component allows the selection of the point with the most important visual information and returns it as a pair of numbers between 0 and 1. This value can be easily converted into the CSS `background-position` attribute, and will ensure that the focal point is never cropped out, regardless of viewport.
+Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.
 
-- Example focal point picker value: `{ x: 0.5, y: 0.1 }`
-- Corresponding CSS: `background-position: 50% 10%;`
+It addresses two common issues when displaying images in cropped containers. First, large background images can be cropped in undesirable ways, especially on smaller viewports such as mobile devices. Second, the CSS aspect-ratio property can inadvertently crop out the area of highest visual interest. This component allows the selection of the point with the most important visual information and returns it as a pair of numbers between 0 and 1. The output value can be applied to either CSS `background-position` (for elements with `background-image`) or `object-position` (for `<img>` / `<video>` elements rendered with `object-fit: cover`).
+
+-   Example focal point picker value: `{ x: 0.5, y: 0.1 }`;
+-   Corresponding CSS: `object-position: 50% 10%`;
 
 ## Usage
 
 ```jsx
-import { useState } from 'react';
 import { FocalPointPicker } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ focalPoint, setFocalPoint ] = useState( {
 		x: 0.5,
-		y: 0.5,
+		y: 0.1,
 	} );
 
 	const url = '/path/to/image';
 
 	/* Example function to render the CSS styles based on Focal Point Picker value */
 	const style = {
-		backgroundImage: `url(${ url })`,
-		backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
+		width: '100%',
+		aspectRatio: '16 / 9',
+		objectFit: 'cover',
+		objectPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
 	};
 
 	return (
@@ -34,7 +38,7 @@ const Example = () => {
 				onDrag={ setFocalPoint }
 				onChange={ setFocalPoint }
 			/>
-			<div style={ style } />
+			<img src={ url } alt="" style={ style } />
 		</>
 	);
 };

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

@@ -44,14 +44,17 @@ const GRID_OVERLAY_TIMEOUT = 600;
 /**
  * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.
  *
- * This component addresses a specific problem: with large background images it is common to see undesirable crops,
- * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of
- * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.
- * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the
- * focal point is never cropped out, regardless of viewport.
+ * It addresses two common issues when displaying images in cropped containers. First, large
+ * background images can be cropped in undesirable ways, especially on smaller viewports such as
+ * mobile devices. Second, the CSS aspect-ratio property can inadvertently crop out the area of
+ * highest visual interest. This component allows the selection of the point with the most
+ * important visual information and returns it as a pair of numbers between 0 and 1.
+ * The output value can be applied to either CSS `background-position` (for elements with
+ * `background-image`) or `object-position` (for `<img>` / `<video>` elements rendered with
+ * `object-fit: cover`).
  *
- * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`
- * - Corresponding CSS: `background-position: 50% 10%;`
+ * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`;
+ * - Corresponding CSS: `object-position: 50% 10%`;
  *
  * ```jsx
  * import { FocalPointPicker } from '@wordpress/components';
@@ -60,15 +63,17 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * const Example = () => {
  * 	const [ focalPoint, setFocalPoint ] = useState( {
  * 		x: 0.5,
- * 		y: 0.5,
+ * 		y: 0.1,
  * 	} );
  *
  * 	const url = '/path/to/image';
  *
  * 	// Example function to render the CSS styles based on Focal Point Picker value
  * 	const style = {
- * 		backgroundImage: `url(${ url })`,
- * 		backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
+ * 		width: '100%',
+ * 		aspectRatio: '16 / 9',
+ * 		objectFit: 'cover',
+ * 		objectPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
  * 	};
  *
  * 	return (
@@ -80,7 +85,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * 				onDrag={ setFocalPoint }
  * 				onChange={ setFocalPoint }
  * 			/>
- * 			<div style={ style } />
+ * 			<img src={ url } alt="" style={ style } />
  * 		</>
  * 	);
  * };

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

@@ -30,7 +30,7 @@ const meta: Meta< typeof FocalPointPicker > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -31,7 +31,7 @@ const meta: Meta< typeof FontSizePicker > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -27,7 +27,7 @@ const meta: Meta< typeof FormFileUpload > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -28,7 +28,7 @@ const meta: Meta< typeof FormToggle > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'For standard toggles with labels, use `ToggleControl` instead.',
 		},

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

@@ -33,7 +33,7 @@ const meta: Meta< typeof FormTokenField > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `SearchableChipSelect` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -23,7 +23,7 @@ const meta: Meta< typeof GradientPicker > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -26,7 +26,7 @@ const meta: Meta< typeof Guide > = {
 	},
 	parameters: {
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

package/src/higher-order/with-notices/test/index.tsx

@@ -14,10 +14,10 @@ import {
  * WordPress dependencies
  */
 import {
+	createRef,
 	forwardRef,
 	useEffect,
 	useImperativeHandle,
-	useRef,
 } from '@wordpress/element';
 
 /**
@@ -91,15 +91,17 @@ describe( 'withNotices return type', () => {
 } );
 
 describe( 'withNotices operations', () => {
-	let handle: React.RefObject< any >;
-	const Handle = ( props: any ) => {
-		handle = useRef( null );
-		return <TestNoticeOperations { ...props } ref={ handle } />;
-	};
+	function setup( props: any = {} ) {
+		const handle = createRef< any >();
+		const utils = render(
+			<TestNoticeOperations { ...props } ref={ handle } />
+		);
+		return { ...utils, handle };
+	}
 
 	it( 'should create notices with createNotice', () => {
 		const message = 'Aló!';
-		const { container } = render( <Handle /> );
+		const { container, handle } = setup();
 		const { getByText } = within( container );
 		act( () => {
 			handle.current.createNotice( { content: message } );
@@ -109,7 +111,7 @@ describe( 'withNotices operations', () => {
 
 	it( 'should create notices of error status with createErrorNotice', () => {
 		const message = 'can’t touch this';
-		const { container } = render( <Handle /> );
+		const { container, handle } = setup();
 		const { getByText } = within( container );
 		act( () => {
 			handle.current.createErrorNotice( message );
@@ -120,7 +122,7 @@ describe( 'withNotices operations', () => {
 
 	it( 'should remove a notice with removeNotice', async () => {
 		const notice = { id: 'so real', content: 'so why can’t I touch it?' };
-		const { container } = render( <Handle /> );
+		const { container, handle } = setup();
 		const { getByText } = within( container );
 		act( () => {
 			handle.current.createNotice( notice );
@@ -137,7 +139,7 @@ describe( 'withNotices operations', () => {
 	it( 'should remove all notices with removeAllNotices', async () => {
 		const messages = [ 'Aló!', 'hu dis?', 'Otis' ];
 		const notices = noticesFrom( messages );
-		const { container } = render( <Handle notifications={ notices } /> );
+		const { container, handle } = setup( { notifications: notices } );
 		const { getByText } = within( container );
 		expect(
 			await waitForElementToBeRemoved( () => {

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

@@ -23,7 +23,7 @@ const meta: Meta< typeof Icon > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Prefer this component over the `Icon` component from `@wordpress/icons`.',
 		},

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

@@ -41,7 +41,7 @@ const meta: Meta< typeof InputControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `InputControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -24,7 +24,7 @@ const meta: Meta< typeof ItemGroup > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -17,7 +17,7 @@ const meta: Meta< typeof KeyboardShortcuts > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -56,7 +56,7 @@ const meta: Meta< typeof Menu > = {
 			source: { excludeDecorators: true },
 		},
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'When building for the Gutenberg repo, use this component instead of `DropdownMenu`. Otherwise, continue using `DropdownMenu` for now.',
 		},

package/src/menu/test/index.tsx

@@ -161,7 +161,7 @@ describe( 'Menu', () => {
 				<Menu>
 					<Menu.TriggerButton>Open dropdown</Menu.TriggerButton>
 					<Menu.Popover>
-						<Menu.Item disabled>First item</Menu.Item>
+						<Menu.Item>First item</Menu.Item>
 						<Menu.Item>Second item</Menu.Item>
 						<Menu.Item>Third item</Menu.Item>
 					</Menu.Popover>
@@ -180,10 +180,11 @@ describe( 'Menu', () => {
 			// Menu closed
 			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
 
-			await press.Space();
+			// Keyboard-triggered clicks have `detail: 0`, which Ariakit uses to
+			// choose the initial item focus path instead of the pointer path.
+			await press.Space( toggleButton, { detail: 0 } );
 
 			// Menu open, focus is on the first focusable item
-			// (disabled items are still focusable and accessible
 			await waitForFocusedMenuItem( 'First item' );
 		} );
 

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

@@ -27,7 +27,7 @@ const meta: Meta< typeof MenuGroup > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Subcomponent of `DropdownMenu`.',
 		},

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

@@ -38,7 +38,7 @@ const meta: Meta< typeof MenuItem > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Subcomponent of `DropdownMenu`.',
 		},

package/src/menu-items-choice/stories/index.story.tsx

@@ -30,7 +30,7 @@ const meta: Meta< typeof MenuItemsChoice > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Subcomponent of `DropdownMenu`.',
 		},

package/src/modal/index.tsx

@@ -121,7 +121,6 @@ function UnforwardedModal(
 	const onRequestCloseRef =
 		useRef< ModalProps[ 'onRequestClose' ] >( undefined );
 	useEffect( () => {
-		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		onRequestCloseRef.current = onRequestClose;
 	}, [ onRequestClose ] );
 
@@ -169,8 +168,7 @@ function UnforwardedModal(
 		};
 	}, [ bodyOpenClassName ] );
 
-	const { closeModal, frameRef, frameStyle, overlayClassname } =
-		useModalExitAnimation();
+	const { closeModal, frameRef, overlayClassname } = useModalExitAnimation();
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
@@ -260,10 +258,7 @@ function UnforwardedModal(
 						sizeClass,
 						className
 					) }
-					style={ {
-						...frameStyle,
-						...style,
-					} }
+					style={ style }
 					ref={ useMergeRefs( [
 						frameRef,
 						constrainedTabbingRef,