Follow ariakit best practices (#54696)

* Use `render` prop instead of `as` prop

* Auto format TypeScript

* Always import from `@ariakit/react` top-level package

* CHANGELOG

* Fix overlooked import

* Format

* Update ESLINT rules to disallow importing directly from ariakit

* Disable ESLINT when importing ariakit in the components package

.eslintrc.js

@@ -51,6 +51,11 @@ const restrictedImports = [
 		message:
 			'Please use Reakit API through `@wordpress/components` instead.',
 	},
+	{
+		name: '@ariakit/react',
+		message:
+			'Please use Ariakit API through `@wordpress/components` instead.',
+	},
 	{
 		name: 'redux',
 		importNames: [ 'combineReducers' ],

packages/components/CHANGELOG.md

@@ -14,6 +14,7 @@
 ### Internal
 
 -   `Tooltip`, `Shortcut`: Remove unused `ui/` components from the codebase ([#54573](https://github.com/WordPress/gutenberg/pull/54573))
+-   Refactor ariakit usages to use the `render` prop instead of `as` and to use the namespace import ([#54696](https://github.com/WordPress/gutenberg/pull/54696)).
 -   Update `uuid` package to 9.0.1 ([#54725](https://github.com/WordPress/gutenberg/pull/54725)).
 
 ## 25.8.0 (2023-09-20)

packages/components/src/tab-panel/index.tsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import classnames from 'classnames';
 import type { ForwardedRef } from 'react';

packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -3,7 +3,7 @@
  */
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { Radio } from '@ariakit/react/radio';
+import * as Ariakit from '@ariakit/react';
 // eslint-disable-next-line no-restricted-imports
 import { motion, useReducedMotion } from 'framer-motion';
 
@@ -140,7 +140,7 @@ function ToggleGroupControlOptionBase(
 						<ButtonContentView>{ children }</ButtonContentView>
 					</button>
 				) : (
-					<Radio
+					<Ariakit.Radio
 						render={
 							<button
 								{ ...commonProps }
@@ -154,7 +154,7 @@ function ToggleGroupControlOptionBase(
 						value={ value }
 					>
 						<ButtonContentView>{ children }</ButtonContentView>
-					</Radio>
+					</Ariakit.Radio>
 				) }
 			</WithToolTip>
 			{ /* Animated backdrop using framer motion's shared layout animation */ }

packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -3,7 +3,7 @@
  */
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { RadioGroup, useRadioStore } from '@ariakit/react/radio';
+import * as Ariakit from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -61,7 +61,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		  }
 		: undefined;
 
-	const radio = useRadioStore( {
+	const radio = Ariakit.useRadioStore( {
 		defaultValue,
 		value,
 		setValue: wrappedOnChangeProp,
@@ -84,16 +84,16 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 
 	return (
 		<ToggleGroupControlContext.Provider value={ groupContextValue }>
-			<RadioGroup
+			<Ariakit.RadioGroup
 				store={ radio }
 				aria-label={ label }
-				as={ View }
+				render={ <View /> }
 				{ ...otherProps }
 				id={ baseId }
 				ref={ forwardedRef }
 			>
 				{ children }
-			</RadioGroup>
+			</Ariakit.RadioGroup>
 		</ToggleGroupControlContext.Provider>
 	);
 }

packages/components/src/toolbar/toolbar-context/index.ts

@@ -1,13 +1,16 @@
 /**
  * External dependencies
  */
-import type { ToolbarStore } from '@ariakit/react/toolbar';
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
 import { createContext } from '@wordpress/element';
 
-const ToolbarContext = createContext< ToolbarStore | undefined >( undefined );
+const ToolbarContext = createContext< Ariakit.ToolbarStore | undefined >(
+	undefined
+);
 
 export default ToolbarContext;

packages/components/src/toolbar/toolbar-item/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { ToolbarItem as BaseToolbarItem } from '@ariakit/react/toolbar';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -48,7 +49,7 @@ function ToolbarItem(
 		: Component && <Component>{ children }</Component>;
 
 	return (
-		<BaseToolbarItem
+		<Ariakit.ToolbarItem
 			{ ...allProps }
 			store={ accessibleToolbarStore }
 			render={ render }

packages/components/src/toolbar/toolbar/toolbar-container.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { useToolbarStore, Toolbar } from '@ariakit/react/toolbar';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -21,15 +22,15 @@ function UnforwardedToolbarContainer(
 	{ label, ...props }: WordPressComponentProps< ToolbarProps, 'div', false >,
 	ref: ForwardedRef< any >
 ) {
-	const toolbarStore = useToolbarStore( {
+	const toolbarStore = Ariakit.useToolbarStore( {
 		focusLoop: true,
 		rtl: isRTL(),
 	} );
 
 	return (
 		// This will provide state for `ToolbarButton`'s
 		<ToolbarContext.Provider value={ toolbarStore }>
-			<Toolbar
+			<Ariakit.Toolbar
 				ref={ ref }
 				aria-label={ label }
 				store={ toolbarStore }

packages/components/src/tooltip/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import * as Ariakit from '@ariakit/react/tooltip';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
 
 /**
  * WordPress dependencies