fix: add missing "use client" directive to client components and styles

change/@fluentui-eslint-plugin-react-components-a42b3f04-d734-4f80-a860-34b0ccbebba0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/eslint-plugin-react-components",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-global-context-265c61ea-e1cf-47bc-9769-5db14b86d5f9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/global-context",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charts-3bff1def-f8cd-4d1d-9fe7-1f2e2af1be73.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-charts",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-2c645ca9-9895-4fcd-8b60-fa3dcc0603ba.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-dialog",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-icons-compat-18f87f14-3d27-4f69-a8f2-b07ab4c0e970.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add missing \"use client\" directive to getWindow utility files",
+  "packageName": "@fluentui/react-icons-compat",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-migration-v0-v9-7b3fd831-aff7-4c4b-b6f5-69c0f2f0289b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-migration-v8-v9-322dd77a-8973-4830-99c2-9f817dad99fb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-nav-21d41252-e3c6-48f0-89a0-4b1ef7eb9436.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-nav",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-overflow-5c5a44b8-b8e6-4144-80db-ef13594286ff.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-overflow",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-portal-f67f8efe-1b1c-49ca-805d-718342d2402d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-portal",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-positioning-b7699d36-6e35-4f60-811c-4e799450b15e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-positioning",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-provider-cdafb819-6857-4978-8d87-c28d58616650.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-provider",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-7440097b-04fc-4e98-933e-9a13641937a8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tag-picker-585ccfde-a4fb-4ddb-bb0e-6e3e0bcaba74.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-text-6f6c2fc2-3bba-4ce8-ab7c-5e62e2e5c271.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-text",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toast-4efa9a56-f4e2-4466-8a6d-3018db34b7dc.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-toast",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-9eeaab33-3389-450e-9eca-9a9245b4faf1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add  missing \"use client\" directive to client components and styles",
+  "packageName": "@fluentui/react-utilities",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/src/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { makeStyles } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 

packages/charts/react-charts/library/src/utilities/getWindow.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { canUseDOM } from '@fluentui/react-utilities';
 
 let _window: Window | undefined = undefined;

packages/eslint-plugin/src/configs/react/index.js

@@ -6,6 +6,7 @@ const reactCompilerPlugin = require('eslint-plugin-react-compiler');
 const { __internal } = require('../../internal');
 const { createReactCrossVersionRules } = require('../../shared/react-cross-version-rules');
 const { defineConfig } = require('eslint/config');
+const { testFiles } = require('../../utils/configHelpers');
 
 /** @type {import("eslint").Linter.RulesRecord} */
 const typeAwareRules = {
@@ -105,7 +106,7 @@ module.exports = defineConfig(
   },
 
   {
-    files: ['**/*.test.{ts,tsx}'],
+    files: [...testFiles],
     rules: {
       'react-compiler/react-compiler': 'off',
       '@fluentui/react-components/enforce-use-client': 'off',

packages/react-components/eslint-plugin-react-components/README.md

@@ -119,6 +119,7 @@ The rule looks for any of the following client-only features:
 - Custom hooks (functions whose name starts with `use` and are not in the safe set: `use`, `useId`)
 - JSX event handler props (properties starting with `on` followed by a capital letter, like `onClick`)
 - Direct references to browser globals (`window`, `document`, `navigator`, `localStorage`, `sessionStorage`, `history`, `location`)
+- SSR-unsafe functions that internally use browser APIs (e.g. `canUseDOM()`, `makeStyles()`, `makeResetStyles()`, `makeStaticStyles()`)
 
 If at least one feature is present, the directive must be the very first statement in the file. If no features are found, any existing `'use client'` directive will be reported as unnecessary and auto-fixed.
 
@@ -164,6 +165,47 @@ export function add(a: number, b: number) {
 }
 ```
 
+#### ❌ Don't (SSR-unsafe function at module scope)
+
+```ts
+import * as React from 'react';
+import { canUseDOM } from '../ssr/index';
+
+// canUseDOM() accesses browser APIs internally
+export const useIsomorphicLayoutEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;
+```
+
+#### ✅ Do (directive added for SSR-unsafe function)
+
+```ts
+'use client';
+import * as React from 'react';
+import { canUseDOM } from '../ssr/index';
+
+export const useIsomorphicLayoutEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;
+```
+
+#### ❌ Don't (Griffel styling function at module scope)
+
+```ts
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: { backgroundColor: 'red' },
+});
+```
+
+#### ✅ Do (directive added for Griffel function)
+
+```ts
+'use client';
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: { backgroundColor: 'red' },
+});
+```
+
 No options – enable to enforce consistent usage of the directive.
 
 ## License