@wordpress/components 25.14.0 → 25.15.0

package/src/mobile/utils/get-px-from-css-unit.native.js

@@ -0,0 +1,329 @@
+/**
+ * Converts string to object { value, unit }.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit
+ */
+function parseUnit( cssUnit ) {
+	const match = cssUnit
+		?.trim()
+		.match(
+			/^(0?[-.]?\d*\.?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
+		);
+	if ( ! isNaN( cssUnit ) && ! isNaN( parseFloat( cssUnit ) ) ) {
+		return { value: parseFloat( cssUnit ), unit: 'px' };
+	}
+	return match
+		? { value: parseFloat( match[ 1 ] ) || match[ 1 ], unit: match[ 2 ] }
+		: { value: cssUnit, unit: undefined };
+}
+/**
+ * Evaluate a math expression.
+ *
+ * @param {string} expression
+ * @return {number} evaluated expression.
+ */
+function calculate( expression ) {
+	try {
+		return Function( `'use strict'; return (${ expression })` )();
+	} catch ( err ) {
+		return null;
+	}
+}
+
+/**
+ * Calculates the css function value for the supported css functions such as max, min, clamp and calc.
+ *
+ * @param {string} functionUnitValue string should be in a particular format (for example min(12px,12px) ) no nested loops.
+ * @param {Object} options
+ * @return {string} unit containing the unit in PX.
+ */
+function getFunctionUnitValue( functionUnitValue, options ) {
+	const functionUnit = functionUnitValue.split( /[(),]/g ).filter( Boolean );
+
+	const units = functionUnit
+		.slice( 1 )
+		.map( ( unit ) => parseUnit( getPxFromCssUnit( unit, options ) ).value )
+		.filter( Boolean );
+
+	switch ( functionUnit[ 0 ] ) {
+		case 'min':
+			return Math.min( ...units ) + 'px';
+		case 'max':
+			return Math.max( ...units ) + 'px';
+		case 'clamp':
+			if ( units.length !== 3 ) {
+				return null;
+			}
+			if ( units[ 1 ] < units[ 0 ] ) {
+				return units[ 0 ] + 'px';
+			}
+			if ( units[ 1 ] > units[ 2 ] ) {
+				return units[ 2 ] + 'px';
+			}
+			return units[ 1 ] + 'px';
+		case 'calc':
+			return units[ 0 ] + 'px';
+	}
+}
+
+/**
+ * Take a css function such as min, max, calc, clamp and returns parsedUnit
+ *
+ * How this works for the nested function is that it first replaces the inner function call.
+ * Then it tackles the outer onces.
+ * So for example: min( max(25px, 35px), 40px )
+ * in the first pass we would replace max(25px, 35px) with 35px.
+ * then we would try to evaluate min( 35px, 40px )
+ * and then finally return 35px.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit object.
+ */
+function parseUnitFunction( cssUnit ) {
+	while ( true ) {
+		const currentCssUnit = cssUnit;
+		const regExp = /(max|min|calc|clamp)\(([^()]*)\)/g;
+		const matches = regExp.exec( cssUnit ) || [];
+		if ( matches[ 0 ] ) {
+			const functionUnitValue = getFunctionUnitValue( matches[ 0 ] );
+			cssUnit = cssUnit.replace( matches[ 0 ], functionUnitValue );
+		}
+
+		// If the unit hasn't been modified or we have a single value break free.
+		if ( cssUnit === currentCssUnit || parseFloat( cssUnit ) ) {
+			break;
+		}
+	}
+
+	return parseUnit( cssUnit );
+}
+/**
+ * Return true if we think this is a math expression.
+ *
+ * @param {string} cssUnit the cssUnit value being evaluted.
+ * @return {boolean} Whether the cssUnit is a math expression.
+ */
+function isMathExpression( cssUnit ) {
+	for ( let i = 0; i < cssUnit.length; i++ ) {
+		if ( [ '+', '-', '/', '*' ].includes( cssUnit[ i ] ) ) {
+			return true;
+		}
+	}
+	return false;
+}
+/**
+ * Evaluates the math expression and return a px value.
+ *
+ * @param {string} cssUnit the cssUnit value being evaluted.
+ * @return {string} return a converfted value to px.
+ */
+function evalMathExpression( cssUnit ) {
+	let errorFound = false;
+	// Convert every part of the expression to px values.
+	// The following regex matches numbers that have a following unit
+	// E.g. 5.25rem, 1vw
+	const cssUnitsBits = cssUnit.match( /\d+\.?\d*[a-zA-Z]+|\.\d+[a-zA-Z]+/g );
+	if ( cssUnitsBits ) {
+		for ( const unit of cssUnitsBits ) {
+			// Standardize the unit to px and extract the value.
+			const parsedUnit = parseUnit( getPxFromCssUnit( unit ) );
+			if ( ! parseFloat( parsedUnit.value ) ) {
+				errorFound = true;
+				// End early since we are dealing with a null value.
+				break;
+			}
+			cssUnit = cssUnit.replace( unit, parsedUnit.value );
+		}
+	} else {
+		errorFound = true;
+	}
+
+	// For mixed math expressions wrapped within CSS expressions
+	const expressionsMatches = cssUnit.match( /(max|min|clamp)/g );
+	if ( ! errorFound && expressionsMatches ) {
+		const values = cssUnit.split( ',' );
+		for ( const currentValue of values ) {
+			// Check for nested calc() and remove them to calculate the value.
+			const rawCurrentValue = currentValue.replace( /\s|calc/g, '' );
+
+			if ( isMathExpression( rawCurrentValue ) ) {
+				const calculatedExpression = calculate( rawCurrentValue );
+
+				if ( calculatedExpression ) {
+					const calculatedValue =
+						calculatedExpression.toFixed( 0 ) + 'px';
+					cssUnit = cssUnit.replace( currentValue, calculatedValue );
+				}
+			}
+		}
+		const parsedValue = parseUnitFunction( cssUnit );
+		return ! parsedValue ? null : parsedValue.value + parsedValue.unit;
+	}
+
+	if ( errorFound ) {
+		return null;
+	}
+
+	const calculatedResult = calculate( cssUnit );
+	return calculatedResult ? calculatedResult.toFixed( 0 ) + 'px' : null;
+}
+
+/**
+ * Convert a parsedUnit object to px value.
+ *
+ * @param {Object} parsedUnit
+ * @param {Object} options
+ * @return {string} or {null} returns the converted with in a px value format.
+ */
+function convertParsedUnitToPx( parsedUnit, options ) {
+	const PIXELS_PER_INCH = 96;
+	const ONE_PERCENT = 0.01;
+
+	const defaultProperties = {
+		fontSize: 16,
+		lineHeight: 16,
+		width: 375,
+		height: 812,
+		type: 'font',
+	};
+
+	const setOptions = Object.assign( {}, defaultProperties, options );
+
+	const relativeUnits = {
+		em: setOptions.fontSize,
+		rem: setOptions.fontSize,
+		vh: setOptions.height * ONE_PERCENT,
+		vw: setOptions.width * ONE_PERCENT,
+		vmin:
+			( setOptions.width < setOptions.height
+				? setOptions.width
+				: setOptions.height ) * ONE_PERCENT,
+		vmax:
+			( setOptions.width > setOptions.height
+				? setOptions.width
+				: setOptions.height ) * ONE_PERCENT,
+		'%':
+			( setOptions.type === 'font'
+				? setOptions.fontSize
+				: setOptions.width ) * ONE_PERCENT,
+		ch: 8, // The advance measure (width) of the glyph "0" of the element's font. Approximate
+		ex: 7.15625, // X-height of the element's font. Approximate.
+		lh: setOptions.lineHeight,
+	};
+	relativeUnits.svw = relativeUnits.vmin;
+	relativeUnits.lvw = relativeUnits.vmax;
+	relativeUnits.dvw = relativeUnits.vw;
+	relativeUnits.svh = relativeUnits.vmin;
+	relativeUnits.lvh = relativeUnits.vmax;
+	relativeUnits.dvh = relativeUnits.vh;
+	relativeUnits.vi = relativeUnits.vh;
+	relativeUnits.svi = relativeUnits.vmin;
+	relativeUnits.lvi = relativeUnits.vmax;
+	relativeUnits.dvi = relativeUnits.vw;
+	relativeUnits.vb = relativeUnits.vh;
+	relativeUnits.svb = relativeUnits.vmin;
+	relativeUnits.lvb = relativeUnits.vmax;
+	relativeUnits.dvb = relativeUnits.vh;
+	relativeUnits.svmin = relativeUnits.vmin;
+	relativeUnits.lvmin = relativeUnits.vmin;
+	relativeUnits.dvmin = relativeUnits.vmin;
+	relativeUnits.svmax = relativeUnits.vmax;
+	relativeUnits.lvmax = relativeUnits.vmax;
+	relativeUnits.dvmax = relativeUnits.vmax;
+
+	const absoluteUnits = {
+		in: PIXELS_PER_INCH,
+		cm: PIXELS_PER_INCH / 2.54,
+		mm: PIXELS_PER_INCH / 25.4,
+		pt: PIXELS_PER_INCH / 72,
+		pc: PIXELS_PER_INCH / 6,
+		px: 1,
+		Q: PIXELS_PER_INCH / 2.54 / 40,
+	};
+
+	if ( relativeUnits[ parsedUnit.unit ] ) {
+		return (
+			( relativeUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(
+				0
+			) + 'px'
+		);
+	}
+
+	if ( absoluteUnits[ parsedUnit.unit ] ) {
+		return (
+			( absoluteUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(
+				0
+			) + 'px'
+		);
+	}
+
+	return null;
+}
+
+/**
+ * Returns the px value of a cssUnit.
+ *
+ * @param {string} cssUnit
+ * @param {Object} options
+ * @return {string} returns the cssUnit value in a simple px format.
+ */
+export function getPxFromCssUnit( cssUnit, options = {} ) {
+	if ( Number.isFinite( cssUnit ) ) {
+		return cssUnit.toFixed( 0 ) + 'px';
+	}
+	if ( cssUnit === undefined ) {
+		return null;
+	}
+	let parsedUnit = parseUnit( cssUnit );
+
+	if ( ! parsedUnit.unit ) {
+		parsedUnit = parseUnitFunction( cssUnit );
+	}
+
+	if ( isMathExpression( cssUnit ) && ! parsedUnit.unit ) {
+		return evalMathExpression( cssUnit );
+	}
+
+	return convertParsedUnitToPx( parsedUnit, options );
+}
+
+// Use simple cache.
+const cache = {};
+/**
+ * Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;
+ *
+ * @param {string} cssUnit
+ * @param {Object} options
+ * @return {string} returns the cssUnit value in a simple px format.
+ */
+function memoizedGetPxFromCssUnit( cssUnit, options = {} ) {
+	const hash = cssUnit + hashOptions( options );
+
+	if ( ! cache[ hash ] ) {
+		cache[ hash ] = getPxFromCssUnit( cssUnit, options );
+	}
+	return cache[ hash ];
+}
+
+function hashOptions( options ) {
+	let hash = '';
+	if ( options.hasOwnProperty( 'fontSize' ) ) {
+		hash = ':' + options.width;
+	}
+	if ( options.hasOwnProperty( 'lineHeight' ) ) {
+		hash = ':' + options.lineHeight;
+	}
+	if ( options.hasOwnProperty( 'width' ) ) {
+		hash = ':' + options.width;
+	}
+	if ( options.hasOwnProperty( 'height' ) ) {
+		hash = ':' + options.height;
+	}
+	if ( options.hasOwnProperty( 'type' ) ) {
+		hash = ':' + options.type;
+	}
+	return hash;
+}
+
+export default memoizedGetPxFromCssUnit;

package/src/mobile/utils/test/get-px-from-css-unit.native.js

@@ -0,0 +1,172 @@
+/**
+ * Internal dependencies
+ */
+import {
+	default as memoizedGetPxFromCssUnit,
+	getPxFromCssUnit,
+} from '../get-px-from-css-unit';
+
+describe( 'getPxFromCssUnit', () => {
+	// Absolute units.
+	describe( 'absolute unites should return px values', () => {
+		const testData = [
+			[ '25px', '25px' ],
+			[ '25.5', '26px' ],
+			[ '1cm', '38px' ],
+			[ '10mm', '38px' ],
+			[ '1in', '96px' ],
+			[ '12pt', '16px' ],
+			[ '1pc', '16px' ],
+			[ '40Q', '38px' ], // 40 Q should be 1 cm.
+		];
+
+		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
+			expect( getPxFromCssUnit( unit ) ).toBe( expected );
+		} );
+		test.each( testData )(
+			'memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
+			}
+		);
+		test.each( testData )(
+			'cached memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
+			}
+		);
+	} );
+
+	describe( 'relative unites should return px values', () => {
+		const settings = {
+			fontSize: 10,
+			width: 100,
+			height: 200,
+			lineHeight: 2,
+			type: 'font',
+		};
+
+		const testData = [
+			[ '2em', '20px' ],
+			[ '2rem', '20px' ],
+			[ '1.125rem', '11px' ],
+			[ '20vw', '20px' ],
+			[ '20vh', '40px' ],
+			[ '20vmin', '20px' ],
+			[ '20vmax', '40px' ],
+			[ '20lh', '40px' ],
+			[ '120%', '12px' ],
+		];
+
+		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
+			expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
+		} );
+		test.each( testData )(
+			'memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
+		test.each( testData )(
+			'cached memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
+	} );
+
+	// Function units.
+
+	describe( 'function unites should return px values', () => {
+		const settings = {
+			fontSize: 10,
+			width: 100,
+			height: 200,
+			lineHeight: 2,
+			type: 'font',
+		};
+
+		const testData = [
+			[ 'min(20px, 25px)', '20px' ],
+			[ 'min(20px, 9px, 12pt, 25px)', '9px' ],
+			[ 'max(20px, 25px)', '25px' ],
+			[ 'clamp(10px, 9px, 25px)', '10px' ],
+			[ 'clamp(10px, 35px, 25px)', '25px' ],
+			[ 'clamp(10px, 15px, 25px)', '15px' ],
+			[ 'min(max(20px,25px), 35px)', '25px' ],
+			[ 'max(min(20px,25px), 35px)', '35px' ],
+			[ '10px + 25px', '35px' ],
+			[ 'calc(10px + 25px)', '35px' ],
+			[ 'calc( 2 * 20px)', '40px' ],
+			[ 'calc(25px - 10px)', '15px' ],
+			[ 'min(10px + 25px, 55pt)', '35px' ],
+			[ 'calc(12vw * 10px)', '450px' ],
+			[ 'calc(45vw / 10px)', '17px' ],
+			[ '', null ],
+			[ undefined, null ],
+			[ 123, '123px' ],
+			[ 123.456, '123px' ],
+			[ 'abc', null ],
+			[ 'console.log("howdy"); + 10px', null ],
+			[ 'calc(12vw * 10px', null ], // Missing closing bracket.
+			[ 'calc( 1em + 0.875rem )', '30px' ], // Decimals
+			[
+				'clamp(1.8rem, 1.8rem + ((1vw / 0.48rem + 1rem) * 2.885), 3rem)',
+				'48px',
+			],
+			[
+				'clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)',
+				'80px',
+			],
+			[
+				'clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)',
+				'42px',
+			],
+			[ 'var:preset|font-size|medium', null ],
+		];
+
+		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
+			expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
+		} );
+		test.each( testData )(
+			'memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
+		test.each( testData )(
+			'cached memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
+	} );
+	// Skip this test it might be useful in dev.
+	it.skip( 'test performance of memoizedGetPxFromCssUnit function', () => {
+		const start = Date.now();
+		let i = 0;
+		const intervals = 1000;
+		while ( i < intervals ) {
+			getPxFromCssUnit( 'max(25px, 35px)', { width: 200 } );
+			i++;
+		}
+		const rawDuration = Date.now() - start;
+
+		const startM = Date.now();
+		i = 0;
+		// The memoized Version should be at 10X better then the non default one.
+		while ( i < intervals * 10 ) {
+			memoizedGetPxFromCssUnit( 'max(25px, 35px)', { width: 201 } );
+			i++;
+		}
+		expect( rawDuration > Date.now() - startM ).toBe( true );
+	} );
+} );

