@wordpress/components 19.17.0 → 20.0.0

package/src/color-palette/test/__snapshots__/index.js.snap

@@ -357,6 +357,13 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
 
 <Dropdown
   contentClassName="components-color-palette__custom-color-dropdown-content"
+  popoverProps={
+    Object {
+      "__unstableShift": true,
+      "offset": 8,
+      "placement": "bottom",
+    }
+  }
   renderContent={[Function]}
   renderToggle={[Function]}
 >
@@ -728,6 +735,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         >
           <Dropdown
             contentClassName="components-color-palette__custom-color-dropdown-content"
+            popoverProps={
+              Object {
+                "__unstableShift": true,
+                "offset": 8,
+                "placement": "bottom",
+              }
+            }
             renderContent={[Function]}
             renderToggle={[Function]}
           >
@@ -957,7 +971,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 <Option
                   aria-label="Color: red"
                   isSelected={true}
-                  key="#f00"
+                  key="#f00-0"
                   onClick={[Function]}
                   selectedIconProps={
                     Object {
@@ -1060,7 +1074,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 <Option
                   aria-label="Color: white"
                   isSelected={false}
-                  key="#fff"
+                  key="#fff-1"
                   onClick={[Function]}
                   selectedIconProps={Object {}}
                   style={
@@ -1120,7 +1134,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 <Option
                   aria-label="Color: blue"
                   isSelected={false}
-                  key="#00f"
+                  key="#00f-2"
                   onClick={[Function]}
                   selectedIconProps={Object {}}
                   style={

package/src/combobox-control/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -30,6 +29,7 @@ import Button from '../button';
 import { FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 import { useControlledValue } from '../utils/hooks';
+import { normalizeTextString } from '../utils/strings';
 
 const noop = () => {};
 
@@ -46,6 +46,8 @@ const DetectOutside = withFocusOutside(
 );
 
 function ComboboxControl( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	__next36pxDefaultSize,
 	value: valueProp,
 	label,
@@ -83,11 +85,9 @@ function ComboboxControl( {
 	const matchingSuggestions = useMemo( () => {
 		const startsWithMatch = [];
 		const containsMatch = [];
-		const match = removeAccents( inputValue.toLocaleLowerCase() );
+		const match = normalizeTextString( inputValue );
 		options.forEach( ( option ) => {
-			const index = removeAccents( option.label )
-				.toLocaleLowerCase()
-				.indexOf( match );
+			const index = normalizeTextString( option.label ).indexOf( match );
 			if ( index === 0 ) {
 				startsWithMatch.push( option );
 			} else if ( index > 0 ) {
@@ -222,6 +222,7 @@ function ComboboxControl( {
 	return (
 		<DetectOutside onFocusOutside={ onFocusOutside }>
 			<BaseControl
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				className={ classnames(
 					className,
 					'components-combobox-control'

package/src/combobox-control/stories/index.js

@@ -257,6 +257,10 @@ const countries = [
 export default {
 	title: 'Components/ComboboxControl',
 	component: ComboboxControl,
+	argTypes: {
+		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
+		onChange: { action: 'onChange' },
+	},
 };
 
 const mapCountryOption = ( country ) => ( {
@@ -266,7 +270,7 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function Template( args ) {
+function Template( { onChange, ...args } ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
@@ -274,9 +278,11 @@ function Template( args ) {
 			<ComboboxControl
 				{ ...args }
 				value={ value }
-				onChange={ setValue }
+				onChange={ ( ...changeArgs ) => {
+					setValue( ...changeArgs );
+					onChange?.( ...changeArgs );
+				} }
 			/>
-			<p>Value: { value }</p>
 		</>
 	);
 }

package/src/combobox-control/style.scss

@@ -31,7 +31,6 @@ input.components-combobox-control__input[type="text"] {
 	flex-wrap: wrap;
 	align-items: flex-start;
 	width: 100%;
-	margin: 0 0 $grid-unit-10 0;
 	padding: 0;
 
 	&:focus-within {

package/src/confirm-dialog/test/index.js

@@ -6,7 +6,9 @@ import {
 	screen,
 	fireEvent,
 	waitForElementToBeRemoved,
+	waitFor,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -19,19 +21,19 @@ describe( 'Confirm', () => {
 	describe( 'Confirm component', () => {
 		describe( 'Structure', () => {
 			it( 'should render correctly', () => {
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ noop }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const dialog = wrapper.getByRole( 'dialog' );
+				const dialog = screen.getByRole( 'dialog' );
 				const elementsTexts = [ 'Are you sure?', 'OK', 'Cancel' ];
 
 				expect( dialog ).toBeInTheDocument();
 
 				elementsTexts.forEach( ( txt ) => {
-					const el = wrapper.getByText( txt );
+					const el = screen.getByText( txt );
 					expect( el ).toBeInTheDocument();
 				} );
 			} );
@@ -66,64 +68,76 @@ describe( 'Confirm', () => {
 
 		describe( 'When uncontrolled', () => {
 			it( 'should render', () => {
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ noop }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const confirmDialog = screen.getByRole( 'dialog' );
 
 				expect( confirmDialog ).toBeInTheDocument();
 			} );
 
 			it( 'should not render if closed by clicking `OK`, and the `onConfirm` callback should be called', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ onConfirm }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
-				const button = wrapper.getByText( 'OK' );
+				const confirmDialog = screen.getByRole( 'dialog' );
+				const button = screen.getByText( 'OK' );
 
-				fireEvent.click( button );
+				await user.click( button );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onConfirm ).toHaveBeenCalled();
 			} );
 
 			it( 'should not render if closed by clicking `Cancel`, and the `onCancel` callback should be called', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const onCancel = jest.fn().mockName( 'onCancel()' );
 
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
-				const button = wrapper.getByText( 'Cancel' );
+				const confirmDialog = screen.getByRole( 'dialog' );
+				const button = screen.getByText( 'Cancel' );
 
-				fireEvent.click( button );
+				await user.click( button );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onCancel ).toHaveBeenCalled();
 			} );
 
 			it( 'should be dismissable even if an `onCancel` callback is not provided', async () => {
-				const wrapper = render(
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
 					<ConfirmDialog onConfirm={ noop }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
-				const button = wrapper.getByText( 'Cancel' );
+				const confirmDialog = screen.getByRole( 'dialog' );
+				const button = screen.getByText( 'Cancel' );
 
-				fireEvent.click( button );
+				await user.click( button );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 			} );
@@ -131,15 +145,16 @@ describe( 'Confirm', () => {
 			it( 'should not render if dialog is closed by clicking the overlay, and the `onCancel` callback should be called', async () => {
 				const onCancel = jest.fn().mockName( 'onCancel()' );
 
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const confirmDialog = screen.getByRole( 'dialog' );
 
 				//The overlay click is handled by detecting an onBlur from the modal frame.
+				// TODO: replace with `@testing-library/user-event`
 				fireEvent.blur( confirmDialog );
 
 				await waitForElementToBeRemoved( confirmDialog );
@@ -149,34 +164,42 @@ describe( 'Confirm', () => {
 			} );
 
 			it( 'should not render if dialog is closed by pressing `Escape`, and the `onCancel` callback should be called', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const onCancel = jest.fn().mockName( 'onCancel()' );
 
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const confirmDialog = screen.getByRole( 'dialog' );
 
-				fireEvent.keyDown( confirmDialog, { keyCode: 27 } );
+				await user.keyboard( '[Escape]' );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onCancel ).toHaveBeenCalled();
 			} );
 
 			it( 'should not render if dialog is closed by pressing `Enter`, and the `onConfirm` callback should be called', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ onConfirm }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const confirmDialog = screen.getByRole( 'dialog' );
 
-				fireEvent.keyDown( confirmDialog, { keyCode: 13 } );
+				await user.keyboard( '[Enter]' );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onConfirm ).toHaveBeenCalled();
@@ -186,7 +209,7 @@ describe( 'Confirm', () => {
 
 	describe( 'When controlled (isOpen is not `undefined`)', () => {
 		it( 'should render when `isOpen` is set to `true`', async () => {
-			const wrapper = render(
+			render(
 				<ConfirmDialog
 					isOpen={ true }
 					onConfirm={ noop }
@@ -196,13 +219,13 @@ describe( 'Confirm', () => {
 				</ConfirmDialog>
 			);
 
-			const confirmDialog = wrapper.getByRole( 'dialog' );
+			const confirmDialog = screen.getByRole( 'dialog' );
 
 			expect( confirmDialog ).toBeInTheDocument();
 		} );
 
 		it( 'should not render if `isOpen` is set to false', async () => {
-			const wrapper = render(
+			render(
 				<ConfirmDialog
 					isOpen={ false }
 					onConfirm={ noop }
@@ -214,31 +237,39 @@ describe( 'Confirm', () => {
 
 			// `queryByRole` needs to be used here because in this scenario the
 			// dialog is never rendered.
-			const confirmDialog = wrapper.queryByRole( 'dialog' );
+			const confirmDialog = screen.queryByRole( 'dialog' );
 
 			expect( confirmDialog ).not.toBeInTheDocument();
 		} );
 
 		it( 'should call the `onConfirm` callback if `OK`', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
-			const wrapper = render(
+			render(
 				<ConfirmDialog isOpen={ true } onConfirm={ onConfirm }>
 					Are you sure?
 				</ConfirmDialog>
 			);
 
-			const button = wrapper.getByText( 'OK' );
+			const button = screen.getByText( 'OK' );
 
-			fireEvent.click( button );
+			await user.click( button );
 
 			expect( onConfirm ).toHaveBeenCalled();
 		} );
 
 		it( 'should call the `onCancel` callback if `Cancel` is clicked', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onCancel = jest.fn().mockName( 'onCancel()' );
 
-			const wrapper = render(
+			render(
 				<ConfirmDialog
 					isOpen={ true }
 					onConfirm={ noop }
@@ -248,19 +279,17 @@ describe( 'Confirm', () => {
 				</ConfirmDialog>
 			);
 
-			const button = wrapper.getByText( 'Cancel' );
+			const button = screen.getByText( 'Cancel' );
 
-			fireEvent.click( button );
+			await user.click( button );
 
 			expect( onCancel ).toHaveBeenCalled();
 		} );
 
 		it( 'should call the `onCancel` callback if the overlay is clicked', async () => {
-			jest.useFakeTimers();
-
 			const onCancel = jest.fn().mockName( 'onCancel()' );
 
-			const wrapper = render(
+			render(
 				<ConfirmDialog
 					isOpen={ true }
 					onConfirm={ noop }
@@ -270,45 +299,43 @@ describe( 'Confirm', () => {
 				</ConfirmDialog>
 			);
 
-			const frame = wrapper.baseElement.querySelector(
-				'.components-modal__frame'
-			);
+			const confirmDialog = screen.getByRole( 'dialog' );
 
 			//The overlay click is handled by detecting an onBlur from the modal frame.
-			fireEvent.blur( frame );
-
-			// We don't wait for a DOM side effect here, so we need to fake the timers
-			// and "advance" it so that the `queueBlurCheck` in the `useFocusOutside` hook
-			// properly executes its timeout task.
-			jest.advanceTimersByTime( 0 );
-
-			expect( onCancel ).toHaveBeenCalled();
+			// TODO: replace with `@testing-library/user-event`
+			fireEvent.blur( confirmDialog );
 
-			jest.useRealTimers();
+			// Wait for a DOM side effect here, so that the `queueBlurCheck` in the
+			// `useFocusOutside` hook properly executes its timeout task.
+			await waitFor( () => expect( onCancel ).toHaveBeenCalled() );
 		} );
 
 		it( 'should call the `onCancel` callback if the `Escape` key is pressed', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onCancel = jest.fn().mockName( 'onCancel()' );
 
-			const wrapper = render(
+			render(
 				<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
 					Are you sure?
 				</ConfirmDialog>
 			);
 
-			const frame = wrapper.baseElement.querySelector(
-				'.components-modal__frame'
-			);
-
-			fireEvent.keyDown( frame, { keyCode: 27 } );
+			await user.keyboard( '[Escape]' );
 
 			expect( onCancel ).toHaveBeenCalled();
 		} );
 
 		it( 'should call the `onConfirm` callback if the `Enter` key is pressed', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
-			const wrapper = render(
+			render(
 				<ConfirmDialog
 					isOpen={ true }
 					onConfirm={ onConfirm }
@@ -318,11 +345,7 @@ describe( 'Confirm', () => {
 				</ConfirmDialog>
 			);
 
-			const frame = wrapper.baseElement.querySelector(
-				'.components-modal__frame'
-			);
-
-			fireEvent.keyDown( frame, { keyCode: 13 } );
+			await user.keyboard( '[Enter]' );
 
 			expect( onConfirm ).toHaveBeenCalled();
 		} );

package/src/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/control-points.js

@@ -11,15 +11,15 @@ import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
-import { LEFT, RIGHT } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import Button from '../button';
-import { ColorPicker } from '../color-picker';
-import { VisuallyHidden } from '../visually-hidden';
-import { CustomColorPickerDropdown } from '../color-palette';
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import { ColorPicker } from '../../color-picker';
+import { VisuallyHidden } from '../../visually-hidden';
+import { CustomColorPickerDropdown } from '../../color-palette';
 
 import {
 	addControlPoint,
@@ -58,10 +58,6 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 						'is-active': isOpen,
 					}
 				) }
-				style={ {
-					left: `${ position }%`,
-					transform: 'translateX( -50% )',
-				} }
 				{ ...additionalProps }
 			/>
 			<VisuallyHidden id={ descriptionId }>
@@ -75,25 +71,28 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 
 function GradientColorPickerDropdown( {
 	isRenderedInSidebar,
-	gradientPickerDomRef,
+	className,
 	...props
 } ) {
-	const popoverProps = useMemo( () => {
-		const result = {
-			className:
-				'components-custom-gradient-picker__color-picker-popover',
-			position: 'top',
-		};
-		if ( isRenderedInSidebar ) {
-			result.anchorRef = gradientPickerDomRef.current;
-			result.position = 'bottom left';
-		}
-		return result;
-	}, [ gradientPickerDomRef, isRenderedInSidebar ] );
+	// Open the popover below the gradient control/insertion point
+	const popoverProps = useMemo(
+		() => ( {
+			placement: 'bottom',
+			offset: 8,
+		} ),
+		[]
+	);
+
+	const mergedClassName = classnames(
+		'components-custom-gradient-picker__control-point-dropdown',
+		className
+	);
+
 	return (
 		<CustomColorPickerDropdown
 			isRenderedInSidebar={ isRenderedInSidebar }
 			popoverProps={ popoverProps }
+			className={ mergedClassName }
 			{ ...props }
 		/>
 	);
@@ -163,7 +162,6 @@ function ControlPoints( {
 		return (
 			ignoreMarkerPosition !== initialPosition && (
 				<GradientColorPickerDropdown
-					gradientPickerDomRef={ gradientPickerDomRef }
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					key={ index }
 					onClose={ onStopControlPointChange }
@@ -205,7 +203,7 @@ function ControlPoints( {
 								}
 							} }
 							onKeyDown={ ( event ) => {
-								if ( event.keyCode === LEFT ) {
+								if ( event.code === 'ArrowLeft' ) {
 									// Stop propagation of the key press event to avoid focus moving
 									// to another editor area.
 									event.stopPropagation();
@@ -219,7 +217,7 @@ function ControlPoints( {
 											)
 										)
 									);
-								} else if ( event.keyCode === RIGHT ) {
+								} else if ( event.code === 'ArrowRight' ) {
 									// Stop propagation of the key press event to avoid focus moving
 									// to another editor area.
 									event.stopPropagation();
@@ -256,24 +254,32 @@ function ControlPoints( {
 								} }
 							/>
 							{ ! disableRemove && controlPoints.length > 2 && (
-								<Button
-									className="components-custom-gradient-picker__remove-control-point"
-									onClick={ () => {
-										onChange(
-											removeControlPoint(
-												controlPoints,
-												index
-											)
-										);
-										onClose();
-									} }
-									variant="link"
+								<HStack
+									className="components-custom-gradient-picker__remove-control-point-wrapper"
+									alignment="center"
 								>
-									{ __( 'Remove Control Point' ) }
-								</Button>
+									<Button
+										onClick={ () => {
+											onChange(
+												removeControlPoint(
+													controlPoints,
+													index
+												)
+											);
+											onClose();
+										} }
+										variant="link"
+									>
+										{ __( 'Remove Control Point' ) }
+									</Button>
+								</HStack>
 							) }
 						</>
 					) }
+					style={ {
+						left: `${ point.position }%`,
+						transform: 'translateX( -50% )',
+					} }
 				/>
 			)
 		);
@@ -288,12 +294,10 @@ function InsertPoint( {
 	insertPosition,
 	disableAlpha,
 	__experimentalIsRenderedInSidebar,
-	gradientPickerDomRef,
 } ) {
 	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
 	return (
 		<GradientColorPickerDropdown
-			gradientPickerDomRef={ gradientPickerDomRef }
 			isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 			className="components-custom-gradient-picker__inserter"
 			onClose={ () => {
@@ -312,16 +316,8 @@ function InsertPoint( {
 						}
 						onToggle();
 					} }
-					className="components-custom-gradient-picker__insert-point"
+					className="components-custom-gradient-picker__insert-point-dropdown"
 					icon={ plus }
-					style={
-						insertPosition !== null
-							? {
-									left: `${ insertPosition }%`,
-									transform: 'translateX( -50% )',
-							  }
-							: undefined
-					}
 				/>
 			) }
 			renderContent={ () => (
@@ -349,6 +345,14 @@ function InsertPoint( {
 					} }
 				/>
 			) }
+			style={
+				insertPosition !== null
+					? {
+							left: `${ insertPosition }%`,
+							transform: 'translateX( -50% )',
+					  }
+					: undefined
+			}
 		/>
 	);
 }