@wordpress/components 19.13.0 → 19.14.0

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

@@ -0,0 +1,54 @@
+// 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"
+  />
+  <span
+    class="components-form-toggle__track"
+  />
+  <span
+    class="components-form-toggle__thumb"
+  />
+</span>
+`;
+
+exports[`FormToggle basic rendering should render an id prop for the input checkbox 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -2,10 +2,11 @@
+    <span
+      class="components-form-toggle"
+    >
+      <input
+        class="components-form-toggle__input"
++       id="test"
+        type="checkbox"
+      />
+      <span
+        class="components-form-toggle__track"
+      />
+`;
+
+exports[`FormToggle basic rendering should render with an additional className 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -1,8 +1,8 @@
+  <div>
+    <span
+-     class="components-form-toggle"
++     class="components-form-toggle testing"
+    >
+      <input
+        class="components-form-toggle__input"
+        type="checkbox"
+      />
+`;

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

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FormToggle, { noop } from '..';
+import type { FormToggleProps } from '../types';
+
+const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
+
+const ControlledFormToggle = ( { onChange }: FormToggleProps ) => {
+	const [ isChecked, setChecked ] = useState( false );
+	return (
+		<FormToggle
+			checked={ isChecked }
+			onChange={ ( value ) => {
+				setChecked( ( state ) => ! state );
+				onChange( value );
+			} }
+		/>
+	);
+};
+
+describe( 'FormToggle', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render a span element with an unchecked checkbox', () => {
+			const { container } = render( <FormToggle onChange={ noop } /> );
+
+			expect( getInput() ).not.toBeChecked();
+			expect( container.firstChild ).toMatchSnapshot();
+		} );
+
+		it( 'should render a checked checkbox when providing checked prop', () => {
+			render( <FormToggle onChange={ noop } checked /> );
+
+			expect( getInput() ).toBeChecked();
+		} );
+
+		it( 'should render with an additional className', () => {
+			const { container: containerDefault } = render(
+				<FormToggle onChange={ noop } />
+			);
+
+			const { container: containerWithClassName } = render(
+				<FormToggle onChange={ noop } className="testing" />
+			);
+
+			// Expect the diff snapshot to be mostly about the className.
+			expect( containerDefault ).toMatchDiffSnapshot(
+				containerWithClassName
+			);
+		} );
+
+		it( 'should render an id prop for the input checkbox', () => {
+			const { container: containerDefault } = render(
+				<FormToggle onChange={ noop } />
+			);
+
+			const { container: containerWithID } = render(
+				// Disabled because of our rule restricting literal IDs, preferring
+				// `withInstanceId`. In this case, it's fine to use literal IDs.
+				// eslint-disable-next-line no-restricted-syntax
+				<FormToggle onChange={ noop } id="test" />
+			);
+
+			// Expect the diff snapshot to be mostly about the ID.
+			expect( containerDefault ).toMatchDiffSnapshot( containerWithID );
+		} );
+	} );
+
+	describe( 'Value', () => {
+		it( 'should flip the checked property when clicked', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const onChange = jest.fn();
+			render( <ControlledFormToggle onChange={ onChange } /> );
+
+			const input = getInput();
+
+			await user.click( input );
+			expect( onChange.mock.calls[ 0 ][ 0 ].target ).toBeInTheDocument();
+			expect( input ).toBeChecked();
+
+			await user.click( input );
+			expect( onChange.mock.calls[ 1 ][ 0 ].target ).toBeInTheDocument();
+			expect( input ).not.toBeChecked();
+
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+} );

package/src/form-toggle/types.ts

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent } from 'react';
+
+export type FormToggleProps = {
+	/**
+	 * If checked is true the toggle will be checked. If checked is false the
+	 * toggle will be unchecked. If no value is passed the toggle will be
+	 * unchecked.
+	 */
+	checked?: boolean;
+	/**
+	 * If disabled is true the toggle will be disabled and apply the appropriate
+	 * styles.
+	 */
+	disabled?: boolean;
+	/**
+	 * A callback function invoked when the toggle is clicked.
+	 */
+	onChange: ( event: ChangeEvent< HTMLInputElement > ) => void;
+};

package/src/form-token-field/test/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { filter, map } from 'lodash';
 import TestUtils, { act } from 'react-dom/test-utils';
 import ReactDOM from 'react-dom';
 
@@ -56,7 +55,7 @@ describe( 'FormTokenField', () => {
 		const textNodes = wrapperElement().querySelectorAll(
 			'.components-form-token-field__token-text span[aria-hidden]'
 		);
-		return map( textNodes, ( node ) => node.innerHTML );
+		return Array.from( textNodes ).map( ( node ) => node.innerHTML );
 	}
 
 	function getSuggestionsText( selector ) {
@@ -64,7 +63,7 @@ describe( 'FormTokenField', () => {
 			selector || '.components-form-token-field__suggestion'
 		);
 
-		return map( suggestionNodes, getSuggestionNodeText );
+		return Array.from( suggestionNodes ).map( getSuggestionNodeText );
 	}
 
 	function getSuggestionNodeText( node ) {
@@ -77,13 +76,11 @@ describe( 'FormTokenField', () => {
 		// match).
 		const div = document.createElement( 'div' );
 		div.innerHTML = node.querySelector( 'span' ).outerHTML;
-		return map(
-			filter(
-				div.firstChild.childNodes,
+		return Array.from( div.firstChild.childNodes )
+			.filter(
 				( childNode ) => childNode.nodeType !== childNode.COMMENT_NODE
-			),
-			( childNode ) => childNode.textContent
-		);
+			)
+			.map( ( childNode ) => childNode.textContent );
 	}
 
 	function getSelectedSuggestion() {

package/src/form-token-field/test/lib/token-field-wrapper.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { unescape } from 'lodash';
 import type { ComponentProps } from 'react';
 
 /**
@@ -22,7 +21,8 @@ const {
 
 function unescapeAndFormatSpaces( str: string ) {
 	const nbsp = String.fromCharCode( 160 );
-	return unescape( str ).replace( / /g, nbsp );
+	const escaped = new DOMParser().parseFromString( str, 'text/html' );
+	return escaped.documentElement.textContent?.replace( / /g, nbsp ) ?? '';
 }
 
 class TokenFieldWrapper extends Component<

package/src/h-stack/utils.js

@@ -1,7 +1,7 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { isNil } from 'lodash';
+import { isValueDefined } from '../utils/values';
 
 /** @type {import('./types').Alignments} */
 const ALIGNMENTS = {
@@ -41,7 +41,7 @@ const V_ALIGNMENTS = {
  */
 /* eslint-enable jsdoc/valid-types */
 export function getAlignmentProps( alignment, direction = 'row' ) {
-	if ( isNil( alignment ) ) {
+	if ( ! isValueDefined( alignment ) ) {
 		return {};
 	}
 	const isVertical = direction === 'column';

package/src/heading/README.md

@@ -20,8 +20,9 @@ function Example() {
 
 `Heading` uses `Text` underneath, so we have access to all of `Text`'s props except for `size` which is replaced by `level`. For a complete list of those props, check out [`Text`](/packages/components/src/text/README.md#props).
 
-##### level
-
-**Type**: `1 | 2 | 3 | 4 | 5 | 6`
+##### `level`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 
 Passing any of the heading levels to `level` will both render the correct typographic text size as well as the semantic element corresponding to the level (`h1` for `1` for example).
+
+-   Required: No
+-   Default: `2`

package/src/heading/component.tsx

@@ -8,7 +8,8 @@ import type { ForwardedRef } from 'react';
  */
 import { contextConnect, WordPressComponentProps } from '../ui/context';
 import { View } from '../view';
-import { useHeading, HeadingProps } from './hook';
+import { useHeading } from './hook';
+import type { HeadingProps } from './types';
 
 function UnconnectedHeading(
 	props: WordPressComponentProps< HeadingProps, 'h1' >,
@@ -22,7 +23,6 @@ function UnconnectedHeading(
 /**
  * `Heading` renders headings and titles using the library's typography system.
  *
- * @example
  * ```jsx
  * import { __experimentalHeading as Heading } from "@wordpress/components";
  *

