Disallow window and document access for @fluentui/react and related packages.

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

@@ -13,7 +13,8 @@
         "curly": "off",
         "no-var": "off",
         "vars-on-top": "off",
-        "prefer-arrow-callback": "off"
+        "prefer-arrow-callback": "off",
+        "no-restricted-globals": "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/.eslintrc.json

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

apps/theming-designer/.eslintrc.json

@@ -4,6 +4,7 @@
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
     "deprecation/deprecation": "off",
-    "prefer-const": "off"
+    "prefer-const": "off",
+    "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-dom-utilities-3c9941d3-fd1e-4a07-85f3-e239836f2cfc.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disallow document and window access",
+  "packageName": "@fluentui/dom-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-eslint-plugin-7df50bae-6d4c-4022-ba1c-ff08e41f8c68.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: add restricted globals for @fluentui/react and related packages",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-merge-styles-bb6fa0b4-0bfd-45c1-8ab9-140b968c7f9b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disallow document and window access",
+  "packageName": "@fluentui/merge-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-21dccde6-b184-46e2-8427-18a9d856443c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disallow document and window access",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-file-type-icons-2fbf5c3f-d2bf-43cf-942b-64122c56a603.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disallow document and window access",
+  "packageName": "@fluentui/react-file-type-icons",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-focus-7e69e339-9791-4ebc-8191-6bace7a0f0cb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disallow document and window access",
+  "packageName": "@fluentui/react-focus",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-window-provider-e664cb1c-eaa1-4854-997f-0b08b0feecda.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: clean up exports",
+  "packageName": "@fluentui/react-window-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-utilities-c5fe63ad-e579-4a80-b09d-ed584717a112.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disallow document and window access",
+  "packageName": "@fluentui/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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);

packages/dom-utilities/src/portalContainsElement.ts

@@ -9,10 +9,11 @@ import { DATA_PORTAL_ATTRIBUTE } from './setPortalAttribute';
  * @param parent - Optional parent perspective. Search for containing portal stops at parent
  * (or root if parent is undefined or invalid.)
  */
