refactor(react): remove circular dependencies (#4236)

* refactor(react): remove circular references

* refactor(bundle): throw error when circular dependency is detected

* chore: add changeset

* chore: fix toolbarbutton import

* chore: fix eslint warnings

---------

Co-authored-by: Josh Black <[email protected]>

Author: joshblack

.changeset/sharp-starfishes-battle.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Refactor project to avoid circular dependencies

packages/react/rollup.config.js

@@ -219,6 +219,10 @@ const baseConfig = {
       return
     }
 
+    if (warning.code === 'CIRCULAR_DEPENDENCY') {
+      throw warning
+    }
+
     defaultHandler(warning)
   },
 }

packages/react/src/ActionList/Group.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {useId} from '../hooks/useId'
 import Box from '../Box'
 import {SxProp, BetterSystemStyleObject, merge} from '../sx'
-import {ListContext, ActionListProps} from './List'
+import {ListContext, type ActionListProps} from './shared'
 import {AriaRole} from '../utils/types'
 import {default as Heading} from '../Heading'
 import type {ActionListHeadingProps} from './Heading'

packages/react/src/ActionList/Heading.tsx

@@ -4,7 +4,7 @@ import {defaultSxProp} from '../utils/defaultSxProp'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {default as HeadingComponent} from '../Heading'
-import {ListContext} from './List'
+import {ListContext} from './shared'
 import VisuallyHidden from '../_VisuallyHidden'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {invariant} from '../utils/invariant'

packages/react/src/ActionList/Item.tsx

@@ -12,7 +12,7 @@ import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/po
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {Description} from './Description'
 import {GroupContext} from './Group'
-import {ActionListProps, ListContext} from './List'
+import {type ActionListProps, ListContext} from './shared'
 import {Selection} from './Selection'
 import {ActionListItemProps, getVariantStyles, ItemContext, TEXT_ROW_HEIGHT} from './shared'
 import {LeadingVisual, TrailingVisual, VisualProps} from './Visuals'

packages/react/src/ActionList/LinkItem.tsx

@@ -4,7 +4,7 @@ import Link from '../Link'
 import {SxProp, merge} from '../sx'
 import {Item} from './Item'
 import {ActionListItemProps} from './shared'
-import {Box} from '..'
+import Box from '../Box'
 
 // adopted from React.AnchorHTMLAttributes
 type LinkProps = {

packages/react/src/ActionList/List.tsx

@@ -2,38 +2,12 @@ import React from 'react'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import styled from 'styled-components'
 import sx, {SxProp, merge} from '../sx'
-import {AriaRole} from '../utils/types'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {useSlots} from '../hooks/useSlots'
 import {Heading} from './Heading'
 import {useId} from '../hooks/useId'
-
-export type ActionListProps = React.PropsWithChildren<{
-  /**
-   * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
-   */
-  variant?: 'inset' | 'full'
-  /**
-   * Whether multiple Items or a single Item can be selected.
-   */
-  selectionVariant?: 'single' | 'multiple'
-  /**
-   * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
-   */
-  showDividers?: boolean
-  /**
-   * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
-   */
-  role?: AriaRole
-}> &
-  SxProp
-
-type ContextProps = Pick<ActionListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'> & {
-  headingId?: string
-}
-
-export const ListContext = React.createContext<ContextProps>({})
+import {ListContext, type ActionListProps} from './shared'
 
 const ListBox = styled.ul<SxProp>(sx)
 

packages/react/src/ActionList/Selection.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import {CheckIcon} from '@primer/octicons-react'
-import {ListContext, ActionListProps} from './List'
 import {GroupContext, ActionListGroupProps} from './Group'
-import {ActionListItemProps} from './shared'
+import {type ActionListProps, type ActionListItemProps, ListContext} from './shared'
 import {LeadingVisualContainer} from './Visuals'
 import Box from '../Box'
 

packages/react/src/ActionList/index.ts

@@ -7,7 +7,7 @@ import {Description} from './Description'
 import {LeadingVisual, TrailingVisual} from './Visuals'
 import {Heading} from './Heading'
 
-export type {ActionListProps} from './List'
+export type {ActionListProps} from './shared'
 export type {ActionListGroupProps} from './Group'
 export type {ActionListItemProps} from './shared'
 export type {ActionListLinkItemProps} from './LinkItem'

packages/react/src/ActionList/shared.ts

@@ -108,3 +108,29 @@ export const getVariantStyles = (
 }
 
 export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
+
+export type ActionListProps = React.PropsWithChildren<{
+  /**
+   * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
+   */
+  variant?: 'inset' | 'full'
+  /**
+   * Whether multiple Items or a single Item can be selected.
+   */
+  selectionVariant?: 'single' | 'multiple'
+  /**
+   * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
+   */
+  showDividers?: boolean
+  /**
+   * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
+   */
+  role?: AriaRole
+}> &
+  SxProp
+
+type ContextProps = Pick<ActionListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'> & {
+  headingId?: string
+}
+
+export const ListContext = React.createContext<ContextProps>({})