refactor: add BoxWithFallback component to use with sx (#5919)

Author: joshblack

packages/react/src/BranchName/BranchName.tsx

@@ -2,25 +2,21 @@ import React, {type ForwardedRef} from 'react'
 import {clsx} from 'clsx'
 import type {SxProp} from '../sx'
 import classes from './BranchName.module.css'
-import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type BranchNameProps<As extends React.ElementType> = {
   as?: As
 } & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'> &
   Omit<SxProp, 'sx'> &
   SxProp
 
-const BaseComponent = toggleSxComponent('div') as React.ComponentType<
-  React.PropsWithChildren<BranchNameProps<React.ElementType> & React.RefAttributes<HTMLElement>>
->
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function BranchName<As extends React.ElementType>(props: BranchNameProps<As>, ref: ForwardedRef<any>) {
   const {as: Component = 'a', className, children, ...rest} = props
   return (
-    <BaseComponent as={Component} {...rest} ref={ref} className={clsx(className, classes.BranchName)}>
+    <BoxWithFallback as={Component} {...rest} ref={ref} className={clsx(className, classes.BranchName)}>
       {children}
-    </BaseComponent>
+    </BoxWithFallback>
   )
 }
 

packages/react/src/DataTable/Table.tsx

@@ -13,7 +13,7 @@ import {ScrollableRegion} from '../ScrollableRegion'
 import {Button} from '../internal/components/ButtonReset'
 import classes from './Table.module.css'
 import {defaultSxProp} from '../utils/defaultSxProp'
-import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 // ----------------------------------------------------------------------------
 // Table
@@ -233,12 +233,11 @@ function TableCellPlaceholder({children}: TableCellPlaceholderProps) {
 // ----------------------------------------------------------------------------
 export type TableContainerProps = React.PropsWithChildren<SxProp & React.HTMLAttributes<HTMLDivElement>>
 
-const TableContainerBaseComponent = toggleSxComponent('div') as React.ComponentType<TableContainerProps>
 function TableContainer({children, sx: sxProp = defaultSxProp}: TableContainerProps) {
   return (
-    <TableContainerBaseComponent className={clsx(classes.TableContainer)} sx={sxProp}>
+    <BoxWithFallback className={clsx(classes.TableContainer)} sx={sxProp}>
       {children}
-    </TableContainerBaseComponent>
+    </BoxWithFallback>
   )
 }
 

packages/react/src/FormControl/FormControlCaption.tsx

@@ -4,7 +4,7 @@ import Text from '../Text'
 import type {SxProp} from '../sx'
 import classes from './FormControlCaption.module.css'
 import {useFormControlContext} from './_FormControlContext'
-import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type FormControlCaptionProps = React.PropsWithChildren<
   {
@@ -13,20 +13,19 @@ type FormControlCaptionProps = React.PropsWithChildren<
   } & SxProp
 >
 
-const Caption = toggleSxComponent(Text) as React.ComponentType<FormControlCaptionProps>
-
 function FormControlCaption({id, children, sx, className}: FormControlCaptionProps) {
   const {captionId, disabled} = useFormControlContext()
 
   return (
-    <Caption
+    <BoxWithFallback
+      as={Text}
       id={id ?? captionId}
       className={clsx(className, classes.Caption)}
       data-control-disabled={disabled ? '' : undefined}
       sx={sx}
     >
       {children}
-    </Caption>
+    </BoxWithFallback>
   )
 }
 

packages/react/src/SideNav.tsx

@@ -5,8 +5,8 @@ import React, {type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
 import type {SxProp} from './sx'
 import classes from './SideNav.module.css'
-import {toggleSxComponent} from './internal/utils/toggleSxComponent'
 import {defaultSxProp} from './utils/defaultSxProp'
+import {BoxWithFallback} from './internal/components/BoxWithFallback'
 
 type SideNavBaseProps = {
   as?: React.ElementType
@@ -38,12 +38,10 @@ function SideNav({
     },
   )
 
-  const BaseComponent = toggleSxComponent(as) as React.ComponentType<SideNavBaseProps>
-
   return (
-    <BaseComponent className={newClassName} aria-label={ariaLabel} sx={sxProp}>
+    <BoxWithFallback as={as} className={newClassName} aria-label={ariaLabel} sx={sxProp}>
       {children}
-    </BaseComponent>
+    </BoxWithFallback>
   )
 }
 
@@ -57,18 +55,18 @@ type StyledSideNavLinkProps = PropsWithChildren<{
 const SideNavLink = ({selected, to, variant, className, children, ...rest}: StyledSideNavLinkProps) => {
   const isReactRouter = typeof to === 'string'
   const newClassName = clsx(classes.SideNavLink, className, {[classes.SideNavLinkFull]: variant === 'full'})
-  const BaseComponent = toggleSxComponent(Link) as React.ComponentType<StyledSideNavLinkProps>
   // according to their docs, NavLink supports aria-current:
   // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
   return (
-    <BaseComponent
+    <BoxWithFallback
+      as={Link}
       aria-current={isReactRouter || selected ? 'page' : undefined}
       className={newClassName}
       variant={variant}
       {...rest}
     >
       {children}
-    </BaseComponent>
+    </BoxWithFallback>
   )
 }
 

packages/react/src/internal/components/BoxWithFallback.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Box from '../../Box'
+import {defaultSxProp} from '../../utils/defaultSxProp'
+import type {StyledComponent} from 'styled-components'
+import {includesSystemProps} from '../../utils/includeSystemProps'
+
+const BoxWithFallback = React.forwardRef(function BoxWithFallback(
+  {as: BaseComponent = 'div', sx = defaultSxProp, ...rest},
+  ref,
+) {
+  if (sx !== defaultSxProp || includesSystemProps(rest)) {
+    return <Box {...rest} ref={ref} as={BaseComponent} sx={sx} />
+  }
+  return <BaseComponent {...rest} ref={ref} />
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) as StyledComponent<'div', any, React.ComponentPropsWithoutRef<typeof Box>, never>
+
+export {BoxWithFallback}

packages/react/src/internal/components/InputLabel.tsx

@@ -2,7 +2,7 @@ import {clsx} from 'clsx'
 import React from 'react'
 import {type SxProp} from '../../sx'
 import classes from './InputLabel.module.css'
-import {toggleSxComponent} from '../utils/toggleSxComponent'
+import {BoxWithFallback} from './BoxWithFallback'
 
 type BaseProps = SxProp & {
   disabled?: boolean
@@ -26,8 +26,6 @@ export type LegendOrSpanProps = BaseProps & {
 
 type Props = React.PropsWithChildren<LabelProps | LegendOrSpanProps>
 
-const Label = toggleSxComponent('label') as React.ComponentType<Props>
-
 function InputLabel({
   children,
   disabled,
@@ -44,7 +42,7 @@ function InputLabel({
 }: Props) {
   return (
     // @ts-ignore weird typing issue with union for `as` prop
-    <Label
+    <BoxWithFallback
       as={as}
       sx={sx}
       data-control-disabled={disabled ? '' : undefined}
@@ -62,7 +60,7 @@ function InputLabel({
       ) : (
         children
       )}
-    </Label>
+    </BoxWithFallback>
   )
 }
 

packages/react/src/internal/components/UnderlineTabbedInterface.tsx

@@ -8,9 +8,9 @@ import {type SxProp} from '../../sx'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic'
 import {defaultSxProp} from '../../utils/defaultSxProp'
 
-import {toggleSxComponent} from '../utils/toggleSxComponent'
 import classes from './UnderlineTabbedInterface.module.css'
 import {clsx} from 'clsx'
+import {BoxWithFallback} from './BoxWithFallback'
 
 // The gap between the list items. It is a constant because the gap is used to calculate the possible number of items that can fit in the container.
 export const GAP = 8
@@ -22,24 +22,15 @@ type UnderlineWrapperProps = {
   ref?: React.Ref<unknown>
 } & SxProp
 
-const UnderlineWrapperComponent = toggleSxComponent('div') as React.ComponentType<
-  PropsWithChildren<UnderlineWrapperProps>
->
-
 export const UnderlineWrapper = forwardRef(
   (
     {children, className, sx: sxProp = defaultSxProp, ...rest}: PropsWithChildren<UnderlineWrapperProps>,
     forwardedRef,
   ) => {
     return (
-      <UnderlineWrapperComponent
-        className={clsx(classes.UnderlineWrapper, className)}
-        ref={forwardedRef}
-        sx={sxProp}
-        {...rest}
-      >
+      <BoxWithFallback className={clsx(classes.UnderlineWrapper, className)} ref={forwardedRef} sx={sxProp} {...rest}>
         {children}
-      </UnderlineWrapperComponent>
+      </BoxWithFallback>
     )
   },
 )
@@ -99,8 +90,6 @@ export type UnderlineItemProps = {
   ref?: React.Ref<unknown>
 } & SxProp
 
-const UnderlineComponent = toggleSxComponent('a') as React.ComponentType<PropsWithChildren<UnderlineItemProps>>
-
 export const UnderlineItem = forwardRef(
   (
     {
@@ -116,7 +105,7 @@ export const UnderlineItem = forwardRef(
     forwardedRef,
   ) => {
     return (
-      <UnderlineComponent ref={forwardedRef} as={as} sx={sxProp} className={classes.UnderlineItem} {...rest}>
+      <BoxWithFallback ref={forwardedRef} as={as} sx={sxProp} className={classes.UnderlineItem} {...rest}>
         {iconsVisible && Icon && <span data-component="icon">{isElement(Icon) ? Icon : <Icon />}</span>}
         {children && (
           <span data-component="text" data-content={children}>
@@ -134,7 +123,7 @@ export const UnderlineItem = forwardRef(
             </span>
           )
         ) : null}
-      </UnderlineComponent>
+      </BoxWithFallback>
     )
   },
 ) as PolymorphicForwardRefComponent<'a', UnderlineItemProps>