diff --git a/.storybook/preview.js b/.storybook/preview.js index 131b40c23aa396..94b279e14a8a63 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -13,11 +13,11 @@ const realSetCurrentStory = window.__setCurrentStory; window.__setCurrentStory = function (categorization, story) { try { realSetCurrentStory(categorization, story); - } catch (e) { + } catch (err) { // Ignore API removed errors from cypress-storybook's call to forceReRender // https://github.com/storybookjs/storybook/blob/208d2f930b2b72a48355367d993e65e5b01be655/lib/core-client/src/preview/start.ts#L24 - if (!(typeof e.message === 'string' && e.message.includes('was removed in storyStoreV7'))) { - throw e; + if (!(err instanceof Error && err.message.includes('was removed in storyStoreV7'))) { + throw err; } } }; diff --git a/apps/test-bundles/webpack.config.js b/apps/test-bundles/webpack.config.js index e84ecde3f411c5..c8ad3119a34402 100644 --- a/apps/test-bundles/webpack.config.js +++ b/apps/test-bundles/webpack.config.js @@ -21,6 +21,7 @@ if (packageName === '@fluentui/react-northstar') { entries = buildEntries('@fluentui/react'); entries['keyboard-key'] = buildEntry('@fluentui/keyboard-key'); } else { + console.error('🚨 No packageName provided!'); process.exit(1); } diff --git a/apps/ts-minbar-test-react-components/src/index.ts b/apps/ts-minbar-test-react-components/src/index.ts index e7582ba1c0ddd6..b06bee4e7da945 100644 --- a/apps/ts-minbar-test-react-components/src/index.ts +++ b/apps/ts-minbar-test-react-components/src/index.ts @@ -49,9 +49,9 @@ async function performTest() { await shEcho(`yarn --version`); await shEcho(`yarn tsc --version`); await shEcho(`yarn tsc --version`, tempPaths.testApp); - } catch (e) { + } catch (err) { console.error('Something went wrong setting up the test:'); - console.error(e?.stack || e); + console.error(err instanceof Error ? err?.stack : err); process.exit(1); } diff --git a/apps/ts-minbar-test-react/src/index.ts b/apps/ts-minbar-test-react/src/index.ts index b268f2e16afbb0..0297b04c04fb5c 100644 --- a/apps/ts-minbar-test-react/src/index.ts +++ b/apps/ts-minbar-test-react/src/index.ts @@ -51,9 +51,9 @@ async function performTest() { await shEcho(`yarn --version`); await shEcho(`yarn tsc --version`); await shEcho(`yarn tsc --version`, tempPaths.testApp); - } catch (e) { + } catch (err) { console.error('Something went wrong setting up the test:'); - console.error(e?.stack || e); + console.error(err instanceof Error ? err?.stack : err); process.exit(1); } diff --git a/change/@fluentui-api-docs-0023a435-7cc6-4f25-8285-a90e18b6d5c4.json b/change/@fluentui-api-docs-0023a435-7cc6-4f25-8285-a90e18b6d5c4.json new file mode 100644 index 00000000000000..e6c9a76cf861d8 --- /dev/null +++ b/change/@fluentui-api-docs-0023a435-7cc6-4f25-8285-a90e18b6d5c4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: bump api-extractor and tsdoc which enables us to remove --isolateModules hacks within our code", + "packageName": "@fluentui/api-docs", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-codemods-d9f89563-1319-4694-9494-33bedc4f3ef2.json b/change/@fluentui-codemods-d9f89563-1319-4694-9494-33bedc4f3ef2.json new file mode 100644 index 00000000000000..ef4516f3ca0a1b --- /dev/null +++ b/change/@fluentui-codemods-d9f89563-1319-4694-9494-33bedc4f3ef2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/codemods", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-eslint-plugin-cfc95ba1-fba6-4e36-b98b-89187b51db4b.json b/change/@fluentui-eslint-plugin-cfc95ba1-fba6-4e36-b98b-89187b51db4b.json new file mode 100644 index 00000000000000..6779880dc89c8f --- /dev/null +++ b/change/@fluentui-eslint-plugin-cfc95ba1-fba6-4e36-b98b-89187b51db4b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/eslint-plugin", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-global-context-76b10924-4684-4fc4-b53f-c37823797978.json b/change/@fluentui-global-context-76b10924-4684-4fc4-b53f-c37823797978.json new file mode 100644 index 00000000000000..c07da5f09b006c --- /dev/null +++ b/change/@fluentui-global-context-76b10924-4684-4fc4-b53f-c37823797978.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/global-context", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-merge-styles-703a5784-8032-4ff0-ab59-2582ee3475b8.json b/change/@fluentui-merge-styles-703a5784-8032-4ff0-ab59-2582ee3475b8.json new file mode 100644 index 00000000000000..ede5b8d1c3bf4a --- /dev/null +++ b/change/@fluentui-merge-styles-703a5784-8032-4ff0-ab59-2582ee3475b8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/merge-styles", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-172adf2e-e597-4972-b46a-f1ff56036436.json b/change/@fluentui-react-172adf2e-e597-4972-b46a-f1ff56036436.json new file mode 100644 index 00000000000000..ec220b3455204c --- /dev/null +++ b/change/@fluentui-react-172adf2e-e597-4972-b46a-f1ff56036436.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/react", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-conformance-79931335-3fc5-4b81-860f-9f8d5e21d1db.json b/change/@fluentui-react-conformance-79931335-3fc5-4b81-860f-9f8d5e21d1db.json new file mode 100644 index 00000000000000..cb72d78c0d6c29 --- /dev/null +++ b/change/@fluentui-react-conformance-79931335-3fc5-4b81-860f-9f8d5e21d1db.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/react-conformance", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-experiments-6a5a932e-2ec1-4f99-b514-a74943006fdf.json b/change/@fluentui-react-experiments-6a5a932e-2ec1-4f99-b514-a74943006fdf.json new file mode 100644 index 00000000000000..f9c4166c168215 --- /dev/null +++ b/change/@fluentui-react-experiments-6a5a932e-2ec1-4f99-b514-a74943006fdf.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/react-experiments", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-focus-51d1d6b1-4dcb-4b5d-909e-ecb02fd3ab97.json b/change/@fluentui-react-focus-51d1d6b1-4dcb-4b5d-909e-ecb02fd3ab97.json new file mode 100644 index 00000000000000..8a3f56cea5b4fb --- /dev/null +++ b/change/@fluentui-react-focus-51d1d6b1-4dcb-4b5d-909e-ecb02fd3ab97.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/react-focus", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-monaco-editor-c4fecf70-4975-4a70-b526-b9f97b5cb69e.json b/change/@fluentui-react-monaco-editor-c4fecf70-4975-4a70-b526-b9f97b5cb69e.json new file mode 100644 index 00000000000000..e5236df3990901 --- /dev/null +++ b/change/@fluentui-react-monaco-editor-c4fecf70-4975-4a70-b526-b9f97b5cb69e.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/react-monaco-editor", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-table-62559c4a-08ec-4659-a307-db5753a0e899.json b/change/@fluentui-react-table-62559c4a-08ec-4659-a307-db5753a0e899.json new file mode 100644 index 00000000000000..28c143004b061f --- /dev/null +++ b/change/@fluentui-react-table-62559c4a-08ec-4659-a307-db5753a0e899.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/react-table", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-tabster-b994e1d9-a6bd-4b4c-94ca-e2d724bd9fbe.json b/change/@fluentui-react-tabster-b994e1d9-a6bd-4b4c-94ca-e2d724bd9fbe.json new file mode 100644 index 00000000000000..b52ebdd3a528eb --- /dev/null +++ b/change/@fluentui-react-tabster-b994e1d9-a6bd-4b4c-94ca-e2d724bd9fbe.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/react-tabster", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-utilities-078f8a6c-cb92-4524-88a4-5582dfb0850f.json b/change/@fluentui-react-utilities-078f8a6c-cb92-4524-88a4-5582dfb0850f.json new file mode 100644 index 00000000000000..c46370920a5491 --- /dev/null +++ b/change/@fluentui-react-utilities-078f8a6c-cb92-4524-88a4-5582dfb0850f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/react-utilities", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-utilities-cbf9c1ed-b949-4ecb-8e7e-799bc3bd795d.json b/change/@fluentui-utilities-cbf9c1ed-b949-4ecb-8e7e-799bc3bd795d.json new file mode 100644 index 00000000000000..fe5774d73f1823 --- /dev/null +++ b/change/@fluentui-utilities-cbf9c1ed-b949-4ecb-8e7e-799bc3bd795d.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: tweak type errors exposed in ts 4.5", + "packageName": "@fluentui/utilities", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/package.json b/package.json index 60a7a7271cd94c..75430d6eb123da 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,9 @@ "@griffel/webpack-loader": "2.1.8", "@jest/reporters": "28.1.3", "@mdx-js/loader": "1.6.22", - "@microsoft/api-extractor": "7.18.1", + "@microsoft/api-extractor": "7.22.2", + "@microsoft/api-extractor-model": "7.17.1", + "@microsoft/tsdoc": "0.14.1", "@microsoft/eslint-plugin-sdl": "0.1.9", "@microsoft/load-themed-styles": "1.10.26", "@microsoft/loader-load-themed-styles": "2.0.17", @@ -343,7 +345,7 @@ "tsconfig-paths": "4.1.0", "tsconfig-paths-webpack-plugin": "4.0.0", "tslib": "2.4.1", - "typescript": "4.3.5", + "typescript": "4.5.5", "vinyl": "2.2.0", "vrscreenshotdiff": "0.0.17", "webpack": "5.83.1", diff --git a/packages/api-docs/package.json b/packages/api-docs/package.json index 217820573cb8fe..7119424dc62382 100644 --- a/packages/api-docs/package.json +++ b/packages/api-docs/package.json @@ -21,8 +21,8 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@microsoft/api-extractor-model": "7.13.3", - "@microsoft/tsdoc": "0.13.2", + "@microsoft/api-extractor-model": "7.17.1", + "@microsoft/tsdoc": "0.14.1", "fs-extra": "^8.1.0" } } diff --git a/packages/api-docs/src/const-enum-overrides.ts b/packages/api-docs/src/const-enum-overrides.ts deleted file mode 100644 index 805bc12117ccb6..00000000000000 --- a/packages/api-docs/src/const-enum-overrides.ts +++ /dev/null @@ -1,101 +0,0 @@ -/** - * ☝️ NOTE: - * Types in this file provide const enums replacement that will compile with isolatedModules - */ - -import type { ApiItemKind as _ApiItemKind } from '@microsoft/api-extractor-model'; - -import type { DocNodeKind as _DocNodeKind } from '@microsoft/tsdoc'; - -export enum ApiItemKind { - CallSignature = 'CallSignature', - Class = 'Class', - Constructor = 'Constructor', - ConstructSignature = 'ConstructSignature', - EntryPoint = 'EntryPoint', - Enum = 'Enum', - EnumMember = 'EnumMember', - Function = 'Function', - IndexSignature = 'IndexSignature', - Interface = 'Interface', - Method = 'Method', - MethodSignature = 'MethodSignature', - Model = 'Model', - Namespace = 'Namespace', - Package = 'Package', - Property = 'Property', - PropertySignature = 'PropertySignature', - TypeAlias = 'TypeAlias', - Variable = 'Variable', - None = 'None', -} - -export enum DocNodeKind { - Block = 'Block', - BlockTag = 'BlockTag', - Excerpt = 'Excerpt', - FencedCode = 'FencedCode', - CodeSpan = 'CodeSpan', - Comment = 'Comment', - DeclarationReference = 'DeclarationReference', - ErrorText = 'ErrorText', - EscapedText = 'EscapedText', - HtmlAttribute = 'HtmlAttribute', - HtmlEndTag = 'HtmlEndTag', - HtmlStartTag = 'HtmlStartTag', - InheritDocTag = 'InheritDocTag', - InlineTag = 'InlineTag', - LinkTag = 'LinkTag', - MemberIdentifier = 'MemberIdentifier', - MemberReference = 'MemberReference', - MemberSelector = 'MemberSelector', - MemberSymbol = 'MemberSymbol', - Paragraph = 'Paragraph', - ParamBlock = 'ParamBlock', - ParamCollection = 'ParamCollection', - PlainText = 'PlainText', - Section = 'Section', - SoftBreak = 'SoftBreak', -} - -// Following function is used to keep 3rd party types in sync with our custom ones. test on "type level" -// If anything will go wrong this will throw TSC error -// -// Why do we need this? -// To be able to use `isolateModules` we cannot use nor consume const enums. -// @ts-expect-error - this function is only for type compat test - -function _testEnumsCompatibility() { - testApiItemKind(); - testDocNodeKind(); - - function testDocNodeKind() { - // @ts-expect-error - _DocNodeKind is const enum - cannot be used with isolateModules - this does the trick - type Keys = keyof typeof _DocNodeKind; - type Keys2 = keyof typeof DocNodeKind; - - let test = {} as Keys; - let test2 = {} as Keys2; - - test = test2; - test2 = test; - - // eslint-disable-next-line no-console - console.log(test, test2); - } - - function testApiItemKind() { - // @ts-expect-error - _ApiItemKind is const enum - cannot be used with isolateModules - this does the trick - type Keys = keyof typeof _ApiItemKind; - type Keys2 = keyof typeof ApiItemKind; - - let test = {} as Keys; - let test2 = {} as Keys2; - - test = test2; - test2 = test; - - // eslint-disable-next-line no-console - console.log(test, test2); - } -} diff --git a/packages/api-docs/src/pageJson.ts b/packages/api-docs/src/pageJson.ts index 8f2d00d214901b..3a3d00dd51ed67 100644 --- a/packages/api-docs/src/pageJson.ts +++ b/packages/api-docs/src/pageJson.ts @@ -1,5 +1,4 @@ -import { ApiItem, ApiDocumentedItem, ApiModel } from '@microsoft/api-extractor-model'; -import { ApiItemKind } from './const-enum-overrides'; +import { ApiItem, ApiDocumentedItem, ApiModel, ApiItemKind } from '@microsoft/api-extractor-model'; import { findInlineTagByName } from './rendering'; import { ICollectedData } from './types-private'; import { ITableJson, IPageJson, PageGroups } from './types'; diff --git a/packages/api-docs/src/rendering.ts b/packages/api-docs/src/rendering.ts index 771ccdb06de9cf..2853f3fad386cf 100644 --- a/packages/api-docs/src/rendering.ts +++ b/packages/api-docs/src/rendering.ts @@ -11,9 +11,9 @@ import { DocNodeContainer, DocCodeSpan, DocBlock, + DocNodeKind, } from '@microsoft/tsdoc'; import { ApiItem, ApiModel, ExcerptToken, IExcerptTokenRange } from '@microsoft/api-extractor-model'; -import { DocNodeKind } from './const-enum-overrides'; import { ILinkToken } from './types'; import { ICollectedData } from './types-private'; diff --git a/packages/api-docs/src/tableJson.ts b/packages/api-docs/src/tableJson.ts index 10a14fb33c04b9..2d2b246da939aa 100644 --- a/packages/api-docs/src/tableJson.ts +++ b/packages/api-docs/src/tableJson.ts @@ -7,8 +7,8 @@ import { ApiDeclaredItem, HeritageType, ApiItem, + ApiItemKind, } from '@microsoft/api-extractor-model'; -import { ApiItemKind } from './const-enum-overrides'; import { ITableJson, ITableRowJson } from './types'; import { renderDocNodeWithoutInlineTag, getTokenHyperlinks, renderNodes } from './rendering'; import { ICollectedData } from './types-private'; diff --git a/packages/api-docs/src/tableRowJson.ts b/packages/api-docs/src/tableRowJson.ts index 14312686d50cb2..3c40faa38f915e 100644 --- a/packages/api-docs/src/tableRowJson.ts +++ b/packages/api-docs/src/tableRowJson.ts @@ -9,8 +9,8 @@ import { ApiProperty, ApiConstructor, ApiMethod, + ApiItemKind, } from '@microsoft/api-extractor-model'; -import { ApiItemKind } from './const-enum-overrides'; import { ICollectedData } from './types-private'; import { ITableRowJson, IEnumTableRowJson } from './types'; import { diff --git a/packages/bundle-size/src/utils/collectLocalReport.js b/packages/bundle-size/src/utils/collectLocalReport.js index 3c0a4e4a2e8ad4..5a319debd51e5a 100644 --- a/packages/bundle-size/src/utils/collectLocalReport.js +++ b/packages/bundle-size/src/utils/collectLocalReport.js @@ -26,16 +26,21 @@ async function readReportForPackage(reportFile) { ); } - const packageName = path.basename(packageRoot); - const packageReportJSON = await fs.readFile(reportFilePath, 'utf8'); - try { + const packageName = path.basename(packageRoot); + const packageReportJSON = await fs.readFile(reportFilePath, 'utf8'); /** @type {BuildResult[]} */ const packageReport = JSON.parse(packageReportJSON); return { packageName, packageReport }; - } catch (e) { - throw new Error([`Failed to read JSON from "${reportFilePath}":`, e.toString()].join('\n')); + } catch (err) { + if (err instanceof SyntaxError) { + throw new Error([`Invalid JSON in "${reportFilePath}"`, err.toString()].join('\n')); + } + if (err instanceof Error) { + throw new Error([`Failed to read JSON from "${reportFilePath}":`, err.toString()].join('\n')); + } + throw new Error(`Unexpected error: ${err}`); } } diff --git a/packages/bundle-size/src/utils/collectLocalReport.test.js b/packages/bundle-size/src/utils/collectLocalReport.test.js index 58b910557dc047..2b2687f2a20806 100644 --- a/packages/bundle-size/src/utils/collectLocalReport.test.js +++ b/packages/bundle-size/src/utils/collectLocalReport.test.js @@ -121,6 +121,6 @@ describe('collectLocalReport', () => { await fs.writeFile(reportBPath, JSON.stringify(reportB)); await fs.writeFile(reportCPath, JSON.stringify(reportC)); - await expect(collectLocalReport({ root: rootDir })).rejects.toThrow(/Failed to read JSON/); + await expect(collectLocalReport({ root: rootDir })).rejects.toThrow(/Invalid JSON/); }); }); diff --git a/packages/bundle-size/src/utils/getRemoteReport.js b/packages/bundle-size/src/utils/getRemoteReport.js index 8ac3602ae4f7b2..e9fe8fc0c02116 100644 --- a/packages/bundle-size/src/utils/getRemoteReport.js +++ b/packages/bundle-size/src/utils/getRemoteReport.js @@ -26,9 +26,11 @@ module.exports = async function getRemoteReport(branch, attempt = 1) { const { commitSHA } = result[result.length - 1]; return { commitSHA, remoteReport }; - } catch (e) { - console.log([chalk.yellow('[w]'), e.toString()].join(' ')); - console.log([chalk.yellow('[w]'), 'Failed to fetch report from the remote. Retrying...'].join(' ')); + } catch (err) { + if (err instanceof Error) { + console.log([chalk.yellow('[w]'), err.toString()].join(' ')); + console.log([chalk.yellow('[w]'), 'Failed to fetch report from the remote. Retrying...'].join(' ')); + } if (attempt >= MAX_HTTP_ATTEMPT_COUNT) { console.error( diff --git a/packages/codemods/src/codeMods/utilities/helpers/propHelpers.ts b/packages/codemods/src/codeMods/utilities/helpers/propHelpers.ts index 2663e9e445a3b4..5c2d951a2a3b0d 100644 --- a/packages/codemods/src/codeMods/utilities/helpers/propHelpers.ts +++ b/packages/codemods/src/codeMods/utilities/helpers/propHelpers.ts @@ -255,6 +255,7 @@ function tryInsertExistingDecomposedProp(oldProp: string, statement: VariableSta const decompObject = statement.getFirstDescendantByKind(SyntaxKind.ObjectBindingPattern); if (decompObject) { let objectText = decompObject.getText(); + // eslint-disable-next-line deprecation/deprecation objectText = objectText.substr(0, 1) + ` ${oldProp},` + objectText.substr(1); decompObject.replaceWithText(objectText); return true; diff --git a/packages/eslint-plugin/src/rules/ban-instanceof-html-element/index.js b/packages/eslint-plugin/src/rules/ban-instanceof-html-element/index.js index d68b821f0fff32..61bc4c9816813e 100644 --- a/packages/eslint-plugin/src/rules/ban-instanceof-html-element/index.js +++ b/packages/eslint-plugin/src/rules/ban-instanceof-html-element/index.js @@ -61,6 +61,7 @@ const constructorNames = [ 'HTMLDataElement', 'HTMLDataListElement', 'HTMLDetailsElement', + // @ts-expect-error - NOTE: dialog is not supported in safari 14, also it was removed from lib-dom starting typescript 4.4 'HTMLDialogElement', 'HTMLDivElement', 'HTMLDListElement', diff --git a/packages/fluentui/react-northstar/src/utils/positioner/createReferenceFromClick.ts b/packages/fluentui/react-northstar/src/utils/positioner/createReferenceFromClick.ts index 39246fc9fd4b14..728f1a6599fa3f 100644 --- a/packages/fluentui/react-northstar/src/utils/positioner/createReferenceFromClick.ts +++ b/packages/fluentui/react-northstar/src/utils/positioner/createReferenceFromClick.ts @@ -7,6 +7,7 @@ export function createReferenceFromClick(nativeEvent: MouseEvent): PopperJs.Virt const bottom = top + 1; function getBoundingClientRect(): ClientRect { + // @ts-expect-error - error exposed in TS 4.5 - caused by updated dom.lib.d.ts - missing the following properties from type 'ClientRect': x, y, toJSON return { left, top, diff --git a/packages/merge-styles/src/mergeStyleSets.ts b/packages/merge-styles/src/mergeStyleSets.ts index 7e98b53259cf3f..a66f7226277c54 100644 --- a/packages/merge-styles/src/mergeStyleSets.ts +++ b/packages/merge-styles/src/mergeStyleSets.ts @@ -213,10 +213,12 @@ export function mergeCssSets( if (registration) { registrations.push(registration); - classNameSet[styleSetArea] = classes.concat([registration.className]).join(' '); + // FIXME: classNameSet invalid types - exposed in TS 4.5 - cast needed + (classNameSet as Record)[styleSetArea] = classes.concat([registration.className]).join(' '); } } else { - classNameSet[styleSetArea] = classes.join(' '); + // FIXME: classNameSet invalid types - exposed in TS 4.5 - cast needed + (classNameSet as Record)[styleSetArea] = classes.join(' '); } } } diff --git a/packages/react-components/global-context/src/global-context-selector.ts b/packages/react-components/global-context/src/global-context-selector.ts index 079d174c5908e6..ec2d843afd7e66 100644 --- a/packages/react-components/global-context/src/global-context-selector.ts +++ b/packages/react-components/global-context/src/global-context-selector.ts @@ -17,7 +17,6 @@ if (!isBrowser && process.env.NODE_ENV !== 'production') { const globalSymbols = Object.getOwnPropertySymbols(globalObject); globalSymbols.forEach(sym => { if (Symbol.keyFor(sym)?.startsWith(SYMBOL_NAMESPACE)) { - // @ts-expect-error - Indexing object with symbols not supported until TS 4.4 delete globalObject[sym]; } }); @@ -44,11 +43,9 @@ export const createContext = (defaultValue: T, name: string, packageName: str // Object symbol properties can't be iterated with `for` or `Object.keys` const globalSymbols = Object.getOwnPropertySymbols(globalObject); if (!globalSymbols.includes(sym)) { - // @ts-expect-error - Indexing object with symbols not supported until TS 4.4 // eslint-disable-next-line @fluentui/no-context-default-value - globalObject[sym] = baseCreateContext(defaultValue); + globalObject[sym] = baseCreateContext(defaultValue); } - // @ts-expect-error - Indexing object with symbols not supported until TS 4.4 return globalObject[sym] as React.Context; }; diff --git a/packages/react-components/global-context/src/global-context.ts b/packages/react-components/global-context/src/global-context.ts index d2191478ae4005..a994ddea8f0e49 100644 --- a/packages/react-components/global-context/src/global-context.ts +++ b/packages/react-components/global-context/src/global-context.ts @@ -16,7 +16,6 @@ if (!isBrowser && process.env.NODE_ENV !== 'production') { const globalSymbols = Object.getOwnPropertySymbols(globalObject); globalSymbols.forEach(sym => { if (Symbol.keyFor(sym)?.startsWith(SYMBOL_NAMESPACE)) { - // @ts-expect-error - Indexing object with symbols not supported until TS 4.4 delete globalObject[sym]; } }); @@ -43,11 +42,9 @@ export const createContext = (defaultValue: T, name: string, packageName: str // Object symbol properties can't be iterated with `for` or `Object.keys` const globalSymbols = Object.getOwnPropertySymbols(globalObject); if (!globalSymbols.includes(sym)) { - // @ts-expect-error - Indexing object with symbols not supported until TS 4.4 // eslint-disable-next-line @fluentui/no-context-default-value - globalObject[sym] = React.createContext(defaultValue); + globalObject[sym] = React.createContext(defaultValue); } - // @ts-expect-error - Indexing object with symbols not supported until TS 4.4 return globalObject[sym] as React.Context; }; diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts b/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts index 1f34034ea623d9..8a816e760ba432 100644 --- a/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts @@ -29,6 +29,7 @@ export const useDataGridHeaderCell_unstable = ( const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns); const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable); + // eslint-disable-next-line deprecation/deprecation -- prefer HTMLTableCellElement const onClick = useEventCallback((e: React.MouseEvent) => { if (sortable) { toggleColumnSort(e, columnId); diff --git a/packages/react-components/react-tabster/src/hooks/useFocusVisible.ts b/packages/react-components/react-tabster/src/hooks/useFocusVisible.ts index 6af1e027b85046..2359dc26fef510 100644 --- a/packages/react-components/react-tabster/src/hooks/useFocusVisible.ts +++ b/packages/react-components/react-tabster/src/hooks/useFocusVisible.ts @@ -4,7 +4,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts import { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill'; type UseFocusVisibleOptions = { - targetDocument?: HTMLDocument; + targetDocument?: Document; }; export function useFocusVisible(options: UseFocusVisibleOptions = {}) { diff --git a/packages/react-components/react-utilities/src/compose/getSlotsNext.ts b/packages/react-components/react-utilities/src/compose/getSlotsNext.ts index 4f5e11b0e91964..a972061be827da 100644 --- a/packages/react-components/react-utilities/src/compose/getSlotsNext.ts +++ b/packages/react-components/react-utilities/src/compose/getSlotsNext.ts @@ -32,7 +32,10 @@ function getSlotNext( if (props === undefined) { return [null, undefined as R[K]]; } - const { as: asProp, ...propsWithoutAs } = props; + + type NonUndefined = T extends undefined ? never : T; + // TS Error: Property 'as' does not exist on type 'UnknownSlotProps | undefined'.ts(2339) + const { as: asProp, ...propsWithoutAs } = props as NonUndefined; const slot = ( state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string' diff --git a/packages/react-components/react-utilities/src/utils/isHTMLElement.ts b/packages/react-components/react-utilities/src/utils/isHTMLElement.ts index 060e2c8bf5c262..74969ccffb3f65 100644 --- a/packages/react-components/react-utilities/src/utils/isHTMLElement.ts +++ b/packages/react-components/react-utilities/src/utils/isHTMLElement.ts @@ -45,7 +45,8 @@ export type HTMLElementConstructorName = | 'HTMLDataElement' | 'HTMLDataListElement' | 'HTMLDetailsElement' - | 'HTMLDialogElement' + // NOTE: dialog is not supported in safari 14, also it was removed from lib-dom starting typescript 4.4 + // | 'HTMLDialogElement' | 'HTMLDivElement' | 'HTMLDListElement' | 'HTMLEmbedElement' diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx index 2401c758d7c23f..bde307b2ce0fc3 100644 --- a/packages/react-conformance/src/defaultTests.tsx +++ b/packages/react-conformance/src/defaultTests.tsx @@ -9,6 +9,12 @@ import { ComponentDoc } from 'react-docgen-typescript'; import { getPackagePath, getCallbackArguments, validateCallbackArguments } from './utils/index'; import { act } from 'react-dom/test-utils'; +/** + * TODO - TS 4.5 introduces strict catch `err` callback handling - opting out for sake of smoother ts 4.5 upgrade + */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type OptOutStrictCatchTypes = any; + const CALLBACK_REGEX = /^on(?!Render[A-Z])[A-Z]/; /** @@ -39,7 +45,7 @@ export const defaultTests: TestObject = { } else { expect(componentFile[displayName]).toBe(Component); } - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['exports-component'](testInfo, e, Object.keys(componentFile))); } }); @@ -51,7 +57,7 @@ export const defaultTests: TestObject = { try { const { requiredProps, Component, renderOptions } = testInfo; expect(() => render(, renderOptions)).not.toThrow(); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['component-renders'](testInfo, e)); } }); @@ -73,7 +79,7 @@ export const defaultTests: TestObject = { // component with constructor name Wrapped, and adds a Styled prefix to the displayName. Components passed to // styled() typically have Base in their name, so remove that too. expect(displayName).toMatch(new RegExp(`^(Customized|Styled)?${testInfo.displayName}(Base)?$`)); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['component-has-displayname'](testInfo, e)); } }); @@ -95,7 +101,7 @@ export const defaultTests: TestObject = { try { expect(rootRef.current).toBeInstanceOf(HTMLElement); expect(baseElement.contains(rootRef.current)).toBe(true); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['component-handles-ref'](testInfo, e)); } }); @@ -129,7 +135,7 @@ export const defaultTests: TestObject = { // will print out the very long stringified version in the error (which isn't helpful) expect(rootRef.current).toBeInstanceOf(HTMLElement); expect(rootRef.current).toBe(refEl); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['component-has-root-ref'](testInfo, e)); } }); @@ -175,7 +181,7 @@ export const defaultTests: TestObject = { try { expect(elementWithSize).toBeFalsy(); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['omits-size-prop'](testInfo, e, size, elementWithSize!)); } }); @@ -211,7 +217,7 @@ export const defaultTests: TestObject = { try { expect(classNames).toContain(testClassName); handledClassName = true; - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error( defaultErrorMessages['component-handles-classname'](testInfo, e, testClassName, classNames, domNode), ); @@ -232,7 +238,7 @@ export const defaultTests: TestObject = { for (defaultClassName of defaultClassNames) { expect(classNames).toContain(defaultClassName); } - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error( defaultErrorMessages['component-preserves-default-classname']( testInfo, @@ -266,7 +272,7 @@ export const defaultTests: TestObject = { const classNamesFromFile = indexFile[exportName]; expect(classNamesFromFile).toBeTruthy(); handledClassNamesObjectExport = true; - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error( defaultErrorMessages['component-has-static-classnames-object-exported'](testInfo, e, exportName), ); @@ -291,7 +297,7 @@ export const defaultTests: TestObject = { try { expect(classNamesFromFile).toEqual(expectedClassNames); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error( defaultErrorMessages['component-has-static-classnames-in-correct-format'](testInfo, e, exportName), ); @@ -331,7 +337,7 @@ export const defaultTests: TestObject = { try { expect(missingClassNames).toHaveLength(0); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error( defaultErrorMessages['component-has-static-classnames']( testInfo, @@ -354,7 +360,7 @@ export const defaultTests: TestObject = { const fileName = path.basename(componentPath, path.extname(componentPath)); expect(displayName).toMatch(fileName); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['name-matches-filename'](testInfo, e)); } }); @@ -372,7 +378,7 @@ export const defaultTests: TestObject = { const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index')); expect(indexFile[displayName]).toBe(Component); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['exported-top-level'](testInfo, e)); } }); @@ -390,7 +396,7 @@ export const defaultTests: TestObject = { const topLevelFile = require(path.join(getPackagePath(componentPath), 'src', displayName)); expect(topLevelFile[displayName]).toBe(Component); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['has-top-level-file'](testInfo, e)); } }); @@ -404,7 +410,7 @@ export const defaultTests: TestObject = { ); try { expect(invalidProps).toEqual([]); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['kebab-aria-attributes'](testInfo, invalidProps)); } }); @@ -432,7 +438,7 @@ export const defaultTests: TestObject = { try { expect(invalidProps).toEqual([]); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['consistent-callback-names'](testInfo, invalidProps)); } }); @@ -476,7 +482,7 @@ export const defaultTests: TestObject = { try { validateCallbackArguments(getCallbackArguments(tsProgram, rootFileName, propsTypeName, propName)); - } catch (err) { + } catch (err: OptOutStrictCatchTypes) { console.log('err', err); return { ...errors, [propName]: err }; @@ -488,7 +494,7 @@ export const defaultTests: TestObject = { try { expect(invalidProps).toEqual({}); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['consistent-callback-args'](testInfo, invalidProps)); } }); @@ -555,7 +561,7 @@ export const defaultTests: TestObject = { expect(rootNode).not.toBe(ref.current); expect(rootNode.getAttribute(testDataAttribute)).not.toEqual(testDataAttribute); }); - } catch (e) { + } catch (e: OptOutStrictCatchTypes) { throw new Error(defaultErrorMessages['primary-slot-gets-native-props'](testInfo, e)); } }); diff --git a/packages/react-examples/src/react/ThemeGenerator/ThemeGenerator.doc.tsx b/packages/react-examples/src/react/ThemeGenerator/ThemeGenerator.doc.tsx index 9cb3524c5559c1..62102345cddb76 100644 --- a/packages/react-examples/src/react/ThemeGenerator/ThemeGenerator.doc.tsx +++ b/packages/react-examples/src/react/ThemeGenerator/ThemeGenerator.doc.tsx @@ -40,7 +40,7 @@ export class ThemeGeneratorPage extends React.Component<{}, IThemeGeneratorPageS ThemeGenerator.insureSlots(themeRules, isDark(themeRules[BaseSlots[BaseSlots.backgroundColor]].color!)); this.state = { - themeRules: themeRules, + themeRules, colorPickerSlotRule: null, colorPickerElement: null, colorPickerVisible: false, @@ -227,7 +227,7 @@ export class ThemeGeneratorPage extends React.Component<{}, IThemeGeneratorPageS true, true, ); - this.setState({ themeRules: themeRules }, this._makeNewTheme); + this.setState({ themeRules }, this._makeNewTheme); }, 20); // 20ms is low enough that you can slowly drag to change color and see that theme, // but high enough that quick changes don't get bogged down by a million changes in-between @@ -289,6 +289,7 @@ export class ThemeGeneratorPage extends React.Component<{}, IThemeGeneratorPageS const contrastRatio = getContrastRatio(bgc, fgc); let contrastRatioString = String(contrastRatio); + // eslint-disable-next-line deprecation/deprecation contrastRatioString = contrastRatioString.substr(0, contrastRatioString.indexOf('.') + 3); if (contrastRatio < 4.5) { contrastRatioString = '**' + contrastRatioString + '**'; @@ -413,7 +414,7 @@ export class ThemeGeneratorPage extends React.Component<{}, IThemeGeneratorPageS // isInverted got swapped, so need to refresh slots with new shading rules ThemeGenerator.insureSlots(themeRules, !currentIsDark); } - this.setState({ themeRules: themeRules }, this._makeNewTheme); + this.setState({ themeRules }, this._makeNewTheme); }, 20); // 20ms is low enough that you can slowly drag to change color and see that theme, // but high enough that quick changes don't get bogged down by a million changes in-between diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/CopyableItem.tsx b/packages/react-experiments/src/components/SelectedItemsList/Items/CopyableItem.tsx index 5706221bcc6922..8b5f20ec850154 100644 --- a/packages/react-experiments/src/components/SelectedItemsList/Items/CopyableItem.tsx +++ b/packages/react-experiments/src/components/SelectedItemsList/Items/CopyableItem.tsx @@ -26,6 +26,7 @@ export const CopyableItem = ( // Try to copy the text directly to the clipboard copyInput.value = copyText; copyInput.select(); + // eslint-disable-next-line deprecation/deprecation if (!document.execCommand('copy')) { // The command failed. Fallback to the method below. throw new Error(); diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.tsx b/packages/react-focus/src/components/FocusZone/FocusZone.tsx index fe22bb57a16930..a8ae33009abcc4 100644 --- a/packages/react-focus/src/components/FocusZone/FocusZone.tsx +++ b/packages/react-focus/src/components/FocusZone/FocusZone.tsx @@ -60,6 +60,7 @@ function raiseClickFromKeyboardEvent(target: Element, ev?: React.KeyboardEvent implements IFocu private _moveFocus( isForward: boolean, + // eslint-disable-next-line deprecation/deprecation getDistanceFromCenter: (activeRect: ClientRect, targetRect: ClientRect) => number, ev?: Event, useDefaultWrap: boolean = true, @@ -934,6 +936,7 @@ export class FocusZone extends React.Component implements IFocu if (isBidirectional) { if (element) { const targetRect = element.getBoundingClientRect(); + // eslint-disable-next-line deprecation/deprecation const elementDistance = getDistanceFromCenter(activeRect as ClientRect, targetRect); if (elementDistance === -1 && candidateDistance === -1) { @@ -987,6 +990,7 @@ export class FocusZone extends React.Component implements IFocu const leftAlignment = this._focusAlignment.left || this._focusAlignment.x || 0; if ( + // eslint-disable-next-line deprecation/deprecation this._moveFocus(true, (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; // ClientRect values can be floats that differ by very small fractions of a decimal. @@ -1029,6 +1033,7 @@ export class FocusZone extends React.Component implements IFocu const leftAlignment = this._focusAlignment.left || this._focusAlignment.x || 0; if ( + // eslint-disable-next-line deprecation/deprecation this._moveFocus(false, (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; // ClientRect values can be floats that differ by very small fractions of a decimal. @@ -1070,6 +1075,7 @@ export class FocusZone extends React.Component implements IFocu if ( this._moveFocus( getRTL(theme), + // eslint-disable-next-line deprecation/deprecation (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; let topBottomComparison; @@ -1112,6 +1118,7 @@ export class FocusZone extends React.Component implements IFocu if ( this._moveFocus( !getRTL(theme), + // eslint-disable-next-line deprecation/deprecation (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; let topBottomComparison; @@ -1151,7 +1158,9 @@ export class FocusZone extends React.Component implements IFocu private _getHorizontalDistanceFromCenter = ( isForward: boolean, + // eslint-disable-next-line deprecation/deprecation activeRect: ClientRect, + // eslint-disable-next-line deprecation/deprecation targetRect: ClientRect, ): number => { // eslint-disable-next-line deprecation/deprecation diff --git a/packages/react-monaco-editor/src/utilities/getQueryParam.ts b/packages/react-monaco-editor/src/utilities/getQueryParam.ts index d391ad4b8e4388..028858691935f5 100644 --- a/packages/react-monaco-editor/src/utilities/getQueryParam.ts +++ b/packages/react-monaco-editor/src/utilities/getQueryParam.ts @@ -10,6 +10,7 @@ export function getQueryParam(name: string, url?: string): string | null { url = url || (win ? win.location.href : ''); // Manually get the query string in case it's after the hash (possible with hash routing) const queryIndex = url.indexOf('?'); + // eslint-disable-next-line deprecation/deprecation const query = queryIndex !== -1 ? url.substr(queryIndex) : ''; const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); diff --git a/packages/react/src/components/Coachmark/Coachmark.base.tsx b/packages/react/src/components/Coachmark/Coachmark.base.tsx index d79fed83bb199f..ce307961c3c059 100644 --- a/packages/react/src/components/Coachmark/Coachmark.base.tsx +++ b/packages/react/src/components/Coachmark/Coachmark.base.tsx @@ -572,6 +572,7 @@ function getBounds( } function isInsideElement( + // eslint-disable-next-line deprecation/deprecation targetElementRect: ClientRect, mouseX: number, mouseY: number, diff --git a/packages/react/src/components/ColorPicker/ColorPicker.base.tsx b/packages/react/src/components/ColorPicker/ColorPicker.base.tsx index ed3d7b33538e84..af54cf5fb10000 100644 --- a/packages/react/src/components/ColorPicker/ColorPicker.base.tsx +++ b/packages/react/src/components/ColorPicker/ColorPicker.base.tsx @@ -346,6 +346,7 @@ export class ColorPickerBase extends React.Component { // Cut the mustard using msMaxTouchPoints to detect IE11 which does not support CSS object-fit const window: Window | undefined = getWindow(); - const supportsObjectFit: boolean = window !== undefined && window.navigator.msMaxTouchPoints === undefined; + const supportsObjectFit: boolean = + window !== undefined && + // eslint-disable-next-line @fluentui/max-len + // cast needed as vendor prefixed `msMaxTouchPoints` api is no longer part of TS lib declaration - introduced with TS 4.4 + (window.navigator as { msMaxTouchPoints?: Window['navigator']['maxTouchPoints'] }).msMaxTouchPoints === undefined; const fallbackObjectFitStyles = (isContain && isLandscape) || (isCover && !isLandscape) ? { width: '100%', height: 'auto' } diff --git a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx index f646106c8b0dfc..5254f6ab1f19da 100644 --- a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx +++ b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx @@ -33,7 +33,7 @@ export class BaseSelectedItemsList> initializeComponentRef(this); const items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || []; this.state = { - items: items, + items, }; // Create a new selection if one is not specified @@ -126,7 +126,7 @@ export class BaseSelectedItemsList> // If the component is a controlled component then the controlling component will need to pass the new props this.onChange(items); } else { - this.setState({ items: items }, () => { + this.setState({ items }, () => { this._onSelectedItemsUpdated(items, focusIndex); }); } @@ -182,7 +182,7 @@ export class BaseSelectedItemsList> selected: this.selection.isIndexSelected(index), onRemoveItem: () => this.removeItem(item), onItemChange: this.onItemChange, - removeButtonAriaLabel: removeButtonAriaLabel, + removeButtonAriaLabel, onCopyItem: (itemToCopy: T) => this.copyItems([itemToCopy]), }), ); @@ -220,6 +220,7 @@ export class BaseSelectedItemsList> // Try to copy the text directly to the clipboard copyInput.value = copyText; copyInput.select(); + // eslint-disable-next-line deprecation/deprecation if (!document.execCommand('copy')) { // The command failed. Fallback to the method below. throw new Error(); diff --git a/packages/react/src/components/Slider/useSlider.ts b/packages/react/src/components/Slider/useSlider.ts index a881eba9d8200c..ddfa1015218520 100644 --- a/packages/react/src/components/Slider/useSlider.ts +++ b/packages/react/src/components/Slider/useSlider.ts @@ -264,6 +264,7 @@ export const useSlider = (props: ISliderProps, ref: React.ForwardedRef { + // eslint-disable-next-line deprecation/deprecation const sliderPositionRect: ClientRect = sliderLine.current!.getBoundingClientRect(); const sliderLength: number = !props.vertical ? sliderPositionRect.width : sliderPositionRect.height; const stepLength: number = sliderLength / steps; diff --git a/packages/react/src/components/TextField/MaskedTextField/MaskedTextField.tsx b/packages/react/src/components/TextField/MaskedTextField/MaskedTextField.tsx index 674be21115dc9a..d9108ab0c4c9e9 100644 --- a/packages/react/src/components/TextField/MaskedTextField/MaskedTextField.tsx +++ b/packages/react/src/components/TextField/MaskedTextField/MaskedTextField.tsx @@ -221,6 +221,7 @@ export const MaskedTextField: React.FunctionComponent = R const charsSelected = selectionEnd - selectionStart; const charCount = inputValue.length + charsSelected - displayValue.length; const startPos = selectionStart; + // eslint-disable-next-line deprecation/deprecation const pastedString = inputValue.substr(startPos, charCount); // Clear any selected characters @@ -251,6 +252,7 @@ export const MaskedTextField: React.FunctionComponent = R // This case is if the user added characters const charCount = inputValue.length - displayValue.length; const startPos = selectionEnd - charCount; + // eslint-disable-next-line deprecation/deprecation const enteredString = inputValue.substr(startPos, charCount); cursorPos = insertString(internalState.maskCharData, startPos, enteredString); @@ -262,6 +264,7 @@ export const MaskedTextField: React.FunctionComponent = R const charCount = 1; const selectCount = displayValue.length + charCount - inputValue.length; const startPos = selectionEnd - charCount; + // eslint-disable-next-line deprecation/deprecation const enteredString = inputValue.substr(startPos, charCount); // Clear the selected range diff --git a/packages/react/src/utilities/DraggableZone/DraggableZone.tsx b/packages/react/src/utilities/DraggableZone/DraggableZone.tsx index af1506bf543723..c9df1913d94781 100644 --- a/packages/react/src/utilities/DraggableZone/DraggableZone.tsx +++ b/packages/react/src/utilities/DraggableZone/DraggableZone.tsx @@ -264,6 +264,7 @@ export class DraggableZone extends React.Component { let ev = document.createEvent('HTMLEvents'); eg.on(sourceButton, 'click', parent.cb); + // eslint-disable-next-line deprecation/deprecation ev.initEvent('click', true, true); sourceButton.dispatchEvent(ev); @@ -149,6 +150,7 @@ describe('EventGroup', () => { try { let ev = document.createEvent('HTMLEvents'); + // eslint-disable-next-line deprecation/deprecation ev.initEvent('click', true, true); grandChildButton.dispatchEvent(ev); diff --git a/packages/utilities/src/EventGroup.ts b/packages/utilities/src/EventGroup.ts index 3a4ccacc9496a1..87927e95f6f11a 100644 --- a/packages/utilities/src/EventGroup.ts +++ b/packages/utilities/src/EventGroup.ts @@ -68,6 +68,7 @@ export class EventGroup { if (typeof document !== 'undefined' && document.createEvent) { let ev = document.createEvent('HTMLEvents'); + // eslint-disable-next-line deprecation/deprecation ev.initEvent(eventName, bubbleEvent || false, true); assign(ev, eventArgs); @@ -183,10 +184,10 @@ export class EventGroup { } else { let parent = this._parent; let eventRecord: IEventRecord = { - target: target, - eventName: eventName, - parent: parent, - callback: callback, + target, + eventName, + parent, + callback, options, }; diff --git a/packages/utilities/src/dom/raiseClick.ts b/packages/utilities/src/dom/raiseClick.ts index efd01affb6e441..d66c78a03e5157 100644 --- a/packages/utilities/src/dom/raiseClick.ts +++ b/packages/utilities/src/dom/raiseClick.ts @@ -3,6 +3,7 @@ */ export function raiseClick(target: Element): void { const event = createNewEvent('MouseEvents'); + // eslint-disable-next-line deprecation/deprecation event.initEvent('click', true, true); target.dispatchEvent(event); } @@ -15,6 +16,7 @@ function createNewEvent(eventName: string): Event { } else { // IE event = document.createEvent('Event'); + // eslint-disable-next-line deprecation/deprecation event.initEvent(eventName, true, true); } return event; diff --git a/scripts/dangerjs/src/detectNonApprovedDependencies/utils/getVersionConstraints.ts b/scripts/dangerjs/src/detectNonApprovedDependencies/utils/getVersionConstraints.ts index e130b1b202e8dd..83fec1ebca560d 100644 --- a/scripts/dangerjs/src/detectNonApprovedDependencies/utils/getVersionConstraints.ts +++ b/scripts/dangerjs/src/detectNonApprovedDependencies/utils/getVersionConstraints.ts @@ -1,10 +1,12 @@ -import * as path from 'path'; import * as fs from 'fs'; +import * as path from 'path'; -import { getPackageName, getPackageVersion } from './packageNameUtils'; -import { isIgnored } from '../approvedPackages'; import type { PackageJson } from '@fluentui/scripts-monorepo'; +import { isIgnored } from '../approvedPackages'; + +import { getPackageName, getPackageVersion } from './packageNameUtils'; + type Constraints = { [PackageId: string]: string[] }; const findPackageJsonOf = (dependencyPackageId: string, packagePath: string): string | null => { @@ -42,7 +44,9 @@ const parsePackageJson = (packageJsonPath: string): string[] => { return `${packageName}@${versionConstraint}`; }); } catch (err) { - throw new Error(`There was an error reading the ${packageJsonPath} file: ${err.stack}`); + throw new Error( + `There was an error reading the ${packageJsonPath} file: ${err instanceof Error ? err.stack : err}`, + ); } }; diff --git a/scripts/gulp/src/plugins/gulp-component-menu-behaviors.ts b/scripts/gulp/src/plugins/gulp-component-menu-behaviors.ts index b20b107fb86090..89d73d9cfed738 100644 --- a/scripts/gulp/src/plugins/gulp-component-menu-behaviors.ts +++ b/scripts/gulp/src/plugins/gulp-component-menu-behaviors.ts @@ -1,11 +1,13 @@ -import gutil from 'gulp-util'; +import fs from 'fs'; import path from 'path'; +import { Transform } from 'stream'; + +import doctrine from 'doctrine'; +import gutil from 'gulp-util'; +import _ from 'lodash'; import through2, { TransformFunction } from 'through2'; import Vinyl from 'vinyl'; -import _ from 'lodash'; -import fs from 'fs'; -import doctrine from 'doctrine'; -import { Transform } from 'stream'; + import config from '../config'; const { paths } = config; @@ -115,12 +117,15 @@ export default () => { cb(); } } catch (err) { + if (!(err instanceof Error)) { + return; + } const pluginError = new gutil.PluginError(pluginName, err); const relativePath = path.relative(process.cwd(), file.path); pluginError.message = [ gutil.colors.magenta(`Error in file: ${relativePath}`), gutil.colors.red(err.message), - gutil.colors.gray(err.stack), + gutil.colors.gray(err.stack ?? 'error stack is empty'), ].join('\n\n'); this.emit('error', pluginError); } diff --git a/scripts/gulp/src/plugins/gulp-example-menu.ts b/scripts/gulp/src/plugins/gulp-example-menu.ts index 041def4751a0f7..103b42c3ed6248 100644 --- a/scripts/gulp/src/plugins/gulp-example-menu.ts +++ b/scripts/gulp/src/plugins/gulp-example-menu.ts @@ -1,6 +1,7 @@ +import path from 'path'; + import gutil from 'gulp-util'; import _ from 'lodash'; -import path from 'path'; import through2, { FlushCallback, TransformFunction } from 'through2'; import Vinyl from 'vinyl'; @@ -65,12 +66,16 @@ export default () => { cb(); } catch (err) { + if (!(err instanceof Error)) { + return; + } + const pluginError = new gutil.PluginError(pluginName, err); const relativePath = path.relative(process.cwd(), file.path); pluginError.message = [ gutil.colors.magenta(`Error in file: ${relativePath}`), gutil.colors.red(err.message), - gutil.colors.gray(err.stack), + gutil.colors.gray(err.stack ?? 'error stack is empty'), ].join('\n\n'); this.emit('error', pluginError); } diff --git a/scripts/gulp/src/plugins/gulp-react-docgen.ts b/scripts/gulp/src/plugins/gulp-react-docgen.ts index 66bb8eb25ea5b4..7ab118d93336db 100644 --- a/scripts/gulp/src/plugins/gulp-react-docgen.ts +++ b/scripts/gulp/src/plugins/gulp-react-docgen.ts @@ -1,12 +1,13 @@ -import gutil from 'gulp-util'; import path from 'path'; + +import gutil from 'gulp-util'; import through2 from 'through2'; import Vinyl from 'vinyl'; -import getComponentInfo, { GetComponentInfoOptions } from './util/getComponentInfo'; - import config from '../config'; +import getComponentInfo, { GetComponentInfoOptions } from './util/getComponentInfo'; + const { paths } = config; const pluginName = 'gulp-react-docgen'; @@ -50,12 +51,16 @@ export default function reactDocGen(options: DocGenPluginOptions) { cb(null, infoFile); } catch (err) { + if (!(err instanceof Error)) { + return; + } + const pluginError = new gutil.PluginError(pluginName, err); const relativePath = path.relative(process.cwd(), file.path); pluginError.message = [ gutil.colors.magenta(`Error in file: ${relativePath}`), gutil.colors.red(err.message), - gutil.colors.gray(err.stack), + gutil.colors.gray(err.stack ?? 'error stack is empty'), ].join('\n\n'); this.emit('error', pluginError); } diff --git a/scripts/gulp/src/tasks/browserAdapters.ts b/scripts/gulp/src/tasks/browserAdapters.ts index 58efd6f4f029bc..0ea27fdaa27b33 100644 --- a/scripts/gulp/src/tasks/browserAdapters.ts +++ b/scripts/gulp/src/tasks/browserAdapters.ts @@ -5,7 +5,7 @@ import { launch } from '@fluentui/scripts-puppeteer'; import CDP from 'chrome-remote-interface'; export type Page = { - executeJavaScript: (code: string) => Promise; + executeJavaScript: (code: string) => Promise; close: () => Promise; }; diff --git a/scripts/test-ssr/src/utils/buildAssets.ts b/scripts/test-ssr/src/utils/buildAssets.ts index 4765c4f6eea254..9686f705365095 100644 --- a/scripts/test-ssr/src/utils/buildAssets.ts +++ b/scripts/test-ssr/src/utils/buildAssets.ts @@ -55,13 +55,13 @@ export async function buildAssets(config: BuildConfig): Promise { format: 'iife', target: `chrome${chromeVersion}`, }); - } catch (e) { + } catch (err) { throw new Error( [ 'Failed to build assets with esbuild...', 'Please check the errors output above (if present), it should contain useful information to fix the problem.', '\n', - e.message, + err instanceof Error ? err.message : '', ].join(' '), ); } diff --git a/scripts/test-ssr/src/utils/visitPage.ts b/scripts/test-ssr/src/utils/visitPage.ts index 725444219220a2..a709c14ae0c077 100644 --- a/scripts/test-ssr/src/utils/visitPage.ts +++ b/scripts/test-ssr/src/utils/visitPage.ts @@ -47,7 +47,6 @@ export async function visitPage(browser: Browser, url: string) { await visitUrl(page, url); - // @ts-expect-error - https://github.com/puppeteer/puppeteer/issues/9582 await page.waitForSelector(`#${PROVIDER_ID}`); await page.close(); diff --git a/scripts/update-release-notes/changelogsAndTags.ts b/scripts/update-release-notes/changelogsAndTags.ts index b5268e52b4a629..74b4208559fb91 100644 --- a/scripts/update-release-notes/changelogsAndTags.ts +++ b/scripts/update-release-notes/changelogsAndTags.ts @@ -1,4 +1,4 @@ -import { execSync } from 'child_process'; +import { ExecFileException, execSync } from 'child_process'; import * as path from 'path'; import { ChangelogJson } from 'beachball'; @@ -87,7 +87,7 @@ export function getTags(maxAgeDays?: number): string[] { return tags; } catch (err) { - if (err.code === 'ENOBUFS') { + if (err instanceof Error && (err as ExecFileException).code === 'ENOBUFS') { throw new Error(`maxBuffer ${TEN_MEGABYTES}MB was reached. Increase its size in the codebase`); } diff --git a/scripts/update-release-notes/releases.ts b/scripts/update-release-notes/releases.ts index 3da2ab4609c220..1e2eee307c67fe 100644 --- a/scripts/update-release-notes/releases.ts +++ b/scripts/update-release-notes/releases.ts @@ -1,4 +1,4 @@ -import { repoDetails, github } from './init'; +import { github, repoDetails } from './init'; import { IRelease } from './types'; /** @@ -19,7 +19,7 @@ export async function getReleases(tags?: string[]): Promise