fix(react-card): use resolved slot instead of raw prop object (micros…

…oft#28517)

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"
+}

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),
   };