@wordpress/components 21.2.0 → 22.0.0

package/src/notice/test/index.js

@@ -1,13 +1,11 @@
 /**
  * External dependencies
  */
-import ShallowRenderer from 'react-test-renderer/shallow';
-import { create } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
-import TokenList from '@wordpress/token-list';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -23,9 +21,7 @@ describe( 'Notice', () => {
 	} );
 
 	it( 'should match snapshot', () => {
-		const renderer = new ShallowRenderer();
-
-		renderer.render(
+		const { container } = render(
 			<Notice
 				status="success"
 				actions={ [
@@ -38,63 +34,47 @@ describe( 'Notice', () => {
 			</Notice>
 		);
 
-		expect( renderer.getRenderOutput() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should not have is-dismissible class when isDismissible prop is false', () => {
-		const renderer = new ShallowRenderer();
-
-		renderer.render( <Notice isDismissible={ false } /> );
+		const { container } = render( <Notice isDismissible={ false } /> );
 
-		const classes = new TokenList(
-			renderer.getRenderOutput().props.className
-		);
-		expect( classes.contains( 'components-notice' ) ).toBe( true );
-		expect( classes.contains( 'is-dismissible' ) ).toBe( false );
+		expect( container.firstChild ).toHaveClass( 'components-notice' );
+		expect( container.firstChild ).not.toHaveClass( 'is-dismissible' );
 	} );
 
 	it( 'should default to info status', () => {
-		const renderer = new ShallowRenderer();
+		const { container } = render( <Notice /> );
 
-		renderer.render( <Notice /> );
-
-		const classes = new TokenList(
-			renderer.getRenderOutput().props.className
-		);
-		expect( classes.contains( 'is-info' ) ).toBe( true );
+		expect( container.firstChild ).toHaveClass( 'is-info' );
 	} );
 
 	describe( 'useSpokenMessage', () => {
 		it( 'should speak the given message', () => {
-			const tree = create( <Notice>FYI</Notice> );
-			tree.update();
+			render( <Notice>FYI</Notice> );
 
 			expect( speak ).toHaveBeenCalledWith( 'FYI', 'polite' );
 		} );
 
 		it( 'should speak the given message by explicit politeness', () => {
-			const tree = create(
-				<Notice politeness="assertive">Uh oh!</Notice>
-			);
-			tree.update();
+			render( <Notice politeness="assertive">Uh oh!</Notice> );
 
 			expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
 		} );
 
 		it( 'should speak the given message by implicit politeness by status', () => {
-			const tree = create( <Notice status="error">Uh oh!</Notice> );
-			tree.update();
+			render( <Notice status="error">Uh oh!</Notice> );
 
 			expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
 		} );
 
 		it( 'should speak the given message, preferring explicit to implicit politeness', () => {
-			const tree = create(
+			render(
 				<Notice politeness="polite" status="error">
 					No need to panic
 				</Notice>
 			);
-			tree.update();
 
 			expect( speak ).toHaveBeenCalledWith(
 				'No need to panic',
@@ -105,12 +85,11 @@ describe( 'Notice', () => {
 		it( 'should coerce a message to a string', () => {
 			// This test assumes that `@wordpress/a11y` is capable of handling
 			// markup strings appropriately.
-			const tree = create(
+			render(
 				<Notice>
 					With <em>emphasis</em> this time.
 				</Notice>
 			);
-			tree.update();
 
 			expect( speak ).toHaveBeenCalledWith(
 				'With <em>emphasis</em> this time.',
@@ -119,12 +98,12 @@ describe( 'Notice', () => {
 		} );
 
 		it( 'should not re-speak an effectively equivalent element message', () => {
-			const tree = create(
+			const { rerender } = render(
 				<Notice>
 					With <em>emphasis</em> this time.
 				</Notice>
 			);
-			tree.update(
+			rerender(
 				<Notice>
 					With <em>emphasis</em> this time.
 				</Notice>

package/src/notice/test/list.js

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import ShallowRenderer from 'react-test-renderer/shallow';
-
-/**
- * WordPress dependencies
- */
-import TokenList from '@wordpress/token-list';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -15,14 +10,11 @@ import NoticeList from '../list';
 
 describe( 'NoticeList', () => {
 	it( 'should merge className', () => {
-		const renderer = new ShallowRenderer();
-
-		renderer.render( <NoticeList notices={ [] } className="is-ok" /> );
-
-		const classes = new TokenList(
-			renderer.getRenderOutput().props.className
+		const { container } = render(
+			<NoticeList notices={ [] } className="is-ok" />
 		);
-		expect( classes.contains( 'is-ok' ) ).toBe( true );
-		expect( classes.contains( 'components-notice-list' ) ).toBe( true );
+
+		expect( container.firstChild ).toHaveClass( 'is-ok' );
+		expect( container.firstChild ).toHaveClass( 'components-notice-list' );
 	} );
 } );

package/src/number-control/README.md

@@ -44,13 +44,18 @@ If `isDragEnabled` is true, this controls the amount of `px` to have been dragge
 -   Required: No
 -   Default: `10`
 
-### hideHTMLArrows
+### spinControls
 
-If true, the default `input` HTML arrows will be hidden.
+ The type of spin controls to display. These are butons 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.
 
--   Type: `Boolean`
+-   Type: `String`
 -   Required: No
--   Default: `false`
+-   Default: `'native'`
 
 ### isDragEnabled
 

package/src/number-control/index.tsx

@@ -2,23 +2,30 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import type { ForwardedRef } from 'react';
+import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
+import { useRef, forwardRef } from '@wordpress/element';
+import { isRTL, __ } from '@wordpress/i18n';
+import { plus as plusIcon, reset as resetIcon } from '@wordpress/icons';
+import { useMergeRefs } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import { Input } from './styles/number-control-styles';
+import { Input, SpinButton } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { add, subtract, roundClamp } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
 import type { WordPressComponentProps } from '../ui/context/wordpress-component';
 import type { NumberControlProps } from './types';
+import { HStack } from '../h-stack';
+import { Spacer } from '../spacer';
+
+const noop = () => {};
 
 function UnforwardedNumberControl(
 	{
@@ -26,6 +33,7 @@ function UnforwardedNumberControl(
 		className,
 		dragDirection = 'n',
 		hideHTMLArrows = false,
+		spinControls = 'native',
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
 		label,
@@ -36,10 +44,25 @@ function UnforwardedNumberControl(
 		step = 1,
 		type: typeProp = 'number',
 		value: valueProp,
+		size = 'default',
+		suffix,
+		onChange = noop,
 		...props
 	}: WordPressComponentProps< NumberControlProps, 'input', false >,
-	ref: ForwardedRef< any >
+	forwardedRef: ForwardedRef< any >
 ) {
+	if ( hideHTMLArrows ) {
+		deprecated( 'hideHTMLArrows', {
+			alternative: 'spinControls="none"',
+			since: '6.2',
+			version: '6.3',
+		} );
+		spinControls = 'none';
+	}
+
+	const inputRef = useRef< HTMLInputElement >();
+	const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
+
 	const isStepAny = step === 'any';
 	const baseStep = isStepAny ? 1 : ensureNumber( step );
 	const baseValue = roundClamp( 0, min, max, baseStep );
@@ -56,6 +79,23 @@ function UnforwardedNumberControl(
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
 	const classes = classNames( 'components-number-control', className );
 
+	const spinValue = (
+		value: string | number | undefined,
+		direction: 'up' | 'down',
+		event: KeyboardEvent | MouseEvent | undefined
+	) => {
+		event?.preventDefault();
+		const shift = event?.shiftKey && isShiftStepEnabled;
+		const delta = shift ? ensureNumber( shiftStep ) * baseStep : baseStep;
+		let nextValue = isValueEmpty( value ) ? baseValue : value;
+		if ( direction === 'up' ) {
+			nextValue = add( nextValue, delta );
+		} else if ( direction === 'down' ) {
+			nextValue = subtract( nextValue, delta );
+		}
+		return constrainValue( nextValue, shift ? delta : undefined );
+	};
+
 	/**
 	 * "Middleware" function that intercepts updates from InputControl.
 	 * This allows us to tap into actions to transform the (next) state for
@@ -78,33 +118,11 @@ function UnforwardedNumberControl(
 				type === inputControlActionTypes.PRESS_UP ||
 				type === inputControlActionTypes.PRESS_DOWN
 			) {
-				const enableShift =
-					( event as KeyboardEvent | undefined )?.shiftKey &&
-					isShiftStepEnabled;
-
-				const incrementalValue = enableShift
-					? ensureNumber( shiftStep ) * baseStep
-					: baseStep;
-				let nextValue = isValueEmpty( currentValue )
-					? baseValue
-					: currentValue;
-
-				if ( event?.preventDefault ) {
-					event.preventDefault();
-				}
-
-				if ( type === inputControlActionTypes.PRESS_UP ) {
-					nextValue = add( nextValue, incrementalValue );
-				}
-
-				if ( type === inputControlActionTypes.PRESS_DOWN ) {
-					nextValue = subtract( nextValue, incrementalValue );
-				}
-
 				// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
-				nextState.value = constrainValue(
-					nextValue,
-					enableShift ? incrementalValue : undefined
+				nextState.value = spinValue(
+					currentValue,
+					type === inputControlActionTypes.PRESS_UP ? 'up' : 'down',
+					event as KeyboardEvent | undefined
 				);
 			}
 
@@ -178,6 +196,18 @@ function UnforwardedNumberControl(
 			return nextState;
 		};
 
+	const buildSpinButtonClickHandler =
+		( direction: 'up' | 'down' ) =>
+		( event: MouseEvent< HTMLButtonElement > ) =>
+			onChange( String( spinValue( valueProp, direction, event ) ), {
+				// Set event.target to the <input> so that consumers can use
+				// e.g. event.target.validity.
+				event: {
+					...event,
+					target: inputRef.current!,
+				},
+			} );
+
 	return (
 		<Input
 			autoComplete={ autoComplete }
@@ -185,12 +215,12 @@ function UnforwardedNumberControl(
 			{ ...props }
 			className={ classes }
 			dragDirection={ dragDirection }
-			hideHTMLArrows={ hideHTMLArrows }
+			hideHTMLArrows={ spinControls !== 'native' }
 			isDragEnabled={ isDragEnabled }
 			label={ label }
 			max={ max }
 			min={ min }
-			ref={ ref }
+			ref={ mergedRef }
 			required={ required }
 			step={ step }
 			type={ typeProp }
@@ -200,6 +230,43 @@ function UnforwardedNumberControl(
 				const baseState = numberControlStateReducer( state, action );
 				return stateReducerProp?.( baseState, action ) ?? baseState;
 			} }
+			size={ size }
+			suffix={
+				spinControls === 'custom' ? (
+					<>
+						{ suffix }
+						<Spacer marginBottom={ 0 } marginRight={ 2 }>
+							<HStack spacing={ 1 }>
+								<SpinButton
+									icon={ plusIcon }
+									isSmall
+									aria-hidden="true"
+									aria-label={ __( 'Increment' ) }
+									tabIndex={ -1 }
+									onClick={ buildSpinButtonClickHandler(
+										'up'
+									) }
+									size={ size }
+								/>
+								<SpinButton
+									icon={ resetIcon }
+									isSmall
+									aria-hidden="true"
+									aria-label={ __( 'Decrement' ) }
+									tabIndex={ -1 }
+									onClick={ buildSpinButtonClickHandler(
+										'down'
+									) }
+									size={ size }
+								/>
+							</HStack>
+						</Spacer>
+					</>
+				) : (
+					suffix
+				)
+			}
+			onChange={ onChange }
 		/>
 	);
 }

package/src/number-control/styles/number-control-styles.js

@@ -4,13 +4,19 @@
  */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+
 /**
  * Internal dependencies
  */
 import InputControl from '../../input-control';
+import { COLORS } from '../../utils';
+import Button from '../../button';
+import { space } from '../../ui/utils/space';
 
 const htmlArrowStyles = ( { hideHTMLArrows } ) => {
-	if ( ! hideHTMLArrows ) return ``;
+	if ( ! hideHTMLArrows ) {
+		return ``;
+	}
 
 	return css`
 		input[type='number']::-webkit-outer-spin-button,
@@ -28,3 +34,22 @@ const htmlArrowStyles = ( { hideHTMLArrows } ) => {
 export const Input = styled( InputControl )`
 	${ htmlArrowStyles };
 `;
+
+const spinButtonSizeStyles = ( { size } ) => {
+	if ( size !== 'small' ) {
+		return ``;
+	}
+
+	return css`
+		width: ${ space( 5 ) };
+		min-width: ${ space( 5 ) };
+		height: ${ space( 5 ) };
+	`;
+};
+
+export const SpinButton = styled( Button )`
+	&&&&& {
+		color: ${ COLORS.ui.theme };
+		${ spinButtonSizeStyles }
+	}
+`;

package/src/number-control/test/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -90,9 +91,10 @@ describe( 'NumberControl', () => {
 			// After the blur, the `onChange` callback fires asynchronously.
 			await waitFor( () => {
 				expect( spy ).toHaveBeenCalledTimes( 2 );
-				expect( spy ).toHaveBeenNthCalledWith( 1, '1' );
-				expect( spy ).toHaveBeenNthCalledWith( 2, 4 );
 			} );
+
+			expect( spy ).toHaveBeenNthCalledWith( 1, '1' );
+			expect( spy ).toHaveBeenNthCalledWith( 2, 4 );
 		} );
 
 		it( 'should call onChange callback when value is not valid', () => {
@@ -424,4 +426,53 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '4' );
 		} );
 	} );
+
+	describe( 'custom spin buttons', () => {
+		test.each( [ undefined, 'none', 'native' ] )(
+			'should not appear when spinControls = %s',
+			( spinControls ) => {
+				render( <NumberControl spinControls={ spinControls } /> );
+				expect(
+					screen.queryByLabelText( 'Increment' )
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByLabelText( 'Decrement' )
+				).not.toBeInTheDocument();
+			}
+		);
+
+		test.each( [
+			[ 'up', '1', {} ],
+			[ 'up', '2', { value: '1' } ],
+			[ 'up', '12', { value: '10', step: '2' } ],
+			[ 'up', '10', { value: '10', max: '10' } ],
+			[ 'down', '-1', {} ],
+			[ 'down', '1', { value: '2' } ],
+			[ 'down', '10', { value: '12', step: '2' } ],
+			[ 'down', '10', { value: '10', min: '10' } ],
+		] )(
+			'should spin %s to %s when props = %o',
+			async ( direction, expectedValue, props ) => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+				const onChange = jest.fn();
+				render(
+					<NumberControl
+						{ ...props }
+						spinControls="custom"
+						onChange={ onChange }
+					/>
+				);
+				await user.click(
+					screen.getByLabelText(
+						direction === 'up' ? 'Increment' : 'Decrement'
+					)
+				);
+				expect( onChange ).toHaveBeenCalledWith( expectedValue, {
+					event: expect.anything(),
+				} );
+			}
+		);
+	} );
 } );

package/src/number-control/types.ts

@@ -10,9 +10,21 @@ export type NumberControlProps = Omit<
 	/**
 	 * If true, the default `input` HTML arrows will be hidden.
 	 *
+	 * @deprecated
 	 * @default false
 	 */
 	hideHTMLArrows?: boolean;
+	/**
+	 * The type of spin controls to display. These are butons 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.
+	 *
+	 * @default 'native'
+	 */
+	spinControls?: 'none' | 'native' | 'custom';
 	/**
 	 * If true, enables mouse drag gestures.
 	 *

package/src/panel/test/body.js

@@ -67,7 +67,7 @@ describe( 'PanelBody', () => {
 			let panelContent = getPanelBodyContent( container );
 
 			expect( panelContent ).toBeTruthy();
-			expect( panelContent.getAttribute( 'hidden' ) ).toBe( '' );
+			expect( panelContent ).toHaveAttribute( 'hidden', '' );
 
 			rerender(
 				<PanelBody opened={ false }>
@@ -77,7 +77,7 @@ describe( 'PanelBody', () => {
 			panelContent = getPanelBodyContent( container );
 
 			expect( panelContent ).toBeTruthy();
-			expect( panelContent.getAttribute( 'hidden' ) ).toBeNull();
+			expect( panelContent ).not.toHaveAttribute( 'hidden' );
 		} );
 	} );
 

package/src/placeholder/style.scss

@@ -182,6 +182,9 @@
 	backdrop-filter: blur(100px);
 	background-color: transparent;
 
+	// This appears to fix an occasional Chrome bug where the blurred background would have an incorrect color.
+	backface-visibility: hidden;
+
 	// Invert the colors in themes deemed dark.
 	.is-dark-theme & {
 		background-color: rgba($black, 0.1);
@@ -201,6 +204,7 @@
 	.components-placeholder__instructions,
 	.components-button {
 		opacity: 0;
+		pointer-events: none;
 		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
 	}
@@ -210,6 +214,7 @@
 		.components-placeholder__instructions,
 		.components-button {
 			opacity: 1;
+			pointer-events: auto;
 		}
 	}
 

package/src/popover/README.md

@@ -92,7 +92,7 @@ The element should be stored in state rather than a plain ref to ensure reactive
 
 ### `anchorRect`: `DomRectWithOwnerDocument`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+_Note: this prop is deprecated. Please use the `anchor` prop instead._
 
 An object extending a `DOMRect` with an additional optional `ownerDocument` property, used to specify a fixed popover position.
 
@@ -100,7 +100,7 @@ An object extending a `DOMRect` with an additional optional `ownerDocument` prop
 
 ### `anchorRef`: `Element | PopoverAnchorRefReference | PopoverAnchorRefTopBottom | Range`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+_Note: this prop is deprecated. Please use the `anchor` prop instead._
 
 Used to specify a fixed popover position. It can be an `Element`, a React reference to an `element`, an object with a `top` and a `bottom` properties (both pointing to elements), or a `range`.
 
@@ -157,7 +157,7 @@ When not provided, the `onClose` callback will be called instead.
 
 ### `getAnchorRect`: `( fallbackReferenceElement: Element | null ) => DomRectWithOwnerDocument`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+_Note: this prop is deprecated. Please use the `anchor` prop instead._
 
 A function returning the same value as the one expected by the `anchorRect` prop, used to specify a dynamic popover position.
 
@@ -171,6 +171,8 @@ Used to customize the header text shown when the popover is toggled to fullscree
 
 ### `isAlternate`: `boolean`
 
+_Note: this prop is deprecated. Please use the `variant` prop with the `'toolbar'` values instead._
+
 Used to enable a different visual style for the popover.
 
 -   Required: No
@@ -212,8 +214,7 @@ Possible values:
 - `yAxis`: `'top' | 'middle' | 'bottom'`
 - `xAxis`: `'left' | 'center' | 'right'`
 - `corner`: `'top' | 'right' | 'bottom' | 'left'`
-
-
+<!-- Break into two separate lists using an HTML comment -->
 -   Required: No
 
 ### `resize`: `boolean`
@@ -223,8 +224,12 @@ Adjusts the size of the popover to prevent its contents from going out of view w
 -   Required: No
 -   Default: `true`
 
-### `range`: `unknown`
+### `variant`: `'toolbar' | 'unstyled'`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. It has no effect on the component._
+Specifies the popover's style.
 
+Leave undefined for the default style. Possible values are:
+-   `unstyled`:  The popover is essentially without any visible style, it has no background, border, outline or drop shadow, but the popover contents are still displayed.
+-   `toolbar`: A style that has no elevation, but a high contrast with other elements. This matches the style of the [`Toolbar` component](/packages/components/toolbar/README.md).
+<!-- Break into two separate lists using an HTML comment -->
 -   Required: No