Remove BoxWithFallback usage and sx prop from DataTable.Container

.changeset/fruity-monkeys-cover.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes `sx` prop from DataTable.Container

packages/react/src/DataTable/Table.tsx

@@ -2,7 +2,6 @@ import {SortAscIcon, SortDescIcon} from '@primer/octicons-react'
 import {clsx} from 'clsx'
 import React from 'react'
 import Text from '../Text'
-import type {SxProp} from '../sx'
 import VisuallyHidden from '../_VisuallyHidden'
 import type {Column, CellAlignment} from './column'
 import type {UniqueRow} from './row'
@@ -12,7 +11,7 @@ import {SkeletonText} from '../SkeletonText'
 import {ScrollableRegion} from '../ScrollableRegion'
 import {Button} from '../internal/components/ButtonReset'
 import classes from './Table.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
+import type {PolymorphicProps} from '../utils/modern-polymorphic'
 
 // ----------------------------------------------------------------------------
 // Table
@@ -233,13 +232,20 @@ function TableCellPlaceholder({children}: TableCellPlaceholderProps) {
 // ----------------------------------------------------------------------------
 // TableContainer
 // ----------------------------------------------------------------------------
-export type TableContainerProps = React.PropsWithChildren<SxProp & React.HTMLAttributes<HTMLDivElement>>
-
-function TableContainer({children, className, ...rest}: TableContainerProps) {
+export type TableContainerProps<As extends React.ElementType = 'div'> = PolymorphicProps<As, 'div'> &
+  React.PropsWithChildren
+
+function TableContainer<As extends React.ElementType = 'div'>({
+  children,
+  className,
+  as,
+  ...rest
+}: TableContainerProps<As>) {
+  const Component = as || 'div'
   return (
-    <BoxWithFallback {...rest} className={clsx(className, classes.TableContainer)}>
+    <Component {...rest} className={clsx(className, classes.TableContainer)}>
       {children}
-    </BoxWithFallback>
+    </Component>
   )
 }
 

packages/react/src/DataTable/__tests__/Table.test.tsx

@@ -156,11 +156,6 @@ describe('Table', () => {
       const {container} = render(<Table.Container className="test" />)
       expect(container.firstElementChild).toHaveClass('test')
     })
-
-    it('should support custom styles through the `sx` prop', () => {
-      const {container} = render(<Table.Container sx={{m: 0}} />)
-      expect(container.firstElementChild).toHaveStyle('margin:0')
-    })
   })
 
   describe('Table.Title', () => {

packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx

@@ -37,4 +37,15 @@ describe('@primer/react/experimental', () => {
     )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
+
+  test('Table.Container supports `sx` prop', () => {
+    render(
+      <Table.Container data-testid="component" sx={{background: 'red'}}>
+        <Table.Row>
+          <Table.Cell>cell</Table.Cell>
+        </Table.Row>
+      </Table.Container>,
+    )
+    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+  })
 })

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

@@ -0,0 +1,43 @@
+import {Table as PrimerDataTable, type TableContainerProps} from '@primer/react/experimental'
+import {sx, type SxProp} from '../sx'
+import styled from 'styled-components'
+import type React from 'react'
+
+const {Container: PrimerDataTableContainer, ...rest} = PrimerDataTable
+
+type DataTableContainerProps<As extends React.ElementType = 'div'> = TableContainerProps<As> & SxProp
+
+const StyleDataTableContainer: React.ComponentType<DataTableContainerProps> = styled(
+  PrimerDataTableContainer,
+).withConfig({
+  shouldForwardProp: prop => (prop as keyof DataTableContainerProps) !== 'sx',
+})<DataTableContainerProps>`
+  ${sx}
+` as typeof PrimerDataTable.Container & {
+  <As extends React.ElementType = 'div'>(props: DataTableContainerProps<As>): React.ReactElement | null
+}
+
+function DataTableContainer<As extends React.ElementType = 'div'>({as, ...rest}: DataTableContainerProps<As>) {
+  return <StyleDataTableContainer {...rest} {...(as ? {forwardedAs: as} : {})} />
+}
+
+const Table: typeof PrimerDataTable & {
+  Container: typeof DataTableContainer
+} = Object.assign(PrimerDataTable, {
+  Container: DataTableContainer,
+  ...rest,
+})
+
+export type {
+  TableProps,
+  TableHeadProps,
+  TableBodyProps,
+  TableRowProps,
+  TableHeaderProps,
+  TableCellProps,
+  TableTitleProps,
+  TableSubtitleProps,
+  TableActionsProps,
+} from '@primer/react/experimental'
+
+export {Table, type DataTableContainerProps}

packages/styled-react/src/experimental.tsx

@@ -15,4 +15,16 @@ export {
   type UnderlinePanelsPanelProps,
 } from './components/UnderlinePanels'
 
-export {Table} from '@primer/react/experimental'
+export {
+  Table,
+  type DataTableContainerProps,
+  type TableProps,
+  type TableHeadProps,
+  type TableBodyProps,
+  type TableRowProps,
+  type TableHeaderProps,
+  type TableCellProps,
+  type TableTitleProps,
+  type TableSubtitleProps,
+  type TableActionsProps,
+} from './components/DataTable'