Update @ariakit/react to 0.4.13 (#65907)

* Remove all ariakit dependencies * Re-add ariakit dependencies targeting latest version * Remove focus-visible DropdownMenuV2 workaround * Remove composite tabbable workaround * CHANGELOG * Remove Tabs workaround --- Co-authored-by: ciampo <[email protected]> Co-authored-by: oandregal <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: diegohaz <[email protected]> Co-authored-by: jsnajdr <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Dec 5, 2024 · 281bbae · 281bbae
1 parent d7f9367
commit 281bbae
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 109 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
 		"@actions/core": "1.9.1",
 		"@actions/github": "5.0.0",
 		"@apidevtools/json-schema-ref-parser": "11.6.4",
-		"@ariakit/test": "^0.4.2",
+		"@ariakit/test": "^0.4.5",
 		"@babel/core": "7.25.7",
 		"@babel/plugin-syntax-jsx": "7.25.7",
 		"@babel/runtime-corejs3": "7.25.7",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Upgraded `@ariakit/react` (v0.4.13) and `@ariakit/test` (v0.4.5) ([#65907](https://github.com/WordPress/gutenberg/pull/65907)).
+
 ## 28.13.0 (2024-11-27)
 
 ### Deprecations
@@ -11,7 +15,7 @@
 -   `FontSizePicker`: Deprecate 36px default size ([#66920](https://github.com/WordPress/gutenberg/pull/66920)).
 -   `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)).
 -   `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)).
--   `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)). 
+-   `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)).
 
 ### Bug Fixes
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -32,7 +32,7 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@ariakit/react": "^0.4.10",
+		"@ariakit/react": "^0.4.13",
 		"@babel/runtime": "7.25.7",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",

diff --git a/packages/components/src/composite/item.tsx b/packages/components/src/composite/item.tsx
@@ -26,23 +26,5 @@ export const CompositeItem = forwardRef<
 	// obfuscated to discourage its use outside of the component's internals.
 	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
 
-	// If the active item is not connected, Composite may end up in a state
-	// where none of the items are tabbable. In this case, we force all items to
-	// be tabbable, so that as soon as an item received focus, it becomes active
-	// and Composite goes back to working as expected.
-	const tabbable = Ariakit.useStoreState( store, ( state ) => {
-		return (
-			state?.activeId !== null &&
-			! store?.item( state?.activeId )?.element?.isConnected
-		);
-	} );
-
-	return (
-		<Ariakit.CompositeItem
-			store={ store }
-			tabbable={ tabbable }
-			{ ...props }
-			ref={ ref }
-		/>
-	);
+	return <Ariakit.CompositeItem store={ store } { ...props } ref={ ref } />;
 } );
diff --git a/packages/components/src/menu/checkbox-item.tsx b/packages/components/src/menu/checkbox-item.tsx
@@ -16,24 +16,20 @@ import type { WordPressComponentProps } from '../context';
 import { MenuContext } from './context';
 import type { MenuCheckboxItemProps } from './types';
 import * as Styled from './styles';
-import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
 
 export const MenuCheckboxItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< MenuCheckboxItemProps, 'div', false >
 >( function MenuCheckboxItem(
-	{ suffix, children, onBlur, hideOnClick = false, ...props },
+	{ suffix, children, hideOnClick = false, ...props },
 	ref
 ) {
-	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
-	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
 	const menuContext = useContext( MenuContext );
 
 	return (
 		<Styled.MenuCheckboxItem
 			ref={ ref }
 			{ ...props }
-			{ ...focusVisibleFixProps }
 			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ menuContext?.store }

diff --git a/packages/components/src/menu/item.tsx b/packages/components/src/menu/item.tsx
@@ -10,24 +10,20 @@ import type { WordPressComponentProps } from '../context';
 import type { MenuItemProps } from './types';
 import * as Styled from './styles';
 import { MenuContext } from './context';
-import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
 
 export const MenuItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< MenuItemProps, 'div', false >
 >( function MenuItem(
-	{ prefix, suffix, children, onBlur, hideOnClick = true, ...props },
+	{ prefix, suffix, children, hideOnClick = true, ...props },
 	ref
 ) {
-	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
-	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
 	const menuContext = useContext( MenuContext );
 
 	return (
 		<Styled.MenuItem
 			ref={ ref }
 			{ ...props }
-			{ ...focusVisibleFixProps }
 			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ menuContext?.store }

diff --git a/packages/components/src/menu/radio-item.tsx b/packages/components/src/menu/radio-item.tsx
@@ -17,7 +17,6 @@ import { MenuContext } from './context';
 import type { MenuRadioItemProps } from './types';
 import * as Styled from './styles';
 import { SVG, Circle } from '@wordpress/primitives';
-import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
 
 const radioCheck = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -29,18 +28,15 @@ export const MenuRadioItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< MenuRadioItemProps, 'div', false >
 >( function MenuRadioItem(
-	{ suffix, children, onBlur, hideOnClick = false, ...props },
+	{ suffix, children, hideOnClick = false, ...props },
 	ref
 ) {
-	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
-	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
 	const menuContext = useContext( MenuContext );
 
 	return (
 		<Styled.MenuRadioItem
 			ref={ ref }
 			{ ...props }
-			{ ...focusVisibleFixProps }
 			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ menuContext?.store }

diff --git a/packages/components/src/menu/use-temporary-focus-visible-fix.ts b/packages/components/src/menu/use-temporary-focus-visible-fix.ts
diff --git a/packages/components/src/tabs/tab.tsx b/packages/components/src/tabs/tab.tsx
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import * as Ariakit from '@ariakit/react';
-
 /**
  * WordPress dependencies
  */
@@ -29,18 +24,6 @@ export const Tab = forwardRef<
 >( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {
 	const { store, instanceId } = useTabsContext() ?? {};
 
-	// If the active item is not connected, the tablist may end up in a state
-	// where none of the tabs are tabbable. In this case, we force all tabs to
-	// be tabbable, so that as soon as an item received focus, it becomes active
-	// and Tablist goes back to working as expected.
-	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-	const tabbable = Ariakit.useStoreState( store, ( state ) => {
-		return (
-			state?.activeId !== null &&
-			! store?.item( state?.activeId )?.element?.isConnected
-		);
-	} );
-
 	if ( ! store ) {
 		warning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );
 		return null;
@@ -55,7 +38,6 @@ export const Tab = forwardRef<
 			id={ instancedTabId }
 			disabled={ disabled }
 			render={ render }
-			tabbable={ tabbable }
 			{ ...otherProps }
 		>
 			<StyledTabChildren>{ children }</StyledTabChildren>

diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
@@ -43,7 +43,7 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@ariakit/react": "^0.4.10",
+		"@ariakit/react": "^0.4.13",
 		"@babel/runtime": "7.25.7",
 		"@wordpress/components": "*",
 		"@wordpress/compose": "*",