Change files

apps/codesandbox-react-template/src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {
-  Fabric,
+  ThemeProvider,
   Checkbox,
   ChoiceGroup,
   Dropdown,
@@ -42,7 +42,7 @@ function start(): void {
   }
 
   ReactDOM.render(
-    <Fabric>
+    <ThemeProvider>
       <Stack gap={8}>
         <Checkbox label="Unchecked checkbox (uncontrolled)" />
         <ChoiceGroup defaultSelectedKey="B" options={choicegroupOptions} label="Pick One" required />
@@ -56,7 +56,7 @@ function start(): void {
           styles={dropdownStyles}
         />
       </Stack>
-    </Fabric>,
+    </ThemeProvider>,
     _rootDiv,
   );
 }

apps/pr-deploy-site/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "clean": "just-scripts clean",
     "generate:site": "just-scripts generate:site",
-    "lint": "eslint --ext .js,.ts ."
+    "lint": "eslint --ext .js,.ts --cache ."
   },
   "license": "MIT",
   "devDependencies": {

change/@fluentui-babel-make-styles-2ef10ec4-234c-42f4-b437-453bc28bea93.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Remove unused eslint-disables",
+  "packageName": "@fluentui/babel-make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-eslint-plugin-9cd92621-624a-4360-a184-5c6acc542fa2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update dependencies and remove eslint@6 from peer deps",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-foundation-legacy-7575028c-16c0-40d9-adf8-a20401e679ca.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Mark old ThemeProvider as deprecated to avoid confusion",
+  "packageName": "@fluentui/foundation-legacy",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-69e887fa-7196-4231-8a45-a673a0a5798e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update eslint-disables and rename a type param to avoid shadowing (does not affect consumers)",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-examples-3814d184-6fa6-4370-b783-8bfa8b0a4bd4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update eslint overrides in examples; replace some Fabric and Customizer usage with ThemeProvider",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-monaco-editor-d8b0f947-e58a-4398-b408-b4d2f62c447a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update demo page to use ThemeProvider not Fabric",
+  "packageName": "@fluentui/react-monaco-editor",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-positioning-c9e5b414-7605-494f-bffc-da67de90434f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Remove unused eslint-disable",
+  "packageName": "@fluentui/react-positioning",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-utilities-edc73cc6-4a60-44f5-9572-20839cf8f04f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "ComponentState: fix shadowing and doc syntax for type params",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-utilities-3f648248-f47c-4f53-937e-bad736868c1c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update eslint-disables in tests",
+  "packageName": "@fluentui/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-web-components-7e5e411d-c0e3-4394-8cc0-1e1b4d9ba7c9.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Remove unused import",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -103,6 +103,7 @@
     "cypress-real-events": "1.2.0",
     "chalk": "2.4.2",
     "danger": "^6.0.5",
+    "eslint": "7.25.0",
     "eslint-plugin-es": "4.1.0",
     "file-loader": "6.2.0",
     "gulp": "^4.0.2",
@@ -167,6 +168,9 @@
   "resolutions": {
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/experimental-utils": "4.22.0",
+    "@typescript-eslint/parser": "4.22.0",
     "eslint": "^7.1.0",
     "//": "pretty-format contains typing only supported by TS 3.8+ remove when support in this repo is available",
     "@testing-library/dom": "7.22.3",

packages/babel-make-styles/src/plugin.ts

@@ -440,7 +440,6 @@ export const plugin = declare<never, PluginObj<BabelPluginState>>(api => {
             const nodePath = styleNode.nodePath;
 
             if (styleNode.kind === 'SPREAD') {
-              // eslint-disable-next-line no-shadow
               const evaluationResult = (nodePath.get('argument') as NodePath<t.Expression>).evaluate();
 
               if (!evaluationResult.confident) {
@@ -450,7 +449,6 @@ export const plugin = declare<never, PluginObj<BabelPluginState>>(api => {
               }
 
               const stylesBySlots: Record<string, MakeStyles> = evaluationResult.value;
-              // eslint-disable-next-line no-shadow
               const resolvedStyles: ResolvedStylesBySlots<string> = {};
 
               Object.keys(stylesBySlots).forEach(slotName => {

packages/eslint-plugin/package.json

@@ -9,29 +9,29 @@
   },
   "license": "MIT",
   "scripts": {
-    "lint": "eslint --ext .js src"
+    "build": "tsc --noEmit",
+    "lint": "eslint --ext .js --cache ."
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^3.4.0",
-    "@typescript-eslint/experimental-utils": "^3.4.0",
-    "@typescript-eslint/parser": "^3.4.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/experimental-utils": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-plugin-deprecation": "^1.1.0",
-    "eslint-plugin-import": "^2.21.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-deprecation": "^1.2.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^23.13.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.8",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jju": "^1.4.0"
   },
   "devDependencies": {
-    "@types/eslint": "^7.2.0",
-    "eslint": "^7.1.0"
+    "@types/eslint": "7.2.10"
   },
   "peerDependencies": {
-    "eslint": "^6.0.0 || ^7.0.0",
+    "eslint": "^7.0.0",
     "typescript": "^4.1.0"
   },
   "files": [

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

@@ -1,6 +1,10 @@
 // @ts-check
+const fs = require('fs');
+const path = require('path');
 const configHelpers = require('../utils/configHelpers');
 
+const gitRoot = configHelpers.findGitRoot();
+
 /** @type {import("eslint").Linter.Config} */
 const config = {
   extends: [
@@ -21,7 +25,7 @@ const config = {
     'import/resolver': {
       typescript: {
         alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory
-        directory: process.cwd(),
+        project: [path.join(process.cwd(), 'tsconfig.json'), path.join(gitRoot, 'tsconfig.json')].filter(fs.existsSync),
       },
     },
   },
@@ -304,13 +308,15 @@ const getOverrides = () => [
           ],
         },
       ],
+      '@typescript-eslint/no-shadow': 'error',
 
       // permanently disable due to using other rules which do the same thing
       camelcase: 'off', // redundant with @typescript-eslint/naming-convention
 
       // permanently disable due to improper TS handling or unnecessary for TS
       // (and not covered by plugin:@typescript-eslint/eslint-recommended)
       'no-empty-function': 'off',
+      'no-shadow': 'off',
       'no-unused-vars': 'off',
       'react/jsx-filename-extension': 'off',
     },
@@ -360,12 +366,7 @@ const getOverrides = () => [
   {
     files: [...configHelpers.devDependenciesFiles],
     rules: {
-      'import/no-extraneous-dependencies': [
-        'error',
-        {
-          packageDir: [process.cwd(), configHelpers.findGitRoot()],
-        },
-      ],
+      'import/no-extraneous-dependencies': ['error', { packageDir: [process.cwd(), gitRoot] }],
     },
   },
 ];

packages/eslint-plugin/src/rules/no-visibility-modifiers.js

@@ -1,5 +1,5 @@
 // @ts-check
-/** @type {*} */
+// @ts-ignore
 const util = require('@typescript-eslint/eslint-plugin/dist/util');
 const { AST_NODE_TYPES } = require('@typescript-eslint/experimental-utils');
 const createRule = require('../utils/createRule');

packages/eslint-plugin/jsconfig.json → packages/eslint-plugin/tsconfig.json

@@ -1,10 +1,14 @@
 {
   "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
     "checkJs": true,
     "module": "commonjs",
     "moduleResolution": "node",
     "noUnusedLocals": true,
-    "strict": true
+    "skipLibCheck": true,
+    "strict": true,
+    "types": []
   },
   "include": ["src/**/*"]
 }

packages/fluentui/docs/src/examples/components/Pill/Variations/PillExampleActionable.tsx

@@ -5,6 +5,7 @@ const PillActionableExample = () => (
   <Pill
     actionable
     onDismiss={(e, data) => {
+      // eslint-disable-next-line no-console
       console.log(e, data);
     }}
   >

packages/fluentui/docs/src/types.ts

@@ -71,6 +71,7 @@ export type KnobGeneratorOptions = {
 };
 export type KnobDefinition = UseKnobOptions<any> & { hook: Function };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export type KnobGenerator<T> = (options: KnobGeneratorOptions) => KnobDefinition;
 
 export type KnobComponentGenerators<P> = Partial<Record<keyof P, KnobGenerator<any>>>;

packages/fluentui/react-bindings/src/compose/consts.ts

@@ -80,7 +80,12 @@ export type Input<TElementType extends React.ElementType = 'div', TProps = {}> =
   | InputComposeComponent<TProps>
   | ComposeRenderFunction<TElementType, TProps & { as?: React.ElementType }>;
 
-export type ComposeRenderFunction<TElementType extends React.ElementType = 'div', TProps = {}, _TState = TProps> = (
+export type ComposeRenderFunction<
+  TElementType extends React.ElementType = 'div',
+  TProps = {},
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _TState = TProps
+> = (
   props: TProps,
   ref: React.Ref<TElementType extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[TElementType] : TElementType>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/fluentui/react-builder/src/components/Designer.tsx

@@ -323,17 +323,14 @@ export const Designer: React.FunctionComponent = () => {
     },
   };
 
-  const handleKeyDown = React.useCallback(
-    (e: KeyboardEvent) => {
-      let command = '';
-      command += e.altKey ? 'Alt+' : '';
-      command += e.ctrlKey || e.metaKey ? 'Ctrl+' : '';
-      command += e.shiftKey ? 'Shift+' : '';
-      command += e.key;
-      hotkeys.hasOwnProperty(command) && hotkeys[command]();
-    },
-    [hotkeys],
-  );
+  const handleKeyDown = (e: KeyboardEvent) => {
+    let command = '';
+    command += e.altKey ? 'Alt+' : '';
+    command += e.ctrlKey || e.metaKey ? 'Ctrl+' : '';
+    command += e.shiftKey ? 'Shift+' : '';
+    command += e.key;
+    hotkeys.hasOwnProperty(command) && hotkeys[command]();
+  };
 
   const handleOpenAddComponentDialog = React.useCallback(
     (uuid: string, where: string) => {

packages/fluentui/react-builder/src/components/List.tsx

@@ -14,7 +14,7 @@ export type ListProps = {
 export const List: React.FunctionComponent<ListProps> = ({ onDragStart, style }) => {
   const [filter, setFilter] = React.useState<string>('');
 
-  const filterRegexp = new RegExp(filter, 'i');
+  const filterRegexp = React.useMemo(() => new RegExp(filter, 'i'), [filter]);
 
   const handleMouseDown = React.useCallback(
     componentInfo => e => {

packages/fluentui/react-northstar/.eslintrc.json

@@ -10,9 +10,13 @@
     },
     {
       "files": "src/**/*.{ts,tsx}",
+      "parserOptions": {
+        "lib": ["es2015", "dom"]
+      },
       "globals": {
         "document": "off",
-        "window": "off"
+        "window": "off",
+        "JSX": "readonly"
       },
       "rules": {
         "no-undef": "error"

packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx

@@ -166,6 +166,9 @@ export const Datepicker: ComponentWithAs<'div', DatepickerProps> &
   setStart();
   const inputRef = React.useRef<HTMLElement>();
 
+  // FIXME: This object is created every render, causing a cascade of useCallback/useEffect re-runs.
+  // Needs to be reworked by someone who understands the intent for when various updates ought to happen.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const dateFormatting: ICalendarStrings = {
     formatDay: props.formatDay,
     formatYear: props.formatYear,

packages/fluentui/react-northstar/src/components/Design/Design.tsx

@@ -18,6 +18,7 @@ export type DesignProps = {
 /**
  * The Design component provides a theme safe subset of CSS for designing layouts.
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function Design<DesignProps>({ config, children }) {
   const context = useFluentContext();
   const getConfig = React.useCallback(() => config, [config]);

packages/fluentui/react-northstar/test/utils/withProvider.tsx

@@ -24,6 +24,7 @@ export const EmptyThemeProvider: React.FunctionComponent<{
   return <Unstable_FluentContextProvider value={value}>{children}</Unstable_FluentContextProvider>;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const mountWithProvider = <C extends React.Component, P = C['props'], S = C['state']>(
   node: React.ReactElement<P>,
   options?: MountRendererProps,
@@ -34,6 +35,7 @@ export const mountWithProvider = <C extends React.Component, P = C['props'], S =
   });
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const mountWithProviderAndGetComponent = <C extends React.Component, P = C['props'], S = C['state']>(
   Component: ComponentType<P>,
   elementToMount: React.ReactElement<P>,

packages/foundation-legacy/etc/foundation-legacy.api.md

@@ -191,7 +191,7 @@ export type IViewComponent<TViewProps> = (props: React_2.PropsWithChildren<TView
 
 export { legacyStyled }
 
-// @public
+// @public @deprecated
 export const ThemeProvider: React_2.FunctionComponent<IThemeProviderProps>;
 
 // @public