@wordpress/components 25.13.0 → 25.15.0

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 ) }

package/src/navigator/navigator-provider/component.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -23,15 +22,16 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect, useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
+import { patternMatch, findParent } from '../utils/router';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
+import * as styles from '../styles';
 import type {
 	NavigatorProviderProps,
 	NavigatorLocation,
 	NavigatorContext as NavigatorContextType,
 	Screen,
 } from '../types';
-import { patternMatch, findParent } from '../utils/router';
 
 type MatchedPath = ReturnType< typeof patternMatch >;
 type ScreenAction = { type: string; screen: Screen };
@@ -248,8 +248,7 @@ function UnconnectedNavigatorProvider(
 
 	const cx = useCx();
 	const classes = useMemo(
-		// Prevents horizontal overflow while animating screen transitions.
-		() => cx( css( { overflowX: 'hidden' } ), className ),
+		() => cx( styles.navigatorProviderWrapper, className ),
 		[ className, cx ]
 	);
 

package/src/navigator/navigator-screen/component.tsx

@@ -2,11 +2,6 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import type { MotionProps } from 'framer-motion';
-// eslint-disable-next-line no-restricted-imports
-import { motion } from 'framer-motion';
-import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -19,8 +14,8 @@ import {
 	useRef,
 	useId,
 } from '@wordpress/element';
-import { useReducedMotion, useMergeRefs } from '@wordpress/compose';
-import { isRTL } from '@wordpress/i18n';
+import { useMergeRefs } from '@wordpress/compose';
+import { isRTL as isRTLFn } from '@wordpress/i18n';
 import { escapeAttribute } from '@wordpress/escape-html';
 
 /**
@@ -31,22 +26,11 @@ import { contextConnect, useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
+import * as styles from '../styles';
 import type { NavigatorScreenProps } from '../types';
 
-const animationEnterDelay = 0;
-const animationEnterDuration = 0.14;
-const animationExitDuration = 0.14;
-const animationExitDelay = 0;
-
-// Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,
-// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)
-type Props = Omit<
-	WordPressComponentProps< NavigatorScreenProps, 'div', false >,
-	Exclude< keyof MotionProps, 'style' | 'children' >
->;
-
 function UnconnectedNavigatorScreen(
-	props: Props,
+	props: WordPressComponentProps< NavigatorScreenProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const screenId = useId();
@@ -55,7 +39,6 @@ function UnconnectedNavigatorScreen(
 		'NavigatorScreen'
 	);
 
-	const prefersReducedMotion = useReducedMotion();
 	const { location, match, addScreen, removeScreen } =
 		useContext( NavigatorContext );
 	const isMatch = match === screenId;
@@ -70,19 +53,20 @@ function UnconnectedNavigatorScreen(
 		return () => removeScreen( screen );
 	}, [ screenId, path, addScreen, removeScreen ] );
 
+	const isRTL = isRTLFn();
+	const { isInitial, isBack } = location;
 	const cx = useCx();
 	const classes = useMemo(
 		() =>
 			cx(
-				css( {
-					// Ensures horizontal overflow is visually accessible.
-					overflowX: 'auto',
-					// In case the root has a height, it should not be exceeded.
-					maxHeight: '100%',
+				styles.navigatorScreen( {
+					isInitial,
+					isBack,
+					isRTL,
 				} ),
 				className
 			),
-		[ className, cx ]
+		[ className, cx, isInitial, isBack, isRTL ]
 	);
 
 	const locationRef = useRef( location );
@@ -149,73 +133,11 @@ function UnconnectedNavigatorScreen(
 
 	const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
 
-	if ( ! isMatch ) {
-		return null;
-	}
-
-	if ( prefersReducedMotion ) {
-		return (
-			<View
-				ref={ mergedWrapperRef }
-				className={ classes }
-				{ ...otherProps }
-			>
-				{ children }
-			</View>
-		);
-	}
-
-	const animate = {
-		opacity: 1,
-		transition: {
-			delay: animationEnterDelay,
-			duration: animationEnterDuration,
-			ease: 'easeInOut',
-		},
-		x: 0,
-	};
-	// Disable the initial animation if the screen is the very first screen to be
-	// rendered within the current `NavigatorProvider`.
-	const initial =
-		location.isInitial && ! location.isBack
-			? false
-			: {
-					opacity: 0,
-					x:
-						( isRTL() && location.isBack ) ||
-						( ! isRTL() && ! location.isBack )
-							? 50
-							: -50,
-			  };
-	const exit = {
-		delay: animationExitDelay,
-		opacity: 0,
-		x:
-			( ! isRTL() && location.isBack ) || ( isRTL() && ! location.isBack )
-				? 50
-				: -50,
-		transition: {
-			duration: animationExitDuration,
-			ease: 'easeInOut',
-		},
-	};
-
-	const animatedProps = {
-		animate,
-		exit,
-		initial,
-	};
-
-	return (
-		<motion.div
-			ref={ mergedWrapperRef }
-			className={ classes }
-			{ ...otherProps }
-			{ ...animatedProps }
-		>
+	return isMatch ? (
+		<View ref={ mergedWrapperRef } className={ classes } { ...otherProps }>
 			{ children }
-		</motion.div>
-	);
+		</View>
+	) : null;
 }
 
 /**

package/src/navigator/styles.ts

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { css, keyframes } from '@emotion/react';
+
+export const navigatorProviderWrapper = css`
+	/* Prevents horizontal overflow while animating screen transitions */
+	overflow-x: hidden;
+	/* Mark this subsection of the DOM as isolated, providing performance benefits
+	 * by limiting calculations of layout, style and paint to a DOM subtree rather
+	 * than the entire page.
+	 */
+	contain: content;
+`;
+
+const fadeInFromRight = keyframes( {
+	'0%': {
+		opacity: 0,
+		transform: `translateX( 50px )`,
+	},
+	'100%': { opacity: 1, transform: 'none' },
+} );
+
+const fadeInFromLeft = keyframes( {
+	'0%': {
+		opacity: 0,
+		transform: `translateX( -50px )`,
+	},
+	'100%': { opacity: 1, transform: 'none' },
+} );
+
+type NavigatorScreenAnimationProps = {
+	isInitial?: boolean;
+	isBack?: boolean;
+	isRTL: boolean;
+};
+
+const navigatorScreenAnimation = ( {
+	isInitial,
+	isBack,
+	isRTL,
+}: NavigatorScreenAnimationProps ) => {
+	if ( isInitial && ! isBack ) {
+		return;
+	}
+
+	const animationName =
+		( isRTL && isBack ) || ( ! isRTL && ! isBack )
+			? fadeInFromRight
+			: fadeInFromLeft;
+
+	return css`
+		animation-duration: 0.14s;
+		animation-timing-function: ease-in-out;
+		will-change: transform, opacity;
+		animation-name: ${ animationName };
+
+		@media ( prefers-reduced-motion ) {
+			animation-duration: 0s;
+		}
+	`;
+};
+
+export const navigatorScreen = ( props: NavigatorScreenAnimationProps ) => css`
+	/* Ensures horizontal overflow is visually accessible */
+	overflow-x: auto;
+	/* In case the root has a height, it should not be exceeded */
+	max-height: 100%;
+
+	${ navigatorScreenAnimation( props ) }
+`;

package/src/navigator/test/index.tsx

@@ -769,68 +769,4 @@ describe( 'Navigator', () => {
 			).toHaveFocus();
 		} );
 	} );
-
-	describe( 'animation', () => {
-		it( 'should not animate the initial screen', async () => {
-			const onHomeAnimationStartSpy = jest.fn();
-
-			render(
-				<NavigatorProvider initialPath="/">
-					<NavigatorScreen
-						path="/"
-						onAnimationStart={ onHomeAnimationStartSpy }
-					>
-						<CustomNavigatorButton path="/child">
-							To child
-						</CustomNavigatorButton>
-					</NavigatorScreen>
-				</NavigatorProvider>
-			);
-
-			expect( onHomeAnimationStartSpy ).not.toHaveBeenCalled();
-		} );
-
-		it( 'should animate all other screens (including the initial screen when navigating back)', async () => {
-			const user = userEvent.setup();
-
-			const onHomeAnimationStartSpy = jest.fn();
-			const onChildAnimationStartSpy = jest.fn();
-
-			render(
-				<NavigatorProvider initialPath="/">
-					<NavigatorScreen
-						path="/"
-						onAnimationStart={ onHomeAnimationStartSpy }
-					>
-						<CustomNavigatorButton path="/child">
-							To child
-						</CustomNavigatorButton>
-					</NavigatorScreen>
-					<NavigatorScreen
-						path="/child"
-						onAnimationStart={ onChildAnimationStartSpy }
-					>
-						<CustomNavigatorBackButton>
-							Back to home
-						</CustomNavigatorBackButton>
-					</NavigatorScreen>
-				</NavigatorProvider>
-			);
-
-			expect( onHomeAnimationStartSpy ).not.toHaveBeenCalled();
-			expect( onChildAnimationStartSpy ).not.toHaveBeenCalled();
-
-			await user.click(
-				screen.getByRole( 'button', { name: 'To child' } )
-			);
-			expect( onChildAnimationStartSpy ).toHaveBeenCalledTimes( 1 );
-			expect( onHomeAnimationStartSpy ).not.toHaveBeenCalled();
-
-			await user.click(
-				screen.getByRole( 'button', { name: 'Back to home' } )
-			);
-			expect( onChildAnimationStartSpy ).toHaveBeenCalledTimes( 1 );
-			expect( onHomeAnimationStartSpy ).toHaveBeenCalledTimes( 1 );
-		} );
-	} );
 } );