diff --git a/apps/perf-test/src/scenarios/Nav.tsx b/apps/perf-test/src/scenarios/Nav.tsx index a7f2d02fdb31ae..ec544166cfdb30 100644 --- a/apps/perf-test/src/scenarios/Nav.tsx +++ b/apps/perf-test/src/scenarios/Nav.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Nav, INavLink } from '@fluentui/react/lib/Nav'; +import { Nav } from '@fluentui/react/lib/Nav'; const groups = [ { diff --git a/apps/perf-test/tsconfig.json b/apps/perf-test/tsconfig.json index 74a7815df7fd51..5fecac56c1da13 100644 --- a/apps/perf-test/tsconfig.json +++ b/apps/perf-test/tsconfig.json @@ -1,21 +1,12 @@ { - "extends": "../../tsconfig.base.json", + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", + "target": "ES2015", + "isolatedModules": false, + "lib": ["ES2015", "DOM"], "outDir": "lib", - "module": "commonjs", "jsx": "react", - "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "strictNullChecks": true, - "noImplicitAny": true, - "lib": ["es6", "dom"], - "types": ["webpack-env"], - "skipLibCheck": true + "types": ["environment", "webpack-env"] }, "include": ["src"] } diff --git a/apps/public-docsite-resources/src/components/DemoPage.types.ts b/apps/public-docsite-resources/src/components/DemoPage.types.ts index c7725349e3af8f..a77cb7b25bc283 100644 --- a/apps/public-docsite-resources/src/components/DemoPage.types.ts +++ b/apps/public-docsite-resources/src/components/DemoPage.types.ts @@ -1 +1 @@ -export { IDocPageProps as IDemoPageProps } from '@fluentui/react/lib/common/DocPage.types'; +export type { IDocPageProps as IDemoPageProps } from '@fluentui/react/lib/common/DocPage.types'; diff --git a/apps/public-docsite-resources/src/components/pages/ColorsPage.tsx b/apps/public-docsite-resources/src/components/pages/ColorsPage.tsx index 97151d76ef1b49..38976976bcb98e 100644 --- a/apps/public-docsite-resources/src/components/pages/ColorsPage.tsx +++ b/apps/public-docsite-resources/src/components/pages/ColorsPage.tsx @@ -51,7 +51,7 @@ class Content extends React.Component { ReactDOM.render(,document.getElementById('content'));`; export class ColorsPage extends React.Component<{}, IColorsPageState> { - private _semanticSlotColorChangeTimeout: number; + private _semanticSlotColorChangeTimeout!: number; private _async: Async; constructor(props: {}) { diff --git a/apps/public-docsite-resources/tsconfig.json b/apps/public-docsite-resources/tsconfig.json index 59faae6dc58f6a..3fe142801d4b61 100644 --- a/apps/public-docsite-resources/tsconfig.json +++ b/apps/public-docsite-resources/tsconfig.json @@ -1,25 +1,11 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", + "target": "ES2015", + "lib": ["ES2015", "dom"], "outDir": "lib", - "target": "es5", - "module": "commonjs", "jsx": "react", - "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, - "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "noImplicitThis": true, - "skipLibCheck": true, - "lib": ["es5", "dom", "es2015.promise"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["webpack-env", "custom-global"] + "types": ["environment", "webpack-env"] }, "include": ["src"] } diff --git a/apps/theming-designer/src/components/FabricPalette.tsx b/apps/theming-designer/src/components/FabricPalette.tsx index 17573dc9ed4837..dabdcab220d021 100644 --- a/apps/theming-designer/src/components/FabricPalette.tsx +++ b/apps/theming-designer/src/components/FabricPalette.tsx @@ -34,7 +34,7 @@ const tableClassName = mergeStyles({ }); export const FabricPalette: React.FunctionComponent = (props: IFabricPaletteProps) => { - const { themeRules, onFabricPaletteColorChange } = props; + const { themeRules = {} as NonNullable, onFabricPaletteColorChange } = props; return (
@@ -58,7 +58,7 @@ export const FabricPalette: React.FunctionComponent = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.themeDarker]].color.str} + {themeRules[FabricSlots[FabricSlots.themeDarker]].color!.str} = (prop directionalHint={DirectionalHint.topCenter} /> - {themeRules[FabricSlots[FabricSlots.black]].color.str} + {themeRules[FabricSlots[FabricSlots.black]].color!.str} = (prop directionalHint={DirectionalHint.topCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralTertiaryAlt]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralTertiaryAlt]].color!.str} @@ -87,7 +87,7 @@ export const FabricPalette: React.FunctionComponent = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.themeDark]].color.str} + {themeRules[FabricSlots[FabricSlots.themeDark]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralDark]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralDark]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralDark]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralDark]].color!.str} @@ -116,7 +116,7 @@ export const FabricPalette: React.FunctionComponent = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.themeDarkAlt]].color.str} + {themeRules[FabricSlots[FabricSlots.themeDarkAlt]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralPrimary]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralPrimary]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralQuaternaryAlt]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralQuaternaryAlt]].color!.str} @@ -145,7 +145,7 @@ export const FabricPalette: React.FunctionComponent = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.themePrimary]].color.str} + {themeRules[FabricSlots[FabricSlots.themePrimary]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralPrimaryAlt]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralPrimaryAlt]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralLight]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralLight]].color!.str} @@ -174,7 +174,7 @@ export const FabricPalette: React.FunctionComponent = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.themeSecondary]].color.str} + {themeRules[FabricSlots[FabricSlots.themeSecondary]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralSecondary]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralSecondary]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralLighter]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralLighter]].color!.str} @@ -203,7 +203,7 @@ export const FabricPalette: React.FunctionComponent = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.themeTertiary]].color.str} + {themeRules[FabricSlots[FabricSlots.themeTertiary]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralTertiary]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralTertiary]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralLighterAlt]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralLighterAlt]].color!.str} @@ -232,7 +232,7 @@ export const FabricPalette: React.FunctionComponent = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.themeLight]].color.str} + {themeRules[FabricSlots[FabricSlots.themeLight]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.neutralSecondaryAlt]].color.str} + {themeRules[FabricSlots[FabricSlots.neutralSecondaryAlt]].color!.str} @@ -253,7 +253,7 @@ export const FabricPalette: React.FunctionComponent = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.themeLighter]].color.str} + {themeRules[FabricSlots[FabricSlots.themeLighter]].color!.str} = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.white]].color.str} + {themeRules[FabricSlots[FabricSlots.white]].color!.str} @@ -273,7 +273,7 @@ export const FabricPalette: React.FunctionComponent = (prop directionalHint={DirectionalHint.leftCenter} /> - {themeRules[FabricSlots[FabricSlots.themeLighterAlt]].color.str} + {themeRules[FabricSlots[FabricSlots.themeLighterAlt]].color!.str}
diff --git a/apps/theming-designer/src/components/FabricSlotWidget.tsx b/apps/theming-designer/src/components/FabricSlotWidget.tsx index 030b69c02c2daa..95ca86d340fb60 100644 --- a/apps/theming-designer/src/components/FabricSlotWidget.tsx +++ b/apps/theming-designer/src/components/FabricSlotWidget.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IThemeRules, FabricSlots, IThemeSlotRule } from '@fluentui/react/lib/ThemeGenerator'; +import { FabricSlots, IThemeSlotRule } from '@fluentui/react/lib/ThemeGenerator'; import { IColor } from '@fluentui/react/lib/Color'; import { Stack, IStackStyles } from '@fluentui/react/lib/Stack'; import { mergeStyles } from '@fluentui/merge-styles'; @@ -58,10 +58,10 @@ export class FabricSlotWidget extends React.Component
-
{slotRule.name}
+
{slotRule!.name}
{isColorPickerVisible && ( - + )}
diff --git a/apps/theming-designer/src/components/SemanticSlots.tsx b/apps/theming-designer/src/components/SemanticSlots.tsx index 60b1defc10067c..f7447446180419 100644 --- a/apps/theming-designer/src/components/SemanticSlots.tsx +++ b/apps/theming-designer/src/components/SemanticSlots.tsx @@ -166,7 +166,7 @@ export const SemanticSlots: React.FunctionComponent = (prop } }; - let semanticSlotsNone = props.theme.semanticColors; + let semanticSlotsNone = props.theme!.semanticColors; slotNames = trimSemanticSlotsOrNames(Object.keys(semanticSlotsNone)) as ISlotNames; noneSlots = fillVariantSlotsList(VariantThemeType.None); neutralSlots = fillVariantSlotsList(VariantThemeType.Neutral); diff --git a/apps/theming-designer/src/components/ThemingDesigner.tsx b/apps/theming-designer/src/components/ThemingDesigner.tsx index 12671673555bae..9a3cc0855785c6 100644 --- a/apps/theming-designer/src/components/ThemingDesigner.tsx +++ b/apps/theming-designer/src/components/ThemingDesigner.tsx @@ -77,8 +77,8 @@ const Main = (props: IStackProps) => ( ); export class ThemingDesigner extends React.Component<{}, IThemingDesignerState> { - private _colorChangeTimeout: number; - private _fabricPaletteColorChangeTimeout: number; + private _colorChangeTimeout!: number; + private _fabricPaletteColorChangeTimeout!: number; private _async: Async; constructor(props: {}) { @@ -153,7 +153,7 @@ export class ThemingDesigner extends React.Component<{}, IThemingDesignerState> const { themeRules } = this.state; if (themeRules) { const currentIsDark = isDark(themeRules[FabricSlots[fabricSlot]].color!); - ThemeGenerator.setSlot(themeRules[FabricSlots[fabricSlot]], newColor, currentIsDark, true, true); + ThemeGenerator.setSlot(themeRules[FabricSlots[fabricSlot]], newColor!, currentIsDark, true, true); if (currentIsDark !== isDark(themeRules[FabricSlots[fabricSlot]].color!)) { // isInverted got swapped, so need to refresh slots with new shading rules ThemeGenerator.insureSlots(themeRules, currentIsDark); diff --git a/apps/theming-designer/src/index.tsx b/apps/theming-designer/src/index.tsx index 814f0e7d217c1a..2dbfdb7204685e 100644 --- a/apps/theming-designer/src/index.tsx +++ b/apps/theming-designer/src/index.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { Fabric } from '@fluentui/react/lib/Fabric'; import { initializeIcons } from '@fluentui/font-icons-mdl2'; import { ThemingDesigner } from './components/ThemingDesigner'; diff --git a/apps/theming-designer/tsconfig.json b/apps/theming-designer/tsconfig.json index 2474846337f204..fc79b083f5a2c7 100644 --- a/apps/theming-designer/tsconfig.json +++ b/apps/theming-designer/tsconfig.json @@ -1,20 +1,12 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", + "noEmit": true, + "target": "ES2015", + "lib": ["ES2015", "dom"], "outDir": "lib", - "module": "commonjs", "jsx": "react", - "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "strict": false, - "lib": ["es6", "dom"], - "types": [], - "skipLibCheck": true, - "noImplicitAny": true + "types": ["environment", "webpack-env"] }, "include": ["src"] } diff --git a/apps/vr-tests/tsconfig.json b/apps/vr-tests/tsconfig.json index c787b450987660..3d476cb3c51a00 100644 --- a/apps/vr-tests/tsconfig.json +++ b/apps/vr-tests/tsconfig.json @@ -1,21 +1,12 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", + "noEmit": true, + "target": "ES2015", + "lib": ["ES2015"], "outDir": "lib", - "module": "commonjs", "jsx": "react", - "declaration": true, - "sourceMap": true, - "noEmit": true, - "experimentalDecorators": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "skipLibCheck": true, - "types": ["webpack-env", "@storybook/react", "screener-storybook"] + "types": ["@storybook/react", "screener-storybook"] }, "include": ["src"] } diff --git a/packages/api-docs/tsconfig.json b/packages/api-docs/tsconfig.json index 0bc32f3283be5e..3726391eeef57b 100644 --- a/packages/api-docs/tsconfig.json +++ b/packages/api-docs/tsconfig.json @@ -1,25 +1,14 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", - "jsx": "react", + "module": "CommonJS", + "target": "ES2015", + "isolatedModules": false, + "outDir": "lib", + "lib": ["ES2015"], "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "noImplicitThis": true, - "skipLibCheck": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "downlevelIteration": true, - "lib": ["es2017"], - "types": [] + "types": ["node", "environment"] }, "include": ["src"] } diff --git a/packages/azure-themes/tsconfig.json b/packages/azure-themes/tsconfig.json index 46954f1b6ee6d6..d71c59e1a7894b 100644 --- a/packages/azure-themes/tsconfig.json +++ b/packages/azure-themes/tsconfig.json @@ -1,22 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "skipLibCheck": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es5", "dom"] + "types": ["environment"] }, "include": ["src"] } diff --git a/packages/codemods/src/codeMods/mods/configMod/configMod.mod.ts b/packages/codemods/src/codeMods/mods/configMod/configMod.mod.ts index d78157e460728e..6d0b3ff21677ff 100644 --- a/packages/codemods/src/codeMods/mods/configMod/configMod.mod.ts +++ b/packages/codemods/src/codeMods/mods/configMod/configMod.mod.ts @@ -15,7 +15,7 @@ import { findJsxTag, renameProp, getImportsByPath, repathImport, renameImport } import { Ok, Err } from '../../../helpers/result'; import { MaybeDictionary, isSomething } from '../../../helpers/maybe'; -import jsonObj from '../upgrades.json'; +import * as jsonObj from '../upgrades.json'; /* Creates and returns an array of CodeMod objects from a JSON file. Optionally takes in an array of functions from user to turn into codemods as well. */ diff --git a/packages/codemods/src/helpers/maybe.ts b/packages/codemods/src/helpers/maybe.ts index 7dd5a83bd601e5..4db9a43d7d3c60 100644 --- a/packages/codemods/src/helpers/maybe.ts +++ b/packages/codemods/src/helpers/maybe.ts @@ -17,7 +17,7 @@ export interface Nothing extends MaybeChain { } class MB implements MaybeChain { - public something: boolean; + public something!: boolean; public value: T | undefined; public __isMaybe: true = true; diff --git a/packages/codemods/src/modRunner/tests/mocks/MockProject/src/File-react.tsx b/packages/codemods/src/modRunner/tests/mocks/MockProject/src/File-react.tsx index e69de29bb2d1d6..cb0ff5c3b541f6 100644 --- a/packages/codemods/src/modRunner/tests/mocks/MockProject/src/File-react.tsx +++ b/packages/codemods/src/modRunner/tests/mocks/MockProject/src/File-react.tsx @@ -0,0 +1 @@ +export {}; diff --git a/packages/codemods/src/modRunner/tests/mocks/MockProject/src/File.ts b/packages/codemods/src/modRunner/tests/mocks/MockProject/src/File.ts index e69de29bb2d1d6..cb0ff5c3b541f6 100644 --- a/packages/codemods/src/modRunner/tests/mocks/MockProject/src/File.ts +++ b/packages/codemods/src/modRunner/tests/mocks/MockProject/src/File.ts @@ -0,0 +1 @@ +export {}; diff --git a/packages/codemods/tsconfig.json b/packages/codemods/tsconfig.json index 21f260a9da086c..5ea007ff438f7e 100644 --- a/packages/codemods/tsconfig.json +++ b/packages/codemods/tsconfig.json @@ -1,25 +1,15 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", + "module": "CommonJS", + "resolveJsonModule": true, + "target": "ES2015", "outDir": "lib", - "target": "es6", - "module": "commonjs", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, - "allowSyntheticDefaultImports": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "esModuleInterop": true, - "lib": ["dom", "es2015.promise", "es2017"], - "types": ["jest", "node"], - "resolveJsonModule": true + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/cra-template/tsconfig.json b/packages/cra-template/tsconfig.json index d0cebca8137d02..8ae724b35d24ec 100644 --- a/packages/cra-template/tsconfig.json +++ b/packages/cra-template/tsconfig.json @@ -1,7 +1,12 @@ { - "extends": "../../scripts/tsconfig.json", + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "noEmit": true + "esModuleInterop": true, + "module": "CommonJS", + "target": "ES2015", + "lib": ["ES2015"], + "noEmit": true, + "types": ["node"] }, "include": ["scripts"], "exclude": ["node_modules", "template"] diff --git a/packages/date-time-utilities/tsconfig.json b/packages/date-time-utilities/tsconfig.json index d39522a783a614..9df869d8650ba3 100644 --- a/packages/date-time-utilities/tsconfig.json +++ b/packages/date-time-utilities/tsconfig.json @@ -1,23 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", + "target": "ES2015", "outDir": "lib", - "module": "commonjs", - "lib": ["es5", "es2015.promise", "dom"], + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noImplicitAny": true, - "noUnusedLocals": true, - "strictNullChecks": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "skipLibCheck": true, - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global", "node"] + "types": ["jest"] }, "include": ["src"] } diff --git a/packages/dom-utilities/tsconfig.json b/packages/dom-utilities/tsconfig.json index beb1660276af80..e7c9af6cb4147f 100644 --- a/packages/dom-utilities/tsconfig.json +++ b/packages/dom-utilities/tsconfig.json @@ -1,22 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strict": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es5", "dom"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"] + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/example-data/src/facepile.ts b/packages/example-data/src/facepile.ts index 40de6f266119a9..e4c7df98b2b6f4 100644 --- a/packages/example-data/src/facepile.ts +++ b/packages/example-data/src/facepile.ts @@ -55,8 +55,8 @@ export const facepilePersonas: IExampleFacepilePersona[] = [ imageUrl: TestImages.personaFemale, personaName: 'Annie Lindqvist', data: '50%', - onClick: (ev: unknown, persona: IExampleFacepilePersona) => - alert('You clicked on ' + persona.personaName + '. Extra data: ' + persona.data), + onClick: (ev: unknown, persona?: IExampleFacepilePersona) => + alert('You clicked on ' + persona!.personaName + '. Extra data: ' + persona!.data), }, { imageUrl: TestImages.personaFemale, @@ -66,8 +66,8 @@ export const facepilePersonas: IExampleFacepilePersona[] = [ { personaName: 'Alex Lundberg', data: '75%', - onClick: (ev: unknown, persona: IExampleFacepilePersona) => - alert('You clicked on ' + persona.personaName + '. Extra data: ' + persona.data), + onClick: (ev: unknown, persona?: IExampleFacepilePersona) => + alert('You clicked on ' + persona!.personaName + '. Extra data: ' + persona!.data), }, { personaName: 'Roko Kolar', @@ -85,8 +85,8 @@ export const facepilePersonas: IExampleFacepilePersona[] = [ personaName: 'Valentina Lovric', initialsColor: PersonaInitialsColor.lightBlue, data: 'Emp1234', - onClick: (ev: unknown, persona: IExampleFacepilePersona) => - alert('You clicked on ' + persona.personaName + '. Extra data: ' + persona.data), + onClick: (ev: unknown, persona?: IExampleFacepilePersona) => + alert('You clicked on ' + persona!.personaName + '. Extra data: ' + persona!.data), }, { imageUrl: TestImages.personaMale, @@ -106,8 +106,8 @@ export const facepilePersonas: IExampleFacepilePersona[] = [ personaName: 'Aaron Reid2', initialsColor: PersonaInitialsColor.magenta, data: 'Emp1234', - onClick: (ev: unknown, persona: IExampleFacepilePersona) => - alert('You clicked on ' + persona.personaName + '. Extra data: ' + persona.data), + onClick: (ev: unknown, persona?: IExampleFacepilePersona) => + alert('You clicked on ' + persona!.personaName + '. Extra data: ' + persona!.data), }, { imageUrl: TestImages.personaMale, diff --git a/packages/example-data/tsconfig.json b/packages/example-data/tsconfig.json index 3490b772ef97bd..e6721547aba048 100644 --- a/packages/example-data/tsconfig.json +++ b/packages/example-data/tsconfig.json @@ -1,21 +1,12 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es5", "dom"], "types": [] }, "include": ["src"] diff --git a/packages/font-icons-mdl2/tsconfig.json b/packages/font-icons-mdl2/tsconfig.json index 751a575176eec6..f40f30e47e1b20 100644 --- a/packages/font-icons-mdl2/tsconfig.json +++ b/packages/font-icons-mdl2/tsconfig.json @@ -1,19 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", - "module": "commonjs", - "lib": ["es5", "dom"], - "jsx": "react", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "skipLibCheck": true, - "preserveConstEnums": false, - "types": [] + "jsx": "react", + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/foundation-legacy/src/createComponent.tsx b/packages/foundation-legacy/src/createComponent.tsx index 6eefad0a1a4190..c06730e0b561f3 100644 --- a/packages/foundation-legacy/src/createComponent.tsx +++ b/packages/foundation-legacy/src/createComponent.tsx @@ -68,9 +68,15 @@ export function createComponent< const theme = componentProps.theme || settings.theme; - const tokens = _resolveTokens(componentProps, theme, options.tokens, settings.tokens, componentProps.tokens); + const tokens = _resolveTokens( + componentProps as TViewProps, + theme, + options.tokens, + settings.tokens, + componentProps.tokens, + ); const styles = _resolveStyles( - componentProps, + componentProps as TViewProps, theme, tokens, options.styles, diff --git a/packages/foundation-legacy/src/hooks/controlled.ts b/packages/foundation-legacy/src/hooks/controlled.ts index beb9586fefbfe9..70fb53e1a0190d 100644 --- a/packages/foundation-legacy/src/hooks/controlled.ts +++ b/packages/foundation-legacy/src/hooks/controlled.ts @@ -18,7 +18,7 @@ export function useControlledState, propName: TProp, options?: IControlledStateOptions, -): [TProps[TProp] | undefined, React.Dispatch>] { +): [TProps[TProp] | undefined, React.Dispatch>] { let defaultValue: TProps[TProp] | undefined; if (options) { if (options.defaultPropName && props[options.defaultPropName] !== undefined) { diff --git a/packages/foundation-legacy/src/next/composed.tsx b/packages/foundation-legacy/src/next/composed.tsx index 8137426c4b614b..a4314b59277092 100644 --- a/packages/foundation-legacy/src/next/composed.tsx +++ b/packages/foundation-legacy/src/next/composed.tsx @@ -152,14 +152,7 @@ export function composed< const { factoryOptions = {}, view } = options; const { defaultProp } = factoryOptions; - const ResultComponent: IFoundationComponent< - TComponentProps, - TTokens, - TStyleSet, - TViewProps, - TComponentSlots, - TStatics - > = ( + const ResultComponent = (( componentProps: TViewProps & IStyleableComponentProps & { children?: React.ReactNode }, ) => { @@ -268,7 +261,7 @@ export function composed< : getSlots(viewProps, options.slots); return view ? view(viewProps, Slots) : null; - }; + }) as IFoundationComponent; ResultComponent.displayName = options.displayName || (view && view.name); diff --git a/packages/foundation-legacy/tsconfig.json b/packages/foundation-legacy/tsconfig.json index a140264f55ba3a..e7c9af6cb4147f 100644 --- a/packages/foundation-legacy/tsconfig.json +++ b/packages/foundation-legacy/tsconfig.json @@ -1,23 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es5", "dom"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"] + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/jest-serializer-merge-styles/tsconfig.json b/packages/jest-serializer-merge-styles/tsconfig.json index 1ac6eeabdbfda9..4d46b5c7f10545 100644 --- a/packages/jest-serializer-merge-styles/tsconfig.json +++ b/packages/jest-serializer-merge-styles/tsconfig.json @@ -1,18 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", + "module": "CommonJS", + "target": "ES2015", "outDir": "lib", - "module": "commonjs", - "lib": ["es2017"], + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": true, "types": ["jest"] }, "include": ["src"] diff --git a/packages/merge-styles/src/Stylesheet.ts b/packages/merge-styles/src/Stylesheet.ts index aa536ccb805987..1c284d405ba867 100644 --- a/packages/merge-styles/src/Stylesheet.ts +++ b/packages/merge-styles/src/Stylesheet.ts @@ -94,17 +94,19 @@ const STYLESHEET_SETTING = '__stylesheet__'; */ const REUSE_STYLE_NODE = typeof navigator !== 'undefined' && /rv:11.0/.test(navigator.userAgent); -let _global: (Window | {}) & { +// eslint-disable-next-line @typescript-eslint/naming-convention +type _Global = Window & { [STYLESHEET_SETTING]?: Stylesheet; FabricConfig?: { mergeStyles?: IStyleSheetConfig; serializedStylesheet?: ISerializedStylesheet; }; -} = {}; +}; +let _global: _Global; // Grab window. try { - _global = window || {}; + _global = (window || {}) as _Global; } catch { /* leave as blank object */ } diff --git a/packages/merge-styles/src/index.ts b/packages/merge-styles/src/index.ts index 4fa86b8c3048ef..3f2d819d21d81b 100644 --- a/packages/merge-styles/src/index.ts +++ b/packages/merge-styles/src/index.ts @@ -1,17 +1,24 @@ -export { IStyle, IStyleBase, IStyleBaseArray } from './IStyle'; +export type { IStyle, IStyleBase, IStyleBaseArray } from './IStyle'; -export { IRawStyle } from './IRawStyle'; +export type { IRawStyle } from './IRawStyle'; -export { IKeyframes } from './IKeyframes'; +export type { IKeyframes } from './IKeyframes'; -export { IStyleFunction, IStyleFunctionOrObject } from './IStyleFunction'; +export type { IStyleFunction, IStyleFunctionOrObject } from './IStyleFunction'; -export { DeepPartial } from './DeepPartial'; +export type { DeepPartial } from './DeepPartial'; // eslint-disable-next-line deprecation/deprecation -export { IConcatenatedStyleSet, IProcessedStyleSet, IStyleSet, Omit } from './IStyleSet'; +export type { IConcatenatedStyleSet, IProcessedStyleSet, IStyleSet, Omit } from './IStyleSet'; -export { ICSSRule, ICSSPixelUnitRule, IFontFace, IFontWeight, IRawFontStyle, IRawStyleBase } from './IRawStyleBase'; +export type { + ICSSRule, + ICSSPixelUnitRule, + IFontFace, + IFontWeight, + IRawFontStyle, + IRawStyleBase, +} from './IRawStyleBase'; export { mergeStyles, mergeCss } from './mergeStyles'; @@ -25,10 +32,11 @@ export { fontFace } from './fontFace'; export { keyframes } from './keyframes'; -export * from './Stylesheet'; +export { InjectionMode, Stylesheet } from './Stylesheet'; +export type { ICSPSettings, ISerializedStylesheet, IStyleSheetConfig } from './Stylesheet'; export { setRTL } from './StyleOptionsState'; -export { ObjectOnly } from './ObjectOnly'; +export type { ObjectOnly } from './ObjectOnly'; import './version'; diff --git a/packages/merge-styles/src/mergeStyleSets.test.ts b/packages/merge-styles/src/mergeStyleSets.test.ts index 0015f838d1695e..e64223c3a84c33 100644 --- a/packages/merge-styles/src/mergeStyleSets.test.ts +++ b/packages/merge-styles/src/mergeStyleSets.test.ts @@ -173,20 +173,6 @@ describe('mergeStyleSets', () => { isCollapsed: boolean; } - interface IStyles extends IStyleSet { - root: IStyle; - subComponentStyles: { - button: IStyleFunctionOrObject>; - }; - } - - interface IStylesWithStyleObjectAsSubCommponent extends IStyleSet { - root: IStyle; - subComponentStyles: { - button: Partial>; - }; - } - /** Button component as of test writing has this interface. */ const LegacySubComponent: (props: { styles: Partial }) => any = (props: { styles: Partial; diff --git a/packages/merge-styles/tsconfig.json b/packages/merge-styles/tsconfig.json index f4544ef012d4b6..9df869d8650ba3 100644 --- a/packages/merge-styles/tsconfig.json +++ b/packages/merge-styles/tsconfig.json @@ -1,18 +1,12 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", + "target": "ES2015", "outDir": "lib", - "module": "commonjs", - "lib": ["es5", "dom"], + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": true, "types": ["jest"] }, "include": ["src"] diff --git a/packages/monaco-editor/tsconfig.json b/packages/monaco-editor/tsconfig.json index 3490b772ef97bd..e6721547aba048 100644 --- a/packages/monaco-editor/tsconfig.json +++ b/packages/monaco-editor/tsconfig.json @@ -1,21 +1,12 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es5", "dom"], "types": [] }, "include": ["src"] diff --git a/packages/public-docsite-setup/tsconfig.json b/packages/public-docsite-setup/tsconfig.json index 9014148a54d8ae..69ea58c9fea0e9 100644 --- a/packages/public-docsite-setup/tsconfig.json +++ b/packages/public-docsite-setup/tsconfig.json @@ -1,19 +1,14 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { + "module": "CommonJS", + "target": "ES2015", "outDir": "lib", - "target": "es5", - "module": "commonjs", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "strict": true, - "noUnusedLocals": true, - "skipLibCheck": true, - "lib": ["es5", "dom"], - "types": ["webpack-env"] + "importHelpers": true, + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/react-cards/tsconfig.json b/packages/react-cards/tsconfig.json index a140264f55ba3a..e7c9af6cb4147f 100644 --- a/packages/react-cards/tsconfig.json +++ b/packages/react-cards/tsconfig.json @@ -1,23 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es5", "dom"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"] + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 0188b421b75f4f..023a81fe635c4d 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -79,21 +79,21 @@ export class AreaChartBase extends React.Component { - private _classNames: IProcessedStyleSet; - private chartContainer: HTMLDivElement; - private legendContainer: HTMLDivElement; + private _classNames!: IProcessedStyleSet; + private chartContainer!: HTMLDivElement; + private legendContainer!: HTMLDivElement; private minLegendContainerHeight: number = 32; - private xAxisElement: SVGElement | null; - private yAxisElement: SVGElement | null; + private xAxisElement!: SVGElement | null; + private yAxisElement!: SVGElement | null; private margins: IMargins; private idForGraph: string; - private _reqID: number; + private _reqID!: number; private _isRtl: boolean = getRTL(); constructor(props: IModifiedCartesianChartProps) { diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx index 2d6b438ecc3fec..69f2ad74303dc8 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx @@ -31,14 +31,14 @@ export class DonutChartBase extends React.Component = { innerRadius: 0, }; - public _colors: scale.ScaleOrdinal; - private _classNames: IProcessedStyleSet; - private _rootElem: HTMLElement | null; + public _colors!: scale.ScaleOrdinal; + private _classNames!: IProcessedStyleSet; + private _rootElem!: HTMLElement | null; private _uniqText: string; /* eslint-disable @typescript-eslint/no-explicit-any */ private _currentHoverElement: any; private _calloutId: string; - private _calloutAnchorPoint: IChartDataPoint | null; + private _calloutAnchorPoint!: IChartDataPoint | null; public static getDerivedStateFromProps( nextProps: Readonly, diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx index 495a12f5fde99f..90a12844a63834 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx @@ -59,23 +59,23 @@ export class GroupedVerticalBarChartBase extends React.Component< data: IGroupedVerticalBarChartData[], ) => // eslint-disable-next-line @typescript-eslint/no-explicit-any { keys: string[]; xAxisLabels: string[]; datasetForBars: any }; - private _dataset: IGVDataPoint[]; - private _keys: string[]; - private _xAxisLabels: string[]; + private _dataset!: IGVDataPoint[]; + private _keys!: string[]; + private _xAxisLabels!: string[]; // eslint-disable-next-line @typescript-eslint/no-explicit-any private _datasetForBars: any; - private margins: IMargins; - private _groupedVerticalBarGraph: JSX.Element[]; - private _classNames: IProcessedStyleSet; + private margins!: IMargins; + private _groupedVerticalBarGraph!: JSX.Element[]; + private _classNames!: IProcessedStyleSet; private _refArray: IRefArrayData[]; - private _yMax: number; + private _yMax!: number; private _calloutId: string; private _tooltipId: string; - private _isNumeric: XAxisTypes; + private _isNumeric!: XAxisTypes; private _isRtl: boolean = getRTL(); - private _isCustomBarWidth: boolean; - private _x1TotalBandWidth: number; - private _calloutAnchorPoint: IGVBarChartSeriesPoint | null; + private _isCustomBarWidth!: boolean; + private _x1TotalBandWidth!: number; + private _calloutAnchorPoint!: IGVBarChartSeriesPoint | null; public constructor(props: IGroupedVerticalBarChartProps) { super(props); diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx index e9d35c1ff42acf..d8cececbb008ae 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx @@ -95,9 +95,9 @@ export interface IHeatMapChartState { } const getClassNames = classNamesFunction(); export class HeatMapChartBase extends React.Component { - private _classNames: IProcessedStyleSet; - private _stringXAxisDataPoints: string[]; - private _stringYAxisDataPoints: string[]; + private _classNames!: IProcessedStyleSet; + private _stringXAxisDataPoints!: string[]; + private _stringYAxisDataPoints!: string[]; private _createSet: ( data: IHeatMapChartData[], xDate: string | undefined, @@ -105,7 +105,7 @@ export class HeatMapChartBase extends React.Component DataSet; - private _dataSet: RectanglesGraphData; + private _dataSet!: RectanglesGraphData; // eslint-disable-next-line @typescript-eslint/no-explicit-any private _colorScale: any; // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -119,7 +119,7 @@ export class HeatMapChartBase extends React.Component { - private _barHeight: number; - private _classNames: IProcessedStyleSet; + private _barHeight!: number; + private _classNames!: IProcessedStyleSet; private _uniqLineText: string; private _calloutId: string; private _refArray: IRefArrayData[]; - private _calloutAnchorPoint: IChartDataPoint | null; + private _calloutAnchorPoint!: IChartDataPoint | null; constructor(props: IHorizontalBarChartProps) { super(props); diff --git a/packages/react-charting/src/components/Legends/Legends.base.tsx b/packages/react-charting/src/components/Legends/Legends.base.tsx index 53696170404333..ad7a48130bd9fe 100644 --- a/packages/react-charting/src/components/Legends/Legends.base.tsx +++ b/packages/react-charting/src/components/Legends/Legends.base.tsx @@ -45,8 +45,8 @@ export interface ILegendState { selectedLegends: string[]; } export class LegendsBase extends React.Component { - private _hoverCardRef: HTMLDivElement; - private _classNames: IProcessedStyleSet; + private _hoverCardRef!: HTMLDivElement; + private _classNames!: IProcessedStyleSet; public constructor(props: ILegendsProps) { super(props); diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx index d5ba1fb4d4ee26..b1bcc4f46e5ad3 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx +++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx @@ -140,12 +140,12 @@ export class LineChartBase extends React.Component { /* eslint-disable @typescript-eslint/no-explicit-any */ .value((d: any) => d.y), }; - private colors: scale.ScaleOrdinal; + private colors!: scale.ScaleOrdinal; constructor(props: IPieProps) { super(props); diff --git a/packages/react-charting/src/components/PieChart/PieChart.base.tsx b/packages/react-charting/src/components/PieChart/PieChart.base.tsx index 9ad6d9ab292535..9ce2557fc0aef1 100644 --- a/packages/react-charting/src/components/PieChart/PieChart.base.tsx +++ b/packages/react-charting/src/components/PieChart/PieChart.base.tsx @@ -11,7 +11,7 @@ export class PieChartBase extends React.Component { width: 600, height: 350, }; - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; public render(): JSX.Element { const { data, width, height, colors, chartTitle } = this.props; diff --git a/packages/react-charting/src/components/PieChart/PieChart.types.ts b/packages/react-charting/src/components/PieChart/PieChart.types.ts index 4349ab95ac3e5e..a85557bba767b3 100644 --- a/packages/react-charting/src/components/PieChart/PieChart.types.ts +++ b/packages/react-charting/src/components/PieChart/PieChart.types.ts @@ -1,7 +1,7 @@ import { ITheme, IStyle } from '@fluentui/react/lib/Styling'; import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; import { IDataPoint } from '../../types/IDataPoint'; -export { IDataPoint } from '../../types/IDataPoint'; +export type { IDataPoint } from '../../types/IDataPoint'; export interface IPieChart {} export interface IPieChartProps { diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx index 1ca4bf921b294e..ff4edfbfd46124 100644 --- a/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx +++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx @@ -12,9 +12,9 @@ export class SankeyChartBase extends React.Component< containerHeight: number; } > { - private _classNames: IProcessedStyleSet; - private chartContainer: HTMLDivElement; - private _reqID: number; + private _classNames!: IProcessedStyleSet; + private chartContainer!: HTMLDivElement; + private _reqID!: number; constructor(props: ISankeyChartProps) { super(props); this.state = { diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts b/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts index 100834f6f2b4db..dedb9b7c2e22a8 100644 --- a/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts +++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts @@ -2,7 +2,7 @@ import { ITheme, IStyle } from '@fluentui/react/lib/Styling'; import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; import { IChartProps } from '../../types/IDataPoint'; -export { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint'; +export type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint'; export interface ISankeyChartProps { /** diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index 2ee91b29d126a5..1792471e4e9eee 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -44,9 +44,9 @@ export class MultiStackedBarChartBase extends React.Component; + private _classNames!: IProcessedStyleSet; private _calloutId: string; - private _calloutAnchorPoint: IChartDataPoint | null; + private _calloutAnchorPoint!: IChartDataPoint | null; public constructor(props: IMultiStackedBarChartProps) { super(props); diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx index 1bc9f574da43e2..6ec4b45ccb6e2c 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx @@ -31,10 +31,10 @@ export class StackedBarChartBase extends React.Component; + private _classNames!: IProcessedStyleSet; private _calloutId: string; private _refArray: IRefArrayData[]; - private _calloutAnchorPoint: IChartDataPoint | null; + private _calloutAnchorPoint!: IChartDataPoint | null; public constructor(props: IStackedBarChartProps) { super(props); diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index cc9fe8fc8f6d4b..b04ca0c34b37e2 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -54,21 +54,21 @@ export interface IVerticalBarChartState extends IBasestate { type ColorScale = (_p?: number) => string; export class VerticalBarChartBase extends React.Component { - private _points: IVerticalBarChartDataPoint[]; - private _barWidth: number; - private _colors: string[]; - private _classNames: IProcessedStyleSet; + private _points!: IVerticalBarChartDataPoint[]; + private _barWidth!: number; + private _colors!: string[]; + private _classNames!: IProcessedStyleSet; private _refArray: IRefArrayData[]; private _calloutId: string; - private margins: IMargins; + private margins!: IMargins; private _isRtl: boolean = getRTL(); - private _bars: JSX.Element[]; - private _xAxisLabels: string[]; - private _yMax: number; + private _bars!: JSX.Element[]; + private _xAxisLabels!: string[]; + private _yMax!: number; private _isHavingLine: boolean; private _tooltipId: string; private _xAxisType: XAxisTypes; - private _calloutAnchorPoint: IVerticalBarChartDataPoint | null; + private _calloutAnchorPoint!: IVerticalBarChartDataPoint | null; public constructor(props: IVerticalBarChartProps) { super(props); diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index e51ec297f9a335..6e00e4e9d8432a 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -70,22 +70,22 @@ export class VerticalStackedBarChartBase extends React.Component< IVerticalStackedBarChartProps, IVerticalStackedBarChartState > { - private _points: IVerticalStackedChartProps[]; + private _points!: IVerticalStackedChartProps[]; private _dataset: IDataPoint[]; - private _xAxisLabels: string[]; - private _bars: JSX.Element[]; - private _xAxisType: XAxisTypes; - private _barWidth: number; - private _additionalSpace: number; + private _xAxisLabels!: string[]; + private _bars!: JSX.Element[]; + private _xAxisType!: XAxisTypes; + private _barWidth!: number; + private _additionalSpace!: number; private _calloutId: string; - private _colors: string[]; - private margins: IMargins; + private _colors!: string[]; + private margins!: IMargins; private _isRtl: boolean = getRTL(); private _createLegendsForLine: (data: IVerticalStackedChartProps[]) => LineLegends[]; - private _lineObject: LineObject; + private _lineObject!: LineObject; private _tooltipId: string; - private _yMax: number; - private _calloutAnchorPoint: IVSChartDataPoint | null; + private _yMax!: number; + private _calloutAnchorPoint!: IVSChartDataPoint | null; public constructor(props: IVerticalStackedBarChartProps) { super(props); diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx index 1308a3c325b005..4c1750e50cd6ef 100644 --- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx +++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx @@ -5,7 +5,7 @@ import { convertToLocaleString } from '../index'; const getClassNames = classNamesFunction(); export class ChartHoverCardBase extends React.Component { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; public render(): React.ReactNode { const { color, Legend, XValue, YValue, styles, theme, ratio, descriptionMessage, culture } = this.props; this._classNames = getClassNames(styles!, { diff --git a/packages/react-charting/tsconfig.json b/packages/react-charting/tsconfig.json index aff8190b50a3af..eee37a4c182e5c 100644 --- a/packages/react-charting/tsconfig.json +++ b/packages/react-charting/tsconfig.json @@ -1,25 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2017", + "outDir": "lib", + "lib": ["ES2017", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "strictBindCallApply": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "skipLibCheck": true, - "lib": ["es5", "dom"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"] + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/react-date-time/tsconfig.json b/packages/react-date-time/tsconfig.json index a140264f55ba3a..e228707ab2e2ba 100644 --- a/packages/react-date-time/tsconfig.json +++ b/packages/react-date-time/tsconfig.json @@ -1,23 +1,14 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "module": "CommonJS", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es5", "dom"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"] + "types": ["environment"] }, "include": ["src"] } diff --git a/packages/react-docsite-components/src/components/ApiReferencesTable/ApiReferencesTable.tsx b/packages/react-docsite-components/src/components/ApiReferencesTable/ApiReferencesTable.tsx index 8fbf1c00348bd4..3a438173374b99 100644 --- a/packages/react-docsite-components/src/components/ApiReferencesTable/ApiReferencesTable.tsx +++ b/packages/react-docsite-components/src/components/ApiReferencesTable/ApiReferencesTable.tsx @@ -26,7 +26,7 @@ import { codeFontFamily } from '../CodeSnippet/CodeSnippet.styles'; import { titleCase } from '../../utilities/string'; // TODO: remove -export { IApiReferencesTableProps }; +export type { IApiReferencesTableProps }; export type IApiReferencesTableState = {}; /** @internal */ diff --git a/packages/react-docsite-components/src/components/ApiReferencesTable/index.ts b/packages/react-docsite-components/src/components/ApiReferencesTable/index.ts index eaaec8d8394e9d..a9e2cc5f478474 100644 --- a/packages/react-docsite-components/src/components/ApiReferencesTable/index.ts +++ b/packages/react-docsite-components/src/components/ApiReferencesTable/index.ts @@ -1,3 +1,4 @@ -export { ApiReferencesTable, IApiReferencesTableState, gapTokens } from './ApiReferencesTable'; +export { ApiReferencesTable, gapTokens } from './ApiReferencesTable'; +export type { IApiReferencesTableState } from './ApiReferencesTable'; export * from './ApiReferencesTableSet'; export * from './ApiReferencesTableSet.types'; diff --git a/packages/react-docsite-components/src/components/App/App.tsx b/packages/react-docsite-components/src/components/App/App.tsx index 9d3a88b4f7b9d9..39983b8a1aa5b7 100644 --- a/packages/react-docsite-components/src/components/App/App.tsx +++ b/packages/react-docsite-components/src/components/App/App.tsx @@ -24,12 +24,12 @@ const getClassNames = classNamesFunction(); @withResponsiveMode export class AppBase extends React.Component { public state: IAppState = { isMenuVisible: false, isMenuClosing: false }; - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; private _showOnlyExamples: boolean; private _isStrict: boolean; private _disposables: Function[]; private _appTitle: string; - private _prevPath: string; + private _prevPath!: string; constructor(props: IAppProps) { super(props); diff --git a/packages/react-docsite-components/src/components/ColorPalette/ColorPalette.tsx b/packages/react-docsite-components/src/components/ColorPalette/ColorPalette.tsx index 8f9bd8372e55da..b4a958a61ae0bb 100644 --- a/packages/react-docsite-components/src/components/ColorPalette/ColorPalette.tsx +++ b/packages/react-docsite-components/src/components/ColorPalette/ColorPalette.tsx @@ -26,7 +26,7 @@ export interface IColorPaletteState { } class ColorPaletteBase extends React.Component { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; public constructor(props: IColorPaletteProps) { super(props); diff --git a/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx b/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx index d9064ad31e053c..2ccad57a79fd07 100644 --- a/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx @@ -45,7 +45,7 @@ export class ComponentPageBase extends React.PureComponent private _baseUrl: string; private _showOnlyExamples: boolean; - private _styles: IProcessedStyleSet; + private _styles!: IProcessedStyleSet; constructor(props: IComponentPageProps) { super(props); diff --git a/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx b/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx index 09de3c746ecfdd..31ed6a0e47b11c 100644 --- a/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx +++ b/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx @@ -42,8 +42,8 @@ export class ExampleCardBase extends React.Component; + private _themeOptions!: IDropdownOption[]; + private _classNames!: IProcessedStyleSet; private _activeTheme: Theme | undefined; private _isStrict: boolean; diff --git a/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.tsx b/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.tsx index da63aa9399e62f..646f0551483d34 100644 --- a/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.tsx +++ b/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.tsx @@ -25,8 +25,8 @@ export interface IListItem { const getClassNames = classNamesFunction(); export class FeedbackListBase extends React.Component { - private _classNames: IProcessedStyleSet; - private _isMounted: boolean; + private _classNames!: IProcessedStyleSet; + private _isMounted!: boolean; constructor(props: IFeedbackListProps) { super(props); diff --git a/packages/react-docsite-components/src/components/PlatformBar/PlatformBar.base.tsx b/packages/react-docsite-components/src/components/PlatformBar/PlatformBar.base.tsx index 549f79c855c2b3..3bb5f3dd7608c7 100644 --- a/packages/react-docsite-components/src/components/PlatformBar/PlatformBar.base.tsx +++ b/packages/react-docsite-components/src/components/PlatformBar/PlatformBar.base.tsx @@ -10,7 +10,7 @@ const getClassNames = classNamesFunction extends React.PureComponent< IPlatformBarProps > { - private _classNames: { [key in keyof IPlatformBarStyles]: string }; + private _classNames!: { [key in keyof IPlatformBarStyles]: string }; public render(): JSX.Element { const { styles, theme, platforms, innerWidth } = this.props; diff --git a/packages/react-docsite-components/src/components/SideRail/SideRail.tsx b/packages/react-docsite-components/src/components/SideRail/SideRail.tsx index 2e41936fcb8c1b..4fbf4df4605dc8 100644 --- a/packages/react-docsite-components/src/components/SideRail/SideRail.tsx +++ b/packages/react-docsite-components/src/components/SideRail/SideRail.tsx @@ -21,8 +21,8 @@ const getClassNames = classNamesFunction() class SideRailBase extends React.Component { public readonly state: ISideRailState = {}; - private _classNames: IProcessedStyleSet; - private _observer: IntersectionObserver; + private _classNames!: IProcessedStyleSet; + private _observer!: IntersectionObserver; public componentDidMount(): void { if (typeof IntersectionObserver !== 'undefined') { diff --git a/packages/react-docsite-components/src/utilities/router/index.ts b/packages/react-docsite-components/src/utilities/router/index.ts index fe6921beaf2c17..177e53a764a222 100644 --- a/packages/react-docsite-components/src/utilities/router/index.ts +++ b/packages/react-docsite-components/src/utilities/router/index.ts @@ -1,2 +1,4 @@ -export { Route, IRouteProps } from './Route'; -export { Router, IRouterProps } from './Router'; +export { Route } from './Route'; +export type { IRouteProps } from './Route'; +export { Router } from './Router'; +export type { IRouterProps } from './Router'; diff --git a/packages/react-docsite-components/tsconfig.json b/packages/react-docsite-components/tsconfig.json index 0330b7b3d4ae39..8c765ad4d098a2 100644 --- a/packages/react-docsite-components/tsconfig.json +++ b/packages/react-docsite-components/tsconfig.json @@ -1,23 +1,14 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", - "module": "commonjs", + "module": "CommonJS", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "forceConsistentCasingInFileNames": true, - "noImplicitAny": true, - "noUnusedLocals": true, - "strictNullChecks": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "skipLibCheck": true, - "noImplicitThis": true, - "outDir": "lib", - "lib": ["es5", "dom", "es2015.promise"], - "types": ["webpack-env", "jest"] + "types": ["jest", "webpack-env", "environment"] }, "include": ["src"] } diff --git a/packages/react-examples/.storybook/main.js b/packages/react-examples/.storybook/main.js index 14c27689077276..2ae2e4691df510 100644 --- a/packages/react-examples/.storybook/main.js +++ b/packages/react-examples/.storybook/main.js @@ -1,4 +1,4 @@ -import custom from '@fluentui/scripts/storybook/webpack.config'; +import custom from '../../../scripts/storybook/webpack.config'; import * as path from 'path'; import { merge } from 'webpack-merge'; diff --git a/packages/react-examples/.storybook/tsconfig.json b/packages/react-examples/.storybook/tsconfig.json index c69134e6ba0f36..9ffae8ebe3eb92 100644 --- a/packages/react-examples/.storybook/tsconfig.json +++ b/packages/react-examples/.storybook/tsconfig.json @@ -1,17 +1,11 @@ { - "extends": "../../../tsconfig.base.json", + "extends": "../tsconfig.json", "compilerOptions": { "jsx": "preserve", "noEmit": true, "allowJs": true, "checkJs": true, - "allowSyntheticDefaultImports": true, - "baseUrl": "../../..", - "paths": { - "@fluentui/scripts/storybook/webpack.config": ["scripts/storybook/webpack.config.js"], - "@fluentui/font-icons-mdl2": ["packages/font-icons-mdl2/src/index.ts"], - "@fluentui/storybook": ["packages/storybook/src/index.ts"] - } + "allowSyntheticDefaultImports": true }, "include": ["**/*.js"] } diff --git a/packages/react-examples/src/react-experiments/SelectedPeopleList/SelectedPeopleList.Basic.Example.tsx b/packages/react-examples/src/react-experiments/SelectedPeopleList/SelectedPeopleList.Basic.Example.tsx index e8b0913dedbb44..a35f21bcbb6ce7 100644 --- a/packages/react-examples/src/react-experiments/SelectedPeopleList/SelectedPeopleList.Basic.Example.tsx +++ b/packages/react-examples/src/react-experiments/SelectedPeopleList/SelectedPeopleList.Basic.Example.tsx @@ -10,7 +10,7 @@ export interface IPeopleSelectedItemsListExampleState { } export class SelectedPeopleListBasicExample extends React.Component<{}, IPeopleSelectedItemsListExampleState> { - private index: number; + private index!: number; private addMultipleKey = 50; constructor(props: {}) { diff --git a/packages/react-examples/src/react-experiments/Theming/Theming.Schemes.Custom.Example.tsx b/packages/react-examples/src/react-experiments/Theming/Theming.Schemes.Custom.Example.tsx index 841b24ed2754e1..1c44066fdee1f6 100644 --- a/packages/react-examples/src/react-experiments/Theming/Theming.Schemes.Custom.Example.tsx +++ b/packages/react-examples/src/react-experiments/Theming/Theming.Schemes.Custom.Example.tsx @@ -21,6 +21,7 @@ import { } from '@fluentui/react'; import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button'; +// @ts-expect-error - this is wrong and should be fixed import { CollapsibleSectionRecursiveExample } from '@fluentui/react-examples/lib/react-experiments/CollapsibleSection/CollapsibleSection.Recursive.Example'; import { ThemeProvider as DeprecatedThemeProvider } from '@fluentui/foundation-legacy'; diff --git a/packages/react-examples/src/react-experiments/Theming/Theming.Schemes.Variant.Example.tsx b/packages/react-examples/src/react-experiments/Theming/Theming.Schemes.Variant.Example.tsx index bb9dff394be382..1345f91a007f84 100644 --- a/packages/react-examples/src/react-experiments/Theming/Theming.Schemes.Variant.Example.tsx +++ b/packages/react-examples/src/react-experiments/Theming/Theming.Schemes.Variant.Example.tsx @@ -20,6 +20,7 @@ import { import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button'; import { getNeutralVariant, getSoftVariant, getStrongVariant } from '@fluentui/scheme-utilities'; +// @ts-expect-error - this is wrong and should be fixed import { CollapsibleSectionRecursiveExample } from '@fluentui/react-examples/lib/react-experiments/CollapsibleSection/CollapsibleSection.Recursive.Example'; import { ThemeProvider as DeprecatedThemeProvider } from '@fluentui/foundation-legacy'; diff --git a/packages/react-examples/src/react-experiments/TilesList/TilesList.Document.Example.tsx b/packages/react-examples/src/react-experiments/TilesList/TilesList.Document.Example.tsx index 22bbad31198162..4bd1314b6bda86 100644 --- a/packages/react-examples/src/react-experiments/TilesList/TilesList.Document.Example.tsx +++ b/packages/react-examples/src/react-experiments/TilesList/TilesList.Document.Example.tsx @@ -19,6 +19,7 @@ import { createShimmerGroups, onRenderTilesListExampleRoot, onRenderTilesListExampleRow, + // @ts-expect-error - this is wrong and should be fixed } from '@fluentui/react-examples/lib/react-experiments/TilesList/ExampleHelpers'; import { ShimmerElementType, ShimmerElementsGroup } from '@fluentui/react/lib/Shimmer'; diff --git a/packages/react-examples/src/react-experiments/TilesList/TilesList.Media.Example.tsx b/packages/react-examples/src/react-experiments/TilesList/TilesList.Media.Example.tsx index e56ed2608c9c1c..7427598c5c25eb 100644 --- a/packages/react-examples/src/react-experiments/TilesList/TilesList.Media.Example.tsx +++ b/packages/react-examples/src/react-experiments/TilesList/TilesList.Media.Example.tsx @@ -18,6 +18,7 @@ import { getExampleTilesListCells, onRenderTilesListExampleRoot, onRenderTilesListExampleRow, + // @ts-expect-error - this is wrong and should be fixed } from '@fluentui/react-examples/lib/react-experiments/TilesList/ExampleHelpers'; import * as TilesListExampleStylesModule from './TilesList.Example.scss'; import { lorem } from '@fluentui/example-data'; diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.Advanced.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.Advanced.Example.tsx index 3fc244195dcd00..0a5919cbc2f399 100644 --- a/packages/react-examples/src/react/DetailsList/DetailsList.Advanced.Example.tsx +++ b/packages/react-examples/src/react/DetailsList/DetailsList.Advanced.Example.tsx @@ -95,7 +95,7 @@ export interface IDetailsListAdvancedExampleState { } export class DetailsListAdvancedExample extends React.Component<{}, IDetailsListAdvancedExampleState> { - private _isFetchingItems: boolean; + private _isFetchingItems!: boolean; private _selection: Selection; private _allItems: IExampleItem[]; diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.NavigatingFocus.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.NavigatingFocus.Example.tsx index 1bdedcf6d64509..675c391a9536a6 100644 --- a/packages/react-examples/src/react/DetailsList/DetailsList.NavigatingFocus.Example.tsx +++ b/packages/react-examples/src/react/DetailsList/DetailsList.NavigatingFocus.Example.tsx @@ -61,5 +61,6 @@ export class DetailsListNavigatingFocusExample extends React.Component<{}, IDeta } function generateItems(parent: string): string[] { + // @ts-expect-error - fixme return Array.prototype.map.call('ABCDEFGHI', (name: string) => parent + 'Folder ' + name); } diff --git a/packages/react-examples/src/react/DocumentCard/DocumentCard.Complete.Example.tsx b/packages/react-examples/src/react/DocumentCard/DocumentCard.Complete.Example.tsx index 5e760a9b7c6fa9..0f8ef74dc78018 100644 --- a/packages/react-examples/src/react/DocumentCard/DocumentCard.Complete.Example.tsx +++ b/packages/react-examples/src/react/DocumentCard/DocumentCard.Complete.Example.tsx @@ -129,6 +129,7 @@ Created by Annie Lindqvist in February 23, 2016. 432 views." activity="Created Feb 23, 2016" people={[{ name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale }]} /> + {/* @ts-expect-error - fixme */} ); diff --git a/packages/react-examples/src/react/ExtendedPeoplePicker/ExtendedPeoplePicker.Controlled.Example.tsx b/packages/react-examples/src/react/ExtendedPeoplePicker/ExtendedPeoplePicker.Controlled.Example.tsx index 62d0db2043dd63..ca3722a35ba366 100644 --- a/packages/react-examples/src/react/ExtendedPeoplePicker/ExtendedPeoplePicker.Controlled.Example.tsx +++ b/packages/react-examples/src/react/ExtendedPeoplePicker/ExtendedPeoplePicker.Controlled.Example.tsx @@ -35,7 +35,7 @@ export class ExtendedPeoplePickerControlledExample extends React.Component<{}, I private _selectedItemsListProps: ISelectedPeopleProps; private _focusZoneProps: IFocusZoneProps; private _suggestionProps: IBaseFloatingPickerSuggestionProps; - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: {}) { super(props); diff --git a/packages/react-examples/src/react/ExtendedPicker/ExtendedPeoplePicker.Controlled.Example.tsx b/packages/react-examples/src/react/ExtendedPicker/ExtendedPeoplePicker.Controlled.Example.tsx index 6c4366d8882300..4bc2882c48c169 100644 --- a/packages/react-examples/src/react/ExtendedPicker/ExtendedPeoplePicker.Controlled.Example.tsx +++ b/packages/react-examples/src/react/ExtendedPicker/ExtendedPeoplePicker.Controlled.Example.tsx @@ -35,7 +35,7 @@ export class ExtendedPeoplePickerControlledExample extends React.Component<{}, I private _selectedItemsListProps: ISelectedPeopleProps; private _focusZoneProps: IFocusZoneProps; private _suggestionProps: IBaseFloatingPickerSuggestionProps; - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: {}) { super(props); diff --git a/packages/react-examples/src/react/ThemeGenerator/ThemeGenerator.doc.tsx b/packages/react-examples/src/react/ThemeGenerator/ThemeGenerator.doc.tsx index 9cb3524c5559c1..c1516cfc0654c2 100644 --- a/packages/react-examples/src/react/ThemeGenerator/ThemeGenerator.doc.tsx +++ b/packages/react-examples/src/react/ThemeGenerator/ThemeGenerator.doc.tsx @@ -29,7 +29,7 @@ export interface IThemeGeneratorPageState { } export class ThemeGeneratorPage extends React.Component<{}, IThemeGeneratorPageState> { - private _semanticSlotColorChangeTimeout: number; + private _semanticSlotColorChangeTimeout!: number; private _async: Async; constructor(props: {}) { diff --git a/packages/react-examples/tsconfig.json b/packages/react-examples/tsconfig.json index cde221a5de5dd8..688bcb677a2f4c 100644 --- a/packages/react-examples/tsconfig.json +++ b/packages/react-examples/tsconfig.json @@ -1,28 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2017", + "outDir": "lib", + "lib": ["ES2017", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "skipLibCheck": true, - "lib": ["es5", "dom", "es2015.promise"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["webpack-env", "custom-global", "node", "cypress", "cypress-storybook/cypress", "cypress-real-events"], - "paths": { - "@fluentui/react-examples/lib/*": ["./src/*"], - "@fluentui/react-examples": ["./src"] - } + "types": ["jest", "webpack-env", "environment", "cypress", "cypress-storybook/cypress", "cypress-real-events"] }, "include": ["src"] } diff --git a/packages/react-experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/react-experiments/src/components/Chiclet/ChicletCard.base.tsx index 41a590ec8ad8a5..7e89bb86fd6a82 100644 --- a/packages/react-experiments/src/components/Chiclet/ChicletCard.base.tsx +++ b/packages/react-experiments/src/components/Chiclet/ChicletCard.base.tsx @@ -19,7 +19,7 @@ const imageStyling = mergeStyles({ }); export class ChicletCardBase extends React.Component { - private _classNames: { [key in keyof IChicletCardStyles]: string }; + private _classNames!: { [key in keyof IChicletCardStyles]: string }; public render(): JSX.Element { const { title, description, url, onClick, className, footer, theme, styles } = this.props; diff --git a/packages/react-experiments/src/components/Chiclet/ChicletXsmall.base.tsx b/packages/react-experiments/src/components/Chiclet/ChicletXsmall.base.tsx index 314baec9db089d..37156b9bbf0ac1 100644 --- a/packages/react-experiments/src/components/Chiclet/ChicletXsmall.base.tsx +++ b/packages/react-experiments/src/components/Chiclet/ChicletXsmall.base.tsx @@ -19,7 +19,7 @@ const imageStyling = mergeStyles({ }); export class ChicletXsmallBase extends React.Component { - private _classNames: { [key in keyof IChicletCardStyles]: string }; + private _classNames!: { [key in keyof IChicletCardStyles]: string }; public render(): JSX.Element { const { onClick, title, className, footer, theme, styles, url } = this.props; diff --git a/packages/react-experiments/src/components/FloatingSuggestions/FloatingSuggestions.tsx b/packages/react-experiments/src/components/FloatingSuggestions/FloatingSuggestions.tsx index 5a2a8750aa8694..94c73c9ac19b02 100644 --- a/packages/react-experiments/src/components/FloatingSuggestions/FloatingSuggestions.tsx +++ b/packages/react-experiments/src/components/FloatingSuggestions/FloatingSuggestions.tsx @@ -23,7 +23,7 @@ export class FloatingSuggestions private root = React.createRef(); private suggestionStore: SuggestionsStore; private suggestionsControl: React.RefObject> = React.createRef(); - private currentPromise: PromiseLike; + private currentPromise!: PromiseLike; private isComponentMounted: boolean = false; private _async: Async; diff --git a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx index b3594da7e63d9d..fa47000e931a10 100644 --- a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx +++ b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx @@ -28,7 +28,7 @@ export class PaginationBase extends React.Component { strings: DEFAULT_STRINGS, }; - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IPaginationProps) { super(props); diff --git a/packages/react-experiments/src/components/Sidebar/Sidebar.tsx b/packages/react-experiments/src/components/Sidebar/Sidebar.tsx index cd1a2ac1409457..34cd9413711323 100644 --- a/packages/react-experiments/src/components/Sidebar/Sidebar.tsx +++ b/packages/react-experiments/src/components/Sidebar/Sidebar.tsx @@ -24,10 +24,10 @@ export interface ISidebarState { } export class Sidebar extends React.Component implements ISidebar { - private _theme: ITheme; - private _classNames: ISidebarClassNames; - private _colors: SidebarColors; - private _buttonStyles: IButtonStyles; + private _theme!: ITheme; + private _classNames!: ISidebarClassNames; + private _colors!: SidebarColors; + private _buttonStyles!: IButtonStyles; constructor(props: ISidebarProps) { super(props); diff --git a/packages/react-experiments/src/components/Tile/ShimmerTile/ShimmerTile.base.tsx b/packages/react-experiments/src/components/Tile/ShimmerTile/ShimmerTile.base.tsx index 45a257a620aaf3..3cd2ec63af6b03 100644 --- a/packages/react-experiments/src/components/Tile/ShimmerTile/ShimmerTile.base.tsx +++ b/packages/react-experiments/src/components/Tile/ShimmerTile/ShimmerTile.base.tsx @@ -51,7 +51,7 @@ const PLACEHOLDER_SIZES: { const getClassNames = classNamesFunction(); export class ShimmerTileBase extends React.Component { - private _classNames: { [key in keyof IShimmerTileStyles]: string }; + private _classNames!: { [key in keyof IShimmerTileStyles]: string }; constructor(props: IShimmerTileProps) { super(props); diff --git a/packages/react-experiments/src/components/VirtualizedList/VirtualizedList.tsx b/packages/react-experiments/src/components/VirtualizedList/VirtualizedList.tsx index 00cbe8f58032fb..ccec3bfb70f4a4 100644 --- a/packages/react-experiments/src/components/VirtualizedList/VirtualizedList.tsx +++ b/packages/react-experiments/src/components/VirtualizedList/VirtualizedList.tsx @@ -28,7 +28,7 @@ export class VirtualizedList extends React.Compone IVirtualizedListState > { public static contextTypes: typeof ScrollContainerContextTypes = ScrollContainerContextTypes; - public context: IScrollContainerContext; + public context!: IScrollContainerContext; private _root = React.createRef(); diff --git a/packages/react-experiments/src/utilities/scrolling/ScrollContainer.tsx b/packages/react-experiments/src/utilities/scrolling/ScrollContainer.tsx index cd00b28b981261..c06f350f2659d3 100644 --- a/packages/react-experiments/src/utilities/scrolling/ScrollContainer.tsx +++ b/packages/react-experiments/src/utilities/scrolling/ScrollContainer.tsx @@ -28,9 +28,9 @@ export const ScrollContainerContextTypes = { export class ScrollContainer extends React.Component implements IScrollContainer { public static childContextTypes: typeof ScrollContainerContextTypes = ScrollContainerContextTypes; - private _observer: IntersectionObserver; + private _observer!: IntersectionObserver; - private _root: HTMLDivElement; + private _root!: HTMLDivElement; private _callbacks: IVisibleCallback[] = []; private _pendingElements: Element[] = []; diff --git a/packages/react-experiments/tsconfig.json b/packages/react-experiments/tsconfig.json index 709df1bad823cf..9df869d8650ba3 100644 --- a/packages/react-experiments/tsconfig.json +++ b/packages/react-experiments/tsconfig.json @@ -1,25 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "skipLibCheck": true, - "lib": ["es5", "dom"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"], - "isolatedModules": true + "types": ["jest"] }, "include": ["src"] } diff --git a/packages/react-file-type-icons/tsconfig.json b/packages/react-file-type-icons/tsconfig.json index 7aceb9761b0819..e7c9af6cb4147f 100644 --- a/packages/react-file-type-icons/tsconfig.json +++ b/packages/react-file-type-icons/tsconfig.json @@ -1,21 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", - "module": "commonjs", - "lib": ["es5", "dom"], + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": false, - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"], - // Must be false when preserveConstEnums is false - "isolatedModules": false + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.tsx b/packages/react-focus/src/components/FocusZone/FocusZone.tsx index 63d49c4c96710a..698ba62f207a19 100644 --- a/packages/react-focus/src/components/FocusZone/FocusZone.tsx +++ b/packages/react-focus/src/components/FocusZone/FocusZone.tsx @@ -121,7 +121,7 @@ export class FocusZone extends React.Component implements IFocu private _id: string; /** The most recently focused child element. */ - private _activeElement: HTMLElement | null; + private _activeElement!: HTMLElement | null; /** * The index path to the last focused child element. @@ -132,12 +132,12 @@ export class FocusZone extends React.Component implements IFocu * Flag to define when we've intentionally parked focus on the root element to temporarily * hold focus until items appear within the zone. */ - private _isParked: boolean; + private _isParked!: boolean; /** The child element with tabindex=0. */ - private _defaultFocusElement: HTMLElement | null; + private _defaultFocusElement!: HTMLElement | null; private _focusAlignment: Point; - private _isInnerZone: boolean; + private _isInnerZone!: boolean; private _parkedTabIndex: string | null | undefined; /** Used to allow moving to next focusable element even when we're focusing on a input element when pressing tab */ diff --git a/packages/react-focus/tsconfig.json b/packages/react-focus/tsconfig.json index 025ccbc9718611..9df869d8650ba3 100644 --- a/packages/react-focus/tsconfig.json +++ b/packages/react-focus/tsconfig.json @@ -1,24 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es2015", "dom", "es2015.promise"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"], - "isolatedModules": true + "types": ["jest"] }, "include": ["src"] } diff --git a/packages/react-hooks/src/useOnEvent.ts b/packages/react-hooks/src/useOnEvent.ts index f332030a013b86..e71eb474c829d3 100644 --- a/packages/react-hooks/src/useOnEvent.ts +++ b/packages/react-hooks/src/useOnEvent.ts @@ -24,7 +24,7 @@ export function useOnEvent( return; } - const dispose = on(actualElement, eventName, (ev: TEvent) => callbackRef.current(ev), useCapture); + const dispose = on(actualElement, eventName, ev => callbackRef.current(ev as TEvent), useCapture); return dispose; }, [element, eventName, useCapture]); } diff --git a/packages/react-hooks/tsconfig.json b/packages/react-hooks/tsconfig.json index 708556e846c1c7..9df869d8650ba3 100644 --- a/packages/react-hooks/tsconfig.json +++ b/packages/react-hooks/tsconfig.json @@ -1,24 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es5", "dom"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"], - "isolatedModules": true + "types": ["jest"] }, "include": ["src"] } diff --git a/packages/react-icon-provider/tsconfig.json b/packages/react-icon-provider/tsconfig.json index 0470864c3dd0a7..e7c9af6cb4147f 100644 --- a/packages/react-icon-provider/tsconfig.json +++ b/packages/react-icon-provider/tsconfig.json @@ -1,23 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "ES2019", - "module": "CommonJS", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strict": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["ES2019", "DOM"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"], - "isolatedModules": true + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/react-icons-mdl2-branded/tsconfig.json b/packages/react-icons-mdl2-branded/tsconfig.json index e14b6d79ca44bf..e7c9af6cb4147f 100644 --- a/packages/react-icons-mdl2-branded/tsconfig.json +++ b/packages/react-icons-mdl2-branded/tsconfig.json @@ -1,22 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "ES2019", - "module": "CommonJS", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strict": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["ES2019", "DOM"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["custom-global"] + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/react-icons-mdl2/tsconfig.json b/packages/react-icons-mdl2/tsconfig.json index 32fa109c8421f1..e7c9af6cb4147f 100644 --- a/packages/react-icons-mdl2/tsconfig.json +++ b/packages/react-icons-mdl2/tsconfig.json @@ -1,23 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "ES2019", - "module": "CommonJS", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["ES2019", "DOM"], - "types": ["jest"], - "isolatedModules": true + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/react-monaco-editor/src/components/Editor.tsx b/packages/react-monaco-editor/src/components/Editor.tsx index 3a73112f6d2ec6..098408cff202ff 100644 --- a/packages/react-monaco-editor/src/components/Editor.tsx +++ b/packages/react-monaco-editor/src/components/Editor.tsx @@ -4,6 +4,8 @@ import { CODE_FONT_FAMILY, DEFAULT_WIDTH, DEFAULT_HEIGHT } from './consts'; import type { IEditorProps } from './Editor.types'; import type { IMonacoTextModel } from '../interfaces/index'; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type Any = any; /** * Language-agnostic wrapper for a Monaco editor instance. */ @@ -34,12 +36,12 @@ export const Editor: React.FunctionComponent = (props: IEditorProp const divRef = React.useRef(null); React.useEffect(() => { - const model = (modelRef.current = monaco.editor.createModel( + const model = (modelRef.current = (monaco as Any).editor.createModel( code, language, - filename ? monaco.Uri.parse(filename) : undefined, + filename ? (monaco as Any).Uri.parse(filename) : undefined, )); - const editor = monaco.editor.create(divRef.current!, { + const editor = (monaco as Any).editor.create(divRef.current!, { minimap: { enabled: false }, fontFamily: CODE_FONT_FAMILY, ariaLabel, diff --git a/packages/react-monaco-editor/src/components/TsxEditor.tsx b/packages/react-monaco-editor/src/components/TsxEditor.tsx index 3fd189f6a6db97..74c9e7d3bb5339 100644 --- a/packages/react-monaco-editor/src/components/TsxEditor.tsx +++ b/packages/react-monaco-editor/src/components/TsxEditor.tsx @@ -9,7 +9,10 @@ import type { ITsxEditorProps } from './TsxEditor.types'; import type { IMonacoTextModel, ICompilerOptions, IPackageGroup } from '../interfaces/index'; import type { IEditorProps } from './Editor.types'; -const typescript = monaco.languages.typescript; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type Any = any; + +const typescript = (monaco as Any).languages.typescript; const typescriptDefaults = typescript.typescriptDefaults; const filePrefix = 'file:///'; diff --git a/packages/react-monaco-editor/src/demo/App.tsx b/packages/react-monaco-editor/src/demo/App.tsx index d720ba915f0142..f09aea7949d39c 100644 --- a/packages/react-monaco-editor/src/demo/App.tsx +++ b/packages/react-monaco-editor/src/demo/App.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import { mergeStyleSets, Stack, Toggle } from '@fluentui/react'; import { useBoolean } from '@fluentui/react-hooks'; import { EditorWrapper } from '../components/EditorWrapper'; diff --git a/packages/react-monaco-editor/src/demo/index.tsx b/packages/react-monaco-editor/src/demo/index.tsx index 00076ccc662432..edfe4039fa76db 100644 --- a/packages/react-monaco-editor/src/demo/index.tsx +++ b/packages/react-monaco-editor/src/demo/index.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import { App } from './App'; import { mergeStyles, initializeIcons, ThemeProvider } from '@fluentui/react'; diff --git a/packages/react-monaco-editor/src/imports.test.ts b/packages/react-monaco-editor/src/imports.test.ts index bb96a2bd99018e..1a809c6028131c 100644 --- a/packages/react-monaco-editor/src/imports.test.ts +++ b/packages/react-monaco-editor/src/imports.test.ts @@ -1,3 +1,5 @@ +export {}; + describe('monaco imports', () => { // The 2nd test is meant to verify that Monaco hasn't been included somewhere it shouldn't be, // since that would cause a significant bundle size impact to consumers. diff --git a/packages/react-monaco-editor/src/transpiler/transpile.ts b/packages/react-monaco-editor/src/transpiler/transpile.ts index 22cc25ebec277d..df069b47b1378b 100644 --- a/packages/react-monaco-editor/src/transpiler/transpile.ts +++ b/packages/react-monaco-editor/src/transpiler/transpile.ts @@ -11,6 +11,9 @@ const win = getWindow() as }) | undefined; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type Any = any; + /** * Transpile the model's current code from TS to JS. */ @@ -19,16 +22,19 @@ const win = getWindow() as export function transpile(model: IMonacoTextModel): Promise { const transpiledOutput: ITransformedCode = { error: undefined, output: undefined }; const filename = model.uri.toString(); - return monaco.languages.typescript + return (monaco as Any).languages.typescript .getTypeScriptWorker() - .then(getWorker => getWorker(model.uri)) - .then(worker => { - return worker.getEmitOutput(filename).then(output => { + .then((getWorker: Any) => getWorker(model.uri)) + .then((worker: Any) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + return worker.getEmitOutput(filename).then((output: any) => { // Get diagnostics to find out if there were any syntax errors (there's also getSemanticDiagnostics // for type errors etc, but it may be better to allow the user to just find and fix those // via intellisense rather than blocking compilation, since they may be non-fatal) - return worker.getSyntacticDiagnostics(filename).then(syntacticDiagnostics => { - syntacticDiagnostics = syntacticDiagnostics.filter(d => d.category === 1 /*error*/); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + return worker.getSyntacticDiagnostics(filename).then((syntacticDiagnostics: any) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + syntacticDiagnostics = syntacticDiagnostics.filter((d: any) => d.category === 1 /*error*/); if (syntacticDiagnostics.length) { // Don't try to run the example if there's a syntax error @@ -46,7 +52,7 @@ export function transpile(model: IMonacoTextModel): Promise { }); }); }) - .catch(ex => { + .catch((ex: Any) => { // Log the error to the console so people can see the full stack/etc if they want // eslint-disable-next-line no-console console.error(ex); diff --git a/packages/react-monaco-editor/src/transpiler/transpileHelpers.test.ts b/packages/react-monaco-editor/src/transpiler/transpileHelpers.test.ts index 027d0795df8438..b3bf6b19d53416 100644 --- a/packages/react-monaco-editor/src/transpiler/transpileHelpers.test.ts +++ b/packages/react-monaco-editor/src/transpiler/transpileHelpers.test.ts @@ -1,5 +1,5 @@ -import fs from 'fs'; -import path from 'path'; +import * as fs from 'fs'; +import * as path from 'path'; import { _getLineStarts, _getErrorLineInfo, _getErrorMessages, _supportedPackageToGlobalMap } from './transpileHelpers'; import { SUPPORTED_PACKAGES } from '../utilities/defaultSupportedPackages'; import type { IDiagnostic } from './transpileHelpers'; diff --git a/packages/react-monaco-editor/tsconfig.json b/packages/react-monaco-editor/tsconfig.json index e09e3d5680666b..ed83f03c0c1871 100644 --- a/packages/react-monaco-editor/tsconfig.json +++ b/packages/react-monaco-editor/tsconfig.json @@ -1,24 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "esModuleInterop": true, - "preserveConstEnums": true, - "lib": ["es5", "dom", "es2015.promise", "es2015.iterable"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "webpack-env", "custom-global", "node"] + "types": ["jest", "node", "webpack-env", "environment"] }, "include": ["src"] } diff --git a/packages/react-window-provider/tsconfig.json b/packages/react-window-provider/tsconfig.json index 7064abfe57c89b..9df869d8650ba3 100644 --- a/packages/react-window-provider/tsconfig.json +++ b/packages/react-window-provider/tsconfig.json @@ -1,22 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strict": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es2015", "dom", "es2015.promise"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"] + "types": ["jest"] }, "include": ["src"] } diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx index ffe8d5e0c15d2e..a3e106ecd60964 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx @@ -58,7 +58,7 @@ export class BreadcrumbBase extends React.Component { overflowIndex: 0, }; - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; private _focusZone = React.createRef(); constructor(props: IBreadcrumbProps) { @@ -174,7 +174,7 @@ export class BreadcrumbBase extends React.Component { text: item.text, name: item.text, key: item.key, - onClick: item.onClick ? this._onBreadcrumbClicked.bind(this, item) : null, + onClick: item.onClick ? this._onBreadcrumbClicked.bind(this, item) : undefined, href: item.href, disabled: !isActionable, itemProps: isActionable ? undefined : nonActionableItemProps, diff --git a/packages/react/src/components/Button/BaseButton.tsx b/packages/react/src/components/Button/BaseButton.tsx index 0047c28405a10d..18c98cbd7f943c 100644 --- a/packages/react/src/components/Button/BaseButton.tsx +++ b/packages/react/src/components/Button/BaseButton.tsx @@ -74,8 +74,8 @@ export class BaseButton extends React.Component; + private _currentPromise!: PromiseLike; /** The current visible value sent to the auto fill on render */ private _currentVisibleValue: string | undefined; - private _classNames: IComboBoxClassNames; + private _classNames!: IComboBoxClassNames; private _isScrollIdle: boolean; - private _hasPendingValue: boolean; + private _hasPendingValue!: boolean; private _scrollIdleTimeoutId: number | undefined; private _processingTouch: boolean; private _lastTouchTimeoutId: number | undefined; @@ -253,7 +253,7 @@ class ComboBoxInternal extends React.Component implem private _overflowSet = React.createRef(); private _resizeGroup = React.createRef(); - private _classNames: { [key in keyof ICommandBarStyles]: string }; + private _classNames!: { [key in keyof ICommandBarStyles]: string }; constructor(props: ICommandBarProps) { super(props); @@ -209,7 +209,9 @@ export class CommandBarBase extends React.Component implem return ; }; - private _onButtonClick(item: ICommandBarItemProps): (ev: React.MouseEvent) => void { + private _onButtonClick( + item: ICommandBarItemProps, + ): (ev?: React.MouseEvent | React.KeyboardEvent) => void { return ev => { // inactive is deprecated. remove check in 7.0 // eslint-disable-next-line deprecation/deprecation diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx index e675e735ff8fff..2fad422a2c1304 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx @@ -9,7 +9,7 @@ import type { IKeytipProps } from '../../../Keytip'; export class ContextualMenuAnchor extends ContextualMenuItemWrapper { private _anchor = React.createRef(); - private _ariaDescriptionId: string; + private _ariaDescriptionId!: string; private _getMemoizedMenuButtonKeytipProps = memoizeFunction((keytipProps: IKeytipProps) => { return { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx index 23a3a4b77d6ee8..ec364b46817145 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx @@ -9,7 +9,7 @@ import type { IKeytipProps } from '../../../Keytip'; export class ContextualMenuButton extends ContextualMenuItemWrapper { private _btn = React.createRef(); - private _ariaDescriptionId: string; + private _ariaDescriptionId!: string; private _getMemoizedMenuButtonKeytipProps = memoizeFunction((keytipProps: IKeytipProps) => { return { diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx index 32053d792f0cba..7f19adb8c19413 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx @@ -25,10 +25,10 @@ export interface IContextualMenuSplitButtonState {} const TouchIdleDelay = 500; /* ms */ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper { - private _splitButton: HTMLDivElement; + private _splitButton!: HTMLDivElement; private _lastTouchTimeoutId: number | undefined; - private _processingTouch: boolean; - private _ariaDescriptionId: string; + private _processingTouch!: boolean; + private _ariaDescriptionId!: string; private _async: Async; private _events: EventGroup; @@ -107,7 +107,9 @@ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper { aria-setsize={totalItemCount} onMouseEnter={this._onItemMouseEnterPrimary} onMouseLeave={ - onItemMouseLeave ? onItemMouseLeave.bind(this, { ...item, subMenuProps: null, items: null }) : undefined + onItemMouseLeave + ? onItemMouseLeave.bind(this, { ...item, subMenuProps: undefined, items: undefined }) + : undefined } onMouseMove={this._onItemMouseMovePrimary} onKeyDown={this._onItemKeyDown} diff --git a/packages/react/src/components/DetailsList/DetailsColumn.base.tsx b/packages/react/src/components/DetailsList/DetailsColumn.base.tsx index f46241d4380364..9169dc30fb9ffa 100644 --- a/packages/react/src/components/DetailsList/DetailsColumn.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsColumn.base.tsx @@ -45,7 +45,7 @@ export class DetailsColumnBase extends React.Component { private _events: EventGroup; private _root = React.createRef(); private _dragDropSubscription?: IDisposable; - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDetailsColumnProps) { super(props); diff --git a/packages/react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/react/src/components/DetailsList/DetailsHeader.base.tsx index eb50bb32f5aeab..781fcf1ef3f0ea 100644 --- a/packages/react/src/components/DetailsList/DetailsHeader.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsHeader.base.tsx @@ -44,7 +44,7 @@ export class DetailsHeaderBase useFastIcons: true, }; - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; private _rootElement = React.createRef(); private _events: EventGroup; private _rootComponent = React.createRef(); diff --git a/packages/react/src/components/DetailsList/DetailsRow.base.tsx b/packages/react/src/components/DetailsList/DetailsRow.base.tsx index e47d2095b83422..e3fcca42e989e8 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsRow.base.tsx @@ -54,12 +54,12 @@ export class DetailsRowBase extends React.Component(); private _droppingClassNames: string; /** Whether this.props.onDidMount has been called */ - private _onDidMountCalled: boolean; + private _onDidMountCalled!: boolean; private _dragDropSubscription?: IDisposable; - private _classNames: IProcessedStyleSet; - private _rowClassNames: IDetailsRowFieldsProps['rowClassNames']; - private _ariaRowDescriptionId: string; + private _classNames!: IProcessedStyleSet; + private _rowClassNames!: IDetailsRowFieldsProps['rowClassNames']; + private _ariaRowDescriptionId!: string; public static getDerivedStateFromProps( nextProps: IDetailsRowBaseProps, diff --git a/packages/react/src/components/DetailsList/ShimmeredDetailsList.base.tsx b/packages/react/src/components/DetailsList/ShimmeredDetailsList.base.tsx index 4c6a8a020aaee8..8884a4f69eb67b 100644 --- a/packages/react/src/components/DetailsList/ShimmeredDetailsList.base.tsx +++ b/packages/react/src/components/DetailsList/ShimmeredDetailsList.base.tsx @@ -24,7 +24,7 @@ const SHIMMER_LINE_VS_CELL_WIDTH_RATIO = 0.95; export class ShimmeredDetailsListBase extends React.Component { private _shimmerItems: null[]; - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IShimmeredDetailsListProps) { super(props); diff --git a/packages/react/src/components/Dialog/DialogFooter.base.tsx b/packages/react/src/components/Dialog/DialogFooter.base.tsx index 0ef141285b1ccb..b0709991f19047 100644 --- a/packages/react/src/components/Dialog/DialogFooter.base.tsx +++ b/packages/react/src/components/Dialog/DialogFooter.base.tsx @@ -6,7 +6,7 @@ import type { IProcessedStyleSet } from '../../Styling'; const getClassNames = classNamesFunction(); export class DialogFooterBase extends React.Component { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDialogFooterProps) { super(props); diff --git a/packages/react/src/components/DocumentCard/DocumentCard.base.tsx b/packages/react/src/components/DocumentCard/DocumentCard.base.tsx index 051a983faa7bc5..c28b6bdcd3ad1c 100644 --- a/packages/react/src/components/DocumentCard/DocumentCard.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCard.base.tsx @@ -29,7 +29,7 @@ export class DocumentCardBase extends React.Component i }; private _rootElement = React.createRef(); - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDocumentCardProps) { super(props); diff --git a/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx index 5d96580f087626..8c5d0327408b84 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx @@ -15,7 +15,7 @@ const getClassNames = classNamesFunction { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDocumentCardActionsProps) { super(props); diff --git a/packages/react/src/components/DocumentCard/DocumentCardActivity.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardActivity.base.tsx index f8ffe0fb64813d..33f626b765b20a 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardActivity.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardActivity.base.tsx @@ -16,7 +16,7 @@ const getClassNames = classNamesFunction { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDocumentCardActivityProps) { super(props); diff --git a/packages/react/src/components/DocumentCard/DocumentCardDetails.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardDetails.base.tsx index acf7ebaa657d3c..844c4137aca5c3 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardDetails.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardDetails.base.tsx @@ -13,7 +13,7 @@ const getClassNames = classNamesFunction { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDocumentCardDetailsProps) { super(props); diff --git a/packages/react/src/components/DocumentCard/DocumentCardImage.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardImage.base.tsx index 6763d6899b8893..f4ca30b8935cc9 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardImage.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardImage.base.tsx @@ -19,7 +19,7 @@ const getClassNames = classNamesFunction { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDocumentCardImageProps) { super(props); diff --git a/packages/react/src/components/DocumentCard/DocumentCardLocation.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardLocation.base.tsx index 584cdefe4224c4..727f2d4bcb0615 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardLocation.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardLocation.base.tsx @@ -13,7 +13,7 @@ const getClassNames = classNamesFunction { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDocumentCardLocationProps) { super(props); diff --git a/packages/react/src/components/DocumentCard/DocumentCardLogo.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardLogo.base.tsx index b6db49436b3e34..0d5397bd3146d8 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardLogo.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardLogo.base.tsx @@ -14,7 +14,7 @@ const getClassNames = classNamesFunction { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDocumentCardLogoProps) { super(props); diff --git a/packages/react/src/components/DocumentCard/DocumentCardPreview.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardPreview.base.tsx index 48342a12c29bc0..b94c783da35153 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardPreview.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardPreview.base.tsx @@ -18,7 +18,7 @@ const getClassNames = classNamesFunction { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDocumentCardPreviewProps) { super(props); diff --git a/packages/react/src/components/DocumentCard/DocumentCardStatus.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardStatus.base.tsx index fa1b00ff486db6..082f3ccca01501 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardStatus.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardStatus.base.tsx @@ -15,7 +15,7 @@ const getClassNames = classNamesFunction { - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; constructor(props: IDocumentCardStatusProps) { super(props); diff --git a/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx index b0671762d16c75..4da0c2311fe09d 100644 --- a/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx +++ b/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx @@ -23,7 +23,7 @@ const TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5; */ export class DocumentCardTitleBase extends React.Component { private _titleElement = React.createRef(); - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; private _async: Async; private _events: EventGroup; private _clientWidth: number | undefined; diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx index ce015ed43d7ed5..c1f8601ecd51b7 100644 --- a/packages/react/src/components/Dropdown/Dropdown.base.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx @@ -203,12 +203,12 @@ class DropdownInternal extends React.Component; + private _classNames!: IProcessedStyleSet; private _requestAnimationFrame = safeRequestAnimationFrame(this); /** Flag for when we get the first mouseMove */ - private _gotMouseMove: boolean; + private _gotMouseMove!: boolean; /** Flag for tracking whether focus is triggered by click (alternatively triggered by keyboard nav) */ - private _isFocusedByClick: boolean; + private _isFocusedByClick!: boolean; constructor(props: IDropdownInternalProps) { super(props); diff --git a/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.ts b/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.ts index 5b5b9726c71e1f..da51fb4829fa59 100644 --- a/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.ts +++ b/packages/react/src/components/Dropdown/utilities/DropdownSizePosCache.ts @@ -12,8 +12,8 @@ import type { IDropdownOption } from '../Dropdown.types'; * cache should provide a little bit of relief. */ export class DropdownSizePosCache { - private _cachedOptions: IDropdownOption[]; - private _displayOnlyOptionsCache: number[]; + private _cachedOptions!: IDropdownOption[]; + private _displayOnlyOptionsCache!: number[]; private _size = 0; /** diff --git a/packages/react/src/components/Facepile/Facepile.base.tsx b/packages/react/src/components/Facepile/Facepile.base.tsx index bb412e7c22bba2..14c3e26a396b97 100644 --- a/packages/react/src/components/Facepile/Facepile.base.tsx +++ b/packages/react/src/components/Facepile/Facepile.base.tsx @@ -174,8 +174,10 @@ export class FacepileBase extends React.Component { {...getNativeProps(persona, buttonProperties)} {...this._getElementProps(persona, showTooltip, index)} keytipProps={keytipProps} - // eslint-disable-next-line react/jsx-no-bind + /* eslint-disable react/jsx-no-bind */ + // @ts-expect-error - fixme onClick={this._onPersonaClick.bind(this, persona)} + /* eslint-enable react/jsx-no-bind */ > {personaControl} diff --git a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx index 3c969a4698e230..404312e55b224d 100644 --- a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx +++ b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx @@ -20,7 +20,7 @@ export interface IBaseFloatingPickerState { export class BaseFloatingPicker> extends React.Component implements IBaseFloatingPicker { - protected selection: Selection; + protected selection!: Selection; protected root = React.createRef(); protected suggestionStore: SuggestionsStore; @@ -28,7 +28,7 @@ export class BaseFloatingPicker> protected SuggestionsControlOfProperType: new ( props: ISuggestionsControlProps, ) => SuggestionsControl = SuggestionsControl as new (props: ISuggestionsControlProps) => SuggestionsControl; - protected currentPromise: PromiseLike; + protected currentPromise!: PromiseLike; protected isComponentMounted: boolean = false; private _async: Async; diff --git a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx index e4c6d2c911ad2e..770cea53e0081c 100644 --- a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx +++ b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx @@ -57,8 +57,8 @@ export class SuggestionsHeaderFooterItem extends React.Component extends React.Component, ISuggestionsControlState> { - protected _forceResolveButton: IButton; - protected _searchForMoreButton: IButton; + protected _forceResolveButton!: IButton; + protected _searchForMoreButton!: IButton; protected _selectedElement = React.createRef(); protected _suggestions = React.createRef>(); private SuggestionsOfProperType: new ( diff --git a/packages/react/src/components/GroupedList/GroupHeader.base.tsx b/packages/react/src/components/GroupedList/GroupHeader.base.tsx index 477a3be1cf3a49..7939fdebdd12fa 100644 --- a/packages/react/src/components/GroupedList/GroupHeader.base.tsx +++ b/packages/react/src/components/GroupedList/GroupHeader.base.tsx @@ -26,7 +26,7 @@ export class GroupHeaderBase extends React.Component; + private _classNames!: IProcessedStyleSet; private _id: string; public static getDerivedStateFromProps( diff --git a/packages/react/src/components/GroupedList/GroupedList.base.tsx b/packages/react/src/components/GroupedList/GroupedList.base.tsx index faef5130a99934..61ba6506cef41a 100644 --- a/packages/react/src/components/GroupedList/GroupedList.base.tsx +++ b/packages/react/src/components/GroupedList/GroupedList.base.tsx @@ -38,7 +38,7 @@ export class GroupedListBase extends React.Component; + private _classNames!: IProcessedStyleSet; private _list = React.createRef(); diff --git a/packages/react/src/components/HoverCard/ExpandingCard.base.tsx b/packages/react/src/components/HoverCard/ExpandingCard.base.tsx index b51d2ecf49832c..10212bc7a0f90e 100644 --- a/packages/react/src/components/HoverCard/ExpandingCard.base.tsx +++ b/packages/react/src/components/HoverCard/ExpandingCard.base.tsx @@ -18,7 +18,7 @@ export class ExpandingCardBase extends React.Component(); private _async: Async; diff --git a/packages/react/src/components/HoverCard/HoverCard.base.tsx b/packages/react/src/components/HoverCard/HoverCard.base.tsx index 7f93ef0c5283ec..476b140dec80b1 100644 --- a/packages/react/src/components/HoverCard/HoverCard.base.tsx +++ b/packages/react/src/components/HoverCard/HoverCard.base.tsx @@ -40,14 +40,14 @@ export class HoverCardBase extends React.Component(); - private _dismissTimerId: number; - private _openTimerId: number; - private _currentMouseTarget: EventTarget | null; + private _dismissTimerId!: number; + private _openTimerId!: number; + private _currentMouseTarget!: EventTarget | null; private _nativeDismissEvent: (ev?: any) => void; private _childDismissEvent: (ev?: any) => void; - private _classNames: { [key in keyof IHoverCardStyles]: string }; + private _classNames!: { [key in keyof IHoverCardStyles]: string }; private _async: Async; private _events: EventGroup; diff --git a/packages/react/src/components/HoverCard/PlainCard/PlainCard.base.tsx b/packages/react/src/components/HoverCard/PlainCard/PlainCard.base.tsx index d45d7e4a40205e..f7978a2f03411e 100644 --- a/packages/react/src/components/HoverCard/PlainCard/PlainCard.base.tsx +++ b/packages/react/src/components/HoverCard/PlainCard/PlainCard.base.tsx @@ -7,7 +7,7 @@ import type { IPlainCardProps, IPlainCardStyles, IPlainCardStyleProps } from './ const getClassNames = classNamesFunction(); export class PlainCardBase extends React.Component { - private _classNames: { [key in keyof IPlainCardStyles]: string }; + private _classNames!: { [key in keyof IPlainCardStyles]: string }; constructor(props: IPlainCardProps) { super(props); diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx index 46008e972c6794..e4dd42185e9284 100644 --- a/packages/react/src/components/Icon/Icon.tsx +++ b/packages/react/src/components/Icon/Icon.tsx @@ -9,6 +9,8 @@ import type { IIconProps, IIconStyleProps, IIconStyles } from './Icon.types'; * or `ImageIcon` instead, especially in scenarios where rendering performance is important. * {@docCategory Icon} */ + +export const helloWorld = 'world'; export const Icon: React.FunctionComponent = styled( IconBase, getStyles, diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx index 0dec0dbf36e455..fdb75f4c9bbc12 100644 --- a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx +++ b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx @@ -65,15 +65,15 @@ export class KeytipLayerBase extends React.Component extends React.Component, IListState> }; private _focusedIndex: number; private _scrollElement?: HTMLElement; - private _hasCompletedFirstRender: boolean; + private _hasCompletedFirstRender!: boolean; // surface rect relative to window private _surfaceRect: IRectangle | undefined; // The visible rect that we're required to render given the current list state. - private _requiredRect: IRectangle | null; + private _requiredRect!: IRectangle | null; // The visible rect that we're allowed to keep rendered. Pages outside of this rect will be removed. - private _allowedRect: IRectangle; + private _allowedRect!: IRectangle; // The rect that is visible to the user private _visibleRect: IRectangle | undefined; // materialized rect around visible items, relative to surface - private _materializedRect: IRectangle | null; + private _materializedRect!: IRectangle | null; private _requiredWindowsAhead: number; private _requiredWindowsBehind: number; private _measureVersion: number; private _scrollHeight?: number; - private _scrollTop: number; + private _scrollTop!: number; private _pageCache: IPageCache; public static getDerivedStateFromProps( diff --git a/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx b/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx index 79de834f3dedd8..a1ae45f9f91add 100644 --- a/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx +++ b/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx @@ -45,7 +45,7 @@ export class MarqueeSelectionBase extends React.Component(); private _dragOrigin: Point | undefined; - private _rootRect: IRectangle; + private _rootRect!: IRectangle; private _lastMouseEvent: MouseEvent | undefined; private _autoScroll: AutoScroll | undefined; private _selectedIndicies: { [key: string]: boolean } | undefined; @@ -54,9 +54,9 @@ export class MarqueeSelectionBase extends React.Component = React.forwardRef< - HTMLDivElement, - IOverflowSetProps ->((props, forwardedRef) => { +export const OverflowSetBase = React.forwardRef((props, forwardedRef) => { const divContainer = React.useRef(null); const mergedRef = useMergedRefs(divContainer, forwardedRef); useComponentRef(props, divContainer); @@ -67,5 +64,5 @@ export const OverflowSetBase: React.FunctionComponent = React {overflowSide === 'end' && showOverflow && }
); -}); +}) as React.FunctionComponent; OverflowSetBase.displayName = COMPONENT_NAME; diff --git a/packages/react/src/components/Panel/Panel.base.tsx b/packages/react/src/components/Panel/Panel.base.tsx index e19fd9c52f8bf1..af164be0ba83df 100644 --- a/packages/react/src/components/Panel/Panel.base.tsx +++ b/packages/react/src/components/Panel/Panel.base.tsx @@ -51,8 +51,8 @@ export class PanelBase extends React.Component impleme private _async: Async; private _events: EventGroup; private _panel = React.createRef(); - private _classNames: IProcessedStyleSet; - private _scrollableContent: HTMLDivElement | null; + private _classNames!: IProcessedStyleSet; + private _scrollableContent!: HTMLDivElement | null; private _animationCallback: number | null = null; private _hasCustomNavigation: boolean = !!(this.props.onRenderNavigation || this.props.onRenderNavigationContent); private _headerTextId: string | undefined; diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx index 34635c30cadb79..c3563d0aa02ee4 100644 --- a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx +++ b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx @@ -36,7 +36,7 @@ export class ScrollablePaneBase private _contentContainer = React.createRef(); private _subscribers: Set; private _stickies: Set; - private _mutationObserver: MutationObserver; + private _mutationObserver!: MutationObserver; private _notifyThrottled: () => void; private _async: Async; private _events: EventGroup; @@ -94,7 +94,7 @@ export class ScrollablePaneBase if ('MutationObserver' in window) { this._mutationObserver = new MutationObserver(mutation => { // Function to check if mutation is occuring in stickyAbove or stickyBelow - function checkIfMutationIsSticky(mutationRecord: MutationRecord): boolean { + function checkIfMutationIsSticky(this: ScrollablePaneBase, mutationRecord: MutationRecord): boolean { if (this.stickyAbove !== null && this.stickyBelow !== null) { return this.stickyAbove.contains(mutationRecord.target) || this.stickyBelow.contains(mutationRecord.target); } diff --git a/packages/react/src/components/SearchBox/SearchBox.base.tsx b/packages/react/src/components/SearchBox/SearchBox.base.tsx index fec0406b6ae14b..b547636958f12b 100644 --- a/packages/react/src/components/SearchBox/SearchBox.base.tsx +++ b/packages/react/src/components/SearchBox/SearchBox.base.tsx @@ -66,7 +66,7 @@ export const SearchBoxBase: React.FunctionComponent = React.for const [uncastValue, setValue] = useControllableValue( props.value, defaultValue, - (ev: React.ChangeEvent | undefined, newValue: string) => { + (ev: React.ChangeEvent | undefined, newValue) => { if (ev && ev.timeStamp === prevChangeTimestamp.current) { // For historical reasons, SearchBox handles both onInput and onChange (we can't modify this // outside a major version due to potential to break partners' tests and possibly apps). diff --git a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx index c99bb16c583275..375989125400e2 100644 --- a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx +++ b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx @@ -15,7 +15,7 @@ export interface IBaseSelectedItemsListState { export class BaseSelectedItemsList> extends React.Component> implements IBaseSelectedItemsList { - protected root: HTMLElement; + protected root!: HTMLElement; private _defaultSelection: Selection; public static getDerivedStateFromProps(newProps: IBaseSelectedItemsListProps) { diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx index 3fa980a1aca38c..1cd33cefc6922d 100644 --- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx +++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx @@ -18,7 +18,7 @@ import type { } from './EditingItem.types'; export class EditingItem extends React.Component { - private _editingInput: HTMLInputElement; + private _editingInput!: HTMLInputElement; private _editingFloatingPicker = React.createRef(); constructor(props: IEditingSelectedPeopleItemProps) { diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx index 364ac5c489fb45..897c229e337331 100644 --- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx +++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx @@ -126,8 +126,8 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList { menuItems.push({ key: 'Edit', text: this.props.editMenuItemText, - onClick: (ev: React.MouseEvent, menuItem: IContextualMenuItem) => { - this._beginEditing(menuItem.data); + onClick: (ev, menuItem) => { + this._beginEditing(menuItem!.data); }, data: item, }); @@ -137,8 +137,8 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList { menuItems.push({ key: 'Remove', text: this.props.removeMenuItemText, - onClick: (ev: React.MouseEvent, menuItem: IContextualMenuItem) => { - this.removeItem(menuItem.data as IExtendedPersonaProps); + onClick: (ev, menuItem) => { + this.removeItem(menuItem!.data as IExtendedPersonaProps); }, data: item, }); @@ -148,9 +148,9 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList { menuItems.push({ key: 'Copy', text: this.props.copyMenuItemText, - onClick: (ev: React.MouseEvent, menuItem: IContextualMenuItem) => { + onClick: (ev, menuItem) => { if (this.props.onCopyItems) { - (this.copyItems as (items: IExtendedPersonaProps[]) => void)([menuItem.data] as IExtendedPersonaProps[]); + (this.copyItems as (items: IExtendedPersonaProps[]) => void)([menuItem!.data] as IExtendedPersonaProps[]); } }, data: item, diff --git a/packages/react/src/components/Shimmer/Shimmer.base.tsx b/packages/react/src/components/Shimmer/Shimmer.base.tsx index 5fdc21ef241506..2c0c7342fa807f 100644 --- a/packages/react/src/components/Shimmer/Shimmer.base.tsx +++ b/packages/react/src/components/Shimmer/Shimmer.base.tsx @@ -12,85 +12,83 @@ const getClassNames = classNamesFunction(); /** * {@docCategory Shimmer} */ -export const ShimmerBase: React.FunctionComponent = React.forwardRef( - (props, ref) => { - const { - styles, - shimmerElements, - children, - width, - className, - customElementsGroup, - theme, - ariaLabel, - shimmerColors, - isDataLoaded = false, - } = props; +export const ShimmerBase = React.forwardRef((props, ref) => { + const { + styles, + shimmerElements, + children, + width, + className, + customElementsGroup, + theme, + ariaLabel, + shimmerColors, + isDataLoaded = false, + } = props; - const divProps = getNativeProps>(props, divProperties); + const divProps = getNativeProps>(props, divProperties); - const classNames: { [key in keyof IShimmerStyles]: string } = getClassNames(styles!, { - theme: theme!, - isDataLoaded, - className, - transitionAnimationInterval: TRANSITION_ANIMATION_INTERVAL, - shimmerColor: shimmerColors && shimmerColors.shimmer, - shimmerWaveColor: shimmerColors && shimmerColors.shimmerWave, - }); + const classNames: { [key in keyof IShimmerStyles]: string } = getClassNames(styles!, { + theme: theme!, + isDataLoaded, + className, + transitionAnimationInterval: TRANSITION_ANIMATION_INTERVAL, + shimmerColor: shimmerColors && shimmerColors.shimmer, + shimmerWaveColor: shimmerColors && shimmerColors.shimmerWave, + }); - const internalState = useConst({ - lastTimeoutId: 0, - }); + const internalState = useConst({ + lastTimeoutId: 0, + }); - const { setTimeout, clearTimeout } = useSetTimeout(); + const { setTimeout, clearTimeout } = useSetTimeout(); - /** - * Flag for knowing when to remove the shimmerWrapper from the DOM. - */ - const [contentLoaded, setContentLoaded] = React.useState(isDataLoaded); + /** + * Flag for knowing when to remove the shimmerWrapper from the DOM. + */ + const [contentLoaded, setContentLoaded] = React.useState(isDataLoaded); - const divStyleProp = { width: width ? width : '100%' }; + const divStyleProp = { width: width ? width : '100%' }; - React.useEffect(() => { - if (isDataLoaded !== contentLoaded) { - if (isDataLoaded) { - internalState.lastTimeoutId = setTimeout(() => { - setContentLoaded(true); - }, TRANSITION_ANIMATION_INTERVAL); + React.useEffect(() => { + if (isDataLoaded !== contentLoaded) { + if (isDataLoaded) { + internalState.lastTimeoutId = setTimeout(() => { + setContentLoaded(true); + }, TRANSITION_ANIMATION_INTERVAL); - return () => clearTimeout(internalState.lastTimeoutId); - } else { - setContentLoaded(false); - } + return () => clearTimeout(internalState.lastTimeoutId); + } else { + setContentLoaded(false); } - // eslint-disable-next-line react-hooks/exhaustive-deps -- Should only run when isDataLoaded changes. - }, [isDataLoaded]); + } + // eslint-disable-next-line react-hooks/exhaustive-deps -- Should only run when isDataLoaded changes. + }, [isDataLoaded]); - return ( -
- {!contentLoaded && ( -
-
- {customElementsGroup ? ( - customElementsGroup - ) : ( - - )} -
- )} - {children &&
{children}
} - {ariaLabel && !isDataLoaded && ( -
- -
{ariaLabel}
- -
- )} -
- ); - }, -); + return ( +
+ {!contentLoaded && ( +
+
+ {customElementsGroup ? ( + customElementsGroup + ) : ( + + )} +
+ )} + {children &&
{children}
} + {ariaLabel && !isDataLoaded && ( +
+ +
{ariaLabel}
+ +
+ )} +
+ ); +}) as React.FunctionComponent; ShimmerBase.displayName = COMPONENT_NAME; diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx index 557901b936ea8c..2abe87335ff098 100644 --- a/packages/react/src/components/Stack/Stack.tsx +++ b/packages/react/src/components/Stack/Stack.tsx @@ -27,7 +27,6 @@ const StackView: IStackComponent['view'] = props => { ) { stackChildren = stackChildren[0].props.children; } - stackChildren = React.Children.map(stackChildren, (child: React.ReactElement, index: number) => { if (!child) { return null; diff --git a/packages/react/src/components/TextField/TextField.base.tsx b/packages/react/src/components/TextField/TextField.base.tsx index 067b47f647b239..225062bc0c68fd 100644 --- a/packages/react/src/components/TextField/TextField.base.tsx +++ b/packages/react/src/components/TextField/TextField.base.tsx @@ -80,7 +80,7 @@ export class TextFieldBase private _latestValidateValue: string | undefined; private _hasWarnedNullValue: boolean | undefined; private _textElement = React.createRef(); - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; private _async: Async; /** Most recent value from a change or input event, to help avoid processing events twice */ private _lastChangeValue: string | undefined; @@ -420,7 +420,10 @@ export class TextFieldBase }); }; - private _onRenderLabel = (props: ITextFieldProps): JSX.Element | null => { + private _onRenderLabel = ( + props: ITextFieldProps, + // defaultRender?: (props?: ITextFieldProps) => JSX.Element | null, + ): JSX.Element | null => { const { label, required } = props; // IProcessedStyleSet definition requires casting for what Label expects as its styles prop const labelStyles = this._classNames.subComponentStyles @@ -559,7 +562,7 @@ export class TextFieldBase onBlur: this._onBlur, }; - const defaultRender = (updatedInputProps: React.InputHTMLAttributes) => { + const defaultRender: ITextFieldProps['onRenderInput'] = updatedInputProps => { return ; }; const onRenderInput = this.props.onRenderInput || defaultRender; diff --git a/packages/react/src/components/ThemeGenerator/ThemeRulesStandard.ts b/packages/react/src/components/ThemeGenerator/ThemeRulesStandard.ts index d7b18f369cfac6..ac03a262be6fc4 100644 --- a/packages/react/src/components/ThemeGenerator/ThemeRulesStandard.ts +++ b/packages/react/src/components/ThemeGenerator/ThemeRulesStandard.ts @@ -62,29 +62,29 @@ export function themeRulesStandardCreator(): IThemeRules { /*** BASE COLORS and their SHADES */ // iterate through each base slot and make the SlotRules for those - mapEnumByName(BaseSlots, (baseSlot: string) => { + mapEnumByName(BaseSlots, baseSlot => { // first make the SlotRule for the unshaded base Color - slotRules[baseSlot] = { - name: baseSlot, + slotRules[baseSlot!] = { + name: baseSlot!, isCustomized: true, dependentRules: [], }; // then make a rule for each shade of this base color, but skip unshaded - mapEnumByName(Shade, (shadeName: string, shadeValue: Shade) => { + mapEnumByName(Shade, (shadeName, shadeValue) => { if (shadeName === Shade[Shade.Unshaded]) { return; } - const inherits = slotRules[baseSlot]; + const inherits = slotRules[baseSlot!]; const thisSlotRule = { - name: baseSlot + shadeName, - inherits: slotRules[baseSlot], - asShade: shadeValue, + name: baseSlot! + shadeName, + inherits: slotRules[baseSlot!], + asShade: shadeValue as Shade, isCustomized: false, isBackgroundShade: baseSlot === BaseSlots[BaseSlots.backgroundColor] ? true : false, dependentRules: [], }; - slotRules[baseSlot + shadeName] = thisSlotRule; + slotRules[baseSlot! + shadeName] = thisSlotRule; inherits.dependentRules.push(thisSlotRule); return undefined; diff --git a/packages/react/src/components/Toggle/Toggle.base.tsx b/packages/react/src/components/Toggle/Toggle.base.tsx index d42b9808185f7d..8eb7d94658d1da 100644 --- a/packages/react/src/components/Toggle/Toggle.base.tsx +++ b/packages/react/src/components/Toggle/Toggle.base.tsx @@ -38,9 +38,9 @@ export const ToggleBase: React.FunctionComponent = React.forwardRe controlledChecked, defaultChecked, React.useCallback( - (ev: React.MouseEvent, isChecked: boolean) => { + (ev: React.MouseEvent, isChecked: boolean | undefined) => { onChange?.(ev, isChecked); - onChanged?.(isChecked); + onChanged?.(isChecked!); }, [onChange, onChanged], ), diff --git a/packages/react/src/components/Tooltip/Tooltip.base.tsx b/packages/react/src/components/Tooltip/Tooltip.base.tsx index 1d66ca13921bcd..9a9315dab074e8 100644 --- a/packages/react/src/components/Tooltip/Tooltip.base.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.base.tsx @@ -21,7 +21,7 @@ export class TooltipBase extends React.Component { }, }; - private _classNames: IProcessedStyleSet; + private _classNames!: IProcessedStyleSet; public render(): JSX.Element { const { diff --git a/packages/react/src/components/Tooltip/Tooltip.test.tsx b/packages/react/src/components/Tooltip/Tooltip.test.tsx index f62e2d4cbf7251..ed609e848e0cdf 100644 --- a/packages/react/src/components/Tooltip/Tooltip.test.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.test.tsx @@ -72,8 +72,8 @@ describe('Tooltip', () => { const callout = component.find('Callout'); - Object.keys(calloutProps).forEach((key: keyof ICalloutProps) => { - expect(callout.prop(key)).toEqual(calloutProps[key]); + Object.keys(calloutProps).forEach(key => { + expect(callout.prop(key)).toEqual(calloutProps[key as keyof ICalloutProps]); }); expect(callout.prop('tabIndex')).toEqual(-1); diff --git a/packages/react/src/components/Tooltip/TooltipHost.base.tsx b/packages/react/src/components/Tooltip/TooltipHost.base.tsx index ed37f2400428ff..219f287f56dc3b 100644 --- a/packages/react/src/components/Tooltip/TooltipHost.base.tsx +++ b/packages/react/src/components/Tooltip/TooltipHost.base.tsx @@ -35,12 +35,12 @@ export class TooltipHostBase extends React.Component(); - private _classNames: { [key in keyof ITooltipHostStyles]: string }; + private _classNames!: { [key in keyof ITooltipHostStyles]: string }; private _async: Async; - private _dismissTimerId: number; - private _openTimerId: number; + private _dismissTimerId!: number; + private _openTimerId!: number; private _defaultTooltipId = getId('tooltip'); - private _ignoreNextFocusEvent: boolean; + private _ignoreNextFocusEvent!: boolean; // Constructor constructor(props: ITooltipHostProps) { diff --git a/packages/react/src/components/Tooltip/TooltipHost.test.tsx b/packages/react/src/components/Tooltip/TooltipHost.test.tsx index 5917f61bf8b384..71436b61cbbbd9 100644 --- a/packages/react/src/components/Tooltip/TooltipHost.test.tsx +++ b/packages/react/src/components/Tooltip/TooltipHost.test.tsx @@ -73,8 +73,8 @@ describe('TooltipHost', () => { expect(tooltip.prop('directionalHint')).toEqual(directionalHint); expect(tooltip.prop('directionalHintForRTL')).toEqual(directionalHintForRTL); - Object.keys(tooltipProps).forEach((key: keyof ITooltipProps) => { - expect(tooltip.prop(key)).toEqual(tooltipProps[key]); + Object.keys(tooltipProps).forEach(key => { + expect(tooltip.prop(key)).toEqual(tooltipProps[key as keyof ITooltipProps]); }); }); diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx index 5a1c1fcca54048..760df0138151ee 100644 --- a/packages/react/src/components/pickers/BasePicker.tsx +++ b/packages/react/src/components/pickers/BasePicker.tsx @@ -533,15 +533,15 @@ export class BasePicker> }); }; - protected onSuggestionClick = (ev: React.MouseEvent, item: any, index: number): void => { - this.addItemByIndex(index); + protected onSuggestionClick = (ev?: React.MouseEvent, item?: any, index?: number): void => { + this.addItemByIndex(index!); }; - protected onSuggestionRemove = (ev: React.MouseEvent, item: T, index: number): void => { + protected onSuggestionRemove = (ev?: React.MouseEvent, item?: T, index?: number): void => { if (this.props.onRemoveSuggestion) { - this.props.onRemoveSuggestion(item); + this.props.onRemoveSuggestion(item!); } - this.suggestionStore.removeSuggestion(index); + this.suggestionStore.removeSuggestion(index!); }; protected onInputFocus = (ev: React.FocusEvent): void => { diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx index d011778c32c39e..aa8ef839350726 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx @@ -4,7 +4,7 @@ import { css } from '../../../../Utilities'; import { Persona, PersonaSize, PersonaPresence } from '../../../../Persona'; import * as stylesImport from './SuggestionItemDefault.scss'; import type { IPersonaProps } from '../../../../Persona'; -import type { IBasePickerSuggestionsProps, ISuggestionItemProps } from '../../../../Pickers'; +import type { IBasePickerSuggestionsProps } from '../../../../Pickers'; const styles: any = stylesImport; @@ -14,7 +14,7 @@ const styles: any = stylesImport; export const SuggestionItemNormal: ( persona: IPersonaProps, suggestionProps?: IBasePickerSuggestionsProps, -) => JSX.Element = (personaProps: IPersonaProps, suggestionItemProps?: ISuggestionItemProps) => { +) => JSX.Element = (personaProps, suggestionItemProps) => { return (
JSX.Element = (personaProps: IPersonaProps, suggestionItemProps?: ISuggestionItemProps) => { +) => JSX.Element = (personaProps, suggestionItemProps?) => { return (
extends React.Component, ISugge protected _searchForMoreButton = React.createRef(); protected _selectedElement = React.createRef(); protected _scrollContainer = React.createRef(); - private activeSelectedElement: HTMLDivElement | null; - private _classNames: Partial>; + private activeSelectedElement!: HTMLDivElement | null; + private _classNames!: Partial>; constructor(suggestionsProps: ISuggestionsProps) { super(suggestionsProps); diff --git a/packages/react/src/utilities/DraggableZone/DraggableZone.tsx b/packages/react/src/utilities/DraggableZone/DraggableZone.tsx index af1506bf543723..f99856796e4f9e 100644 --- a/packages/react/src/utilities/DraggableZone/DraggableZone.tsx +++ b/packages/react/src/utilities/DraggableZone/DraggableZone.tsx @@ -154,8 +154,13 @@ export class DraggableZone extends React.Component void, true /* use capture phase */), + on( + document.body, + this._currentEventType.stop, + this._onDragStop as (ev: Event) => void, + true /* use capture phase */, + ), ]; }; diff --git a/packages/react/src/utilities/ThemeProvider/makeStyles.ts b/packages/react/src/utilities/ThemeProvider/makeStyles.ts index 106473fb4c9c5f..e2d0ff783afd29 100644 --- a/packages/react/src/utilities/ThemeProvider/makeStyles.ts +++ b/packages/react/src/utilities/ThemeProvider/makeStyles.ts @@ -73,7 +73,7 @@ export function makeStyles void); allWindows.delete(winId); }; @@ -87,7 +87,7 @@ export function makeStyles void); } } diff --git a/packages/react/src/utilities/decorators/BaseDecorator.ts b/packages/react/src/utilities/decorators/BaseDecorator.ts index 66dc034431b5e2..bcabf892369ddf 100644 --- a/packages/react/src/utilities/decorators/BaseDecorator.ts +++ b/packages/react/src/utilities/decorators/BaseDecorator.ts @@ -2,9 +2,9 @@ import * as React from 'react'; import { hoistMethods, unhoistMethods } from '../../Utilities'; export class BaseDecorator extends React.Component { - protected _composedComponentInstance: React.Component; + protected _composedComponentInstance!: React.Component; - private _hoisted: string[]; + private _hoisted!: string[]; constructor(props: TProps) { super(props); diff --git a/packages/react/src/utilities/decorators/withContainsFocus.tsx b/packages/react/src/utilities/decorators/withContainsFocus.tsx index 8b1bfa9bc1bb73..b33c2e5c2b7098 100644 --- a/packages/react/src/utilities/decorators/withContainsFocus.tsx +++ b/packages/react/src/utilities/decorators/withContainsFocus.tsx @@ -9,7 +9,7 @@ export function withContainsFocus TProps & { containsFocus?: boolean }, { containsFocus?: boolean } > { - private _newContainsFocus: boolean; + private _newContainsFocus!: boolean; private _delayedSetContainsFocus: () => void; private _async: Async; diff --git a/packages/react/src/utilities/decorators/withResponsiveMode.tsx b/packages/react/src/utilities/decorators/withResponsiveMode.tsx index ef98771c698fb2..c6ac740ae18f97 100644 --- a/packages/react/src/utilities/decorators/withResponsiveMode.tsx +++ b/packages/react/src/utilities/decorators/withResponsiveMode.tsx @@ -77,7 +77,7 @@ export function withResponsiveMode { public static contextType = WindowContext; - public context: React.ContextType; + public context!: React.ContextType; private _events: EventGroup; diff --git a/packages/react/src/utilities/dragdrop/DragDropHelper.tsx b/packages/react/src/utilities/dragdrop/DragDropHelper.tsx index 091673bf9308de..ca68591e3f9952 100644 --- a/packages/react/src/utilities/dragdrop/DragDropHelper.tsx +++ b/packages/react/src/utilities/dragdrop/DragDropHelper.tsx @@ -18,8 +18,8 @@ export interface IDragDropHelperParams { export class DragDropHelper implements IDragDropHelper { private _dragEnterCounts: { [key: string]: number }; - private _isDragging: boolean; - private _dragData: { + private _isDragging!: boolean; + private _dragData!: { eventTarget: EventTarget | null; clientX: number; clientY: number; @@ -34,7 +34,7 @@ export class DragDropHelper implements IDragDropHelper { dispose: () => void; }; }; - private _events: EventGroup; + private _events!: EventGroup; private _lastId: number; private _initialized: boolean; diff --git a/packages/react/src/utilities/selection/SelectionZone.test.tsx b/packages/react/src/utilities/selection/SelectionZone.test.tsx index 0d307dd7aefcfa..5082544c9e2ffc 100644 --- a/packages/react/src/utilities/selection/SelectionZone.test.tsx +++ b/packages/react/src/utilities/selection/SelectionZone.test.tsx @@ -8,7 +8,6 @@ import { SelectionMode } from './interfaces'; import { isConformant } from '../../common/isConformant'; import { KeyCodes, EventGroup } from '../../Utilities'; -import type { IObjectWithKey } from './interfaces'; const SELECTABLE_ITEMS = [{ key: 'a' }, { key: 'b' }, { key: 'c' }, { key: 'd' }, { key: 'e' }]; @@ -42,7 +41,7 @@ function _initializeSelection(props?: { selectionMode?: SelectionMode; enableTou disableAutoSelectOnInputElements={true} enterModalOnTouch={true} enableTouchInvocationTarget={enableTouchInvocationTarget} - onItemInvoked={(item: IObjectWithKey) => { + onItemInvoked={item => { _onItemInvokeCalled++; _lastItemInvoked = item; }} diff --git a/packages/react/src/utilities/selection/SelectionZone.tsx b/packages/react/src/utilities/selection/SelectionZone.tsx index f5d50479443fee..8b60fa1c467be1 100644 --- a/packages/react/src/utilities/selection/SelectionZone.tsx +++ b/packages/react/src/utilities/selection/SelectionZone.tsx @@ -139,13 +139,13 @@ export class SelectionZone extends React.Component(); - private _isCtrlPressed: boolean; - private _isShiftPressed: boolean; - private _isMetaPressed: boolean; - private _isTabPressed: boolean; - private _shouldHandleFocus: boolean; + private _isCtrlPressed!: boolean; + private _isShiftPressed!: boolean; + private _isMetaPressed!: boolean; + private _isTabPressed!: boolean; + private _shouldHandleFocus!: boolean; private _shouldHandleFocusTimeoutId: number | undefined; - private _isTouch: boolean; + private _isTouch!: boolean; private _isTouchTimeoutId: number | undefined; public static getDerivedStateFromProps( diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index 8c5f0155f47b5f..e7c9af6cb4147f 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -1,25 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", + "target": "ES2015", "outDir": "lib", - "target": "es5", - "module": "commonjs", + "lib": ["ES2015", "dom"], "jsx": "react", - "isolatedModules": true, "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es5", "dom", "es2015.promise"], - "skipLibCheck": true, - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"] + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/scheme-utilities/tsconfig.json b/packages/scheme-utilities/tsconfig.json index 410a1111d7887c..e6721547aba048 100644 --- a/packages/scheme-utilities/tsconfig.json +++ b/packages/scheme-utilities/tsconfig.json @@ -1,20 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", + "target": "ES2015", "outDir": "lib", - "module": "commonjs", - "lib": ["es5", "dom"], + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "strict": true, - "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "isolatedModules": true + "types": [] }, "include": ["src"] } diff --git a/packages/set-version/tsconfig.json b/packages/set-version/tsconfig.json index c6d6b9960dc493..9df869d8650ba3 100644 --- a/packages/set-version/tsconfig.json +++ b/packages/set-version/tsconfig.json @@ -1,16 +1,12 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", + "target": "ES2015", "outDir": "lib", - "module": "commonjs", - "lib": ["es5", "dom"], + "lib": ["ES2015", "dom"], + "jsx": "react", "declaration": true, - "sourceMap": true, "importHelpers": true, - "noImplicitAny": true, - "strictNullChecks": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", "types": ["jest"] }, "include": ["src"] diff --git a/packages/style-utilities/src/utilities/icons.ts b/packages/style-utilities/src/utilities/icons.ts index a151bc2c691d2d..38976f7c6aefe3 100644 --- a/packages/style-utilities/src/utilities/icons.ts +++ b/packages/style-utilities/src/utilities/icons.ts @@ -229,7 +229,7 @@ function _warnDuplicateIcon(iconName: string): void { if (!options.disableWarnings) { _missingIcons.push(iconName); if (_missingIconsTimer === undefined) { - _missingIconsTimer = setTimeout(() => { + _missingIconsTimer = window.setTimeout(() => { warn( `Some icons were re-registered. Applications should only call registerIcons for any given ` + `icon once. Redefining what an icon is may have unintended consequences. Duplicates ` + diff --git a/packages/style-utilities/tsconfig.json b/packages/style-utilities/tsconfig.json index f866099a00690c..9df869d8650ba3 100644 --- a/packages/style-utilities/tsconfig.json +++ b/packages/style-utilities/tsconfig.json @@ -1,24 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "target": "es5", + "target": "ES2015", "outDir": "lib", - "module": "commonjs", - "lib": ["es5", "dom"], + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "isolatedModules": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noImplicitAny": true, - "noUnusedLocals": true, - "strictNullChecks": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"] + "types": ["jest"] }, "include": ["src"] } diff --git a/packages/test-utilities/tsconfig.json b/packages/test-utilities/tsconfig.json index b4b3736f5a0b11..9df869d8650ba3 100644 --- a/packages/test-utilities/tsconfig.json +++ b/packages/test-utilities/tsconfig.json @@ -1,21 +1,12 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es2017", "dom"], "types": ["jest"] }, "include": ["src"] diff --git a/packages/theme-samples/tsconfig.json b/packages/theme-samples/tsconfig.json index 0ca4c2c3340310..d71c59e1a7894b 100644 --- a/packages/theme-samples/tsconfig.json +++ b/packages/theme-samples/tsconfig.json @@ -1,23 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strictNullChecks": true, - "noImplicitAny": true, - "moduleResolution": "node", - "skipLibCheck": true, - "preserveConstEnums": true, - "lib": ["es5", "dom"], - "isolatedModules": true + "types": ["environment"] }, "include": ["src"] } diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json index beb1660276af80..e7c9af6cb4147f 100644 --- a/packages/theme/tsconfig.json +++ b/packages/theme/tsconfig.json @@ -1,22 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "baseUrl": ".", - "outDir": "dist", - "target": "es5", - "module": "commonjs", + "target": "ES2015", + "outDir": "lib", + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "strict": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "lib": ["es5", "dom"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"] + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/packages/utilities/src/EventGroup.ts b/packages/utilities/src/EventGroup.ts index 3a4ccacc9496a1..a964dcfbc65898 100644 --- a/packages/utilities/src/EventGroup.ts +++ b/packages/utilities/src/EventGroup.ts @@ -171,7 +171,7 @@ export class EventGroup { public on( target: any, eventName: string, - callback: (args?: any) => void, + callback: (...args: any[]) => void, options?: boolean | AddEventListenerOptions, ): void { if (eventName.indexOf(',') > -1) { diff --git a/packages/utilities/src/appendFunction.ts b/packages/utilities/src/appendFunction.ts index 5cc5f402ec2f13..fd70b18671da3b 100644 --- a/packages/utilities/src/appendFunction.ts +++ b/packages/utilities/src/appendFunction.ts @@ -10,6 +10,6 @@ export function appendFunction(parent: any, ...functions: any[]): () => void { } return (...args: any[]): void => { - functions.forEach((f: () => void) => f && f.apply(parent, args)); + functions.forEach((f: () => void) => f && f.apply(parent, args as [])); }; } diff --git a/packages/utilities/src/dom/getFirstVisibleElementFromSelector.ts b/packages/utilities/src/dom/getFirstVisibleElementFromSelector.ts index 253b0f16116db7..e048b24d482af3 100644 --- a/packages/utilities/src/dom/getFirstVisibleElementFromSelector.ts +++ b/packages/utilities/src/dom/getFirstVisibleElementFromSelector.ts @@ -12,5 +12,5 @@ export function getFirstVisibleElementFromSelector(selector: string): Element | const elements = getDocument()!.querySelectorAll(selector); // Iterate across the elements that match the selector and return the first visible/non-hidden element - return Array.from(elements).find((element: HTMLElement) => isElementVisibleAndNotHidden(element)); + return Array.from(elements).find(element => isElementVisibleAndNotHidden(element as HTMLElement)); } diff --git a/packages/utilities/src/modalize.test.ts b/packages/utilities/src/modalize.test.ts index 9a429d9e27b6f4..04da5c004eea08 100644 --- a/packages/utilities/src/modalize.test.ts +++ b/packages/utilities/src/modalize.test.ts @@ -6,7 +6,7 @@ function getHiddenElements() { if (el.getAttribute('aria-hidden') === 'true') { hiddenIds.push(el.id); } - Array.from(el.children).forEach(walkTree); + (Array.from(el.children) as HTMLElement[]).forEach(walkTree); } const hiddenIds: string[] = []; diff --git a/packages/utilities/src/object.test.ts b/packages/utilities/src/object.test.ts index 8760c7e0375bca..ac60208f1f6d99 100644 --- a/packages/utilities/src/object.test.ts +++ b/packages/utilities/src/object.test.ts @@ -41,7 +41,7 @@ describe('mapEnumByName', () => { fourth, } - const result = mapEnumByName(Foo, (name: string) => { + const result = mapEnumByName(Foo, name => { return name; }); @@ -56,7 +56,7 @@ describe('mapEnumByName', () => { fourth, } - const result = mapEnumByName(Foo, (name: string) => { + const result = mapEnumByName(Foo, name => { if (name === 'first' || name === 'third') { return name; } diff --git a/packages/utilities/src/object.ts b/packages/utilities/src/object.ts index 6b7006a08527eb..cf850a68ac50c3 100644 --- a/packages/utilities/src/object.ts +++ b/packages/utilities/src/object.ts @@ -34,7 +34,7 @@ export function shallowCompare(a: TA, b: TB): bo */ // eslint-disable-next-line @typescript-eslint/no-explicit-any export function assign(this: any, target: any, ...args: any[]): any { - return filteredAssign.apply(this, [null, target].concat(args)); + return filteredAssign.apply(this, [null, target].concat(args) as Parameters); } /** diff --git a/packages/utilities/src/renderFunction/composeRenderFunction.test.tsx b/packages/utilities/src/renderFunction/composeRenderFunction.test.tsx index a2750ef2e0f45a..85586fac0f15ac 100644 --- a/packages/utilities/src/renderFunction/composeRenderFunction.test.tsx +++ b/packages/utilities/src/renderFunction/composeRenderFunction.test.tsx @@ -7,8 +7,8 @@ interface IExampleProps { value: string; } -const renderBase = (props: IExampleProps): JSX.Element | null => { - return
; +const renderBase: IRenderFunction = props => { + return
; }; const renderDecoratorA = ( diff --git a/packages/utilities/src/safeSetTimeout.ts b/packages/utilities/src/safeSetTimeout.ts index 805589277530dc..98b16b3704d1d8 100644 --- a/packages/utilities/src/safeSetTimeout.ts +++ b/packages/utilities/src/safeSetTimeout.ts @@ -8,15 +8,16 @@ import { extendComponent } from './extendComponent'; * accesses things within the component after being unmounted. */ export const safeSetTimeout = (component: React.Component) => { - let activeTimeouts: Set; + type Timer = ReturnType; + let activeTimeouts: Set; return (cb: Function, duration: number) => { if (!activeTimeouts) { - activeTimeouts = new Set(); + activeTimeouts = new Set(); extendComponent(component, { componentWillUnmount: () => { - activeTimeouts.forEach((id: NodeJS.Timer) => clearTimeout(id)); + activeTimeouts.forEach((id: Timer) => clearTimeout(id)); }, }); } diff --git a/packages/utilities/tsconfig.json b/packages/utilities/tsconfig.json index ddc7a47f96afd6..9df869d8650ba3 100644 --- a/packages/utilities/tsconfig.json +++ b/packages/utilities/tsconfig.json @@ -1,24 +1,13 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", + "target": "ES2015", "outDir": "lib", - "module": "commonjs", - "lib": ["es5", "es2015.promise", "dom"], + "lib": ["ES2015", "dom"], "jsx": "react", "declaration": true, - "sourceMap": true, - "strict": true, - "isolatedModules": true, - "strictFunctionTypes": false, - "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "skipLibCheck": true, - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"] + "types": ["jest"] }, "include": ["src"] } diff --git a/packages/webpack-utilities/tsconfig.json b/packages/webpack-utilities/tsconfig.json index 88d16e448009f8..1464648b2ff7e3 100644 --- a/packages/webpack-utilities/tsconfig.json +++ b/packages/webpack-utilities/tsconfig.json @@ -1,20 +1,14 @@ { + "extends": "../../tsconfig.base.v8.json", "compilerOptions": { - "target": "es5", + "module": "CommonJS", + "target": "ES2015", "outDir": "lib", - "module": "commonjs", - "lib": ["es2017"], + "lib": ["ES2015"], "jsx": "react", "declaration": true, - "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, - "noImplicitAny": true, - "strictNullChecks": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "skipLibCheck": true + "types": ["jest", "environment"] }, "include": ["src"] } diff --git a/scripts/monorepo/findGitRoot.js b/scripts/monorepo/findGitRoot.js index 08d98e385dd2c1..62f68f6283d1a3 100644 --- a/scripts/monorepo/findGitRoot.js +++ b/scripts/monorepo/findGitRoot.js @@ -3,7 +3,13 @@ const fs = require('fs'); const path = require('path'); +/** + * @type {string} + */ let cwdForGitRoot; +/** + * @type {string} + */ let gitRoot; function findGitRoot() { diff --git a/scripts/projects-test/performBrowserTest.ts b/scripts/projects-test/performBrowserTest.ts index 0b19cd98208986..f430609af9a831 100644 --- a/scripts/projects-test/performBrowserTest.ts +++ b/scripts/projects-test/performBrowserTest.ts @@ -30,7 +30,7 @@ export async function performBrowserTest(publicDirectory: string) { console.log('Started server. Launching Puppeteer...'); const options = safeLaunchOptions(); - let browser: puppeteer.Browser; + let browser: puppeteer.Browser | undefined; let attempt = 1; while (!browser) { try { diff --git a/scripts/puppeteer/puppeteer.config.ts b/scripts/puppeteer/puppeteer.config.ts index 20882ebc494db4..d6bcc6723c050c 100644 --- a/scripts/puppeteer/puppeteer.config.ts +++ b/scripts/puppeteer/puppeteer.config.ts @@ -1,10 +1,10 @@ import { LaunchOptions } from 'puppeteer'; /** Common set of args to be passed to Chromium. */ -const chromiumArgs: LaunchOptions['args'] = [ +const chromiumArgs = [ // Workaround for newPage hang in CircleCI: https://github.com/GoogleChrome/puppeteer/issues/1409#issuecomment-453845568 process.env.TF_BUILD && '--single-process', -].filter(Boolean); +].filter(Boolean) as NonNullable; export const safeLaunchOptions = (launchOptions?: LaunchOptions) => { const mergedChromiumArgs = [...((launchOptions && launchOptions.args) || []), ...chromiumArgs]; diff --git a/scripts/read-config.js b/scripts/read-config.js index 8f56dea3c06c95..1fe9794fc5ec83 100644 --- a/scripts/read-config.js +++ b/scripts/read-config.js @@ -7,16 +7,16 @@ const jju = require('jju'); /** * Read and parse the given config file. * - * @param {string} file Full path to or name of the config file. If no file exists at the location + * @param {string} filePath Full path to or name of the config file. If no file exists at the location * as given, `file` is assumed to be a config file name and the method will run * `findConfig(file)` to find the full path. * @param {string} [cwd] optional different cwd * @returns {any} Parsed config file contents */ -function readConfig(file, cwd) { - file = findConfig(file, cwd); - if (file && fs.existsSync(file)) { - return jju.parse(fs.readFileSync(file, 'utf8')); +function readConfig(filePath, cwd) { + const configFilePath = findConfig(filePath, cwd); + if (configFilePath && fs.existsSync(configFilePath)) { + return jju.parse(fs.readFileSync(configFilePath, 'utf8')); } } diff --git a/scripts/storybook/webpack.config.js b/scripts/storybook/webpack.config.js index 230cc5336b2d15..9a25d92f11986c 100644 --- a/scripts/storybook/webpack.config.js +++ b/scripts/storybook/webpack.config.js @@ -1,5 +1,11 @@ // @ts-check -const IgnoreNotFoundExportWebpackPlugin = require('ignore-not-found-export-webpack-plugin'); +/** + * @typedef {new (config:{include: RegExp | RegExp[]}) => import('webpack').WebpackPluginInstance} IgnoreNotFoundExportWebpackPlugin + */ + +// @ts-ignore - this plugin ships no types nor are does these exist on DefinitelyTyped repo +const _IgnoreNotFoundExportWebpackPlugin = require('ignore-not-found-export-webpack-plugin'); +const IgnoreNotFoundExportWebpackPlugin = /** @type {IgnoreNotFoundExportWebpackPlugin} */ (_IgnoreNotFoundExportWebpackPlugin); const path = require('path'); const findGitRoot = require('../monorepo/findGitRoot'); const getResolveAlias = require('../webpack/getResolveAlias'); @@ -20,68 +26,70 @@ module.exports = config => { ], }; - config.module.rules.push( - { - test: /\.(ts|tsx)$/, - use: [ - { - loader: require.resolve('ts-loader'), - options: { - transpileOnly: true, - experimentalWatchApi: true, - configFile: path.join(process.cwd(), 'tsconfig.json'), + if (config.module && config.module.rules) { + config.module.rules.push( + { + test: /\.(ts|tsx)$/, + use: [ + { + loader: require.resolve('ts-loader'), + options: { + transpileOnly: true, + experimentalWatchApi: true, + configFile: path.join(process.cwd(), 'tsconfig.json'), + }, }, - }, - ], - }, - { - test: /\.scss$/, - enforce: 'pre', - exclude: [/node_modules/], - use: [ - { - loader: '@microsoft/loader-load-themed-styles', // creates style nodes from JS strings - }, - { - loader: 'css-loader', // translates CSS into CommonJS - options: { - esModule: false, - modules: true, - importLoaders: 2, + ], + }, + { + test: /\.scss$/, + enforce: 'pre', + exclude: [/node_modules/], + use: [ + { + loader: '@microsoft/loader-load-themed-styles', // creates style nodes from JS strings }, - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: { - plugins: ['autoprefixer'], + { + loader: 'css-loader', // translates CSS into CommonJS + options: { + esModule: false, + modules: true, + importLoaders: 2, }, }, + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: ['autoprefixer'], + }, + }, + }, + { + loader: 'sass-loader', + }, + ], + }, + { + test: /\.(gif|jpg|jpeg|png|svg)$/, + loader: 'file-loader', + options: { + name: '[name].[ext]', }, - { - loader: 'sass-loader', + }, + { + test: /\.(woff|woff2|ttf)$/, + loader: 'file-loader', + options: { + name: '[name].[ext]', }, - ], - }, - { - test: /\.(gif|jpg|jpeg|png|svg)$/, - loader: 'file-loader', - options: { - name: '[name].[ext]', }, - }, - { - test: /\.(woff|woff2|ttf)$/, - loader: 'file-loader', - options: { - name: '[name].[ext]', + { + test: /\.md$/, + loader: 'raw-loader', }, - }, - { - test: /\.md$/, - loader: 'raw-loader', - }, - ); + ); + } config.resolve = { ...config.resolve, diff --git a/scripts/tasks/ts.ts b/scripts/tasks/ts.ts index 869c9b96442d39..587db7e4b06415 100644 --- a/scripts/tasks/ts.ts +++ b/scripts/tasks/ts.ts @@ -22,10 +22,14 @@ function prepareTsTaskConfig(options: TscTaskOptions) { options.sourceMap = true; } + const tsConfigProjectRoot = 'tsconfig.json'; const tsConfigLib = 'tsconfig.lib.json'; const isUsingTsSolutionConfigs = fs.existsSync(resolveCwd(tsConfigLib)); - if (isUsingTsSolutionConfigs) { + const tsConfig = JSON.parse(fs.readFileSync(resolveCwd(tsConfigProjectRoot), 'utf-8')); + const isUsingV8pathAliases = tsConfig.extends && tsConfig.extends.includes('tsconfig.base.v8.json'); + + if (isUsingTsSolutionConfigs || isUsingV8pathAliases) { // For converged packages (which use TS path aliases), explicitly set `baseUrl` and `rootDir` to current package root. // > - This is a temporary workaround for current way of building packages via lage and just scripts. // > - Without setting baseUrl we would get all aliased packages build within outDir @@ -33,7 +37,7 @@ function prepareTsTaskConfig(options: TscTaskOptions) { logger.info(`📣 TSC: package is using TS path aliases. Overriding tsconfig settings.`); options.baseUrl = '.'; options.rootDir = './src'; - options.project = tsConfigLib; + options.project = isUsingTsSolutionConfigs ? tsConfigLib : tsConfigProjectRoot; } return options; diff --git a/scripts/webpack/getResolveAlias.js b/scripts/webpack/getResolveAlias.js index 65f5da6e192023..4ceeb8ea4f4a41 100644 --- a/scripts/webpack/getResolveAlias.js +++ b/scripts/webpack/getResolveAlias.js @@ -4,6 +4,10 @@ const path = require('path'); const { findRepoDeps, findGitRoot } = require('../monorepo/index'); const { readConfig } = require('../read-config'); +/** + * + * @param {string} [entryPoint] + */ function getOutputPath(entryPoint) { return entryPoint && entryPoint.includes('dist/es') ? 'dist/es' : 'lib'; } diff --git a/tsconfig.base.v8.json b/tsconfig.base.v8.json new file mode 100644 index 00000000000000..d9fb7c6b789ffa --- /dev/null +++ b/tsconfig.base.v8.json @@ -0,0 +1,65 @@ +{ + "compilerOptions": { + "rootDir": ".", + "target": "ES5", + "module": "ESNext", + "moduleResolution": "Node", + "isolatedModules": true, + "sourceMap": true, + "experimentalDecorators": true, + "forceConsistentCasingInFileNames": true, + "preserveConstEnums": true, + "strict": true, + "strictFunctionTypes": false, + "noUnusedLocals": true, + "lib": ["ES5", "DOM", "ES2015.Promise"], + "skipLibCheck": true, + "pretty": true, + "typeRoots": ["node_modules/@types", "./typings"], + "baseUrl": ".", + "paths": { + "@fluentui/api-docs": ["packages/api-docs/src/index.ts"], + "@fluentui/azure-themes": ["packages/azure-themes/src/index.ts"], + "@fluentui/codemods": ["packages/codemods/src/index.ts"], + "@fluentui/date-time-utilities": ["packages/date-time-utilities/src/index.ts"], + "@fluentui/example-data": ["packages/example-data/src/index.ts"], + "@fluentui/font-icons-mdl2": ["packages/font-icons-mdl2/src/index.ts"], + "@fluentui/foundation-legacy": ["packages/foundation-legacy/src/index.ts"], + "@fluentui/jest-serializer-merge-styles": ["packages/jest-serializer-merge-styles/src/index.ts"], + "@fluentui/merge-styles": ["packages/merge-styles/src/index.ts"], + "@fluentui/react": ["packages/react/src/index.ts"], + "@fluentui/react/lib/*": ["packages/react/src/*"], + "@fluentui/react-date-time": ["packages/react-date-time/src/index.ts"], + "@fluentui/react-experiments": ["packages/react-experiments/src/index.ts"], + "@fluentui/react-experiments/lib/*": ["packages/react-experiments/src/*"], + "@fluentui/react-file-type-icons": ["packages/react-file-type-icons/src/index.ts"], + "@fluentui/react-focus": ["packages/react-focus/src/index.ts"], + "@fluentui/react-hooks": ["packages/react-hooks/src/index.ts"], + "@fluentui/scheme-utilities": ["packages/scheme-utilities/src/index.ts"], + "@fluentui/set-version": ["packages/set-version/src/index.ts"], + "@fluentui/style-utilities": ["packages/style-utilities/src/index.ts"], + "@fluentui/test-utilities": ["packages/test-utilities/src/index.ts"], + "@fluentui/theme-samples": ["packages/theme-samples/src/index.ts"], + "@fluentui/utilities": ["packages/utilities/src/index.ts"], + "@fluentui/webpack-utilities": ["packages/utilities/src/index.ts"], + "@fluentui/dom-utilities": ["packages/dom-utilities/src/index.ts"], + "@fluentui/theme": ["packages/theme/src/index.ts"], + "@fluentui/react-cards": ["packages/react-cards/src/index.ts"], + "@fluentui/react-charting": ["packages/react-charting/src/index.ts"], + "@fluentui/react-window-provider": ["packages/react-window-provider/src/index.ts"], + "@fluentui/react-icons-mdl2": ["packages/react-icons-mdl2/src/index.ts"], + "@fluentui/react-icons-mdl2-branded": ["packages/react-icons-mdl2-branded/src/index.ts"], + "@fluentui/react-icon-provider": ["packages/react-icon-provider/src/index.ts"], + "@fluentui/react-examples": ["packages/react-examples/src/index.ts"], + "@fluentui/react-examples/lib/*": ["packages/react-examples/src/*"], + "@fluentui/public-docsite-setup": ["packages/public-docsite-setup/src/index.ts"], + "@fluentui/react-docsite-components": ["packages/react-docsite-components/src/index.ts"], + "@fluentui/react-docsite-components/lib/index2": ["packages/react-docsite-components/src/index2.ts"], + "@fluentui/monaco-editor": ["packages/monaco-editor/src/monacoBundle.ts"], + "@fluentui/monaco-editor/esm/*": ["packages/monaco-editor/esm/"], + "@fluentui/monaco-editor/lib/*": ["packages/monaco-editor/src/*"], + "@fluentui/react-monaco-editor": ["packages/react-monaco-editor/src/index.ts"], + "@fluentui/storybook": ["packages/storybook/src/index.ts"] + } + } +} diff --git a/typings/environment/index.d.ts b/typings/environment/index.d.ts index 232b2b46ca00e6..02fa916e27b864 100644 --- a/typings/environment/index.d.ts +++ b/typings/environment/index.d.ts @@ -5,6 +5,8 @@ declare namespace NodeJS { LAGE_PACKAGE_NAME?: string; CI?: string; TF_BUILD?: string; + LOCAL?: string; + LOCAL_LIBRARY_VERSION?: string; } /** diff --git a/workspace.json b/workspace.json index 867f753eb6a9c0..cf99530c098a33 100644 --- a/workspace.json +++ b/workspace.json @@ -19,7 +19,8 @@ "@fluentui/api-docs": { "root": "packages/api-docs", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:node"] }, "@fluentui/azure-themes": { "root": "packages/azure-themes", @@ -46,17 +47,20 @@ "@fluentui/codemods": { "root": "packages/codemods", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:node"] }, "@fluentui/common-styles": { "root": "packages/common-styles", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:web"] }, "@fluentui/cra-template": { "root": "packages/cra-template", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:any"] }, "@fluentui/date-time-utilities": { "root": "packages/date-time-utilities", @@ -81,7 +85,8 @@ "@fluentui/dom-utilities": { "root": "packages/dom-utilities", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:web"] }, "@fluentui/e2e": { "root": "packages/fluentui/e2e", @@ -138,7 +143,8 @@ "@fluentui/monaco-editor": { "root": "packages/monaco-editor", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:web"] }, "@fluentui/nx-workspace-tools": { "root": "tools", @@ -183,7 +189,8 @@ "@fluentui/perf-test": { "root": "apps/perf-test", "projectType": "application", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8"] }, "@fluentui/perf-test-northstar": { "root": "packages/fluentui/perf-test-northstar", @@ -215,17 +222,20 @@ "@fluentui/public-docsite": { "root": "apps/public-docsite", "projectType": "application", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8"] }, "@fluentui/public-docsite-resources": { "root": "apps/public-docsite-resources", "projectType": "application", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8"] }, "@fluentui/public-docsite-setup": { "root": "packages/public-docsite-setup", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:node"] }, "@fluentui/react": { "root": "packages/react", @@ -287,12 +297,14 @@ "@fluentui/react-cards": { "root": "packages/react-cards", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8"] }, "@fluentui/react-charting": { "root": "packages/react-charting", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8"] }, "@fluentui/react-checkbox": { "root": "packages/react-checkbox", @@ -398,17 +410,20 @@ "@fluentui/react-icon-provider": { "root": "packages/react-icon-provider", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:web"] }, "@fluentui/react-icons-mdl2": { "root": "packages/react-icons-mdl2", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:web"] }, "@fluentui/react-icons-mdl2-branded": { "root": "packages/react-icons-mdl2-branded", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:web"] }, "@fluentui/react-icons-northstar": { "root": "packages/fluentui/react-icons-northstar", @@ -460,7 +475,8 @@ "@fluentui/react-monaco-editor": { "root": "packages/react-monaco-editor", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:web"] }, "@fluentui/react-northstar": { "root": "packages/fluentui/react-northstar", @@ -661,7 +677,8 @@ "@fluentui/react-window-provider": { "root": "packages/react-window-provider", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:web"] }, "@fluentui/scheme-utilities": { "root": "packages/scheme-utilities", @@ -681,7 +698,8 @@ "@fluentui/ssr-tests": { "root": "apps/ssr-tests", "projectType": "application", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8"] }, "@fluentui/state": { "root": "packages/fluentui/state", @@ -691,7 +709,8 @@ "@fluentui/storybook": { "root": "packages/storybook", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:web"] }, "@fluentui/style-utilities": { "root": "packages/style-utilities", @@ -716,7 +735,8 @@ "@fluentui/theme": { "root": "packages/theme", "projectType": "library", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8", "platform:web"] }, "@fluentui/theme-samples": { "root": "packages/theme-samples", @@ -726,7 +746,8 @@ "@fluentui/theming-designer": { "root": "apps/theming-designer", "projectType": "application", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8"] }, "@fluentui/ts-minbar-test-react": { "root": "apps/ts-minbar-test-react", @@ -755,7 +776,8 @@ "@fluentui/vr-tests": { "root": "apps/vr-tests", "projectType": "application", - "implicitDependencies": [] + "implicitDependencies": [], + "tags": ["v8"] }, "@fluentui/vr-tests-react-components": { "root": "apps/vr-tests-react-components",