@wordpress/components 39.0.0 → 40.1.0

package/src/tools-panel/tools-panel-item/hook.ts

@@ -1,6 +1,11 @@
 import clsx from 'clsx';
-import { usePrevious } from '@wordpress/compose';
-import { useCallback, useEffect, useLayoutEffect } from '@wordpress/element';
+import { useEvent } from '@wordpress/compose';
+import {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+} from '@wordpress/element';
 import styles from '../style.module.scss';
 import { useToolsPanelContext } from '../context';
 import type { WordPressComponentProps } from '../../context';
@@ -14,6 +19,7 @@ export function useToolsPanelItem(
 ) {
 	const {
 		className,
+		defaultShown,
 		hasValue,
 		isShownByDefault = false,
 		label,
@@ -21,14 +27,13 @@ export function useToolsPanelItem(
 		resetAllFilter = noop,
 		onDeselect,
 		onSelect,
+		onShownChange,
 		...otherProps
 	} = useContextSystem( props, 'ToolsPanelItem' );
 
 	const {
 		panelId: currentPanelId,
 		menuItems,
-		registerResetAllFilter,
-		deregisterResetAllFilter,
 		registerPanelItem,
 		deregisterPanelItem,
 		flagItemCustomization,
@@ -40,100 +45,127 @@ export function useToolsPanelItem(
 		__experimentalLastVisibleItemClass,
 	} = useToolsPanelContext();
 
-	// hasValue is a new function on every render, so do not add it as a
-	// dependency to the useCallback hook! If needed, we should use a ref.
+	// `hasValue` is a new function every render. It can't use `useEvent`
+	// because the panel calls it while deriving the menu during render, which
+	// `useEvent` forbids, so it stays keyed on the panel it was captured for.
 	const hasValueCallback = useCallback( hasValue, [ panelId ] );
-	// resetAllFilter is a new function on every render, so do not add it as a
-	// dependency to the useCallback hook! If needed, we should use a ref.
-	const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );
-	const previousPanelId = usePrevious( currentPanelId );
+	// `resetAllFilter` only runs from the reset handler, so a stable identity
+	// that always sees the latest props is both safe and more correct than
+	// freezing it per panel.
+	const resetAllFilterCallback = useEvent( resetAllFilter );
+
+	// `defaultShown` seeds an item's visibility when it registers, and is
+	// deliberately not reactive. Holding it in a ref keeps it out of the
+	// registration effect below, so a change on its own cannot deregister and
+	// re-register the item, which would discard the visibility the user chose
+	// from the menu.
+	//
+	// The ref still tracks the latest value, so that a re-registration caused
+	// by something else, such as `panelId` changing, seeds from the current
+	// preference rather than a stale one.
+	const defaultShownRef = useRef( defaultShown );
+	// Declared before the registration effect below so that it has already
+	// run by the time that effect reads the ref in the same commit.
+	useLayoutEffect( () => {
+		defaultShownRef.current = defaultShown;
+	} );
 
+	// `onShownChange` is a new function every render. `useEvent` gives the item
+	// a stable callback to register, while the panel still invokes the latest.
+	const onShownChangeCallback = useEvent( onShownChange );
+
+	// A panel spanning a multi-selection has no id of its own, so every item
+	// belongs to it.
 	const hasMatchingPanel =
 		currentPanelId === panelId || currentPanelId === null;
 
-	// Registering the panel item allows the panel to include it in its
-	// automatically generated menu and determine its initial checked status.
-	//
-	// This is performed in a layout effect to ensure that the panel item
-	// is registered before it is rendered preventing a rendering glitch.
+	// A layout effect so the item is registered before it renders, avoiding a
+	// glitch, and so a whole panel's worth of registrations land in one commit
+	// for React to batch.
 	// See: https://github.com/WordPress/gutenberg/issues/56470
 	useLayoutEffect( () => {
-		if ( hasMatchingPanel && previousPanelId !== null ) {
-			registerPanelItem( {
-				hasValue: hasValueCallback,
-				isShownByDefault,
-				label,
-				panelId,
-			} );
+		if ( ! hasMatchingPanel ) {
+			return;
 		}
 
+		const item = {
+			defaultShown: defaultShownRef.current,
+			hasValue: hasValueCallback,
+			isShownByDefault,
+			label,
+			onShownChange: onShownChangeCallback,
+			panelId,
+			resetAllFilter: resetAllFilterCallback,
+		};
+		registerPanelItem( item );
+
+		// Passing the registration back lets the panel ignore this cleanup if
+		// a replacement has already claimed the label, which happens when a
+		// panel switches while its items arrive through a Slot.
 		return () => {
-			if (
-				( previousPanelId === null && !! currentPanelId ) ||
-				currentPanelId === panelId
-			) {
-				deregisterPanelItem( label );
-			}
+			deregisterPanelItem( label, item );
 		};
 	}, [
-		currentPanelId,
+		deregisterPanelItem,
 		hasMatchingPanel,
+		hasValueCallback,
 		isShownByDefault,
 		label,
-		hasValueCallback,
+		onShownChangeCallback,
 		panelId,
-		previousPanelId,
 		registerPanelItem,
-		deregisterPanelItem,
-	] );
-
-	useEffect( () => {
-		if ( hasMatchingPanel ) {
-			registerResetAllFilter( resetAllFilterCallback );
-		}
-		return () => {
-			if ( hasMatchingPanel ) {
-				deregisterResetAllFilter( resetAllFilterCallback );
-			}
-		};
-	}, [
-		registerResetAllFilter,
-		deregisterResetAllFilter,
 		resetAllFilterCallback,
-		hasMatchingPanel,
 	] );
 
-	// Note: `label` is used as a key when building menu item state in
-	// `ToolsPanel`.
 	const menuGroup = isShownByDefault ? 'default' : 'optional';
 	const isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];
-	const wasMenuItemChecked = usePrevious( isMenuItemChecked );
-	const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;
+	const isRegistered = isMenuItemChecked !== undefined;
+	// Tracks the effect below rather than the render, so renders that leave
+	// the checked state alone can't desync it.
+	const wasMenuItemCheckedRef = useRef< boolean | undefined >( undefined );
 
 	const isValueSet = hasValue();
-	// Notify the panel when an item's value has changed except for optional
-	// items without value because the item should not cause itself to hide.
-	useEffect( () => {
-		if ( ! isShownByDefault && ! isValueSet ) {
+
+	// An optional item losing its value must not hide itself, so only default
+	// items report a value going away. Items belonging to another panel stay
+	// silent or they would leave an orphaned entry in this panel's menu.
+	//
+	// Shares the layout phase with registration above so it runs against an
+	// already registered item and batches with it.
+	useLayoutEffect( () => {
+		if ( ! hasMatchingPanel || ( ! isShownByDefault && ! isValueSet ) ) {
 			return;
 		}
 
-		flagItemCustomization( isValueSet, label, menuGroup );
+		flagItemCustomization( isValueSet, label );
 	}, [
+		hasMatchingPanel,
 		isValueSet,
-		menuGroup,
 		label,
 		flagItemCustomization,
 		isShownByDefault,
 	] );
 
-	// Determine if the panel item's corresponding menu is being toggled and
-	// trigger appropriate callback if it is.
+	// Passive so consumer callbacks don't run before the browser has painted.
 	useEffect( () => {
-		// We check whether this item is currently registered as items rendered
-		// via fills can persist through the parent panel being remounted.
+		const wasMenuItemChecked = wasMenuItemCheckedRef.current;
+		wasMenuItemCheckedRef.current = isMenuItemChecked;
+
+		// An item has no menu entry until it registers, so the first time
+		// through there is no previous checked state. Items that register
+		// already shown, because they have a value or `defaultShown` was set,
+		// must not look as though the user just selected them.
+		const wasRegistered = wasMenuItemChecked !== undefined;
+
+		// Items rendered via fills can outlive a remount of the panel they
+		// belong to, leaving them unregistered.
 		// See: https://github.com/WordPress/gutenberg/pull/45673
-		if ( ! isRegistered || isResetting || ! hasMatchingPanel ) {
+		if (
+			! isRegistered ||
+			! wasRegistered ||
+			isResetting ||
+			! hasMatchingPanel
+		) {
 			return;
 		}
 
@@ -150,17 +182,13 @@ export function useToolsPanelItem(
 		isRegistered,
 		isResetting,
 		isValueSet,
-		wasMenuItemChecked,
 		onSelect,
 		onDeselect,
 	] );
 
-	// The item is shown if it is a default control regardless of whether it
-	// has a value. Optional items are shown when they are checked or have
-	// a value.
-	const isShown = isShownByDefault
-		? menuItems?.[ menuGroup ]?.[ label ] !== undefined
-		: isMenuItemChecked;
+	// A default control shows whether or not it has a value; an optional one
+	// shows once checked.
+	const isShown = isShownByDefault ? isRegistered : isMenuItemChecked;
 
 	const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && ! isShown;
 	const classes = clsx(

package/src/tools-panel/types.ts

@@ -103,6 +103,16 @@ export type ToolsPanelHeaderProps = {
 };
 
 export type ToolsPanelItem = {
+	/**
+	 * For optional items only, this determines whether the item is shown on
+	 * first render even when `hasValue()` returns `false`.
+	 *
+	 * An item is always shown while it has a value, so this only controls the
+	 * initial state of items without one.
+	 *
+	 * @default false
+	 */
+	defaultShown?: boolean;
 	/**
 	 * This is called when building the `ToolsPanel` menu to determine the
 	 * item's initial checked state.
@@ -125,6 +135,27 @@ export type ToolsPanelItem = {
 	 * panel.
 	 */
 	label: string;
+	/**
+	 * A callback executed when the user shows or hides the item via the
+	 * `ToolsPanel` menu, passed `true` when it was shown and `false` when it
+	 * was hidden.
+	 *
+	 * Unlike `onDeselect`, this fires whether or not the item has a value, and
+	 * only in response to an explicit menu action. Visibility changes with
+	 * another cause do not trigger it, such as an item becoming visible
+	 * because it received a value or because `defaultShown` was set, or
+	 * hiding because `Reset all` ran.
+	 *
+	 * Items flagged with `isShownByDefault` are always visible and stay so when
+	 * toggled off, so this is never called for them.
+	 *
+	 * A single menu action may also call `onSelect` or `onDeselect`, which are
+	 * unchanged. Showing an item without a value calls this with `true` and
+	 * `onSelect`; hiding an item that has a value calls this with `false` and
+	 * `onDeselect`. Use this callback to track visibility and `onDeselect` to
+	 * reset a value, rather than treating them as interchangeable.
+	 */
+	onShownChange?: ( isShown: boolean ) => void;
 	/**
 	 * Panel items will ensure they are only registering with their intended panel
 	 * by comparing the `panelId` props set on both the item and the panel itself,
@@ -160,6 +191,19 @@ export type ToolsPanelItemProps = ToolsPanelItem & {
 	resetAllFilter?: ResetAllFilter;
 };
 
+/**
+ * The shape of an item as it is held in `ToolsPanel` state. It extends
+ * `ToolsPanelItem` with the data the panel needs but that isn't part of the
+ * item's own API surface.
+ */
+export type RegisteredToolsPanelItem = ToolsPanelItem & {
+	/**
+	 * The item's `resetAllFilter`, collected at registration time so the panel
+	 * doesn't need a second round of effects to gather them.
+	 */
+	resetAllFilter?: ResetAllFilter;
+};
+
 export type ToolsPanelMenuItemKey = 'default' | 'optional';
 
 export type ToolsPanelMenuItems = {
@@ -170,13 +214,21 @@ export type ToolsPanelContext = {
 	panelId?: string | null;
 	menuItems: ToolsPanelMenuItems;
 	hasMenuItems: boolean;
-	registerPanelItem: ( item: ToolsPanelItem ) => void;
-	deregisterPanelItem: ( label: string ) => void;
+	registerPanelItem: ( item: RegisteredToolsPanelItem ) => void;
+	deregisterPanelItem: (
+		label: string,
+		item?: RegisteredToolsPanelItem
+	) => void;
 	registerResetAllFilter: ( filter: ResetAllFilter ) => void;
 	deregisterResetAllFilter: ( filter: ResetAllFilter ) => void;
 	flagItemCustomization: (
 		value: boolean,
 		label: string,
+		/**
+		 * Ignored, and kept only so that existing three argument callers
+		 * still typecheck. The group a value lands in now follows from the
+		 * registered item's `isShownByDefault` rather than from the caller.
+		 */
 		group?: ToolsPanelMenuItemKey
 	) => void;
 	isResetting: boolean;
@@ -193,10 +245,3 @@ export type ToolsPanelControlsGroupProps = {
 	items: [ string, boolean ][];
 	toggleItem: ( label: string ) => void;
 };
-
-export type ToolsPanelMenuItemsConfig = {
-	panelItems: ToolsPanelItem[];
-	shouldReset: boolean;
-	currentMenuItems?: ToolsPanelMenuItems;
-	menuItemOrder: string[];
-};

package/src/tooltip/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,8 +1,10 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { press, hover, click, sleep } from '@ariakit/test';
 import { shortcutAriaLabel } from '@wordpress/keycodes';
 import Modal from '../../modal';
 import Tooltip, { TOOLTIP_DELAY } from '..';
+globalThis.wpVitest.mockMatchMedia();
 
 const props = {
 	children: <button>Tooltip anchor</button>,
@@ -315,8 +317,8 @@ describe( 'Tooltip', () => {
 		}, 10_000 );
 
 		it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
-			const onMouseEnterMock = jest.fn();
-			const onMouseLeaveMock = jest.fn();
+			const onMouseEnterMock = vi.fn();
+			const onMouseLeaveMock = vi.fn();
 			const HOVER_OUTSIDE_ANTICIPATION = 200;
 
 			render(
@@ -417,7 +419,7 @@ describe( 'Tooltip', () => {
 
 	describe( 'event propagation', () => {
 		it( 'should close the parent dialog component when pressing the Escape key while the tooltip is visible', async () => {
-			const onRequestClose = jest.fn();
+			const onRequestClose = vi.fn();
 			render(
 				<Modal onRequestClose={ onRequestClose }>
 					<p>Modal content</p>

package/src/tree-grid/cell.tsx

@@ -1,7 +1,8 @@
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useRef } from '@wordpress/element';
 import TreeGridItem from './item';
 import type { WordPressComponentProps } from '../context';
 import type { TreeGridCellProps } from './types';
+import { useValidateTreeGridStructure } from './use-validate-tree-grid-structure';
 
 function UnforwardedTreeGridCell(
 	{
@@ -11,8 +12,11 @@ function UnforwardedTreeGridCell(
 	}: WordPressComponentProps< TreeGridCellProps, 'td', false >,
 	ref: React.ForwardedRef< any >
 ) {
+	const cellRef = useRef< HTMLTableCellElement >( null );
+	useValidateTreeGridStructure( 'TreeGridCell', cellRef );
+
 	return (
-		<td { ...props } role="gridcell">
+		<td ref={ cellRef } { ...props } role="gridcell">
 			{ withoutGridItem ? (
 				<>
 					{ typeof children === 'function'

package/src/tree-grid/roving-tab-index-item.tsx

@@ -9,9 +9,13 @@ export const RovingTabIndexItem = forwardRef(
 	) {
 		const localRef = useRef< any >( null );
 		const ref = forwardedRef || localRef;
-		// @ts-expect-error - We actually want to throw an error if this is undefined.
-		const { lastFocusedElement, setLastFocusedElement } =
-			useRovingTabIndexContext();
+		const context = useRovingTabIndexContext();
+		if ( ! context ) {
+			throw new Error(
+				'TreeGridItem can only be rendered inside a TreeGrid component.'
+			);
+		}
+		const { lastFocusedElement, setLastFocusedElement } = context;
 		let tabIndex;
 
 		if ( lastFocusedElement ) {

package/src/tree-grid/row.tsx

@@ -1,6 +1,8 @@
-import { forwardRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
 import type { TreeGridRowProps } from './types';
+import { useValidateTreeGridStructure } from './use-validate-tree-grid-structure';
 
 function UnforwardedTreeGridRow(
 	{
@@ -13,10 +15,14 @@ function UnforwardedTreeGridRow(
 	}: WordPressComponentProps< TreeGridRowProps, 'tr', false >,
 	ref: React.ForwardedRef< HTMLTableRowElement >
 ) {
+	const rowRef = useRef< HTMLTableRowElement >( null );
+	const refs = useMergeRefs( [ rowRef, ref ] );
+	useValidateTreeGridStructure( 'TreeGridRow', rowRef );
+
 	return (
 		<tr
 			{ ...props }
-			ref={ ref }
+			ref={ refs }
 			role="row"
 			aria-level={ level }
 			aria-posinset={ positionInSet }

package/src/tree-grid/test/__snapshots__/{cell.tsx.snap → cell.jsdom.test.tsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`TreeGridCell uses a child render function to render children 1`] = `
+exports[`TreeGridCell > uses a child render function to render children 1`] = `
 <div>
   <div
     role="application"

package/src/tree-grid/test/__snapshots__/index.jsdom.test.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TreeGrid > simple rendering > renders a table, tbody and any child elements 1`] = `"<div role="application"><table role="treegrid"><tbody><tr role="row" aria-level="1" aria-posinset="1" aria-setsize="1"><td role="gridcell">Test</td></tr></tbody></table></div>"`;

package/src/tree-grid/test/__snapshots__/roving-tab-index-item.jsdom.test.tsx.snap

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RovingTabIndexItem > allows another component to be specified as the rendered component using the \`as\` prop 1`] = `
+<div>
+  <button />
+</div>
+`;
+
+exports[`RovingTabIndexItem > allows children to be declared using a child render function as an alternative to \`as\` 1`] = `
+<div>
+  <button
+    class="my-button"
+  >
+    Click Me!
+  </button>
+</div>
+`;
+
+exports[`RovingTabIndexItem > forwards props to the \`as\` component 1`] = `
+<div>
+  <button
+    class="my-button"
+  >
+    Click Me!
+  </button>
+</div>
+`;

package/src/tree-grid/test/__snapshots__/roving-tab-index.jsdom.test.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RovingTabIndex > does not render any elements other than its children 1`] = `
+<div>
+  <div>
+    child element
+  </div>
+</div>
+`;

package/src/tree-grid/test/__snapshots__/{row.tsx.snap → row.jsdom.test.tsx.snap}

@@ -1,8 +1,10 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`TreeGridRow forwards other props to the rendered tr element 1`] = `
+exports[`TreeGridRow > forwards other props to the rendered tr element 1`] = `
 <div>
-  <table>
+  <table
+    role="treegrid"
+  >
     <tbody>
       <tr
         aria-level="1"
@@ -20,9 +22,11 @@ exports[`TreeGridRow forwards other props to the rendered tr element 1`] = `
 </div>
 `;
 
-exports[`TreeGridRow renders a tr with support for level, positionInSet and setSize props 1`] = `
+exports[`TreeGridRow > renders a tr with support for level, positionInSet and setSize props 1`] = `
 <div>
-  <table>
+  <table
+    role="treegrid"
+  >
     <tbody>
       <tr
         aria-level="1"

package/src/tree-grid/test/cell.jsdom.test.tsx

@@ -0,0 +1,149 @@
+import { describe, expect, it } from 'vitest';
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+import { render, screen } from '@testing-library/react';
+import { createPortal, forwardRef, useId } from '@wordpress/element';
+import TreeGrid from '..';
+import TreeGridCell from '../cell';
+import TreeGridRow from '../row';
+
+const TestButton = forwardRef(
+	(
+		{ ...props }: React.ComponentPropsWithoutRef< 'button' >,
+		ref: React.ForwardedRef< HTMLButtonElement >
+	) => <button { ...props } ref={ ref }></button>
+);
+
+describe( 'TreeGridCell', () => {
+	it( 'throws outside a treegrid', () => {
+		expect( () =>
+			render(
+				<table>
+					<tbody>
+						<tr>
+							<TreeGridCell withoutGridItem>Test</TreeGridCell>
+						</tr>
+					</tbody>
+				</table>
+			)
+		).toThrow(
+			'TreeGridCell must be rendered as a cell in a row that belongs to an element with role="treegrid".'
+		);
+		expect( console ).toHaveErrored();
+	} );
+
+	it( 'supports a custom semantic treegrid structure without a TreeGrid parent', () => {
+		render(
+			<table role="treegrid">
+				<tbody>
+					<tr>
+						<TreeGridCell withoutGridItem>Test</TreeGridCell>
+					</tr>
+				</tbody>
+			</table>
+		);
+
+		expect( screen.getByRole( 'gridcell' ) ).toHaveTextContent( 'Test' );
+	} );
+
+	it( 'accepts a cell explicitly owned by a valid treegrid row', () => {
+		const portalTable = document.createElement( 'table' );
+		const portalBody = document.createElement( 'tbody' );
+		const portalRow = document.createElement( 'tr' );
+		portalRow.setAttribute( 'role', 'presentation' );
+		portalBody.append( portalRow );
+		portalTable.append( portalBody );
+		document.body.append( portalTable );
+
+		function AriaOwnedCell() {
+			const cellId = useId();
+
+			return (
+				<TreeGrid>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 1 }
+						setSize={ 1 }
+						aria-owns={ cellId }
+					>
+						{ createPortal(
+							<TreeGridCell id={ cellId } withoutGridItem>
+								Test
+							</TreeGridCell>,
+							portalRow
+						) }
+					</TreeGridRow>
+				</TreeGrid>
+			);
+		}
+
+		try {
+			render( <AriaOwnedCell /> );
+
+			expect( screen.getByRole( 'gridcell' ) ).toHaveTextContent(
+				'Test'
+			);
+		} finally {
+			portalTable.remove();
+		}
+	} );
+
+	it( 'accepts a cell inside a wrapper explicitly owned by a valid treegrid row', () => {
+		const portalTable = document.createElement( 'table' );
+		const portalBody = document.createElement( 'tbody' );
+		portalTable.append( portalBody );
+		document.body.append( portalTable );
+
+		function AriaOwnedCellWrapper() {
+			const wrapperId = useId();
+
+			return (
+				<TreeGrid>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 1 }
+						setSize={ 1 }
+						aria-owns={ wrapperId }
+					>
+						{ createPortal(
+							<tr id={ wrapperId } role="presentation">
+								<TreeGridCell withoutGridItem>
+									Test
+								</TreeGridCell>
+							</tr>,
+							portalBody
+						) }
+					</TreeGridRow>
+				</TreeGrid>
+			);
+		}
+
+		try {
+			render( <AriaOwnedCellWrapper /> );
+
+			expect( screen.getByRole( 'gridcell' ) ).toHaveTextContent(
+				'Test'
+			);
+		} finally {
+			portalTable.remove();
+		}
+	} );
+
+	it( 'uses a child render function to render children', () => {
+		const { container } = render(
+			<TreeGrid>
+				<tr>
+					<TreeGridCell>
+						{ ( props ) => (
+							<TestButton className="my-button" { ...props }>
+								Click Me!
+							</TestButton>
+						) }
+					</TreeGridCell>
+				</tr>
+			</TreeGrid>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );
+/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */