@wordpress/components 21.2.0 → 22.0.0

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

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -16,9 +16,14 @@ import withFocusReturn from '../';
 
 class Test extends Component {
 	render() {
+		const { className, focusHistory } = this.props;
 		return (
-			<div className="test">
-				<textarea />
+			<div
+				className={ className }
+				data-testid="test-element"
+				data-focus-history={ focusHistory }
+			>
+				<textarea aria-label="Textarea" />
 			</div>
 		);
 	}
@@ -41,32 +46,25 @@ describe( 'withFocusReturn()', () => {
 		} );
 
 		it( 'should render a basic Test component inside the HOC', () => {
-			const renderedComposite = renderer.create( <Composite /> );
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			const wrappedElementShallow = wrappedElement.children[ 0 ];
-			expect( wrappedElementShallow.props.className ).toBe( 'test' );
-			expect( wrappedElementShallow.type ).toBe( 'div' );
-			expect( wrappedElementShallow.children[ 0 ].type ).toBe(
-				'textarea'
-			);
+			render( <Composite /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).toBeVisible();
 		} );
 
 		it( 'should pass own props through to the wrapped element', () => {
-			const renderedComposite = renderer.create(
-				<Composite test="test" />
+			render( <Composite className="test" /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).toHaveClass(
+				'test'
 			);
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			// Ensure that the wrapped Test element has the appropriate props.
-			expect( wrappedElement.props.test ).toBe( 'test' );
 		} );
 
 		it( 'should not pass any withFocusReturn context props through to the wrapped element', () => {
-			const renderedComposite = renderer.create(
-				<Composite test="test" />
+			render( <Composite className="test" /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).not.toHaveAttribute(
+				'data-focus-history'
 			);
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			// Ensure that the wrapped Test element has the appropriate props.
-			expect( wrappedElement.props.focusHistory ).toBeUndefined();
 		} );
 
 		it( 'should not switch focus back to the bound focus element', () => {
@@ -78,31 +76,37 @@ describe( 'withFocusReturn()', () => {
 
 			// Change activeElement.
 			switchFocusTo.focus();
-			expect( document.activeElement ).toBe( switchFocusTo );
+			expect( switchFocusTo ).toHaveFocus();
 
 			// Should keep focus on switchFocusTo, because it is not within HOC.
 			unmount();
-			expect( document.activeElement ).toBe( switchFocusTo );
+			expect( switchFocusTo ).toHaveFocus();
 		} );
 
-		it( 'should switch focus back when unmounted while having focus', () => {
+		it( 'should switch focus back when unmounted while having focus', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const { container, unmount } = render( <Composite />, {
 				container: document.body.appendChild(
 					document.createElement( 'div' )
 				),
 			} );
 
-			const textarea = container.querySelector( 'textarea' );
-			fireEvent.focusIn( textarea, { target: textarea } );
-			textarea.focus();
-			expect( document.activeElement ).toBe( textarea );
+			// Click inside the textarea to focus it.
+			await user.click(
+				screen.getByRole( 'textbox', {
+					name: 'Textarea',
+				} )
+			);
 
 			// Should return to the activeElement saved with this component.
 			unmount();
 			render( <div></div>, {
 				container,
 			} );
-			expect( document.activeElement ).toBe( activeElement );
+			expect( activeElement ).toHaveFocus();
 		} );
 	} );
 } );

package/src/higher-order/with-notices/test/index.js

@@ -91,7 +91,7 @@ describe( 'withNotices operations', () => {
 		act( () => {
 			handle.current.createNotice( { content: message } );
 		} );
-		expect( getByText( message ) ).not.toBeNull();
+		expect( getByText( message ) ).toBeInTheDocument();
 	} );
 
 	it( 'should create notices of error status with createErrorNotice', () => {

package/src/index.js

@@ -6,6 +6,7 @@ export {
 	Polygon,
 	Rect,
 	G,
+	Line,
 	HorizontalRule,
 	BlockQuotation,
 } from '@wordpress/primitives';
@@ -16,7 +17,7 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
-export { __unstableMotion, __unstableAnimatePresence } from './animation';
+export { __unstableMotion } from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,
@@ -126,7 +127,7 @@ export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
 export { default as QueryControls } from './query-controls';
-export { default as __experimentalRadio } from './radio';
+export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';
@@ -146,6 +147,7 @@ export { Text as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as TextHighlight } from './text-highlight';
+export { default as __experimentalTheme } from './theme';
 export { default as Tip } from './tip';
 export { default as ToggleControl } from './toggle-control';
 export {

package/src/input-control/index.tsx

@@ -45,6 +45,7 @@ export function UnforwardedInputControl(
 		onKeyDown = noop,
 		prefix,
 		size = 'default',
+		style,
 		suffix,
 		value,
 		...props
@@ -77,6 +78,7 @@ export function UnforwardedInputControl(
 			labelPosition={ labelPosition }
 			prefix={ prefix }
 			size={ size }
+			style={ style }
 			suffix={ suffix }
 		>
 			<InputField

package/src/input-control/input-base.tsx

@@ -22,7 +22,7 @@ import {
 	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
-import { ContextSystemProvider } from '../ui/context';
+import { ContextSystemProvider, WordPressComponentProps } from '../ui/context';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -31,7 +31,7 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-// Adapter to map props for the new ui/flex compopnent.
+// Adapter to map props for the new ui/flex component.
 function getUIFlexProps( labelPosition?: LabelPosition ) {
 	const props: { direction?: string; gap?: number; justify?: string } = {};
 	switch ( labelPosition ) {
@@ -67,7 +67,7 @@ export function InputBase(
 		size = 'default',
 		suffix,
 		...props
-	}: InputBaseProps,
+	}: WordPressComponentProps< InputBaseProps, 'div' >,
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const id = useUniqueId( idProp );

package/src/input-control/styles/input-control-styles.tsx

@@ -34,6 +34,7 @@ const rootFocusedStyles = ( { isFocused }: RootProps ) => {
 };
 
 export const Root = styled( Flex )< RootProps >`
+	box-sizing: border-box;
 	position: relative;
 	border-radius: 2px;
 	padding-top: 0;

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

@@ -40,7 +40,7 @@ describe( 'InputControl', () => {
 
 			const input = getInput();
 
-			expect( input.getAttribute( 'type' ) ).toBe( 'number' );
+			expect( input ).toHaveAttribute( 'type', 'number' );
 		} );
 
 		it( 'should render label', () => {
@@ -48,7 +48,7 @@ describe( 'InputControl', () => {
 
 			const input = screen.getByText( 'Hello' );
 
-			expect( input ).toBeTruthy();
+			expect( input ).toBeInTheDocument();
 		} );
 	} );
 

package/src/input-control/types.ts

@@ -4,9 +4,7 @@
 import type {
 	CSSProperties,
 	ReactNode,
-	ChangeEvent,
 	SyntheticEvent,
-	PointerEvent,
 	HTMLInputTypeAttribute,
 } from 'react';
 import type { useDrag } from '@use-gesture/react';
@@ -62,10 +60,10 @@ interface BaseProps {
 	size?: Size;
 }
 
-export type InputChangeCallback<
-	E = ChangeEvent< HTMLInputElement > | PointerEvent< HTMLInputElement >,
-	P = {}
-> = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
+export type InputChangeCallback< P = {} > = (
+	nextValue: string | undefined,
+	extra: { event: SyntheticEvent } & P
+) => void;
 
 export interface InputFieldProps extends BaseProps {
 	/**
@@ -165,11 +163,6 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * @default false
 	 */
 	disabled?: boolean;
-	/**
-	 * The class name to be added to the wrapper element.
-	 */
-	className?: string;
-	id?: string;
 	/**
 	 * If this property is added, a label will be generated using label property as the content.
 	 */

package/src/isolated-event-container/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithoutRef, MouseEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+function stopPropagation( event: MouseEvent ) {
+	event.stopPropagation();
+}
+
+type DivProps = ComponentPropsWithoutRef< 'div' >;
+
+const IsolatedEventContainer = forwardRef< HTMLDivElement, DivProps >(
+	( props, ref ) => {
+		deprecated( 'wp.components.IsolatedEventContainer', {
+			since: '5.7',
+		} );
+
+		// Disable reason: this stops certain events from propagating outside of the component.
+		// - onMouseDown is disabled as this can cause interactions with other DOM elements.
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
+		return <div { ...props } ref={ ref } onMouseDown={ stopPropagation } />;
+		/* eslint-enable jsx-a11y/no-static-element-interactions */
+	}
+);
+
+export default IsolatedEventContainer;

package/src/item-group/styles.ts

@@ -13,7 +13,7 @@ export const unstyledButton = css`
 	border: 1px solid transparent;
 	cursor: pointer;
 	background: none;
-	text-align: left;
+	text-align: start;
 
 	&:hover {
 		color: ${ COLORS.ui.theme };

package/src/item-group/test/__snapshots__/index.js.snap

@@ -5,32 +5,32 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -7,11 +7,11 @@
-    <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
-    >
+@@ -8,11 +8,11 @@
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code
-      </div>
-@@ -19,11 +19,11 @@
-    <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
-    >
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code
+        </div>
+@@ -20,11 +20,11 @@
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Is
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Is
+        </div>
 `;
 
 exports[`ItemGroup Item should use different amounts of padding depending on the value of the size prop 1`] = `
@@ -38,19 +38,19 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,11 +1,11 @@
-  <div
-    class="css-dcjs67-itemWrapper"
-    role="listitem"
-  >
+@@ -2,11 +2,11 @@
     <div
--     class="components-item css-bsdqin-View-medium-item e19lxcc00"
-+     class="components-item css-1ohjtsa-View-large-item e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Item"
+      class="css-dcjs67-itemWrapper"
+      role="listitem"
     >
-      Code is poetry
-    </div>
+      <div
+-       class="components-item css-bsdqin-View-medium-item e19lxcc00"
++       class="components-item css-1ohjtsa-View-large-item e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Item"
+      >
+        Code is poetry
+      </div>
 `;
 
 exports[`ItemGroup ItemGroup component should render correctly 1`] = `
@@ -82,22 +82,24 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
   border-radius: 2px;
 }
 
-<div
-  class="components-item-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ItemGroup"
-  role="list"
->
+<div>
   <div
-    class="emotion-2"
-    role="listitem"
+    class="components-item-group emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ItemGroup"
+    role="list"
   >
     <div
-      class="components-item emotion-3 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="Item"
+      class="emotion-2"
+      role="listitem"
     >
-      Code is poetry
+      <div
+        class="components-item emotion-3 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="Item"
+      >
+        Code is poetry
+      </div>
     </div>
   </div>
 </div>
@@ -108,26 +110,27 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,17 +1,17 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,18 +1,18 @@
+  <div>
     <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code is poetry
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code is poetry
+        </div>
 `;
 
 exports[`ItemGroup ItemGroup component should show borders when the isBordered prop is true 1`] = `
@@ -135,26 +138,27 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,17 +1,17 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,18 +1,18 @@
+  <div>
     <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code is poetry
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code is poetry
+        </div>
 `;
 
 exports[`ItemGroup ItemGroup component should show rounded corners when the isRounded prop is true 1`] = `
@@ -162,13 +166,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,7 +1,7 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-1mm2cvy-View e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,8 +1,8 @@
+  <div>
     <div
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-1mm2cvy-View e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
+    >
+      <div
 `;

package/src/item-group/test/index.js

@@ -11,12 +11,12 @@ import { Item, ItemGroup } from '..';
 describe( 'ItemGroup', () => {
 	describe( 'ItemGroup component', () => {
 		it( 'should render correctly', () => {
-			const wrapper = render(
+			const { container } = render(
 				<ItemGroup>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
-			expect( wrapper.container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should show borders when the isBordered prop is true', () => {
@@ -33,9 +33,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( noBorders.firstChild ).toMatchDiffSnapshot(
-				withBorders.firstChild
-			);
+			expect( noBorders ).toMatchDiffSnapshot( withBorders );
 		} );
 
 		it( 'should show rounded corners when the isRounded prop is true', () => {
@@ -52,9 +50,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( roundCorners.firstChild ).toMatchDiffSnapshot(
-				squaredCorners.firstChild
-			);
+			expect( roundCorners ).toMatchDiffSnapshot( squaredCorners );
 		} );
 
 		it( 'should render items individually when the isSeparated prop is true', () => {
@@ -65,15 +61,13 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			const { container: seperatedItems } = render(
+			const { container: separatedItems } = render(
 				<ItemGroup isSeparated={ true }>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
 
-			expect( groupedItems.firstChild ).toMatchDiffSnapshot(
-				seperatedItems.firstChild
-			);
+			expect( groupedItems ).toMatchDiffSnapshot( separatedItems );
 		} );
 	} );
 
@@ -120,9 +114,7 @@ describe( 'ItemGroup', () => {
 				<Item size="large">Code is poetry</Item>
 			);
 
-			expect( mediumSize.firstChild ).toMatchDiffSnapshot(
-				largeSize.firstChild
-			);
+			expect( mediumSize ).toMatchDiffSnapshot( largeSize );
 		} );
 
 		it( 'should read the value of the size prop from context when the prop is not defined', () => {
@@ -145,9 +137,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( mediumSize.firstChild ).toMatchDiffSnapshot(
-				largeSize.firstChild
-			);
+			expect( mediumSize ).toMatchDiffSnapshot( largeSize );
 		} );
 	} );
 } );

package/src/menu-item/test/index.js

@@ -83,7 +83,6 @@ describe( 'MenuItem', () => {
 
 		const menuItem = screen.getByRole( 'menuitem' );
 		expect( menuItem ).not.toBeChecked();
-		expect( menuItem ).not.toHaveAttribute( 'aria-checked' );
 	} );
 
 	it( 'should use aria-checked if menuitemradio or menuitemcheckbox is set as aria-role', () => {
@@ -95,7 +94,6 @@ describe( 'MenuItem', () => {
 
 		const radioMenuItem = screen.getByRole( 'menuitemradio' );
 		expect( radioMenuItem ).toBeChecked();
-		expect( radioMenuItem ).toHaveAttribute( 'aria-checked', 'true' );
 
 		rerender(
 			<MenuItem role="menuitemcheckbox" isSelected>
@@ -105,7 +103,6 @@ describe( 'MenuItem', () => {
 
 		const checkboxMenuItem = screen.getByRole( 'menuitemcheckbox' );
 		expect( checkboxMenuItem ).toBeChecked();
-		expect( checkboxMenuItem ).toHaveAttribute( 'aria-checked', 'true' );
 	} );
 
 	it( 'should not render shortcut or right icon if suffix provided', () => {