@wordpress/components 28.4.0 → 28.5.0

package/src/date-time/time/index.tsx

@@ -32,7 +32,7 @@ import {
 	validateInputElementTarget,
 } from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
-import { TimeInput } from '../time-input';
+import { TimeInput } from './time-input';
 
 const VALID_DATE_ORDERS = [ 'dmy', 'mdy', 'ymd' ];
 
@@ -77,10 +77,28 @@ export function TimePicker( {
 		);
 	}, [ currentTime ] );
 
+	const monthOptions = [
+		{ value: '01', label: __( 'January' ) },
+		{ value: '02', label: __( 'February' ) },
+		{ value: '03', label: __( 'March' ) },
+		{ value: '04', label: __( 'April' ) },
+		{ value: '05', label: __( 'May' ) },
+		{ value: '06', label: __( 'June' ) },
+		{ value: '07', label: __( 'July' ) },
+		{ value: '08', label: __( 'August' ) },
+		{ value: '09', label: __( 'September' ) },
+		{ value: '10', label: __( 'October' ) },
+		{ value: '11', label: __( 'November' ) },
+		{ value: '12', label: __( 'December' ) },
+	] as const;
+
 	const { day, month, year, minutes, hours } = useMemo(
 		() => ( {
 			day: format( date, 'dd' ),
-			month: format( date, 'MM' ),
+			month: format(
+				date,
+				'MM'
+			) as ( typeof monthOptions )[ number ][ 'value' ],
 			year: format( date, 'yyyy' ),
 			minutes: format( date, 'mm' ),
 			hours: format( date, 'HH' ),
@@ -146,20 +164,7 @@ export function TimePicker( {
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				value={ month }
-				options={ [
-					{ value: '01', label: __( 'January' ) },
-					{ value: '02', label: __( 'February' ) },
-					{ value: '03', label: __( 'March' ) },
-					{ value: '04', label: __( 'April' ) },
-					{ value: '05', label: __( 'May' ) },
-					{ value: '06', label: __( 'June' ) },
-					{ value: '07', label: __( 'July' ) },
-					{ value: '08', label: __( 'August' ) },
-					{ value: '09', label: __( 'September' ) },
-					{ value: '10', label: __( 'October' ) },
-					{ value: '11', label: __( 'November' ) },
-					{ value: '12', label: __( 'December' ) },
-				] }
+				options={ monthOptions }
 				onChange={ ( value ) => {
 					const newDate = setMonth( date, Number( value ) - 1 );
 					setDate( newDate );
@@ -252,4 +257,29 @@ export function TimePicker( {
 	);
 }
 
+/**
+ * A component to input a time.
+ *
+ * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).
+ *
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTimeInput = () => {
+ * 	const [ time, setTime ] = useState( { hours: 13, minutes: 30 } );
+ *
+ * 	return (
+ * 		<TimePicker.TimeInput
+ * 			value={ time }
+ * 			onChange={ setTime }
+ * 			label="Time"
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+TimePicker.TimeInput = TimeInput;
+Object.assign( TimePicker.TimeInput, { displayName: 'TimePicker.TimeInput' } );
+
 export default TimePicker;

package/src/date-time/time/styles.ts

@@ -62,6 +62,7 @@ export const HoursInput = styled( NumberControl )`
 export const TimeSeparator = styled.span`
 	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
 	border-bottom: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
+	font-size: ${ CONFIG.fontSize };
 	line-height: calc(
 		${ CONFIG.controlHeight } - ${ CONFIG.borderWidth } * 2
 	);

package/src/date-time/{time-input → time/time-input}/index.tsx

@@ -18,20 +18,20 @@ import {
 	HoursInput,
 	MinutesInput,
 	Fieldset,
-} from '../time/styles';
-import { HStack } from '../../h-stack';
-import Button from '../../button';
-import ButtonGroup from '../../button-group';
+} from '../styles';
+import { HStack } from '../../../h-stack';
+import Button from '../../../button';
+import ButtonGroup from '../../../button-group';
 import {
 	from12hTo24h,
 	from24hTo12h,
 	buildPadInputStateReducer,
 	validateInputElementTarget,
-} from '../utils';
-import type { TimeInputProps } from '../types';
-import type { InputChangeCallback } from '../../input-control/types';
-import { useControlledValue } from '../../utils';
-import BaseControl from '../../base-control';
+} from '../../utils';
+import type { TimeInputProps } from '../../types';
+import type { InputChangeCallback } from '../../../input-control/types';
+import { useControlledValue } from '../../../utils';
+import BaseControl from '../../../base-control';
 
 export function TimeInput( {
 	value: valueProp,

package/src/dropdown-menu-v2/styles.ts

@@ -101,23 +101,23 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	outline: 2px solid transparent !important;
 
 	/* Animation */
-	animation-duration: ${ ANIMATION_PARAMS.DURATION };
-	animation-timing-function: ${ ANIMATION_PARAMS.EASING };
-	will-change: transform, opacity;
-	/* Default animation.*/
-	animation-name: ${ slideDownAndFade };
-
-	&[data-side='left'] {
-		animation-name: ${ slideLeftAndFade };
-	}
-	&[data-side='up'] {
-		animation-name: ${ slideUpAndFade };
-	}
-	&[data-side='right'] {
-		animation-name: ${ slideRightAndFade };
-	}
-	@media ( prefers-reduced-motion ) {
-		animation-duration: 0s;
+	&[data-open] {
+		@media not ( prefers-reduced-motion ) {
+			animation-duration: ${ ANIMATION_PARAMS.DURATION };
+			animation-timing-function: ${ ANIMATION_PARAMS.EASING };
+			will-change: transform, opacity;
+			/* Default animation.*/
+			animation-name: ${ slideDownAndFade };
+			&[data-side='left'] {
+				animation-name: ${ slideLeftAndFade };
+			}
+			&[data-side='up'] {
+				animation-name: ${ slideUpAndFade };
+			}
+			&[data-side='right'] {
+				animation-name: ${ slideRightAndFade };
+			}
+		}
 	}
 `;
 
@@ -344,6 +344,7 @@ export const DropdownMenuItemHelpText = styled( Truncate )`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	line-height: 16px;
 	color: ${ COLORS.gray[ '700' ] };
+	word-break: break-all;
 
 	[data-active-item]:not( [data-focus-visible] ) *:not( ${ DropdownMenu } ) &,
 	[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {

package/src/dropdown-menu-v2/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, hover, sleep, type } from '@ariakit/test';
+import { press, click, hover, type } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -128,7 +128,6 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
-			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -159,7 +158,6 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
-			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -915,7 +913,6 @@ describe( 'DropdownMenu', () => {
 
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the DropdownMenu to close.
-			await sleep();
 			await press.Tab();
 			expect( outerButton ).toBeInTheDocument();
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();

package/src/font-size-picker/test/index.tsx

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render } from '@ariakit/test/react';
 
 /**
  * Internal dependencies
@@ -44,7 +45,9 @@ describe( 'FontSizePicker', () => {
 		async ( { value, expectedValue } ) => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render( <FontSizePicker value={ value } onChange={ onChange } /> );
+			await render(
+				<FontSizePicker value={ value } onChange={ onChange } />
+			);
 			const input = screen.getByLabelText( 'Custom' );
 			await user.clear( input );
 			await user.type( input, '80' );
@@ -63,7 +66,7 @@ describe( 'FontSizePicker', () => {
 		async ( { firstFontSize, expectedValue } ) => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ [ { slug: 'slug', size: firstFontSize } ] }
 					onChange={ onChange }
@@ -115,7 +118,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
@@ -137,8 +140,8 @@ describe( 'FontSizePicker', () => {
 			{ value: '3px', expectedLabel: 'Size Custom' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
@@ -161,7 +164,7 @@ describe( 'FontSizePicker', () => {
 			async ( { option, value, expectedArguments } ) => {
 				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						value={ value }
@@ -219,7 +222,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
@@ -241,8 +244,8 @@ describe( 'FontSizePicker', () => {
 			{ value: '8px', option: 'Tiny' },
 		] )(
 			'defaults to $option when value is $value',
-			( { value, option } ) => {
-				render(
+			async ( { value, option } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
@@ -260,8 +263,8 @@ describe( 'FontSizePicker', () => {
 			{ value: '3px', expectedLabel: 'Size Custom' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
@@ -302,7 +305,7 @@ describe( 'FontSizePicker', () => {
 			async ( { option, value, expectedArguments } ) => {
 				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						value={ value }
@@ -353,8 +356,8 @@ describe( 'FontSizePicker', () => {
 			},
 		];
 
-		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+		it( 'displays a toggle group control with t-shirt sizes', async () => {
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 5 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -375,8 +378,8 @@ describe( 'FontSizePicker', () => {
 			{ value: '40px', expectedLabel: 'Size Gigantosaurus' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
@@ -386,7 +389,7 @@ describe( 'FontSizePicker', () => {
 		it( 'calls onChange when a font size is selected', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) );
@@ -422,8 +425,8 @@ describe( 'FontSizePicker', () => {
 			},
 		];
 
-		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+		it( 'displays a toggle group control with t-shirt sizes', async () => {
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 4 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -447,8 +450,8 @@ describe( 'FontSizePicker', () => {
 			},
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
@@ -471,7 +474,7 @@ describe( 'FontSizePicker', () => {
 			async ( { radio, expectedArguments } ) => {
 				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						onChange={ onChange }
@@ -490,8 +493,8 @@ describe( 'FontSizePicker', () => {
 	} );
 
 	function commonToggleGroupTests( fontSizes: FontSize[] ) {
-		it( 'defaults to M when value is 16px', () => {
-			render(
+		it( 'defaults to M when value is 16px', async () => {
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
@@ -504,8 +507,8 @@ describe( 'FontSizePicker', () => {
 
 		test.each( [ undefined, '' ] )(
 			'has no selection when value is %p',
-			( value ) => {
-				render(
+			async ( value ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByRole( 'radiogroup' ) ).toBeVisible();
@@ -520,7 +523,7 @@ describe( 'FontSizePicker', () => {
 		it( 'shows custom input when Custom is selected', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
@@ -535,13 +538,15 @@ describe( 'FontSizePicker', () => {
 	}
 
 	function commonTests( fontSizes: FontSize[] ) {
-		it( 'shows custom input when value is unknown', () => {
-			render( <FontSizePicker fontSizes={ fontSizes } value="3px" /> );
+		it( 'shows custom input when value is unknown', async () => {
+			await render(
+				<FontSizePicker fontSizes={ fontSizes } value="3px" />
+			);
 			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
 		} );
 
-		it( 'hides custom input when disableCustomFontSizes is set to `true` with a custom font size', () => {
-			const { rerender } = render(
+		it( 'hides custom input when disableCustomFontSizes is set to `true` with a custom font size', async () => {
+			const { rerender } = await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
 			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
@@ -558,8 +563,8 @@ describe( 'FontSizePicker', () => {
 			).not.toBeInTheDocument();
 		} );
 
-		it( "doesn't hide custom input when the selected font size is a predef", () => {
-			const { rerender } = render(
+		it( "doesn't hide custom input when the selected font size is a predef", async () => {
+			const { rerender } = await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
 			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
@@ -576,7 +581,7 @@ describe( 'FontSizePicker', () => {
 		it( 'allows custom values by default', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
@@ -590,7 +595,9 @@ describe( 'FontSizePicker', () => {
 		it( 'allows switching between custom and predef inputs when pressing the dedicated toggle', async () => {
 			const user = userEvent.setup();
 
-			render( <ControlledFontSizePicker fontSizes={ fontSizes } /> );
+			await render(
+				<ControlledFontSizePicker fontSizes={ fontSizes } />
+			);
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
@@ -607,8 +614,8 @@ describe( 'FontSizePicker', () => {
 			).not.toBeInTheDocument();
 		} );
 
-		it( 'does not allow custom values when disableCustomFontSizes is set', () => {
-			render(
+		it( 'does not allow custom values when disableCustomFontSizes is set', async () => {
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					disableCustomFontSizes
@@ -621,7 +628,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'does not display a slider by default', async () => {
 			const user = userEvent.setup();
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
@@ -633,7 +640,7 @@ describe( 'FontSizePicker', () => {
 		it( 'allows a slider to be used when withSlider is set', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					withSlider
@@ -654,7 +661,7 @@ describe( 'FontSizePicker', () => {
 		it( 'allows reset by default', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
@@ -671,7 +678,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'does not allow reset when withReset is false', async () => {
 			const user = userEvent.setup();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
@@ -689,7 +696,7 @@ describe( 'FontSizePicker', () => {
 		it( 'applies custom units to custom font size control', async () => {
 			const user = userEvent.setup();
 
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }

package/src/form-toggle/index.tsx

@@ -17,26 +17,7 @@ import type { WordPressComponentProps } from '../context';
 
 export const noop = () => {};
 
-/**
- * FormToggle switches a single setting on or off.
- *
- * ```jsx
- * import { FormToggle } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyFormToggle = () => {
- *   const [ isChecked, setChecked ] = useState( true );
- *
- *   return (
- *     <FormToggle
- *       checked={ isChecked }
- *       onChange={ () => setChecked( ( state ) => ! state ) }
- *     />
- *   );
- * };
- * ```
- */
-export function FormToggle(
+function UnforwardedFormToggle(
 	props: WordPressComponentProps< FormToggleProps, 'input', false >,
 	ref: ForwardedRef< HTMLInputElement >
 ) {
@@ -71,4 +52,25 @@ export function FormToggle(
 	);
 }
 
-export default forwardRef( FormToggle );
+/**
+ * FormToggle switches a single setting on or off.
+ *
+ * ```jsx
+ * import { FormToggle } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyFormToggle = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *
+ *   return (
+ *     <FormToggle
+ *       checked={ isChecked }
+ *       onChange={ () => setChecked( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const FormToggle = forwardRef( UnforwardedFormToggle );
+
+export default FormToggle;

package/src/guide/index.tsx

@@ -144,6 +144,7 @@ function Guide( {
 							className="components-guide__back-button"
 							variant="tertiary"
 							onClick={ goBack }
+							__next40pxDefaultSize
 						>
 							{ __( 'Previous' ) }
 						</Button>
@@ -153,6 +154,7 @@ function Guide( {
 							className="components-guide__forward-button"
 							variant="primary"
 							onClick={ goForward }
+							__next40pxDefaultSize
 						>
 							{ __( 'Next' ) }
 						</Button>

package/src/heading/types.ts

@@ -17,10 +17,7 @@ export type HeadingSize =
 	| '5'
 	| '6';
 
-export type HeadingProps = Omit<
-	TextProps,
-	'size' | 'isBlock' | 'color' | 'weight'
-> & {
+export type HeadingProps = Omit< TextProps, 'isBlock' | 'color' | 'weight' > & {
 	/**
 	 * Passing any of the heading levels to `level` will both render the correct
 	 * typographic text size as well as the semantic element corresponding to

package/src/modal/index.tsx

@@ -2,12 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import type {
-	ForwardedRef,
-	KeyboardEvent,
-	MutableRefObject,
-	UIEvent,
-} from 'react';
+import type { ForwardedRef, KeyboardEvent, RefObject, UIEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -44,9 +39,10 @@ import type { ModalProps } from './types';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
-const ModalContext = createContext<
-	MutableRefObject< ModalProps[ 'onRequestClose' ] | undefined >[]
->( [] );
+type Dismissers = Set<
+	RefObject< ModalProps[ 'onRequestClose' ] | undefined >
+>;
+const ModalContext = createContext< Dismissers >( new Set() );
 
 // Used to track body class names applied while modals are open.
 const bodyOpenClasses = new Map< string, number >();
@@ -147,23 +143,28 @@ function UnforwardedModal(
 	// one should remain open at a time and the list enables closing prior ones.
 	const dismissers = useContext( ModalContext );
 	// Used for the tracking and dismissing any nested modals.
-	const nestedDismissers = useRef< typeof dismissers >( [] );
+	const [ nestedDismissers ] = useState< Dismissers >( () => new Set() );
 
 	// Updates the stack tracking open modals at this level and calls
 	// onRequestClose for any prior and/or nested modals as applicable.
 	useEffect( () => {
-		dismissers.push( refOnRequestClose );
-		const [ first, second ] = dismissers;
-		if ( second ) {
-			first?.current?.();
+		// add this modal instance to the dismissers set
+		dismissers.add( refOnRequestClose );
+		// request that all the other modals close themselves
+		for ( const dismisser of dismissers ) {
+			if ( dismisser !== refOnRequestClose ) {
+				dismisser.current?.();
+			}
 		}
-
-		const nested = nestedDismissers.current;
 		return () => {
-			nested[ 0 ]?.current?.();
-			dismissers.shift();
+			// request that all the nested modals close themselves
+			for ( const dismisser of nestedDismissers ) {
+				dismisser.current?.();
+			}
+			// remove this modal instance from the dismissers set
+			dismissers.delete( refOnRequestClose );
 		};
-	}, [ dismissers ] );
+	}, [ dismissers, nestedDismissers ] );
 
 	// Adds/removes the value of bodyOpenClassName to body element.
 	useEffect( () => {
@@ -350,7 +351,7 @@ function UnforwardedModal(
 	);
 
 	return createPortal(
-		<ModalContext.Provider value={ nestedDismissers.current }>
+		<ModalContext.Provider value={ nestedDismissers }>
 			{ modal }
 		</ModalContext.Provider>,
 		document.body