Allow ariakit and framer motion imports in the components package

.eslintrc.js

@@ -420,6 +420,26 @@ module.exports = {
 			plugins: [ 'ssr-friendly' ],
 			extends: [ 'plugin:ssr-friendly/recommended' ],
 		},
+		{
+			files: [ 'packages/components/src/**' ],
+			rules: {
+				'no-restricted-imports': [
+					'error',
+					// The `ariakit` and `framer-motion` APIs are meant to be consumed via
+					// the `@wordpress/components` package, hence why importing those
+					// dependencies should be allowed in the components package.
+					{
+						paths: restrictedImports.filter(
+							( { name } ) =>
+								! [
+									'@ariakit/react',
+									'framer-motion',
+								].includes( name )
+						),
+					},
+				],
+			},
+		},
 		{
 			files: [ 'packages/block-editor/**' ],
 			rules: {

packages/components/CHANGELOG.md

@@ -16,6 +16,7 @@
 
 ### Internal
 
+-   `Allow ariakit and framer motion imports in the components package. ([#63123](https://github.com/WordPress/gutenberg/pull/63123))
 -   `CustomSelectControlV2`: prevent keyboard event propagation in legacy wrapper. ([#62907](https://github.com/WordPress/gutenberg/pull/62907))
 -   `CustomSelectControlV2`: expose legacy wrapper through private APIs. ([#62936](https://github.com/WordPress/gutenberg/pull/62936))
 -   `CustomSelectControlV2`: fix item styles ([#62825](https://github.com/WordPress/gutenberg/pull/62825))

packages/components/src/animation/index.tsx

@@ -6,7 +6,6 @@
  * @see https://www.framer.com/docs/animation/
  */
 
-// eslint-disable-next-line no-restricted-imports
 export {
 	motion as __unstableMotion,
 	AnimatePresence as __unstableAnimatePresence,

packages/components/src/composite/current/index.ts

@@ -8,7 +8,6 @@
  * @see https://ariakit.org/components/composite
  */
 
-/* eslint-disable-next-line no-restricted-imports */
 export {
 	Composite,
 	CompositeGroup,
@@ -18,5 +17,4 @@ export {
 	useCompositeStore,
 } from '@ariakit/react';
 
-/* eslint-disable-next-line no-restricted-imports */
 export type { CompositeStore, CompositeStoreProps } from '@ariakit/react';

packages/components/src/custom-select-control-v2/default-component/index.tsx

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

packages/components/src/custom-select-control-v2/legacy-component/index.tsx

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

packages/components/src/custom-select-control-v2/styles.ts

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

packages/components/src/custom-select-control-v2/types.ts

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

packages/components/src/disclosure/index.tsx

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

packages/components/src/divider/component.tsx

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

packages/components/src/divider/types.ts

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

packages/components/src/dropdown-menu-v2/index.tsx

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

packages/components/src/dropdown-menu-v2/styles.ts

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

packages/components/src/dropdown-menu-v2/types.ts

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

packages/components/src/popover/index.tsx

@@ -13,9 +13,7 @@ import {
 	offset as offsetMiddleware,
 	size,
 } from '@floating-ui/react-dom';
-// eslint-disable-next-line no-restricted-imports
 import type { HTMLMotionProps, MotionProps } from 'framer-motion';
-// eslint-disable-next-line no-restricted-imports
 import { motion } from 'framer-motion';
 
 /**

packages/components/src/popover/utils.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { MotionProps } from 'framer-motion';
 import type { Placement, ReferenceType } from '@floating-ui/react-dom';
 

packages/components/src/radio-group/context.tsx

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

packages/components/src/radio-group/index.tsx

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

packages/components/src/radio-group/radio.tsx

@@ -6,7 +6,6 @@ import { forwardRef, useContext } from '@wordpress/element';
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

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

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

packages/components/src/tabs/index.tsx

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

packages/components/src/tabs/styles.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

packages/components/src/tabs/tablist.tsx

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

packages/components/src/tabs/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
 
 export type TabsContextProps =

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

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

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

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

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
 import { LayoutGroup } from 'framer-motion';
 
 /**

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

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

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

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

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

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

packages/components/src/tooltip/index.tsx

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