fix: correct Object.assign usage in ActionMenu, DataTable exports in @primer/styled-react

.changeset/datatable-slot-marker.md

@@ -0,0 +1,6 @@
+---
+'@primer/styled-react': patch
+'@primer/react': patch
+---
+
+ActionMenu, Table: Fix component mutation issue where `Object.assign` was modifying original `@primer/react` components. Now uses wrapper components to avoid side effects.

packages/react/src/DataTable/index.ts

@@ -16,8 +16,25 @@ import {
   TableSkeleton,
 } from './Table'
 import {Pagination} from './Pagination'
+import type {SlotMarker} from '../utils/types/Slots'
 
-const Table = Object.assign(TableImpl, {
+const Table: typeof TableImpl &
+  SlotMarker & {
+    Container: typeof TableContainer
+    Title: typeof TableTitle
+    Subtitle: typeof TableSubtitle
+    Actions: typeof TableActions
+    Divider: typeof TableDivider
+    Skeleton: typeof TableSkeleton
+    Head: typeof TableHead
+    Body: typeof TableBody
+    Header: typeof TableHeader
+    Row: typeof TableRow
+    Cell: typeof TableCell
+    CellPlaceholder: typeof TableCellPlaceholder
+    Pagination: typeof Pagination
+    ErrorDialog: typeof ErrorDialog
+  } = Object.assign(TableImpl, {
   Container: TableContainer,
   Title: TableTitle,
   Subtitle: TableSubtitle,
@@ -34,6 +51,8 @@ const Table = Object.assign(TableImpl, {
   ErrorDialog,
 })
 
+Table.__SLOT__ = Symbol('Table')
+
 export {DataTable, Table}
 export type {DataTableProps} from './DataTable'
 export type {

packages/styled-react/src/components/ActionMenu.tsx

@@ -2,6 +2,7 @@ import {ActionMenu as PrimerActionMenu, type SlotMarker} from '@primer/react'
 import {sx, type SxProp} from '../sx'
 import styled from 'styled-components'
 import type {ComponentProps} from 'react'
+import type React from 'react'
 
 type ActionMenuOverlayProps = ComponentProps<typeof PrimerActionMenu.Overlay> & SxProp
 
@@ -12,17 +13,23 @@ const ActionMenuOverlay: React.ComponentType<ActionMenuOverlayProps> & SlotMarke
 })`
   ${sx}
 `
+ActionMenuOverlay.__SLOT__ = PrimerActionMenu.Overlay.__SLOT__
+
+// Create a wrapper component to avoid mutating the original PrimerActionMenu
+function ActionMenuRoot(props: ComponentProps<typeof PrimerActionMenu>) {
+  return <PrimerActionMenu {...props} />
+}
+ActionMenuRoot.displayName = 'ActionMenu'
+;(ActionMenuRoot as typeof ActionMenuRoot & SlotMarker).__SLOT__ = PrimerActionMenu.__SLOT__
 
 export const ActionMenu: typeof PrimerActionMenu & {
   Button: typeof PrimerActionMenu.Button
   Anchor: typeof PrimerActionMenu.Anchor
   Overlay: typeof ActionMenuOverlay
   Divider: typeof PrimerActionMenu.Divider
-} = Object.assign(PrimerActionMenu, {
+} = Object.assign(ActionMenuRoot as typeof PrimerActionMenu & SlotMarker, {
   Button: PrimerActionMenu.Button,
   Anchor: PrimerActionMenu.Anchor,
   Overlay: ActionMenuOverlay,
   Divider: PrimerActionMenu.Divider,
 })
-
-ActionMenuOverlay.__SLOT__ = PrimerActionMenu.Overlay.__SLOT__

packages/styled-react/src/components/DataTable.tsx

@@ -1,7 +1,7 @@
-import {Table as PrimerDataTable, type TableContainerProps} from '@primer/react/experimental'
+import {Table as PrimerDataTable, type TableContainerProps, type TableProps} from '@primer/react/experimental'
 import {sx, type SxProp} from '../sx'
 import styled from 'styled-components'
-import type React from 'react'
+import React from 'react'
 
 const {Container: PrimerDataTableContainer, ...rest} = PrimerDataTable
 
@@ -21,9 +21,17 @@ function DataTableContainer<As extends React.ElementType = 'div'>({as, ...rest}:
   return <StyleDataTableContainer {...rest} {...(as ? {forwardedAs: as} : {})} />
 }
 
+// Create a wrapper component to avoid mutating the original PrimerDataTable
+const TableRoot = React.forwardRef<HTMLTableElement, TableProps>(function TableRoot(props, ref) {
+  return <PrimerDataTable {...props} ref={ref} />
+})
+;(TableRoot as typeof TableRoot & {__SLOT__?: symbol}).__SLOT__ = (
+  PrimerDataTable as typeof PrimerDataTable & {__SLOT__?: symbol}
+).__SLOT__
+
 const Table: typeof PrimerDataTable & {
   Container: typeof DataTableContainer
-} = Object.assign(PrimerDataTable, {
+} = Object.assign(TableRoot, {
   Container: DataTableContainer,
   ...rest,
 })