-export function portalContainsElement(target: HTMLElement, parent?: HTMLElement): boolean {
+export function portalContainsElement(target: HTMLElement, parent?: HTMLElement, doc?: Document): boolean {
   const elementMatch = findElementRecursive(
     target,
     (testElement: HTMLElement) => parent === testElement || testElement.hasAttribute(DATA_PORTAL_ATTRIBUTE),
+    doc,
   );
   return elementMatch !== null && elementMatch.hasAttribute(DATA_PORTAL_ATTRIBUTE);
 }

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

@@ -1,6 +1,7 @@
 // @ts-check
-
+const configHelpers = require('../utils/configHelpers');
 const path = require('path');
+const { reactLegacy: restrictedGlobals } = require('./restricted-globals');
 
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
@@ -9,7 +10,16 @@ module.exports = {
   rules: {
     'jsdoc/check-tag-names': 'off',
     '@griffel/no-shorthands': 'off',
-    'no-restricted-globals': 'off',
+    'no-restricted-globals': restrictedGlobals,
   },
-  overrides: [],
+  overrides: [
+    {
+      // Test overrides
+      files: [...configHelpers.testFiles, '**/*.stories.tsx'],
+      rules: {
+        'no-restricted-globals': 'off',
+        'react/jsx-no-bind': 'off',
+      },
+    },
+  ],
 };

packages/eslint-plugin/src/configs/restricted-globals.js

@@ -239,6 +239,18 @@
 //   'onwheel',
 // ];
 
+const reactLegacy = [
+  'error',
+  {
+    name: 'window',
+    message: 'Get a reference to `window` via context.',
+  },
+  {
+    name: 'document',
+    message: 'Get a reference to `document` via context.',
+  },
+];
+
 const react = [
   'error',
   {
@@ -258,5 +270,6 @@ const react = [
 ];
 
 module.exports = {
+  reactLegacy,
   react,
 };

packages/merge-styles/src/StyleOptionsState.ts

@@ -15,8 +15,11 @@ export function setRTL(isRTL: boolean): void {
 export function getRTL(): boolean {
   if (_rtl === undefined) {
     _rtl =
+      // eslint-disable-next-line no-restricted-globals
       typeof document !== 'undefined' &&
+      // eslint-disable-next-line no-restricted-globals
       !!document.documentElement &&
+      // eslint-disable-next-line no-restricted-globals
       document.documentElement.getAttribute('dir') === 'rtl';
   }
   return _rtl;

packages/merge-styles/src/Stylesheet.ts

@@ -1,3 +1,6 @@
+/* eslint no-restricted-globals: 0 */
+// globals in stylesheets will be addressed as part of shadow DOM work.
+// See: https://github.com/microsoft/fluentui/issues/28058
 import { IStyle } from './IStyle';
 
 export const InjectionMode = {

packages/merge-styles/src/getVendorSettings.ts

@@ -9,6 +9,7 @@ let _vendorSettings: IVendorSettings | undefined;
 
 export function getVendorSettings(): IVendorSettings {
   if (!_vendorSettings) {
+    // eslint-disable-next-line no-restricted-globals
     const doc = typeof document !== 'undefined' ? document : undefined;
     const nav = typeof navigator !== 'undefined' ? navigator : undefined;
     const userAgent = nav?.userAgent?.toLowerCase();

packages/react-charting/.eslintrc.json

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

packages/react-docsite-components/.eslintrc.json

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

packages/react-examples/.eslintrc.json

@@ -4,6 +4,7 @@
   "rules": {
     "import/no-webpack-loader-syntax": "off",
     "@typescript-eslint/no-explicit-any": "off",
-    "no-alert": "off"
+    "no-alert": "off",
+    "no-restricted-globals": "off"
   }
 }

packages/react-experiments/.eslintrc.json

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

packages/react-file-type-icons/src/getFileTypeIconProps.ts

@@ -160,8 +160,14 @@ export function getFileTypeIconNameFromExtensionOrType(
   return iconBaseName || GENERIC_FILE;
 }
 
-export function getFileTypeIconSuffix(size: FileTypeIconSize, imageFileType: ImageFileType = 'svg'): string {
-  let devicePixelRatio: number = window.devicePixelRatio;
+export function getFileTypeIconSuffix(
+  size: FileTypeIconSize,
+  imageFileType: ImageFileType = 'svg',
+  win?: Window,
+): string {
+  // eslint-disable-next-line no-restricted-globals
+  win ??= window;
+  let devicePixelRatio: number = win.devicePixelRatio;
   let devicePixelRatioSuffix = ''; // Default is 1x
 
   // SVGs scale well, so you can generally use the default image.

packages/react-focus/src/components/FocusZone/FocusZone.tsx

@@ -59,12 +59,14 @@ function raiseClickFromKeyboardEvent(target: Element, ev?: React.KeyboardEvent<H
       cancelable: ev?.cancelable,
     });
   } else {
+    // eslint-disable-next-line no-restricted-globals
     event = document.createEvent('MouseEvents');
     // eslint-disable-next-line deprecation/deprecation
     event.initMouseEvent(
       'click',
       ev ? ev.bubbles : false,
       ev ? ev.cancelable : false,
+      // eslint-disable-next-line no-restricted-globals
       window, // not using getWindow() since this can only be run client side
       0, // detail
       0, // screen x

packages/react-monaco-editor/.eslintrc.json

@@ -2,6 +2,7 @@
   "extends": ["plugin:@fluentui/eslint-plugin/react--legacy"],
   "root": true,
   "rules": {
-    "import/no-webpack-loader-syntax": "off" // ok in this project
+    "import/no-webpack-loader-syntax": "off", // ok in this project
+    "no-restricted-globals": "off"
   }
 }

packages/react-window-provider/src/index.ts

@@ -1,3 +1,10 @@
-export * from './WindowProvider';
+export {
+  // eslint-disable-next-line @fluentui/ban-context-export
+  WindowContext,
+  useWindow,
+  useDocument,
+  WindowProvider,
+} from './WindowProvider';
+export type { WindowProviderProps } from './WindowProvider';
 
 import './version';