refactor(react): remove circular dependencies

.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>({})

packages/react/src/LabelGroup/LabelGroup.tsx

@@ -4,7 +4,10 @@ import {XIcon} from '@primer/octicons-react'
 import {getFocusableChild} from '@primer/behaviors/utils'
 import {get} from '../constants'
 import VisuallyHidden from '../_VisuallyHidden'
-import {AnchoredOverlay, Box, Button, IconButton, useTheme} from '..'
+import {AnchoredOverlay} from '../AnchoredOverlay'
+import Box from '../Box'
+import {Button, IconButton} from '../Button'
+import {useTheme} from '../ThemeProvider'
 import sx, {SxProp} from '../sx'
 
 export type LabelGroupProps = {

packages/react/src/drafts/MarkdownEditor/Toolbar.tsx

@@ -12,32 +12,14 @@ import {
   QuoteIcon,
   TasklistIcon,
 } from '@primer/octicons-react'
-import React, {forwardRef, memo, useContext, useRef} from 'react'
+import React, {memo, useContext, useRef} from 'react'
 
 import {isMacOS} from '@primer/behaviors/utils'
 import Box from '../../Box'
-import {IconButton, IconButtonProps} from '../../Button'
 import {useFocusZone} from '../../hooks/useFocusZone'
 import {MarkdownEditorContext} from './_MarkdownEditorContext'
 import {SavedRepliesButton} from './_SavedReplies'
-
-export const ToolbarButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
-  const {disabled, condensed} = useContext(MarkdownEditorContext)
-
-  return (
-    <IconButton
-      ref={ref}
-      size={condensed ? 'small' : 'medium'}
-      variant="invisible"
-      disabled={disabled}
-      // Prevent focus leaving input:
-      onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
-      {...props}
-      sx={{color: 'fg.muted', ...props.sx}}
-    />
-  )
-})
-ToolbarButton.displayName = 'MarkdownEditor.ToolbarButton'
+import {ToolbarButton} from './_ToolbarButton'
 
 const Divider = () => {
   return (
@@ -169,3 +151,5 @@ export const CoreToolbar = ({children}: {children?: React.ReactNode}) => {
 
 export const Toolbar = ({children}: {children?: React.ReactNode}) => <CoreToolbar>{children}</CoreToolbar>
 Toolbar.displayName = 'MarkdownEditor.Toolbar'
+
+export {ToolbarButton}

packages/react/src/drafts/MarkdownEditor/_SavedReplies.tsx

@@ -9,7 +9,7 @@ import React, {
   useState,
 } from 'react'
 import {SelectPanel, SelectPanelProps} from '../../SelectPanel'
-import {ToolbarButton} from './Toolbar'
+import {ToolbarButton} from './_ToolbarButton'
 
 export type SavedReply = {
   name: string

packages/react/src/drafts/MarkdownEditor/_ToolbarButton.tsx

@@ -0,0 +1,21 @@
+import React, {forwardRef, useContext} from 'react'
+import {IconButton, IconButtonProps} from '../../Button'
+import {MarkdownEditorContext} from './_MarkdownEditorContext'
+
+export const ToolbarButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
+  const {disabled, condensed} = useContext(MarkdownEditorContext)
+
+  return (
+    <IconButton
+      ref={ref}
+      size={condensed ? 'small' : 'medium'}
+      variant="invisible"
+      disabled={disabled}
+      // Prevent focus leaving input:
+      onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
+      {...props}
+      sx={{color: 'fg.muted', ...props.sx}}
+    />
+  )
+})
+ToolbarButton.displayName = 'MarkdownEditor.ToolbarButton'