fix(Stack): correctly forward a Ref

.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'
 
 type GapScale = 'none' | 'condensed' | 'normal' | 'spacious'
 type Gap = GapScale | ResponsiveValue<GapScale>
@@ -68,34 +69,40 @@ type StackProps<As> = React.PropsWithChildren<{
 }>
 
 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 extends ElementType>(
+    {
+      as,
+      children,
+      align = 'stretch',
+      direction = 'vertical',
+      gap,
+      justify = 'start',
+      padding = 'none',
+      wrap = 'nowrap',
+      className,
+      ...rest
+    }: StackProps<As> & React.ComponentPropsWithRef<ElementType extends As ? As : 'div'>,
+    forwardedRef: React.Ref<As> | undefined,
+  ) => {
+    return (
+      <StackBaseComponent
+        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}
+      </StackBaseComponent>
+    )
+  },
+) as PolymorphicForwardRefComponent<ElementType, StackProps<ElementType>>
 
 type StackItemProps<As> = React.PropsWithChildren<{
   /**
@@ -112,24 +119,30 @@ type StackItemProps<As> = React.PropsWithChildren<{
 }>
 
 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'>) {
-  return (
-    <StackItemBaseComponent
-      as={as}
-      {...rest}
-      className={clsx(className, classes.StackItem)}
-      {...getResponsiveAttributes('grow', grow)}
-    >
-      {children}
-    </StackItemBaseComponent>
-  )
-}
+const StackItem = forwardRef(
+  <As extends ElementType>(
+    {
+      as,
+      children,
+      grow,
+      className,
+      ...rest
+    }: StackItemProps<As> & React.ComponentPropsWithRef<ElementType extends As ? As : 'div'>,
+    forwardRef: React.Ref<As> | undefined,
+  ) => {
+    return (
+      <StackItemBaseComponent
+        as={as}
+        ref={forwardRef}
+        {...rest}
+        className={clsx(className, classes.StackItem)}
+        {...getResponsiveAttributes('grow', grow)}
+      >
+        {children}
+      </StackItemBaseComponent>
+    )
+  },
+) as PolymorphicForwardRefComponent<ElementType, StackProps<ElementType>>
 
 export {Stack, StackItem}
 export type {StackProps, StackItemProps}