@wordpress/components 19.4.1 → 19.5.0

package/src/tree-grid/test/index.js

@@ -1,23 +1,242 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { LEFT, RIGHT, UP, DOWN } from '@wordpress/keycodes';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import TreeGrid from '../';
 
+const TestButton = forwardRef( ( { ...props }, ref ) => (
+	<button { ...props } ref={ ref }></button>
+) );
+
 describe( 'TreeGrid', () => {
-	it( 'renders a table, tbody and any child elements', () => {
-		const renderer = TestRenderer.create(
-			<TreeGrid>
-				<tr>
-					<td>Test</td>
+	const originalGetClientRects = window.Element.prototype.getClientRects;
+
+	// `getClientRects` needs to be mocked so that `isVisible` from the `@wordpress/dom`
+	// `focusable` module can pass, in a JSDOM env where the DOM elements have no width/height.
+	const mockedGetClientRects = jest.fn( () => [
+		{
+			x: 0,
+			y: 0,
+			width: 100,
+			height: 100,
+		},
+	] );
+
+	beforeAll( () => {
+		window.Element.prototype.getClientRects = jest.fn(
+			mockedGetClientRects
+		);
+	} );
+
+	afterAll( () => {
+		window.Element.prototype.getClientRects = originalGetClientRects;
+	} );
+
+	describe( 'simple rendering', () => {
+		it( 'renders a table, tbody and any child elements', () => {
+			const { container } = render(
+				<TreeGrid>
+					<tr>
+						<td>Test</td>
+					</tr>
+				</TreeGrid>
+			);
+
+			expect( container.innerHTML ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'onExpandRow', () => {
+		it( 'should call onExpandRow when pressing Right Arrow on a collapsed row', () => {
+			const onExpandRow = jest.fn();
+
+			render(
+				<TreeGrid onExpandRow={ onExpandRow }>
+					<tr role="row" aria-expanded="true">
+						<td>
+							<TestButton>Row 1</TestButton>
+						</td>
+					</tr>
+					<tr role="row" aria-expanded="false">
+						<td>
+							<TestButton>Row 2</TestButton>
+						</td>
+					</tr>
+					<tr role="row" aria-expanded="true">
+						<td>
+							<TestButton>Row 3</TestButton>
+						</td>
+					</tr>
+				</TreeGrid>
+			);
+
+			screen.getByText( 'Row 2' ).focus();
+			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
+
+			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+				key: 'ArrowRight',
+				keyCode: RIGHT,
+				currentTarget: row2Element,
+			} );
+
+			expect( onExpandRow ).toHaveBeenCalledWith( row2Element );
+		} );
+	} );
+
+	describe( 'onCollapseRow', () => {
+		it( 'should call onCollapseRow when pressing Left Arrow on an expanded row', () => {
+			const onCollapseRow = jest.fn();
+
+			render(
+				<TreeGrid onCollapseRow={ onCollapseRow }>
+					<tr role="row" aria-expanded="false">
+						<td>
+							<TestButton>Row 1</TestButton>
+						</td>
+					</tr>
+					<tr role="row" aria-expanded="true">
+						<td>
+							<TestButton>Row 2</TestButton>
+						</td>
+					</tr>
+					<tr role="row" aria-expanded="false">
+						<td>
+							<TestButton>Row 3</TestButton>
+						</td>
+					</tr>
+				</TreeGrid>
+			);
+
+			screen.getByText( 'Row 2' ).focus();
+			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
+
+			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+				key: 'ArrowLeft',
+				keyCode: LEFT,
+				currentTarget: row2Element,
+			} );
+
+			expect( onCollapseRow ).toHaveBeenCalledWith( row2Element );
+		} );
+	} );
+
+	describe( 'onFocusRow', () => {
+		const TestTree = ( { onFocusRow } ) => (
+			<TreeGrid onFocusRow={ onFocusRow }>
+				<tr role="row" aria-expanded="false">
+					<td>
+						<TestButton>Row 1</TestButton>
+					</td>
+				</tr>
+				<tr role="row" aria-expanded="true">
+					<td>
+						<TestButton>Row 2</TestButton>
+					</td>
+				</tr>
+				<tr role="row" aria-expanded="false">
+					<td>
+						<TestButton>Row 3</TestButton>
+					</td>
 				</tr>
 			</TreeGrid>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		it( 'should call onFocusRow with event, start and end nodes when pressing Down Arrow', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 2' ).focus();
+
+			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
+			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+
+			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+				key: 'ArrowDown',
+				keyCode: DOWN,
+				currentTarget: row2Element,
+			} );
+
+			expect( onFocusRow ).toHaveBeenCalledWith(
+				expect.objectContaining( { key: 'ArrowDown', keyCode: DOWN } ),
+				row2Element,
+				row3Element
+			);
+		} );
+
+		it( 'should call onFocusRow with event, start and end nodes when pressing Up Arrow', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 2' ).focus();
+
+			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
+			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+
+			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+				key: 'ArrowUp',
+				keyCode: UP,
+				currentTarget: row2Element,
+			} );
+
+			expect( onFocusRow ).toHaveBeenCalledWith(
+				expect.objectContaining( { key: 'ArrowUp', keyCode: UP } ),
+				row2Element,
+				row1Element
+			);
+		} );
+
+		it( 'should call onFocusRow when shift key is held', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 2' ).focus();
+
+			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
+			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+
+			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+				key: 'ArrowUp',
+				keyCode: UP,
+				currentTarget: row2Element,
+				shiftKey: true,
+			} );
+
+			expect( onFocusRow ).toHaveBeenLastCalledWith(
+				expect.objectContaining( {
+					key: 'ArrowUp',
+					keyCode: UP,
+					shiftKey: true,
+				} ),
+				row2Element,
+				row1Element
+			);
+
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
+				key: 'ArrowDown',
+				keyCode: DOWN,
+				currentTarget: row1Element,
+				shiftKey: true,
+			} );
+
+			expect( onFocusRow ).toHaveBeenLastCalledWith(
+				expect.objectContaining( {
+					key: 'ArrowDown',
+					keyCode: DOWN,
+					shiftKey: true,
+				} ),
+				row1Element,
+				row2Element
+			);
+		} );
 	} );
 } );

