diff --git a/.changeset/datatable-slot-marker.md b/.changeset/datatable-slot-marker.md new file mode 100644 index 00000000000..57fc98a09b2 --- /dev/null +++ b/.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. diff --git a/packages/react/src/DataTable/index.ts b/packages/react/src/DataTable/index.ts index a21097e624a..ce7f9514a8e 100644 --- a/packages/react/src/DataTable/index.ts +++ b/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 { diff --git a/packages/styled-react/src/components/ActionMenu.tsx b/packages/styled-react/src/components/ActionMenu.tsx index 982de42f990..7565c402672 100644 --- a/packages/styled-react/src/components/ActionMenu.tsx +++ b/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 & SxProp @@ -12,17 +13,23 @@ const ActionMenuOverlay: React.ComponentType & SlotMarke })` ${sx} ` +ActionMenuOverlay.__SLOT__ = PrimerActionMenu.Overlay.__SLOT__ + +// Create a wrapper component to avoid mutating the original PrimerActionMenu +function ActionMenuRoot(props: ComponentProps) { + return +} +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__ diff --git a/packages/styled-react/src/components/DataTable.tsx b/packages/styled-react/src/components/DataTable.tsx index 3be7f6cbed3..1619b632a0a 100644 --- a/packages/styled-react/src/components/DataTable.tsx +++ b/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, ...rest}: return } +// Create a wrapper component to avoid mutating the original PrimerDataTable +const TableRoot = React.forwardRef(function TableRoot(props, ref) { + return +}) +;(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, })