fix(Stack): correctly forward a Ref (#6111)

Co-authored-by: Copilot <[email protected]>
Co-authored-by: Josh Black <[email protected]>

Author: 3 people

.changeset/loud-ants-taste.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(Stack): correctly forward a Ref

packages/react/src/Stack/Stack.tsx

@@ -1,10 +1,11 @@
 import type React from 'react'
-import {type ElementType} from 'react'
+import {forwardRef, type ElementType} from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {getResponsiveAttributes} from '../internal/utils/getResponsiveAttributes'
 import classes from './Stack.module.css'
 import {clsx} from 'clsx'
-import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type GapScale = 'none' | 'condensed' | 'normal' | 'spacious'
 type Gap = GapScale | ResponsiveValue<GapScale>
@@ -67,35 +68,40 @@ type StackProps<As> = React.PropsWithChildren<{
   className?: string
 }>
 
-const StackBaseComponent = toggleSxComponent('div') as React.ComponentType<StackProps<React.ElementType>>
-function Stack<As extends ElementType>({
-  as,
-  children,
-  align = 'stretch',
-  direction = 'vertical',
-  gap,
-  justify = 'start',
-  padding = 'none',
-  wrap = 'nowrap',
-  className,
-  ...rest
-}: StackProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>) {
-  return (
-    <StackBaseComponent
-      as={as}
-      {...rest}
-      className={clsx(className, classes.Stack)}
-      {...getResponsiveAttributes('gap', gap)}
-      {...getResponsiveAttributes('direction', direction)}
-      {...getResponsiveAttributes('align', align)}
-      {...getResponsiveAttributes('wrap', wrap)}
-      {...getResponsiveAttributes('justify', justify)}
-      {...getResponsiveAttributes('padding', padding)}
-    >
-      {children}
-    </StackBaseComponent>
-  )
-}
+const Stack = forwardRef(
+  (
+    {
+      as,
+      children,
+      align = 'stretch',
+      direction = 'vertical',
+      gap,
+      justify = 'start',
+      padding = 'none',
+      wrap = 'nowrap',
+      className,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    return (
+      <BoxWithFallback
+        as={as}
+        ref={forwardedRef}
+        {...rest}
+        className={clsx(className, classes.Stack)}
+        {...getResponsiveAttributes('gap', gap)}
+        {...getResponsiveAttributes('direction', direction)}
+        {...getResponsiveAttributes('align', align)}
+        {...getResponsiveAttributes('wrap', wrap)}
+        {...getResponsiveAttributes('justify', justify)}
+        {...getResponsiveAttributes('padding', padding)}
+      >
+        {children}
+      </BoxWithFallback>
+    )
+  },
+) as PolymorphicForwardRefComponent<ElementType, StackProps<ElementType>>
 
 type StackItemProps<As> = React.PropsWithChildren<{
   /**
@@ -111,25 +117,19 @@ type StackItemProps<As> = React.PropsWithChildren<{
   className?: string
 }>
 
-const StackItemBaseComponent = toggleSxComponent('div') as React.ComponentType<StackItemProps<React.ElementType>>
-function StackItem<As extends ElementType>({
-  as,
-  children,
-  grow,
-  className,
-  ...rest
-}: StackItemProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>) {
+const StackItem = forwardRef(({as, children, grow, className, ...rest}, forwardedRef) => {
   return (
-    <StackItemBaseComponent
+    <BoxWithFallback
       as={as}
+      ref={forwardedRef}
       {...rest}
       className={clsx(className, classes.StackItem)}
       {...getResponsiveAttributes('grow', grow)}
     >
       {children}
-    </StackItemBaseComponent>
+    </BoxWithFallback>
   )
-}
+}) as PolymorphicForwardRefComponent<ElementType, StackProps<ElementType>>
 
 export {Stack, StackItem}
 export type {StackProps, StackItemProps}