package/src/modal/README.md

@@ -4,12 +4,6 @@ Modals give users information and choices related to a task they’re trying to
 
 ![An alert modal for trashing a post](https://wordpress.org/gutenberg/files/2019/04/Modal.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/modal/index.tsx

@@ -43,12 +43,12 @@ import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
-const level0Dismissers: MutableRefObject<
-	ModalProps[ 'onRequestClose' ] | undefined
->[] = [];
-const ModalContext = createContext( level0Dismissers );
+const ModalContext = createContext<
+	MutableRefObject< ModalProps[ 'onRequestClose' ] | undefined >[]
+>( [] );
 
-let isBodyOpenClassActive = false;
+// Used to track body class names applied while modals are open.
+const bodyOpenClasses = new Map< string, number >();
 
 function UnforwardedModal(
 	props: ModalProps,
@@ -146,7 +146,7 @@ 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 level0Dismissers >( [] );
+	const nestedDismissers = useRef< typeof dismissers >( [] );
 
 	// Updates the stack tracking open modals at this level and calls
 	// onRequestClose for any prior and/or nested modals as applicable.
@@ -162,20 +162,22 @@ function UnforwardedModal(
 		};
 	}, [ dismissers ] );
 
-	const isLevel0 = dismissers === level0Dismissers;
 	// Adds/removes the value of bodyOpenClassName to body element.
 	useEffect( () => {
-		if ( ! isBodyOpenClassActive ) {
-			isBodyOpenClassActive = true;
-			document.body.classList.add( bodyOpenClassName );
-		}
+		const theClass = bodyOpenClassName;
+		const oneMore = 1 + ( bodyOpenClasses.get( theClass ) ?? 0 );
+		bodyOpenClasses.set( theClass, oneMore );
+		document.body.classList.add( bodyOpenClassName );
 		return () => {
-			if ( isLevel0 && dismissers.length === 0 ) {
-				document.body.classList.remove( bodyOpenClassName );
-				isBodyOpenClassActive = false;
+			const oneLess = bodyOpenClasses.get( theClass )! - 1;
+			if ( oneLess === 0 ) {
+				document.body.classList.remove( theClass );
+				bodyOpenClasses.delete( theClass );
+			} else {
+				bodyOpenClasses.set( theClass, oneLess );
 			}
 		};
-	}, [ bodyOpenClassName, dismissers, isLevel0 ] );
+	}, [ bodyOpenClassName ] );
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
@@ -207,7 +209,7 @@ function UnforwardedModal(
 
 		if (
 			shouldCloseOnEsc &&
-			event.code === 'Escape' &&
+			( event.code === 'Escape' || event.key === 'Escape' ) &&
 			! event.defaultPrevented
 		) {
 			event.preventDefault();

package/src/modal/test/index.tsx

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -388,4 +388,93 @@ describe( 'Modal', () => {
 			expect( opener ).toHaveFocus();
 		} );
 	} );
