Update ariakit to version 0.3.5 (#55365)

* Update @ariakit/react to version 0.3.5 * Fix Tabs max call stack loop, improve unit tests * Tooltip: use unmountOnHide instead of custom logic * CHANGELOG * Update togglegroupcontrol snapshots
WordPress · Oct 19, 2023 · 274fe00 · 274fe00
1 parent 7b8cb73
commit 274fe00
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 70 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -21,6 +21,7 @@
 
 ### Internal
 
+-   Update `@ariakit/react` to version `0.3.5` ([#55365](https://github.com/WordPress/gutenberg/pull/55365))
 -   `ConfirmDialog`: Migrate to TypeScript. ([#54954](https://github.com/WordPress/gutenberg/pull/54954)).
 
 ### New Features

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -30,7 +30,7 @@
 	],
 	"types": "build-types",
 	"dependencies": {
-		"@ariakit/react": "^0.3.3",
+		"@ariakit/react": "^0.3.5",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",

diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
@@ -8,7 +8,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useLayoutEffect, useRef } from '@wordpress/element';
+import { useLayoutEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -104,7 +104,7 @@ function Tabs( {
 	] );
 
 	// Handle the currently selected tab becoming disabled.
-	useEffect( () => {
+	useLayoutEffect( () => {
 		if ( ! selectedTab?.dimmed ) {
 			return;
 		}
@@ -136,7 +136,7 @@ function Tabs( {
 	] );
 
 	// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.
-	useEffect( () => {
+	useLayoutEffect( () => {
 		if ( ! isControlled ) {
 			return;
 		}

diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx
@@ -471,10 +471,13 @@ describe( 'Tabs', () => {
 
 			// Because all other tabs should have `tabindex=-1`, pressing Tab
 			// should NOT move the focus to the next tab, which is Beta.
+			// Instead, focus should go to the currently selected tabpanel (alpha).
 			await user.keyboard( '[Tab]' );
 			expect(
-				await screen.findByRole( 'tab', { name: 'Beta' } )
-			).not.toHaveFocus();
+				await screen.findByRole( 'tabpanel', {
+					name: 'Alpha',
+				} )
+			).toHaveFocus();
 		} );
 
 		it( 'switches to manual tab activation when the `selectOnMove` prop is set to `false`', async () => {
@@ -497,6 +500,9 @@ describe( 'Tabs', () => {
 			// Click on Alpha and make sure it is selected.
 			// onSelect shouldn't fire since the selected tab didn't change.
 			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+			expect(
+				await screen.findByRole( 'tab', { name: 'Alpha' } )
+			).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
@@ -505,10 +511,10 @@ describe( 'Tabs', () => {
 			// or enter key. onSelect shouldn't fire since the selected tab
 			// didn't change.
 			await user.keyboard( '[ArrowRight]' );
-			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 			expect(
 				await screen.findByRole( 'tab', { name: 'Beta' } )
 			).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 
 			await user.keyboard( '[Enter]' );
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
@@ -519,6 +525,9 @@ describe( 'Tabs', () => {
 			// spacebar or enter key. onSelect shouldn't fire since the selected
 			// tab didn't change.
 			await user.keyboard( '[ArrowRight]' );
+			expect(
+				await screen.findByRole( 'tab', { name: 'Gamma' } )
+			).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
 			expect(
 				screen.getByRole( 'tab', { name: 'Gamma' } )

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -256,6 +256,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             id="toggle-group-control-as-radio-group-8-20"
             role="radio"
             type="button"
+            value="uppercase"
           >
             <div
               class="emotion-13 emotion-14"
@@ -294,6 +295,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             id="toggle-group-control-as-radio-group-8-21"
             role="radio"
             type="button"
+            value="lowercase"
           >
             <div
               class="emotion-13 emotion-14"
@@ -503,6 +505,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             id="toggle-group-control-as-radio-group-7-18"
             role="radio"
             type="button"
+            value="rigas"
           >
             <div
               class="emotion-13 emotion-14"
@@ -525,6 +528,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             id="toggle-group-control-as-radio-group-7-19"
             role="radio"
             type="button"
+            value="jack"
           >
             <div
               class="emotion-13 emotion-14"
@@ -801,6 +805,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             id="toggle-group-control-as-radio-group-1-2"
             role="radio"
             type="button"
+            value="uppercase"
           >
             <div
               class="emotion-13 emotion-14"
@@ -839,6 +844,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             id="toggle-group-control-as-radio-group-1-3"
             role="radio"
             type="button"
+            value="lowercase"
           >
             <div
               class="emotion-13 emotion-14"
@@ -1042,6 +1048,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             id="toggle-group-control-as-radio-group-0-0"
             role="radio"
             type="button"
+            value="rigas"
           >
             <div
               class="emotion-13 emotion-14"
@@ -1064,6 +1071,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             id="toggle-group-control-as-radio-group-0-1"
             role="radio"
             type="button"
+            value="jack"
           >
             <div
               class="emotion-13 emotion-14"

diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
@@ -69,8 +69,6 @@ function Tooltip( props: TooltipProps ) {
 		timeout: delay,
 	} );
 
-	const isTooltipOpen = tooltipStore.useState( 'open' );
-
 	return (
 		<>
 			<Ariakit.TooltipAnchor
@@ -80,8 +78,9 @@ function Tooltip( props: TooltipProps ) {
 			>
 				{ isOnlyChild ? undefined : children }
 			</Ariakit.TooltipAnchor>
-			{ isOnlyChild && ( text || shortcut ) && isTooltipOpen && (
+			{ isOnlyChild && ( text || shortcut ) && (
 				<Ariakit.Tooltip
+					unmountOnHide
 					className="components-tooltip"
 					gutter={ 4 }
 					id={ describedById }