package/src/truncate/component.js

@@ -7,7 +7,7 @@ import useTruncate from './hook';
 
 /**
  * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
- * @param {import('react').Ref<any>}                                                         forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                forwardedRef
  */
 function Truncate( props, forwardedRef ) {
 	const truncateProps = useTruncate( props );

package/src/ui/context/wordpress-component.ts

@@ -20,7 +20,7 @@ export type WordPressComponentProps<
 		? {
 				as?: T | keyof JSX.IntrinsicElements;
 		  }
-		: { as?: never } );
+		: {} );
 
 export type WordPressComponent<
 	T extends React.ElementType,
@@ -29,7 +29,7 @@ export type WordPressComponent<
 > = {
 	< TT extends React.ElementType >(
 		props: WordPressComponentProps< O, TT, IsPolymorphic > &
-			( IsPolymorphic extends true ? { as: TT } : { as: never } )
+			( IsPolymorphic extends true ? { as: TT } : {} )
 	): JSX.Element | null;
 	(
 		props: WordPressComponentProps< O, T, IsPolymorphic >

package/src/ui/control-group/component.js

@@ -12,7 +12,7 @@ import { contextConnect } from '../context';
 
 /**
  * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                     forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                            forwardedRef
  */
 function ControlGroup( props, forwardedRef ) {
 	const {

package/src/ui/control-label/component.js

@@ -7,7 +7,7 @@ import { useControlLabel } from './hook';
 
 /**
  * @param {import('../context').WordPressComponentProps<import('./types').Props, 'label', false>} props
- * @param {import('react').Ref<any>}                                                              forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                     forwardedRef
  */
 function ControlLabel( props, forwardedRef ) {
 	const controlLabelProps = useControlLabel( props );

package/src/ui/form-group/form-group.js

@@ -9,7 +9,7 @@ import { useFormGroup } from './use-form-group';
 
 /**
  * @param {import('../context').WordPressComponentProps<import('./types').FormGroupProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                              forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                     forwardedRef
  */
 function FormGroup( props, forwardedRef ) {
 	const { contentProps, horizontal, ...otherProps } = useFormGroup( props );

package/src/ui/shortcut/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -25,7 +25,7 @@ export interface Props {
 
 function Shortcut(
 	props: WordPressComponentProps< Props, 'span' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ): JSX.Element | null {
 	const {
 		as: asProp = 'span',

package/src/ui/spinner/component.js

@@ -17,7 +17,7 @@ import { COLORS } from '../../utils/colors-values';
 /**
  *
  * @param {import('../context').WordPressComponentProps<Props, 'div'>} props
- * @param {import('react').Ref<any>}                                   forwardedRef
+ * @param {import('react').ForwardedRef<any>}                          forwardedRef
  */
 function Spinner( props, forwardedRef ) {
 	const {

package/src/ui/tooltip/component.js

@@ -19,7 +19,7 @@ import { TooltipShortcut } from './styles';
 
 /**
  * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                     forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                            forwardedRef
  */
 function Tooltip( props, forwardedRef ) {
 	const {

package/src/ui/tooltip/content.js

@@ -18,7 +18,7 @@ const { TooltipPopoverView } = styles;
 /**
  *
  * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                            forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                   forwardedRef
  */
 function TooltipContent( props, forwardedRef ) {
 	const { children, className, ...otherProps } = useContextSystem(

package/src/unit-control/index.tsx

@@ -4,7 +4,7 @@
 import type {
 	FocusEventHandler,
 	KeyboardEvent,
-	Ref,
+	ForwardedRef,
 	SyntheticEvent,
 } from 'react';
 import { noop, omit } from 'lodash';
@@ -55,7 +55,7 @@ function UnitControl(
 		value: valueProp,
 		...props
 	}: WordPressComponentProps< UnitControlProps, 'input', false >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const units = useMemo(
 		() => getUnitsWithCurrentUnit( valueProp, unitProp, unitsProp ),

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

@@ -16,7 +16,7 @@ import UnitControl from '../';
 import { CSS_UNITS } from '../utils';
 
 export default {
-	title: 'Components/UnitControl',
+	title: 'Components (Experimental)/UnitControl',
 	component: UnitControl,
 	parameters: {
 		knobs: { disable: false },

package/src/v-stack/component.js

@@ -7,7 +7,7 @@ import { useVStack } from './hook';
 
 /**
  * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                        forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                               forwardedRef
  */
 function VStack( props, forwardedRef ) {
 	const vStackProps = useVStack( props );

package/src/visually-hidden/component.js

@@ -7,7 +7,7 @@ import { View } from '../view';
 
 /**
  * @param {import('../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').Ref<any>}                                                                        forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                               forwardedRef
  */
 function VisuallyHidden( props, forwardedRef ) {
 	const { style: styleProp, ...contextProps } = useContextSystem(

package/src/z-stack/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref, ReactNode } from 'react';
+import type { ForwardedRef, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
@@ -43,7 +43,7 @@ export interface ZStackProps {
 
 function ZStack(
 	props: WordPressComponentProps< ZStackProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		children,