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 00000000000000..f3363eb740b665 --- /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 b74a0634fe39cc..a547e952d50840 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 { 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