From 820b2c5b432f0f72df241c197b8cc0f5112657b3 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Fri, 14 Jul 2023 13:27:58 +0200
Subject: [PATCH] fix(react-card): use resolved slot instead of raw prop object
 (#28517)

---
 ...-d34069cc-ff5d-43bc-b4c5-8e199f94b5ed.json |  7 ++++++
 .../components/CardHeader/useCardHeader.ts    | 22 ++++++++++---------
 2 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 change/@fluentui-react-card-d34069cc-ff5d-43bc-b4c5-8e199f94b5ed.json

diff --git a/change/@fluentui-react-card-d34069cc-ff5d-43bc-b4c5-8e199f94b5ed.json b/change/@fluentui-react-card-d34069cc-ff5d-43bc-b4c5-8e199f94b5ed.json
new file mode 100644
index 0000000000000..f3363eb740b66
--- /dev/null
+++ b/change/@fluentui-react-card-d34069cc-ff5d-43bc-b4c5-8e199f94b5ed.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use resolved slot instead of raw prop object",
+  "packageName": "@fluentui/react-card",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts
index b74a0634fe39c..a547e952d5084 100644
--- a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts
+++ b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts
@@ -9,7 +9,7 @@ import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
  *
  * @param header - the header prop of CardHeader
  */
-function getChildWithId(header: CardHeaderProps['header']) {
+function getChildWithId(header: React.ReactNode) {
   function isReactElementWithIdProp(element: React.ReactNode): element is React.ReactElement {
     return React.isValidElement(element) && Boolean(element.props.id);
   }
@@ -62,14 +62,22 @@ export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HT
   const hasChildId = React.useRef(false);
   const generatedId = useId(cardHeaderClassNames.header, referenceId);
 
+  const headerSlot = resolveShorthand(header, {
+    required: true,
+    defaultProps: {
+      ref: headerRef,
+      id: !hasChildId.current ? referenceId : undefined,
+    },
+  });
+
   React.useEffect(() => {
     const headerId = !hasChildId.current ? headerRef.current?.id : undefined;
-    const childWithId = getChildWithId(header);
+    const childWithId = getChildWithId(headerSlot?.children);
 
     hasChildId.current = Boolean(childWithId);
 
     setReferenceId(getReferenceId(headerId, childWithId, generatedId));
-  }, [generatedId, header, setReferenceId]);
+  }, [generatedId, header, headerSlot, setReferenceId]);
 
   return {
     components: {
@@ -85,13 +93,7 @@ export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HT
       ...props,
     }),
     image: resolveShorthand(image),
-    header: resolveShorthand(header, {
-      required: true,
-      defaultProps: {
-        ref: headerRef,
-        id: !hasChildId.current ? referenceId : undefined,
-      },
-    }),
+    header: headerSlot,
     description: resolveShorthand(description),
     action: resolveShorthand(action),
   };