package/src/heading/hook.ts

@@ -2,51 +2,10 @@
  * Internal dependencies
  */
 import { useContextSystem, WordPressComponentProps } from '../ui/context';
-import type { Props as TextProps } from '../text/types';
 import { useText } from '../text';
 import { getHeadingFontSize } from '../ui/utils/font-size';
 import { CONFIG, COLORS } from '../utils';
-
-export type HeadingSize =
-	| 1
-	| 2
-	| 3
-	| 4
-	| 5
-	| 6
-	| '1'
-	| '2'
-	| '3'
-	| '4'
-	| '5'
-	| '6';
-
-export interface HeadingProps extends Omit< TextProps, 'size' > {
-	/**
-	 * `Heading` will typically render the sizes `1`, `2`, `3`, `4`, `5`, or `6`, which map to `h1`-`h6`.
-	 *
-	 * @default 2
-	 *
-	 * @example
-	 * ```jsx
-	 * import { __experimentalHeading as Heading } from `@wordpress/components`
-	 *
-	 * function Example() {
-	 *   return (
-	 *     <div>
-	 *       <Heading level="1">Code is Poetry</Heading>
-	 *       <Heading level="2">Code is Poetry</Heading>
-	 *       <Heading level="3">Code is Poetry</Heading>
-	 *       <Heading level="4">Code is Poetry</Heading>
-	 *       <Heading level="5">Code is Poetry</Heading>
-	 *       <Heading level="6">Code is Poetry</Heading>
-	 *     </div>
-	 *   );
-	 * }
-	 * ```
-	 */
-	level: HeadingSize;
-}
+import type { HeadingProps } from './types';
 
 export function useHeading(
 	props: WordPressComponentProps< HeadingProps, 'h1' >

package/src/heading/stories/index.tsx

@@ -19,7 +19,11 @@ const meta: ComponentMeta< typeof Heading > = {
 		letterSpacing: { control: { type: 'text' } },
 		lineHeight: { control: { type: 'text' } },
 		optimizeReadabilityFor: { control: { type: 'color' } },
-		variant: { control: { type: 'radio' }, options: [ 'muted' ] },
+		variant: {
+			control: { type: 'radio' },
+			options: [ 'undefined', 'muted' ],
+			mapping: { undefined, muted: 'muted' },
+		},
 		weight: { control: { type: 'text' } },
 	},
 	parameters: {

package/src/heading/test/index.tsx

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Heading } from '../';
+
+describe( 'props', () => {
+	test( 'should render correctly', () => {
+		render( <Heading>Code is Poetry</Heading> );
+		expect( screen.getByRole( 'heading' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render level as a number', () => {
+		render( <Heading>Code is Poetry</Heading> );
+		render( <Heading level={ 4 }>Code is Poetry</Heading> );
+		expect(
+			screen.getByRole( 'heading', { level: 4 } )
+		).toMatchStyleDiffSnapshot(
+			screen.getByRole( 'heading', { level: 2 } )
+		);
+	} );
+
+	test( 'should render level as a string', () => {
+		render( <Heading>Code is Poetry</Heading> );
+		render( <Heading level="4">Code is Poetry</Heading> );
+		expect(
+			screen.getByRole( 'heading', { level: 4 } )
+		).toMatchStyleDiffSnapshot(
+			screen.getByRole( 'heading', { level: 2 } )
+		);
+	} );
+
+	test( 'should allow as prop', () => {
+		render(
+			<Heading level="1" as="span">
+				Code is Poetry
+			</Heading>
+		);
+		expect( screen.getByRole( 'heading' ).tagName ).toBe( 'SPAN' );
+	} );
+
+	test( 'should render a11y props when not using a semantic element', () => {
+		render(
+			<Heading level="3" as="div">
+				Code is Poetry
+			</Heading>
+		);
+		expect(
+			screen.getByRole( 'heading', { level: 3 } )
+		).toBeInTheDocument();
+	} );
+
+	test( 'should not render a11y props when using a semantic element', () => {
+		render(
+			<Heading level="1" as="h4">
+				Code is Poetry
+			</Heading>
+		);
+		expect( screen.getByRole( 'heading' ) ).not.toHaveAttribute( 'role' );
+		expect( screen.getByRole( 'heading' ) ).not.toHaveAttribute(
+			'aria-level'
+		);
+	} );
+} );

package/src/heading/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import type { Props as TextProps } from '../text/types';
+
+export type HeadingSize =
+	| 1
+	| 2
+	| 3
+	| 4
+	| 5
+	| 6
+	| '1'
+	| '2'
+	| '3'
+	| '4'
+	| '5'
+	| '6';
+
+export type HeadingProps = Omit< TextProps, 'size' > & {
+	/**
+	 * Passing any of the heading levels to `level` will both render the correct
+	 * typographic text size as well as the semantic element corresponding to
+	 * the level (`h1` for `1` for example).
+	 *
+	 * @default 2
+	 */
+	level?: HeadingSize;
+};

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

@@ -1,13 +1,24 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BaseInputControl from '../';
 
+const setupUser = () =>
+	userEvent.setup( {
+		advanceTimers: jest.advanceTimersByTime,
+	} );
+
 const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
@@ -42,49 +53,66 @@ describe( 'InputControl', () => {
 	} );
 
 	describe( 'Ensurance of focus for number inputs', () => {
-		it( 'should focus its input on mousedown events', () => {
+		it( 'should focus its input on mousedown events', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
 			render( <InputControl type="number" onFocus={ spy } /> );
+			const target = getInput();
 
-			const input = getInput();
-			fireEvent.mouseDown( input );
+			// Hovers the input and presses (without releasing) primary button.
+			await user.pointer( [
+				{ target },
+				{ keys: '[MouseLeft]', target },
+			] );
 
 			expect( spy ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );
 
 	describe( 'Value', () => {
-		it( 'should update value onChange', () => {
+		it( 'should update value onChange', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
-			render( <InputControl value="Hello" onChange={ spy } /> );
-
+			render(
+				<InputControl value="Hello" onChange={ ( v ) => spy( v ) } />
+			);
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 'There' } } );
 
-			expect( input.value ).toBe( 'There' );
-			expect( spy ).toHaveBeenCalledTimes( 1 );
+			await user.type( input, ' there' );
+
+			expect( input ).toHaveValue( 'Hello there' );
+			expect( spy ).toHaveBeenCalledTimes( ' there'.length );
+			expect( spy ).toHaveBeenLastCalledWith( 'Hello there' );
 		} );
 
-		it( 'should work as a controlled component', () => {
+		it( 'should work as a controlled component', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
-			const { rerender } = render(
-				<InputControl value="one" onChange={ spy } />
-			);
-
+			const Example = () => {
+				const [ state, setState ] = useState( 'one' );
+				const onChange = ( value ) => {
+					setState( value );
+					spy( value );
+				};
+				const onKeyDown = ( { key } ) => {
+					if ( key === 'Escape' ) setState( 'three' );
+				};
+				return (
+					<InputControl
+						value={ state }
+						onChange={ onChange }
+						onKeyDown={ onKeyDown }
+					/>
+				);
+			};
+			render( <Example /> );
 			const input = getInput();
 
-			input.focus();
-			fireEvent.change( input, { target: { value: 'two' } } );
-
-			// Ensuring <InputControl /> is controlled.
-			fireEvent.blur( input );
-
-			// Updating the value.
-			rerender( <InputControl value="three" onChange={ spy } /> );
-
-			expect( input.value ).toBe( 'three' );
+			await user.type( input, '2' );
+			// Make a controlled update.
+			await user.keyboard( '{Escape}' );
 
+			expect( input ).toHaveValue( 'three' );
 			/*
 			 * onChange called only once. onChange is not called when a
 			 * parent component explicitly passed a (new value) change down to
@@ -98,21 +126,68 @@ describe( 'InputControl', () => {
 			const { rerender } = render(
 				<InputControl value="Original" onChange={ spy } />
 			);
-
 			const input = getInput();
 
-			// Assuming <InputControl /> is controlled (not focused)
-
 			// Updating the value.
 			rerender( <InputControl value="New" onChange={ spy } /> );
 
-			expect( input.value ).toBe( 'New' );
+			expect( input ).toHaveValue( 'New' );
 
 			// Change it back to the original value.
 			rerender( <InputControl value="Original" onChange={ spy } /> );
 
-			expect( input.value ).toBe( 'Original' );
+			expect( input ).toHaveValue( 'Original' );
 			expect( spy ).toHaveBeenCalledTimes( 0 );
 		} );
+
+		it( 'should not commit value until blurred when isPressEnterToChange is true', async () => {
+			const user = setupUser();
+			const spy = jest.fn();
+			render(
+				<InputControl
+					value=""
+					onChange={ ( v ) => spy( v ) }
+					isPressEnterToChange
+				/>
+			);
+			const input = getInput();
+
+			await user.type( input, 'that was then' );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( spy ).toHaveBeenCalledWith( 'that was then' );
+		} );
+
+		it( 'should commit value when blurred if value is invalid', async () => {
+			const user = setupUser();
+			const spyChange = jest.fn();
+			render(
+				<InputControl
+					value="this is"
+					onChange={ ( v ) => spyChange( v ) }
+					// If the value contains 'now' it is not valid.
+					pattern="(?!.*now)^.*$"
+					__unstableStateReducer={ ( state, action ) => {
+						let { value } = state;
+						if (
+							action.type === 'COMMIT' &&
+							action.payload.event.type === 'blur'
+						)
+							value = value.replace( /\bnow\b/, 'meow' );
+
+						return { ...state, value };
+					} }
+				/>
+			);
+			const input = getInput();
+
+			await user.type( input, ' now' );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
+
+			expect( spyChange ).toHaveBeenLastCalledWith( 'this is meow' );
+		} );
 	} );
 } );

package/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js

@@ -98,13 +98,8 @@ class KeyboardAvoidingView extends Component {
 	}
 
 	render() {
-		const {
-			children,
-			enabled,
-			keyboardVerticalOffset, // eslint-disable-line no-unused-vars
-			style,
-			...props
-		} = this.props;
+		const { children, enabled, keyboardVerticalOffset, style, ...props } =
+			this.props;
 
 		let finalStyle = style;
 		if ( Platform.OS === 'ios' ) {