+
+	describe( 'Body class name', () => {
+		const overrideClass = 'is-any-open';
+		const BodyClassDemo = () => {
+			const [ isAShown, setIsAShown ] = useState( false );
+			const [ isA1Shown, setIsA1Shown ] = useState( false );
+			const [ isBShown, setIsBShown ] = useState( false );
+			const [ isClassOverriden, setIsClassOverriden ] = useState( false );
+			useEffect( () => {
+				const toggles: ( e: KeyboardEvent ) => void = ( {
+					key,
+					metaKey,
+				} ) => {
+					if ( key === 'a' ) {
+						if ( metaKey ) return setIsA1Shown( ( v ) => ! v );
+						return setIsAShown( ( v ) => ! v );
+					}
+					if ( key === 'b' ) return setIsBShown( ( v ) => ! v );
+					if ( key === 'c' )
+						return setIsClassOverriden( ( v ) => ! v );
+				};
+				document.addEventListener( 'keydown', toggles );
+				return () =>
+					void document.removeEventListener( 'keydown', toggles );
+			}, [] );
+			return (
+				<>
+					{ isAShown && (
+						<Modal
+							bodyOpenClassName={
+								isClassOverriden ? overrideClass : 'is-A-open'
+							}
+							onRequestClose={ () => setIsAShown( false ) }
+						>
+							<p>Modal A contents</p>
+							{ isA1Shown && (
+								<Modal
+									title="Nested"
+									onRequestClose={ () =>
+										setIsA1Shown( false )
+									}
+								>
+									<p>Modal A1 contents</p>
+								</Modal>
+							) }
+						</Modal>
+					) }
+					{ isBShown && (
+						<Modal
+							bodyOpenClassName={
+								isClassOverriden ? overrideClass : 'is-B-open'
+							}
+							onRequestClose={ () => setIsBShown( false ) }
+						>
+							<p>Modal B contents</p>
+						</Modal>
+					) }
+				</>
+			);
+		};
+
+		it( 'is added and removed when modal opens and closes including when closed due to another modal opening', async () => {
+			const user = userEvent.setup();
+
+			const { baseElement } = render( <BodyClassDemo /> );
+
+			await user.keyboard( 'a' ); // Opens modal A.
+			expect( baseElement ).toHaveClass( 'is-A-open' );
+
+			await user.keyboard( 'b' ); // Opens modal B > closes modal A.
+			expect( baseElement ).toHaveClass( 'is-B-open' );
+			expect( baseElement ).not.toHaveClass( 'is-A-open' );
+
+			await user.keyboard( 'b' ); // Closes modal B.
+			expect( baseElement ).not.toHaveClass( 'is-B-open' );
+		} );
+
+		it( 'is removed even when prop changes while nested modal is open', async () => {
+			const user = userEvent.setup();
+
+			const { baseElement } = render( <BodyClassDemo /> );
+
+			await user.keyboard( 'a' ); // Opens modal A.
+			await user.keyboard( '{Meta>}a{/Meta}' ); // Opens nested modal.
+			await user.keyboard( 'c' ); // Changes `bodyOpenClassName`.
+			await user.keyboard( 'a' ); // Closes modal A.
+			expect( baseElement ).not.toHaveClass( 'is-A-open' );
+		} );
+	} );
 } );

package/src/navigation/menu/menu-title.tsx

@@ -66,7 +66,7 @@ export default function NavigationMenuTitle( {
 
 							{ hasSearch && (
 								<Button
-									isSmall
+									size="small"
 									variant="tertiary"
 									label={ searchButtonLabel }
 									onClick={ () => setIsSearching( true ) }