diff --git a/change/@fluentui-react-utilities-1e1f8bd6-b059-4823-9a8d-f58d44482c6e.json b/change/@fluentui-react-utilities-1e1f8bd6-b059-4823-9a8d-f58d44482c6e.json new file mode 100644 index 0000000000000..171c49f57573d --- /dev/null +++ b/change/@fluentui-react-utilities-1e1f8bd6-b059-4823-9a8d-f58d44482c6e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Fix slot render functions", + "packageName": "@fluentui/react-utilities", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-utilities/src/compose/getSlots.ts b/packages/react-components/react-utilities/src/compose/getSlots.ts index 2799542d26308..8c24dd77422ef 100644 --- a/packages/react-components/react-utilities/src/compose/getSlots.ts +++ b/packages/react-components/react-utilities/src/compose/getSlots.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { omit } from '../utils/omit'; +import { SLOT_RENDER_FUNCTION_SYMBOL } from './constants'; import type { AsIntrinsicElement, ComponentState, @@ -75,7 +76,12 @@ function getSlot( return [null, undefined as R[K]]; } - const { children, as: asProp, ...rest } = props; + const { + children, + as: asProp, + [SLOT_RENDER_FUNCTION_SYMBOL]: renderFunction, + ...rest + } = props as typeof props & { [SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction }; const slot = ( state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string' @@ -83,8 +89,8 @@ function getSlot( : state.components[slotName] ) as React.ElementType; - if (typeof children === 'function') { - const render = children as SlotRenderFunction; + if (renderFunction || typeof children === 'function') { + const render = renderFunction || (children as SlotRenderFunction); return [ React.Fragment, {