From 8a6da3430312b39a4aca44f629eaa3f558ade4ff Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Thu, 13 Apr 2023 14:33:46 -0700
Subject: [PATCH 1/2] fix: Fix slot render functions

---
 ...ilities-1e1f8bd6-b059-4823-9a8d-f58d44482c6e.json |  7 +++++++
 .../react-utilities/src/compose/getSlots.ts          | 12 +++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 change/@fluentui-react-utilities-1e1f8bd6-b059-4823-9a8d-f58d44482c6e.json

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 00000000000000..171c49f57573d9
--- /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 2799542d263088..1051bc42898e67 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<R extends SlotPropsRecord, K extends keyof R>(
     return [null, undefined as R[K]];
   }
 
-  const { children, as: asProp, ...rest } = props;
+  const {
+    children,
+    [SLOT_RENDER_FUNCTION_SYMBOL]: renderOrChildren = children,
+    as: asProp,
+    ...rest
+  } = props as typeof props & { [SLOT_RENDER_FUNCTION_SYMBOL]: SlotRenderFunction<R[K]> };
 
   const slot = (
     state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string'
@@ -83,8 +89,8 @@ function getSlot<R extends SlotPropsRecord, K extends keyof R>(
       : state.components[slotName]
   ) as React.ElementType<R[K]>;
 
-  if (typeof children === 'function') {
-    const render = children as SlotRenderFunction<R[K]>;
+  if (typeof renderOrChildren === 'function') {
+    const render = renderOrChildren as SlotRenderFunction<R[K]>;
     return [
       React.Fragment,
       {

From 3894bc249d42e3a918fc1e131a610ee16a58b859 Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Thu, 13 Apr 2023 14:58:21 -0700
Subject: [PATCH 2/2] Clean up

---
 .../react-utilities/src/compose/getSlots.ts               | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-utilities/src/compose/getSlots.ts b/packages/react-components/react-utilities/src/compose/getSlots.ts
index 1051bc42898e67..8c24dd77422ef1 100644
--- a/packages/react-components/react-utilities/src/compose/getSlots.ts
+++ b/packages/react-components/react-utilities/src/compose/getSlots.ts
@@ -78,10 +78,10 @@ function getSlot<R extends SlotPropsRecord, K extends keyof R>(
 
   const {
     children,
-    [SLOT_RENDER_FUNCTION_SYMBOL]: renderOrChildren = children,
     as: asProp,
+    [SLOT_RENDER_FUNCTION_SYMBOL]: renderFunction,
     ...rest
-  } = props as typeof props & { [SLOT_RENDER_FUNCTION_SYMBOL]: SlotRenderFunction<R[K]> };
+  } = props as typeof props & { [SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction<R[K]> };
 
   const slot = (
     state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string'
@@ -89,8 +89,8 @@ function getSlot<R extends SlotPropsRecord, K extends keyof R>(
       : state.components[slotName]
   ) as React.ElementType<R[K]>;
 
-  if (typeof renderOrChildren === 'function') {
-    const render = renderOrChildren as SlotRenderFunction<R[K]>;
+  if (renderFunction || typeof children === 'function') {
+    const render = renderFunction || (children as SlotRenderFunction<R[K]>);
     return [
       React.Fragment,
       {