From 9b0210f2a42f12eddd02822263db34f7726e9976 Mon Sep 17 00:00:00 2001
From: chassunc <86579954+chpalac@users.noreply.github.com>
Date: Tue, 30 Nov 2021 12:28:04 -0300
Subject: [PATCH] fix: Header components to properly pass ref to root slots
 (#20811)

* fix: Header components to properly pass ref to root slots

* add changelog
---
 packages/fluentui/CHANGELOG.md                      |  1 +
 .../src/components/Header/Header.tsx                | 13 +++++++------
 .../src/components/Header/HeaderDescription.tsx     |  9 +++++----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
index a8d944c911709..66a70c2f084d7 100644
--- a/packages/fluentui/CHANGELOG.md
+++ b/packages/fluentui/CHANGELOG.md
@@ -57,6 +57,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Chat` components to properly pass ref to root slots @chpalac ([#20691](https://github.com/microsoft/fluentui/pull/20691))
 - Fix `Flex` component to properly pass ref to root slots @chpalac ([#20752](https://github.com/microsoft/fluentui/pull/20752))
 - Fix `Animation` to expose `Transition` state for the consumer @chpalac ([#20776](https://github.com/microsoft/fluentui/pull/20776))
+- Fix `Header` components to properly pass ref to root slots @chpalac ([#20811](https://github.com/microsoft/fluentui/pull/20811))
 - Fix `Grid` component to properly pass ref to root slots @chpalac ([#20810](https://github.com/microsoft/fluentui/pull/20810))
 - Fix `Form` components to properly pass ref to root slots @chpalac ([#20809](https://github.com/microsoft/fluentui/pull/20809))
 - Fix `Loader` component to properly pass ref to root slots @chpalac ([#20814](https://github.com/microsoft/fluentui/pull/20814))
diff --git a/packages/fluentui/react-northstar/src/components/Header/Header.tsx b/packages/fluentui/react-northstar/src/components/Header/Header.tsx
index 86bda27d0b0e6..3cd575f42dbd6 100644
--- a/packages/fluentui/react-northstar/src/components/Header/Header.tsx
+++ b/packages/fluentui/react-northstar/src/components/Header/Header.tsx
@@ -18,13 +18,13 @@ import { HeaderDescription, HeaderDescriptionProps } from './HeaderDescription';
 
 import { ShorthandValue, FluentComponentStaticProps } from '../../types';
 import {
-  ComponentWithAs,
   useTelemetry,
   useAccessibility,
   useFluentContext,
   getElementType,
   useUnhandledProps,
   useStyles,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface HeaderProps
@@ -57,10 +57,7 @@ export type HeaderStylesProps = Required<Pick<HeaderProps, 'align' | 'color'>> &
  * Other considerations:
  *  - when the description property is used in header, readers will narrate both header content and description within the element. In addition to that, both will be displayed in the list of headings.
  */
-export const Header: ComponentWithAs<'h1', HeaderProps> &
-  FluentComponentStaticProps<HeaderProps> & {
-    Description: typeof HeaderDescription;
-  } = props => {
+export const Header = (React.forwardRef<HTMLHeadingElement, HeaderProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Header.displayName, context.telemetry);
   setStart();
@@ -95,6 +92,7 @@ export const Header: ComponentWithAs<'h1', HeaderProps> &
     <ElementType
       {...getA11yProps('root', {
         className: classes.root,
+        ref,
         ...unhandledProps,
         ...rtlTextContainer.getAttributes({
           forElements: [children, content],
@@ -113,7 +111,10 @@ export const Header: ComponentWithAs<'h1', HeaderProps> &
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'h1', HTMLHeadingElement, HeaderProps> &
+  FluentComponentStaticProps<HeaderProps> & {
+    Description: typeof HeaderDescription;
+  };
 
 Header.displayName = 'Header';
 
diff --git a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx
index 4ef5515bb12e9..383f77133f491 100644
--- a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx
+++ b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx
@@ -14,13 +14,13 @@ import {
 
 import { FluentComponentStaticProps } from '../../types';
 import {
-  ComponentWithAs,
   useTelemetry,
   useFluentContext,
   getElementType,
   useUnhandledProps,
   useAccessibility,
   useStyles,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface HeaderDescriptionProps
@@ -40,8 +40,7 @@ export type HeaderDescriptionStylesProps = Pick<HeaderDescriptionProps, 'color'>
 /**
  * A HeaderDescription provides more detailed information about the Header.
  */
-export const HeaderDescription: ComponentWithAs<'p', HeaderDescriptionProps> &
-  FluentComponentStaticProps<HeaderDescriptionProps> = props => {
+export const HeaderDescription = (React.forwardRef<HTMLParagraphElement, HeaderDescriptionProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(HeaderDescription.displayName, context.telemetry);
   setStart();
@@ -72,6 +71,7 @@ export const HeaderDescription: ComponentWithAs<'p', HeaderDescriptionProps> &
     <ElementType
       {...getA11yProps('root', {
         className: classes.root,
+        ref,
         ...unhandledProps,
         ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
       })}
@@ -81,7 +81,8 @@ export const HeaderDescription: ComponentWithAs<'p', HeaderDescriptionProps> &
   );
   setEnd();
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'p', HTMLParagraphElement, HeaderDescriptionProps> &
+  FluentComponentStaticProps<HeaderDescriptionProps>;
 
 HeaderDescription.displayName = 'HeaderDescription';