@wordpress/components 21.2.0 → 22.0.0

package/src/font-size-picker/test/utils.ts

@@ -1,11 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	isSimpleCssValue,
-	splitValueAndUnitFromSize,
-	getToggleGroupOptions,
-} from '../utils';
+import { isSimpleCssValue, getToggleGroupOptions } from '../utils';
 
 const simpleCSSCases: [ number | string, boolean ][] = [
 	// Test integers and non-integers.
@@ -41,46 +37,6 @@ describe( 'isSimpleCssValue', () => {
 	);
 } );
 
-const splitValuesCases: [
-	number | string,
-	string | undefined,
-	string | undefined
-][] = [
-	// Test integers and non-integers.
-	[ 1, '1', undefined ],
-	[ 1.25, '1.25', undefined ],
-	[ '123', '123', undefined ],
-	[ '1.5', '1.5', undefined ],
-	[ '0.75', '0.75', undefined ],
-	// Valid simple CSS values.
-	[ '20px', '20', 'px' ],
-	[ '0.8em', '0.8', 'em' ],
-	[ '2rem', '2', 'rem' ],
-	[ '1.4vw', '1.4', 'vw' ],
-	[ '0.4vh', '0.4', 'vh' ],
-	// Invalid negative values,
-	[ '-5px', undefined, undefined ],
-	// Complex CSS values that shouldn't parse.
-	[ 'abs(-15px)', undefined, undefined ],
-	[ 'calc(10px + 1)', undefined, undefined ],
-	[ 'clamp(2.5rem, 4vw, 3rem)', undefined, undefined ],
-	[ 'max(4.5em, 3vh)', undefined, undefined ],
-	[ 'min(10px, 1rem)', undefined, undefined ],
-	[ 'minmax(30px, auto)', undefined, undefined ],
-	[ 'var(--wp--font-size)', undefined, undefined ],
-];
-
-describe( 'splitValueAndUnitFromSize', () => {
-	test.each( splitValuesCases )(
-		'given %p as argument, returns value = %p and unit = %p',
-		( cssValue, expectedValue, expectedUnit ) => {
-			const [ value, unit ] = splitValueAndUnitFromSize( cssValue );
-			expect( value ).toBe( expectedValue );
-			expect( unit ).toBe( expectedUnit );
-		}
-	);
-} );
-
 describe( 'getToggleGroupOptions', () => {
 	test( 'should assign t-shirt sizes by default up until the aliases length', () => {
 		const optionsArray = [
@@ -120,33 +76,33 @@ describe( 'getToggleGroupOptions', () => {
 		).toEqual( [
 			{
 				key: '1',
-				value: '1',
 				label: 'S',
 				name: '1',
+				value: '1',
 			},
 			{
 				key: '2',
-				value: '2',
 				label: 'M',
 				name: '2',
+				value: '2',
 			},
 			{
 				key: '3',
-				value: '3',
 				label: 'L',
 				name: '3',
+				value: '3',
 			},
 			{
 				key: '4',
-				value: '4',
 				label: 'XL',
 				name: '4',
+				value: '4',
 			},
 			{
 				key: '5',
-				value: '5',
 				label: 'XXL',
 				name: 'XXL',
+				value: '5',
 			},
 		] );
 	} );

package/src/font-size-picker/types.ts

@@ -58,7 +58,7 @@ export type FontSizePickerProps = {
 	/**
 	 * Size of the control.
 	 *
-	 * @default default
+	 * @default 'default'
 	 */
 	size?: 'default' | '__unstable-large';
 };

package/src/font-size-picker/utils.ts

@@ -43,28 +43,6 @@ const FONT_SIZES_ALIASES = [
 	__( 'XXL' ),
 ];
 
-/**
- * Helper util to split a font size to its numeric value
- * and its `unit`, if exists.
- *
- * @param  size Font size.
- * @return An array with the numeric value and the unit if exists.
- */
-export function splitValueAndUnitFromSize(
-	size: NonNullable< FontSizePickerProps[ 'value' ] >
-) {
-	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g ) ?? [];
-
-	if (
-		! isNaN( parseFloat( numericValue ) ) &&
-		isFinite( Number( numericValue ) )
-	) {
-		return [ numericValue, unit ];
-	}
-
-	return [];
-}
-
 /**
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.
@@ -112,7 +90,7 @@ function getSelectOptions(
 	];
 	return options.map( ( { slug, name, size } ) => ( {
 		key: slug,
-		name,
+		name: name || slug,
 		size,
 		__experimentalHint:
 			size && isSimpleCssValue( size ) && parseFloat( String( size ) ),

package/src/form-file-upload/README.md

@@ -81,9 +81,7 @@ This can be useful when you want to force a `change` event to fire when the user
 
 ### render
 
-Optional callback function used to render the UI. If passed the component does not render any UI and calls this function to render it.
-
-This function receives an object with the property `openFileDialog`. The property is a function that when called opens the browser window to upload files.
+Optional callback function used to render the UI. If passed, the component does not render the default UI (a button) and calls this function to render it. The function receives an object with property `openFileDialog`, a function that, when called, opens the browser native file upload modal window.
 
 -   Type: `Function`
 -   Required: No

package/src/form-file-upload/index.tsx

@@ -47,6 +47,7 @@ export function FormFileUpload( {
 			{ children }
 		</Button>
 	);
+
 	return (
 		<div className="components-form-file-upload">
 			{ ui }

package/src/form-file-upload/test/index.tsx

@@ -41,7 +41,7 @@ describe( 'FormFileUpload', () => {
 		const button = screen.getByText( 'My Upload Button' );
 		const input = screen.getByTestId( 'form-file-upload-input' );
 		expect( button ).toBeInTheDocument();
-		expect( input.style.display ).toBe( 'none' );
+		expect( input ).toHaveStyle( 'display: none' );
 	} );
 
 	it( 'should not fire a change event after selecting the same file', async () => {

package/src/form-file-upload/types.ts

@@ -55,9 +55,10 @@ export type FormFileUploadProps = {
 	/**
 	 * Optional callback function used to render the UI.
 	 *
-	 * If passed, the component does not render any UI and calls this function to render it.
-	 * This function receives an object with the property `openFileDialog`.
-	 * The property is a function that when called opens the browser window to upload files.
+	 * If passed, the component does not render the default UI (a button) and
+	 * calls this function to render it. The function receives an object with
+	 * property `openFileDialog`, a function that, when called, opens the browser
+	 * native file upload modal window.
 	 */
-	render?: ( arg: { openFileDialog: () => void } ) => void;
+	render?: ( arg: { openFileDialog: () => void } ) => ReactNode;
 };

package/src/form-toggle/test/__snapshots__/index.tsx.snap

@@ -1,20 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormToggle basic rendering should render a span element with an unchecked checkbox 1`] = `
-<span
-  class="components-form-toggle"
->
-  <input
-    class="components-form-toggle__input"
-    type="checkbox"
-  />
+<div>
   <span
-    class="components-form-toggle__track"
-  />
-  <span
-    class="components-form-toggle__thumb"
-  />
-</span>
+    class="components-form-toggle"
+  >
+    <input
+      class="components-form-toggle__input"
+      type="checkbox"
+    />
+    <span
+      class="components-form-toggle__track"
+    />
+    <span
+      class="components-form-toggle__thumb"
+    />
+  </span>
+</div>
 `;
 
 exports[`FormToggle basic rendering should render an id prop for the input checkbox 1`] = `

package/src/form-toggle/test/index.tsx

@@ -36,7 +36,7 @@ describe( 'FormToggle', () => {
 			const { container } = render( <FormToggle onChange={ noop } /> );
 
 			expect( getInput() ).not.toBeChecked();
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should render a checked checkbox when providing checked prop', () => {

package/src/form-token-field/suggestions-list.tsx

@@ -38,7 +38,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
 			// when already expanded.
-			let id: number;
+			let rafId: number | undefined;
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&
@@ -52,14 +52,14 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						onlyScrollIfNeeded: true,
 					}
 				);
-				id = window.setTimeout( () => {
+				rafId = requestAnimationFrame( () => {
 					setScrollingIntoView( false );
-				}, 100 );
+				} );
 			}
 
 			return () => {
-				if ( id !== undefined ) {
-					window.clearTimeout( id );
+				if ( rafId !== undefined ) {
+					cancelAnimationFrame( rafId );
 				}
 			};
 		},

package/src/h-stack/test/__snapshots__/index.tsx.snap

@@ -25,17 +25,19 @@ exports[`props should render alignment 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
-  <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -63,17 +65,19 @@ exports[`props should render correctly 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -101,16 +105,18 @@ exports[`props should render spacing 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;

package/src/h-stack/test/index.tsx

@@ -17,7 +17,7 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render alignment', () => {
@@ -27,7 +27,7 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render spacing', () => {
@@ -37,6 +37,6 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/higher-order/with-fallback-styles/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { every, isEqual } from 'lodash';
+import { isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -45,10 +45,14 @@ export default ( mapNodeToProps ) =>
 						this.nodeRef,
 						this.props
 					);
+
 					if ( ! isEqual( newFallbackStyles, fallbackStyles ) ) {
 						this.setState( {
 							fallbackStyles: newFallbackStyles,
-							grabStylesCompleted: !! every( newFallbackStyles ),
+							grabStylesCompleted:
+								Object.values( newFallbackStyles ).every(
+									Boolean
+								),
 						} );
 					}
 				}

package/src/higher-order/with-filters/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -64,10 +59,10 @@ export default function withFilters( hookName ) {
 			}
 
 			componentWillUnmount() {
-				FilteredComponentRenderer.instances = without(
-					FilteredComponentRenderer.instances,
-					this
-				);
+				FilteredComponentRenderer.instances =
+					FilteredComponentRenderer.instances.filter(
+						( instance ) => instance !== this
+					);
 
 				// If this was the last of the mounted components filtered on
 				// this hook, remove the hook handler.

package/src/higher-order/with-focus-outside/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import TestUtils from 'react-dom/test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -12,9 +13,8 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import withFocusOutside from '../';
-import ReactDOM from 'react-dom';
 
-let wrapper, onFocusOutside;
+let onFocusOutside;
 
 describe( 'withFocusOutside', () => {
 	let origHasFocus;
@@ -28,7 +28,7 @@ describe( 'withFocusOutside', () => {
 			render() {
 				return (
 					<div>
-						<input />
+						<input type="text" />
 						<input type="button" />
 					</div>
 				);
@@ -36,24 +36,11 @@ describe( 'withFocusOutside', () => {
 		}
 	);
 
-	// This is needed because TestUtils does not accept a stateless component.
-	// anything run through a HOC ends up as a stateless component.
-	const getTestComponent = ( WrappedComponent, props ) => {
-		class TestComponent extends Component {
-			render() {
-				return <WrappedComponent { ...props } />;
-			}
+	class TestComponent extends Component {
+		render() {
+			return <EnhancedComponent { ...this.props } />;
 		}
-		return <TestComponent />;
-	};
-
-	const simulateEvent = ( event, index = 0 ) => {
-		const element = TestUtils.scryRenderedDOMComponentsWithTag(
-			wrapper,
-			'input'
-		);
-		TestUtils.Simulate[ event ]( element[ index ] );
-	};
+	}
 
 	beforeEach( () => {
 		// Mock document.hasFocus() to always be true for testing
@@ -62,9 +49,6 @@ describe( 'withFocusOutside', () => {
 		document.hasFocus = () => true;
 
 		onFocusOutside = jest.fn();
-		wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( EnhancedComponent, { onFocusOutside } )
-		);
 	} );
 
 	afterEach( () => {
@@ -72,24 +56,31 @@ describe( 'withFocusOutside', () => {
 	} );
 
 	it( 'should not call handler if focus shifts to element within component', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
-		simulateEvent( 'focus', 1 );
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		const button = screen.getByRole( 'button' );
+
+		input.focus();
+		input.blur();
+		button.focus();
 
 		jest.runAllTimers();
 
 		expect( onFocusOutside ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should not call handler if focus transitions via click to button', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'mouseDown', 1 );
-		simulateEvent( 'blur' );
+	it( 'should not call handler if focus transitions via click to button', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
 
-		// In most browsers, the input at index 1 would receive a focus event
-		// at this point, but this is not guaranteed, which is the intention of
-		// the normalization behavior tested here.
-		simulateEvent( 'mouseUp', 1 );
+		const input = screen.getByRole( 'textbox' );
+		const button = screen.getByRole( 'button' );
+
+		input.focus();
+		await user.click( button );
 
 		jest.runAllTimers();
 
@@ -97,8 +88,11 @@ describe( 'withFocusOutside', () => {
 	} );
 
 	it( 'should call handler if focus doesn’t shift to element within component', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
 
 		jest.runAllTimers();
 
@@ -106,12 +100,15 @@ describe( 'withFocusOutside', () => {
 	} );
 
 	it( 'should not call handler if focus shifts outside the component when the document does not have focus', () => {
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
 		// Force document.hasFocus() to return false to simulate the window/document losing focus
 		// See https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
 		document.hasFocus = () => false;
 
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
 
 		jest.runAllTimers();
 
@@ -119,14 +116,16 @@ describe( 'withFocusOutside', () => {
 	} );
 
 	it( 'should cancel check when unmounting while queued', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'input' );
-
-		ReactDOM.unmountComponentAtNode(
-			// eslint-disable-next-line react/no-find-dom-node
-			ReactDOM.findDOMNode( wrapper ).parentNode
+		const { rerender } = render(
+			<TestComponent onFocusOutside={ onFocusOutside } />
 		);
 
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
+
+		rerender( <div /> );
+
 		jest.runAllTimers();
 
 		expect( onFocusOutside ).not.toHaveBeenCalled();