From 2190a1f051e77d8b294852c2e6971a16b41d0c58 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Tue, 25 Apr 2023 14:48:37 +0200
Subject: [PATCH 01/28] docs: add TODO indicator

---
 .../react-drawer/stories/Drawer/DrawerBestPractices.md      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md b/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md
index 08ff8ddeeb5f86..0a91ded0389bca 100644
--- a/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md
+++ b/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md
@@ -1,5 +1,11 @@
 ## Best practices
 
+TODO: To be added by a future contribution, when all the implementation of sub components is finished.
+
 ### Do
 
+TODO
+
 ### Don't
+
+TODO

From 3a6bbb0ca32a62a60195d248074236709d7e2b2d Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Tue, 25 Apr 2023 14:53:09 +0200
Subject: [PATCH 02/28] feat(react-conformance): add new TS config api to be
 able to specify configName and configDir (#27664)

* feat(react-conformance): add new TS config api to be able to specify configName and configDir

* generate changefile

* chore: add react-conformance owner
---
 .github/CODEOWNERS                             |  1 +
 ...e-9b875b33-ced4-434a-9690-448766658f08.json |  7 +++++++
 packages/react-conformance/src/isConformant.ts | 18 ++++++++++++++++--
 packages/react-conformance/src/types.ts        |  6 ++++++
 .../src/utils/createTsProgram.ts               | 17 +++++++++++------
 5 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 change/@fluentui-react-conformance-9b875b33-ced4-434a-9690-448766658f08.json

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index a2389381423bfc..225dd3a402d521 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -133,6 +133,7 @@ apps/recipes-react-components @microsoft/cxe-red @microsoft/cxe-coastal @microso
 #### Packages
 packages/azure-themes @Jacqueline-ms @robtaft-ms
 packages/bundle-size @microsoft/teams-prg
+packages/react-conformance @microsoft/fluentui-react-build
 packages/date-time-utilities @microsoft/cxe-red
 packages/eslint-plugin @microsoft/fluentui-react-build
 packages/foundation-legacy @microsoft/cxe-red @khmakoto
diff --git a/change/@fluentui-react-conformance-9b875b33-ced4-434a-9690-448766658f08.json b/change/@fluentui-react-conformance-9b875b33-ced4-434a-9690-448766658f08.json
new file mode 100644
index 00000000000000..26d48b6da4a784
--- /dev/null
+++ b/change/@fluentui-react-conformance-9b875b33-ced4-434a-9690-448766658f08.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add new TS config api to be able to specify configName and configDir",
+  "packageName": "@fluentui/react-conformance",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-conformance/src/isConformant.ts b/packages/react-conformance/src/isConformant.ts
index 734e1cb0090828..2711019ebf321a 100644
--- a/packages/react-conformance/src/isConformant.ts
+++ b/packages/react-conformance/src/isConformant.ts
@@ -8,14 +8,28 @@ import { getComponentDoc } from './utils/getComponentDoc';
 
 export function isConformant<TProps = {}>(...testInfo: Partial<IsConformantOptions<TProps>>[]) {
   const mergedOptions = merge<IsConformantOptions>(...testInfo);
-  const { componentPath, displayName, disabledTests = [], extraTests, tsconfigDir } = mergedOptions;
+
+  const {
+    componentPath,
+    displayName,
+    disabledTests = [],
+    extraTests,
+    tsConfig,
+    // eslint-disable-next-line deprecation/deprecation
+    tsconfigDir,
+  } = mergedOptions;
+
+  const mergedTsConfig = {
+    configDir: tsConfig?.configDir ?? tsconfigDir,
+    configName: tsConfig?.configName,
+  };
 
   describe('isConformant', () => {
     if (!fs.existsSync(componentPath)) {
       throw new Error(`Path ${componentPath} does not exist`);
     }
 
-    const tsProgram = createTsProgram(componentPath, tsconfigDir);
+    const tsProgram = createTsProgram(componentPath, mergedTsConfig);
 
     const components = getComponentDoc(componentPath, tsProgram);
     const mainComponents = components.filter(comp => comp.displayName === displayName);
diff --git a/packages/react-conformance/src/types.ts b/packages/react-conformance/src/types.ts
index 0abb94ea054c5c..5e950e4e3af70e 100644
--- a/packages/react-conformance/src/types.ts
+++ b/packages/react-conformance/src/types.ts
@@ -92,10 +92,16 @@ export interface IsConformantOptions<TProps = {}> {
   primarySlot?: keyof TProps | 'root';
 
   /**
+   * @deprecated - use `tsConfig` property
+   *
    * Test will load the first tsconfig.json file working upwards from `tsconfigDir`.
    * @defaultvalue the directory of the component being tested
    */
   tsconfigDir?: string;
+  /**
+   * replaces tsconfigDir
+   */
+  tsConfig?: Partial<{ configName: string; configDir: string }>;
 }
 
 export type ConformanceTest<TProps = {}> = (
diff --git a/packages/react-conformance/src/utils/createTsProgram.ts b/packages/react-conformance/src/utils/createTsProgram.ts
index c2fb35a59d1d4a..9c35cf10473929 100644
--- a/packages/react-conformance/src/utils/createTsProgram.ts
+++ b/packages/react-conformance/src/utils/createTsProgram.ts
@@ -5,18 +5,23 @@ import * as ts from 'typescript';
 let program: ts.Program;
 
 /**
- * Creates a cached TS Program.
+ * Creates a ~cached~ TS Program.
+ * @remarks this will be never cached with current use/setup as jest creates this for every it/describe() block 🐌
  */
-export function createTsProgram(componentPath: string, tsconfigDir?: string): ts.Program {
+export function createTsProgram(
+  sourcePath: string,
+  options: Partial<{ configDir: string; configName: string }> = {},
+): ts.Program {
+  const { configName, configDir } = options;
   if (!program) {
     // Calling parse() from react-docgen-typescript would create a new ts.Program for every component,
     // which can take multiple seconds in a large project. For better performance, we create a single
     // ts.Program per package and pass it to parseWithProgramProvider().
 
-    const tsconfigPath = ts.findConfigFile(tsconfigDir ?? componentPath, fs.existsSync);
+    const tsconfigPath = ts.findConfigFile(configDir ?? sourcePath, fs.existsSync, configName);
 
     if (!tsconfigPath) {
-      throw new Error('Cannot find tsconfig.json');
+      throw new Error(`Cannot find ${configName}`);
     }
 
     const compilerOptions = getCompilerOptions(tsconfigPath);
@@ -33,9 +38,9 @@ export function createTsProgram(componentPath: string, tsconfigDir?: string): ts
     program = ts.createProgram([rootFile], compilerOptions);
   }
 
-  if (!program.getSourceFile(componentPath)) {
+  if (!program.getSourceFile(sourcePath)) {
     // See earlier comment for why it's handled this way (can reconsider if it becomes a problem)
-    throw new Error(`Component file "${componentPath}" does not appear to be referenced from the project index file`);
+    throw new Error(`Component file "${sourcePath}" does not appear to be referenced from the project index file`);
   }
 
   return program;

From 39a57b2d3d753d2316300ec424e6a2c213887c3d Mon Sep 17 00:00:00 2001
From: ling1726 <lingfangao@hotmail.com>
Date: Tue, 25 Apr 2023 16:24:35 +0200
Subject: [PATCH 03/28] fix: Menu should not steal focus on re-render (#27688)

* fix: Menu should not steal focus on re-render

Follow up from #27414. The focusing effect should not re-run if the
value of `firstMount` changes.

* changefile
---
 ...-219a86a1-336b-4011-9f84-a69f77ffcf64.json |  7 ++++
 .../src/components/Menu/Menu.cy.tsx           | 37 ++++++++++++++++++-
 .../src/components/Menu/useMenu.tsx           |  4 +-
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json

diff --git a/change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json b/change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json
new file mode 100644
index 00000000000000..39639448387ebc
--- /dev/null
+++ b/change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Menu should not steal focus on re-render",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx b/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx
index 6aec751ad2b68b..03c8b64f4e585a 100644
--- a/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx
+++ b/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx
@@ -132,6 +132,41 @@ describe('MenuTrigger', () => {
     );
     cy.get(menuTriggerSelector).should('not.be.focused');
   });
+
+  it('should not focus itself after re-render', () => {
+    const Example = () => {
+      const [count, setCount] = React.useState(0);
+
+      React.useEffect(() => {
+        // trigger 2 re-renders to make sure that the focus effect has finished running
+        // after first re-render
+        if (count < 2) {
+          setCount(c => c + 1);
+        }
+      }, [count]);
+
+      return (
+        <>
+          <Menu>
+            <MenuTrigger disableButtonEnhancement>
+              <button data-status={count < 2 ? 'incomplete' : 'complete'} id={menuTriggerId}>
+                Menu
+              </button>
+            </MenuTrigger>
+            <MenuPopover>
+              <MenuList>
+                <MenuItem>Item</MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+          <input type="text" />
+        </>
+      );
+    };
+
+    mount(<Example />);
+    cy.get(menuTriggerSelector).should('have.attr', 'data-status', 'complete').should('not.be.focused');
+  });
 });
 
 describe('Custom Trigger', () => {
@@ -391,7 +426,7 @@ describe('MenuItemRadio', () => {
 });
 
 describe('Menu', () => {
-  it('should not focus trigger on dismiss if another elemnt is focused', () => {
+  it('should not focus trigger on dismiss if another element is focused', () => {
     mount(
       <>
         <Menu>
diff --git a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
index 5030194e69e75c..cf6c19f807ca04 100644
--- a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
+++ b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
@@ -292,7 +292,9 @@ const useMenuOpenState = (
         }
       }
     }
-  }, [state.triggerRef, state.isSubmenu, open, focusFirst, firstMount, targetDocument, state.menuPopoverRef]);
+    // firstMount change should not re-run this effect
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);
 
   return [open, setOpen] as const;
 };

From d80eca9d508c9a8afe4b461d56fb172cd2d557b5 Mon Sep 17 00:00:00 2001
From: Karan Kakroo <kakrookaran@gmail.com>
Date: Tue, 25 Apr 2023 17:16:51 +0100
Subject: [PATCH 04/28] Overflow: added useOverflowCount to exports (#27678)

* added useOverflowCount to exports

* updated api md

* updates to changelog entry
---
 ...ct-components-9cf91ecc-b503-4ff6-92cb-f50e3d21b209.json | 7 +++++++
 .../react-components/etc/react-components.api.md           | 3 +++
 packages/react-components/react-components/src/index.ts    | 1 +
 3 files changed, 11 insertions(+)
 create mode 100644 change/@fluentui-react-components-9cf91ecc-b503-4ff6-92cb-f50e3d21b209.json

diff --git a/change/@fluentui-react-components-9cf91ecc-b503-4ff6-92cb-f50e3d21b209.json b/change/@fluentui-react-components-9cf91ecc-b503-4ff6-92cb-f50e3d21b209.json
new file mode 100644
index 00000000000000..44692a4396bbb5
--- /dev/null
+++ b/change/@fluentui-react-components-9cf91ecc-b503-4ff6-92cb-f50e3d21b209.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: added useOverflowCount to react-components exports",
+  "packageName": "@fluentui/react-components",
+  "email": "kakrookaran@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
index 0586f75d6a974a..07a2faca39bb7f 100644
--- a/packages/react-components/react-components/etc/react-components.api.md
+++ b/packages/react-components/react-components/etc/react-components.api.md
@@ -909,6 +909,7 @@ import { useOption_unstable } from '@fluentui/react-combobox';
 import { useOptionGroup_unstable } from '@fluentui/react-combobox';
 import { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';
 import { useOptionStyles_unstable } from '@fluentui/react-combobox';
+import { useOverflowCount } from '@fluentui/react-overflow';
 import { useOverflowMenu } from '@fluentui/react-overflow';
 import { usePersona_unstable } from '@fluentui/react-persona';
 import { usePersonaStyles_unstable } from '@fluentui/react-persona';
@@ -2813,6 +2814,8 @@ export { useOptionGroupStyles_unstable }
 
 export { useOptionStyles_unstable }
 
+export { useOverflowCount }
+
 export { useOverflowMenu }
 
 export { usePersona_unstable }
diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
index da899f3541fe71..e01e20f27b10d5 100644
--- a/packages/react-components/react-components/src/index.ts
+++ b/packages/react-components/react-components/src/index.ts
@@ -811,6 +811,7 @@ export {
   OverflowItem,
   useIsOverflowGroupVisible,
   useIsOverflowItemVisible,
+  useOverflowCount,
   useOverflowMenu,
   DATA_OVERFLOWING,
   DATA_OVERFLOW_MENU,

From cbe5229d974dc11d345729a110b7493564a0b822 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com>
Date: Wed, 26 Apr 2023 11:41:23 +0530
Subject: [PATCH 05/28] Enable export to codepen for charting library (#27539)

* Add charting package as default supported for codepen component.
---
 ...ponents-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json |  7 +++++++
 ...-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json |  7 +++++++
 .../components/CodepenComponent/CodepenComponent.tsx |  4 ++++
 .../src/utilities/defaultSupportedPackages.ts        | 12 ++++++++++--
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json
 create mode 100644 change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json

diff --git a/change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json b/change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json
new file mode 100644
index 00000000000000..e2cdde7c9ca42f
--- /dev/null
+++ b/change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enable export to codepen for react charting",
+  "packageName": "@fluentui/react-docsite-components",
+  "email": "atishay.jain@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json b/change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json
new file mode 100644
index 00000000000000..a14c3d39ca0a15
--- /dev/null
+++ b/change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add react charting to support export to codepen",
+  "packageName": "@fluentui/react-monaco-editor",
+  "email": "atishay.jain@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx b/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx
index d3593c6aa29d96..d7032f452a6489 100644
--- a/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx
+++ b/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx
@@ -48,6 +48,10 @@ const CodepenComponentBase: React.FunctionComponent<ICodepenProps> = props => {
       jsContentStr.indexOf('window.FluentUIExampleData') !== -1
         ? script('@fluentui/example-data@8/dist/example-data.js')
         : '',
+      // load charting bundle only if used
+      jsContentStr.indexOf('window.FluentUIReactCharting') !== -1
+        ? script('@fluentui/react-charting@5/dist/react-charting.js')
+        : '',
       `<div id="${CONTENT_ID}"></div>`,
     ]
       .filter(line => !!line)
diff --git a/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts b/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts
index 71715d02e3fb0d..1a096a6ada1447 100644
--- a/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts
+++ b/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts
@@ -18,6 +18,11 @@ const exampleDataGroup: IPackageGroup = {
   loadGlobal: cb => require.ensure([], require => cb(require('@fluentui/example-data'))),
   packages: [],
 };
+const chartingGroup: IPackageGroup = {
+  globalName: 'FluentUIReactCharting',
+  loadGlobal: cb => require.ensure([], require => cb(require('@fluentui/react-charting'))),
+  packages: [],
+};
 
 let typesContext: __WebpackModuleApi.RequireContext | undefined;
 try {
@@ -32,6 +37,7 @@ try {
 } catch (ex) {
   // We're probably running in jest, which doesn't have webpack's require.context
 }
+const loadTypes = () => '';
 if (typesContext) {
   typesContext.keys().forEach(dtsPath => {
     // The api-extractor .d.ts rollups use the package's unscoped name (such as "utilities")
@@ -57,7 +63,6 @@ if (typesContext) {
   });
 } else {
   // Use some defaults for jest tests (real types won't be loaded)
-  const loadTypes = () => '';
   fabricGroup.packages.push(
     { packageName: '@fluentui/date-time-utilities', loadTypes },
     { packageName: '@fluentui/dom-utilities', loadTypes },
@@ -74,9 +79,12 @@ if (typesContext) {
   hooksGroup.packages.push({ packageName: '@fluentui/react-hooks', loadTypes });
   exampleDataGroup.packages.push({ packageName: '@fluentui/example-data', loadTypes });
 }
+if (typeof window === 'object' && window.location.href.indexOf('react-charting') !== -1) {
+  chartingGroup.packages.push({ packageName: '@fluentui/react-charting', loadTypes });
+}
 
 /**
  * Default supported packages for imports: `@fluentui/react` and everything it exports,
  * plus `@fluentui/example-data`. (React is implicitly supported.)
  */
-export const SUPPORTED_PACKAGES: IPackageGroup[] = [fabricGroup, hooksGroup, exampleDataGroup];
+export const SUPPORTED_PACKAGES: IPackageGroup[] = [fabricGroup, hooksGroup, exampleDataGroup, chartingGroup];

From 53c5190f2774c4b42777af53f3739bf2949678e2 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Wed, 26 Apr 2023 13:03:26 +0200
Subject: [PATCH 06/28] feat(react-tree): makes useFlatTree generic (#27682)

* feat(react-tree): makes useFlatTree generic

* chore: remove redundancies on types
---
 ...-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json |  7 ++
 .../react-tree/etc/react-tree.api.md          | 36 ++++----
 .../react-tree/src/hooks/useFlatTree.ts       | 69 ++++++++-------
 .../src/hooks/useFlatTreeNavigation.ts        | 11 ++-
 .../src/utils/createFlatTreeItems.ts          | 66 ++++++++-------
 .../react-tree/src/utils/flattenTree.ts       | 30 ++++---
 .../D_flatTree/TreeItemAddRemove.stories.tsx  | 29 ++++---
 .../D_flatTree/Virtualization.stories.tsx     | 18 ++--
 .../D_flatTree/flattenTree.stories.tsx        | 44 ++++++----
 .../D_flatTree/useFlatTree.stories.tsx        | 84 +++++--------------
 10 files changed, 204 insertions(+), 190 deletions(-)
 create mode 100644 change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json

diff --git a/change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json b/change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json
new file mode 100644
index 00000000000000..f42640c8d48098
--- /dev/null
+++ b/change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: makes useFlatTree generic",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md
index 1635f372aff3f6..6a473c6814b21c 100644
--- a/packages/react-components/react-tree/etc/react-tree.api.md
+++ b/packages/react-components/react-tree/etc/react-tree.api.md
@@ -30,33 +30,41 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { SlotRenderFunction } from '@fluentui/react-utilities';
 
 // @public
-export const flattenTree_unstable: <Value = string>(items: NestedTreeItem<Value>[]) => FlatTreeItemProps<Value>[];
+export const flattenTree_unstable: <Props extends TreeItemProps<unknown>>(items: NestedTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
 
 // @public
-export type FlatTree<Value = string> = {
-    getTreeProps(): FlatTreeProps<Value>;
-    navigate(data: TreeNavigationData_unstable<Value>): void;
-    getNextNavigableItem(visibleItems: FlatTreeItem<Value>[], data: TreeNavigationData_unstable<Value>): FlatTreeItem<Value> | undefined;
-    items(): IterableIterator<FlatTreeItem<Value>>;
+export type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {
+    getTreeProps(): FlatTreeProps<Props['value']>;
+    navigate(data: TreeNavigationData_unstable<Props['value']>): void;
+    getNextNavigableItem(visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable<Props['value']>): FlatTreeItem<Props> | undefined;
+    items(): IterableIterator<FlatTreeItem<Props>>;
 };
 
-// @public (undocumented)
-export type FlatTreeItem<Value = string> = Readonly<MutableFlatTreeItem<Value>>;
+// @public
+export type FlatTreeItem<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {
+    index: number;
+    level: number;
+    childrenSize: number;
+    value: Props['value'];
+    parentValue: Props['parentValue'];
+    ref: React_2.RefObject<HTMLDivElement>;
+    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> & Omit<Props, 'parentValue'>;
+};
 
 // @public (undocumented)
-export type FlatTreeItemProps<Value = string> = Omit<TreeItemProps, 'value'> & {
+export type FlatTreeItemProps<Value = string> = TreeItemProps<Value> & {
     value: Value;
     parentValue?: Value;
 };
 
 // @public (undocumented)
-export type FlatTreeProps<Value = string> = Required<Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & {
+export type FlatTreeProps<Value = string> = Required<Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>> & {
     ref: React_2.Ref<HTMLDivElement>;
-}>;
+};
 
 // @public (undocumented)
-export type NestedTreeItem<Value = string> = Omit<TreeItemProps<Value>, 'subtree'> & {
-    subtree?: NestedTreeItem<Value>[];
+export type NestedTreeItem<Props extends TreeItemProps<unknown>> = Omit<Props, 'subtree'> & {
+    subtree?: NestedTreeItem<Props>[];
 };
 
 // @public (undocumented)
@@ -281,7 +289,7 @@ export type TreeSlots = {
 export type TreeState = ComponentState<TreeSlots> & TreeContextValue;
 
 // @public
-export function useFlatTree_unstable<Value = string>(flatTreeItemProps: FlatTreeItemProps<Value>[], options?: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>): FlatTree<Value>;
+export function useFlatTree_unstable<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(flatTreeItemProps: Props[], options?: FlatTreeOptions<Props>): FlatTree<Props>;
 
 // @public
 export const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
diff --git a/packages/react-components/react-tree/src/hooks/useFlatTree.ts b/packages/react-components/react-tree/src/hooks/useFlatTree.ts
index b3def6b57e043b..f373c683ed87a6 100644
--- a/packages/react-components/react-tree/src/hooks/useFlatTree.ts
+++ b/packages/react-components/react-tree/src/hooks/useFlatTree.ts
@@ -13,34 +13,34 @@ import type {
 } from '../Tree';
 import type { TreeItemProps } from '../TreeItem';
 
-export type FlatTreeItemProps<Value = string> = Omit<TreeItemProps, 'value'> & {
+export type FlatTreeItemProps<Value = string> = TreeItemProps<Value> & {
   value: Value;
   parentValue?: Value;
 };
 
-export type FlatTreeItem<Value = string> = Readonly<MutableFlatTreeItem<Value>>;
-
 /**
- * @internal
- * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator
- * to ensure required properties when building a FlatTreeITem
+ * The item that is returned by `useFlatTree`, it represents a wrapper around the properties provided to
+ * `useFlatTree` but with extra information that might be useful on flat tree scenarios
  */
-export type MutableFlatTreeItem<Value = string> = {
-  parentValue?: Value;
-  childrenSize: number;
+export type FlatTreeItem<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {
   index: number;
-  value: Value;
   level: number;
+  childrenSize: number;
+  value: Props['value'];
+  parentValue: Props['parentValue'];
+  /**
+   * A reference to the element that will render the `TreeItem`,
+   * this is necessary for nodes with parents (to ensure child to parent navigation),
+   * if a node has no parent then this reference will be null.
+   */
   ref: React.RefObject<HTMLDivElement>;
-  getTreeItemProps(): Required<
-    Pick<TreeItemProps<Value>, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>
-  > &
-    TreeItemProps<Value>;
+  getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> &
+    Omit<Props, 'parentValue'>;
 };
 
 export type FlatTreeProps<Value = string> = Required<
-  Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & { ref: React.Ref<HTMLDivElement> }
->;
+  Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>
+> & { ref: React.Ref<HTMLDivElement> };
 
 /**
  * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -52,13 +52,13 @@ export type FlatTreeProps<Value = string> = Required<
  *
  * On simple scenarios it is advised to simply use a nested structure instead.
  */
-export type FlatTree<Value = string> = {
+export type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {
   /**
    * returns the properties required for the Tree component to work properly.
    * That includes:
    * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
    */
-  getTreeProps(): FlatTreeProps<Value>;
+  getTreeProps(): FlatTreeProps<Props['value']>;
   /**
    * internal method used to react to an `onNavigation` event.
    * This method ensures proper navigation on keyboard and mouse interaction.
@@ -82,7 +82,7 @@ export type FlatTree<Value = string> = {
    * };
    *```
    */
-  navigate(data: TreeNavigationData_unstable<Value>): void;
+  navigate(data: TreeNavigationData_unstable<Props['value']>): void;
   /**
    * returns next item to be focused on a navigation.
    * This method is provided to decouple the element that needs to be focused from
@@ -91,15 +91,20 @@ export type FlatTree<Value = string> = {
    * On the case of TypeAhead navigation this method returns the current item.
    */
   getNextNavigableItem(
-    visibleItems: FlatTreeItem<Value>[],
-    data: TreeNavigationData_unstable<Value>,
-  ): FlatTreeItem<Value> | undefined;
+    visibleItems: FlatTreeItem<Props>[],
+    data: TreeNavigationData_unstable<Props['value']>,
+  ): FlatTreeItem<Props> | undefined;
   /**
    * an iterable containing all visually available flat tree items
    */
-  items(): IterableIterator<FlatTreeItem<Value>>;
+  items(): IterableIterator<FlatTreeItem<Props>>;
 };
 
+type FlatTreeOptions<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = Pick<
+  TreeProps<Props['value']>,
+  'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'
+>;
+
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
  * in multiple scenarios including virtualization.
@@ -112,15 +117,15 @@ export type FlatTree<Value = string> = {
  * @param flatTreeItemProps - a list of tree items
  * @param options - in case control over the internal openItems is required
  */
-export function useFlatTree_unstable<Value = string>(
-  flatTreeItemProps: FlatTreeItemProps<Value>[],
-  options: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'> = {},
-): FlatTree<Value> {
-  const [openItems, updateOpenItems] = useOpenItemsState(options);
+export function useFlatTree_unstable<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(
+  flatTreeItemProps: Props[],
+  options: FlatTreeOptions<Props> = {},
+): FlatTree<Props> {
+  const [openItems, updateOpenItems] = useOpenItemsState<Props['value']>(options);
   const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);
   const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
 
-  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData<Value>) => {
+  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData<Props['value']>) => {
     options.onOpenChange?.(event, data);
     if (!event.isDefaultPrevented()) {
       updateOpenItems(data);
@@ -129,7 +134,7 @@ export function useFlatTree_unstable<Value = string>(
   });
 
   const handleNavigation = useEventCallback(
-    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable<Value>) => {
+    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable<Props['value']>) => {
       options.onNavigation_unstable?.(event, data);
       if (!event.isDefaultPrevented()) {
         navigate(data);
@@ -139,7 +144,7 @@ export function useFlatTree_unstable<Value = string>(
   );
 
   const getNextNavigableItem = useEventCallback(
-    (visibleItems: FlatTreeItem<Value>[], data: TreeNavigationData_unstable<Value>) => {
+    (visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable<Props['value']>) => {
       const item = flatTreeItems.get(data.value);
       if (item) {
         switch (data.type) {
@@ -175,7 +180,7 @@ export function useFlatTree_unstable<Value = string>(
   );
 
   const items = React.useCallback(
-    () => VisibleFlatTreeItemGenerator<Value>(openItems, flatTreeItems),
+    () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems),
     [openItems, flatTreeItems],
   );
 
diff --git a/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts b/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts
index b1b9e6d55cc7c0..afb4d6a35fe348 100644
--- a/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts
+++ b/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts
@@ -7,13 +7,16 @@ import { treeDataTypes } from '../utils/tokens';
 import { treeItemFilter } from '../utils/treeItemFilter';
 import { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';
 import { useRovingTabIndex } from './useRovingTabIndexes';
+import { FlatTreeItemProps } from './useFlatTree';
 
-export function useFlatTreeNavigation<Value = string>(flatTreeItems: FlatTreeItems<Value>) {
+export function useFlatTreeNavigation<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(
+  flatTreeItems: FlatTreeItems<Props>,
+) {
   const { targetDocument } = useFluent_unstable();
   const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);
   const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
 
-  function getNextElement(data: TreeNavigationData_unstable<Value>) {
+  function getNextElement(data: TreeNavigationData_unstable<Props['value']>) {
     if (!targetDocument || !treeItemWalkerRef.current) {
       return null;
     }
@@ -43,7 +46,7 @@ export function useFlatTreeNavigation<Value = string>(flatTreeItems: FlatTreeIte
         return treeItemWalker.previousElement();
     }
   }
-  const navigate = useEventCallback((data: TreeNavigationData_unstable<Value>) => {
+  const navigate = useEventCallback((data: TreeNavigationData_unstable<Props['value']>) => {
     const nextElement = getNextElement(data);
     if (nextElement) {
       rove(nextElement);
@@ -66,7 +69,7 @@ function firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLEle
   return null;
 }
 
-function parentElement<Value = string>(flatTreeItems: FlatTreeItems<Value>, value: Value) {
+function parentElement(flatTreeItems: FlatTreeItems<FlatTreeItemProps<unknown>>, value: unknown) {
   const flatTreeItem = flatTreeItems.get(value);
   if (flatTreeItem?.parentValue) {
     const parentItem = flatTreeItems.get(flatTreeItem.parentValue);
diff --git a/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts b/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts
index 1cb3d00eb1fe40..6643c14990f5eb 100644
--- a/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts
+++ b/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts
@@ -1,33 +1,33 @@
 import type { ImmutableSet } from './ImmutableSet';
-import type { FlatTreeItem, FlatTreeItemProps, MutableFlatTreeItem } from '../hooks/useFlatTree';
+import type { FlatTreeItem, FlatTreeItemProps } from '../hooks/useFlatTree';
 import * as React from 'react';
 
 /**
  * @internal
  */
-export type FlatTreeItems<Value = string> = {
+export type FlatTreeItems<Props extends FlatTreeItemProps<unknown>> = {
   size: number;
-  root: FlatTreeItem<Value>;
-  get(key: Value): FlatTreeItem<Value> | undefined;
-  set(key: Value, value: FlatTreeItem<Value>): void;
-  getByIndex(index: number): FlatTreeItem<Value>;
+  root: FlatTreeItem;
+  get(key: Props['value']): FlatTreeItem<Props> | undefined;
+  set(key: Props['value'], value: FlatTreeItem<Props>): void;
+  getByIndex(index: number): FlatTreeItem<Props>;
 };
 
 /**
  * creates a list of flat tree items
  * and provides a map to access each item by id
  */
-export function createFlatTreeItems<Value = string>(
-  flatTreeItemProps: FlatTreeItemProps<Value>[],
-): FlatTreeItems<Value> {
-  const root = createFlatTreeRootItem<Value>();
-  const itemsPerValue = new Map<Value, MutableFlatTreeItem<Value>>([[flatTreeRootId as Value, root]]);
-  const items: MutableFlatTreeItem<Value>[] = [];
+export function createFlatTreeItems<Props extends FlatTreeItemProps<unknown>>(
+  flatTreeItemProps: Props[],
+): FlatTreeItems<Props> {
+  const root = createFlatTreeRootItem();
+  const itemsPerValue = new Map<unknown, FlatTreeItem<FlatTreeItemProps<unknown>>>([[root.value, root]]);
+  const items: FlatTreeItem<FlatTreeItemProps<unknown>>[] = [];
 
   for (let index = 0; index < flatTreeItemProps.length; index++) {
-    const { parentValue = flatTreeRootId as Value, ...treeItemProps } = flatTreeItemProps[index];
+    const { parentValue = flatTreeRootId, ...treeItemProps } = flatTreeItemProps[index];
 
-    const nextItemProps: FlatTreeItemProps<Value> | undefined = flatTreeItemProps[index + 1];
+    const nextItemProps: Props | undefined = flatTreeItemProps[index + 1];
     const currentParent = itemsPerValue.get(parentValue);
     if (!currentParent) {
       if (process.env.NODE_ENV === 'development') {
@@ -38,12 +38,13 @@ export function createFlatTreeItems<Value = string>(
       }
       break;
     }
-    const isLeaf = nextItemProps?.parentValue !== treeItemProps.value;
+    const isLeaf =
+      treeItemProps.leaf ?? (treeItemProps.value === undefined || nextItemProps?.parentValue !== treeItemProps.value);
     const currentLevel = (currentParent.level ?? 0) + 1;
     const currentChildrenSize = ++currentParent.childrenSize;
     const ref = React.createRef<HTMLDivElement>();
 
-    const flatTreeItem: MutableFlatTreeItem<Value> = {
+    const flatTreeItem: FlatTreeItem<FlatTreeItemProps<unknown>> = {
       value: treeItemProps.value,
       getTreeItemProps: () => ({
         ...treeItemProps,
@@ -64,27 +65,30 @@ export function createFlatTreeItems<Value = string>(
     items.push(flatTreeItem);
   }
 
-  return {
+  const flatTreeItems: FlatTreeItems<FlatTreeItemProps<unknown>> = {
     root,
     size: items.length,
     getByIndex: index => items[index],
-    get: id => itemsPerValue.get(id),
-    set: (id, value) => itemsPerValue.set(id, value),
+    get: key => itemsPerValue.get(key),
+    set: (key, value) => itemsPerValue.set(key, value),
   };
+
+  return flatTreeItems as FlatTreeItems<Props>;
 }
 
-export const flatTreeRootId = '__fuiFlatTreeRoot' as unknown;
+export const flatTreeRootId = '__fuiFlatTreeRoot';
 
-function createFlatTreeRootItem<Value = string>(): FlatTreeItem<Value> {
+function createFlatTreeRootItem(): FlatTreeItem {
   return {
     ref: { current: null },
-    value: flatTreeRootId as Value,
+    value: flatTreeRootId,
+    parentValue: undefined,
     getTreeItemProps: () => {
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
         console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
       }
-      return { value: flatTreeRootId as Value, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };
+      return { value: flatTreeRootId, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };
     },
     childrenSize: 0,
     get index() {
@@ -99,12 +103,12 @@ function createFlatTreeRootItem<Value = string>(): FlatTreeItem<Value> {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function* VisibleFlatTreeItemGenerator<Value = string>(
-  openItems: ImmutableSet<Value>,
-  flatTreeItems: FlatTreeItems<Value>,
+export function* VisibleFlatTreeItemGenerator<Props extends FlatTreeItemProps<unknown>>(
+  openItems: ImmutableSet<unknown>,
+  flatTreeItems: FlatTreeItems<Props>,
 ) {
   for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {
-    const item: MutableFlatTreeItem<Value> = flatTreeItems.getByIndex(index);
+    const item = flatTreeItems.getByIndex(index) as FlatTreeItem<Props>;
     const parent = item.parentValue ? flatTreeItems.get(item.parentValue) ?? flatTreeItems.root : flatTreeItems.root;
     if (isItemVisible(item, openItems, flatTreeItems)) {
       item.index = visibleIndex++;
@@ -115,10 +119,10 @@ export function* VisibleFlatTreeItemGenerator<Value = string>(
   }
 }
 
-function isItemVisible<Value>(
-  item: FlatTreeItem<Value>,
-  openItems: ImmutableSet<Value>,
-  flatTreeItems: FlatTreeItems<Value>,
+function isItemVisible(
+  item: FlatTreeItem<FlatTreeItemProps<unknown>>,
+  openItems: ImmutableSet<unknown>,
+  flatTreeItems: FlatTreeItems<FlatTreeItemProps<unknown>>,
 ) {
   if (item.level === 1) {
     return true;
diff --git a/packages/react-components/react-tree/src/utils/flattenTree.ts b/packages/react-components/react-tree/src/utils/flattenTree.ts
index d41b65ea8ce39c..035d147f449d8e 100644
--- a/packages/react-components/react-tree/src/utils/flattenTree.ts
+++ b/packages/react-components/react-tree/src/utils/flattenTree.ts
@@ -2,30 +2,33 @@ import * as React from 'react';
 import { FlatTreeItemProps } from '../hooks/useFlatTree';
 import { TreeItemProps } from '../TreeItem';
 
-export type NestedTreeItem<Value = string> = Omit<TreeItemProps<Value>, 'subtree'> & {
-  subtree?: NestedTreeItem<Value>[];
+export type NestedTreeItem<Props extends TreeItemProps<unknown>> = Omit<Props, 'subtree'> & {
+  subtree?: NestedTreeItem<Props>[];
 };
 
+export type FlattenedTreeItem<Props extends TreeItemProps<unknown>> = FlatTreeItemProps<NonNullable<Props['value']>> &
+  Props;
+
 let count = 1;
-function flattenTreeRecursive<Value = string>(
-  items: NestedTreeItem<Value>[],
-  parent?: FlatTreeItemProps<Value>,
+function flattenTreeRecursive<Props extends TreeItemProps<unknown>>(
+  items: NestedTreeItem<Props>[],
+  parent?: FlatTreeItemProps<Props['value']> & Props,
   level = 1,
-): FlatTreeItemProps<Value>[] {
-  return items.reduce<FlatTreeItemProps<Value>[]>((acc, { subtree, ...item }, index) => {
+): FlattenedTreeItem<Props>[] {
+  return items.reduce<FlattenedTreeItem<Props>[]>((acc, { subtree, ...item }, index) => {
     const id = item.id ?? `fui-FlatTreeItem-${count++}`;
-    const flatTreeItem: FlatTreeItemProps<Value> = {
+    const flatTreeItem = {
       'aria-level': level,
       'aria-posinset': index + 1,
       'aria-setsize': items.length,
       parentValue: parent?.value,
-      value: item.value ?? (id as unknown as Value),
+      value: item.value ?? (id as unknown as Props['value']),
       leaf: subtree === undefined,
       ...item,
-    };
+    } as FlattenedTreeItem<Props>;
     acc.push(flatTreeItem);
     if (subtree !== undefined) {
-      acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1));
+      acc.push(...flattenTreeRecursive<Props>(subtree, flatTreeItem, level + 1));
     }
     return acc;
   }, []);
@@ -72,8 +75,9 @@ function flattenTreeRecursive<Value = string>(
  * ```
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const flattenTree_unstable = <Value = string>(items: NestedTreeItem<Value>[]): FlatTreeItemProps<Value>[] =>
-  flattenTreeRecursive(items);
+export const flattenTree_unstable = <Props extends TreeItemProps<unknown>>(
+  items: NestedTreeItem<Props>[],
+): FlattenedTreeItem<Props>[] => flattenTreeRecursive(items);
 
 /**
  * @internal
diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
index ede8cbcd248d49..e99aa65ed5b5ea 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
@@ -12,15 +12,17 @@ import { Delete20Regular } from '@fluentui/react-icons';
 import { Button } from '@fluentui/react-components';
 import story from './TreeItemAddRemove.md';
 
-const defaultSubTrees: FlatTreeItemProps[][] = [
+type ItemProps = FlatTreeItemProps & { content: string };
+
+const defaultSubTrees: ItemProps[][] = [
   [
-    { value: '1', children: <TreeItemLayout>Level 1, item 1</TreeItemLayout> },
-    { value: '1-1', parentValue: '1', children: <TreeItemLayout>Item 1-1</TreeItemLayout> },
-    { value: '1-2', parentValue: '1', children: <TreeItemLayout>Item 1-2</TreeItemLayout> },
+    { value: '1', content: 'Level 1, item 1' },
+    { value: '1-1', parentValue: '1', content: 'Item 1-1' },
+    { value: '1-2', parentValue: '1', content: 'Item 1-2' },
   ],
   [
-    { value: '2', children: <TreeItemLayout>Level 1, item 2</TreeItemLayout> },
-    { value: '2-1', parentValue: '2', children: <TreeItemLayout>Item 2-1</TreeItemLayout> },
+    { value: '2', content: 'Level 1, item 2' },
+    { value: '2-1', parentValue: '2', content: 'Item 2-1' },
   ],
 ];
 
@@ -38,12 +40,12 @@ export const AddRemoveTreeItem = () => {
     setTrees(currentTrees => {
       const lastItem = currentTrees[subtreeIndex][currentTrees[subtreeIndex].length - 1];
       const newItemValue = `${subtreeIndex + 1}-${Number(lastItem.value.slice(2)) + 1}`;
-      const nextSubTree: FlatTreeItemProps[] = [
+      const nextSubTree: ItemProps[] = [
         ...currentTrees[subtreeIndex],
         {
           value: newItemValue,
           parentValue: currentTrees[subtreeIndex][0].value,
-          children: <TreeItemLayout>New item {newItemValue}</TreeItemLayout>,
+          content: `New item ${newItemValue}`,
         },
       ];
       return [...currentTrees.slice(0, subtreeIndex), nextSubTree, ...currentTrees.slice(subtreeIndex + 1)];
@@ -63,13 +65,13 @@ export const AddRemoveTreeItem = () => {
         {
           value: '1-btn',
           parentValue: '1',
-          children: <TreeItemLayout>Add new item</TreeItemLayout>,
+          content: 'Add new item',
         },
         ...trees[1],
         {
           value: '2-btn',
           parentValue: '2',
-          children: <TreeItemLayout>Add new item</TreeItemLayout>,
+          content: 'Add new item',
         },
       ],
       [trees],
@@ -81,10 +83,11 @@ export const AddRemoveTreeItem = () => {
     <Tree {...flatTree.getTreeProps()} aria-label="Tree">
       {Array.from(flatTree.items(), item => {
         const isUndeletable = item.level === 1 || item.value.endsWith('-btn');
+        const { content, ...treeItemProps } = item.getTreeItemProps();
         return (
           <TreeItem
             key={item.value}
-            {...item.getTreeItemProps()}
+            {...treeItemProps}
             actions={
               isUndeletable ? null : (
                 <Button
@@ -95,7 +98,9 @@ export const AddRemoveTreeItem = () => {
                 />
               )
             }
-          />
+          >
+            <TreeItemLayout>{content}</TreeItemLayout>
+          </TreeItem>
         );
       })}
     </Tree>
diff --git a/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx
index cefd20fde42133..27e4a3441c7828 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx
@@ -18,28 +18,30 @@ import { FixedSizeList, FixedSizeListProps, ListChildComponentProps } from 'reac
 import { ForwardRefComponent, getSlots } from '@fluentui/react-components';
 import story from './Virtualization.md';
 
-const defaultItems: FlatTreeItemProps<string>[] = [
+type ItemProps = FlatTreeItemProps & { content: string };
+
+const defaultItems: ItemProps[] = [
   {
     id: 'flatTreeItem_lvl-1_item-1',
     value: 'flatTreeItem_lvl-1_item-1',
-    children: <TreeItemLayout>Level 1, item 1</TreeItemLayout>,
+    content: `Level 1, item 1`,
   },
   ...Array.from({ length: 300 }, (_, i) => ({
     id: `flatTreeItem_lvl-1_item-1--child:${i}`,
     value: `flatTreeItem_lvl-1_item-1--child:${i}`,
     parentValue: 'flatTreeItem_lvl-1_item-1',
-    children: <TreeItemLayout>Item {i + 1}</TreeItemLayout>,
+    content: `Item ${i + 1}`,
   })),
   {
     id: 'flatTreeItem_lvl-1_item-2',
     value: 'flatTreeItem_lvl-1_item-2',
-    children: <TreeItemLayout>Level 1, item 2</TreeItemLayout>,
+    content: `Level 1, item 2`,
   },
   ...Array.from({ length: 300 }, (_, index) => ({
     id: `flatTreeItem_lvl-1_item-2--child:${index}`,
     value: `flatTreeItem_lvl-1_item-2--child:${index}`,
     parentValue: 'flatTreeItem_lvl-1_item-2',
-    children: <TreeItemLayout>Item {index + 1}</TreeItemLayout>,
+    content: `Item ${index + 1}`,
   })),
 ];
 
@@ -67,9 +69,10 @@ interface FixedSizeTreeItemProps extends ListChildComponentProps {
 
 const FixedSizeTreeItem = (props: FixedSizeTreeItemProps) => {
   const flatTreeItem = props.data[props.index];
+  const { content, ...treeItemProps } = flatTreeItem.getTreeItemProps();
   return (
-    <TreeItem {...flatTreeItem.getTreeItemProps()} style={props.style}>
-      <TreeItemLayout>Item {props.index}</TreeItemLayout>
+    <TreeItem {...treeItemProps} style={props.style}>
+      <TreeItemLayout>{content}</TreeItemLayout>
     </TreeItem>
   );
 };
@@ -91,6 +94,7 @@ export const Virtualization = () => {
     }
     flatTree.navigate(data);
   };
+
   return (
     <FixedSizeTree
       {...flatTree.getTreeProps()}
diff --git a/packages/react-components/react-tree/stories/D_flatTree/flattenTree.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/flattenTree.stories.tsx
index 06a9906742cc35..096ed721fce3e4 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/flattenTree.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/flattenTree.stories.tsx
@@ -1,33 +1,40 @@
 import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout, useFlatTree_unstable, flattenTree_unstable } from '@fluentui/react-tree';
+import {
+  Tree,
+  TreeItem,
+  useFlatTree_unstable,
+  flattenTree_unstable,
+  TreeItemProps,
+  TreeItemLayout,
+} from '@fluentui/react-tree';
 import story from './flattenTree.md';
 
-const defaultItems = flattenTree_unstable<string>([
+type Item = TreeItemProps & { layout: string };
+
+const defaultItems = flattenTree_unstable<Item>([
   {
-    children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,
+    layout: 'level 1, item 1',
     subtree: [
+      { layout: 'level 2, item 1' },
       {
-        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
-      },
-      {
-        children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,
+        layout: 'level 2, item 2',
       },
       {
-        children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,
+        layout: 'level 2, item 3',
       },
     ],
   },
   {
-    children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,
+    layout: 'level 1, item 2',
     subtree: [
       {
-        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
+        layout: 'level 2, item 1',
         subtree: [
           {
-            children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,
+            layout: 'level 3, item 1',
             subtree: [
               {
-                children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,
+                layout: 'level 4, item 1',
               },
             ],
           },
@@ -38,12 +45,17 @@ const defaultItems = flattenTree_unstable<string>([
 ]);
 
 export const FlattenTree = () => {
-  const flatTree = useFlatTree_unstable<string>(defaultItems);
+  const flatTree = useFlatTree_unstable(defaultItems);
   return (
     <Tree {...flatTree.getTreeProps()} aria-label="Tree">
-      {Array.from(flatTree.items(), item => (
-        <TreeItem {...item.getTreeItemProps()} key={item.value} />
-      ))}
+      {Array.from(flatTree.items(), item => {
+        const { layout, ...itemProps } = item.getTreeItemProps();
+        return (
+          <TreeItem {...itemProps} key={item.value}>
+            <TreeItemLayout>{layout}</TreeItemLayout>
+          </TreeItem>
+        );
+      })}
     </Tree>
   );
 };
diff --git a/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx
index 89edcaa09579bc..cb9f9e5d60d5fb 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx
@@ -2,64 +2,21 @@ import * as React from 'react';
 import { Tree, TreeItem, TreeItemLayout, useFlatTree_unstable, FlatTreeItemProps } from '@fluentui/react-tree';
 import story from './useFlatTree.md';
 
-const defaultItems: FlatTreeItemProps[] = [
-  {
-    value: '1',
-    children: <TreeItemLayout>Level 1, item 1</TreeItemLayout>,
-  },
-  {
-    value: '1-1',
-    parentValue: '1',
-    children: <TreeItemLayout>Level 2, item 1</TreeItemLayout>,
-  },
-  {
-    value: '1-2',
-    parentValue: '1',
-    children: <TreeItemLayout>Level 2, item 2</TreeItemLayout>,
-  },
-  {
-    value: '1-3',
-    parentValue: '1',
-    children: <TreeItemLayout>Level 2, item 3</TreeItemLayout>,
-  },
-  {
-    value: '2',
-    children: <TreeItemLayout>Level 1, item 2</TreeItemLayout>,
-  },
-  {
-    value: '2-1',
-    parentValue: '2',
-    children: <TreeItemLayout>Level 2, item 1</TreeItemLayout>,
-  },
-  {
-    value: '2-1-1',
-    parentValue: '2-1',
-    children: <TreeItemLayout>Level 3, item 1</TreeItemLayout>,
-  },
-  {
-    value: '2-2',
-    parentValue: '2',
-    children: <TreeItemLayout>Level 2, item 2</TreeItemLayout>,
-  },
-  {
-    value: '2-2-1',
-    parentValue: '2-2',
-    children: <TreeItemLayout>Level 3, item 1</TreeItemLayout>,
-  },
-  {
-    value: '2-2-2',
-    parentValue: '2-2',
-    children: <TreeItemLayout>Level 3, item 2</TreeItemLayout>,
-  },
-  {
-    value: '2-2-3',
-    parentValue: '2-2',
-    children: <TreeItemLayout>Level 3, item 3</TreeItemLayout>,
-  },
-  {
-    value: '3',
-    children: <TreeItemLayout>Level 1, item 3</TreeItemLayout>,
-  },
+type Item = FlatTreeItemProps & { content: string };
+
+const defaultItems: Item[] = [
+  { value: '1', content: 'Level 1, item 1' },
+  { value: '1-1', parentValue: '1', content: 'Level 2, item 1' },
+  { value: '1-2', parentValue: '1', content: 'Level 2, item 2' },
+  { value: '1-3', parentValue: '1', content: 'Level 2, item 3' },
+  { value: '2', content: 'Level 1, item 2' },
+  { value: '2-1', parentValue: '2', content: 'Level 2, item 1' },
+  { value: '2-1-1', parentValue: '2-1', content: 'Level 3, item 1' },
+  { value: '2-2', parentValue: '2', content: 'Level 2, item 2' },
+  { value: '2-2-1', parentValue: '2-2', content: 'Level 3, item 1' },
+  { value: '2-2-2', parentValue: '2-2', content: 'Level 3, item 2' },
+  { value: '2-2-3', parentValue: '2-2', content: 'Level 3, item 3' },
+  { value: '3', content: 'Level 1, item 3' },
 ];
 
 export const UseFlatTree = () => {
@@ -67,9 +24,14 @@ export const UseFlatTree = () => {
 
   return (
     <Tree {...flatTree.getTreeProps()} aria-label="Tree">
-      {Array.from(flatTree.items(), flatTreeItem => (
-        <TreeItem {...flatTreeItem.getTreeItemProps()} key={flatTreeItem.value} />
-      ))}
+      {Array.from(flatTree.items(), flatTreeItem => {
+        const { content, ...treeItemProps } = flatTreeItem.getTreeItemProps();
+        return (
+          <TreeItem {...treeItemProps} key={flatTreeItem.value}>
+            <TreeItemLayout>{content}</TreeItemLayout>
+          </TreeItem>
+        );
+      })}
     </Tree>
   );
 };

From e0e8de0dadce1a0adcd77acb96028d562773b53d Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Wed, 26 Apr 2023 13:48:37 +0200
Subject: [PATCH 07/28] chore: bump @griffel/eslint-plugin & enable
 @griffel/hook-naming (#27687)

---
 .../Slider/Sliderv9Examples.stories.tsx       |   4 +-
 ...-5fd26f6f-a0b9-458f-80e0-86e99da9672a.json |   7 ++
 package.json                                  |   2 +-
 packages/eslint-plugin/package.json           |   1 +
 .../eslint-plugin/src/configs/react-config.js |   1 +
 .../components/{{componentName}}/index.ts.hbs |   2 +-
 ... use{{componentName}}Styles.styles.ts.hbs} |   0
 .../{{componentName}}.tsx.hbs                 |   2 +-
 yarn.lock                                     | 118 ++++++++++--------
 9 files changed, 77 insertions(+), 60 deletions(-)
 create mode 100644 change/@fluentui-eslint-plugin-5fd26f6f-a0b9-458f-80e0-86e99da9672a.json
 rename scripts/generators/create-component/plop-templates/src/components/{{componentName}}/{use{{componentName}}Styles.ts.hbs => use{{componentName}}Styles.styles.ts.hbs} (100%)

diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx
index bcf94140fb3f68..75c26dff94bf3e 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx
@@ -33,7 +33,7 @@ export const V9ControlledExample = () => {
   );
 };
 
-const getFormattedExampleStyles = makeStyles({
+const useGetFormattedExampleStyles = makeStyles({
   wrapper: {
     display: 'grid',
     alignItems: 'center',
@@ -43,7 +43,7 @@ const getFormattedExampleStyles = makeStyles({
 });
 
 export const V9FormattedValueExample = () => {
-  const styles = getFormattedExampleStyles();
+  const styles = useGetFormattedExampleStyles();
   const [sliderValue, setSliderValue] = React.useState(0);
   const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value);
   const formattedId = useId();
diff --git a/change/@fluentui-eslint-plugin-5fd26f6f-a0b9-458f-80e0-86e99da9672a.json b/change/@fluentui-eslint-plugin-5fd26f6f-a0b9-458f-80e0-86e99da9672a.json
new file mode 100644
index 00000000000000..f99e254f762e86
--- /dev/null
+++ b/change/@fluentui-eslint-plugin-5fd26f6f-a0b9-458f-80e0-86e99da9672a.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: enable @griffel/hook-naming rule",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
index 12d49f6b292c6f..e9621807e777e3 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,7 @@
     "@cypress/webpack-dev-server": "1.8.3",
     "@fluentui/react-icons": "^2.0.196",
     "@griffel/babel-preset": "1.4.8",
-    "@griffel/eslint-plugin": "1.0.0",
+    "@griffel/eslint-plugin": "^1.2.0",
     "@griffel/jest-serializer": "1.1.4",
     "@griffel/react": "^1.5.2",
     "@griffel/webpack-extraction-plugin": "0.3.3",
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 333859b9a1e342..01a723281b5777 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -13,6 +13,7 @@
     "test": "yarn jest --passWithNoTests"
   },
   "dependencies": {
+    "@griffel/eslint-plugin": "^1.2.0",
     "@rnx-kit/eslint-plugin": "^0.2.5",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/experimental-utils": "^4.22.0",
diff --git a/packages/eslint-plugin/src/configs/react-config.js b/packages/eslint-plugin/src/configs/react-config.js
index e3a86533ddc77c..a65c56b48539b3 100644
--- a/packages/eslint-plugin/src/configs/react-config.js
+++ b/packages/eslint-plugin/src/configs/react-config.js
@@ -25,6 +25,7 @@ module.exports = {
      * griffel eslint rules
      * @see https://github.com/microsoft/griffel/tree/main/packages/eslint-plugin
      */
+    '@griffel/hook-naming': 'error',
     '@griffel/no-shorthands': 'error',
     /**
      * react eslint rules
diff --git a/scripts/generators/create-component/plop-templates/src/components/{{componentName}}/index.ts.hbs b/scripts/generators/create-component/plop-templates/src/components/{{componentName}}/index.ts.hbs
index 23b6962a78c39f..6153344477e031 100644
--- a/scripts/generators/create-component/plop-templates/src/components/{{componentName}}/index.ts.hbs
+++ b/scripts/generators/create-component/plop-templates/src/components/{{componentName}}/index.ts.hbs
@@ -2,4 +2,4 @@ export * from './{{componentName}}';
 export * from './{{componentName}}.types';
 export * from './render{{componentName}}';
 export * from './use{{componentName}}';
-export * from './use{{componentName}}Styles';
+export * from './use{{componentName}}Styles.styles';
diff --git a/scripts/generators/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs b/scripts/generators/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.styles.ts.hbs
similarity index 100%
rename from scripts/generators/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs
rename to scripts/generators/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.styles.ts.hbs
diff --git a/scripts/generators/create-component/plop-templates/src/components/{{componentName}}/{{componentName}}.tsx.hbs b/scripts/generators/create-component/plop-templates/src/components/{{componentName}}/{{componentName}}.tsx.hbs
index 992ff7dd15ea8d..0e16ce7edec0e2 100644
--- a/scripts/generators/create-component/plop-templates/src/components/{{componentName}}/{{componentName}}.tsx.hbs
+++ b/scripts/generators/create-component/plop-templates/src/components/{{componentName}}/{{componentName}}.tsx.hbs
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { use{{componentName}}_unstable } from './use{{componentName}}';
 import { render{{componentName}}_unstable } from './render{{componentName}}';
-import { use{{componentName}}Styles_unstable } from './use{{componentName}}Styles';
+import { use{{componentName}}Styles_unstable } from './use{{componentName}}Styles.styles';
 import type { {{componentName}}Props } from './{{componentName}}.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/yarn.lock b/yarn.lock
index 577175f92bf6f7..2ce3a8d3ab13fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1603,6 +1603,13 @@
     esquery "^1.4.0"
     jsdoc-type-pratt-parser "1.1.1"
 
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
 "@eslint/eslintrc@^0.4.0":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -1678,13 +1685,14 @@
     stylis "^4.0.13"
     tslib "^2.1.0"
 
-"@griffel/eslint-plugin@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@griffel/eslint-plugin/-/eslint-plugin-1.0.0.tgz#cba251b7a140399c6686b72a72e9fa2ee481f532"
-  integrity sha512-I8oQcyTdcPmOqX4Ti7FVP8fTJRneQBhzNf6eh8ce7avvVF7YOkiIg+Qu9dVvXSR/BxkY/Ncs8CGtUV++kTBx0g==
+"@griffel/eslint-plugin@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@griffel/eslint-plugin/-/eslint-plugin-1.2.0.tgz#a4e211c16b4d3f0cdb90b47c5af1dce191b10bd4"
+  integrity sha512-ThqQR1UIeM+WZH1z8RUrKHCDuSXrFEwRIL4nX0UmBZznV/36DiGzODOQl6ZoZ9eCGoGYxTnl6riwy/1cB/0yGA==
   dependencies:
-    "@typescript-eslint/utils" "^5.20.0"
-    csstype "^3.0.10"
+    "@typescript-eslint/utils" "^5.47.0"
+    csstype "^3.1.2"
+    tslib "^2.1.0"
 
 "@griffel/jest-serializer@1.1.4":
   version "1.1.4"
@@ -5995,6 +6003,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.3.tgz#5798ecf1bec94eaa64db39ee52808ec0693315aa"
   integrity sha512-KQf+QAMWKMrtBMsB8/24w53tEsxllMj6TuA80TT/5igJalLI/zm0L3oXRbIAl4Ohfc85gyHX/jhMwsVkmhLU4A==
 
+"@types/semver@^7.3.12":
+  version "7.3.13"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
+  integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==
+
 "@types/serve-index@^1.9.1":
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
@@ -6279,23 +6292,23 @@
     "@typescript-eslint/types" "4.22.0"
     "@typescript-eslint/visitor-keys" "4.22.0"
 
-"@typescript-eslint/scope-manager@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.23.0.tgz#4305e61c2c8e3cfa3787d30f54e79430cc17ce1b"
-  integrity sha512-EhjaFELQHCRb5wTwlGsNMvzK9b8Oco4aYNleeDlNuL6qXWDF47ch4EhVNPh8Rdhf9tmqbN4sWDk/8g+Z/J8JVw==
+"@typescript-eslint/scope-manager@5.59.1":
+  version "5.59.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.1.tgz#8a20222719cebc5198618a5d44113705b51fd7fe"
+  integrity sha512-mau0waO5frJctPuAzcxiNWqJR5Z8V0190FTSqRw1Q4Euop6+zTwHAf8YIXNwDOT29tyUDrQ65jSg9aTU/H0omA==
   dependencies:
-    "@typescript-eslint/types" "5.23.0"
-    "@typescript-eslint/visitor-keys" "5.23.0"
+    "@typescript-eslint/types" "5.59.1"
+    "@typescript-eslint/visitor-keys" "5.59.1"
 
 "@typescript-eslint/types@4.22.0":
   version "4.22.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.22.0.tgz#0ca6fde5b68daf6dba133f30959cc0688c8dd0b6"
   integrity sha512-sW/BiXmmyMqDPO2kpOhSy2Py5w6KvRRsKZnV0c4+0nr4GIcedJwXAq+RHNK4lLVEZAJYFltnnk1tJSlbeS9lYA==
 
-"@typescript-eslint/types@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.23.0.tgz#8733de0f58ae0ed318dbdd8f09868cdbf9f9ad09"
-  integrity sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==
+"@typescript-eslint/types@5.59.1":
+  version "5.59.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.1.tgz#03f3fedd1c044cb336ebc34cc7855f121991f41d"
+  integrity sha512-dg0ICB+RZwHlysIy/Dh1SP+gnXNzwd/KS0JprD3Lmgmdq+dJAJnUPe1gNG34p0U19HvRlGX733d/KqscrGC1Pg==
 
 "@typescript-eslint/typescript-estree@4.22.0":
   version "4.22.0"
@@ -6310,30 +6323,32 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/typescript-estree@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz#dca5f10a0a85226db0796e8ad86addc9aee52065"
-  integrity sha512-xE9e0lrHhI647SlGMl+m+3E3CKPF1wzvvOEWnuE3CCjjT7UiRnDGJxmAcVKJIlFgK6DY9RB98eLr1OPigPEOGg==
+"@typescript-eslint/typescript-estree@5.59.1":
+  version "5.59.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.1.tgz#4aa546d27fd0d477c618f0ca00b483f0ec84c43c"
+  integrity sha512-lYLBBOCsFltFy7XVqzX0Ju+Lh3WPIAWxYpmH/Q7ZoqzbscLiCW00LeYCdsUnnfnj29/s1WovXKh2gwCoinHNGA==
   dependencies:
-    "@typescript-eslint/types" "5.23.0"
-    "@typescript-eslint/visitor-keys" "5.23.0"
-    debug "^4.3.2"
-    globby "^11.0.4"
+    "@typescript-eslint/types" "5.59.1"
+    "@typescript-eslint/visitor-keys" "5.59.1"
+    debug "^4.3.4"
+    globby "^11.1.0"
     is-glob "^4.0.3"
-    semver "^7.3.5"
+    semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@^5.20.0":
-  version "5.23.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.23.0.tgz#4691c3d1b414da2c53d8943310df36ab1c50648a"
-  integrity sha512-dbgaKN21drqpkbbedGMNPCtRPZo1IOUr5EI9Jrrh99r5UW5Q0dz46RKXeSBoPV+56R6dFKpbrdhgUNSJsDDRZA==
+"@typescript-eslint/utils@^5.47.0":
+  version "5.59.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.59.1.tgz#d89fc758ad23d2157cfae53f0b429bdf15db9473"
+  integrity sha512-MkTe7FE+K1/GxZkP5gRj3rCztg45bEhsd8HYjczBuYm+qFHP5vtZmjx3B0yUCDotceQ4sHgTyz60Ycl225njmA==
   dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
     "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.23.0"
-    "@typescript-eslint/types" "5.23.0"
-    "@typescript-eslint/typescript-estree" "5.23.0"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.59.1"
+    "@typescript-eslint/types" "5.59.1"
+    "@typescript-eslint/typescript-estree" "5.59.1"
     eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
+    semver "^7.3.7"
 
 "@typescript-eslint/visitor-keys@4.22.0":
   version "4.22.0"
@@ -6343,13 +6358,13 @@
     "@typescript-eslint/types" "4.22.0"
     eslint-visitor-keys "^2.0.0"
 
-"@typescript-eslint/visitor-keys@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.23.0.tgz#057c60a7ca64667a39f991473059377a8067c87b"
-  integrity sha512-Vd4mFNchU62sJB8pX19ZSPog05B0Y0CE2UxAZPT5k4iqhRYjPnqyY3woMxCd0++t9OTqkgjST+1ydLBi7e2Fvg==
+"@typescript-eslint/visitor-keys@5.59.1":
+  version "5.59.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.1.tgz#0d96c36efb6560d7fb8eb85de10442c10d8f6058"
+  integrity sha512-6waEYwBTCWryx0VJmP7JaM4FpipLsFl9CvYf2foAE8Qh/Y0s+bxWysciwOs0LTBED4JCaNxTZ5rGadB14M6dwA==
   dependencies:
-    "@typescript-eslint/types" "5.23.0"
-    eslint-visitor-keys "^3.0.0"
+    "@typescript-eslint/types" "5.59.1"
+    eslint-visitor-keys "^3.3.0"
 
 "@uifabric/set-version@^7.0.23":
   version "7.0.23"
@@ -10332,10 +10347,10 @@ csstype@^2.5.5, csstype@^2.5.7, csstype@^2.6.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
   integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
 
-csstype@^3.0.10, csstype@^3.0.2:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
-  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
+csstype@^3.0.10, csstype@^3.0.2, csstype@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
 csv-stringify@^6.2.0:
   version "6.2.0"
@@ -12296,13 +12311,6 @@ eslint-utils@^2.0.0, eslint-utils@^2.1.0:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
 eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
@@ -12313,10 +12321,10 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
   integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
 
-eslint-visitor-keys@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
-  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+eslint-visitor-keys@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz#c7f0f956124ce677047ddbc192a68f999454dedc"
+  integrity sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==
 
 eslint@7.25.0:
   version "7.25.0"
@@ -14149,7 +14157,7 @@ globalthis@^1.0.0:
     function-bind "^1.1.1"
     object-keys "^1.0.12"
 
-globby@*, globby@^11.0.0, globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.0.4:
+globby@*, globby@^11.0.0, globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==

From fc13ed7bd54d9a947e269dd40faa6a5716154fff Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Wed, 26 Apr 2023 14:29:44 +0200
Subject: [PATCH 08/28] test: use `isolatedModules` for all ts-jest configs to
 lower memory footprint on CI (#27670)

* test: use isolatedModules for all ts-jest configs to lower memory footprint on CI
* feat(tools): update jest config setup to use isolatedModules
---
 apps/react-18-tests-v8/jest.config.js                         | 2 +-
 apps/react-18-tests-v9/jest.config.js                         | 2 +-
 apps/ssr-tests-v9/jest.config.js                              | 2 +-
 apps/stress-test/jest.config.js                               | 2 +-
 apps/vr-tests-react-components/jest.config.js                 | 2 +-
 .../babel-preset-global-context/jest.config.js                | 2 +-
 .../babel-preset-storybook-full-source/jest.config.js         | 2 +-
 packages/react-components/global-context/jest.config.js       | 2 +-
 packages/react-components/keyboard-keys/jest.config.js        | 2 +-
 packages/react-components/priority-overflow/jest.config.js    | 2 +-
 packages/react-components/react-accordion/jest.config.js      | 2 +-
 packages/react-components/react-alert/jest.config.js          | 2 +-
 packages/react-components/react-aria/jest.config.js           | 2 +-
 packages/react-components/react-avatar-context/jest.config.js | 2 +-
 packages/react-components/react-avatar/jest.config.js         | 2 +-
 packages/react-components/react-badge/jest.config.js          | 2 +-
 packages/react-components/react-breadcrumb/jest.config.js     | 2 +-
 packages/react-components/react-button/jest.config.js         | 2 +-
 packages/react-components/react-card/jest.config.js           | 2 +-
 packages/react-components/react-checkbox/jest.config.js       | 2 +-
 packages/react-components/react-combobox/jest.config.js       | 2 +-
 packages/react-components/react-components/jest.config.js     | 2 +-
 .../react-components/react-conformance-griffel/jest.config.js | 2 +-
 .../react-components/react-context-selector/jest.config.js    | 2 +-
 .../react-data-grid-react-window/jest.config.js               | 2 +-
 .../react-components/react-datepicker-compat/jest.config.js   | 2 +-
 packages/react-components/react-dialog/jest.config.js         | 2 +-
 packages/react-components/react-divider/jest.config.js        | 2 +-
 packages/react-components/react-drawer/jest.config.js         | 2 +-
 packages/react-components/react-field/jest.config.js          | 2 +-
 packages/react-components/react-image/jest.config.js          | 2 +-
 packages/react-components/react-infobutton/jest.config.js     | 2 +-
 packages/react-components/react-input/jest.config.js          | 2 +-
 packages/react-components/react-jsx-runtime/jest.config.js    | 2 +-
 packages/react-components/react-label/jest.config.js          | 2 +-
 packages/react-components/react-link/jest.config.js           | 2 +-
 packages/react-components/react-menu/jest.config.js           | 2 +-
 .../react-components/react-migration-v0-v9/jest.config.js     | 2 +-
 .../react-components/react-migration-v8-v9/jest.config.js     | 2 +-
 packages/react-components/react-overflow/jest.config.js       | 2 +-
 packages/react-components/react-persona/jest.config.js        | 2 +-
 packages/react-components/react-popover/jest.config.js        | 2 +-
 .../react-portal-compat-context/jest.config.js                | 2 +-
 packages/react-components/react-portal-compat/jest.config.js  | 2 +-
 packages/react-components/react-portal/jest.config.js         | 2 +-
 packages/react-components/react-positioning/jest.config.js    | 2 +-
 packages/react-components/react-progress/jest.config.js       | 2 +-
 packages/react-components/react-provider/jest.config.js       | 2 +-
 packages/react-components/react-radio/jest.config.js          | 2 +-
 packages/react-components/react-select/jest.config.js         | 2 +-
 .../react-components/react-shared-contexts/jest.config.js     | 2 +-
 packages/react-components/react-skeleton/jest.config.js       | 2 +-
 packages/react-components/react-slider/jest.config.js         | 2 +-
 packages/react-components/react-spinbutton/jest.config.js     | 2 +-
 packages/react-components/react-spinner/jest.config.js        | 2 +-
 .../react-storybook-addon-codesandbox/jest.config.js          | 2 +-
 .../react-components/react-storybook-addon/jest.config.js     | 2 +-
 packages/react-components/react-switch/jest.config.js         | 2 +-
 packages/react-components/react-table/jest.config.js          | 2 +-
 packages/react-components/react-tabs/jest.config.js           | 2 +-
 packages/react-components/react-tabster/jest.config.js        | 2 +-
 packages/react-components/react-tags/jest.config.js           | 2 +-
 packages/react-components/react-text/jest.config.js           | 2 +-
 packages/react-components/react-textarea/jest.config.js       | 2 +-
 packages/react-components/react-theme-sass/jest.config.js     | 2 +-
 packages/react-components/react-theme/jest.config.js          | 2 +-
 packages/react-components/react-toolbar/jest.config.js        | 2 +-
 packages/react-components/react-tooltip/jest.config.js        | 2 +-
 packages/react-components/react-tree/jest.config.js           | 2 +-
 packages/react-components/react-utilities/jest.config.js      | 2 +-
 packages/react-components/react-virtualizer/jest.config.js    | 4 ++--
 packages/react-components/theme-designer/jest.config.js       | 2 +-
 packages/tokens/jest.config.js                                | 2 +-
 scripts/jest/src/jest.preset.v8.js                            | 3 ++-
 scripts/jest/src/jest.preset.v8.spec.ts                       | 2 +-
 tools/generators/migrate-converged-pkg/index.spec.ts          | 2 +-
 tools/generators/migrate-converged-pkg/index.ts               | 2 +-
 77 files changed, 79 insertions(+), 78 deletions(-)

diff --git a/apps/react-18-tests-v8/jest.config.js b/apps/react-18-tests-v8/jest.config.js
index dc4ce5443ae587..b61ba13a651417 100644
--- a/apps/react-18-tests-v8/jest.config.js
+++ b/apps/react-18-tests-v8/jest.config.js
@@ -15,7 +15,7 @@ if (config.globals) {
   // override ts-jest config, otherwise it gets merged
   config.globals['ts-jest'] = {
     tsconfig: '<rootDir>/tsconfig.spec.json',
-    diagnostics: { warnOnly: true /* , exclude: ['packages/**']  */ },
+    isolatedModules: true,
   };
 }
 
diff --git a/apps/react-18-tests-v9/jest.config.js b/apps/react-18-tests-v9/jest.config.js
index ff2e84e73010a6..08de436edf022a 100644
--- a/apps/react-18-tests-v9/jest.config.js
+++ b/apps/react-18-tests-v9/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: { warnOnly: true, exclude: ['packages/**'] },
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/apps/ssr-tests-v9/jest.config.js b/apps/ssr-tests-v9/jest.config.js
index 3b7292734386e0..71f9ab6510d2fa 100644
--- a/apps/ssr-tests-v9/jest.config.js
+++ b/apps/ssr-tests-v9/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/apps/stress-test/jest.config.js b/apps/stress-test/jest.config.js
index 3b7292734386e0..71f9ab6510d2fa 100644
--- a/apps/stress-test/jest.config.js
+++ b/apps/stress-test/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/apps/vr-tests-react-components/jest.config.js b/apps/vr-tests-react-components/jest.config.js
index ee67c7a86d2501..860d9c97635c56 100644
--- a/apps/vr-tests-react-components/jest.config.js
+++ b/apps/vr-tests-react-components/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/babel-preset-global-context/jest.config.js b/packages/react-components/babel-preset-global-context/jest.config.js
index c35f80f6a167e9..a962e4119eb6d0 100644
--- a/packages/react-components/babel-preset-global-context/jest.config.js
+++ b/packages/react-components/babel-preset-global-context/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/babel-preset-storybook-full-source/jest.config.js b/packages/react-components/babel-preset-storybook-full-source/jest.config.js
index dafc6e0002a6b0..3a35e5b8bdd727 100644
--- a/packages/react-components/babel-preset-storybook-full-source/jest.config.js
+++ b/packages/react-components/babel-preset-storybook-full-source/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/global-context/jest.config.js b/packages/react-components/global-context/jest.config.js
index 89b83781aad754..cc8d64ae4a43a1 100644
--- a/packages/react-components/global-context/jest.config.js
+++ b/packages/react-components/global-context/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/keyboard-keys/jest.config.js b/packages/react-components/keyboard-keys/jest.config.js
index f4f30182fe7715..5e16ee4e6b8d8a 100644
--- a/packages/react-components/keyboard-keys/jest.config.js
+++ b/packages/react-components/keyboard-keys/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/priority-overflow/jest.config.js b/packages/react-components/priority-overflow/jest.config.js
index 5be1fb02508866..994e3d649a4309 100644
--- a/packages/react-components/priority-overflow/jest.config.js
+++ b/packages/react-components/priority-overflow/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-accordion/jest.config.js b/packages/react-components/react-accordion/jest.config.js
index 9d2d508dfbe130..fb3c3825bb3dc9 100644
--- a/packages/react-components/react-accordion/jest.config.js
+++ b/packages/react-components/react-accordion/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-alert/jest.config.js b/packages/react-components/react-alert/jest.config.js
index 7e1223ecf873b3..9693d4ad4d9f07 100644
--- a/packages/react-components/react-alert/jest.config.js
+++ b/packages/react-components/react-alert/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-aria/jest.config.js b/packages/react-components/react-aria/jest.config.js
index aabf1e411b3ec3..c5e519a6f36d16 100644
--- a/packages/react-components/react-aria/jest.config.js
+++ b/packages/react-components/react-aria/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-avatar-context/jest.config.js b/packages/react-components/react-avatar-context/jest.config.js
index a86805833bc259..1d956ea00a0f0b 100644
--- a/packages/react-components/react-avatar-context/jest.config.js
+++ b/packages/react-components/react-avatar-context/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-avatar/jest.config.js b/packages/react-components/react-avatar/jest.config.js
index 474b19047973a3..8e485ee197faba 100644
--- a/packages/react-components/react-avatar/jest.config.js
+++ b/packages/react-components/react-avatar/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-badge/jest.config.js b/packages/react-components/react-badge/jest.config.js
index 2650ceafefa74e..c7a12e9171bd8e 100644
--- a/packages/react-components/react-badge/jest.config.js
+++ b/packages/react-components/react-badge/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-breadcrumb/jest.config.js b/packages/react-components/react-breadcrumb/jest.config.js
index e71124efdbbd7f..5c481895ec2ffd 100644
--- a/packages/react-components/react-breadcrumb/jest.config.js
+++ b/packages/react-components/react-breadcrumb/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-button/jest.config.js b/packages/react-components/react-button/jest.config.js
index fa9febaae31442..c40bf76983caf5 100644
--- a/packages/react-components/react-button/jest.config.js
+++ b/packages/react-components/react-button/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-card/jest.config.js b/packages/react-components/react-card/jest.config.js
index 718afb7101794a..d54241a41570df 100644
--- a/packages/react-components/react-card/jest.config.js
+++ b/packages/react-components/react-card/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-checkbox/jest.config.js b/packages/react-components/react-checkbox/jest.config.js
index 276dda279da40e..fe5acb2984289a 100644
--- a/packages/react-components/react-checkbox/jest.config.js
+++ b/packages/react-components/react-checkbox/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-combobox/jest.config.js b/packages/react-components/react-combobox/jest.config.js
index 42cc3e30eb2292..021405129645a4 100644
--- a/packages/react-components/react-combobox/jest.config.js
+++ b/packages/react-components/react-combobox/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-components/jest.config.js b/packages/react-components/react-components/jest.config.js
index 97e86a16f06bf6..111eb73ae8db18 100644
--- a/packages/react-components/react-components/jest.config.js
+++ b/packages/react-components/react-components/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-conformance-griffel/jest.config.js b/packages/react-components/react-conformance-griffel/jest.config.js
index 6023f4a9b558fe..73b42aa998da69 100644
--- a/packages/react-components/react-conformance-griffel/jest.config.js
+++ b/packages/react-components/react-conformance-griffel/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-context-selector/jest.config.js b/packages/react-components/react-context-selector/jest.config.js
index 39023dd6182c60..dcd74005c508f8 100644
--- a/packages/react-components/react-context-selector/jest.config.js
+++ b/packages/react-components/react-context-selector/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-data-grid-react-window/jest.config.js b/packages/react-components/react-data-grid-react-window/jest.config.js
index 7a70c69372d17a..5368c2f62c2c4b 100644
--- a/packages/react-components/react-data-grid-react-window/jest.config.js
+++ b/packages/react-components/react-data-grid-react-window/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-datepicker-compat/jest.config.js b/packages/react-components/react-datepicker-compat/jest.config.js
index f3fbfc2d76eb22..023d31b89fd1e4 100644
--- a/packages/react-components/react-datepicker-compat/jest.config.js
+++ b/packages/react-components/react-datepicker-compat/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-dialog/jest.config.js b/packages/react-components/react-dialog/jest.config.js
index 67ac9847a41d84..4057edf6c64b43 100644
--- a/packages/react-components/react-dialog/jest.config.js
+++ b/packages/react-components/react-dialog/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-divider/jest.config.js b/packages/react-components/react-divider/jest.config.js
index d18346b0729fd2..a8098f399f0a5e 100644
--- a/packages/react-components/react-divider/jest.config.js
+++ b/packages/react-components/react-divider/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-drawer/jest.config.js b/packages/react-components/react-drawer/jest.config.js
index 94e954e0a69955..efc18f02183c24 100644
--- a/packages/react-components/react-drawer/jest.config.js
+++ b/packages/react-components/react-drawer/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-field/jest.config.js b/packages/react-components/react-field/jest.config.js
index a5a95459b194ac..5190c367303a77 100644
--- a/packages/react-components/react-field/jest.config.js
+++ b/packages/react-components/react-field/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-image/jest.config.js b/packages/react-components/react-image/jest.config.js
index 6cc92ea82d5d48..8c23e4216db0e4 100644
--- a/packages/react-components/react-image/jest.config.js
+++ b/packages/react-components/react-image/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-infobutton/jest.config.js b/packages/react-components/react-infobutton/jest.config.js
index 57088d9b82184e..1bf9ac3cbf5597 100644
--- a/packages/react-components/react-infobutton/jest.config.js
+++ b/packages/react-components/react-infobutton/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-input/jest.config.js b/packages/react-components/react-input/jest.config.js
index a7110dfad207e8..38e8aef2383f6a 100644
--- a/packages/react-components/react-input/jest.config.js
+++ b/packages/react-components/react-input/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-jsx-runtime/jest.config.js b/packages/react-components/react-jsx-runtime/jest.config.js
index b3440c12005efe..160d7339737587 100644
--- a/packages/react-components/react-jsx-runtime/jest.config.js
+++ b/packages/react-components/react-jsx-runtime/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-label/jest.config.js b/packages/react-components/react-label/jest.config.js
index 00d608e89df8b4..d8b0c7895c8b90 100644
--- a/packages/react-components/react-label/jest.config.js
+++ b/packages/react-components/react-label/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-link/jest.config.js b/packages/react-components/react-link/jest.config.js
index ce3f6a490ef569..23277d27bcf9f9 100644
--- a/packages/react-components/react-link/jest.config.js
+++ b/packages/react-components/react-link/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-menu/jest.config.js b/packages/react-components/react-menu/jest.config.js
index 89dddbb7628acf..3b5908251f56fa 100644
--- a/packages/react-components/react-menu/jest.config.js
+++ b/packages/react-components/react-menu/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-migration-v0-v9/jest.config.js b/packages/react-components/react-migration-v0-v9/jest.config.js
index 8e16e3dd157c95..a35b099dddca61 100644
--- a/packages/react-components/react-migration-v0-v9/jest.config.js
+++ b/packages/react-components/react-migration-v0-v9/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-migration-v8-v9/jest.config.js b/packages/react-components/react-migration-v8-v9/jest.config.js
index 92a09e8740001d..c248112b9c0b90 100644
--- a/packages/react-components/react-migration-v8-v9/jest.config.js
+++ b/packages/react-components/react-migration-v8-v9/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-overflow/jest.config.js b/packages/react-components/react-overflow/jest.config.js
index 461774fbaae0d9..1951191f764ddd 100644
--- a/packages/react-components/react-overflow/jest.config.js
+++ b/packages/react-components/react-overflow/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-persona/jest.config.js b/packages/react-components/react-persona/jest.config.js
index 64fccb00346d15..354a58e2ffde32 100644
--- a/packages/react-components/react-persona/jest.config.js
+++ b/packages/react-components/react-persona/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-popover/jest.config.js b/packages/react-components/react-popover/jest.config.js
index c6dd2288db246f..82f46dd78f7728 100644
--- a/packages/react-components/react-popover/jest.config.js
+++ b/packages/react-components/react-popover/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-portal-compat-context/jest.config.js b/packages/react-components/react-portal-compat-context/jest.config.js
index 4f76964fc037d4..dfa6b9d19723dd 100644
--- a/packages/react-components/react-portal-compat-context/jest.config.js
+++ b/packages/react-components/react-portal-compat-context/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-portal-compat/jest.config.js b/packages/react-components/react-portal-compat/jest.config.js
index be4da49608cee4..4525efa6064922 100644
--- a/packages/react-components/react-portal-compat/jest.config.js
+++ b/packages/react-components/react-portal-compat/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-portal/jest.config.js b/packages/react-components/react-portal/jest.config.js
index dbf98b99ea1897..77869cbf6d6636 100644
--- a/packages/react-components/react-portal/jest.config.js
+++ b/packages/react-components/react-portal/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-positioning/jest.config.js b/packages/react-components/react-positioning/jest.config.js
index 2c4d600b111c23..ba952e33e2bb7f 100644
--- a/packages/react-components/react-positioning/jest.config.js
+++ b/packages/react-components/react-positioning/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-progress/jest.config.js b/packages/react-components/react-progress/jest.config.js
index f22d09ca37207e..797661d97bfb8c 100644
--- a/packages/react-components/react-progress/jest.config.js
+++ b/packages/react-components/react-progress/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-provider/jest.config.js b/packages/react-components/react-provider/jest.config.js
index aa1e59a8f1e8cd..220d2d09f585f0 100644
--- a/packages/react-components/react-provider/jest.config.js
+++ b/packages/react-components/react-provider/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-radio/jest.config.js b/packages/react-components/react-radio/jest.config.js
index c8dc1fb78a9359..b43b20471e9901 100644
--- a/packages/react-components/react-radio/jest.config.js
+++ b/packages/react-components/react-radio/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-select/jest.config.js b/packages/react-components/react-select/jest.config.js
index ce2b7e4228dec4..040f6a5a8e2b7a 100644
--- a/packages/react-components/react-select/jest.config.js
+++ b/packages/react-components/react-select/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-shared-contexts/jest.config.js b/packages/react-components/react-shared-contexts/jest.config.js
index 232fc8fc07d0c8..2463dccb4ea510 100644
--- a/packages/react-components/react-shared-contexts/jest.config.js
+++ b/packages/react-components/react-shared-contexts/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-skeleton/jest.config.js b/packages/react-components/react-skeleton/jest.config.js
index 0a32212b98d50f..1ecf245a63a963 100644
--- a/packages/react-components/react-skeleton/jest.config.js
+++ b/packages/react-components/react-skeleton/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-slider/jest.config.js b/packages/react-components/react-slider/jest.config.js
index f267c71f237f04..c3527dc791054a 100644
--- a/packages/react-components/react-slider/jest.config.js
+++ b/packages/react-components/react-slider/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-spinbutton/jest.config.js b/packages/react-components/react-spinbutton/jest.config.js
index 4d703b5734aa25..47a29c6c2e3904 100644
--- a/packages/react-components/react-spinbutton/jest.config.js
+++ b/packages/react-components/react-spinbutton/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-spinner/jest.config.js b/packages/react-components/react-spinner/jest.config.js
index 74cc94ecc6bb64..7fd228d7caa3ec 100644
--- a/packages/react-components/react-spinner/jest.config.js
+++ b/packages/react-components/react-spinner/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-storybook-addon-codesandbox/jest.config.js b/packages/react-components/react-storybook-addon-codesandbox/jest.config.js
index 6ebf7bca345a5a..804d6a8c536387 100644
--- a/packages/react-components/react-storybook-addon-codesandbox/jest.config.js
+++ b/packages/react-components/react-storybook-addon-codesandbox/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-storybook-addon/jest.config.js b/packages/react-components/react-storybook-addon/jest.config.js
index a0e17fee3482d2..717be5c5306c89 100644
--- a/packages/react-components/react-storybook-addon/jest.config.js
+++ b/packages/react-components/react-storybook-addon/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-switch/jest.config.js b/packages/react-components/react-switch/jest.config.js
index 7ab58b7b5e4770..81ead1f0a2875e 100644
--- a/packages/react-components/react-switch/jest.config.js
+++ b/packages/react-components/react-switch/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-table/jest.config.js b/packages/react-components/react-table/jest.config.js
index 95fa209faa5463..d09be1dc61ef38 100644
--- a/packages/react-components/react-table/jest.config.js
+++ b/packages/react-components/react-table/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-tabs/jest.config.js b/packages/react-components/react-tabs/jest.config.js
index 82f3e969dc35f7..2ede66dbfa5c18 100644
--- a/packages/react-components/react-tabs/jest.config.js
+++ b/packages/react-components/react-tabs/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-tabster/jest.config.js b/packages/react-components/react-tabster/jest.config.js
index 3459449cccb603..5563b6a59af635 100644
--- a/packages/react-components/react-tabster/jest.config.js
+++ b/packages/react-components/react-tabster/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-tags/jest.config.js b/packages/react-components/react-tags/jest.config.js
index 9b6d68d2911106..4d18f3a220ad8b 100644
--- a/packages/react-components/react-tags/jest.config.js
+++ b/packages/react-components/react-tags/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-text/jest.config.js b/packages/react-components/react-text/jest.config.js
index 8e3d3aaf2d53b1..810103ae043c54 100644
--- a/packages/react-components/react-text/jest.config.js
+++ b/packages/react-components/react-text/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-textarea/jest.config.js b/packages/react-components/react-textarea/jest.config.js
index d5255744ad5b2a..01e8d7422ca9b3 100644
--- a/packages/react-components/react-textarea/jest.config.js
+++ b/packages/react-components/react-textarea/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-theme-sass/jest.config.js b/packages/react-components/react-theme-sass/jest.config.js
index c87480044d94a1..e07cac11ede900 100644
--- a/packages/react-components/react-theme-sass/jest.config.js
+++ b/packages/react-components/react-theme-sass/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   testEnvironment: 'jest-environment-node-single-context',
diff --git a/packages/react-components/react-theme/jest.config.js b/packages/react-components/react-theme/jest.config.js
index ff0a627f6eb099..c7c0c9b227b415 100644
--- a/packages/react-components/react-theme/jest.config.js
+++ b/packages/react-components/react-theme/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-toolbar/jest.config.js b/packages/react-components/react-toolbar/jest.config.js
index f3bfbe21ad217c..1246913f97d58c 100644
--- a/packages/react-components/react-toolbar/jest.config.js
+++ b/packages/react-components/react-toolbar/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-tooltip/jest.config.js b/packages/react-components/react-tooltip/jest.config.js
index 3c184b0adf74fb..0a11228e235995 100644
--- a/packages/react-components/react-tooltip/jest.config.js
+++ b/packages/react-components/react-tooltip/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-tree/jest.config.js b/packages/react-components/react-tree/jest.config.js
index 387ed673bf25fb..164d5ddfb8b502 100644
--- a/packages/react-components/react-tree/jest.config.js
+++ b/packages/react-components/react-tree/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-utilities/jest.config.js b/packages/react-components/react-utilities/jest.config.js
index ad0713da7e6486..1b8b528f2a67fc 100644
--- a/packages/react-components/react-utilities/jest.config.js
+++ b/packages/react-components/react-utilities/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/react-virtualizer/jest.config.js b/packages/react-components/react-virtualizer/jest.config.js
index 606059485bce05..406a515d1ffd13 100644
--- a/packages/react-components/react-virtualizer/jest.config.js
+++ b/packages/react-components/react-virtualizer/jest.config.js
@@ -4,12 +4,12 @@
  * @type {import('@jest/types').Config.InitialOptions}
  */
 module.exports = {
-  displayName: 'virtualizer',
+  displayName: 'react-virtualizer',
   preset: '../../../jest.preset.js',
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/react-components/theme-designer/jest.config.js b/packages/react-components/theme-designer/jest.config.js
index 37c42ffb59b17f..a3449c2a847535 100644
--- a/packages/react-components/theme-designer/jest.config.js
+++ b/packages/react-components/theme-designer/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/packages/tokens/jest.config.js b/packages/tokens/jest.config.js
index da133e64d80512..993f094b4e1440 100644
--- a/packages/tokens/jest.config.js
+++ b/packages/tokens/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {
diff --git a/scripts/jest/src/jest.preset.v8.js b/scripts/jest/src/jest.preset.v8.js
index 923340801552b1..76b407bac07c99 100644
--- a/scripts/jest/src/jest.preset.v8.js
+++ b/scripts/jest/src/jest.preset.v8.js
@@ -71,7 +71,8 @@ const createConfig = (customConfig = {}) => {
 
     globals: {
       'ts-jest': {
-        diagnostics: false,
+        /** https://kulshekhar.github.io/ts-jest/docs/28.0/getting-started/options/isolatedModules */
+        isolatedModules: true,
       },
     },
     testEnvironmentOptions: {
diff --git a/scripts/jest/src/jest.preset.v8.spec.ts b/scripts/jest/src/jest.preset.v8.spec.ts
index a42e8bba60ff6e..b9efa27ab56b5b 100644
--- a/scripts/jest/src/jest.preset.v8.spec.ts
+++ b/scripts/jest/src/jest.preset.v8.spec.ts
@@ -10,7 +10,7 @@ describe(`v8 preset`, () => {
       expect.objectContaining({
         globals: {
           'ts-jest': {
-            diagnostics: false,
+            isolatedModules: true,
           },
         },
         moduleDirectories: [
diff --git a/tools/generators/migrate-converged-pkg/index.spec.ts b/tools/generators/migrate-converged-pkg/index.spec.ts
index 791f9259613e90..d2dab0a582d988 100644
--- a/tools/generators/migrate-converged-pkg/index.spec.ts
+++ b/tools/generators/migrate-converged-pkg/index.spec.ts
@@ -442,7 +442,7 @@ describe('migrate-converged-pkg generator', () => {
         globals: {
         'ts-jest': {
         tsconfig: '<rootDir>/tsconfig.spec.json',
-        diagnostics: false,
+        isolatedModules: true,
         },
         },
         transform: {
diff --git a/tools/generators/migrate-converged-pkg/index.ts b/tools/generators/migrate-converged-pkg/index.ts
index bbcbce992dc212..e5677aaa2216ae 100644
--- a/tools/generators/migrate-converged-pkg/index.ts
+++ b/tools/generators/migrate-converged-pkg/index.ts
@@ -301,7 +301,7 @@ const templates = {
         globals: {
           'ts-jest': {
             tsconfig: '<rootDir>/tsconfig.spec.json',
-            diagnostics: false,
+            isolatedModules: true,
           },
         },
         transform: {

From 232c4b37ba85a2136bdcd2d1c2ce0e00cfe35bce Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Wed, 26 Apr 2023 14:30:27 +0200
Subject: [PATCH 09/28] feat(tools): add conformance setup migration to
 migrate-converged-pkg generator (#27668)

---
 .../migrate-converged-pkg/index.spec.ts       | 58 +++++++++++++++++++
 .../generators/migrate-converged-pkg/index.ts | 50 ++++++++++++++++
 2 files changed, 108 insertions(+)

diff --git a/tools/generators/migrate-converged-pkg/index.spec.ts b/tools/generators/migrate-converged-pkg/index.spec.ts
index d2dab0a582d988..db680fa2b4275d 100644
--- a/tools/generators/migrate-converged-pkg/index.spec.ts
+++ b/tools/generators/migrate-converged-pkg/index.spec.ts
@@ -19,6 +19,7 @@ import {
   writeJson,
   WorkspaceConfiguration,
   ProjectConfiguration,
+  joinPathFragments,
 } from '@nrwl/devkit';
 
 import { PackageJson, TsConfig } from '../../types';
@@ -1256,6 +1257,63 @@ describe('migrate-converged-pkg generator', () => {
     });
   });
 
+  describe(`update conformance setup`, () => {
+    const conformanceSetup = stripIndents`
+      import { isConformant as baseIsConformant } from '@proj/react-conformance';
+      import type { IsConformantOptions, TestObject } from '@proj/react-conformance';
+      import griffelTests from '@proj/react-conformance-griffel';
+
+      export function isConformant<TProps = {}>(
+        testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
+      ) {
+        const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+          componentPath: require.main?.filename.replace('.test', ''),
+          extraTests: griffelTests as TestObject<TProps>,
+          testOptions: {
+            'make-styles-overrides-win': {
+              callCount: 2,
+            },
+            // TODO: https://github.com/microsoft/fluentui/issues/19618
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          } as any,
+        };
+
+        baseIsConformant(defaultOptions, testInfo);
+      }
+    `;
+    it(`should use tsConfig conformance API`, async () => {
+      const projectConfig = readProjectConfiguration(tree, options.name);
+      const conformanceSetupPath = joinPathFragments(projectConfig.root as string, 'src/testing/isConformant.ts');
+      tree.write(conformanceSetupPath, conformanceSetup);
+      await generator(tree, options);
+
+      expect(tree.read(conformanceSetupPath, 'utf-8')).toMatchInlineSnapshot(`
+        "import { isConformant as baseIsConformant } from '@proj/react-conformance';
+        import type { IsConformantOptions, TestObject } from '@proj/react-conformance';
+        import griffelTests from '@proj/react-conformance-griffel';
+
+        export function isConformant<TProps = {}>(
+        testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
+        ) {
+        const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+        tsConfig: { configName: 'tsconfig.spec.json' },
+        componentPath: require.main?.filename.replace('.test', ''),
+        extraTests: griffelTests as TestObject<TProps>,
+        testOptions: {
+        'make-styles-overrides-win': {
+        callCount: 2,
+        },
+        // TODO: https://github.com/microsoft/fluentui/issues/19618
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any,
+        };
+
+        baseIsConformant(defaultOptions, testInfo);
+        }"
+      `);
+    });
+  });
+
   describe(`--stats`, () => {
     it(`should print project names and count of how many have been migrated`, async () => {
       const loggerInfoSpy = jest.spyOn(logger, 'info');
diff --git a/tools/generators/migrate-converged-pkg/index.ts b/tools/generators/migrate-converged-pkg/index.ts
index e5677aaa2216ae..972dc36caf106f 100644
--- a/tools/generators/migrate-converged-pkg/index.ts
+++ b/tools/generators/migrate-converged-pkg/index.ts
@@ -13,9 +13,12 @@ import {
   updateProjectConfiguration,
   serializeJson,
   offsetFromRoot,
+  applyChangesToString,
+  ChangeType,
 } from '@nrwl/devkit';
 import * as path from 'path';
 import * as os from 'os';
+import * as ts from 'typescript';
 
 import { PackageJson, TsConfig } from '../../types';
 import {
@@ -144,6 +147,7 @@ function runMigrationOnProject(tree: Tree, schema: AssertedSchema, _userLog: Use
 
   setupSwcConfig(tree, options);
   setupJustConfig(tree, options);
+  updateConformanceSetup(tree, options);
 }
 
 // ==== helpers ====
@@ -978,6 +982,52 @@ function updateLocalJestConfig(tree: Tree, options: NormalizedSchema) {
   return tree;
 }
 
+function updateConformanceSetup(tree: Tree, options: NormalizedSchema) {
+  if (!tree.exists(options.paths.conformanceSetup)) {
+    logger.warn('no conformance setup present. skipping...');
+    return;
+  }
+
+  const conformanceSetupContent = tree.read(options.paths.conformanceSetup, 'utf-8') as string;
+  const sourceFile = ts.createSourceFile('is-conformant.ts', conformanceSetupContent, ts.ScriptTarget.Latest, true);
+  const addition = `\ntsConfig: { configName: 'tsconfig.spec.json' },`;
+
+  let start: number | undefined;
+  getConfigObjectFirstPropertyIndex(sourceFile);
+
+  if (!start) {
+    return;
+  }
+
+  const updatedContent = applyChangesToString(conformanceSetupContent, [
+    {
+      type: ChangeType.Insert,
+      index: start,
+      text: addition,
+    },
+  ]);
+
+  tree.write(options.paths.conformanceSetup, updatedContent);
+
+  function getConfigObjectFirstPropertyIndex(node: ts.Node) {
+    if (ts.isVariableStatement(node)) {
+      const defaultOptionsVar = node.declarationList.declarations[0].name.getText();
+      if (defaultOptionsVar === 'defaultOptions') {
+        const initializer = node.declarationList.declarations[0].initializer;
+        if (initializer && ts.isObjectLiteralExpression(initializer)) {
+          const firstProp = initializer.properties[0];
+          start = firstProp.pos;
+          return;
+        }
+      }
+    }
+
+    ts.forEachChild(node, getConfigObjectFirstPropertyIndex);
+  }
+
+  return tree;
+}
+
 function updatedLocalTsConfig(tree: Tree, options: NormalizedSchema) {
   const { configs } = createTsSolutionConfig(tree, options);
 

From fa0f2ce25e94ddc8759f545638e01cc34e0e99f4 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Wed, 26 Apr 2023 15:46:33 +0200
Subject: [PATCH 10/28] chore(react-tree): updates useOpenItemsState internals
 (#27697)

---
 ...ui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json | 7 +++++++
 .../react-tree/src/hooks/useOpenItemsState.ts              | 5 +----
 2 files changed, 8 insertions(+), 4 deletions(-)
 create mode 100644 change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json

diff --git a/change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json b/change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json
new file mode 100644
index 00000000000000..db09e5486bcbe9
--- /dev/null
+++ b/change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: updates useOpenItemsState internals",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/src/hooks/useOpenItemsState.ts b/packages/react-components/react-tree/src/hooks/useOpenItemsState.ts
index 2dbb3990aac2ee..1fe50eccb2e101 100644
--- a/packages/react-components/react-tree/src/hooks/useOpenItemsState.ts
+++ b/packages/react-components/react-tree/src/hooks/useOpenItemsState.ts
@@ -6,10 +6,7 @@ import type { TreeOpenChangeData, TreeProps } from '../Tree';
 export function useOpenItemsState<Value = string>(props: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems'>) {
   const [openItems, setOpenItems] = useControllableState({
     state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),
-    defaultState: React.useMemo(
-      () => props.defaultOpenItems && createImmutableSet(props.defaultOpenItems),
-      [props.defaultOpenItems],
-    ),
+    defaultState: props.defaultOpenItems && (() => createImmutableSet(props.defaultOpenItems)),
     initialState: emptyImmutableSet,
   });
   const updateOpenItems = useEventCallback((data: TreeOpenChangeData<Value>) =>

From 37e89b9319db7f31f3afe0d38fc31eac40cb5eaf Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Wed, 26 Apr 2023 07:21:36 -0700
Subject: [PATCH 11/28] feat: react-combobox space conditionally inserts
 character when freeform is true (#27025)

---
 ...-aa8ff159-8fa3-4a0b-acf2-8b9bad6c66b7.json |  7 +++
 .../src/components/Combobox/Combobox.test.tsx | 52 +++++++++++++++
 .../src/components/Combobox/useCombobox.tsx   | 63 ++++++++++++++-----
 3 files changed, 107 insertions(+), 15 deletions(-)
 create mode 100644 change/@fluentui-react-combobox-aa8ff159-8fa3-4a0b-acf2-8b9bad6c66b7.json

diff --git a/change/@fluentui-react-combobox-aa8ff159-8fa3-4a0b-acf2-8b9bad6c66b7.json b/change/@fluentui-react-combobox-aa8ff159-8fa3-4a0b-acf2-8b9bad6c66b7.json
new file mode 100644
index 00000000000000..02fbdfb85912e8
--- /dev/null
+++ b/change/@fluentui-react-combobox-aa8ff159-8fa3-4a0b-acf2-8b9bad6c66b7.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: allow space character insertion while typing in freeform combobox",
+  "packageName": "@fluentui/react-combobox",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx
index 78956a9e8b26a1..94d929bbc1dc23 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx
+++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx
@@ -663,6 +663,58 @@ describe('Combobox', () => {
     });
   });
 
+  /* Freeform space key behavior */
+  it('inserts space character when typing in a freeform combobox', () => {
+    const onOptionSelect = jest.fn();
+
+    const { getByRole } = render(
+      <Combobox onOptionSelect={onOptionSelect} freeform>
+        <Option>Red</Option>
+        <Option>Green</Option>
+        <Option>Blue</Option>
+      </Combobox>,
+    );
+
+    userEvent.type(getByRole('combobox'), 're ');
+
+    expect(onOptionSelect).not.toHaveBeenCalled();
+    expect((getByRole('combobox') as HTMLInputElement).value).toEqual('re ');
+  });
+
+  it('uses space to select after arrowing through options in a freeform combobox', () => {
+    const onOptionSelect = jest.fn();
+
+    const { getByRole } = render(
+      <Combobox onOptionSelect={onOptionSelect} freeform>
+        <Option>Red</Option>
+        <Option>Green</Option>
+        <Option>Blue</Option>
+      </Combobox>,
+    );
+
+    userEvent.type(getByRole('combobox'), 're{ArrowDown} ');
+
+    expect(onOptionSelect).toHaveBeenCalledTimes(1);
+    expect((getByRole('combobox') as HTMLInputElement).value).toEqual('Green');
+  });
+
+  it('inserts space character in closed freeform combobox', () => {
+    const onOptionSelect = jest.fn();
+
+    const { getByRole } = render(
+      <Combobox onOptionSelect={onOptionSelect} freeform>
+        <Option>Red</Option>
+        <Option>Green</Option>
+        <Option>Blue</Option>
+      </Combobox>,
+    );
+
+    userEvent.type(getByRole('combobox'), 'r{ArrowDown}{Escape} ');
+
+    expect(onOptionSelect).not.toHaveBeenCalled();
+    expect((getByRole('combobox') as HTMLInputElement).value).toEqual('r ');
+  });
+
   /* Active option */
   it('should set active option on click', () => {
     const { getByTestId } = render(
diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
index ff0ef098d580b6..b394426c170417 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
+++ b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
@@ -66,6 +66,10 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
   // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
   const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);
 
+  // save the typing vs. navigating options state, as the space key should behave differently in each case
+  // we do not want to update the combobox when this changes, just save the value between renders
+  const isTyping = React.useRef(false);
+
   // calculate listbox width style based on trigger width
   const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();
   React.useEffect(() => {
@@ -150,20 +154,6 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
     }
   };
 
-  // open Combobox when typing
-  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!open && getDropdownActionFromKey(ev) === 'Type') {
-      baseState.setOpen(ev, true);
-    }
-
-    // clear activedescendant when moving the text insertion cursor
-    if (ev.key === ArrowLeft || ev.key === ArrowRight) {
-      setHideActiveDescendant(true);
-    } else {
-      setHideActiveDescendant(false);
-    }
-  };
-
   // resolve input and listbox slot props
   let triggerSlot: Slot<'input'>;
   let listboxSlot: Slot<typeof Listbox> | undefined;
@@ -178,9 +168,9 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
     },
   });
 
+  const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;
   triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);
   triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);
-  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);
 
   // only resolve listbox slot if needed
   listboxSlot =
@@ -230,6 +220,49 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
 
   state.root.ref = useMergedRefs(state.root.ref, rootRef);
 
+  /* Set input.onKeyDown here, so we can override the default behavior for spacebar */
+  const defaultOnTriggerKeyDown = state.input.onKeyDown;
+  state.input.onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!open && getDropdownActionFromKey(ev) === 'Type') {
+      baseState.setOpen(ev, true);
+    }
+
+    // clear activedescendant when moving the text insertion cursor
+    if (ev.key === ArrowLeft || ev.key === ArrowRight) {
+      setHideActiveDescendant(true);
+    } else {
+      setHideActiveDescendant(false);
+    }
+
+    // update typing state to true if the user is typing
+    const action = getDropdownActionFromKey(ev, { open, multiselect });
+    if (action === 'Type') {
+      isTyping.current = true;
+    }
+    // otherwise, update the typing state to false if opening or navigating dropdown options
+    // other actions, like closing the dropdown, should not impact typing state.
+    else if (
+      (action === 'Open' && ev.key !== ' ') ||
+      action === 'Next' ||
+      action === 'Previous' ||
+      action === 'First' ||
+      action === 'Last' ||
+      action === 'PageUp' ||
+      action === 'PageDown'
+    ) {
+      isTyping.current = false;
+    }
+
+    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
+    if (freeform && (isTyping.current || !open) && ev.key === ' ') {
+      resolvedPropsOnKeyDown?.(ev);
+      return;
+    }
+
+    // if we're not allowing space to type, continue with default behavior
+    defaultOnTriggerKeyDown?.(ev);
+  });
+
   /* handle open/close + focus change when clicking expandIcon */
   const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};
   const onExpandIconMouseDown = useEventCallback(

From d85ae6d21f5c6db877d62ccb1e9270848afbf1bb Mon Sep 17 00:00:00 2001
From: Petr Duda <peta.duda@gmail.com>
Date: Wed, 26 Apr 2023 16:41:26 +0200
Subject: [PATCH 12/28] feat: adds lazy loading example (#27587)

Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
---
 ...-d2b17f80-1a10-4456-a7dd-89b53f9a27f4.json |   7 ++
 .../react-tree/etc/react-tree.api.md          |   1 +
 .../react-tree/src/hooks/useFlatTree.ts       |   6 +-
 .../stories/D_flatTree/TreeLazyLoading.md     |   1 +
 .../D_flatTree/TreeLazyLoading.stories.tsx    | 113 ++++++++++++++++++
 .../stories/D_flatTree/index.stories.tsx      |   1 +
 6 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-react-tree-d2b17f80-1a10-4456-a7dd-89b53f9a27f4.json
 create mode 100644 packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.md
 create mode 100644 packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx

diff --git a/change/@fluentui-react-tree-d2b17f80-1a10-4456-a7dd-89b53f9a27f4.json b/change/@fluentui-react-tree-d2b17f80-1a10-4456-a7dd-89b53f9a27f4.json
new file mode 100644
index 00000000000000..17dbe4f6863fe3
--- /dev/null
+++ b/change/@fluentui-react-tree-d2b17f80-1a10-4456-a7dd-89b53f9a27f4.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: adds lazy loading story",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md
index 6a473c6814b21c..0dd460d3d58106 100644
--- a/packages/react-components/react-tree/etc/react-tree.api.md
+++ b/packages/react-components/react-tree/etc/react-tree.api.md
@@ -60,6 +60,7 @@ export type FlatTreeItemProps<Value = string> = TreeItemProps<Value> & {
 // @public (undocumented)
 export type FlatTreeProps<Value = string> = Required<Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>> & {
     ref: React_2.Ref<HTMLDivElement>;
+    openItems: ImmutableSet<Value>;
 };
 
 // @public (undocumented)
diff --git a/packages/react-components/react-tree/src/hooks/useFlatTree.ts b/packages/react-components/react-tree/src/hooks/useFlatTree.ts
index f373c683ed87a6..f6888be33b84aa 100644
--- a/packages/react-components/react-tree/src/hooks/useFlatTree.ts
+++ b/packages/react-components/react-tree/src/hooks/useFlatTree.ts
@@ -12,6 +12,7 @@ import type {
   TreeProps,
 } from '../Tree';
 import type { TreeItemProps } from '../TreeItem';
+import { ImmutableSet } from '../utils/ImmutableSet';
 
 export type FlatTreeItemProps<Value = string> = TreeItemProps<Value> & {
   value: Value;
@@ -40,7 +41,10 @@ export type FlatTreeItem<Props extends FlatTreeItemProps<unknown> = FlatTreeItem
 
 export type FlatTreeProps<Value = string> = Required<
   Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>
-> & { ref: React.Ref<HTMLDivElement> };
+> & {
+  ref: React.Ref<HTMLDivElement>;
+  openItems: ImmutableSet<Value>;
+};
 
 /**
  * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.md b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.md
new file mode 100644
index 00000000000000..6f0a7922844b2d
--- /dev/null
+++ b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.md
@@ -0,0 +1 @@
+In this lazy-loading hierarchical `Tree` structure example, the `LazyTreeItem` component and `useFlatTree` hook are utilized to create an efficient and dynamic tree. The tree loads and displays data on-demand, improving initial rendering time and performance. The `LazyTreeItem` component handles loading states and tree structure updates upon clicking a tree item. The `useFlatTree` hook converts the flat array of items into a tree structure, and allows control over individual `TreeItem` components' open/closed states using the `openItems` and `onOpenChange` props.
diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx
new file mode 100644
index 00000000000000..6dffcabe2b440a
--- /dev/null
+++ b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import {
+  FlatTreeItemProps,
+  Tree,
+  TreeItem,
+  TreeItemLayout,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+  useFlatTree_unstable,
+} from '@fluentui/react-tree';
+import story from './TreeLazyLoading.md';
+import { Spinner } from '@fluentui/react-components';
+
+interface Result {
+  results: { name: string }[];
+}
+
+type Entity = FlatTreeItemProps & { name: string };
+
+export const LazyLoading = () => {
+  const peopleTree = useQuery<Entity[]>([]);
+  const planetsTree = useQuery<Entity[]>([]);
+  const starshipsTree = useQuery<Entity[]>([]);
+  const trees = {
+    people: peopleTree,
+    planets: planetsTree,
+    starships: starshipsTree,
+  };
+
+  const tree = React.useMemo<Entity[]>(
+    () => [
+      {
+        name: 'People',
+        value: 'people',
+        leaf: false,
+      },
+      ...peopleTree.value,
+      {
+        name: 'Planets',
+        value: 'planets',
+        leaf: false,
+      },
+      ...planetsTree.value,
+      {
+        name: 'Starship',
+        value: 'starships',
+        leaf: false,
+      },
+      ...starshipsTree.value,
+    ],
+    [peopleTree, planetsTree, starshipsTree],
+  );
+
+  const handleOpenChange = (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
+    if (data.open) {
+      if (
+        (data.value === 'people' || data.value === 'planets' || data.value === 'starships') &&
+        !trees[data.value].isLoaded
+      ) {
+        trees[data.value].query(() =>
+          fetch(`https://swapi.dev/api/${data.value}`)
+            .then(result => result.json())
+            .then((json: Result) =>
+              json.results.map<Entity>(people => ({
+                value: `${data.value}/${people.name}`,
+                parentValue: data.value,
+                name: people.name,
+              })),
+            ),
+        );
+      }
+    }
+  };
+
+  const flatTree = useFlatTree_unstable(tree, { onOpenChange: handleOpenChange });
+  const treeProps = flatTree.getTreeProps();
+  return (
+    <Tree {...treeProps} aria-label="Tree">
+      {Array.from(flatTree.items(), item => {
+        const { name, ...itemProps } = item.getTreeItemProps();
+        const { isLoading = false } = trees[item.value as 'people' | 'planets' | 'starships'] ?? {};
+        return (
+          <TreeItem expandIcon={isLoading ? <Spinner size="tiny" /> : undefined} key={item.value} {...itemProps}>
+            <TreeItemLayout>{name}</TreeItemLayout>
+          </TreeItem>
+        );
+      })}
+    </Tree>
+  );
+};
+
+LazyLoading.parameters = {
+  docs: {
+    description: {
+      story,
+    },
+  },
+};
+
+/**
+ * This function is just for the sake of the example,
+ * a library for fetching data (like react-query) might be a better option
+ */
+function useQuery<Value>(initialValue: Value) {
+  const [queryResult, setQueryResult] = React.useState({ value: initialValue, isLoading: false, isLoaded: false });
+  const query = (fn: () => Promise<Value> | Value) => {
+    setQueryResult(curr => ({ ...curr, isLoading: true }));
+    Promise.resolve(fn()).then(nextValue => {
+      setQueryResult({ value: nextValue, isLoaded: true, isLoading: false });
+    });
+  };
+  return { ...queryResult, query } as const;
+}
diff --git a/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx
index a054b8503018f6..eb95c8aa5cd060 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx
@@ -5,6 +5,7 @@ export { UseFlatTree as Default } from './useFlatTree.stories';
 export { FlattenTree as flattenTree } from './flattenTree.stories';
 export { Virtualization } from './Virtualization.stories';
 export { AddRemoveTreeItem } from './TreeItemAddRemove.stories';
+export { LazyLoading } from './TreeLazyLoading.stories';
 
 export default {
   title: 'Preview Components/Tree/flatTree',

From 9d6394b6c751092fd1d4e26ccc618b5ba05086ec Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Wed, 26 Apr 2023 16:45:14 +0200
Subject: [PATCH 13/28] chore: enforce files naming to use .styles.ts (#27698)

---
 ...-bf0a8560-2a11-4cbd-abab-090b17f2f115.json |  7 +++++++
 ...-4eb5b7ef-7eb3-43be-8678-f904b1c34516.json |  7 +++++++
 ...-589ba0e3-87be-4c97-84f7-1e0e44d016c0.json |  7 +++++++
 ...-ce914d92-b9ef-49ba-9259-00beb4ee18b6.json |  7 +++++++
 ...-a55c8fa2-3e82-481d-9e24-f502760f0c87.json |  7 +++++++
 ...-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json |  7 +++++++
 ...-c5baa26a-8d16-4d09-a003-7ab57ca5659b.json |  7 +++++++
 ...-0530b7e5-56a7-4fee-be88-952cc1896cc8.json |  7 +++++++
 ...-51c05197-e10f-49cd-a537-b19d4a4f7dd9.json |  7 +++++++
 ...-f331e95e-2241-42a7-8319-e27d78457cc5.json |  7 +++++++
 ...-a7765c4b-3557-4927-9f74-96da76ce5ccb.json |  7 +++++++
 .../src/components/Alert/Alert.test.tsx       |  2 +-
 .../src/components/Alert/Alert.tsx            |  2 +-
 .../react-alert/src/components/Alert/index.ts |  2 +-
 ...lertStyles.ts => useAlertStyles.styles.ts} |  0
 .../src/components/DataGrid/DataGrid.tsx      |  2 +-
 .../src/components/DataGrid/index.ts          |  2 +-
 .../{useDataGrid.ts => useDataGrid.styles.ts} |  0
 .../components/DataGridBody/DataGridBody.tsx  |  2 +-
 ...les.ts => useDataGridBodyStyles.styles.ts} |  0
 .../components/DataGridRow/DataGridRow.tsx    |  2 +-
 .../src/components/DataGridRow/index.ts       |  2 +-
 ...ataGridRow.ts => useDataGridRow.styles.ts} |  0
 .../DialogActions/DialogActions.tsx           |  2 +-
 .../src/components/DialogActions/index.ts     |  2 +-
 ...es.ts => useDialogActionsStyles.styles.ts} |  0
 .../src/components/DialogBody/DialogBody.tsx  |  2 +-
 .../src/components/DialogBody/index.ts        |  2 +-
 ...tyles.ts => useDialogBodyStyles.styles.ts} |  0
 .../DialogContent/DialogContent.tsx           |  2 +-
 .../src/components/DialogContent/index.ts     |  2 +-
 ...es.ts => useDialogContentStyles.styles.ts} |  0
 .../DialogSurface/DialogSurface.tsx           |  2 +-
 .../src/components/DialogSurface/index.ts     |  2 +-
 ...es.ts => useDialogSurfaceStyles.styles.ts} |  0
 .../components/DialogTitle/DialogTitle.tsx    |  2 +-
 .../src/components/DialogTitle/index.ts       |  2 +-
 .../components/DialogTitle/useDialogTitle.tsx |  2 +-
 ...yles.ts => useDialogTitleStyles.styles.ts} |  0
 .../DialogTrigger/DialogTrigger.tsx           |  2 +-
 .../src/components/DialogTrigger/index.ts     |  2 +-
 ...gTrigger.ts => useDialogTrigger.styles.ts} |  0
 .../src/components/Menu/Menu.test.tsx         |  1 -
 .../components/MenuDivider/MenuDivider.tsx    |  2 +-
 .../src/components/MenuDivider/index.ts       |  2 +-
 ...yles.ts => useMenuDividerStyles.styles.ts} |  0
 .../src/components/MenuGroup/MenuGroup.tsx    |  2 +-
 .../src/components/MenuGroup/index.ts         |  2 +-
 ...Styles.ts => useMenuGroupStyles.styles.ts} |  0
 .../MenuGroupHeader/MenuGroupHeader.tsx       |  2 +-
 .../src/components/MenuGroupHeader/index.ts   |  2 +-
 ....ts => useMenuGroupHeaderStyles.styles.ts} |  0
 .../src/components/MenuItem/MenuItem.tsx      |  2 +-
 .../src/components/MenuItem/index.ts          |  2 +-
 ...mStyles.ts => useMenuItemStyles.styles.ts} |  0
 .../MenuItemCheckbox/MenuItemCheckbox.tsx     |  2 +-
 .../src/components/MenuItemCheckbox/index.ts  |  2 +-
 ...ts => useMenuItemCheckboxStyles.styles.ts} |  2 +-
 .../MenuItemRadio/MenuItemRadio.tsx           |  2 +-
 .../src/components/MenuItemRadio/index.ts     |  2 +-
 ...es.ts => useMenuItemRadioStyles.styles.ts} |  2 +-
 .../src/components/MenuList/MenuList.tsx      |  2 +-
 .../src/components/MenuList/index.ts          |  2 +-
 ...tStyles.ts => useMenuListStyles.styles.ts} |  0
 .../components/MenuPopover/MenuPopover.tsx    |  2 +-
 .../src/components/MenuPopover/index.ts       |  2 +-
 ...yles.ts => useMenuPopoverStyles.styles.ts} |  0
 .../MenuSplitGroup/MenuSplitGroup.tsx         |  2 +-
 .../src/components/MenuSplitGroup/index.ts    |  2 +-
 ...s.ts => useMenuSplitGroupStyles.styles.ts} |  2 +-
 .../components/MenuTrigger/MenuTrigger.tsx    |  2 +-
 .../src/components/MenuTrigger/index.ts       |  2 +-
 ...enuTrigger.ts => useMenuTrigger.styles.ts} |  0
 .../react-menu/src/selectable/index.ts        |  2 +-
 ...Styles.ts => useCheckmarkStyles.styles.ts} |  0
 .../src/components/Overflow.tsx               | 20 +++----------------
 .../components/useOverflowStyles.styles.ts    | 16 +++++++++++++++
 .../PopoverSurface/PopoverSurface.tsx         |  2 +-
 .../src/components/PopoverSurface/index.ts    |  2 +-
 ...s.ts => usePopoverSurfaceStyles.styles.ts} |  0
 .../components/Portal/usePortalMountNode.ts   | 13 ++++--------
 .../Portal/usePortalMountNodeStyles.styles.ts |  8 ++++++++
 .../FluentProvider/FluentProvider.tsx         |  2 +-
 .../src/components/FluentProvider/index.ts    |  2 +-
 ...s.ts => useFluentProviderStyles.styles.ts} |  0
 .../useFluentProviderThemeStyleTag.ts         |  2 +-
 .../src/components/DataGrid/DataGrid.tsx      |  2 +-
 .../src/components/DataGrid/index.ts          |  2 +-
 ...dStyles.ts => useDataGridStyles.styles.ts} |  2 +-
 .../components/DataGridBody/DataGridBody.tsx  |  2 +-
 .../src/components/DataGridBody/index.ts      |  2 +-
 ...les.ts => useDataGridBodyStyles.styles.ts} |  2 +-
 .../components/DataGridCell/DataGridCell.tsx  |  2 +-
 .../src/components/DataGridCell/index.ts      |  2 +-
 ...les.ts => useDataGridCellStyles.styles.ts} |  2 +-
 .../DataGridHeader/DataGridHeader.tsx         |  2 +-
 .../src/components/DataGridHeader/index.ts    |  2 +-
 ...s.ts => useDataGridHeaderStyles.styles.ts} |  2 +-
 .../DataGridHeaderCell/DataGridHeaderCell.tsx |  2 +-
 .../components/DataGridHeaderCell/index.ts    |  2 +-
 ... => useDataGridHeaderCellStyles.styles.ts} |  2 +-
 .../components/DataGridRow/DataGridRow.tsx    |  2 +-
 .../src/components/DataGridRow/index.ts       |  2 +-
 ...yles.ts => useDataGridRowStyles.styles.ts} |  2 +-
 .../DataGridSelectionCell.test.tsx            |  2 +-
 .../DataGridSelectionCell.tsx                 |  2 +-
 .../components/DataGridSelectionCell/index.ts |  2 +-
 ... useDataGridSelectionCellStyles.styles.ts} |  2 +-
 .../src/components/Table/Table.tsx            |  2 +-
 .../react-table/src/components/Table/index.ts |  2 +-
 ...ableStyles.ts => useTableStyles.styles.ts} |  0
 .../src/components/TableBody/TableBody.tsx    |  2 +-
 .../src/components/TableBody/index.ts         |  2 +-
 ...Styles.ts => useTableBodyStyles.styles.ts} |  0
 .../src/components/TableCell/TableCell.tsx    |  2 +-
 .../src/components/TableCell/index.ts         |  2 +-
 ...Styles.ts => useTableCellStyles.styles.ts} |  0
 .../TableCellActions/TableCellActions.tsx     |  2 +-
 .../src/components/TableCellActions/index.ts  |  2 +-
 ...ts => useTableCellActionsStyles.styles.ts} |  0
 .../TableCellLayout/TableCellLayout.tsx       |  2 +-
 .../src/components/TableCellLayout/index.ts   |  2 +-
 ....ts => useTableCellLayoutStyles.styles.ts} |  0
 .../components/TableHeader/TableHeader.tsx    |  2 +-
 .../src/components/TableHeader/index.ts       |  2 +-
 ...yles.ts => useTableHeaderStyles.styles.ts} |  0
 .../TableHeaderCell/TableHeaderCell.tsx       |  2 +-
 .../src/components/TableHeaderCell/index.ts   |  2 +-
 ....ts => useTableHeaderCellStyles.styles.ts} |  0
 .../TableResizeHandle/TableResizeHandle.tsx   |  2 +-
 .../src/components/TableResizeHandle/index.ts |  2 +-
 ...s => useTableResizeHandleStyles.styles.ts} |  0
 .../src/components/TableRow/TableRow.tsx      |  2 +-
 .../src/components/TableRow/index.ts          |  2 +-
 ...wStyles.ts => useTableRowStyles.styles.ts} |  4 ++--
 .../TableSelectionCell.test.tsx               |  2 +-
 .../TableSelectionCell/TableSelectionCell.tsx |  2 +-
 .../components/TableSelectionCell/index.ts    |  2 +-
 ... => useTableSelectionCellStyles.styles.ts} |  0
 .../src/components/Toolbar/Toolbar.tsx        |  2 +-
 .../src/components/Toolbar/index.ts           |  2 +-
 ...arStyles.ts => useToolbarStyles.styles.ts} |  0
 .../ToolbarButton/ToolbarButton.tsx           |  2 +-
 .../src/components/ToolbarButton/index.ts     |  2 +-
 ...es.ts => useToolbarButtonStyles.styles.ts} |  0
 .../ToolbarDivider/ToolbarDivider.tsx         |  2 +-
 .../src/components/ToolbarDivider/index.ts    |  2 +-
 ...s.ts => useToolbarDividerStyles.styles.ts} |  0
 .../components/ToolbarGroup/ToolbarGroup.tsx  |  2 +-
 .../src/components/ToolbarGroup/index.ts      |  2 +-
 ...les.ts => useToolbarGroupStyles.styles.ts} |  0
 .../ToolbarRadioButton/ToolbarRadioButton.tsx |  2 +-
 .../components/ToolbarRadioButton/index.ts    |  2 +-
 ... => useToolbarRadioButtonStyles.styles.ts} |  0
 .../ToolbarToggleButton.tsx                   |  2 +-
 .../components/ToolbarToggleButton/index.ts   |  2 +-
 ...=> useToolbarToggleButtonStyles.styles.ts} |  0
 .../react-tree/src/components/Tree/Tree.tsx   |  2 +-
 .../react-tree/src/components/Tree/index.ts   |  2 +-
 ...eTreeStyles.ts => useTreeStyles.styles.ts} |  0
 .../src/components/TreeItem/TreeItem.test.tsx |  2 +-
 .../src/components/TreeItem/TreeItem.tsx      |  2 +-
 .../src/components/TreeItem/index.ts          |  2 +-
 .../src/components/TreeItem/useTreeItem.tsx   |  2 +-
 ...mStyles.ts => useTreeItemStyles.styles.ts} |  0
 .../TreeItemLayout/TreeItemLayout.tsx         |  2 +-
 .../src/components/TreeItemLayout/index.ts    |  2 +-
 ...s.ts => useTreeItemLayoutStyles.styles.ts} |  0
 .../TreeItemPersonaLayout.tsx                 |  2 +-
 .../components/TreeItemPersonaLayout/index.ts |  2 +-
 ... useTreeItemPersonaLayoutStyles.styles.ts} |  0
 171 files changed, 225 insertions(+), 144 deletions(-)
 create mode 100644 change/@fluentui-react-alert-bf0a8560-2a11-4cbd-abab-090b17f2f115.json
 create mode 100644 change/@fluentui-react-data-grid-react-window-4eb5b7ef-7eb3-43be-8678-f904b1c34516.json
 create mode 100644 change/@fluentui-react-dialog-589ba0e3-87be-4c97-84f7-1e0e44d016c0.json
 create mode 100644 change/@fluentui-react-menu-ce914d92-b9ef-49ba-9259-00beb4ee18b6.json
 create mode 100644 change/@fluentui-react-overflow-a55c8fa2-3e82-481d-9e24-f502760f0c87.json
 create mode 100644 change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json
 create mode 100644 change/@fluentui-react-portal-c5baa26a-8d16-4d09-a003-7ab57ca5659b.json
 create mode 100644 change/@fluentui-react-provider-0530b7e5-56a7-4fee-be88-952cc1896cc8.json
 create mode 100644 change/@fluentui-react-table-51c05197-e10f-49cd-a537-b19d4a4f7dd9.json
 create mode 100644 change/@fluentui-react-toolbar-f331e95e-2241-42a7-8319-e27d78457cc5.json
 create mode 100644 change/@fluentui-react-tree-a7765c4b-3557-4927-9f74-96da76ce5ccb.json
 rename packages/react-components/react-alert/src/components/Alert/{useAlertStyles.ts => useAlertStyles.styles.ts} (100%)
 rename packages/react-components/react-data-grid-react-window/src/components/DataGrid/{useDataGrid.ts => useDataGrid.styles.ts} (100%)
 rename packages/react-components/react-data-grid-react-window/src/components/DataGridBody/{useDataGridBodyStyles.ts => useDataGridBodyStyles.styles.ts} (100%)
 rename packages/react-components/react-data-grid-react-window/src/components/DataGridRow/{useDataGridRow.ts => useDataGridRow.styles.ts} (100%)
 rename packages/react-components/react-dialog/src/components/DialogActions/{useDialogActionsStyles.ts => useDialogActionsStyles.styles.ts} (100%)
 rename packages/react-components/react-dialog/src/components/DialogBody/{useDialogBodyStyles.ts => useDialogBodyStyles.styles.ts} (100%)
 rename packages/react-components/react-dialog/src/components/DialogContent/{useDialogContentStyles.ts => useDialogContentStyles.styles.ts} (100%)
 rename packages/react-components/react-dialog/src/components/DialogSurface/{useDialogSurfaceStyles.ts => useDialogSurfaceStyles.styles.ts} (100%)
 rename packages/react-components/react-dialog/src/components/DialogTitle/{useDialogTitleStyles.ts => useDialogTitleStyles.styles.ts} (100%)
 rename packages/react-components/react-dialog/src/components/DialogTrigger/{useDialogTrigger.ts => useDialogTrigger.styles.ts} (100%)
 rename packages/react-components/react-menu/src/components/MenuDivider/{useMenuDividerStyles.ts => useMenuDividerStyles.styles.ts} (100%)
 rename packages/react-components/react-menu/src/components/MenuGroup/{useMenuGroupStyles.ts => useMenuGroupStyles.styles.ts} (100%)
 rename packages/react-components/react-menu/src/components/MenuGroupHeader/{useMenuGroupHeaderStyles.ts => useMenuGroupHeaderStyles.styles.ts} (100%)
 rename packages/react-components/react-menu/src/components/MenuItem/{useMenuItemStyles.ts => useMenuItemStyles.styles.ts} (100%)
 rename packages/react-components/react-menu/src/components/MenuItemCheckbox/{useMenuItemCheckboxStyles.ts => useMenuItemCheckboxStyles.styles.ts} (98%)
 rename packages/react-components/react-menu/src/components/MenuItemRadio/{useMenuItemRadioStyles.ts => useMenuItemRadioStyles.styles.ts} (98%)
 rename packages/react-components/react-menu/src/components/MenuList/{useMenuListStyles.ts => useMenuListStyles.styles.ts} (100%)
 rename packages/react-components/react-menu/src/components/MenuPopover/{useMenuPopoverStyles.ts => useMenuPopoverStyles.styles.ts} (100%)
 rename packages/react-components/react-menu/src/components/MenuSplitGroup/{useMenuSplitGroupStyles.ts => useMenuSplitGroupStyles.styles.ts} (99%)
 rename packages/react-components/react-menu/src/components/MenuTrigger/{useMenuTrigger.ts => useMenuTrigger.styles.ts} (100%)
 rename packages/react-components/react-menu/src/selectable/{useCheckmarkStyles.ts => useCheckmarkStyles.styles.ts} (100%)
 create mode 100644 packages/react-components/react-overflow/src/components/useOverflowStyles.styles.ts
 rename packages/react-components/react-popover/src/components/PopoverSurface/{usePopoverSurfaceStyles.ts => usePopoverSurfaceStyles.styles.ts} (100%)
 create mode 100644 packages/react-components/react-portal/src/components/Portal/usePortalMountNodeStyles.styles.ts
 rename packages/react-components/react-provider/src/components/FluentProvider/{useFluentProviderStyles.ts => useFluentProviderStyles.styles.ts} (100%)
 rename packages/react-components/react-table/src/components/DataGrid/{useDataGridStyles.ts => useDataGridStyles.styles.ts} (98%)
 rename packages/react-components/react-table/src/components/DataGridBody/{useDataGridBodyStyles.ts => useDataGridBodyStyles.styles.ts} (96%)
 rename packages/react-components/react-table/src/components/DataGridCell/{useDataGridCellStyles.ts => useDataGridCellStyles.styles.ts} (96%)
 rename packages/react-components/react-table/src/components/DataGridHeader/{useDataGridHeaderStyles.ts => useDataGridHeaderStyles.styles.ts} (96%)
 rename packages/react-components/react-table/src/components/DataGridHeaderCell/{useDataGridHeaderCellStyles.ts => useDataGridHeaderCellStyles.styles.ts} (96%)
 rename packages/react-components/react-table/src/components/DataGridRow/{useDataGridRowStyles.ts => useDataGridRowStyles.styles.ts} (97%)
 rename packages/react-components/react-table/src/components/DataGridSelectionCell/{useDataGridSelectionCellStyles.ts => useDataGridSelectionCellStyles.styles.ts} (96%)
 rename packages/react-components/react-table/src/components/Table/{useTableStyles.ts => useTableStyles.styles.ts} (100%)
 rename packages/react-components/react-table/src/components/TableBody/{useTableBodyStyles.ts => useTableBodyStyles.styles.ts} (100%)
 rename packages/react-components/react-table/src/components/TableCell/{useTableCellStyles.ts => useTableCellStyles.styles.ts} (100%)
 rename packages/react-components/react-table/src/components/TableCellActions/{useTableCellActionsStyles.ts => useTableCellActionsStyles.styles.ts} (100%)
 rename packages/react-components/react-table/src/components/TableCellLayout/{useTableCellLayoutStyles.ts => useTableCellLayoutStyles.styles.ts} (100%)
 rename packages/react-components/react-table/src/components/TableHeader/{useTableHeaderStyles.ts => useTableHeaderStyles.styles.ts} (100%)
 rename packages/react-components/react-table/src/components/TableHeaderCell/{useTableHeaderCellStyles.ts => useTableHeaderCellStyles.styles.ts} (100%)
 rename packages/react-components/react-table/src/components/TableResizeHandle/{useTableResizeHandleStyles.ts => useTableResizeHandleStyles.styles.ts} (100%)
 rename packages/react-components/react-table/src/components/TableRow/{useTableRowStyles.ts => useTableRowStyles.styles.ts} (98%)
 rename packages/react-components/react-table/src/components/TableSelectionCell/{useTableSelectionCellStyles.ts => useTableSelectionCellStyles.styles.ts} (100%)
 rename packages/react-components/react-toolbar/src/components/Toolbar/{useToolbarStyles.ts => useToolbarStyles.styles.ts} (100%)
 rename packages/react-components/react-toolbar/src/components/ToolbarButton/{useToolbarButtonStyles.ts => useToolbarButtonStyles.styles.ts} (100%)
 rename packages/react-components/react-toolbar/src/components/ToolbarDivider/{useToolbarDividerStyles.ts => useToolbarDividerStyles.styles.ts} (100%)
 rename packages/react-components/react-toolbar/src/components/ToolbarGroup/{useToolbarGroupStyles.ts => useToolbarGroupStyles.styles.ts} (100%)
 rename packages/react-components/react-toolbar/src/components/ToolbarRadioButton/{useToolbarRadioButtonStyles.ts => useToolbarRadioButtonStyles.styles.ts} (100%)
 rename packages/react-components/react-toolbar/src/components/ToolbarToggleButton/{useToolbarToggleButtonStyles.ts => useToolbarToggleButtonStyles.styles.ts} (100%)
 rename packages/react-components/react-tree/src/components/Tree/{useTreeStyles.ts => useTreeStyles.styles.ts} (100%)
 rename packages/react-components/react-tree/src/components/TreeItem/{useTreeItemStyles.ts => useTreeItemStyles.styles.ts} (100%)
 rename packages/react-components/react-tree/src/components/TreeItemLayout/{useTreeItemLayoutStyles.ts => useTreeItemLayoutStyles.styles.ts} (100%)
 rename packages/react-components/react-tree/src/components/TreeItemPersonaLayout/{useTreeItemPersonaLayoutStyles.ts => useTreeItemPersonaLayoutStyles.styles.ts} (100%)

diff --git a/change/@fluentui-react-alert-bf0a8560-2a11-4cbd-abab-090b17f2f115.json b/change/@fluentui-react-alert-bf0a8560-2a11-4cbd-abab-090b17f2f115.json
new file mode 100644
index 00000000000000..67ec74f9958e0c
--- /dev/null
+++ b/change/@fluentui-react-alert-bf0a8560-2a11-4cbd-abab-090b17f2f115.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-alert",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-data-grid-react-window-4eb5b7ef-7eb3-43be-8678-f904b1c34516.json b/change/@fluentui-react-data-grid-react-window-4eb5b7ef-7eb3-43be-8678-f904b1c34516.json
new file mode 100644
index 00000000000000..68215b548f09eb
--- /dev/null
+++ b/change/@fluentui-react-data-grid-react-window-4eb5b7ef-7eb3-43be-8678-f904b1c34516.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-data-grid-react-window",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-dialog-589ba0e3-87be-4c97-84f7-1e0e44d016c0.json b/change/@fluentui-react-dialog-589ba0e3-87be-4c97-84f7-1e0e44d016c0.json
new file mode 100644
index 00000000000000..5e622cf4dad62d
--- /dev/null
+++ b/change/@fluentui-react-dialog-589ba0e3-87be-4c97-84f7-1e0e44d016c0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-dialog",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-ce914d92-b9ef-49ba-9259-00beb4ee18b6.json b/change/@fluentui-react-menu-ce914d92-b9ef-49ba-9259-00beb4ee18b6.json
new file mode 100644
index 00000000000000..4f19e9862ee6c2
--- /dev/null
+++ b/change/@fluentui-react-menu-ce914d92-b9ef-49ba-9259-00beb4ee18b6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-menu",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-overflow-a55c8fa2-3e82-481d-9e24-f502760f0c87.json b/change/@fluentui-react-overflow-a55c8fa2-3e82-481d-9e24-f502760f0c87.json
new file mode 100644
index 00000000000000..41e78b13023a74
--- /dev/null
+++ b/change/@fluentui-react-overflow-a55c8fa2-3e82-481d-9e24-f502760f0c87.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-overflow",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json b/change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json
new file mode 100644
index 00000000000000..29f554ac83bcfd
--- /dev/null
+++ b/change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-popover",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-portal-c5baa26a-8d16-4d09-a003-7ab57ca5659b.json b/change/@fluentui-react-portal-c5baa26a-8d16-4d09-a003-7ab57ca5659b.json
new file mode 100644
index 00000000000000..90aadd2091f390
--- /dev/null
+++ b/change/@fluentui-react-portal-c5baa26a-8d16-4d09-a003-7ab57ca5659b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-portal",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-provider-0530b7e5-56a7-4fee-be88-952cc1896cc8.json b/change/@fluentui-react-provider-0530b7e5-56a7-4fee-be88-952cc1896cc8.json
new file mode 100644
index 00000000000000..b0213707de2471
--- /dev/null
+++ b/change/@fluentui-react-provider-0530b7e5-56a7-4fee-be88-952cc1896cc8.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-provider",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-table-51c05197-e10f-49cd-a537-b19d4a4f7dd9.json b/change/@fluentui-react-table-51c05197-e10f-49cd-a537-b19d4a4f7dd9.json
new file mode 100644
index 00000000000000..530abec2115ead
--- /dev/null
+++ b/change/@fluentui-react-table-51c05197-e10f-49cd-a537-b19d4a4f7dd9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-table",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toolbar-f331e95e-2241-42a7-8319-e27d78457cc5.json b/change/@fluentui-react-toolbar-f331e95e-2241-42a7-8319-e27d78457cc5.json
new file mode 100644
index 00000000000000..3de71bf9ea345d
--- /dev/null
+++ b/change/@fluentui-react-toolbar-f331e95e-2241-42a7-8319-e27d78457cc5.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tree-a7765c4b-3557-4927-9f74-96da76ce5ccb.json b/change/@fluentui-react-tree-a7765c4b-3557-4927-9f74-96da76ce5ccb.json
new file mode 100644
index 00000000000000..870eac1d9832d7
--- /dev/null
+++ b/change/@fluentui-react-tree-a7765c4b-3557-4927-9f74-96da76ce5ccb.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-tree",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx b/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
index 67357cb0e2ba6f..fea73e3f02df33 100644
--- a/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
+++ b/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { isConformant } from '../../testing/isConformant';
 import { Alert } from './Alert';
-import { alertClassNames } from './useAlertStyles';
+import { alertClassNames } from './useAlertStyles.styles';
 
 describe('Alert', () => {
   isConformant({
diff --git a/packages/react-components/react-alert/src/components/Alert/Alert.tsx b/packages/react-components/react-alert/src/components/Alert/Alert.tsx
index f8a41b80a27833..cfa91747e5ba94 100644
--- a/packages/react-components/react-alert/src/components/Alert/Alert.tsx
+++ b/packages/react-components/react-alert/src/components/Alert/Alert.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { renderAlert_unstable } from './renderAlert';
 import { useAlert_unstable } from './useAlert';
-import { useAlertStyles_unstable } from './useAlertStyles';
+import { useAlertStyles_unstable } from './useAlertStyles.styles';
 
 import type { AlertProps } from './Alert.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-alert/src/components/Alert/index.ts b/packages/react-components/react-alert/src/components/Alert/index.ts
index 1ea74ef4adfd4b..46340d6b4b9281 100644
--- a/packages/react-components/react-alert/src/components/Alert/index.ts
+++ b/packages/react-components/react-alert/src/components/Alert/index.ts
@@ -2,4 +2,4 @@ export * from './Alert';
 export * from './Alert.types';
 export * from './renderAlert';
 export * from './useAlert';
-export * from './useAlertStyles';
+export * from './useAlertStyles.styles';
diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
rename to packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx
index b2daaa21a7941e..62bfa0648d0305 100644
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx
+++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useDataGrid_unstable } from './useDataGrid';
+import { useDataGrid_unstable } from './useDataGrid.styles';
 import {
   renderDataGrid_unstable,
   useDataGridStyles_unstable,
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts
index 0b3589e2b3bc1d..b5c5a7388b1d75 100644
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts
+++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts
@@ -1,2 +1,2 @@
 export * from './DataGrid';
-export * from './useDataGrid';
+export * from './useDataGrid.styles';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.styles.ts
similarity index 100%
rename from packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts
rename to packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.styles.ts
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx
index 754782dcc6881e..481937ef050f61 100644
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx
+++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles';
+import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles';
 import { useDataGridBody_unstable } from './useDataGridBody';
 import { renderDataGridBody_unstable } from './renderDataGridBody';
 import type { DataGridBodyProps } from './DataGridBody.types';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts
rename to packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.styles.ts
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx
index 11c6f85063d87c..b5d8b394ca3ef3 100644
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx
+++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useDataGridRowStyles_unstable, renderDataGridRow_unstable } from '@fluentui/react-table';
-import { useDataGridRow_unstable } from './useDataGridRow';
+import { useDataGridRow_unstable } from './useDataGridRow.styles';
 import type { DataGridRowProps } from '@fluentui/react-table';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts
index 15727b3664100a..a5ab3d0a834cda 100644
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts
+++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts
@@ -1,2 +1,2 @@
 export * from './DataGridRow';
-export * from './useDataGridRow';
+export * from './useDataGridRow.styles';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.styles.ts
similarity index 100%
rename from packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.ts
rename to packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.styles.ts
diff --git a/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx b/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx
index 8f6b2ef5c8ed87..3ef410875ce1ab 100644
--- a/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx
+++ b/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDialogActions_unstable } from './useDialogActions';
 import { renderDialogActions_unstable } from './renderDialogActions';
-import { useDialogActionsStyles_unstable } from './useDialogActionsStyles';
+import { useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';
 import type { DialogActionsProps } from './DialogActions.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-dialog/src/components/DialogActions/index.ts b/packages/react-components/react-dialog/src/components/DialogActions/index.ts
index 5b6fc48233a897..0bb1d1cf48bd54 100644
--- a/packages/react-components/react-dialog/src/components/DialogActions/index.ts
+++ b/packages/react-components/react-dialog/src/components/DialogActions/index.ts
@@ -2,4 +2,4 @@ export * from './DialogActions';
 export * from './DialogActions.types';
 export * from './renderDialogActions';
 export * from './useDialogActions';
-export * from './useDialogActionsStyles';
+export * from './useDialogActionsStyles.styles';
diff --git a/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts b/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts
rename to packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.styles.ts
diff --git a/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx b/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx
index ec18e06c68371d..e0cc53b302e1dd 100644
--- a/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx
+++ b/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDialogBody_unstable } from './useDialogBody';
 import { renderDialogBody_unstable } from './renderDialogBody';
-import { useDialogBodyStyles_unstable } from './useDialogBodyStyles';
+import { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';
 import type { DialogBodyProps } from './DialogBody.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-dialog/src/components/DialogBody/index.ts b/packages/react-components/react-dialog/src/components/DialogBody/index.ts
index caade527cc447e..bd1e90e0a99cb2 100644
--- a/packages/react-components/react-dialog/src/components/DialogBody/index.ts
+++ b/packages/react-components/react-dialog/src/components/DialogBody/index.ts
@@ -2,4 +2,4 @@ export * from './DialogBody';
 export * from './DialogBody.types';
 export * from './renderDialogBody';
 export * from './useDialogBody';
-export * from './useDialogBodyStyles';
+export * from './useDialogBodyStyles.styles';
diff --git a/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts b/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts
rename to packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.styles.ts
diff --git a/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx b/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx
index d5a1ff53429a2e..70b4a65cc56c5d 100644
--- a/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx
+++ b/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDialogContent_unstable } from './useDialogContent';
 import { renderDialogContent_unstable } from './renderDialogContent';
-import { useDialogContentStyles_unstable } from './useDialogContentStyles';
+import { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';
 import type { DialogContentProps } from './DialogContent.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-dialog/src/components/DialogContent/index.ts b/packages/react-components/react-dialog/src/components/DialogContent/index.ts
index ccedb8165f7d77..b82b9c3521b398 100644
--- a/packages/react-components/react-dialog/src/components/DialogContent/index.ts
+++ b/packages/react-components/react-dialog/src/components/DialogContent/index.ts
@@ -2,4 +2,4 @@ export * from './DialogContent';
 export * from './DialogContent.types';
 export * from './renderDialogContent';
 export * from './useDialogContent';
-export * from './useDialogContentStyles';
+export * from './useDialogContentStyles.styles';
diff --git a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts
rename to packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.styles.ts
diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx b/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx
index c3fa7e9fca0881..b84396ac846775 100644
--- a/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx
+++ b/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDialogSurface_unstable } from './useDialogSurface';
 import { renderDialogSurface_unstable } from './renderDialogSurface';
-import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles';
+import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';
 import type { DialogSurfaceProps } from './DialogSurface.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';
diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/index.ts b/packages/react-components/react-dialog/src/components/DialogSurface/index.ts
index d19bafa777e149..15d5efe48eeec0 100644
--- a/packages/react-components/react-dialog/src/components/DialogSurface/index.ts
+++ b/packages/react-components/react-dialog/src/components/DialogSurface/index.ts
@@ -2,4 +2,4 @@ export * from './DialogSurface';
 export * from './DialogSurface.types';
 export * from './renderDialogSurface';
 export * from './useDialogSurface';
-export * from './useDialogSurfaceStyles';
+export * from './useDialogSurfaceStyles.styles';
diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts
rename to packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts
diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx b/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx
index 7bc0ce7591f560..2d60f6ef40f04f 100644
--- a/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx
+++ b/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDialogTitle_unstable } from './useDialogTitle';
 import { renderDialogTitle_unstable } from './renderDialogTitle';
-import { useDialogTitleStyles_unstable } from './useDialogTitleStyles';
+import { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';
 import type { DialogTitleProps } from './DialogTitle.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/index.ts b/packages/react-components/react-dialog/src/components/DialogTitle/index.ts
index 047ee38dc730a9..af498e61b1d6ce 100644
--- a/packages/react-components/react-dialog/src/components/DialogTitle/index.ts
+++ b/packages/react-components/react-dialog/src/components/DialogTitle/index.ts
@@ -2,4 +2,4 @@ export * from './DialogTitle';
 export * from './DialogTitle.types';
 export * from './renderDialogTitle';
 export * from './useDialogTitle';
-export * from './useDialogTitleStyles';
+export * from './useDialogTitleStyles.styles';
diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx
index 0e08fdc6255755..5aef3e2cbfb26f 100644
--- a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx
+++ b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx
@@ -5,7 +5,7 @@ import { useDialogContext_unstable } from '../../contexts/dialogContext';
 import { Dismiss24Regular } from '@fluentui/react-icons';
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
-import { useDialogTitleInternalStyles } from './useDialogTitleStyles';
+import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
 
 /**
  * Create the state required to render DialogTitle.
diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.ts b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.ts
rename to packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.styles.ts
diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx b/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx
index a7a461654a9489..d69fd85ace76d3 100644
--- a/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx
+++ b/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useDialogTrigger_unstable } from './useDialogTrigger';
+import { useDialogTrigger_unstable } from './useDialogTrigger.styles';
 import { renderDialogTrigger_unstable } from './renderDialogTrigger';
 import type { DialogTriggerProps } from './DialogTrigger.types';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts b/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts
index cefe8176cb56b8..a6458850c55c0c 100644
--- a/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts
+++ b/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts
@@ -1,4 +1,4 @@
 export * from './DialogTrigger';
 export * from './DialogTrigger.types';
 export * from './renderDialogTrigger';
-export * from './useDialogTrigger';
+export * from './useDialogTrigger.styles';
diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts b/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.styles.ts
similarity index 100%
rename from packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts
rename to packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.styles.ts
diff --git a/packages/react-components/react-menu/src/components/Menu/Menu.test.tsx b/packages/react-components/react-menu/src/components/Menu/Menu.test.tsx
index d876ba971a07ee..58d3fe512e16d5 100644
--- a/packages/react-components/react-menu/src/components/Menu/Menu.test.tsx
+++ b/packages/react-components/react-menu/src/components/Menu/Menu.test.tsx
@@ -144,7 +144,6 @@ describe('Menu', () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            {/* eslint-disable-next-line @fluentui/max-len */}
             {/* @ts-expect-error - MenuItemComponent is union of 3 non-matching interfaces. Unnecessary narrowing logic would be needed which is out of scope for what is being tested  */}
             <MenuItemComponent disabled {...props}>
               Item
diff --git a/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx b/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx
index f431113e52757d..3ab30d21a7b710 100644
--- a/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx
+++ b/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMenuDivider_unstable } from './useMenuDivider';
-import { useMenuDividerStyles_unstable } from './useMenuDividerStyles';
+import { useMenuDividerStyles_unstable } from './useMenuDividerStyles.styles';
 import { renderMenuDivider_unstable } from './renderMenuDivider';
 import type { MenuDividerProps } from './MenuDivider.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-menu/src/components/MenuDivider/index.ts b/packages/react-components/react-menu/src/components/MenuDivider/index.ts
index bd1eccccc7fe72..b3ce7e41abbce1 100644
--- a/packages/react-components/react-menu/src/components/MenuDivider/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuDivider/index.ts
@@ -2,4 +2,4 @@ export * from './MenuDivider.types';
 export * from './MenuDivider';
 export * from './renderMenuDivider';
 export * from './useMenuDivider';
-export * from './useMenuDividerStyles';
+export * from './useMenuDividerStyles.styles';
diff --git a/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts b/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
rename to packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.styles.ts
diff --git a/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx b/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx
index 2476fd06badce3..5e219f6318a4d0 100644
--- a/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx
+++ b/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx
@@ -4,7 +4,7 @@ import { renderMenuGroup_unstable } from './renderMenuGroup';
 import { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';
 import type { MenuGroupProps } from './MenuGroup.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { useMenuGroupStyles_unstable } from './useMenuGroupStyles';
+import { useMenuGroupStyles_unstable } from './useMenuGroupStyles.styles';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
diff --git a/packages/react-components/react-menu/src/components/MenuGroup/index.ts b/packages/react-components/react-menu/src/components/MenuGroup/index.ts
index 75c785120a4328..698b5c6bce6099 100644
--- a/packages/react-components/react-menu/src/components/MenuGroup/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuGroup/index.ts
@@ -3,4 +3,4 @@ export * from './MenuGroup';
 export * from './renderMenuGroup';
 export * from './useMenuGroup';
 export * from './useMenuGroupContextValues';
-export * from './useMenuGroupStyles';
+export * from './useMenuGroupStyles.styles';
diff --git a/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts b/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
rename to packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.styles.ts
diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx b/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx
index 0a64728ade434a..a858b018cde692 100644
--- a/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx
+++ b/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMenuGroupHeader_unstable } from './useMenuGroupHeader';
-import { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles';
+import { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';
 import { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';
 import type { MenuGroupHeaderProps } from './MenuGroupHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts b/packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts
index cfa4eae82c7289..0ed602008ef442 100644
--- a/packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts
@@ -2,4 +2,4 @@ export * from './MenuGroupHeader.types';
 export * from './MenuGroupHeader';
 export * from './renderMenuGroupHeader';
 export * from './useMenuGroupHeader';
-export * from './useMenuGroupHeaderStyles';
+export * from './useMenuGroupHeaderStyles.styles';
diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts b/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
rename to packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts
diff --git a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx
index 1675b14a5e334a..e0e0781cc4bbeb 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx
+++ b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMenuItem_unstable } from './useMenuItem';
 import { renderMenuItem_unstable } from './renderMenuItem';
-import { useMenuItemStyles_unstable } from './useMenuItemStyles';
+import { useMenuItemStyles_unstable } from './useMenuItemStyles.styles';
 import type { MenuItemProps } from './MenuItem.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-menu/src/components/MenuItem/index.ts b/packages/react-components/react-menu/src/components/MenuItem/index.ts
index 0b29cffc22b177..d7dd7263467eb6 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuItem/index.ts
@@ -2,4 +2,4 @@ export * from './MenuItem';
 export * from './MenuItem.types';
 export * from './renderMenuItem';
 export * from './useMenuItem';
-export * from './useMenuItemStyles';
+export * from './useMenuItemStyles.styles';
diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts
rename to packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx b/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx
index 2c7ed1b5f2f0fb..27a8a0612fbc66 100644
--- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx
+++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';
 import { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';
-import { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';
+import { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles.styles';
 import type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts b/packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts
index a83c37b3b835de..2c8eda2b015be2 100644
--- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts
@@ -2,4 +2,4 @@ export * from './MenuItemCheckbox.types';
 export * from './MenuItemCheckbox';
 export * from './renderMenuItemCheckbox';
 export * from './useMenuItemCheckbox';
-export * from './useMenuItemCheckboxStyles';
+export * from './useMenuItemCheckboxStyles.styles';
diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts b/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts
similarity index 98%
rename from packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
rename to packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts
index fbd280b4ecb398..c9d99176b6a145 100644
--- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts
@@ -1,6 +1,6 @@
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
-import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
+import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { MenuItemSlots } from '../index';
 import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx b/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx
index 2297cec627f5e3..29987dfca3c4a5 100644
--- a/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx
+++ b/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMenuItemRadio_unstable } from './useMenuItemRadio';
 import { renderMenuItemRadio_unstable } from './renderMenuItemRadio';
-import { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles';
+import { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles.styles';
 import type { MenuItemRadioProps } from './MenuItemRadio.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/index.ts b/packages/react-components/react-menu/src/components/MenuItemRadio/index.ts
index 5fccfd5f89c2cc..8ca3847c613294 100644
--- a/packages/react-components/react-menu/src/components/MenuItemRadio/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuItemRadio/index.ts
@@ -2,4 +2,4 @@ export * from './MenuItemRadio.types';
 export * from './MenuItemRadio';
 export * from './renderMenuItemRadio';
 export * from './useMenuItemRadio';
-export * from './useMenuItemRadioStyles';
+export * from './useMenuItemRadioStyles.styles';
diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts b/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts
similarity index 98%
rename from packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
rename to packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts
index 7da6c66881a013..d55c3d848a173f 100644
--- a/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts
@@ -1,6 +1,6 @@
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
-import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
+import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { MenuItemSlots } from '../index';
 import type { MenuItemRadioState } from './MenuItemRadio.types';
diff --git a/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx b/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx
index 4786a7c9120b31..3e8992f4363d51 100644
--- a/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx
+++ b/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useMenuList_unstable } from './useMenuList';
 import { renderMenuList_unstable } from './renderMenuList';
 import { useMenuListContextValues_unstable } from './useMenuListContextValues';
-import { useMenuListStyles_unstable } from './useMenuListStyles';
+import { useMenuListStyles_unstable } from './useMenuListStyles.styles';
 import type { MenuListProps } from './MenuList.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-menu/src/components/MenuList/index.ts b/packages/react-components/react-menu/src/components/MenuList/index.ts
index ffa4d4b2b0602c..b31eacd3ed5534 100644
--- a/packages/react-components/react-menu/src/components/MenuList/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuList/index.ts
@@ -2,5 +2,5 @@ export * from './MenuList';
 export * from './MenuList.types';
 export * from './renderMenuList';
 export * from './useMenuList';
-export * from './useMenuListStyles';
+export * from './useMenuListStyles.styles';
 export * from './useMenuListContextValues';
diff --git a/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts b/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts
rename to packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts
diff --git a/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx b/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx
index 1e0dbc2573362e..fdbd423a2def19 100644
--- a/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx
+++ b/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMenuPopover_unstable } from './useMenuPopover';
-import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';
+import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';
 import { renderMenuPopover_unstable } from './renderMenuPopover';
 import type { MenuPopoverProps } from './MenuPopover.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-menu/src/components/MenuPopover/index.ts b/packages/react-components/react-menu/src/components/MenuPopover/index.ts
index 8d0c44ba098a74..84ae361cc00a89 100644
--- a/packages/react-components/react-menu/src/components/MenuPopover/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuPopover/index.ts
@@ -2,4 +2,4 @@ export * from './MenuPopover';
 export * from './MenuPopover.types';
 export * from './renderMenuPopover';
 export * from './useMenuPopover';
-export * from './useMenuPopoverStyles';
+export * from './useMenuPopoverStyles.styles';
diff --git a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
rename to packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.styles.ts
diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx b/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx
index 1271e8217e0dba..fc090d1da217e2 100644
--- a/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx
+++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMenuSplitGroup_unstable } from './useMenuSplitGroup';
 import { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';
-import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';
+import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';
 import type { MenuSplitGroupProps } from './MenuSplitGroup.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts b/packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts
index b2a65af21252e0..a9bf5ffac60a87 100644
--- a/packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts
@@ -2,4 +2,4 @@ export * from './MenuSplitGroup';
 export * from './MenuSplitGroup.types';
 export * from './renderMenuSplitGroup';
 export * from './useMenuSplitGroup';
-export * from './useMenuSplitGroupStyles';
+export * from './useMenuSplitGroupStyles.styles';
diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts b/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts
similarity index 99%
rename from packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
rename to packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts
index 683ae56cc594ae..318db14dc7524f 100644
--- a/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';
 import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx b/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx
index 6b380e0dd3687c..f33a6edd402c5d 100644
--- a/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx
+++ b/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMenuTrigger_unstable } from './useMenuTrigger';
+import { useMenuTrigger_unstable } from './useMenuTrigger.styles';
 import { renderMenuTrigger_unstable } from './renderMenuTrigger';
 import type { MenuTriggerProps } from './MenuTrigger.types';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/index.ts b/packages/react-components/react-menu/src/components/MenuTrigger/index.ts
index b5b4a29882293f..87de2ef026bca3 100644
--- a/packages/react-components/react-menu/src/components/MenuTrigger/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuTrigger/index.ts
@@ -1,4 +1,4 @@
 export * from './MenuTrigger';
 export * from './MenuTrigger.types';
 export * from './renderMenuTrigger';
-export * from './useMenuTrigger';
+export * from './useMenuTrigger.styles';
diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts b/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.styles.ts
similarity index 100%
rename from packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts
rename to packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.styles.ts
diff --git a/packages/react-components/react-menu/src/selectable/index.ts b/packages/react-components/react-menu/src/selectable/index.ts
index 3b6e83350f9512..6f5ded7fa41945 100644
--- a/packages/react-components/react-menu/src/selectable/index.ts
+++ b/packages/react-components/react-menu/src/selectable/index.ts
@@ -1,2 +1,2 @@
-export * from './useCheckmarkStyles';
+export * from './useCheckmarkStyles.styles';
 export * from './types';
diff --git a/packages/react-components/react-menu/src/selectable/useCheckmarkStyles.ts b/packages/react-components/react-menu/src/selectable/useCheckmarkStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-menu/src/selectable/useCheckmarkStyles.ts
rename to packages/react-components/react-menu/src/selectable/useCheckmarkStyles.styles.ts
diff --git a/packages/react-components/react-overflow/src/components/Overflow.tsx b/packages/react-components/react-overflow/src/components/Overflow.tsx
index d5b4db24221829..3dbd46e94a6e43 100644
--- a/packages/react-components/react-overflow/src/components/Overflow.tsx
+++ b/packages/react-components/react-overflow/src/components/Overflow.tsx
@@ -1,25 +1,11 @@
 import * as React from 'react';
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { mergeClasses } from '@griffel/react';
 import type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';
 import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
 
 import { OverflowContext } from '../overflowContext';
 import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
-import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
-
-const useStyles = makeStyles({
-  overflowMenu: {
-    [`& [${DATA_OVERFLOW_MENU}]`]: {
-      flexShrink: 0,
-    },
-  },
-
-  overflowingItems: {
-    [`& [${DATA_OVERFLOWING}]`]: {
-      display: 'none',
-    },
-  },
-});
+import { useOverflowStyles } from './useOverflowStyles.styles';
 
 /**
  * Overflow Props
@@ -34,7 +20,7 @@ export type OverflowProps = Partial<
  * Provides an OverflowContext for OverflowItem descendants.
  */
 export const Overflow = React.forwardRef((props: OverflowProps, ref) => {
-  const styles = useStyles();
+  const styles = useOverflowStyles();
 
   const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;
 
diff --git a/packages/react-components/react-overflow/src/components/useOverflowStyles.styles.ts b/packages/react-components/react-overflow/src/components/useOverflowStyles.styles.ts
new file mode 100644
index 00000000000000..804444fb6c464e
--- /dev/null
+++ b/packages/react-components/react-overflow/src/components/useOverflowStyles.styles.ts
@@ -0,0 +1,16 @@
+import { makeStyles } from '@griffel/react';
+import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
+
+export const useOverflowStyles = makeStyles({
+  overflowMenu: {
+    [`& [${DATA_OVERFLOW_MENU}]`]: {
+      flexShrink: 0,
+    },
+  },
+
+  overflowingItems: {
+    [`& [${DATA_OVERFLOWING}]`]: {
+      display: 'none',
+    },
+  },
+});
diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx b/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx
index 66d07f3e0b3380..382cf2adb22813 100644
--- a/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx
+++ b/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { usePopoverSurface_unstable } from './usePopoverSurface';
 import { renderPopoverSurface_unstable } from './renderPopoverSurface';
-import { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles';
+import { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';
 import type { PopoverSurfaceProps } from './PopoverSurface.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/index.ts b/packages/react-components/react-popover/src/components/PopoverSurface/index.ts
index 0878d009f32711..ef6e2e67f2830e 100644
--- a/packages/react-components/react-popover/src/components/PopoverSurface/index.ts
+++ b/packages/react-components/react-popover/src/components/PopoverSurface/index.ts
@@ -2,4 +2,4 @@ export * from './PopoverSurface';
 export * from './PopoverSurface.types';
 export * from './renderPopoverSurface';
 export * from './usePopoverSurface';
-export * from './usePopoverSurfaceStyles';
+export * from './usePopoverSurfaceStyles.styles';
diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
rename to packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts
diff --git a/packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts b/packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts
index ffc2e73f903add..a7ee0d1aba8dd8 100644
--- a/packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts
+++ b/packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts
@@ -3,10 +3,12 @@ import {
   useThemeClassName_unstable as useThemeClassName,
   useFluent_unstable as useFluent,
 } from '@fluentui/react-shared-contexts';
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { mergeClasses } from '@griffel/react';
 import { useFocusVisible } from '@fluentui/react-tabster';
 import { useDisposable } from 'use-disposable';
 
+import { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';
+
 const useInsertionEffect = (React as never)['useInsertion' + 'Effect'] as typeof React.useLayoutEffect | undefined;
 
 export type UsePortalMountNodeOptions = {
@@ -18,20 +20,13 @@ export type UsePortalMountNodeOptions = {
   className?: string;
 };
 
-const useStyles = makeStyles({
-  root: {
-    position: 'relative',
-    zIndex: 1000000,
-  },
-});
-
 /**
  * Creates a new element on a "document.body" to mount portals.
  */
 export const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElement | null => {
   const { targetDocument, dir } = useFluent();
   const focusVisibleRef = useFocusVisible<HTMLDivElement>() as React.MutableRefObject<HTMLElement | null>;
-  const classes = useStyles();
+  const classes = usePortalMountNodeStylesStyles();
   const themeClassName = useThemeClassName();
 
   const className = mergeClasses(themeClassName, classes.root, options.className);
diff --git a/packages/react-components/react-portal/src/components/Portal/usePortalMountNodeStyles.styles.ts b/packages/react-components/react-portal/src/components/Portal/usePortalMountNodeStyles.styles.ts
new file mode 100644
index 00000000000000..8ba1b843d5070b
--- /dev/null
+++ b/packages/react-components/react-portal/src/components/Portal/usePortalMountNodeStyles.styles.ts
@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+
+export const usePortalMountNodeStylesStyles = makeStyles({
+  root: {
+    position: 'relative',
+    zIndex: 1000000,
+  },
+});
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx
index 049ed66fb97a85..6fbcb494a3c1a6 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { renderFluentProvider_unstable } from './renderFluentProvider';
 import { useFluentProvider_unstable } from './useFluentProvider';
-import { useFluentProviderStyles_unstable } from './useFluentProviderStyles';
+import { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';
 import { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';
 import type { FluentProviderProps } from './FluentProvider.types';
 
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/index.ts b/packages/react-components/react-provider/src/components/FluentProvider/index.ts
index 2542f778ac7f60..1004a7accf8707 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/index.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/index.ts
@@ -2,6 +2,6 @@ export * from './FluentProvider';
 export * from './FluentProvider.types';
 export * from './renderFluentProvider';
 export * from './useFluentProvider';
-export * from './useFluentProviderStyles';
+export * from './useFluentProviderStyles.styles';
 export * from './useFluentProviderContextValues';
 export * from './useFluentProviderThemeStyleTag';
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
rename to packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.styles.ts
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index 41459794424887..3751196dcea892 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -2,7 +2,7 @@ import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import * as React from 'react';
 
 import type { FluentProviderState } from './FluentProvider.types';
-import { fluentProviderClassNames } from './useFluentProviderStyles';
+import { fluentProviderClassNames } from './useFluentProviderStyles.styles';
 
 // String concatenation is used to prevent bundlers to complain with older versions of React
 const useInsertionEffect = (React as never)['useInsertion' + 'Effect']
diff --git a/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx
index f343a48003fe38..143a2e4f40f5c5 100644
--- a/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx
+++ b/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDataGrid_unstable } from './useDataGrid';
 import { renderDataGrid_unstable } from './renderDataGrid';
-import { useDataGridStyles_unstable } from './useDataGridStyles';
+import { useDataGridStyles_unstable } from './useDataGridStyles.styles';
 import type { DataGridProps } from './DataGrid.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useDataGridContextValues_unstable } from './useDataGridContextValues';
diff --git a/packages/react-components/react-table/src/components/DataGrid/index.ts b/packages/react-components/react-table/src/components/DataGrid/index.ts
index f421b8aa7c5534..f876576160de74 100644
--- a/packages/react-components/react-table/src/components/DataGrid/index.ts
+++ b/packages/react-components/react-table/src/components/DataGrid/index.ts
@@ -2,5 +2,5 @@ export * from './DataGrid';
 export * from './DataGrid.types';
 export * from './renderDataGrid';
 export * from './useDataGrid';
-export * from './useDataGridStyles';
+export * from './useDataGridStyles.styles';
 export * from './useDataGridContextValues';
diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.styles.ts
similarity index 98%
rename from packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts
rename to packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.styles.ts
index a9ec5e97cb67b0..75ab5dbd14655d 100644
--- a/packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts
+++ b/packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.styles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses } from '@griffel/react';
 import type { DataGridSlots, DataGridState } from './DataGrid.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { useTableStyles_unstable } from '../Table/useTableStyles';
+import { useTableStyles_unstable } from '../Table/useTableStyles.styles';
 
 export const dataGridClassNames: SlotClassNames<DataGridSlots> = {
   root: 'fui-DataGrid',
diff --git a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx
index 565e4d6318fba1..12f54d4f992009 100644
--- a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx
+++ b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDataGridBody_unstable } from './useDataGridBody';
 import { renderDataGridBody_unstable } from './renderDataGridBody';
-import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles';
+import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles';
 import type { DataGridBodyProps } from './DataGridBody.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/DataGridBody/index.ts b/packages/react-components/react-table/src/components/DataGridBody/index.ts
index 2cd323b85ed44b..70d2bbdad74936 100644
--- a/packages/react-components/react-table/src/components/DataGridBody/index.ts
+++ b/packages/react-components/react-table/src/components/DataGridBody/index.ts
@@ -2,4 +2,4 @@ export * from './DataGridBody';
 export * from './DataGridBody.types';
 export * from './renderDataGridBody';
 export * from './useDataGridBody';
-export * from './useDataGridBodyStyles';
+export * from './useDataGridBodyStyles.styles';
diff --git a/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts b/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.styles.ts
similarity index 96%
rename from packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts
rename to packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.styles.ts
index b46f062ae745d0..fd5393204352d9 100644
--- a/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts
+++ b/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.styles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses } from '@griffel/react';
 import type { DataGridBodySlots, DataGridBodyState } from './DataGridBody.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles';
+import { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles.styles';
 
 export const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots> = {
   root: 'fui-DataGridBody',
diff --git a/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx
index 869a865d3ba85f..cdb95d92b0924d 100644
--- a/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx
+++ b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDataGridCell_unstable } from './useDataGridCell';
 import { renderDataGridCell_unstable } from './renderDataGridCell';
-import { useDataGridCellStyles_unstable } from './useDataGridCellStyles';
+import { useDataGridCellStyles_unstable } from './useDataGridCellStyles.styles';
 import type { DataGridCellProps } from './DataGridCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/DataGridCell/index.ts b/packages/react-components/react-table/src/components/DataGridCell/index.ts
index bb9c252d5b0f2e..acc2e821b8f74d 100644
--- a/packages/react-components/react-table/src/components/DataGridCell/index.ts
+++ b/packages/react-components/react-table/src/components/DataGridCell/index.ts
@@ -2,4 +2,4 @@ export * from './DataGridCell';
 export * from './DataGridCell.types';
 export * from './renderDataGridCell';
 export * from './useDataGridCell';
-export * from './useDataGridCellStyles';
+export * from './useDataGridCellStyles.styles';
diff --git a/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts b/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.styles.ts
similarity index 96%
rename from packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts
rename to packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.styles.ts
index fcb43be6558663..3a0754b803c278 100644
--- a/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts
+++ b/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.styles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses } from '@griffel/react';
 import type { DataGridCellSlots, DataGridCellState } from './DataGridCell.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles';
+import { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles.styles';
 
 export const dataGridCellClassNames: SlotClassNames<DataGridCellSlots> = {
   root: 'fui-DataGridCell',
diff --git a/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx
index 4096bc44e2eab0..d70b92843ecd6f 100644
--- a/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx
+++ b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDataGridHeader_unstable } from './useDataGridHeader';
 import { renderDataGridHeader_unstable } from './renderDataGridHeader';
-import { useDataGridHeaderStyles_unstable } from './useDataGridHeaderStyles';
+import { useDataGridHeaderStyles_unstable } from './useDataGridHeaderStyles.styles';
 import type { DataGridHeaderProps } from './DataGridHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/DataGridHeader/index.ts b/packages/react-components/react-table/src/components/DataGridHeader/index.ts
index 477a72f22fc16a..4b2eca977eb04d 100644
--- a/packages/react-components/react-table/src/components/DataGridHeader/index.ts
+++ b/packages/react-components/react-table/src/components/DataGridHeader/index.ts
@@ -2,4 +2,4 @@ export * from './DataGridHeader';
 export * from './DataGridHeader.types';
 export * from './renderDataGridHeader';
 export * from './useDataGridHeader';
-export * from './useDataGridHeaderStyles';
+export * from './useDataGridHeaderStyles.styles';
diff --git a/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.ts b/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.styles.ts
similarity index 96%
rename from packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.ts
rename to packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.styles.ts
index 230b15e8dfee22..9041cbe07e46f2 100644
--- a/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.ts
+++ b/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.styles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses } from '@griffel/react';
 import type { DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { useTableHeaderStyles_unstable } from '../TableHeader/useTableHeaderStyles';
+import { useTableHeaderStyles_unstable } from '../TableHeader/useTableHeaderStyles.styles';
 
 export const dataGridHeaderClassNames: SlotClassNames<DataGridHeaderSlots> = {
   root: 'fui-DataGridHeader',
diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx
index abd9fb7f63dd16..15afdbc2fac352 100644
--- a/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx
+++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDataGridHeaderCell_unstable } from './useDataGridHeaderCell';
 import { renderDataGridHeaderCell_unstable } from './renderDataGridHeaderCell';
-import { useDataGridHeaderCellStyles_unstable } from './useDataGridHeaderCellStyles';
+import { useDataGridHeaderCellStyles_unstable } from './useDataGridHeaderCellStyles.styles';
 import type { DataGridHeaderCellProps } from './DataGridHeaderCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts b/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts
index db9da53f26b38e..2a624c8e3bee3e 100644
--- a/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts
+++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts
@@ -2,4 +2,4 @@ export * from './DataGridHeaderCell';
 export * from './DataGridHeaderCell.types';
 export * from './renderDataGridHeaderCell';
 export * from './useDataGridHeaderCell';
-export * from './useDataGridHeaderCellStyles';
+export * from './useDataGridHeaderCellStyles.styles';
diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts b/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.ts
similarity index 96%
rename from packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts
rename to packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.ts
index f5c0d1f9b6e7ec..0942aa206d04ff 100644
--- a/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts
+++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses } from '@griffel/react';
 import type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles';
+import { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles.styles';
 
 export const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots> = {
   root: 'fui-DataGridHeaderCell',
diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx
index dc8f9c92c18aec..36bfd9647550b5 100644
--- a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx
+++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDataGridRow_unstable } from './useDataGridRow';
 import { renderDataGridRow_unstable } from './renderDataGridRow';
-import { useDataGridRowStyles_unstable } from './useDataGridRowStyles';
+import { useDataGridRowStyles_unstable } from './useDataGridRowStyles.styles';
 import type { DataGridRowProps } from './DataGridRow.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/DataGridRow/index.ts b/packages/react-components/react-table/src/components/DataGridRow/index.ts
index 7f77535e67fcb4..a1f4708efd51b8 100644
--- a/packages/react-components/react-table/src/components/DataGridRow/index.ts
+++ b/packages/react-components/react-table/src/components/DataGridRow/index.ts
@@ -2,4 +2,4 @@ export * from './DataGridRow';
 export * from './DataGridRow.types';
 export * from './renderDataGridRow';
 export * from './useDataGridRow';
-export * from './useDataGridRowStyles';
+export * from './useDataGridRowStyles.styles';
diff --git a/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts b/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.styles.ts
similarity index 97%
rename from packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts
rename to packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.styles.ts
index 6fd74d486148ad..a2c73909d9c9e9 100644
--- a/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts
+++ b/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.styles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses } from '@griffel/react';
 import type { DataGridRowSlots, DataGridRowState } from './DataGridRow.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles';
+import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles';
 
 export const dataGridRowClassNames: SlotClassNames<DataGridRowSlots> = {
   root: 'fui-DataGridRow',
diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx
index 3d6051ac6b994b..40e22740df127e 100644
--- a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx
+++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx
@@ -3,7 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
 import { DataGridSelectionCell } from './DataGridSelectionCell';
 import { isConformant } from '../../testing/isConformant';
 import { DataGridSelectionCellProps } from '../../../dist/index';
-import { dataGridSelectionCellClassNames } from './useDataGridSelectionCellStyles';
+import { dataGridSelectionCellClassNames } from './useDataGridSelectionCellStyles.styles';
 import { mockDataGridContext } from '../../testing/mockDataGridContext';
 import { DataGridContextProvider } from '../../contexts/dataGridContext';
 import { DataGridHeader } from '../DataGridHeader/DataGridHeader';
diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx
index 9ee5b2ff85d15f..eaeca2e3282775 100644
--- a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx
+++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell';
 import { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell';
-import { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles';
+import { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles.styles';
 import type { DataGridSelectionCellProps } from './DataGridSelectionCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts b/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts
index d06337ec6a34ac..4a021545019415 100644
--- a/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts
+++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts
@@ -2,4 +2,4 @@ export * from './DataGridSelectionCell';
 export * from './DataGridSelectionCell.types';
 export * from './renderDataGridSelectionCell';
 export * from './useDataGridSelectionCell';
-export * from './useDataGridSelectionCellStyles';
+export * from './useDataGridSelectionCellStyles.styles';
diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts b/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.ts
similarity index 96%
rename from packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts
rename to packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.ts
index 8fc1f07aa6e593..94a64ded462b10 100644
--- a/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts
+++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses } from '@griffel/react';
 import type { DataGridSelectionCellSlots, DataGridSelectionCellState } from './DataGridSelectionCell.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles';
+import { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
 
 export const dataGridSelectionCellClassNames: SlotClassNames<DataGridSelectionCellSlots> = {
   root: 'fui-DataGridSelectionCell',
diff --git a/packages/react-components/react-table/src/components/Table/Table.tsx b/packages/react-components/react-table/src/components/Table/Table.tsx
index 2461cecf770a06..351473003d80fa 100644
--- a/packages/react-components/react-table/src/components/Table/Table.tsx
+++ b/packages/react-components/react-table/src/components/Table/Table.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTable_unstable } from './useTable';
 import { renderTable_unstable } from './renderTable';
-import { useTableStyles_unstable } from './useTableStyles';
+import { useTableStyles_unstable } from './useTableStyles.styles';
 import type { TableProps } from './Table.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useTableContextValues_unstable } from './useTableContextValues';
diff --git a/packages/react-components/react-table/src/components/Table/index.ts b/packages/react-components/react-table/src/components/Table/index.ts
index bc41c5a7cc597d..62c03067863ef7 100644
--- a/packages/react-components/react-table/src/components/Table/index.ts
+++ b/packages/react-components/react-table/src/components/Table/index.ts
@@ -2,4 +2,4 @@ export * from './Table';
 export * from './Table.types';
 export * from './renderTable';
 export * from './useTable';
-export * from './useTableStyles';
+export * from './useTableStyles.styles';
diff --git a/packages/react-components/react-table/src/components/Table/useTableStyles.ts b/packages/react-components/react-table/src/components/Table/useTableStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-table/src/components/Table/useTableStyles.ts
rename to packages/react-components/react-table/src/components/Table/useTableStyles.styles.ts
diff --git a/packages/react-components/react-table/src/components/TableBody/TableBody.tsx b/packages/react-components/react-table/src/components/TableBody/TableBody.tsx
index e5914023cd9ae3..3083e1c1afaf2b 100644
--- a/packages/react-components/react-table/src/components/TableBody/TableBody.tsx
+++ b/packages/react-components/react-table/src/components/TableBody/TableBody.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTableBody_unstable } from './useTableBody';
 import { renderTableBody_unstable } from './renderTableBody';
-import { useTableBodyStyles_unstable } from './useTableBodyStyles';
+import { useTableBodyStyles_unstable } from './useTableBodyStyles.styles';
 import type { TableBodyProps } from './TableBody.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/TableBody/index.ts b/packages/react-components/react-table/src/components/TableBody/index.ts
index 8c4dd6cd1a56c3..6cba4f6068996c 100644
--- a/packages/react-components/react-table/src/components/TableBody/index.ts
+++ b/packages/react-components/react-table/src/components/TableBody/index.ts
@@ -2,4 +2,4 @@ export * from './TableBody';
 export * from './TableBody.types';
 export * from './renderTableBody';
 export * from './useTableBody';
-export * from './useTableBodyStyles';
+export * from './useTableBodyStyles.styles';
diff --git a/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts b/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts
rename to packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.styles.ts
diff --git a/packages/react-components/react-table/src/components/TableCell/TableCell.tsx b/packages/react-components/react-table/src/components/TableCell/TableCell.tsx
index 0231e23c9a13da..96128ee5211b30 100644
--- a/packages/react-components/react-table/src/components/TableCell/TableCell.tsx
+++ b/packages/react-components/react-table/src/components/TableCell/TableCell.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTableCell_unstable } from './useTableCell';
 import { renderTableCell_unstable } from './renderTableCell';
-import { useTableCellStyles_unstable } from './useTableCellStyles';
+import { useTableCellStyles_unstable } from './useTableCellStyles.styles';
 import type { TableCellProps } from './TableCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/TableCell/index.ts b/packages/react-components/react-table/src/components/TableCell/index.ts
index f8aff12d06ba7d..b139f3158cae77 100644
--- a/packages/react-components/react-table/src/components/TableCell/index.ts
+++ b/packages/react-components/react-table/src/components/TableCell/index.ts
@@ -2,4 +2,4 @@ export * from './TableCell';
 export * from './TableCell.types';
 export * from './renderTableCell';
 export * from './useTableCell';
-export * from './useTableCellStyles';
+export * from './useTableCellStyles.styles';
diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts
rename to packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts
diff --git a/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx b/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx
index f6108a1f10598a..61a0e575f70901 100644
--- a/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx
+++ b/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTableCellActions_unstable } from './useTableCellActions';
 import { renderTableCellActions_unstable } from './renderTableCellActions';
-import { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles';
+import { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles.styles';
 import type { TableCellActionsProps } from './TableCellActions.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/TableCellActions/index.ts b/packages/react-components/react-table/src/components/TableCellActions/index.ts
index 888f8d60a4dbb1..e804786b725dbf 100644
--- a/packages/react-components/react-table/src/components/TableCellActions/index.ts
+++ b/packages/react-components/react-table/src/components/TableCellActions/index.ts
@@ -2,4 +2,4 @@ export * from './TableCellActions';
 export * from './TableCellActions.types';
 export * from './renderTableCellActions';
 export * from './useTableCellActions';
-export * from './useTableCellActionsStyles';
+export * from './useTableCellActionsStyles.styles';
diff --git a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts
rename to packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.styles.ts
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx
index 90ccb32c50edc0..055d77820fdef3 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx
+++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTableCellLayout_unstable } from './useTableCellLayout';
 import { renderTableCellLayout_unstable } from './renderTableCellLayout';
-import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles';
+import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles.styles';
 import { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues';
 import type { TableCellLayoutProps } from './TableCellLayout.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/index.ts b/packages/react-components/react-table/src/components/TableCellLayout/index.ts
index c76976f4a904e3..ed50c859d49c17 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/index.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/index.ts
@@ -2,4 +2,4 @@ export * from './TableCellLayout';
 export * from './TableCellLayout.types';
 export * from './renderTableCellLayout';
 export * from './useTableCellLayout';
-export * from './useTableCellLayoutStyles';
+export * from './useTableCellLayoutStyles.styles';
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts
rename to packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts
diff --git a/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx b/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx
index 54a36922baa0ee..a4b17c9c5649db 100644
--- a/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx
+++ b/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTableHeader_unstable } from './useTableHeader';
 import { renderTableHeader_unstable } from './renderTableHeader';
-import { useTableHeaderStyles_unstable } from './useTableHeaderStyles';
+import { useTableHeaderStyles_unstable } from './useTableHeaderStyles.styles';
 import type { TableHeaderProps } from './TableHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/TableHeader/index.ts b/packages/react-components/react-table/src/components/TableHeader/index.ts
index 35201a649691c4..5833e1a2600343 100644
--- a/packages/react-components/react-table/src/components/TableHeader/index.ts
+++ b/packages/react-components/react-table/src/components/TableHeader/index.ts
@@ -2,4 +2,4 @@ export * from './TableHeader';
 export * from './TableHeader.types';
 export * from './renderTableHeader';
 export * from './useTableHeader';
-export * from './useTableHeaderStyles';
+export * from './useTableHeaderStyles.styles';
diff --git a/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts b/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts
rename to packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.styles.ts
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx b/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx
index 9a97cd5d8376d7..3fe52ae6e39028 100644
--- a/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx
+++ b/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTableHeaderCell_unstable } from './useTableHeaderCell';
 import { renderTableHeaderCell_unstable } from './renderTableHeaderCell';
-import { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles';
+import { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles.styles';
 import type { TableHeaderCellProps } from './TableHeaderCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/index.ts b/packages/react-components/react-table/src/components/TableHeaderCell/index.ts
index 05fc1673fa6eab..f3c47af321ee17 100644
--- a/packages/react-components/react-table/src/components/TableHeaderCell/index.ts
+++ b/packages/react-components/react-table/src/components/TableHeaderCell/index.ts
@@ -2,4 +2,4 @@ export * from './TableHeaderCell';
 export * from './TableHeaderCell.types';
 export * from './renderTableHeaderCell';
 export * from './useTableHeaderCell';
-export * from './useTableHeaderCellStyles';
+export * from './useTableHeaderCellStyles.styles';
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
rename to packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts
diff --git a/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx b/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx
index 48baf470cb6153..9e21f4d72d5330 100644
--- a/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx
+++ b/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTableResizeHandle_unstable } from './useTableResizeHandle';
 import { renderTableResizeHandle_unstable } from './renderTableResizeHandle';
-import { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles';
+import { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles.styles';
 import type { TableResizeHandleProps } from './TableResizeHandle.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/TableResizeHandle/index.ts b/packages/react-components/react-table/src/components/TableResizeHandle/index.ts
index 412c6ccf8fc7d5..3d1ea5ea6a7fb9 100644
--- a/packages/react-components/react-table/src/components/TableResizeHandle/index.ts
+++ b/packages/react-components/react-table/src/components/TableResizeHandle/index.ts
@@ -2,4 +2,4 @@ export * from './TableResizeHandle';
 export * from './TableResizeHandle.types';
 export * from './renderTableResizeHandle';
 export * from './useTableResizeHandle';
-export * from './useTableResizeHandleStyles';
+export * from './useTableResizeHandleStyles.styles';
diff --git a/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.ts b/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.ts
rename to packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts
diff --git a/packages/react-components/react-table/src/components/TableRow/TableRow.tsx b/packages/react-components/react-table/src/components/TableRow/TableRow.tsx
index ac8c2aadf3cd8f..ef865ec244e947 100644
--- a/packages/react-components/react-table/src/components/TableRow/TableRow.tsx
+++ b/packages/react-components/react-table/src/components/TableRow/TableRow.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTableRow_unstable } from './useTableRow';
 import { renderTableRow_unstable } from './renderTableRow';
-import { useTableRowStyles_unstable } from './useTableRowStyles';
+import { useTableRowStyles_unstable } from './useTableRowStyles.styles';
 import type { TableRowProps } from './TableRow.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/TableRow/index.ts b/packages/react-components/react-table/src/components/TableRow/index.ts
index 04ac572ad59e7f..2c11c5c63deea1 100644
--- a/packages/react-components/react-table/src/components/TableRow/index.ts
+++ b/packages/react-components/react-table/src/components/TableRow/index.ts
@@ -2,4 +2,4 @@ export * from './TableRow';
 export * from './TableRow.types';
 export * from './renderTableRow';
 export * from './useTableRow';
-export * from './useTableRowStyles';
+export * from './useTableRowStyles.styles';
diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts
similarity index 98%
rename from packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts
rename to packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts
index f81165c875e136..5d0428f07fcc6e 100644
--- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts
+++ b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts
@@ -2,8 +2,8 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { TableRowSlots, TableRowState } from './TableRow.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';
-import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';
+import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';
+import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 
 export const tableRowClassName = 'fui-TableRow';
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx
index 37bde18504ae1b..8e588344607c06 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx
@@ -5,7 +5,7 @@ import { TableSelectionCell } from './TableSelectionCell';
 import { isConformant } from '../../testing/isConformant';
 import { TableSelectionCellProps } from './TableSelectionCell.types';
 import { tableContextDefaultValue, TableContextProvider } from '../../contexts/tableContext';
-import { tableSelectionCellClassNames } from './useTableSelectionCellStyles';
+import { tableSelectionCellClassNames } from './useTableSelectionCellStyles.styles';
 
 const tr = document.createElement('tr');
 describe('TableSelectionCell', () => {
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx
index c6cea6d2923251..0bee270a7beae3 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTableSelectionCell_unstable } from './useTableSelectionCell';
 import { renderTableSelectionCell_unstable } from './renderTableSelectionCell';
-import { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles';
+import { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles.styles';
 import type { TableSelectionCellProps } from './TableSelectionCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/index.ts b/packages/react-components/react-table/src/components/TableSelectionCell/index.ts
index 25e99a893b9463..d5fabee4714b5d 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/index.ts
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/index.ts
@@ -2,4 +2,4 @@ export * from './TableSelectionCell';
 export * from './TableSelectionCell.types';
 export * from './renderTableSelectionCell';
 export * from './useTableSelectionCell';
-export * from './useTableSelectionCellStyles';
+export * from './useTableSelectionCellStyles.styles';
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts
rename to packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts
diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx
index 4a454af882ae01..68ed049c95d20a 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useToolbar_unstable } from './useToolbar';
 import { renderToolbar_unstable } from './renderToolbar';
-import { useToolbarStyles_unstable } from './useToolbarStyles';
+import { useToolbarStyles_unstable } from './useToolbarStyles.styles';
 import type { ToolbarProps } from './Toolbar.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useToolbarContextValues_unstable } from './useToolbarContextValues';
diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/index.ts b/packages/react-components/react-toolbar/src/components/Toolbar/index.ts
index f95378e9bd6b2d..69923b5119d08d 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/index.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/index.ts
@@ -2,4 +2,4 @@ export * from './Toolbar';
 export * from './Toolbar.types';
 export * from './renderToolbar';
 export * from './useToolbar';
-export * from './useToolbarStyles';
+export * from './useToolbarStyles.styles';
diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
rename to packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.styles.ts
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx b/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx
index 1d4db5f7d309c5..1d08bc07b92b7c 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx
+++ b/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { ToolbarButtonProps } from './ToolbarButton.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { renderButton_unstable } from '@fluentui/react-button';
-import { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles';
+import { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles';
 import { useToolbarButton_unstable } from './useToolbarButton';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts
index ea2b104a69c55a..07f7480541e08c 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts
@@ -1,4 +1,4 @@
 export * from './ToolbarButton';
 export * from './ToolbarButton.types';
 export * from './useToolbarButton';
-export * from './useToolbarButtonStyles';
+export * from './useToolbarButtonStyles.styles';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
rename to packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx b/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx
index 2d782d28f5d7d9..95e8a33a4c4542 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx
+++ b/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';
+import { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles';
 import type { ToolbarDividerProps } from './ToolbarDivider.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { renderDivider_unstable } from '@fluentui/react-divider';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts
index 3359e5be98b327..0ebab6cffe8480 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts
@@ -1,4 +1,4 @@
 export * from './ToolbarDivider';
 export * from './ToolbarDivider.types';
-export * from './useToolbarDividerStyles';
+export * from './useToolbarDividerStyles.styles';
 export * from './useToolbarDivider';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
rename to packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx b/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx
index c04c294b3d5934..4bddc846270867 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx
+++ b/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { ToolbarGroupProps } from './ToolbarGroup.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useToolbarGroup_unstable } from './useToolbarGroup';
-import { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles';
+import { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';
 import { renderToolbarGroup_unstable } from './renderToolbarGroup';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarGroup/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarGroup/index.ts
index 730484358f752f..66bd4a383dbdc9 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarGroup/index.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarGroup/index.ts
@@ -1,5 +1,5 @@
 export * from './ToolbarGroup';
 export * from './ToolbarGroup.types';
 export * from './useToolbarGroup';
-export * from './useToolbarGroupStyles';
+export * from './useToolbarGroupStyles.styles';
 export * from './renderToolbarGroup';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.ts
rename to packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx
index 89c26fec2c4966..af670034ce45d8 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx
@@ -3,7 +3,7 @@ import type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { renderToggleButton_unstable } from '@fluentui/react-button';
 import { useToolbarRadioButton_unstable } from './useToolbarRadioButton';
-import { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';
+import { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles.styles';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts
index 91f7efc3c75021..b3e066045727ef 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts
@@ -1,4 +1,4 @@
 export * from './ToolbarRadioButton';
 export * from './ToolbarRadioButton.types';
 export * from './useToolbarRadioButton';
-export * from './useToolbarRadioButtonStyles';
+export * from './useToolbarRadioButtonStyles.styles';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts
rename to packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx
index de23a76ef0b344..446e7679060750 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx
+++ b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx
@@ -3,7 +3,7 @@ import type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { renderToggleButton_unstable } from '@fluentui/react-button';
 import { useToolbarToggleButton_unstable } from './useToolbarToggleButton';
-import { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';
+import { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles.styles';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts
index ad4700e597dcc6..cfd874ac1e2cea 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts
@@ -1,4 +1,4 @@
 export * from './ToolbarToggleButton';
 export * from './ToolbarToggleButton.types';
 export * from './useToolbarToggleButton';
-export * from './useToolbarToggleButtonStyles';
+export * from './useToolbarToggleButtonStyles.styles';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts
rename to packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts
diff --git a/packages/react-components/react-tree/src/components/Tree/Tree.tsx b/packages/react-components/react-tree/src/components/Tree/Tree.tsx
index 2c5a4c5e5a173a..ee9016afd76077 100644
--- a/packages/react-components/react-tree/src/components/Tree/Tree.tsx
+++ b/packages/react-components/react-tree/src/components/Tree/Tree.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTree_unstable } from './useTree';
 import { renderTree_unstable } from './renderTree';
-import { useTreeStyles_unstable } from './useTreeStyles';
+import { useTreeStyles_unstable } from './useTreeStyles.styles';
 import type { TreeProps } from './Tree.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useTreeContextValues_unstable } from './useTreeContextValues';
diff --git a/packages/react-components/react-tree/src/components/Tree/index.ts b/packages/react-components/react-tree/src/components/Tree/index.ts
index 74cb6cbad4ce40..d20cc73b01b667 100644
--- a/packages/react-components/react-tree/src/components/Tree/index.ts
+++ b/packages/react-components/react-tree/src/components/Tree/index.ts
@@ -2,5 +2,5 @@ export * from './Tree';
 export * from './Tree.types';
 export * from './renderTree';
 export * from './useTree';
-export * from './useTreeStyles';
+export * from './useTreeStyles.styles';
 export * from './useTreeContextValues';
diff --git a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.ts b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-tree/src/components/Tree/useTreeStyles.ts
rename to packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts
diff --git a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx
index 0a5646e496787a..4a79c204c7e021 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { TreeItem } from './TreeItem';
 import { isConformant } from '../../testing/isConformant';
 import { TreeItemProps } from './TreeItem.types';
-import { treeItemClassNames } from './useTreeItemStyles';
+import { treeItemClassNames } from './useTreeItemStyles.styles';
 
 describe('TreeItem', () => {
   isConformant<TreeItemProps>({
diff --git a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx
index 036727d24ec97f..9d4e8ac7df285f 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTreeItem_unstable } from './useTreeItem';
 import { renderTreeItem_unstable } from './renderTreeItem';
-import { useTreeItemStyles_unstable } from './useTreeItemStyles';
+import { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';
 import type { TreeItemProps } from './TreeItem.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useTreeItemContextValues_unstable } from './useTreeItemContextValues';
diff --git a/packages/react-components/react-tree/src/components/TreeItem/index.ts b/packages/react-components/react-tree/src/components/TreeItem/index.ts
index 782392551a2c7e..13edf795ebafd6 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/index.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/index.ts
@@ -2,4 +2,4 @@ export * from './TreeItem';
 export * from './TreeItem.types';
 export * from './renderTreeItem';
 export * from './useTreeItem';
-export * from './useTreeItemStyles';
+export * from './useTreeItemStyles.styles';
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
index ea8479cd004546..0fc5c07644517a 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
@@ -3,7 +3,7 @@ import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useId } f
 import { ChevronRight12Regular } from '@fluentui/react-icons';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { useEventCallback } from '@fluentui/react-utilities';
-import { expandIconInlineStyles } from './useTreeItemStyles';
+import { expandIconInlineStyles } from './useTreeItemStyles.styles';
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';
 import { useMergedRefs } from '@fluentui/react-utilities';
 import { elementContains } from '@fluentui/react-portal';
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts
rename to packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx
index 7de4b11e7d2a2f..07b36cf2917db4 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTreeItemLayout_unstable } from './useTreeItemLayout';
 import { renderTreeItemLayout_unstable } from './renderTreeItemLayout';
-import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';
+import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';
 import type { TreeItemLayoutProps } from './TreeItemLayout.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/index.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/index.ts
index dde92733e51c3a..106a4ff9418a74 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/index.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/index.ts
@@ -2,4 +2,4 @@ export * from './TreeItemLayout';
 export * from './TreeItemLayout.types';
 export * from './renderTreeItemLayout';
 export * from './useTreeItemLayout';
-export * from './useTreeItemLayoutStyles';
+export * from './useTreeItemLayoutStyles.styles';
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.ts
rename to packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts
diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx
index 55ede65c081c02..04861958f7b09e 100644
--- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';
 import { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';
-import { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';
+import { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';
 import type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';
diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/index.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/index.ts
index 991ac32128c448..7a14fd4503d7cf 100644
--- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/index.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/index.ts
@@ -2,4 +2,4 @@ export * from './TreeItemPersonaLayout';
 export * from './TreeItemPersonaLayout.types';
 export * from './renderTreeItemPersonaLayout';
 export * from './useTreeItemPersonaLayout';
-export * from './useTreeItemPersonaLayoutStyles';
+export * from './useTreeItemPersonaLayoutStyles.styles';
diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts
rename to packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts

From 557ffca71ff7767a4d595b6fcc55ad4a1fe02360 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Wed, 26 Apr 2023 18:07:48 +0200
Subject: [PATCH 14/28] chore(react-utilities): simplifies useControllableState
 hook internals (#27702)

---
 ...-fa9ce15a-c1d5-4b9a-93e7-e07b2d60b837.json |  7 ++++
 .../src/hooks/useControllableState.ts         | 35 ++++---------------
 2 files changed, 13 insertions(+), 29 deletions(-)
 create mode 100644 change/@fluentui-react-utilities-fa9ce15a-c1d5-4b9a-93e7-e07b2d60b837.json

diff --git a/change/@fluentui-react-utilities-fa9ce15a-c1d5-4b9a-93e7-e07b2d60b837.json b/change/@fluentui-react-utilities-fa9ce15a-c1d5-4b9a-93e7-e07b2d60b837.json
new file mode 100644
index 00000000000000..0eb8f7bc317d7a
--- /dev/null
+++ b/change/@fluentui-react-utilities-fa9ce15a-c1d5-4b9a-93e7-e07b2d60b837.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: simplifies useControllableState hook internals",
+  "packageName": "@fluentui/react-utilities",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-utilities/src/hooks/useControllableState.ts b/packages/react-components/react-utilities/src/hooks/useControllableState.ts
index 3cb467a3cbdcd9..4bb5f59b588047 100644
--- a/packages/react-components/react-utilities/src/hooks/useControllableState.ts
+++ b/packages/react-components/react-utilities/src/hooks/useControllableState.ts
@@ -19,10 +19,6 @@ export type UseControllableStateOptions<State> = {
   initialState: State;
 };
 
-function isFactoryDispatch<State>(newState: React.SetStateAction<State>): newState is (prevState: State) => State {
-  return typeof newState === 'function';
-}
-
 /**
  * @internal
  *
@@ -42,40 +38,21 @@ function isFactoryDispatch<State>(newState: React.SetStateAction<State>): newSta
 export const useControllableState = <State>(
   options: UseControllableStateOptions<State>,
 ): [State, React.Dispatch<React.SetStateAction<State>>] => {
-  const isControlled = useIsControlled(options.state);
   const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
   const [internalState, setInternalState] = React.useState<State>(initialState);
-
-  const state = isControlled ? (options.state as State) : internalState;
-
-  const stateRef = React.useRef(state);
-  React.useEffect(() => {
-    stateRef.current = state;
-  }, [state]);
-
-  // To match the behavior of the setter returned by React.useState, this callback's identity
-  // should never change. This means it MUST NOT directly reference variables that can change.
-  const setState = React.useCallback((newState: React.SetStateAction<State>) => {
-    // React dispatch can use a factory
-    // https://reactjs.org/docs/hooks-reference.html#functional-updates
-    if (isFactoryDispatch(newState)) {
-      stateRef.current = newState(stateRef.current);
-    } else {
-      stateRef.current = newState;
-    }
-
-    setInternalState(stateRef.current);
-  }, []);
-
-  return [state, setState];
+  return useIsControlled(options.state) ? [options.state, noop] : [internalState, setInternalState];
 };
 
+function noop() {
+  /* noop */
+}
+
 /**
  * Helper hook to handle previous comparison of controlled/uncontrolled
  * Prints an error when isControlled value switches between subsequent renders
  * @returns - whether the value is controlled
  */
-const useIsControlled = (controlledValue: unknown) => {
+const useIsControlled = <V>(controlledValue?: V): controlledValue is V => {
   const [isControlled] = React.useState<boolean>(() => controlledValue !== undefined);
 
   if (process.env.NODE_ENV !== 'production') {

From d67287c4e4a2c22ce0299fdbcd4f0eebc5506ada Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Wed, 26 Apr 2023 19:02:40 +0200
Subject: [PATCH 15/28] test(fluentui/react): fix initial global leaks that
 were causing OOM issues (#27661)

* test(fluentui/react): fix initial global leaks that were causing OOM issues
---
 .../DetailsList/DetailsList.test.tsx          |  7 ++---
 .../DetailsList/DetailsListV2.test.tsx        |  3 +-
 .../Dialog/Dialog.deprecated.test.tsx         | 20 ++++++-------
 .../src/components/Dialog/Dialog.test.tsx     | 30 ++++++++++++-------
 .../style-utilities/src/styles/theme.test.ts  | 17 +++++++++--
 scripts/jest/src/jest.preset.v8.js            |  2 ++
 scripts/jest/src/jest.preset.v8.spec.ts       |  2 ++
 7 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/packages/react/src/components/DetailsList/DetailsList.test.tsx b/packages/react/src/components/DetailsList/DetailsList.test.tsx
index d2e40b859ee35f..0daf2b79faf2c7 100644
--- a/packages/react/src/components/DetailsList/DetailsList.test.tsx
+++ b/packages/react/src/components/DetailsList/DetailsList.test.tsx
@@ -68,19 +68,16 @@ function customColumnDivider(
 
 describe('DetailsList', () => {
   let spy: jest.SpyInstance;
-  beforeAll(() => {
+  beforeEach(() => {
     /* eslint-disable-next-line @typescript-eslint/no-empty-function */
     spy = jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
+    resetIds();
   });
 
   afterAll(() => {
     spy.mockRestore();
   });
 
-  beforeEach(() => {
-    resetIds();
-  });
-
   afterEach(() => {
     if ((setTimeout as unknown as jest.Mock).mock) {
       jest.runOnlyPendingTimers();
diff --git a/packages/react/src/components/DetailsList/DetailsListV2.test.tsx b/packages/react/src/components/DetailsList/DetailsListV2.test.tsx
index da424735418675..9766f957b55d8b 100644
--- a/packages/react/src/components/DetailsList/DetailsListV2.test.tsx
+++ b/packages/react/src/components/DetailsList/DetailsListV2.test.tsx
@@ -77,7 +77,8 @@ const groupProps: IDetailsGroupRenderProps = {
  */
 describe('DetailsListV2', () => {
   let spy: jest.SpyInstance;
-  beforeAll(() => {
+
+  beforeEach(() => {
     /* eslint-disable-next-line @typescript-eslint/no-empty-function */
     spy = jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
   });
diff --git a/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx b/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx
index 57c18ad1942dbf..c6ac7dc65bfc3a 100644
--- a/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx
+++ b/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx
@@ -6,24 +6,24 @@ import { resetIds, setWarningCallback } from '../../Utilities';
 import { DialogBase } from './Dialog.base';
 
 describe('Dialog deprecated props', () => {
-  beforeEach(() => {
-    resetIds();
+  beforeAll(() => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => {};
+    // Prevent warn deprecations from failing test
+    setWarningCallback(noop);
   });
 
-  afterAll(() => {
+  beforeEach(() => {
     resetIds();
-  });
-
-  beforeAll(() => {
-    // Prevent warn deprecations from failing test
-    setWarningCallback(() => {
-      /* no-op */
-    });
     (ReactDOM.createPortal as any) = jest.fn((element, node) => {
       return element;
     });
   });
 
+  afterAll(() => {
+    setWarningCallback();
+  });
+
   afterEach(() => {
     (ReactDOM.createPortal as any).mockClear();
     jest.useRealTimers();
diff --git a/packages/react/src/components/Dialog/Dialog.test.tsx b/packages/react/src/components/Dialog/Dialog.test.tsx
index 1d5b969ac78d7f..83186263f8f3ac 100644
--- a/packages/react/src/components/Dialog/Dialog.test.tsx
+++ b/packages/react/src/components/Dialog/Dialog.test.tsx
@@ -14,11 +14,6 @@ describe('Dialog', () => {
     resetIds();
   });
 
-  afterEach(() => {
-    setWarningCallback();
-    jest.useRealTimers();
-  });
-
   afterAll(() => {
     resetIds();
   });
@@ -86,11 +81,14 @@ describe('Dialog', () => {
 
     expect(queryByRole('dialog')).toBeFalsy();
     expect(onDismissed).toHaveBeenCalledTimes(1);
+
+    jest.useRealTimers();
   });
 
   it('deprecated isOpen controls open state of the dialog', () => {
     // suppress deprecation warning as error
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
     jest.useFakeTimers();
     const onDismissed = jest.fn();
 
@@ -106,6 +104,9 @@ describe('Dialog', () => {
 
     expect(queryByRole('dialog')).toBeFalsy();
     expect(onDismissed).toHaveBeenCalledTimes(1);
+
+    jest.useRealTimers();
+    setWarningCallback();
   });
 
   it('Properly attaches auto-generated aria attributes IDs', () => {
@@ -154,7 +155,7 @@ describe('Dialog', () => {
       <DialogBase
         hidden={false}
         modalProps={{
-          titleAriaId: titleAriaId,
+          titleAriaId,
         }}
         dialogContentProps={{
           title: 'sample title',
@@ -170,7 +171,8 @@ describe('Dialog', () => {
 
   it('deprecated titleId prop should be used if titleProps.id is not passed', () => {
     // Prevent warn deprecations from failing test
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
 
     const titleId = 'title_id';
     render(
@@ -185,10 +187,13 @@ describe('Dialog', () => {
 
     const dialogTitle = document.getElementById(titleId);
     expect(dialogTitle).toBeTruthy();
+
+    setWarningCallback();
   });
 
   it('deprecated titleId prop should not be used if titleProps.id is undefined', () => {
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
 
     const titleId = 'title_id';
     render(
@@ -204,10 +209,13 @@ describe('Dialog', () => {
 
     const dialogTitle = document.getElementById(titleId);
     expect(dialogTitle).toBeFalsy();
+
+    setWarningCallback();
   });
 
   it('titleProps.id should be used if deprecated titleId is also passed', () => {
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
 
     const titleId = 'title_id';
     render(
@@ -223,6 +231,8 @@ describe('Dialog', () => {
 
     const dialogTitle = document.getElementById(titleId);
     expect(dialogTitle).toBeTruthy();
+
+    setWarningCallback();
   });
 
   describe('enableAriaHiddenSiblings', () => {
diff --git a/packages/style-utilities/src/styles/theme.test.ts b/packages/style-utilities/src/styles/theme.test.ts
index f3dab32c87ba48..8c32928fe3286b 100644
--- a/packages/style-utilities/src/styles/theme.test.ts
+++ b/packages/style-utilities/src/styles/theme.test.ts
@@ -10,24 +10,35 @@ describe('registerOnThemeChangeCallback', () => {
     expect(callback.mock.calls.length).toBe(0);
   });
 
-  it('calls the previously registered callback', () => {
+  it('calls previously registered callback', () => {
+    registerOnThemeChangeCallback(callback);
     loadTheme({});
     expect(callback.mock.calls.length).toBe(1);
   });
 
   it('calls the previously registered callback (again)', () => {
+    registerOnThemeChangeCallback(callback);
+    loadTheme({});
     loadTheme({});
     expect(callback.mock.calls.length).toBe(2);
   });
 
   it('unregisters the callback, and doesnt call it again', () => {
+    registerOnThemeChangeCallback(callback);
+    loadTheme({});
+    loadTheme({});
     removeOnThemeChangeCallback(callback);
+
     expect(callback.mock.calls.length).toBe(2);
     loadTheme({});
     expect(callback.mock.calls.length).toBe(2);
   });
 
   it('didnt pass null to the callback', () => {
+    registerOnThemeChangeCallback(callback);
+    loadTheme({});
+    loadTheme({});
+
     expect(callback.mock.calls[0][0]).toBeTruthy();
     expect(callback.mock.calls[1][0]).toBeTruthy();
   });
@@ -37,7 +48,7 @@ describe('loadTheme', () => {
   describe('specify defaultFontStyle', () => {
     it('applies defaultFontStyle to fonts and retains all other default values', () => {
       const defaultFontStyle: IRawStyle = { fontFamily: 'Segoe UI' };
-      const userTheme = { defaultFontStyle: defaultFontStyle };
+      const userTheme = { defaultFontStyle };
       loadTheme(userTheme);
       const newTheme = getTheme();
 
@@ -58,7 +69,7 @@ describe('loadTheme', () => {
     });
     it('applies defaultFontStyle and fonts to theme and retains all other default values', () => {
       const defaultFontStyle: IRawStyle = { fontFamily: 'Foo', fontSize: '10px' };
-      const userTheme = { defaultFontStyle: defaultFontStyle, fonts: { small: { fontSize: '20px' } } };
+      const userTheme = { defaultFontStyle, fonts: { small: { fontSize: '20px' } } };
       loadTheme(userTheme);
       const newTheme = getTheme();
 
diff --git a/scripts/jest/src/jest.preset.v8.js b/scripts/jest/src/jest.preset.v8.js
index 76b407bac07c99..843d5d736ee720 100644
--- a/scripts/jest/src/jest.preset.v8.js
+++ b/scripts/jest/src/jest.preset.v8.js
@@ -79,6 +79,8 @@ const createConfig = (customConfig = {}) => {
       url: 'http://localhost',
     },
     testEnvironment: 'jsdom',
+    restoreMocks: true,
+    clearMocks: true,
 
     watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
   };
diff --git a/scripts/jest/src/jest.preset.v8.spec.ts b/scripts/jest/src/jest.preset.v8.spec.ts
index b9efa27ab56b5b..5efa14b48a055a 100644
--- a/scripts/jest/src/jest.preset.v8.spec.ts
+++ b/scripts/jest/src/jest.preset.v8.spec.ts
@@ -35,6 +35,8 @@ describe(`v8 preset`, () => {
         transform: {
           '^.+\\.tsx?$': 'ts-jest',
         },
+        restoreMocks: true,
+        clearMocks: true,
         transformIgnorePatterns: ['/node_modules/', '/lib-commonjs/', '\\.js$'],
         watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
       }),

From bad96553b2d34ffb3d45c32a44d4883046a15945 Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Wed, 26 Apr 2023 11:20:50 -0700
Subject: [PATCH 16/28] chore: Add caret to react-datepicker-compat
 dependencies (#27671)


From 3c57318b3fb834ae7c541a64d3de4da05cd04750 Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Thu, 27 Apr 2023 11:46:30 +0200
Subject: [PATCH 17/28] test: migrate all v9 libraries to use new conformance
 setup which improves test execution by approx 46% (#27669)

---
 .../react-components/react-accordion/src/testing/isConformant.ts | 1 +
 .../react-components/react-alert/src/testing/isConformant.ts     | 1 +
 .../react-components/react-avatar/src/testing/isConformant.ts    | 1 +
 .../react-components/react-badge/src/testing/isConformant.ts     | 1 +
 .../react-breadcrumb/src/testing/isConformant.ts                 | 1 +
 .../react-components/react-button/src/testing/isConformant.ts    | 1 +
 packages/react-components/react-card/src/testing/isConformant.ts | 1 +
 .../react-components/react-checkbox/src/testing/isConformant.ts  | 1 +
 .../react-components/react-combobox/src/testing/isConformant.ts  | 1 +
 .../react-data-grid-react-window/src/testing/isConformant.ts     | 1 +
 .../react-datepicker-compat/src/testing/isConformant.ts          | 1 +
 .../react-components/react-dialog/src/testing/isConformant.ts    | 1 +
 .../react-components/react-divider/src/testing/isConformant.ts   | 1 +
 .../react-components/react-drawer/src/testing/isConformant.ts    | 1 +
 .../react-components/react-field/src/testing/isConformant.ts     | 1 +
 .../react-components/react-image/src/testing/isConformant.ts     | 1 +
 .../react-infobutton/src/testing/isConformant.ts                 | 1 +
 .../react-components/react-input/src/testing/isConformant.ts     | 1 +
 .../react-components/react-label/src/testing/isConformant.ts     | 1 +
 packages/react-components/react-link/src/testing/isConformant.ts | 1 +
 packages/react-components/react-menu/src/testing/isConformant.ts | 1 +
 .../react-migration-v8-v9/src/testing/isConformant.ts            | 1 +
 .../react-components/react-persona/src/testing/isConformant.ts   | 1 +
 .../react-components/react-popover/src/testing/isConformant.ts   | 1 +
 .../react-components/react-progress/src/testing/isConformant.ts  | 1 +
 .../react-components/react-provider/src/testing/isConformant.ts  | 1 +
 .../react-components/react-radio/src/testing/isConformant.ts     | 1 +
 .../react-components/react-select/src/testing/isConformant.ts    | 1 +
 .../react-components/react-skeleton/src/testing/isConformant.ts  | 1 +
 .../react-components/react-slider/src/testing/isConformant.ts    | 1 +
 .../react-spinbutton/src/testing/isConformant.ts                 | 1 +
 .../react-components/react-spinner/src/testing/isConformant.ts   | 1 +
 .../react-components/react-switch/src/testing/isConformant.ts    | 1 +
 .../react-components/react-table/src/testing/isConformant.ts     | 1 +
 packages/react-components/react-tabs/src/testing/isConformant.ts | 1 +
 packages/react-components/react-tags/src/testing/isConformant.ts | 1 +
 packages/react-components/react-text/src/testing/isConformant.ts | 1 +
 .../react-components/react-textarea/src/testing/isConformant.ts  | 1 +
 .../react-components/react-toolbar/src/testing/isConformant.ts   | 1 +
 .../react-components/react-tooltip/src/testing/isConformant.ts   | 1 +
 packages/react-components/react-tree/src/testing/isConformant.ts | 1 +
 41 files changed, 41 insertions(+)

diff --git a/packages/react-components/react-accordion/src/testing/isConformant.ts b/packages/react-components/react-accordion/src/testing/isConformant.ts
index 183b694ab7ee30..d3e3e430022c85 100644
--- a/packages/react-components/react-accordion/src/testing/isConformant.ts
+++ b/packages/react-components/react-accordion/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-alert/src/testing/isConformant.ts b/packages/react-components/react-alert/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-alert/src/testing/isConformant.ts
+++ b/packages/react-components/react-alert/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-avatar/src/testing/isConformant.ts b/packages/react-components/react-avatar/src/testing/isConformant.ts
index 183b694ab7ee30..d3e3e430022c85 100644
--- a/packages/react-components/react-avatar/src/testing/isConformant.ts
+++ b/packages/react-components/react-avatar/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-badge/src/testing/isConformant.ts b/packages/react-components/react-badge/src/testing/isConformant.ts
index 183b694ab7ee30..d3e3e430022c85 100644
--- a/packages/react-components/react-badge/src/testing/isConformant.ts
+++ b/packages/react-components/react-badge/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-breadcrumb/src/testing/isConformant.ts b/packages/react-components/react-breadcrumb/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-breadcrumb/src/testing/isConformant.ts
+++ b/packages/react-components/react-breadcrumb/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-button/src/testing/isConformant.ts b/packages/react-components/react-button/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-button/src/testing/isConformant.ts
+++ b/packages/react-components/react-button/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-card/src/testing/isConformant.ts b/packages/react-components/react-card/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-card/src/testing/isConformant.ts
+++ b/packages/react-components/react-card/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-checkbox/src/testing/isConformant.ts b/packages/react-components/react-checkbox/src/testing/isConformant.ts
index 2ffff9d342a7e8..0aad9515bbca63 100644
--- a/packages/react-components/react-checkbox/src/testing/isConformant.ts
+++ b/packages/react-components/react-checkbox/src/testing/isConformant.ts
@@ -5,6 +5,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-combobox/src/testing/isConformant.ts b/packages/react-components/react-combobox/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-combobox/src/testing/isConformant.ts
+++ b/packages/react-components/react-combobox/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts b/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts
+++ b/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-datepicker-compat/src/testing/isConformant.ts b/packages/react-components/react-datepicker-compat/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-datepicker-compat/src/testing/isConformant.ts
+++ b/packages/react-components/react-datepicker-compat/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-dialog/src/testing/isConformant.ts b/packages/react-components/react-dialog/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-dialog/src/testing/isConformant.ts
+++ b/packages/react-components/react-dialog/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-divider/src/testing/isConformant.ts b/packages/react-components/react-divider/src/testing/isConformant.ts
index 2ffff9d342a7e8..0aad9515bbca63 100644
--- a/packages/react-components/react-divider/src/testing/isConformant.ts
+++ b/packages/react-components/react-divider/src/testing/isConformant.ts
@@ -5,6 +5,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-drawer/src/testing/isConformant.ts b/packages/react-components/react-drawer/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-drawer/src/testing/isConformant.ts
+++ b/packages/react-components/react-drawer/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-field/src/testing/isConformant.ts b/packages/react-components/react-field/src/testing/isConformant.ts
index 2ffff9d342a7e8..0aad9515bbca63 100644
--- a/packages/react-components/react-field/src/testing/isConformant.ts
+++ b/packages/react-components/react-field/src/testing/isConformant.ts
@@ -5,6 +5,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-image/src/testing/isConformant.ts b/packages/react-components/react-image/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-image/src/testing/isConformant.ts
+++ b/packages/react-components/react-image/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-infobutton/src/testing/isConformant.ts b/packages/react-components/react-infobutton/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-infobutton/src/testing/isConformant.ts
+++ b/packages/react-components/react-infobutton/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-input/src/testing/isConformant.ts b/packages/react-components/react-input/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-input/src/testing/isConformant.ts
+++ b/packages/react-components/react-input/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-label/src/testing/isConformant.ts b/packages/react-components/react-label/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-label/src/testing/isConformant.ts
+++ b/packages/react-components/react-label/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-link/src/testing/isConformant.ts b/packages/react-components/react-link/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-link/src/testing/isConformant.ts
+++ b/packages/react-components/react-link/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-menu/src/testing/isConformant.ts b/packages/react-components/react-menu/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-menu/src/testing/isConformant.ts
+++ b/packages/react-components/react-menu/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-migration-v8-v9/src/testing/isConformant.ts b/packages/react-components/react-migration-v8-v9/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-migration-v8-v9/src/testing/isConformant.ts
+++ b/packages/react-components/react-migration-v8-v9/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-persona/src/testing/isConformant.ts b/packages/react-components/react-persona/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-persona/src/testing/isConformant.ts
+++ b/packages/react-components/react-persona/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-popover/src/testing/isConformant.ts b/packages/react-components/react-popover/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-popover/src/testing/isConformant.ts
+++ b/packages/react-components/react-popover/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-progress/src/testing/isConformant.ts b/packages/react-components/react-progress/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-progress/src/testing/isConformant.ts
+++ b/packages/react-components/react-progress/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-provider/src/testing/isConformant.ts b/packages/react-components/react-provider/src/testing/isConformant.ts
index b94dff389b2351..34ed187e098648 100644
--- a/packages/react-components/react-provider/src/testing/isConformant.ts
+++ b/packages/react-components/react-provider/src/testing/isConformant.ts
@@ -5,6 +5,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
   };
 
diff --git a/packages/react-components/react-radio/src/testing/isConformant.ts b/packages/react-components/react-radio/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-radio/src/testing/isConformant.ts
+++ b/packages/react-components/react-radio/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-select/src/testing/isConformant.ts b/packages/react-components/react-select/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-select/src/testing/isConformant.ts
+++ b/packages/react-components/react-select/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-skeleton/src/testing/isConformant.ts b/packages/react-components/react-skeleton/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-skeleton/src/testing/isConformant.ts
+++ b/packages/react-components/react-skeleton/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-slider/src/testing/isConformant.ts b/packages/react-components/react-slider/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-slider/src/testing/isConformant.ts
+++ b/packages/react-components/react-slider/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-spinbutton/src/testing/isConformant.ts b/packages/react-components/react-spinbutton/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-spinbutton/src/testing/isConformant.ts
+++ b/packages/react-components/react-spinbutton/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-spinner/src/testing/isConformant.ts b/packages/react-components/react-spinner/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-spinner/src/testing/isConformant.ts
+++ b/packages/react-components/react-spinner/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-switch/src/testing/isConformant.ts b/packages/react-components/react-switch/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-switch/src/testing/isConformant.ts
+++ b/packages/react-components/react-switch/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-table/src/testing/isConformant.ts b/packages/react-components/react-table/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-table/src/testing/isConformant.ts
+++ b/packages/react-components/react-table/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-tabs/src/testing/isConformant.ts b/packages/react-components/react-tabs/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-tabs/src/testing/isConformant.ts
+++ b/packages/react-components/react-tabs/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-tags/src/testing/isConformant.ts b/packages/react-components/react-tags/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-tags/src/testing/isConformant.ts
+++ b/packages/react-components/react-tags/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-text/src/testing/isConformant.ts b/packages/react-components/react-text/src/testing/isConformant.ts
index 55b0ea70534bb3..4e3ee30c5804c2 100644
--- a/packages/react-components/react-text/src/testing/isConformant.ts
+++ b/packages/react-components/react-text/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
     testOptions: {
diff --git a/packages/react-components/react-textarea/src/testing/isConformant.ts b/packages/react-components/react-textarea/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-textarea/src/testing/isConformant.ts
+++ b/packages/react-components/react-textarea/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-toolbar/src/testing/isConformant.ts b/packages/react-components/react-toolbar/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-toolbar/src/testing/isConformant.ts
+++ b/packages/react-components/react-toolbar/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };
diff --git a/packages/react-components/react-tooltip/src/testing/isConformant.ts b/packages/react-components/react-tooltip/src/testing/isConformant.ts
index b94dff389b2351..34ed187e098648 100644
--- a/packages/react-components/react-tooltip/src/testing/isConformant.ts
+++ b/packages/react-components/react-tooltip/src/testing/isConformant.ts
@@ -5,6 +5,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
   };
 
diff --git a/packages/react-components/react-tree/src/testing/isConformant.ts b/packages/react-components/react-tree/src/testing/isConformant.ts
index 77f88408cbd839..a3d988f29a1728 100644
--- a/packages/react-components/react-tree/src/testing/isConformant.ts
+++ b/packages/react-components/react-tree/src/testing/isConformant.ts
@@ -6,6 +6,7 @@ export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),
     extraTests: griffelTests as TestObject<TProps>,
   };

From d5045c4cb6ecab6e2c86198946faddf871fcd3b7 Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Thu, 27 Apr 2023 13:35:14 +0200
Subject: [PATCH 18/28] remove react-avatar-context package (#27709)

---
 .github/CODEOWNERS                            |  1 -
 .../react-avatar-context/.babelrc.json        |  4 --
 .../react-avatar-context/.eslintrc.json       |  4 --
 .../react-avatar-context/.npmignore           | 30 ---------
 .../react-avatar-context/.swcrc               | 30 ---------
 .../react-avatar-context/LICENSE              | 15 -----
 .../react-avatar-context/README.md            |  5 --
 .../config/api-extractor.json                 |  4 --
 .../react-avatar-context/config/tests.js      |  1 -
 .../react-avatar-context/docs/Spec.md         | 63 -------------------
 .../etc/react-avatar-context.api.md           |  9 ---
 .../react-avatar-context/jest.config.js       | 21 -------
 .../react-avatar-context/just.config.ts       |  5 --
 .../react-avatar-context/package.json         | 60 ------------------
 .../react-avatar-context/src/index.ts         |  2 -
 .../react-avatar-context/tsconfig.json        | 22 -------
 .../react-avatar-context/tsconfig.lib.json    | 14 -----
 .../react-avatar-context/tsconfig.spec.json   |  9 ---
 tsconfig.base.json                            |  1 -
 workspace.json                                |  7 ---
 20 files changed, 307 deletions(-)
 delete mode 100644 packages/react-components/react-avatar-context/.babelrc.json
 delete mode 100644 packages/react-components/react-avatar-context/.eslintrc.json
 delete mode 100644 packages/react-components/react-avatar-context/.npmignore
 delete mode 100644 packages/react-components/react-avatar-context/.swcrc
 delete mode 100644 packages/react-components/react-avatar-context/LICENSE
 delete mode 100644 packages/react-components/react-avatar-context/README.md
 delete mode 100644 packages/react-components/react-avatar-context/config/api-extractor.json
 delete mode 100644 packages/react-components/react-avatar-context/config/tests.js
 delete mode 100644 packages/react-components/react-avatar-context/docs/Spec.md
 delete mode 100644 packages/react-components/react-avatar-context/etc/react-avatar-context.api.md
 delete mode 100644 packages/react-components/react-avatar-context/jest.config.js
 delete mode 100644 packages/react-components/react-avatar-context/just.config.ts
 delete mode 100644 packages/react-components/react-avatar-context/package.json
 delete mode 100644 packages/react-components/react-avatar-context/src/index.ts
 delete mode 100644 packages/react-components/react-avatar-context/tsconfig.json
 delete mode 100644 packages/react-components/react-avatar-context/tsconfig.lib.json
 delete mode 100644 packages/react-components/react-avatar-context/tsconfig.spec.json

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 225dd3a402d521..036771c2bafd76 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -220,7 +220,6 @@ packages/react-components/babel-preset-global-context @microsoft/teams-prg
 packages/react-components/react-table @microsoft/teams-prg
 packages/react-components/react-progress @microsoft/cxe-red @tomi-msft
 packages/react-components/react-persona @microsoft/cxe-red @sopranopillow
-packages/react-components/react-avatar-context @microsoft/teams-prg
 packages/react-components/react-infobutton @microsoft/cxe-red @sopranopillow
 packages/react-components/react-tree @microsoft/teams-prg
 packages/react-components/react-virtualizer @microsoft/xc-uxe @Mitch-At-Work
diff --git a/packages/react-components/react-avatar-context/.babelrc.json b/packages/react-components/react-avatar-context/.babelrc.json
deleted file mode 100644
index 45fb71ca16d2c3..00000000000000
--- a/packages/react-components/react-avatar-context/.babelrc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "../../../.babelrc-v9.json",
-  "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"]
-}
diff --git a/packages/react-components/react-avatar-context/.eslintrc.json b/packages/react-components/react-avatar-context/.eslintrc.json
deleted file mode 100644
index ceea884c70dccc..00000000000000
--- a/packages/react-components/react-avatar-context/.eslintrc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": ["plugin:@fluentui/eslint-plugin/react"],
-  "root": true
-}
diff --git a/packages/react-components/react-avatar-context/.npmignore b/packages/react-components/react-avatar-context/.npmignore
deleted file mode 100644
index f7ce568a6dbf7c..00000000000000
--- a/packages/react-components/react-avatar-context/.npmignore
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook/
-.vscode/
-bundle-size/
-config/
-coverage/
-docs/
-etc/
-node_modules/
-src/
-stories/
-dist/types/
-temp/
-__fixtures__
-__mocks__
-__tests__
-
-*.api.json
-*.log
-*.spec.*
-*.cy.*
-*.test.*
-*.yml
-
-# config files
-*config.*
-*rc.*
-.editorconfig
-.eslint*
-.git*
-.prettierignore
diff --git a/packages/react-components/react-avatar-context/.swcrc b/packages/react-components/react-avatar-context/.swcrc
deleted file mode 100644
index b4ffa86dee3067..00000000000000
--- a/packages/react-components/react-avatar-context/.swcrc
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "exclude": [
-    "/testing",
-    "/**/*.cy.ts",
-    "/**/*.cy.tsx",
-    "/**/*.spec.ts",
-    "/**/*.spec.tsx",
-    "/**/*.test.ts",
-    "/**/*.test.tsx"
-  ],
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true,
-      "decorators": false,
-      "dynamicImport": false
-    },
-    "externalHelpers": true,
-    "transform": {
-      "react": {
-        "runtime": "classic",
-        "useSpread": true
-      }
-    },
-    "target": "es2019"
-  },
-  "minify": false,
-  "sourceMaps": true
-}
diff --git a/packages/react-components/react-avatar-context/LICENSE b/packages/react-components/react-avatar-context/LICENSE
deleted file mode 100644
index 8ffd46fad3eca9..00000000000000
--- a/packages/react-components/react-avatar-context/LICENSE
+++ /dev/null
@@ -1,15 +0,0 @@
-@fluentui/react-avatar-context
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
diff --git a/packages/react-components/react-avatar-context/README.md b/packages/react-components/react-avatar-context/README.md
deleted file mode 100644
index c3ad62ac1a187e..00000000000000
--- a/packages/react-components/react-avatar-context/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# @fluentui/react-avatar-context
-
-**React Avatar Context components for [Fluent UI React](https://react.fluentui.dev/)**
-
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
diff --git a/packages/react-components/react-avatar-context/config/api-extractor.json b/packages/react-components/react-avatar-context/config/api-extractor.json
deleted file mode 100644
index e533bf30b48a2b..00000000000000
--- a/packages/react-components/react-avatar-context/config/api-extractor.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-  "extends": "@fluentui/scripts-api-extractor/api-extractor.common.v-next.json"
-}
diff --git a/packages/react-components/react-avatar-context/config/tests.js b/packages/react-components/react-avatar-context/config/tests.js
deleted file mode 100644
index 2e211ae9e21420..00000000000000
--- a/packages/react-components/react-avatar-context/config/tests.js
+++ /dev/null
@@ -1 +0,0 @@
-/** Jest test setup file. */
diff --git a/packages/react-components/react-avatar-context/docs/Spec.md b/packages/react-components/react-avatar-context/docs/Spec.md
deleted file mode 100644
index 1cd591a26b2fdc..00000000000000
--- a/packages/react-components/react-avatar-context/docs/Spec.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# @fluentui/react-avatar-context Spec
-
-## Background
-
-_Description and use cases of this component_
-
-## Prior Art
-
-_Include background research done for this component_
-
-- _Link to Open UI research_
-- _Link to comparison of v7 and v0_
-- _Link to GitHub epic issue for the converged component_
-
-## Sample Code
-
-_Provide some representative example code that uses the proposed API for the component_
-
-## Variants
-
-_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._
-
-## API
-
-_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_
-
-## Structure
-
-- _**Public**_
-- _**Internal**_
-- _**DOM** - how the component will be rendered as HTML elements_
-
-## Migration
-
-_Describe what will need to be done to upgrade from the existing implementations:_
-
-- _Migration from v8_
-- _Migration from v0_
-
-## Behaviors
-
-_Explain how the component will behave in use, including:_
-
-- _Component States_
-- _Interaction_
-  - _Keyboard_
-  - _Cursor_
-  - _Touch_
-  - _Screen readers_
-
-## Accessibility
-
-Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document.
-
-- Decide whether to use **native element** or folow **ARIA** and provide reasons
-- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible.
-- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props.
-- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used
-- Specify texts for **state change announcements** - [ARIA live regions
-  ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...)
-- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them
-- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation)
-- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases)
diff --git a/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md b/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md
deleted file mode 100644
index 30d00c02ec77fb..00000000000000
--- a/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md
+++ /dev/null
@@ -1,9 +0,0 @@
-## API Report File for "@fluentui/react-avatar-context"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-// (No @packageDocumentation comment for this package)
-
-```
diff --git a/packages/react-components/react-avatar-context/jest.config.js b/packages/react-components/react-avatar-context/jest.config.js
deleted file mode 100644
index 1d956ea00a0f0b..00000000000000
--- a/packages/react-components/react-avatar-context/jest.config.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-check
-
-/**
- * @type {import('@jest/types').Config.InitialOptions}
- */
-module.exports = {
-  displayName: 'react-avatar-context',
-  preset: '../../../jest.preset.js',
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-      isolatedModules: true,
-    },
-  },
-  transform: {
-    '^.+\\.tsx?$': 'ts-jest',
-  },
-  coverageDirectory: './coverage',
-  setupFilesAfterEnv: ['./config/tests.js'],
-  snapshotSerializers: ['@griffel/jest-serializer'],
-};
diff --git a/packages/react-components/react-avatar-context/just.config.ts b/packages/react-components/react-avatar-context/just.config.ts
deleted file mode 100644
index b7b2c9a33bf435..00000000000000
--- a/packages/react-components/react-avatar-context/just.config.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { preset, task } from '@fluentui/scripts-tasks';
-
-preset();
-
-task('build', 'build:react-components').cached?.();
diff --git a/packages/react-components/react-avatar-context/package.json b/packages/react-components/react-avatar-context/package.json
deleted file mode 100644
index 4d9325f6f2e7aa..00000000000000
--- a/packages/react-components/react-avatar-context/package.json
+++ /dev/null
@@ -1,60 +0,0 @@
-{
-  "name": "@fluentui/react-avatar-context",
-  "version": "9.0.0-alpha.0",
-  "private": true,
-  "description": "Context to override avatar props",
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "typings": "./dist/index.d.ts",
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/microsoft/fluentui"
-  },
-  "license": "MIT",
-  "scripts": {
-    "build": "just-scripts build",
-    "clean": "just-scripts clean",
-    "code-style": "just-scripts code-style",
-    "just": "just-scripts",
-    "lint": "just-scripts lint",
-    "test": "jest --passWithNoTests",
-    "generate-api": "just-scripts generate-api",
-    "type-check": "tsc -b tsconfig.json"
-  },
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.20",
-    "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-tasks": "*"
-  },
-  "dependencies": {
-    "@fluentui/react-theme": "^9.1.7",
-    "@fluentui/react-utilities": "^9.8.0",
-    "@griffel/react": "^1.5.2",
-    "@swc/helpers": "^0.4.14"
-  },
-  "peerDependencies": {
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
-  },
-  "beachball": {
-    "disallowedChangeTypes": [
-      "major",
-      "minor",
-      "patch"
-    ]
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "node": "./lib-commonjs/index.js",
-      "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js"
-    },
-    "./package.json": "./package.json"
-  }
-}
diff --git a/packages/react-components/react-avatar-context/src/index.ts b/packages/react-components/react-avatar-context/src/index.ts
deleted file mode 100644
index aacbad0068e241..00000000000000
--- a/packages/react-components/react-avatar-context/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// TODO: replace with real exports
-export {};
diff --git a/packages/react-components/react-avatar-context/tsconfig.json b/packages/react-components/react-avatar-context/tsconfig.json
deleted file mode 100644
index 12ca516af1c5b2..00000000000000
--- a/packages/react-components/react-avatar-context/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "target": "ES2019",
-    "noEmit": true,
-    "isolatedModules": true,
-    "importHelpers": true,
-    "jsx": "react",
-    "noUnusedLocals": true,
-    "preserveConstEnums": true
-  },
-  "include": [],
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}
diff --git a/packages/react-components/react-avatar-context/tsconfig.lib.json b/packages/react-components/react-avatar-context/tsconfig.lib.json
deleted file mode 100644
index b2da24eff1b32f..00000000000000
--- a/packages/react-components/react-avatar-context/tsconfig.lib.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": false,
-    "lib": ["ES2019", "dom"],
-    "declaration": true,
-    "declarationDir": "../../../dist/out-tsc/types",
-    "outDir": "../../../dist/out-tsc",
-    "inlineSources": true,
-    "types": ["static-assets", "environment"]
-  },
-  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"],
-  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
-}
diff --git a/packages/react-components/react-avatar-context/tsconfig.spec.json b/packages/react-components/react-avatar-context/tsconfig.spec.json
deleted file mode 100644
index 469fcba4d7ba75..00000000000000
--- a/packages/react-components/react-avatar-context/tsconfig.spec.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "CommonJS",
-    "outDir": "dist",
-    "types": ["jest", "node"]
-  },
-  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
-}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index b994a894ae86fd..eda4141fbf5208 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -25,7 +25,6 @@
       "@fluentui/react-alert": ["packages/react-components/react-alert/src/index.ts"],
       "@fluentui/react-aria": ["packages/react-components/react-aria/src/index.ts"],
       "@fluentui/react-avatar": ["packages/react-components/react-avatar/src/index.ts"],
-      "@fluentui/react-avatar-context": ["packages/react-components/react-avatar-context/src/index.ts"],
       "@fluentui/react-badge": ["packages/react-components/react-badge/src/index.ts"],
       "@fluentui/react-breadcrumb": ["packages/react-components/react-breadcrumb/src/index.ts"],
       "@fluentui/react-button": ["packages/react-components/react-button/src/index.ts"],
diff --git a/workspace.json b/workspace.json
index 426abf087bf6bb..c9bcecd326ebbe 100644
--- a/workspace.json
+++ b/workspace.json
@@ -318,13 +318,6 @@
       "tags": ["vNext", "platform:web"],
       "implicitDependencies": []
     },
-    "@fluentui/react-avatar-context": {
-      "root": "packages/react-components/react-avatar-context",
-      "projectType": "library",
-      "implicitDependencies": [],
-      "sourceRoot": "packages/react-components/react-avatar-context/src",
-      "tags": ["vNext", "platform:web"]
-    },
     "@fluentui/react-badge": {
       "root": "packages/react-components/react-badge",
       "projectType": "library",

From 09937fe78c4eea94e150976c9e7b44fe586a4bba Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Thu, 27 Apr 2023 13:49:27 +0200
Subject: [PATCH 19/28] chore: migrate to NodeJS v16 (#27711)

* chore: migrate to node 16

* chore: bump to node 16.18.1 to be aligned with codesandbox CI

* fix(global-context): remove non-existend NodeJS.Glob after node 16 types migration

* fixup! chore: bump to node 16.18.1 to be aligned with codesandbox CI

* generate changefile
---
 .codesandbox/ci.json                                |  2 +-
 .devops/templates/tools.yml                         |  2 +-
 .github/workflows/check-packages.yml                |  6 +++---
 .github/workflows/docsite-publish-chromatic.yml     |  2 +-
 .github/workflows/docsite-publish-ghpages.yml       |  2 +-
 ...ontext-bd251f47-0c11-4359-86a3-0ddfbab981a4.json |  7 +++++++
 package.json                                        |  4 ++--
 .../react-components/global-context/src/types.ts    |  2 +-
 yarn.lock                                           | 13 +++++++++----
 9 files changed, 26 insertions(+), 14 deletions(-)
 create mode 100644 change/@fluentui-global-context-bd251f47-0c11-4359-86a3-0ddfbab981a4.json

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index ca72bb41e8229c..2cd7dc2ea27a1e 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -2,5 +2,5 @@
   "buildCommand": "build:codesandbox",
   "packages": ["packages/react", "packages/react-components/react-components"],
   "sandboxes": ["x5u3t", "spnyu"],
-  "node": "14"
+  "node": "16"
 }
diff --git a/.devops/templates/tools.yml b/.devops/templates/tools.yml
index 5b8b5d5004929c..808451359407fe 100644
--- a/.devops/templates/tools.yml
+++ b/.devops/templates/tools.yml
@@ -2,7 +2,7 @@
 steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '14.18.1'
+      versionSpec: '16.18.1'
       checkLatest: false
     displayName: 'Install Node.js'
 
diff --git a/.github/workflows/check-packages.yml b/.github/workflows/check-packages.yml
index 26c19808851d00..fc352c1c4a7158 100644
--- a/.github/workflows/check-packages.yml
+++ b/.github/workflows/check-packages.yml
@@ -12,7 +12,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.18.1
+          node-version: 16.18.1
           cache: 'yarn'
 
       - uses: tj-actions/changed-files@v34
@@ -44,7 +44,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.18.1
+          node-version: 16.18.1
 
       - uses: actions/github-script@v6
         with:
@@ -70,7 +70,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.18.1
+          node-version: 16.18.1
 
       - uses: actions/github-script@v6
         with:
diff --git a/.github/workflows/docsite-publish-chromatic.yml b/.github/workflows/docsite-publish-chromatic.yml
index fc8ef562d8eba7..20610ef7235f29 100644
--- a/.github/workflows/docsite-publish-chromatic.yml
+++ b/.github/workflows/docsite-publish-chromatic.yml
@@ -37,7 +37,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.18.1
+          node-version: 16.18.1
           cache: 'yarn'
 
       - name: Install packages
diff --git a/.github/workflows/docsite-publish-ghpages.yml b/.github/workflows/docsite-publish-ghpages.yml
index f358f4ce03052a..6cc781319d3985 100644
--- a/.github/workflows/docsite-publish-ghpages.yml
+++ b/.github/workflows/docsite-publish-ghpages.yml
@@ -37,7 +37,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.18.1
+          node-version: 16.18.1
           cache: 'yarn'
 
       - name: Install packages
diff --git a/change/@fluentui-global-context-bd251f47-0c11-4359-86a3-0ddfbab981a4.json b/change/@fluentui-global-context-bd251f47-0c11-4359-86a3-0ddfbab981a4.json
new file mode 100644
index 00000000000000..fe5f8da92b5095
--- /dev/null
+++ b/change/@fluentui-global-context-bd251f47-0c11-4359-86a3-0ddfbab981a4.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update internal types to reflect node 16 types",
+  "packageName": "@fluentui/global-context",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/package.json b/package.json
index e9621807e777e3..a86ad0a03c512d 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "engines": {
-    "node": "^14.18.1 || ^16.0.0"
+    "node": "^16.18.1 || ^18.0.0"
   },
   "scripts": {
     "build": "lage build --verbose",
@@ -165,7 +165,7 @@
     "@types/lodash": "4.14.182",
     "@types/markdown-table": "2.0.0",
     "@types/micromatch": "4.0.2",
-    "@types/node": "14.18.32",
+    "@types/node": "16.18.1",
     "@types/node-fetch": "2.5.7",
     "@types/prettier": "2.7.2",
     "@types/progress": "2.0.5",
diff --git a/packages/react-components/global-context/src/types.ts b/packages/react-components/global-context/src/types.ts
index 0010ac80544e83..79a9007e8228b3 100644
--- a/packages/react-components/global-context/src/types.ts
+++ b/packages/react-components/global-context/src/types.ts
@@ -1,3 +1,3 @@
 import * as React from 'react';
 
-export type GlobalObject = (typeof globalThis | NodeJS.Global) & Record<symbol, React.Context<unknown>>;
+export type GlobalObject = typeof globalThis & Record<symbol, React.Context<unknown>>;
diff --git a/yarn.lock b/yarn.lock
index 2ce3a8d3ab13fd..730a36ee10b92e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5750,10 +5750,10 @@
     "@types/node" "*"
     form-data "^3.0.0"
 
-"@types/node@*", "@types/node@14.18.32", "@types/node@>=10.0.0", "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0", "@types/node@^14.14.31":
-  version "14.18.32"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.32.tgz#8074f7106731f1a12ba993fe8bad86ee73905014"
-  integrity sha512-Y6S38pFr04yb13qqHf8uk1nHE3lXgQ30WZbv1mLliV9pt0NjvqdWttLcrOYLnXbOafknVYRHZGoMSpR9UwfYow==
+"@types/node@*", "@types/node@16.18.1", "@types/node@>=10.0.0", "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
+  version "16.18.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.1.tgz#fd860a5efc505a5417d25a99cbff78077447a391"
+  integrity sha512-Z659t5cj2Tt2SaqbJxXRo5EaU86E4l2CxtklCY1VftxYXhR81Z75UsugwdI7l5MUAR1I+l8sdt3B5Y++ZV76WQ==
 
 "@types/node@10.17.13", "@types/node@^10.12.18":
   version "10.17.13"
@@ -5770,6 +5770,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-11.15.54.tgz#59ed60e7b0d56905a654292e8d73275034eb6283"
   integrity sha512-1RWYiq+5UfozGsU6MwJyFX6BtktcT10XRjvcAQmskCtMcW3tPske88lM/nHv7BQG1w9KBXI1zPGuu5PnNCX14g==
 
+"@types/node@^14.14.31":
+  version "14.18.32"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.32.tgz#8074f7106731f1a12ba993fe8bad86ee73905014"
+  integrity sha512-Y6S38pFr04yb13qqHf8uk1nHE3lXgQ30WZbv1mLliV9pt0NjvqdWttLcrOYLnXbOafknVYRHZGoMSpR9UwfYow==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"

From c9c3efde6be94cbe7e38f29382265c1b07880b0a Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 27 Apr 2023 14:41:02 +0200
Subject: [PATCH 20/28] feat: add support to override drawer body styles

---
 packages/react-components/react-drawer/package.json            | 3 ++-
 .../react-drawer/src/components/DrawerBody/DrawerBody.tsx      | 3 +++
 .../src/CustomStyleHooksContext/CustomStyleHooksContext.ts     | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json
index ca0f37b72fa834..2dbc980b5a5dcd 100644
--- a/packages/react-components/react-drawer/package.json
+++ b/packages/react-components/react-drawer/package.json
@@ -36,9 +36,10 @@
   },
   "dependencies": {
     "@fluentui/react-dialog": "^9.5.3",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.2",
+    "@fluentui/react-shared-contexts": "^9.3.3",
     "@fluentui/react-theme": "^9.1.7",
     "@fluentui/react-utilities": "^9.8.0",
-    "@fluentui/react-jsx-runtime": "9.0.0-alpha.2",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },
diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx
index f721fefa5d1f02..54dc2c83c733bc 100644
--- a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx
+++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx
@@ -4,6 +4,7 @@ import { renderDrawerBody_unstable } from './renderDrawerBody';
 import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles';
 import type { DrawerBodyProps } from './DrawerBody.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * DrawerBody provides with a container for the main content of a Drawer.
@@ -12,6 +13,8 @@ export const DrawerBody: ForwardRefComponent<DrawerBodyProps> = React.forwardRef
   const state = useDrawerBody_unstable(props, ref);
 
   useDrawerBodyStyles_unstable(state);
+  useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);
+
   return renderDrawerBody_unstable(state);
 });
 
diff --git a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
index 33f69e86580c23..79b94e9913fe61 100644
--- a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+++ b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
@@ -89,6 +89,7 @@ export type CustomStyleHooksContextValue = Partial<{
   useDataGridHeaderStyles_unstable: CustomStyleHook;
   useDataGridHeaderCellStyles_unstable: CustomStyleHook;
   useDataGridSelectionCellStyles_unstable: CustomStyleHook;
+  useDrawerBodyStyles_unstable: CustomStyleHook;
 }>;
 
 /**

From 5174214ff482520b8d9fcc6894ed768604112ad5 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 27 Apr 2023 15:00:26 +0200
Subject: [PATCH 21/28] chore: enforce files naming to use .styles.ts [cxe-prg
 files] (#27707)

---
 ...-89b5306c-af55-4d03-b990-f2b07036e565.json |  7 +++++++
 ...-92afbcf5-895a-4a67-a8d1-44863348de3e.json |  7 +++++++
 ...-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json |  7 +++++++
 .../src/components/Breadcrumb/Breadcrumb.tsx  |  2 +-
 .../src/components/Breadcrumb/index.ts        |  2 +-
 ...tyles.ts => useBreadcrumbStyles.styles.ts} |  0
 .../BreadcrumbButton.test.tsx                 |  2 +-
 .../BreadcrumbButton/BreadcrumbButton.tsx     |  2 +-
 .../src/components/BreadcrumbButton/index.ts  |  2 +-
 ...ts => useBreadcrumbButtonStyles.styles.ts} |  0
 .../BreadcrumbDivider/BreadcrumbDivider.tsx   |  2 +-
 .../src/components/BreadcrumbDivider/index.ts |  2 +-
 ...s => useBreadcrumbDividerStyles.styles.ts} |  0
 .../BreadcrumbItem/BreadcrumbItem.tsx         |  2 +-
 .../src/components/BreadcrumbItem/index.ts    |  2 +-
 ...s.ts => useBreadcrumbItemStyles.styles.ts} |  0
 .../BreadcrumbLink/BreadcrumbLink.test.tsx    |  2 +-
 .../BreadcrumbLink/BreadcrumbLink.tsx         |  2 +-
 .../src/components/BreadcrumbLink/index.ts    |  2 +-
 ...s.ts => useBreadcrumbLinkStyles.styles.ts} |  0
 .../src/components/Card/Card.test.tsx         |  2 +-
 .../react-card/src/components/Card/Card.tsx   |  2 +-
 .../react-card/src/components/Card/index.ts   |  2 +-
 ...eCardStyles.ts => useCardStyles.styles.ts} |  6 +++---
 .../src/components/CardFooter/CardFooter.tsx  |  2 +-
 .../src/components/CardFooter/index.ts        |  2 +-
 ...tyles.ts => useCardFooterStyles.styles.ts} |  0
 .../src/components/CardHeader/CardHeader.tsx  |  2 +-
 .../src/components/CardHeader/index.ts        |  2 +-
 .../components/CardHeader/useCardHeader.ts    |  2 +-
 ...tyles.ts => useCardHeaderStyles.styles.ts} |  0
 .../components/CardPreview/CardPreview.tsx    |  2 +-
 .../src/components/CardPreview/index.ts       |  2 +-
 .../components/CardPreview/useCardPreview.ts  |  2 +-
 ...yles.ts => useCardPreviewStyles.styles.ts} |  0
 .../src/components/Drawer/Drawer.tsx          |  2 +-
 .../src/components/Drawer/index.ts            |  2 +-
 ...werStyles.ts => useDrawerStyles.styles.ts} |  0
 .../src/components/Image/Image.tsx            |  2 +-
 .../react-image/src/components/Image/index.ts |  2 +-
 ...mageStyles.ts => useImageStyles.styles.ts} |  0
 .../react-text/src/components/Text/Text.tsx   |  2 +-
 .../react-text/src/components/Text/index.ts   |  2 +-
 ...eTextStyles.ts => useTextStyles.styles.ts} |  0
 .../src/components/presets/Body1/Body1.tsx    | 19 +++----------------
 .../src/components/presets/Body1/index.ts     |  1 +
 .../presets/Body1/useBody1Styles.styles.ts    | 15 +++++++++++++++
 .../presets/Body1Strong/Body1Strong.tsx       | 19 +++----------------
 .../components/presets/Body1Strong/index.ts   |  1 +
 .../useBody1StrongStyles.styles.ts            | 15 +++++++++++++++
 .../presets/Body1Stronger/Body1Stronger.tsx   | 19 +++----------------
 .../components/presets/Body1Stronger/index.ts |  1 +
 .../useBody1StrongerStyles.styles.ts          | 15 +++++++++++++++
 .../src/components/presets/Body2/Body2.tsx    | 19 +++----------------
 .../src/components/presets/Body2/index.ts     |  1 +
 .../presets/Body2/useBody2Styles.styles.ts    | 15 +++++++++++++++
 .../components/presets/Caption1/Caption1.tsx  | 19 +++----------------
 .../src/components/presets/Caption1/index.ts  |  1 +
 .../Caption1/useCaption1Styles.styles.ts      | 15 +++++++++++++++
 .../presets/Caption1Strong/Caption1Strong.tsx | 19 +++----------------
 .../presets/Caption1Strong/index.ts           |  1 +
 .../useCaption1StrongStyles.styles.ts         | 15 +++++++++++++++
 .../Caption1Stronger/Caption1Stronger.tsx     | 19 +++----------------
 .../presets/Caption1Stronger/index.ts         |  1 +
 .../useCaption1Stronger.styles.ts             | 15 +++++++++++++++
 .../components/presets/Caption2/Caption2.tsx  | 19 +++----------------
 .../src/components/presets/Caption2/index.ts  |  1 +
 .../Caption2/useCaption2Styles.styles.ts      | 15 +++++++++++++++
 .../presets/Caption2Strong/Caption2Strong.tsx | 18 +++---------------
 .../presets/Caption2Strong/index.ts           |  1 +
 .../useCaption2StrongStyles.styles.ts         | 15 +++++++++++++++
 .../components/presets/Display/Display.tsx    | 19 +++----------------
 .../src/components/presets/Display/index.ts   |  1 +
 .../Display/useDisplayStyles.styles.ts        | 15 +++++++++++++++
 .../presets/LargeTitle/LargeTitle.tsx         | 19 +++----------------
 .../components/presets/LargeTitle/index.ts    |  1 +
 .../LargeTitle/useLargeTitleStyles.styles.ts  | 15 +++++++++++++++
 .../presets/Subtitle1/Subtitle1.tsx           | 19 +++----------------
 .../src/components/presets/Subtitle1/index.ts |  1 +
 .../Subtitle1/useSubtitle1Styles.styles.ts    | 15 +++++++++++++++
 .../presets/Subtitle2/Subtitle2.tsx           | 19 +++----------------
 .../src/components/presets/Subtitle2/index.ts |  1 +
 .../Subtitle2/useSubtitle2Styles.styles.ts    | 15 +++++++++++++++
 .../Subtitle2Stronger/Subtitle2Stronger.tsx   | 19 +++----------------
 .../presets/Subtitle2Stronger/index.ts        |  1 +
 .../useSubtitle2Stronger.styles.ts            | 15 +++++++++++++++
 .../src/components/presets/Title1/Title1.tsx  | 19 +++----------------
 .../src/components/presets/Title1/index.ts    |  1 +
 .../presets/Title1/useTitle1Styles.styles.ts  | 15 +++++++++++++++
 .../src/components/presets/Title2/Title2.tsx  | 19 +++----------------
 .../src/components/presets/Title2/index.ts    |  1 +
 .../presets/Title2/useTitle2Styles.styles.ts  | 15 +++++++++++++++
 .../src/components/presets/Title3/Title3.tsx  | 19 +++----------------
 .../src/components/presets/Title3/index.ts    |  1 +
 .../presets/Title3/useTitle3Styles.styles.ts  | 15 +++++++++++++++
 95 files changed, 376 insertions(+), 303 deletions(-)
 create mode 100644 change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json
 create mode 100644 change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json
 create mode 100644 change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json
 rename packages/react-components/react-breadcrumb/src/components/Breadcrumb/{useBreadcrumbStyles.ts => useBreadcrumbStyles.styles.ts} (100%)
 rename packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/{useBreadcrumbButtonStyles.ts => useBreadcrumbButtonStyles.styles.ts} (100%)
 rename packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/{useBreadcrumbDividerStyles.ts => useBreadcrumbDividerStyles.styles.ts} (100%)
 rename packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/{useBreadcrumbItemStyles.ts => useBreadcrumbItemStyles.styles.ts} (100%)
 rename packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/{useBreadcrumbLinkStyles.ts => useBreadcrumbLinkStyles.styles.ts} (100%)
 rename packages/react-components/react-card/src/components/Card/{useCardStyles.ts => useCardStyles.styles.ts} (99%)
 rename packages/react-components/react-card/src/components/CardFooter/{useCardFooterStyles.ts => useCardFooterStyles.styles.ts} (100%)
 rename packages/react-components/react-card/src/components/CardHeader/{useCardHeaderStyles.ts => useCardHeaderStyles.styles.ts} (100%)
 rename packages/react-components/react-card/src/components/CardPreview/{useCardPreviewStyles.ts => useCardPreviewStyles.styles.ts} (100%)
 rename packages/react-components/react-drawer/src/components/Drawer/{useDrawerStyles.ts => useDrawerStyles.styles.ts} (100%)
 rename packages/react-components/react-image/src/components/Image/{useImageStyles.ts => useImageStyles.styles.ts} (100%)
 rename packages/react-components/react-text/src/components/Text/{useTextStyles.ts => useTextStyles.styles.ts} (100%)
 create mode 100644 packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Body2/useBody2Styles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Caption1/useCaption1Styles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Caption2/useCaption2Styles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Display/useDisplayStyles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Title1/useTitle1Styles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Title2/useTitle2Styles.styles.ts
 create mode 100644 packages/react-components/react-text/src/components/presets/Title3/useTitle3Styles.styles.ts

diff --git a/change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json b/change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json
new file mode 100644
index 00000000000000..6297d62da65155
--- /dev/null
+++ b/change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-card",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json b/change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json
new file mode 100644
index 00000000000000..34eebf3ee4df25
--- /dev/null
+++ b/change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-image",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json b/change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json
new file mode 100644
index 00000000000000..9f41c3834f73e5
--- /dev/null
+++ b/change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-text",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx
index 8e83671f149290..9555f5673305d8 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useBreadcrumb_unstable } from './useBreadcrumb';
 import { renderBreadcrumb_unstable } from './renderBreadcrumb';
-import { useBreadcrumbStyles_unstable } from './useBreadcrumbStyles';
+import { useBreadcrumbStyles_unstable } from './useBreadcrumbStyles.styles';
 import type { BreadcrumbProps } from './Breadcrumb.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useBreadcrumbContextValues_unstable } from './useBreadcrumbContextValue';
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts
index c066b0fd3486b6..e35661576ed45b 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts
@@ -2,4 +2,4 @@ export * from './Breadcrumb';
 export * from './Breadcrumb.types';
 export * from './renderBreadcrumb';
 export * from './useBreadcrumb';
-export * from './useBreadcrumbStyles';
+export * from './useBreadcrumbStyles.styles';
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts
rename to packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.styles.ts
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
index f8802fb6689216..aa9dabc8891a7e 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { BreadcrumbButton } from './BreadcrumbButton';
 import { BreadcrumbButtonProps } from './BreadcrumbButton.types';
 import { isConformant } from '../../testing/isConformant';
-import { breadcrumbButtonClassNames } from './useBreadcrumbButtonStyles';
+import { breadcrumbButtonClassNames } from './useBreadcrumbButtonStyles.styles';
 
 describe('BreadcrumbButton', () => {
   isConformant({
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx
index 5aacb6d6bfb866..55457e345642cc 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useBreadcrumbButton_unstable } from './useBreadcrumbButton';
 import { renderBreadcrumbButton_unstable } from './renderBreadcrumbButton';
-import { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles';
+import { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles.styles';
 import type { BreadcrumbButtonProps } from './BreadcrumbButton.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts
index b2eda0e214561b..d972283c4ee090 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts
@@ -2,4 +2,4 @@ export * from './BreadcrumbButton';
 export * from './BreadcrumbButton.types';
 export * from './renderBreadcrumbButton';
 export * from './useBreadcrumbButton';
-export * from './useBreadcrumbButtonStyles';
+export * from './useBreadcrumbButtonStyles.styles';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.ts
rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
index 802946382f33ae..de51ae013fd53e 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useBreadcrumbDivider_unstable } from './useBreadcrumbDivider';
 import { renderBreadcrumbDivider_unstable } from './renderBreadcrumbDivider';
-import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles';
+import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles.styles';
 import type { BreadcrumbDividerProps } from './BreadcrumbDivider.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts
index 2718c3f9ddff52..e984ecbb9aeb89 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts
@@ -2,4 +2,4 @@ export * from './BreadcrumbDivider';
 export * from './BreadcrumbDivider.types';
 export * from './renderBreadcrumbDivider';
 export * from './useBreadcrumbDivider';
-export * from './useBreadcrumbDividerStyles';
+export * from './useBreadcrumbDividerStyles.styles';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts
rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.ts
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
index f4146c74b7bc69..3909738690525b 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useBreadcrumbItem_unstable } from './useBreadcrumbItem';
 import { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';
-import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles';
+import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles';
 import type { BreadcrumbItemProps } from './BreadcrumbItem.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts
index 84e95cdc702d9e..c5bfc978fdde03 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts
@@ -2,4 +2,4 @@ export * from './BreadcrumbItem';
 export * from './BreadcrumbItem.types';
 export * from './renderBreadcrumbItem';
 export * from './useBreadcrumbItem';
-export * from './useBreadcrumbItemStyles';
+export * from './useBreadcrumbItemStyles.styles';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts
rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx
index 7392ba74d4b811..3f9a666eacdc04 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { BreadcrumbLink } from './BreadcrumbLink';
 import type { BreadcrumbLinkProps } from './BreadcrumbLink.types';
 import { isConformant } from '../../testing/isConformant';
-import { breadcrumbLinkClassNames } from './useBreadcrumbLinkStyles';
+import { breadcrumbLinkClassNames } from './useBreadcrumbLinkStyles.styles';
 
 describe('BreadcrumbLink', () => {
   isConformant({
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx
index 2d72ea2d223740..4d8458785af5b8 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useBreadcrumbLink_unstable } from './useBreadcrumbLink';
 import { renderBreadcrumbLink_unstable } from './renderBreadcrumbLink';
-import { useBreadcrumbLinkStyles_unstable } from './useBreadcrumbLinkStyles';
+import { useBreadcrumbLinkStyles_unstable } from './useBreadcrumbLinkStyles.styles';
 import type { BreadcrumbLinkProps } from './BreadcrumbLink.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts
index 6b754010678625..cefc4bb166b4c6 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts
@@ -2,4 +2,4 @@ export * from './BreadcrumbLink';
 export * from './BreadcrumbLink.types';
 export * from './renderBreadcrumbLink';
 export * from './useBreadcrumbLink';
-export * from './useBreadcrumbLinkStyles';
+export * from './useBreadcrumbLinkStyles.styles';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.ts
rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.styles.ts
diff --git a/packages/react-components/react-card/src/components/Card/Card.test.tsx b/packages/react-components/react-card/src/components/Card/Card.test.tsx
index 28b2059b1396da..f229f0d0a136af 100644
--- a/packages/react-components/react-card/src/components/Card/Card.test.tsx
+++ b/packages/react-components/react-card/src/components/Card/Card.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { Card } from './Card';
 import { isConformant } from '../../testing/isConformant';
 import { CardProps } from './Card.types';
-import { cardClassNames } from './useCardStyles';
+import { cardClassNames } from './useCardStyles.styles';
 
 describe('Card', () => {
   isConformant<CardProps>({
diff --git a/packages/react-components/react-card/src/components/Card/Card.tsx b/packages/react-components/react-card/src/components/Card/Card.tsx
index baa98b06197aa4..a872b34554c645 100644
--- a/packages/react-components/react-card/src/components/Card/Card.tsx
+++ b/packages/react-components/react-card/src/components/Card/Card.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCard_unstable } from './useCard';
 import { renderCard_unstable } from './renderCard';
-import { useCardStyles_unstable } from './useCardStyles';
+import { useCardStyles_unstable } from './useCardStyles.styles';
 import type { CardProps } from './Card.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCardContextValue } from './useCardContextValue';
diff --git a/packages/react-components/react-card/src/components/Card/index.ts b/packages/react-components/react-card/src/components/Card/index.ts
index 1ad6404c375f38..c1f77d8ed79487 100644
--- a/packages/react-components/react-card/src/components/Card/index.ts
+++ b/packages/react-components/react-card/src/components/Card/index.ts
@@ -3,4 +3,4 @@ export * from './Card.types';
 export * from './CardContext';
 export * from './renderCard';
 export * from './useCard';
-export * from './useCardStyles';
+export * from './useCardStyles.styles';
diff --git a/packages/react-components/react-card/src/components/Card/useCardStyles.ts b/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts
similarity index 99%
rename from packages/react-components/react-card/src/components/Card/useCardStyles.ts
rename to packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts
index dc59fde63a8ec1..7154e20454626e 100644
--- a/packages/react-components/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts
@@ -3,9 +3,9 @@ import { tokens } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 
-import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';
-import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';
-import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';
+import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
+import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
+import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
 import type { CardSlots, CardState } from './Card.types';
 
 /**
diff --git a/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx b/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx
index a661a4fe86a166..f10bdfe29e6665 100644
--- a/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx
+++ b/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCardFooter_unstable } from './useCardFooter';
 import { renderCardFooter_unstable } from './renderCardFooter';
-import { useCardFooterStyles_unstable } from './useCardFooterStyles';
+import { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';
 import type { CardFooterProps } from './CardFooter.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-card/src/components/CardFooter/index.ts b/packages/react-components/react-card/src/components/CardFooter/index.ts
index 38d7a22066ae90..c95072f03c4c93 100644
--- a/packages/react-components/react-card/src/components/CardFooter/index.ts
+++ b/packages/react-components/react-card/src/components/CardFooter/index.ts
@@ -2,4 +2,4 @@ export * from './CardFooter';
 export * from './CardFooter.types';
 export * from './renderCardFooter';
 export * from './useCardFooter';
-export * from './useCardFooterStyles';
+export * from './useCardFooterStyles.styles';
diff --git a/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts
rename to packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.styles.ts
diff --git a/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx b/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx
index 10b158648ee693..483542a78b1308 100644
--- a/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx
+++ b/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCardHeader_unstable } from './useCardHeader';
 import { renderCardHeader_unstable } from './renderCardHeader';
-import { useCardHeaderStyles_unstable } from './useCardHeaderStyles';
+import { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';
 import type { CardHeaderProps } from './CardHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-card/src/components/CardHeader/index.ts b/packages/react-components/react-card/src/components/CardHeader/index.ts
index 4c35f766d4d846..6f516cdf246ba4 100644
--- a/packages/react-components/react-card/src/components/CardHeader/index.ts
+++ b/packages/react-components/react-card/src/components/CardHeader/index.ts
@@ -2,4 +2,4 @@ export * from './CardHeader';
 export * from './CardHeader.types';
 export * from './renderCardHeader';
 export * from './useCardHeader';
-export * from './useCardHeaderStyles';
+export * from './useCardHeaderStyles.styles';
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 2db087a5985365..3f1f487923d6cf 100644
--- a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts
+++ b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
 import type { CardHeaderProps, CardHeaderState } from './CardHeader.types';
 import { useCardContext_unstable } from '../Card/CardContext';
-import { cardHeaderClassNames } from './useCardHeaderStyles';
+import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
 
 /**
  * Create the state required to render CardHeader.
diff --git a/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts
rename to packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.styles.ts
diff --git a/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx b/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx
index 1945aed07ea749..f9afcaf1ea6991 100644
--- a/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx
+++ b/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCardPreview_unstable } from './useCardPreview';
 import { renderCardPreview_unstable } from './renderCardPreview';
-import { useCardPreviewStyles_unstable } from './useCardPreviewStyles';
+import { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';
 import type { CardPreviewProps } from './CardPreview.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-card/src/components/CardPreview/index.ts b/packages/react-components/react-card/src/components/CardPreview/index.ts
index 3673e23eddfe42..5b3c4eedc68b2c 100644
--- a/packages/react-components/react-card/src/components/CardPreview/index.ts
+++ b/packages/react-components/react-card/src/components/CardPreview/index.ts
@@ -2,4 +2,4 @@ export * from './CardPreview';
 export * from './CardPreview.types';
 export * from './renderCardPreview';
 export * from './useCardPreview';
-export * from './useCardPreviewStyles';
+export * from './useCardPreviewStyles.styles';
diff --git a/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts b/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts
index 6f711c44fba094..2f578992522092 100644
--- a/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts
+++ b/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
 import type { CardPreviewProps, CardPreviewState } from './CardPreview.types';
 import { useCardContext_unstable } from '../Card/CardContext';
-import { cardPreviewClassNames } from './useCardPreviewStyles';
+import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
 
 /**
  * Create the state required to render CardPreview.
diff --git a/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts
rename to packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.styles.ts
diff --git a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx
index 13ded85aa7b97c..04361f58762ff5 100644
--- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx
+++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDrawer_unstable } from './useDrawer';
 import { renderDrawer_unstable } from './renderDrawer';
-import { useDrawerStyles_unstable } from './useDrawerStyles';
+import { useDrawerStyles_unstable } from './useDrawerStyles.styles';
 import type { DrawerProps } from './Drawer.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
diff --git a/packages/react-components/react-drawer/src/components/Drawer/index.ts b/packages/react-components/react-drawer/src/components/Drawer/index.ts
index 3bd2cab50d5f8e..9e93458b3402fd 100644
--- a/packages/react-components/react-drawer/src/components/Drawer/index.ts
+++ b/packages/react-components/react-drawer/src/components/Drawer/index.ts
@@ -2,4 +2,4 @@ export * from './Drawer';
 export * from './Drawer.types';
 export * from './renderDrawer';
 export * from './useDrawer';
-export * from './useDrawerStyles';
+export * from './useDrawerStyles.styles';
diff --git a/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.ts b/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.ts
rename to packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts
diff --git a/packages/react-components/react-image/src/components/Image/Image.tsx b/packages/react-components/react-image/src/components/Image/Image.tsx
index d3340dd4ab5ea9..1adca6b7306034 100644
--- a/packages/react-components/react-image/src/components/Image/Image.tsx
+++ b/packages/react-components/react-image/src/components/Image/Image.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { renderImage_unstable } from './renderImage';
 import { useImage_unstable } from './useImage';
-import { useImageStyles_unstable } from './useImageStyles';
+import { useImageStyles_unstable } from './useImageStyles.styles';
 import type { ImageProps } from './Image.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-image/src/components/Image/index.ts b/packages/react-components/react-image/src/components/Image/index.ts
index 1ce909a1ae2b85..85f137b8d4db02 100644
--- a/packages/react-components/react-image/src/components/Image/index.ts
+++ b/packages/react-components/react-image/src/components/Image/index.ts
@@ -2,4 +2,4 @@ export * from './Image.types';
 export * from './Image';
 export * from './renderImage';
 export * from './useImage';
-export * from './useImageStyles';
+export * from './useImageStyles.styles';
diff --git a/packages/react-components/react-image/src/components/Image/useImageStyles.ts b/packages/react-components/react-image/src/components/Image/useImageStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-image/src/components/Image/useImageStyles.ts
rename to packages/react-components/react-image/src/components/Image/useImageStyles.styles.ts
diff --git a/packages/react-components/react-text/src/components/Text/Text.tsx b/packages/react-components/react-text/src/components/Text/Text.tsx
index c30202af560624..f88995ee8eadbf 100644
--- a/packages/react-components/react-text/src/components/Text/Text.tsx
+++ b/packages/react-components/react-text/src/components/Text/Text.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useText_unstable } from './useText';
 import { renderText_unstable } from './renderText';
-import { useTextStyles_unstable } from './useTextStyles';
+import { useTextStyles_unstable } from './useTextStyles.styles';
 import type { TextProps } from './Text.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-text/src/components/Text/index.ts b/packages/react-components/react-text/src/components/Text/index.ts
index 04fc42f94ff616..d4f8729f99a205 100644
--- a/packages/react-components/react-text/src/components/Text/index.ts
+++ b/packages/react-components/react-text/src/components/Text/index.ts
@@ -2,4 +2,4 @@ export * from './Text';
 export * from './Text.types';
 export * from './renderText';
 export * from './useText';
-export * from './useTextStyles';
+export * from './useTextStyles.styles';
diff --git a/packages/react-components/react-text/src/components/Text/useTextStyles.ts b/packages/react-components/react-text/src/components/Text/useTextStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-text/src/components/Text/useTextStyles.ts
rename to packages/react-components/react-text/src/components/Text/useTextStyles.styles.ts
diff --git a/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx b/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx
index 8e9d350ca58e67..57ebe7173fbecf 100644
--- a/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx
+++ b/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const body1ClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Body1',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.body1,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { body1ClassNames, useBody1Styles } from './useBody1Styles.styles';
 
 /**
  * Text preset component for the Body1 typography variant
  */
 export const Body1: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useBody1Styles,
   className: body1ClassNames.root,
   displayName: 'Body1',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Body1/index.ts b/packages/react-components/react-text/src/components/presets/Body1/index.ts
index 121209a453aa42..0bf95e904f87a4 100644
--- a/packages/react-components/react-text/src/components/presets/Body1/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Body1/index.ts
@@ -1 +1,2 @@
 export * from './Body1';
+export { body1ClassNames } from './useBody1Styles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts
new file mode 100644
index 00000000000000..0df28b21d38ebf
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const body1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Body1',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useBody1Styles = makeStyles({
+  root: typographyStyles.body1,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx b/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx
index 586c08d518a09f..74df1549998252 100644
--- a/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx
+++ b/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const body1StrongClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Body1Strong',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.body1Strong,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { body1StrongClassNames, useBody1StrongStyles } from './useBody1StrongStyles.styles';
 
 /**
  * Text preset component for the Body1Strong typography variant
  */
 export const Body1Strong: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useBody1StrongStyles,
   className: body1StrongClassNames.root,
   displayName: 'Body1Strong',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts b/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts
index 09d233a0f3c9f4..e434a5b6598529 100644
--- a/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts
@@ -1 +1,2 @@
 export * from './Body1Strong';
+export { body1StrongClassNames } from './useBody1StrongStyles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts
new file mode 100644
index 00000000000000..a29f3e9c1702f5
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const body1StrongClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Body1Strong',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useBody1StrongStyles = makeStyles({
+  root: typographyStyles.body1Strong,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx b/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx
index d28a061293ba81..fb7efac4e05956 100644
--- a/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx
+++ b/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const body1StrongerClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Body1Stronger',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.body1Stronger,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { body1StrongerClassNames, useBody1StrongerStyles } from './useBody1StrongerStyles.styles';
 
 /**
  * Text preset component for the Body1Stronger typography variant
  */
 export const Body1Stronger: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useBody1StrongerStyles,
   className: body1StrongerClassNames.root,
   displayName: 'Body1Stronger',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts b/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts
index df60a4c601787e..2a4f350cf7fc50 100644
--- a/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts
@@ -1 +1,2 @@
 export * from './Body1Stronger';
+export { body1StrongerClassNames } from './useBody1StrongerStyles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts
new file mode 100644
index 00000000000000..cb883ab7e08466
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const body1StrongerClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Body1Stronger',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useBody1StrongerStyles = makeStyles({
+  root: typographyStyles.body1Stronger,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx b/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx
index 906a855cdddb41..bed7b51c95c510 100644
--- a/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx
+++ b/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const body2ClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Body2',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.body2,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { body2ClassNames, useBody2Styles } from './useBody2Styles.styles';
 
 /**
  * Text preset component for the Body2 typography variant
  */
 export const Body2: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useBody2Styles,
   className: body2ClassNames.root,
   displayName: 'Body2',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Body2/index.ts b/packages/react-components/react-text/src/components/presets/Body2/index.ts
index b334621f5b630a..9afbb9a9a0c733 100644
--- a/packages/react-components/react-text/src/components/presets/Body2/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Body2/index.ts
@@ -1 +1,2 @@
 export * from './Body2';
+export { body2ClassNames } from './useBody2Styles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Body2/useBody2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Body2/useBody2Styles.styles.ts
new file mode 100644
index 00000000000000..116208d5d38342
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Body2/useBody2Styles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const body2ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Body2',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useBody2Styles = makeStyles({
+  root: typographyStyles.body2,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx b/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx
index 022527268cde03..c2b403a165652f 100644
--- a/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx
+++ b/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const caption1ClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Caption1',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.caption1,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { caption1ClassNames, useCaption1Styles } from './useCaption1Styles.styles';
 
 /**
  * Text preset component for the Caption1 typography variant
  */
 export const Caption1: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useCaption1Styles,
   className: caption1ClassNames.root,
   displayName: 'Caption1',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Caption1/index.ts b/packages/react-components/react-text/src/components/presets/Caption1/index.ts
index 9884a53b5ce8e8..0d699882e64515 100644
--- a/packages/react-components/react-text/src/components/presets/Caption1/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Caption1/index.ts
@@ -1 +1,2 @@
 export * from './Caption1';
+export { caption1ClassNames } from './useCaption1Styles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Caption1/useCaption1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption1/useCaption1Styles.styles.ts
new file mode 100644
index 00000000000000..cff14d3f686382
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Caption1/useCaption1Styles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const caption1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Caption1',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useCaption1Styles = makeStyles({
+  root: typographyStyles.caption1,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx b/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx
index 00df4122aac1f6..781359befa9027 100644
--- a/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx
+++ b/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const caption1StrongClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Caption1Strong',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.caption1Strong,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { caption1StrongClassNames, useCaption1StrongStyles } from './useCaption1StrongStyles.styles';
 
 /**
  * Text preset component for the Caption1Strong typography variant
  */
 export const Caption1Strong: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useCaption1StrongStyles,
   className: caption1StrongClassNames.root,
   displayName: 'Caption1Strong',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts b/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts
index 5295cf11b13b44..2d1a76c38fd84e 100644
--- a/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts
@@ -1 +1,2 @@
 export * from './Caption1Strong';
+export { caption1StrongClassNames } from './useCaption1StrongStyles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts
new file mode 100644
index 00000000000000..0e9512d9753ba5
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const caption1StrongClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Caption1Strong',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useCaption1StrongStyles = makeStyles({
+  root: typographyStyles.caption1Strong,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx b/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx
index e3ef507ccb122a..a8b27c99c773c5 100644
--- a/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx
+++ b/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const caption1StrongerClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Caption1Stronger',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.caption1Stronger,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { caption1StrongerClassNames, useCaption1StrongerStyles } from './useCaption1Stronger.styles';
 
 /**
  * Text preset component for the Caption1Stronger typography variant
  */
 export const Caption1Stronger: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useCaption1StrongerStyles,
   className: caption1StrongerClassNames.root,
   displayName: 'Caption1Stronger',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts b/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts
index 97da77e682c634..bf291a220f6c84 100644
--- a/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts
@@ -1 +1,2 @@
 export * from './Caption1Stronger';
+export { caption1StrongerClassNames } from './useCaption1Stronger.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts b/packages/react-components/react-text/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts
new file mode 100644
index 00000000000000..57094df4c67676
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const caption1StrongerClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Caption1Stronger',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useCaption1StrongerStyles = makeStyles({
+  root: typographyStyles.caption1Stronger,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx b/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx
index 5e47ecf75eadb2..6cc1bdf15a2dbc 100644
--- a/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx
+++ b/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const caption2ClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Caption2',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.caption2,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { caption2ClassNames, useCaption2Styles } from './useCaption2Styles.styles';
 
 /**
  * Text preset component for the Caption2 typography variant
  */
 export const Caption2: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useCaption2Styles,
   className: caption2ClassNames.root,
   displayName: 'Caption2',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Caption2/index.ts b/packages/react-components/react-text/src/components/presets/Caption2/index.ts
index 0b834aa6325c1a..d60c40bdfbd25b 100644
--- a/packages/react-components/react-text/src/components/presets/Caption2/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Caption2/index.ts
@@ -1 +1,2 @@
 export * from './Caption2';
+export { caption2ClassNames } from './useCaption2Styles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Caption2/useCaption2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption2/useCaption2Styles.styles.ts
new file mode 100644
index 00000000000000..3b91b20030bae5
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Caption2/useCaption2Styles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const caption2ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Caption2',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useCaption2Styles = makeStyles({
+  root: typographyStyles.caption2,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx b/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx
index aa1d4a5a31acaa..663c4da0ad5f82 100644
--- a/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx
+++ b/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx
@@ -1,26 +1,14 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
 
-export const caption2StrongClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Caption2Strong',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.caption2Strong,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { caption2StrongClassNames, useCaption2StrongStyles } from './useCaption2StrongStyles.styles';
 
 /**
  * Text preset component for the Caption2Strong typography variant
  */
 export const Caption2Strong: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useCaption2StrongStyles,
   className: caption2StrongClassNames.root,
   displayName: 'Caption2Strong',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts b/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts
index ea02534c049483..04bab7797e5015 100644
--- a/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts
@@ -1 +1,2 @@
 export * from './Caption2Strong';
+export { caption2StrongClassNames } from './useCaption2StrongStyles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts
new file mode 100644
index 00000000000000..7f8770d4255673
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const caption2StrongClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Caption2Strong',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useCaption2StrongStyles = makeStyles({
+  root: typographyStyles.caption2Strong,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Display/Display.tsx b/packages/react-components/react-text/src/components/presets/Display/Display.tsx
index 76715f6a1c2fc0..339e9045eb3418 100644
--- a/packages/react-components/react-text/src/components/presets/Display/Display.tsx
+++ b/packages/react-components/react-text/src/components/presets/Display/Display.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const displayClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Display',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.display,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { displayClassNames, useDisplayStyles } from './useDisplayStyles.styles';
 
 /**
  * Text preset component for the Display typography variant
  */
 export const Display: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useDisplayStyles,
   className: displayClassNames.root,
   displayName: 'Display',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Display/index.ts b/packages/react-components/react-text/src/components/presets/Display/index.ts
index 6a069964d8a04d..016778725109ba 100644
--- a/packages/react-components/react-text/src/components/presets/Display/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Display/index.ts
@@ -1 +1,2 @@
 export * from './Display';
+export { displayClassNames } from './useDisplayStyles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Display/useDisplayStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Display/useDisplayStyles.styles.ts
new file mode 100644
index 00000000000000..354c41720f2139
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Display/useDisplayStyles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const displayClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Display',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useDisplayStyles = makeStyles({
+  root: typographyStyles.display,
+});
diff --git a/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx b/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx
index a2f8f2062928ff..e7591a75ba23cd 100644
--- a/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx
+++ b/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const largeTitleClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-LargeTitle',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.largeTitle,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { largeTitleClassNames, useLargeTitleStyles } from './useLargeTitleStyles.styles';
 
 /**
  * Text preset component for the Large Title typography variant
  */
 export const LargeTitle: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useLargeTitleStyles,
   className: largeTitleClassNames.root,
   displayName: 'LargeTitle',
 });
diff --git a/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts b/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts
index 7845d85250ad95..e1b89327732a79 100644
--- a/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts
+++ b/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts
@@ -1 +1,2 @@
 export * from './LargeTitle';
+export { largeTitleClassNames } from './useLargeTitleStyles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts b/packages/react-components/react-text/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts
new file mode 100644
index 00000000000000..864703643dcc30
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const largeTitleClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-LargeTitle',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useLargeTitleStyles = makeStyles({
+  root: typographyStyles.largeTitle,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx b/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx
index 63a100459e9d9d..99c2e2ebfb2884 100644
--- a/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx
+++ b/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const subtitle1ClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Subtitle1',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.subtitle1,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { subtitle1ClassNames, useSubtitle1Styles } from './useSubtitle1Styles.styles';
 
 /**
  * Text preset component for the Subtitle1 typography variant
  */
 export const Subtitle1: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useSubtitle1Styles,
   className: subtitle1ClassNames.root,
   displayName: 'Subtitle1',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts b/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts
index 3673881ac6ea7a..a3be128b5d24f7 100644
--- a/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts
@@ -1 +1,2 @@
 export * from './Subtitle1';
+export { subtitle1ClassNames } from './useSubtitle1Styles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts
new file mode 100644
index 00000000000000..06f48757cca049
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const subtitle1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Subtitle1',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useSubtitle1Styles = makeStyles({
+  root: typographyStyles.subtitle1,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx b/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx
index f61e1ef8039bc8..34c1eb80c4e2e2 100644
--- a/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx
+++ b/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const subtitle2ClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Subtitle2',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.subtitle2,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { subtitle2ClassNames, useSubtitle2Styles } from './useSubtitle2Styles.styles';
 
 /**
  * Text preset component for the Subtitle2 typography variant
  */
 export const Subtitle2: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useSubtitle2Styles,
   className: subtitle2ClassNames.root,
   displayName: 'Subtitle2',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts b/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts
index 35d7ce8145e880..92a8c98a88cb23 100644
--- a/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts
@@ -1 +1,2 @@
 export * from './Subtitle2';
+export { subtitle2ClassNames } from './useSubtitle2Styles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts
new file mode 100644
index 00000000000000..9ce5de3a44f6ca
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const subtitle2ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Subtitle2',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useSubtitle2Styles = makeStyles({
+  root: typographyStyles.subtitle2,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx
index 7b4c7dfc9856b9..391b272a37e545 100644
--- a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx
+++ b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const subtitle2StrongerClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Subtitle2Stronger',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.subtitle2Stronger,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { subtitle2StrongerClassNames, useSubtitle2StrongerStyles } from './useSubtitle2Stronger.styles';
 
 /**
  * Text preset component for the Subtitle2Stronger typography variant
  */
 export const Subtitle2Stronger: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useSubtitle2StrongerStyles,
   className: subtitle2StrongerClassNames.root,
   displayName: 'Subtitle2Stronger',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts
index 44c03d2ae31aa0..4713f1e4097436 100644
--- a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts
@@ -1 +1,2 @@
 export * from './Subtitle2Stronger';
+export { subtitle2StrongerClassNames } from './useSubtitle2Stronger.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts
new file mode 100644
index 00000000000000..a0fbdcfb1b7083
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const subtitle2StrongerClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Subtitle2Stronger',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useSubtitle2StrongerStyles = makeStyles({
+  root: typographyStyles.subtitle2Stronger,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx b/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx
index d9e9e338d59b9e..5de7152c0f910a 100644
--- a/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx
+++ b/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const title1ClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Title1',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.title1,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { title1ClassNames, useTitle1Styles } from './useTitle1Styles.styles';
 
 /**
  * Text preset component for the Title 1 typography variant
  */
 export const Title1: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useTitle1Styles,
   className: title1ClassNames.root,
   displayName: 'Title1',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Title1/index.ts b/packages/react-components/react-text/src/components/presets/Title1/index.ts
index b32f898402c89b..acb670600bf467 100644
--- a/packages/react-components/react-text/src/components/presets/Title1/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Title1/index.ts
@@ -1 +1,2 @@
 export * from './Title1';
+export { title1ClassNames } from './useTitle1Styles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Title1/useTitle1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Title1/useTitle1Styles.styles.ts
new file mode 100644
index 00000000000000..126f5eda5accfa
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Title1/useTitle1Styles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const title1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title1',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useTitle1Styles = makeStyles({
+  root: typographyStyles.title1,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx b/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx
index 33eb812b34897c..9b3dce66f6a85e 100644
--- a/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx
+++ b/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const title2ClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Title2',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.title2,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { title2ClassNames, useTitle2Styles } from './useTitle2Styles.styles';
 
 /**
  * Text preset component for the Title 2 typography variant
  */
 export const Title2: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useTitle2Styles,
   className: title2ClassNames.root,
   displayName: 'Title2',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Title2/index.ts b/packages/react-components/react-text/src/components/presets/Title2/index.ts
index e6db0795e90e63..0fe89ad1bf5c32 100644
--- a/packages/react-components/react-text/src/components/presets/Title2/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Title2/index.ts
@@ -1 +1,2 @@
 export * from './Title2';
+export { title2ClassNames } from './useTitle2Styles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Title2/useTitle2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Title2/useTitle2Styles.styles.ts
new file mode 100644
index 00000000000000..0d6a78592c958a
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Title2/useTitle2Styles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const title2ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title2',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useTitle2Styles = makeStyles({
+  root: typographyStyles.title2,
+});
diff --git a/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx b/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx
index db0ec281c5bcdb..4144d1239aea83 100644
--- a/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx
+++ b/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx
@@ -1,26 +1,13 @@
 import type { FunctionComponent } from 'react';
-import { makeStyles } from '@griffel/react';
 import { createPreset } from '../createPreset';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { TextSlots, TextPresetProps } from '../../Text/Text.types';
-import { typographyStyles } from '@fluentui/react-theme';
-
-export const title3ClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Title3',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: typographyStyles.title3,
-});
+import type { TextPresetProps } from '../../Text/Text.types';
+import { title3ClassNames, useTitle3Styles } from './useTitle3Styles.styles';
 
 /**
  * Text preset component for the Title 3 typography variant
  */
 export const Title3: FunctionComponent<TextPresetProps> = createPreset({
-  useStyles,
+  useStyles: useTitle3Styles,
   className: title3ClassNames.root,
   displayName: 'Title3',
 });
diff --git a/packages/react-components/react-text/src/components/presets/Title3/index.ts b/packages/react-components/react-text/src/components/presets/Title3/index.ts
index ad1eaed1b185b2..96e536b87a53e5 100644
--- a/packages/react-components/react-text/src/components/presets/Title3/index.ts
+++ b/packages/react-components/react-text/src/components/presets/Title3/index.ts
@@ -1 +1,2 @@
 export * from './Title3';
+export { title3ClassNames } from './useTitle3Styles.styles';
diff --git a/packages/react-components/react-text/src/components/presets/Title3/useTitle3Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Title3/useTitle3Styles.styles.ts
new file mode 100644
index 00000000000000..26996a6eb02090
--- /dev/null
+++ b/packages/react-components/react-text/src/components/presets/Title3/useTitle3Styles.styles.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { TextSlots } from '../../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const title3ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title3',
+};
+
+/**
+ * Styles for the root slot
+ */
+export const useTitle3Styles = makeStyles({
+  root: typographyStyles.title3,
+});

From 5e7224b93cf7d9bfc7450c8f1fe59b70058ef1a3 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 27 Apr 2023 15:08:14 +0200
Subject: [PATCH 22/28] test: add cypress tests for scroll positions

---
 .../components/DrawerBody/DrawerBody.cy.tsx   | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx

diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx
new file mode 100644
index 00000000000000..2ded070a7f7950
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { mount } from '@cypress/react';
+import type {} from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+import { Drawer, DrawerBody } from '@fluentui/react-drawer';
+
+const mountFluent = (element: JSX.Element) => {
+  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
+};
+
+function assertScrollPosition(element: HTMLElement, position: number) {
+  expect(element.scrollTop).to.equal(position);
+}
+
+describe('DrawerBody', () => {
+  it('render drawer body component', () => {
+    mountFluent(<DrawerBody id="drawer-body" />);
+
+    cy.get('#drawer-body').should('exist');
+  });
+
+  it('scroll drawer body', () => {
+    const Example = () => (
+      <Drawer type="inline" open style={{ height: '200px' }}>
+        <DrawerBody id="drawer-body">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, animi? Quos, eum pariatur. Labore magni
+          vel doloremque reiciendis, consequatur porro explicabo similique harum illo, ad hic, earum nobis accusantium
+          quasi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident eligendi impedit culpa ea ipsum
+          voluptate inventore labore, delectus nam veniam dolor debitis dolorem blanditiis in, natus deleniti illo.
+          Asperiores, porro. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat obcaecati aperiam
+          recusandae. Pariatur dolorem cumque odit delectus voluptates ea ipsam culpa voluptate? Praesentium beatae
+          corrupti accusamus. Suscipit voluptas natus illo?
+        </DrawerBody>
+      </Drawer>
+    );
+
+    mountFluent(<Example />);
+
+    cy.get('#drawer-body')
+      .scrollTo('bottom')
+      .should($e => assertScrollPosition($e[0], $e[0].scrollHeight - $e[0].clientHeight));
+
+    cy.get('#drawer-body')
+      .scrollTo('top')
+      .should($e => assertScrollPosition($e[0], 0));
+  });
+});

From 7ea5df2ac89dc0ee92cbd7dcf809d40c958f4886 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 27 Apr 2023 15:50:43 +0200
Subject: [PATCH 23/28] fix: rename styles file to use the newer naming
 conventions

---
 .../react-drawer/src/components/DrawerBody/DrawerBody.tsx       | 2 +-
 .../react-drawer/src/components/DrawerBody/index.ts             | 2 +-
 .../{useDrawerBodyStyles.ts => useDrawerBodyStyles.styles.ts}   | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/react-components/react-drawer/src/components/DrawerBody/{useDrawerBodyStyles.ts => useDrawerBodyStyles.styles.ts} (100%)

diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx
index 54dc2c83c733bc..ced951f5b159c4 100644
--- a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx
+++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDrawerBody_unstable } from './useDrawerBody';
 import { renderDrawerBody_unstable } from './renderDrawerBody';
-import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles';
+import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';
 import type { DrawerBodyProps } from './DrawerBody.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/index.ts b/packages/react-components/react-drawer/src/components/DrawerBody/index.ts
index b8273e016d6ed6..17a23b055f990e 100644
--- a/packages/react-components/react-drawer/src/components/DrawerBody/index.ts
+++ b/packages/react-components/react-drawer/src/components/DrawerBody/index.ts
@@ -2,4 +2,4 @@ export * from './DrawerBody';
 export * from './DrawerBody.types';
 export * from './renderDrawerBody';
 export * from './useDrawerBody';
-export * from './useDrawerBodyStyles';
+export * from './useDrawerBodyStyles.styles';
diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.ts b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.ts
rename to packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts

From 1998266417c387820d4020bc72e2bc74dc1e48c7 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Thu, 27 Apr 2023 15:59:23 +0200
Subject: [PATCH 24/28] chore: upgrade devcontainer node version to 16 (#27716)

---
 .devcontainer/Dockerfile        | 2 +-
 .devcontainer/devcontainer.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
index 13ae7dd53e4f18..1ffe54fd051bc3 100644
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -1,7 +1,7 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile
 
 # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
-ARG VARIANT="14-bullseye"
+ARG VARIANT="16-bullseye"
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
 
 # [Optional] Uncomment this section to install additional OS packages.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 9239298f19fa90..2d7b3cdd017cd7 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -7,7 +7,7 @@
     // Update 'VARIANT' to pick a Node version: 16, 14, 12.
     // Append -bullseye or -buster to pin to an OS version.
     // Use -bullseye variants on local arm64/Apple Silicon.
-    "args": { "VARIANT": "14" }
+    "args": { "VARIANT": "16" }
   },
   // Set *default* container specific settings.json values on container create.
   "settings": {},

From 8f7667884c0d80e2dc376e72945ec33bdc0bc1fa Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 27 Apr 2023 16:01:09 +0200
Subject: [PATCH 25/28] fix: prevent elements from stretching

---
 .../src/components/Drawer/useDrawerStyles.styles.ts         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts b/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts
index 382b921157d606..0cb0c9d2d1f64e 100644
--- a/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts
+++ b/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts
@@ -26,12 +26,14 @@ const useStyles = makeStyles({
 
     [drawerCSSVars.borderRadius]: 0,
 
-    boxSizing: 'border-box',
     width: `var(${drawerCSSVars.size})`,
     maxWidth: 'calc(100vw - 48px)',
     height: 'auto',
+    boxSizing: 'border-box',
     display: 'flex',
     flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
     backgroundColor: tokens.colorNeutralBackground1,
   },
 
@@ -43,8 +45,6 @@ const useStyles = makeStyles({
 
   inline: {
     position: 'relative',
-    alignItems: 'stretch',
-    justifyContent: 'stretch',
   },
 
   leftDrawer: {

From 7035ce5a092e6a379c9bdf97b0fb5b77dee43f13 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 27 Apr 2023 16:02:51 +0200
Subject: [PATCH 26/28] feat: add support to override drawer styles

---
 .../react-drawer/src/components/Drawer/Drawer.tsx              | 3 +++
 .../src/CustomStyleHooksContext/CustomStyleHooksContext.ts     | 1 +
 2 files changed, 4 insertions(+)

diff --git a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx
index 1674263fc5202b..5982cd3abc98a1 100644
--- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx
+++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx
@@ -4,6 +4,7 @@ import { renderDrawer_unstable } from './renderDrawer';
 import { useDrawerStyles_unstable } from './useDrawerStyles.styles';
 import type { DrawerProps } from './Drawer.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.
@@ -12,6 +13,8 @@ export const Drawer: ForwardRefComponent<DrawerProps> = React.forwardRef((props,
   const state = useDrawer_unstable(props, ref);
 
   useDrawerStyles_unstable(state);
+  useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);
+
   return renderDrawer_unstable(state);
 });
 
diff --git a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
index 79b94e9913fe61..c0695054d26c97 100644
--- a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+++ b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
@@ -89,6 +89,7 @@ export type CustomStyleHooksContextValue = Partial<{
   useDataGridHeaderStyles_unstable: CustomStyleHook;
   useDataGridHeaderCellStyles_unstable: CustomStyleHook;
   useDataGridSelectionCellStyles_unstable: CustomStyleHook;
+  useDrawerStyles_unstable: CustomStyleHook;
   useDrawerBodyStyles_unstable: CustomStyleHook;
 }>;
 

From bf14755ef8beb13c52fd9f2e703d2b959d4bab79 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 27 Apr 2023 16:18:17 +0200
Subject: [PATCH 27/28] feat: add style overrides for upcoming drawer
 components

---
 ...ared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json

diff --git a/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json b/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json
new file mode 100644
index 00000000000000..7c672761835229
--- /dev/null
+++ b/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add style overrides for upcoming drawer components",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

From b2c81eb55b261d617d97090cbd1ccb1f2d299e63 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 27 Apr 2023 16:19:32 +0200
Subject: [PATCH 28/28] docs: update API

---
 .../react-shared-contexts/etc/react-shared-contexts.api.md  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
index 9f9695443505ce..34cfb47f5c4f08 100644
--- a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
+++ b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
@@ -92,6 +92,8 @@ export const CustomStyleHooksContext_unstable: React_2.Context<Partial<{
     useDataGridHeaderStyles_unstable: CustomStyleHook;
     useDataGridHeaderCellStyles_unstable: CustomStyleHook;
     useDataGridSelectionCellStyles_unstable: CustomStyleHook;
+    useDrawerStyles_unstable: CustomStyleHook;
+    useDrawerBodyStyles_unstable: CustomStyleHook;
 }> | undefined>;
 
 // @public (undocumented)
@@ -179,6 +181,8 @@ export type CustomStyleHooksContextValue_unstable = Partial<{
     useDataGridHeaderStyles_unstable: CustomStyleHook;
     useDataGridHeaderCellStyles_unstable: CustomStyleHook;
     useDataGridSelectionCellStyles_unstable: CustomStyleHook;
+    useDrawerStyles_unstable: CustomStyleHook;
+    useDrawerBodyStyles_unstable: CustomStyleHook;
 }>;
 
 // @internal (undocumented)
@@ -266,6 +270,8 @@ export const CustomStyleHooksProvider_unstable: React_2.Provider<Partial<{
     useDataGridHeaderStyles_unstable: CustomStyleHook;
     useDataGridHeaderCellStyles_unstable: CustomStyleHook;
     useDataGridSelectionCellStyles_unstable: CustomStyleHook;
+    useDrawerStyles_unstable: CustomStyleHook;
+    useDrawerBodyStyles_unstable: CustomStyleHook;
 }> | undefined>;
 
 // @internal (undocumented)