chore: disallow document and window via eslint for React

apps/perf-test-react-components/.eslintrc.json

@@ -3,6 +3,7 @@
   "root": true,
   "rules": {
     "@griffel/styles-file": "off",
-    "no-console": "off"
+    "no-console": "off",
+    "no-restricted-globals": "off"
   }
 }

apps/perf-test-react-components/src/scenarios/FluentProviderWithTheme.tsx

@@ -5,9 +5,11 @@ import { teamsLightTheme } from '@fluentui/react-theme';
 const LayoutShift: React.FunctionComponent = ({ children }) => {
   // eslint-disable-next-line no-restricted-properties
   React.useLayoutEffect(() => {
+    // eslint-disable-next-line no-restricted-globals
     if (document.body) {
       // Accessing the offsetWidth forces reflow (browser synchronously calculates style and layout.
       // This allows us to measure theme impact on the rendering performance.
+      // eslint-disable-next-line no-restricted-globals
       document.body.offsetWidth;
     }
   });

apps/perf-test-react-components/src/scenarios/MakeStyles.tsx

@@ -1,7 +1,9 @@
 import { mergeClasses, makeStyles, createDOMRenderer } from '@griffel/core';
 import * as React from 'react';
 
-const renderer = createDOMRenderer(document);
+const renderer =
+  // eslint-disable-next-line no-restricted-globals
+  createDOMRenderer(document);
 
 const useStyles = makeStyles({
   view: {

apps/perf-test/.eslintrc.json

@@ -2,6 +2,7 @@
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
   "root": true,
   "rules": {
-    "no-console": "off"
+    "no-console": "off",
+    "no-restricted-globals": "off"
   }
 }

apps/pr-deploy-site/.eslintrc.json

@@ -12,6 +12,7 @@
         // turn off conflicting or unwanted rules from normal set
         "curly": "off",
         "no-var": "off",
+        "no-restricted-globals": "off",
         "vars-on-top": "off",
         "prefer-arrow-callback": "off"
       }

apps/public-docsite-resources/.eslintrc.json

@@ -5,6 +5,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-member-accessibility": "off",
     "@typescript-eslint/member-ordering": "off",
-    "deprecation/deprecation": "off"
+    "deprecation/deprecation": "off",
+    "no-restricted-globals": "off"
   }
 }

apps/public-docsite-v9/.eslintrc.json

@@ -5,6 +5,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/jsx-no-bind": "off",
     "deprecation/deprecation": "off",
-    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }]
+    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }],
+    "no-restricted-globals": "off"
   }
 }

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/useDebounce.ts

@@ -6,6 +6,7 @@ export const useDebounce = (fn: (...args: unknown[]) => void, duration: number)
   return React.useCallback(
     (...args: unknown[]) => {
       clearTimeout(timeoutRef.current);
+      // eslint-disable-next-line no-restricted-globals
       timeoutRef.current = window.setTimeout(() => {
         fn(...args);
       }, duration);

apps/public-docsite-v9/src/DocsComponents/Toc.stories.tsx

@@ -99,6 +99,7 @@ export const Toc = ({ stories }: { stories: TocItem[] }) => {
     );
 
     stories.forEach(link => {
+      // eslint-disable-next-line no-restricted-globals
       const element = document.getElementById(nameToHash(link.name));
       if (element) {
         observer.observe(element);

apps/public-docsite/.eslintrc.json

@@ -5,6 +5,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "deprecation/deprecation": "off",
     "import/no-webpack-loader-syntax": "off", // ok in this project
+    "no-restricted-globals": "off",
     "prefer-const": "off",
     "react/jsx-no-bind": "off"
   }

apps/react-18-tests-v8/.eslintrc.json

@@ -1,5 +1,7 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
   "root": true,
-  "rules": {}
+  "rules": {
+    "no-restricted-globals": "off"
+  }
 }

apps/react-18-tests-v8/src/index.tsx

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
 
-const root = createRoot(document.getElementById('root') as HTMLElement);
+const root = createRoot(
+  // eslint-disable-next-line no-restricted-globals
+  document.getElementById('root') as HTMLElement,
+);
 root.render(
   <React.StrictMode>
     <App />

apps/react-18-tests-v9/.eslintrc.json

@@ -1,5 +1,7 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
   "root": true,
-  "rules": {}
+  "rules": {
+    "no-restricted-globals": "off"
+  }
 }

apps/react-18-tests-v9/src/index.tsx

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
 
-const root = createRoot(document.getElementById('root') as HTMLElement);
+const root = createRoot(
+  // eslint-disable-next-line no-restricted-globals
+  document.getElementById('root') as HTMLElement,
+);
 root.render(
   <React.StrictMode>
     <App />

apps/recipes-react-components/.eslintrc.json

@@ -7,6 +7,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/jsx-no-bind": "off",
     "deprecation/deprecation": "off",
-    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }]
+    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }],
+    "no-restricted-globals": "off"
   }
 }

