@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

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

@@ -1,10 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`] = `
-<ColorPicker
-  color="#f00"
-  onChange={[Function]}
-/>
+<DropdownContentWrapperDiv
+  className="components-dropdown-content-wrapper"
+  data-wp-c16t={true}
+  data-wp-component="DropdownContentWrapper"
+  paddingSize="none"
+>
+  <LegacyAdapter
+    color="#f00"
+    onChange={[Function]}
+  />
+</DropdownContentWrapperDiv>
 `;
 
 exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`] = `
@@ -357,6 +364,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 +742,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 +978,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 +1081,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 +1141,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();
 		} );