@wordpress/components 19.4.1 → 19.7.0-next.e230fbab09.0

package/src/tree-grid/index.js

@@ -8,7 +8,7 @@ import { includes } from 'lodash';
  */
 import { focus } from '@wordpress/dom';
 import { forwardRef, useCallback } from '@wordpress/element';
-import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
+import { UP, DOWN, LEFT, RIGHT, HOME, END } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -45,22 +45,30 @@ function getRowFocusables( rowElement ) {
  * @param {WPElement} props.children      Children to be rendered.
  * @param {Function}  props.onExpandRow   Callback to fire when row is expanded.
  * @param {Function}  props.onCollapseRow Callback to fire when row is collapsed.
+ * @param {Function}  props.onFocusRow    Callback to fire when moving focus to a different row.
  * @param {Object}    ref                 A ref to the underlying DOM table element.
  */
 function TreeGrid(
-	{ children, onExpandRow = () => {}, onCollapseRow = () => {}, ...props },
+	{
+		children,
+		onExpandRow = () => {},
+		onCollapseRow = () => {},
+		onFocusRow = () => {},
+		...props
+	},
 	ref
 ) {
 	const onKeyDown = useCallback(
 		( event ) => {
-			const { keyCode, metaKey, ctrlKey, altKey, shiftKey } = event;
+			const { keyCode, metaKey, ctrlKey, altKey } = event;
 
-			const hasModifierKeyPressed =
-				metaKey || ctrlKey || altKey || shiftKey;
+			// The shift key is intentionally absent from the following list,
+			// to enable shift + up/down to select items from the list.
+			const hasModifierKeyPressed = metaKey || ctrlKey || altKey;
 
 			if (
 				hasModifierKeyPressed ||
-				! includes( [ UP, DOWN, LEFT, RIGHT ], keyCode )
+				! includes( [ UP, DOWN, LEFT, RIGHT, HOME, END ], keyCode )
 			) {
 				return;
 			}
@@ -216,12 +224,63 @@ function TreeGrid(
 				);
 				focusablesInNextRow[ nextIndex ].focus();
 
+				// Let consumers know the row that was originally focused,
+				// and the row that is now in focus.
+				onFocusRow( event, activeRow, rows[ nextRowIndex ] );
+
+				// Prevent key use for anything else. This ensures Voiceover
+				// doesn't try to handle key navigation.
+				event.preventDefault();
+			} else if ( includes( [ HOME, END ], keyCode ) ) {
+				// Calculate the rowIndex of the next row.
+				const rows = Array.from(
+					treeGridElement.querySelectorAll( '[role="row"]' )
+				);
+				const currentRowIndex = rows.indexOf( activeRow );
+				let nextRowIndex;
+
+				if ( keyCode === HOME ) {
+					nextRowIndex = 0;
+				} else {
+					nextRowIndex = rows.length - 1;
+				}
+
+				// Focus is either at the top or bottom edge of the grid. Do nothing.
+				if ( nextRowIndex === currentRowIndex ) {
+					// Prevent key use for anything else. For example, Voiceover
+					// will start navigating horizontally when reaching the vertical
+					// bounds of a table.
+					event.preventDefault();
+					return;
+				}
+
+				// Get the focusables in the next row.
+				const focusablesInNextRow = getRowFocusables(
+					rows[ nextRowIndex ]
+				);
+
+				// If for some reason there are no focusables in the next row, do nothing.
+				if ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {
+					// Prevent key use for anything else. For example, Voiceover
+					// will still focus text when using arrow keys, while this
+					// component should limit navigation to focusables.
+					event.preventDefault();
+					return;
+				}
+
+				// Try to focus the element in the next row that's at a similar column to the activeElement.
+				const nextIndex = Math.min(
+					currentColumnIndex,
+					focusablesInNextRow.length - 1
+				);
+				focusablesInNextRow[ nextIndex ].focus();
+
 				// Prevent key use for anything else. This ensures Voiceover
 				// doesn't try to handle key navigation.
 				event.preventDefault();
 			}
 		},
-		[ onExpandRow, onCollapseRow ]
+		[ onExpandRow, onCollapseRow, onFocusRow ]
 	);
 
 	/* Disable reason: A treegrid is implemented using a table element. */

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

@@ -9,7 +9,10 @@ import { Fragment } from '@wordpress/element';
 import TreeGrid, { TreeGridRow, TreeGridCell } from '../';
 import { Button } from '../../';
 
-export default { title: 'Components/TreeGrid', component: TreeGrid };
+export default {
+	title: 'Components (Experimental)/TreeGrid',
+	component: TreeGrid,
+};
 
 const groceries = [
 	{

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

@@ -1,16 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TreeGrid renders a table, tbody and any child elements 1`] = `
-<table
-  onKeyDown={[Function]}
-  role="treegrid"
->
-  <tbody>
-    <tr>
-      <td>
-        Test
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
+exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table>"`;

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

@@ -1,23 +1,274 @@
 /**
  * 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 '../';
+import TreeGridRow from '../row';
+import TreeGridCell from '../cell';
+
+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>
-				</tr>
+	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>
+					<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 1 }>
+						<TreeGridCell withoutGridItem>Test</TreeGridCell>
+					</TreeGridRow>
+				</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 }>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 1 }
+						setSize={ 3 }
+						isExpanded={ true }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton>Row 1</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 2 }
+						setSize={ 3 }
+						isExpanded={ false }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton>Row 2</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 3 }
+						setSize={ 3 }
+						isExpanded={ true }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton>Row 3</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+				</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 }>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 1 }
+						setSize={ 3 }
+						isExpanded={ false }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton>Row 1</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 2 }
+						setSize={ 3 }
+						isExpanded={ true }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton>Row 2</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 3 }
+						setSize={ 3 }
+						isExpanded={ false }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton>Row 3</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+				</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 }>
+				<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 3 }>
+					<TreeGridCell withoutGridItem>
+						<TestButton>Row 1</TestButton>
+					</TreeGridCell>
+				</TreeGridRow>
+				<TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 3 }>
+					<TreeGridCell withoutGridItem>
+						<TestButton>Row 2</TestButton>
+					</TreeGridCell>
+				</TreeGridRow>
+				<TreeGridRow level={ 1 } positionInSet={ 3 } setSize={ 3 }>
+					<TreeGridCell withoutGridItem>
+						<TestButton>Row 3</TestButton>
+					</TreeGridCell>
+				</TreeGridRow>
 			</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/truncate/utils.js

@@ -34,7 +34,7 @@ export function truncateMiddle( word, headLength, tailLength, ellipsis ) {
 	const wordLength = word.length;
 	// Setting default values
 	// eslint-disable-next-line no-bitwise
-	const frontLength = ~~headLength; // will cast to integer
+	const frontLength = ~~headLength; // Will cast to integer
 	// eslint-disable-next-line no-bitwise
 	const backLength = ~~tailLength;
 	/* istanbul ignore next */

package/src/ui/context/{context-connect.js → context-connect.ts}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { uniq } from 'lodash';
+import type { ForwardedRef, ReactChild, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
@@ -14,8 +15,13 @@ import warn from '@wordpress/warning';
  */
 import { CONNECT_STATIC_NAMESPACE } from './constants';
 import { getStyledClassNameFromKey } from './get-styled-class-name-from-key';
+import type { WordPressComponentFromProps } from '.';
+
+type ContextConnectOptions = {
+	/** Defaults to `false`. */
+	memo?: boolean;
+};
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
  * within the Context system under a specified namespace.
@@ -24,15 +30,16 @@ import { getStyledClassNameFromKey } from './get-styled-class-name-from-key';
  * The hope is that we can improve render performance by removing functional
  * component wrappers.
  *
- * @template {import('./wordpress-component').WordPressComponentProps<{}, any, any>} P
- * @param {(props: P, ref: import('react').Ref<any>) => JSX.Element | null} Component            The component to register into the Context system.
- * @param {string}                                                          namespace            The namespace to register the component under.
- * @param {Object}                                                          options
- * @param {boolean}                                                         [options.memo=false]
- * @return {import('./wordpress-component').WordPressComponentFromProps<P>} The connected WordPressComponent
+ * @param  Component The component to register into the Context system.
+ * @param  namespace The namespace to register the component under.
+ * @param  options
+ * @return The connected WordPressComponent
  */
-export function contextConnect( Component, namespace, options = {} ) {
-	/* eslint-enable jsdoc/valid-types */
+export function contextConnect< P >(
+	Component: ( props: P, ref: ForwardedRef< any > ) => JSX.Element | null,
+	namespace: string,
+	options: ContextConnectOptions = {}
+): WordPressComponentFromProps< P > {
 	const { memo: memoProp = false } = options;
 
 	let WrappedComponent = forwardRef( Component );
@@ -75,10 +82,12 @@ export function contextConnect( Component, namespace, options = {} ) {
 /**
  * Attempts to retrieve the connected namespace from a component.
  *
- * @param {import('react').ReactChild | undefined | {}} Component The component to retrieve a namespace from.
- * @return {Array<string>} The connected namespaces.
+ * @param  Component The component to retrieve a namespace from.
+ * @return The connected namespaces.
  */
-export function getConnectNamespace( Component ) {
+export function getConnectNamespace(
+	Component: ReactChild | undefined | {}
+): string[] {
 	if ( ! Component ) return [];
 
 	let namespaces = [];
@@ -101,11 +110,13 @@ export function getConnectNamespace( Component ) {
 /**
  * Checks to see if a component is connected within the Context system.
  *
- * @param {import('react').ReactNode} Component The component to retrieve a namespace from.
- * @param {Array<string>|string}      match     The namespace to check.
- * @return {boolean} The result.
+ * @param  Component The component to retrieve a namespace from.
+ * @param  match     The namespace to check.
  */
-export function hasConnectNamespace( Component, match ) {
+export function hasConnectNamespace(
+	Component: ReactNode,
+	match: string[] | string
+): boolean {
 	if ( ! Component ) return false;
 
 	if ( typeof match === 'string' ) {

package/src/ui/context/context-system-provider.js

@@ -54,9 +54,9 @@ function useContextSystemBridge( { value } ) {
 
 	useUpdateEffect( () => {
 		if (
-			// objects are equivalent
+			// Objects are equivalent.
 			isEqual( valueRef.current, value ) &&
-			// but not the same reference
+			// But not the same reference.
 			valueRef.current !== value
 		) {
 			warn( `Please memoize your context: ${ JSON.stringify( value ) }` );

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

@@ -18,9 +18,10 @@ export type WordPressComponentProps<
 	Omit< React.ComponentPropsWithRef< T >, 'as' | keyof P | 'children' > &
 	( IsPolymorphic extends true
 		? {
+				/** The HTML element or React component to render the component as. */
 				as?: T | keyof JSX.IntrinsicElements;
 		  }
-		: { as?: never } );
+		: {} );
 
 export type WordPressComponent<
 	T extends React.ElementType,
@@ -29,7 +30,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/ui/tooltip/test/index.js

@@ -41,11 +41,11 @@ describe( 'props', () => {
 		const invisibleTooltipTrigger = screen.getByText(
 			invisibleTooltipTriggerContent
 		);
-		// The invisible tooltip should not render
+		// The invisible tooltip should not render.
 		expect( tooltips ).toHaveLength( 1 );
-		// Assert that the rendered tooltip is indeed the base tooltip
+		// Assert that the rendered tooltip is indeed the base tooltip.
 		expect( tooltips[ 0 ].id ).toBe( baseTooltipId );
-		// But the invisible tooltip's trigger still should have rendered
+		// But the invisible tooltip's trigger still should have rendered.
 		expect( invisibleTooltipTrigger ).not.toBeUndefined();
 	} );
 
@@ -71,7 +71,7 @@ describe( 'props', () => {
 			</Tooltip>
 		);
 		const tooltips = screen.getAllByRole( /tooltip/ );
-		// assert only the base tooltip rendered
+		// Assert only the base tooltip rendered.
 		expect( tooltips ).toHaveLength( 1 );
 		expect( tooltips[ 0 ].id ).toBe( baseTooltipId );
 	} );

package/src/ui/utils/colors.js

@@ -61,9 +61,9 @@ function _getComputedBackgroundColor( backgroundColor ) {
 	if ( ! el ) return '';
 
 	el.style.background = backgroundColor;
-	// Grab the style
+	// Grab the style.
 	const computedColor = window?.getComputedStyle( el ).background;
-	// Reset
+	// Reset.
 	el.style.background = '';
 
 	return computedColor || '';