apps/ssr-tests-v9/.eslintrc.json

@@ -2,6 +2,7 @@
   "extends": ["plugin:@fluentui/eslint-plugin/node"],
   "root": true,
   "rules": {
-    "import/no-extraneous-dependencies": ["error", { "packageDir": ["../../", "./"] }]
+    "import/no-extraneous-dependencies": ["error", { "packageDir": ["../../", "./"] }],
+    "no-restricted-globals": "off"
   }
 }

apps/stress-test/.eslintrc.json

@@ -2,6 +2,7 @@
   "extends": ["plugin:@fluentui/eslint-plugin/node"],
   "root": true,
   "rules": {
-    "import/no-extraneous-dependencies": ["error", { "packageDir": ["../../", "./"] }]
+    "import/no-extraneous-dependencies": ["error", { "packageDir": ["../../", "./"] }],
+    "no-restricted-globals": "off"
   }
 }

apps/theming-designer/.eslintrc.json

@@ -4,6 +4,7 @@
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
     "deprecation/deprecation": "off",
+    "no-restricted-globals": "off",
     "prefer-const": "off"
   }
 }

apps/vr-tests-react-components/.eslintrc.json

@@ -8,6 +8,7 @@
     "@typescript-eslint/naming-convention": "off",
     "@typescript-eslint/jsx-no-bind": "off",
     "deprecation/deprecation": "off",
-    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }]
+    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }],
+    "no-restricted-globals": "off"
   }
 }

apps/vr-tests/.eslintrc.json

@@ -5,6 +5,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/jsx-no-bind": "off",
     "deprecation/deprecation": "off",
-    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }]
+    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }],
+    "no-restricted-globals": "off"
   }
 }

change/@fluentui-cra-template-e9bc2562-933b-49d3-b708-7115c08a4810.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disable lint for no-restricted-globals",
+  "packageName": "@fluentui/cra-template",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-dom-utilities-18f5f20c-92d5-4e9f-bd2d-494657065c63.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: allow `document` and `window` globals to be passed in where needed.",
+  "packageName": "@fluentui/dom-utilities",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-eslint-plugin-12ef753c-74ec-4c3c-8e65-e5121c05bde3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disable global `document` and `window` access for React.",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-global-context-6f67cc92-8e93-4c13-9e33-cc0c6d64fb49.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: disable lint for no-restricted-globals",
+  "packageName": "@fluentui/global-context",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-merge-styles-41e63bcf-870e-4e2b-bef8-645de9934120.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: address lint for restricted globals",
+  "packageName": "@fluentui/merge-styles",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-public-docsite-setup-99131765-5261-4a19-9b79-7a22a24cdf75.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: lint errors",
+  "packageName": "@fluentui/public-docsite-setup",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-118c9f1a-8f95-44bc-9e6c-f1e1258a8aaf.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: use `document` and `window` globals from context",
+  "packageName": "@fluentui/react",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-calendar-compat-c72f4681-3f40-49bc-9184-195307bcda06.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use globals from context",
+  "packageName": "@fluentui/react-calendar-compat",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-datepicker-compat-0fe329a8-786d-4a84-af00-4bb8afba2a3d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disable lint for no-restricted-globals",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-file-type-icons-05eaab0e-2b0a-4cf7-8b58-5da26471a17a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: update `getFileTypeIconsSuffix()` to take optional parameter for `window` reference.",
+  "packageName": "@fluentui/react-file-type-icons",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-focus-de2be8a6-f279-4e12-9677-371c811e5831.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: allow `document` and `window` globals to be passed in where needed.",
+  "packageName": "@fluentui/react-focus",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-motion-preview-b9bda7bc-5381-412e-9808-2c0a86796435.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disable lint for no-retricted-globals",
+  "packageName": "@fluentui/react-motion-preview",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-44f55996-a722-481d-bec7-a74dcaf5eeaa.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disable lint for no-restricted-globals",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-0dc8f037-947b-456a-bd8e-f93489587224.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: update to get `window` reference via `getWindow()`.",
+  "packageName": "@fluentui/react-utilities",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-window-provider-6899238f-933b-4bb8-9c5e-27c84a62b74c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: lint errors and explicit exports",
+  "packageName": "@fluentui/react-window-provider",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-set-version-2eb367d7-e877-4209-9ae4-72a3c1096a55.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: lint exception comment",
+  "packageName": "@fluentui/set-version",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-utilities-530b2e82-88d8-48c2-aba1-1b791c2bed2c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: allow `document` and `window` globals to be passed in where needed.",
+  "packageName": "@fluentui/utilities",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/cra-template/template/src/index.tsx

