@wordpress/components 25.14.0 → 25.15.1-next.79a6196f.0

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

package/src/notice/README.md

@@ -4,12 +4,6 @@ Use Notices to communicate prominent messages to the user.
 
 ![Notice component](https://make.wordpress.org/design/files/2019/03/Notice-Screenshot-alt.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 A Notice displays a succinct message. It can also offer the user options, like viewing a published post or updating a setting, and requires a user action to be dismissed.

package/src/number-control/README.md

@@ -46,9 +46,9 @@ If `isDragEnabled` is true, this controls the amount of `px` to have been dragge
 
 ### spinControls
 
- The type of spin controls to display. These are butons that allow the user to
+ The type of spin controls to display. These are buttons that allow the user to
  quickly increment and decrement the number.
- 
+
  - 'none' - Do not show spin controls.
  - 'native' - Use browser's native HTML `input` controls.
  - 'custom' - Use plus and minus icon buttons.

package/src/number-control/index.tsx

@@ -246,10 +246,8 @@ function UnforwardedNumberControl(
 								<SpinButton
 									className={ spinButtonClasses }
 									icon={ plusIcon }
-									isSmall
-									aria-hidden="true"
-									aria-label={ __( 'Increment' ) }
-									tabIndex={ -1 }
+									size="small"
+									label={ __( 'Increment' ) }
 									onClick={ buildSpinButtonClickHandler(
 										'up'
 									) }
@@ -257,10 +255,8 @@ function UnforwardedNumberControl(
 								<SpinButton
 									className={ spinButtonClasses }
 									icon={ resetIcon }
-									isSmall
-									aria-hidden="true"
-									aria-label={ __( 'Decrement' ) }
-									tabIndex={ -1 }
+									size="small"
+									label={ __( 'Decrement' ) }
 									onClick={ buildSpinButtonClickHandler(
 										'down'
 									) }

package/src/number-control/types.ts

@@ -15,7 +15,7 @@ export type NumberControlProps = Omit<
 	 */
 	hideHTMLArrows?: boolean;
 	/**
-	 * The type of spin controls to display. These are butons that allow the
+	 * The type of spin controls to display. These are buttons that allow the
 	 * user to quickly increment and decrement the number.
 	 *
 	 * - 'none' - Do not show spin controls.

package/src/palette-edit/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -49,6 +48,7 @@ import {
 import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
 import CustomGradientPicker from '../custom-gradient-picker';
+import { kebabCase } from '../utils/strings';
 import type {
 	Color,
 	ColorPickerPopoverProps,
@@ -60,7 +60,7 @@ import type {
 	PaletteElement,
 } from './types';
 
-export const DEFAULT_COLOR = '#000';
+const DEFAULT_COLOR = '#000';
 
 function NameInput( { value, onChange, label }: NameInputProps ) {
 	return (
@@ -74,8 +74,8 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
 }
 
 /**
- * Returns a temporary name for a palette item in the format "Color + id".
- * To ensure there are no duplicate ids, this function checks all slugs for temporary names.
+ * Returns a name for a palette item in the format "Color + id".
+ * To ensure there are no duplicate ids, this function checks all slugs.
  * It expects slugs to be in the format: slugPrefix + color- + number.
  * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
  *
@@ -88,10 +88,10 @@ export function getNameForPosition(
 	elements: PaletteElement[],
 	slugPrefix: string
 ) {
-	const temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
+	const nameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
 	const position = elements.reduce( ( previousValue, currentValue ) => {
 		if ( typeof currentValue?.slug === 'string' ) {
-			const matches = currentValue?.slug.match( temporaryNameRegex );
+			const matches = currentValue?.slug.match( nameRegex );
 			if ( matches ) {
 				const id = parseInt( matches[ 1 ], 10 );
 				if ( id >= previousValue ) {
@@ -103,7 +103,7 @@ export function getNameForPosition(
 	}, 1 );
 
 	return sprintf(
-		/* translators: %s: is a temporary id for a custom color */
+		/* translators: %s: is an id for a custom color */
 		__( 'Color %s' ),
 		position
 	);
@@ -241,7 +241,7 @@ function Option< T extends Color | Gradient >( {
 				{ isEditing && ! canOnlyChangeValues && (
 					<FlexItem>
 						<RemoveButton
-							isSmall
+							size="small"
 							icon={ lineSolid }
 							label={ __( 'Remove color' ) }
 							onClick={ onRemove }
@@ -261,32 +261,6 @@ function Option< T extends Color | Gradient >( {
 	);
 }
 
-/**
- * Checks if a color or gradient is a temporary element by testing against default values.
- */
-export function isTemporaryElement(
-	slugPrefix: string,
-	{ slug, color, gradient }: Color | Gradient
-): Boolean {
-	const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
-
-	// If the slug matches the temporary name regex,
-	// check if the color or gradient matches the default value.
-	if ( regex.test( slug ) ) {
-		// The order is important as gradient elements
-		// contain a color property.
-		if ( !! gradient ) {
-			return gradient === DEFAULT_GRADIENT;
-		}
-
-		if ( !! color ) {
-			return color === DEFAULT_COLOR;
-		}
-	}
-
-	return false;
-}
-
 function PaletteEditListView< T extends Color | Gradient >( {
 	elements,
 	onChange,
@@ -302,23 +276,6 @@ function PaletteEditListView< T extends Color | Gradient >( {
 	useEffect( () => {
 		elementsReference.current = elements;
 	}, [ elements ] );
-	useEffect( () => {
-		return () => {
-			if (
-				elementsReference.current?.some( ( element ) =>
-					isTemporaryElement( slugPrefix, element )
-				)
-			) {
-				const newElements = elementsReference.current.filter(
-					( element ) => ! isTemporaryElement( slugPrefix, element )
-				);
-				onChange( newElements.length ? newElements : undefined );
-			}
-		};
-		// Disable reason: adding the missing dependency here would cause breaking changes that will require
-		// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
 
 	const debounceOnChange = useDebounce( onChange, 100 );
 
@@ -454,7 +411,7 @@ export function PaletteEdit( {
 				<PaletteActionsContainer>
 					{ hasElements && isEditing && (
 						<DoneButton
-							isSmall
+							size="small"
 							onClick={ () => {
 								setIsEditing( false );
 								setEditingElement( null );
@@ -465,7 +422,7 @@ export function PaletteEdit( {
 					) }
 					{ ! canOnlyChangeValues && (
 						<Button
-							isSmall
+							size="small"
 							isPressed={ isAdding }
 							icon={ plus }
 							label={
@@ -474,7 +431,7 @@ export function PaletteEdit( {
 									: __( 'Add color' )
 							}
 							onClick={ () => {
-								const tempOptionName = getNameForPosition(
+								const optionName = getNameForPosition(
 									elements,
 									slugPrefix
 								);
@@ -484,10 +441,10 @@ export function PaletteEdit( {
 										...gradients,
 										{
 											gradient: DEFAULT_GRADIENT,
-											name: tempOptionName,
+											name: optionName,
 											slug:
 												slugPrefix +
-												kebabCase( tempOptionName ),
+												kebabCase( optionName ),
 										},
 									] );
 								} else {
@@ -495,10 +452,10 @@ export function PaletteEdit( {
 										...colors,
 										{
 											color: DEFAULT_COLOR,
-											name: tempOptionName,
+											name: optionName,
 											slug:
 												slugPrefix +
-												kebabCase( tempOptionName ),
+												kebabCase( optionName ),
 										},
 									] );
 								}

package/src/palette-edit/test/index.tsx

@@ -6,13 +6,8 @@ import { render, fireEvent, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import PaletteEdit, {
-	getNameForPosition,
-	isTemporaryElement,
-	DEFAULT_COLOR,
-} from '..';
+import PaletteEdit, { getNameForPosition } from '..';
 import type { PaletteElement } from '../types';
-import { DEFAULT_GRADIENT } from '../../custom-gradient-picker/constants';
 
 describe( 'getNameForPosition', () => {
 	test( 'should return 1 by default', () => {
@@ -85,75 +80,6 @@ describe( 'getNameForPosition', () => {
 	} );
 } );
 
-describe( 'isTemporaryElement', () => {
-	[
-		{
-			message: 'identifies temporary color',
-			slug: 'test-',
-			obj: {
-				name: '',
-				slug: 'test-color-1',
-				color: DEFAULT_COLOR,
-			},
-			expected: true,
-		},
-		{
-			message: 'identifies temporary gradient',
-			slug: 'test-',
-			obj: {
-				name: '',
-				slug: 'test-color-1',
-				gradient: DEFAULT_GRADIENT,
-			},
-			expected: true,
-		},
-		{
-			message: 'identifies custom color slug',
-			slug: 'test-',
-			obj: {
-				name: '',
-				slug: 'test-color-happy',
-				color: DEFAULT_COLOR,
-			},
-			expected: false,
-		},
-		{
-			message: 'identifies custom color value',
-			slug: 'test-',
-			obj: {
-				name: '',
-				slug: 'test-color-1',
-				color: '#ccc',
-			},
-			expected: false,
-		},
-		{
-			message: 'identifies custom gradient slug',
-			slug: 'test-',
-			obj: {
-				name: '',
-				slug: 'test-gradient-joy',
-				color: DEFAULT_GRADIENT,
-			},
-			expected: false,
-		},
-		{
-			message: 'identifies custom gradient value',
-			slug: 'test-',
-			obj: {
-				name: '',
-				slug: 'test-color-3',
-				color: 'linear-gradient(90deg, rgba(22, 22, 22, 1) 0%, rgb(155, 81, 224) 100%)',
-			},
-			expected: false,
-		},
-	].forEach( ( { message, slug, obj, expected } ) => {
-		it( `should ${ message }`, () => {
-			expect( isTemporaryElement( slug, obj ) ).toBe( expected );
-		} );
-	} );
-} );
-
 describe( 'PaletteEdit', () => {
 	const defaultProps = {
 		colors: [ { color: '#ffffff', name: 'Base', slug: 'base' } ],

package/src/panel/README.md

@@ -4,12 +4,6 @@ Panels expand and collapse multiple sections of content.
 
 ![](https://make.wordpress.org/design/files/2019/03/panel.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Anatomy

package/src/private-apis.native.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { kebabCase } from './utils/strings';
+import { lock } from './lock-unlock';
+
+/**
+ * Private @wordpress/components APIs.
+ */
+export const privateApis = {};
+lock( privateApis, {
+	kebabCase,
+} );