From 274fe0050badf47f8d10dc881c0255303621ae2e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 19 Oct 2023 12:01:50 +0200 Subject: [PATCH] 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 --- package-lock.json | 120 +++++++++--------- packages/components/CHANGELOG.md | 1 + packages/components/package.json | 2 +- packages/components/src/tabs/index.tsx | 6 +- packages/components/src/tabs/test/index.tsx | 15 ++- .../test/__snapshots__/index.tsx.snap | 8 ++ packages/components/src/tooltip/index.tsx | 5 +- 7 files changed, 87 insertions(+), 70 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4987c088829b7..9f394be2011ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -326,6 +326,41 @@ "node": ">=6.0.0" } }, + "node_modules/@ariakit/core": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.4.tgz", + "integrity": "sha512-mMTWYOs0SvkrBbLPy4IY15E+fgvSbZKg4XzpBwE17meBG+G7wJjnuHq8lNiIAn9VnQBIc/lsXxqH3FCD7hHaUg==" + }, + "node_modules/@ariakit/react": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.5.tgz", + "integrity": "sha512-x7LfGP0on0lVV1NcDNO8+aEBb64sUI6YYB1akEWXkb4lTiU4uG1sHGc8YhfHVh0cFS1kwpQcqyiNPzyB8OgymA==", + "dependencies": { + "@ariakit/react-core": "0.3.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/ariakit" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@ariakit/react-core": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.5.tgz", + "integrity": "sha512-TdQmUj7BPJ7QWjpjlpP5M1YbANDQL/voYYvKq1Hele7uoEWk51v2nZNaNXo9DZ4He/bkG99ISDx5Tgkzi5En8Q==", + "dependencies": { + "@ariakit/core": "0.3.4", + "@floating-ui/dom": "^1.0.0", + "use-sync-external-store": "^1.2.0" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@aw-web-design/x-default-browser": { "version": "1.4.126", "resolved": "https://registry.npmjs.org/@aw-web-design/x-default-browser/-/x-default-browser-1.4.126.tgz", @@ -56206,7 +56241,7 @@ "version": "25.10.0", "license": "GPL-2.0-or-later", "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", @@ -56266,41 +56301,6 @@ "react-dom": "^18.0.0" } }, - "packages/components/node_modules/@ariakit/core": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.2.tgz", - "integrity": "sha512-hTiYCMsezqOH1y1KNNbRv58oQvbxAZlbYPhFG0XbTHd+tJQkHgtpezLBbJc4U/YjnhA95EAS6Zfa2xwj+EEbKg==" - }, - "packages/components/node_modules/@ariakit/react": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.3.tgz", - "integrity": "sha512-MdwdbxuII4SpOz/noRoE5m9ZAFRqGmHqNi9a7FDCmaGP0JNE36G8aFwijvBkh3CrRKL65+AHxZIUmkJUztijFQ==", - "dependencies": { - "@ariakit/react-core": "0.3.3" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/ariakit" - }, - "peerDependencies": { - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - } - }, - "packages/components/node_modules/@ariakit/react-core": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.3.tgz", - "integrity": "sha512-ca2NbUNRrBoLpLMiTnGDivoHzXKH25QWcNEmO6Sm5bctL0LOSGvm9bU7tBn6nD+bZNk8yXV1YnNtKba/retENA==", - "dependencies": { - "@ariakit/core": "0.3.2", - "@floating-ui/dom": "^1.0.0", - "use-sync-external-store": "^1.2.0" - }, - "peerDependencies": { - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - } - }, "packages/components/node_modules/@floating-ui/react-dom": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz", @@ -58196,6 +58196,29 @@ "@jridgewell/trace-mapping": "^0.3.9" } }, + "@ariakit/core": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.4.tgz", + "integrity": "sha512-mMTWYOs0SvkrBbLPy4IY15E+fgvSbZKg4XzpBwE17meBG+G7wJjnuHq8lNiIAn9VnQBIc/lsXxqH3FCD7hHaUg==" + }, + "@ariakit/react": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.5.tgz", + "integrity": "sha512-x7LfGP0on0lVV1NcDNO8+aEBb64sUI6YYB1akEWXkb4lTiU4uG1sHGc8YhfHVh0cFS1kwpQcqyiNPzyB8OgymA==", + "requires": { + "@ariakit/react-core": "0.3.5" + } + }, + "@ariakit/react-core": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.5.tgz", + "integrity": "sha512-TdQmUj7BPJ7QWjpjlpP5M1YbANDQL/voYYvKq1Hele7uoEWk51v2nZNaNXo9DZ4He/bkG99ISDx5Tgkzi5En8Q==", + "requires": { + "@ariakit/core": "0.3.4", + "@floating-ui/dom": "^1.0.0", + "use-sync-external-store": "^1.2.0" + } + }, "@aw-web-design/x-default-browser": { "version": "1.4.126", "resolved": "https://registry.npmjs.org/@aw-web-design/x-default-browser/-/x-default-browser-1.4.126.tgz", @@ -69562,7 +69585,7 @@ "@wordpress/components": { "version": "file:packages/components", "requires": { - "@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", @@ -69615,29 +69638,6 @@ "valtio": "1.7.0" }, "dependencies": { - "@ariakit/core": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.2.tgz", - "integrity": "sha512-hTiYCMsezqOH1y1KNNbRv58oQvbxAZlbYPhFG0XbTHd+tJQkHgtpezLBbJc4U/YjnhA95EAS6Zfa2xwj+EEbKg==" - }, - "@ariakit/react": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.3.tgz", - "integrity": "sha512-MdwdbxuII4SpOz/noRoE5m9ZAFRqGmHqNi9a7FDCmaGP0JNE36G8aFwijvBkh3CrRKL65+AHxZIUmkJUztijFQ==", - "requires": { - "@ariakit/react-core": "0.3.3" - } - }, - "@ariakit/react-core": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.3.tgz", - "integrity": "sha512-ca2NbUNRrBoLpLMiTnGDivoHzXKH25QWcNEmO6Sm5bctL0LOSGvm9bU7tBn6nD+bZNk8yXV1YnNtKba/retENA==", - "requires": { - "@ariakit/core": "0.3.2", - "@floating-ui/dom": "^1.0.0", - "use-sync-external-store": "^1.2.0" - } - }, "@floating-ui/react-dom": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 3b467cf083e3f..595f085648c42 100644 --- 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 index 969bcc6300873..c25356b70cadb 100644 --- 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 index 54f547ad2f52d..59eb83f524059 100644 --- 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 index 1b437966239a0..a89e680e244d8 100644 --- 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 index fcbc3f56a36cc..91cd85dc80e75 100644 --- 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" >