@@ -13,7 +13,11 @@ mergeStyles({
   },
 });
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <App />,
+  // eslint-disable-next-line no-restricted-globals
+  document.getElementById('root'),
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

packages/dom-utilities/etc/dom-utilities.api.md

@@ -11,10 +11,10 @@ export const DATA_PORTAL_ATTRIBUTE = "data-portal-element";
 export function elementContains(parent: HTMLElement | null, child: HTMLElement | null, allowVirtualParents?: boolean): boolean;
 
 // @public
-export function elementContainsAttribute(element: HTMLElement, attribute: string): string | null;
+export function elementContainsAttribute(element: HTMLElement, attribute: string, doc?: Document): string | null;
 
 // @public
-export function findElementRecursive(element: HTMLElement | null, matchFunction: (element: HTMLElement) => boolean): HTMLElement | null;
+export function findElementRecursive(element: HTMLElement | null, matchFunction: (element: HTMLElement) => boolean, doc?: Document): HTMLElement | null;
 
 // @public
 export function getChildren(parent: HTMLElement, allowVirtualChildren?: boolean): HTMLElement[];
@@ -38,15 +38,14 @@ export interface IVirtualElement extends HTMLElement {
 }
 
 // @public
-export function portalContainsElement(target: HTMLElement, parent?: HTMLElement): boolean;
+export function portalContainsElement(target: HTMLElement, parent?: HTMLElement, doc?: Document): boolean;
 
 // @public
 export function setPortalAttribute(element: HTMLElement): void;
 
 // @public
 export function setVirtualParent(child: HTMLElement, parent: HTMLElement | null): void;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```

packages/dom-utilities/src/elementContainsAttribute.ts

@@ -6,8 +6,12 @@ import { findElementRecursive } from './findElementRecursive';
  * @param attribute - the attribute to search for
  * @returns the value of the first instance found
  */
-export function elementContainsAttribute(element: HTMLElement, attribute: string): string | null {
-  const elementMatch = findElementRecursive(element, (testElement: HTMLElement) => testElement.hasAttribute(attribute));
+export function elementContainsAttribute(element: HTMLElement, attribute: string, doc?: Document): string | null {
+  const elementMatch = findElementRecursive(
+    element,
+    (testElement: HTMLElement) => testElement.hasAttribute(attribute),
+    doc,
+  );
 
   return elementMatch && elementMatch.getAttribute(attribute);
 }

packages/dom-utilities/src/findElementRecursive.ts

@@ -8,8 +8,11 @@ import { getParent } from './getParent';
 export function findElementRecursive(
   element: HTMLElement | null,
   matchFunction: (element: HTMLElement) => boolean,
+  doc?: Document,
 ): HTMLElement | null {
-  if (!element || element === document.body) {
+  // eslint-disable-next-line no-restricted-globals
+  doc ??= document;
+  if (!element || element === doc.body) {
     return null;
   }
   return matchFunction(element) ? element : findElementRecursive(getParent(element), matchFunction);