From df1f5ea7f1bbb20bf11f2e73aa3198a4d3267fc1 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 13:25:11 +0100 Subject: [PATCH 01/42] chore: migrate repo to React 19 --- apps/chart-docsite/package.json | 4 +- apps/perf-test-react-components/package.json | 4 +- apps/perf-test/package.json | 4 +- apps/public-docsite-resources/package.json | 4 +- apps/public-docsite-v9/package.json | 4 +- apps/public-docsite/package.json | 4 +- apps/theming-designer/package.json | 4 +- apps/vr-tests-react-components/package.json | 4 +- apps/vr-tests-web-components/package.json | 4 +- apps/vr-tests/package.json | 4 +- package.json | 18 +-- packages/react-examples/package.json | 4 +- .../src/react-components-vite/package.json | 8 +- yarn.lock | 107 +++++++++--------- 14 files changed, 87 insertions(+), 90 deletions(-) diff --git a/apps/chart-docsite/package.json b/apps/chart-docsite/package.json index 7a09079879cad2..272d0720b31702 100644 --- a/apps/chart-docsite/package.json +++ b/apps/chart-docsite/package.json @@ -29,8 +29,8 @@ "@fluentui/react-charts": "*", "@fluentui/react-storybook-addon": "*", "@fluentui/react-storybook-addon-export-to-sandbox": "*", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "tslib": "^2.1.0" } } diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json index 9e4ea9f4808cfb..157e2b384c1c12 100644 --- a/apps/perf-test-react-components/package.json +++ b/apps/perf-test-react-components/package.json @@ -29,8 +29,8 @@ "@fluentui/react-theme": "*", "@griffel/core": "^1.16.0", "@microsoft/load-themed-styles": "^1.10.26", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "tslib": "^2.1.0" } } diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json index 8303b0913bb566..f6b4e09190c414 100644 --- a/apps/perf-test/package.json +++ b/apps/perf-test/package.json @@ -22,8 +22,8 @@ "@fluentui/example-data": "*", "@fluentui/react": "*", "@microsoft/load-themed-styles": "^1.10.26", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "tslib": "^2.1.0" } } diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json index 83d2c737eaa06c..20098f3bb5a919 100644 --- a/apps/public-docsite-resources/package.json +++ b/apps/public-docsite-resources/package.json @@ -46,8 +46,8 @@ "@fluentui/theme-samples": "*", "@fluentui/react-monaco-editor": "*", "office-ui-fabric-core": "^11.0.0", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "tslib": "^2.1.0" } } diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index d5d8737dce2a7f..bdc18dc3c502df 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -40,8 +40,8 @@ "@fluentui/react-timepicker-compat": "*", "@griffel/react": "^1.5.22", "@microsoft/applicationinsights-web": "^3", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "react-window": "^1.8.6", "tslib": "^2.1.0", "react-hook-form": "^5.7.2", diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json index 87c7cbbbe12398..84a013c8e8fac3 100644 --- a/apps/public-docsite/package.json +++ b/apps/public-docsite/package.json @@ -48,8 +48,8 @@ "@fluentui/utilities": "*", "@microsoft/load-themed-styles": "^1.10.26", "office-ui-fabric-core": "^11.0.0", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "tslib": "^2.1.0", "whatwg-fetch": "2.0.4" } diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json index b3ebde3f52c7aa..04d48211888c4c 100644 --- a/apps/theming-designer/package.json +++ b/apps/theming-designer/package.json @@ -25,8 +25,8 @@ "@fluentui/set-version": "*", "@fluentui/font-icons-mdl2": "*", "@microsoft/load-themed-styles": "^1.10.26", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "tslib": "^2.1.0" } } diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 15f2c39ce7b373..c9e9c033d6ec6f 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -71,8 +71,8 @@ "@fluentui/react-tree": "*", "@fluentui/react-utilities": "*", "@griffel/react": "^1.5.22", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "tslib": "^2.1.0", "@fluentui/react-breadcrumb": "*", "@fluentui/react-rating": "*", diff --git a/apps/vr-tests-web-components/package.json b/apps/vr-tests-web-components/package.json index aea1e9733b3361..93440686885691 100644 --- a/apps/vr-tests-web-components/package.json +++ b/apps/vr-tests-web-components/package.json @@ -13,8 +13,8 @@ "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --stepsApi parameters" }, "dependencies": { - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "html-react-parser": "4.0.0", "@fluentui/tokens": ">=1.0.0-alpha", "@fluentui/web-components": ">=3.0.0-alpha", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 5e16dbfe435345..4e42b542a11241 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,8 +28,8 @@ "@fluentui/storybook": "*", "@fluentui/react-charting": "*", "@fluentui/theme-samples": "*", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "tslib": "^2.1.0" } } diff --git a/package.json b/package.json index c7aab82be82ce8..690f92f04ff9d6 100644 --- a/package.json +++ b/package.json @@ -148,11 +148,11 @@ "@types/node": "^22.0.0", "@types/prettier": "2.7.2", "@types/progress": "2.0.5", - "@types/react": "18.3.20", - "@types/react-dom": "18.3.6", + "@types/react": "19.2.2", + "@types/react-dom": "19.2.2", "@types/react-frame-component": "4.1.1", - "@types/react-is": "18.3.1", - "@types/react-test-renderer": "18.3.1", + "@types/react-is": "19.2.0", + "@types/react-test-renderer": "19.1.0", "@types/react-transition-group": "4.4.6", "@types/react-window": "^1.8.2", "@types/scheduler": "0.16.2", @@ -275,13 +275,13 @@ "progress": "2.0.3", "puppeteer": "19.6.3", "raw-loader": "4.0.2", - "react": "18.3.1", + "react": "19.2.0", "react-app-polyfill": "2.0.0", - "react-dom": "18.3.1", + "react-dom": "19.2.0", "react-frame-component": "4.1.1", - "react-is": "18.3.1", + "react-is": "19.2.0", "react-shadow": "20.3.0", - "react-test-renderer": "18.3.1", + "react-test-renderer": "19.2.0", "react-window": "^1.8.6", "read-pkg-up": "7.0.1", "replace-in-file": "6.1.0", @@ -296,7 +296,7 @@ "sass": "1.49.11", "sass-loader": "12.4.0", "satisfied": "^1.1.1", - "scheduler": "0.20.2", + "scheduler": "0.27.0", "schema-utils": "3.1.1", "semver": "^6.2.0", "source-map-loader": "4.0.0", diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index 56c89be2dbf93d..5174e078ee9fd2 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -50,8 +50,8 @@ "d3-fetch": "3.0.1", "d3-format": "^3.0.0", "d3-time-format": "^3.0.0", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.2.0", + "react-dom": "19.2.0", "react-shadow": "20.3.0", "tslib": "^2.1.0" } diff --git a/starter-templates/src/react-components-vite/package.json b/starter-templates/src/react-components-vite/package.json index ae3d0e101f341d..924a82ddc8f5b9 100644 --- a/starter-templates/src/react-components-vite/package.json +++ b/starter-templates/src/react-components-vite/package.json @@ -11,12 +11,12 @@ "dependencies": { "@fluentui/react-components": "^9.72.2", "@fluentui/react-icons": "^2.0.311", - "react": "^18.3.1", - "react-dom": "^18.3.1" + "react": "^19.2.0", + "react-dom": "^19.2.0" }, "devDependencies": { - "@types/react": "^18.3.18", - "@types/react-dom": "^18.3.5", + "@types/react": "^19.2.0", + "@types/react-dom": "^19.2.0", "@vitejs/plugin-react": "^4.3.4", "typescript": "~5.7.3", "vite": "^6.0.5" diff --git a/yarn.lock b/yarn.lock index 44cd0f00aab110..58a82462238769 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4833,7 +4833,7 @@ dependencies: "@types/node" "*" -"@types/prop-types@*", "@types/prop-types@15.7.1": +"@types/prop-types@15.7.1": version "15.7.1" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6" integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg== @@ -4862,10 +4862,10 @@ dependencies: "@types/react" "*" -"@types/react-dom@18.3.6": - version "18.3.6" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.6.tgz#fa59a5e9a33499a792af6c1130f55921ef49d268" - integrity sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw== +"@types/react-dom@19.2.2": + version "19.2.2" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.2.tgz#a4cc874797b7ddc9cb180ef0d5dc23f596fc2332" + integrity sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw== "@types/react-frame-component@4.1.1": version "4.1.1" @@ -4874,12 +4874,12 @@ dependencies: "@types/react" "*" -"@types/react-is@18.3.1": - version "18.3.1" - resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.3.1.tgz#c354bd8954551d4c32143038b25abcd6effae04d" - integrity sha512-zts4lhQn5ia0cF/y2+3V6Riu0MAfez9/LJYavdM8TvcVl+S91A/7VWxyBT8hbRuWspmuCaiGI0F41OJYGrKhRA== +"@types/react-is@19.2.0": + version "19.2.0" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-19.2.0.tgz#b72a01627e4820f2333abdc9945c3daac48245e7" + integrity sha512-NP2xtcjZfORsOa4g2JwdseyEnF+wUCx25fTdG/J/HIY6yKga6+NozRBg2xR2gyh7kKYyd6DXndbq0YbQuTJ7Ew== dependencies: - "@types/react" "^18" + "@types/react" "*" "@types/react-syntax-highlighter@^10.2.1": version "10.2.1" @@ -4888,12 +4888,12 @@ dependencies: "@types/react" "*" -"@types/react-test-renderer@18.3.1": - version "18.3.1" - resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz#225bfe8d4ad7ee3b04c2fa27642bb74274a5961d" - integrity sha512-vAhnk0tG2eGa37lkU9+s5SoroCsRI08xnsWFiAXOuPH2jqzMbcXvKExXViPi1P5fIklDeCvXqyrdmipFaSkZrA== +"@types/react-test-renderer@19.1.0": + version "19.1.0" + resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-19.1.0.tgz#1d0af8f2e1b5931e245b8b5b234d1502b854dc10" + integrity sha512-XD0WZrHqjNrxA/MaR9O22w/RNidWR9YZmBdRGI7wcnWGrv/3dA8wKCJ8m63Sn+tLJhcjmuhOi629N66W6kgWzQ== dependencies: - "@types/react" "^18" + "@types/react" "*" "@types/react-transition-group@4.4.6": version "4.4.6" @@ -4909,12 +4909,11 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@18.3.20", "@types/react@^18": - version "18.3.20" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.20.tgz#b0dccda9d2f1bc24d2a04b1d0cb5d0b9a3576ad3" - integrity sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg== +"@types/react@*", "@types/react@19.2.2": + version "19.2.2" + resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36" + integrity sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA== dependencies: - "@types/prop-types" "*" csstype "^3.0.2" "@types/resolve@0.0.8": @@ -17138,7 +17137,14 @@ react-docgen@^7.0.0: resolve "^1.22.1" strip-indent "^4.0.0" -react-dom@18.3.1, "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0": +react-dom@19.2.0: + version "19.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8" + integrity sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ== + dependencies: + scheduler "^0.27.0" + +"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0": version "18.3.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4" integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw== @@ -17170,10 +17176,10 @@ react-hooks-testing-library@^0.5.0: dependencies: "@babel/runtime" "^7.4.2" -react-is@18.3.1, "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.3.1: - version "18.3.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" - integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== +react-is@19.2.0, react-is@^19.2.0: + version "19.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.2.0.tgz#ddc3b4a4e0f3336c3847f18b806506388d7b9973" + integrity sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA== react-is@^16.13.1, react-is@^16.9.0: version "16.13.1" @@ -17185,6 +17191,11 @@ react-is@^17.0.1, react-is@^17.0.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-is@^18.0.0: + version "18.1.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" + integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== + react-property@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.0.tgz#2156ba9d85fa4741faf1918b38efc1eae3c6a136" @@ -17202,14 +17213,6 @@ react-shadow@20.3.0: dependencies: humps "^2.0.1" -react-shallow-renderer@^16.15.0: - version "16.15.0" - resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" - integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA== - dependencies: - object-assign "^4.1.1" - react-is "^16.12.0 || ^17.0.0 || ^18.0.0" - react-syntax-highlighter@^10.1.3: version "10.3.5" resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-10.3.5.tgz#3b3e2d1eba92fb7988c3b50d22d2c74ae0263fdd" @@ -17221,14 +17224,13 @@ react-syntax-highlighter@^10.1.3: prismjs "^1.8.4" refractor "^2.4.1" -react-test-renderer@18.3.1: - version "18.3.1" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.3.1.tgz#e693608a1f96283400d4a3afead6893f958b80b4" - integrity sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA== +react-test-renderer@19.2.0: + version "19.2.0" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-19.2.0.tgz#5c9782b4a4ba0630a77d7ce092779fdf9ccde209" + integrity sha512-zLCFMHFE9vy/w3AxO0zNxy6aAupnCuLSVOJYDe/Tp+ayGI1f2PLQsFVPANSD42gdSbmYx5oN+1VWDhcXtq7hAQ== dependencies: - react-is "^18.3.1" - react-shallow-renderer "^16.15.0" - scheduler "^0.23.2" + react-is "^19.2.0" + scheduler "^0.27.0" react-transition-group@^4.4.1: version "4.4.2" @@ -17248,7 +17250,12 @@ react-window@^1.8.6: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" -react@18.3.1, "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0": +react@19.2.0: + version "19.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-19.2.0.tgz#d33dd1721698f4376ae57a54098cb47fc75d93a5" + integrity sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ== + +"react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0": version "18.3.1" resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891" integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ== @@ -18071,20 +18078,10 @@ saxes@^6.0.0: dependencies: xmlchars "^2.2.0" -scheduler@0.20.2: - version "0.20.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" - integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - -scheduler@^0.23.2: - version "0.23.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3" - integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ== - dependencies: - loose-envify "^1.1.0" +scheduler@0.27.0, scheduler@^0.27.0: + version "0.27.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd" + integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q== schema-utils@3.1.1, schema-utils@^3.0.0, schema-utils@^3.1.1: version "3.1.1" From 1887b3deb6b49549ca1b722b4909a547414afbd1 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 13:27:44 +0100 Subject: [PATCH 02/42] chore(rit): update major react version runner settings --- .github/workflows/pr.yml | 14 +++++++------- nx.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index b33584bb52d87a..2fb62d1a735609 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -104,17 +104,17 @@ jobs: - run: | yarn install --frozen-lockfile yarn rit --react 17 --install-deps - yarn rit --react 19 --install-deps + yarn rit --react 18 --install-deps - - name: Verify Cypress installs from RIT temp workspaces (React 17 -> v13, React 19 -> v14) + - name: Verify Cypress installs from RIT temp workspaces (React 17 -> v13, React 18 -> v14) run: | "$GITHUB_WORKSPACE"/tmp/rit/react-17/node_modules/.bin/cypress verify - "$GITHUB_WORKSPACE"/tmp/rit/react-19/node_modules/.bin/cypress verify + "$GITHUB_WORKSPACE"/tmp/rit/react-18/node_modules/.bin/cypress verify - - name: React Versions Integration Tests (17,19) - E2E + - name: React Versions Integration Tests (17,18) - E2E id: e2e run: | - yarn nx affected -t test-rit--17--e2e,test-rit--19--e2e --exclude='react-19-tests-v9,react-charting,react' + yarn nx affected -t test-rit--17--e2e,test-rit--18--e2e --exclude='react-19-tests-v9,react-charting,react' - name: Upload Cypress screenshots if exist uses: actions/upload-artifact@v4 @@ -125,9 +125,9 @@ jobs: tmp/rit/**/cypress/screenshots/**/*.png retention-days: 1 - - name: React Versions Integration Tests (17,19) - Type-check & Test + - name: React Versions Integration Tests (17,18) - Type-check & Test run: | - FLUENT_JEST_WORKER=2 yarn nx affected -t test-rit--17--type-check,test-rit--19--type-check,test-rit--17--test,test-rit--19--test --exclude='react-19-tests-v9' + FLUENT_JEST_WORKER=2 yarn nx affected -t test-rit--17--type-check,test-rit--18--type-check,test-rit--17--test,test-rit--18--test --exclude='react-19-tests-v9' react_19_v9_source_code_typecheck: if: ${{ github.repository_owner == 'microsoft' }} diff --git a/nx.json b/nx.json index 62606d448a3e35..90d09457b3ec9e 100644 --- a/nx.json +++ b/nx.json @@ -149,7 +149,7 @@ }, "reactIntegrationTesting": { "targetName": "test-rit", - "reactVersions": ["17", "19"], + "reactVersions": ["17", "18"], "exclude": [ "react-theme-sass", "babel-preset-global-context", From 792d23cea9079061457c1744e81ef7a3b1ffc197 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 13:31:14 +0100 Subject: [PATCH 03/42] chore: remove react-19-tests-v9 as its redundant with R19 in place --- .github/workflows/pr.yml | 31 -------- apps/react-19-tests-v9/.swcrc | 30 -------- apps/react-19-tests-v9/README.md | 59 -------------- apps/react-19-tests-v9/package.json | 22 ------ apps/react-19-tests-v9/project.json | 98 ------------------------ apps/react-19-tests-v9/src/index.ts | 1 - apps/react-19-tests-v9/tsconfig.json | 21 ----- apps/react-19-tests-v9/tsconfig.lib.json | 37 --------- 8 files changed, 299 deletions(-) delete mode 100644 apps/react-19-tests-v9/.swcrc delete mode 100644 apps/react-19-tests-v9/README.md delete mode 100644 apps/react-19-tests-v9/package.json delete mode 100644 apps/react-19-tests-v9/project.json delete mode 100644 apps/react-19-tests-v9/src/index.ts delete mode 100644 apps/react-19-tests-v9/tsconfig.json delete mode 100644 apps/react-19-tests-v9/tsconfig.lib.json diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 2fb62d1a735609..94b31e35dd7f09 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -129,37 +129,6 @@ jobs: run: | FLUENT_JEST_WORKER=2 yarn nx affected -t test-rit--17--type-check,test-rit--18--type-check,test-rit--17--test,test-rit--18--test --exclude='react-19-tests-v9' - react_19_v9_source_code_typecheck: - if: ${{ github.repository_owner == 'microsoft' }} - runs-on: ubuntu-latest - permissions: - contents: 'read' - actions: 'read' - name: v9 source code type-check against React 19 - steps: - - uses: actions/checkout@v4 - with: - fetch-depth: 0 - - - name: Derive appropriate SHAs for base and head for `nx affected` commands - uses: nrwl/nx-set-shas@826660b82addbef3abff5fa871492ebad618c9e1 # v4.3.3 - with: - main-branch-name: 'master' - - - uses: actions/setup-node@v4 - with: - cache: 'yarn' - node-version: '22' - - - run: echo number of CPUs "$(getconf _NPROCESSORS_ONLN)" - - - run: | - yarn install --frozen-lockfile - yarn rit --react 19 --install-deps - - - run: | - yarn nx affected -t test-rit--19--type-check --exclude='*,!react-19-tests-v9' - e2e: if: ${{ github.repository_owner == 'microsoft' }} # TODO: switch to macos once problematic tests are fixed diff --git a/apps/react-19-tests-v9/.swcrc b/apps/react-19-tests-v9/.swcrc deleted file mode 100644 index b4ffa86dee3067..00000000000000 --- a/apps/react-19-tests-v9/.swcrc +++ /dev/null @@ -1,30 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/swcrc", - "exclude": [ - "/testing", - "/**/*.cy.ts", - "/**/*.cy.tsx", - "/**/*.spec.ts", - "/**/*.spec.tsx", - "/**/*.test.ts", - "/**/*.test.tsx" - ], - "jsc": { - "parser": { - "syntax": "typescript", - "tsx": true, - "decorators": false, - "dynamicImport": false - }, - "externalHelpers": true, - "transform": { - "react": { - "runtime": "classic", - "useSpread": true - } - }, - "target": "es2019" - }, - "minify": false, - "sourceMaps": true -} diff --git a/apps/react-19-tests-v9/README.md b/apps/react-19-tests-v9/README.md deleted file mode 100644 index 490ba688b52ff9..00000000000000 --- a/apps/react-19-tests-v9/README.md +++ /dev/null @@ -1,59 +0,0 @@ -# @fluentui/react-19-tests-v9 - -**Tests for React 19 compatibility in [Fluent UI React v9](https://react.fluentui.dev)**. - -## Usage - -### React 19 integration tests against all v9 code in monorepo - -Following Targets are used: - -#### type-check:integration - -`yarn nx run react-19-tests-v9:type-check:integration` - -runs `tsc` against all monorepo v9 stories with properly pinned `@types/react@18` - -_Note:_ react-migration-v8-v9, react-migration-v0-v9 and any `react-*-compat` are excluded from this check - -#### e2e:integration - -`yarn nx run react-19-tests-v9:e2e:integration` - -runs `cypress` against all monorepo v9 `*.cy.tsx?` with properly pinned `react18` runtime deps - -### `start` - -```shell -# yarn start -``` - -This app has a simple CRA style `App.tsx` file to allow testing and triaging Fluent UI components in a React 19 environment. Please do not commit any new content to this file that isn't useful for everyone else. - -This file and process will be replaced with Storybook once we are able to get storybook working in React 19 in our mono-repo. - -### `test` - -```shell -# yarn test -``` - -Add test files for React 19 issues that have been triaged and resolved so that we do not regress. - -### `type-check` - -To be able to type-check cross React versions we need all v9 libraries build up front so we don't type check all v9 implementation rather public API surface. - -For that purpose we use `tsconfig.react-compat-check.json` as target for `type-check` npm script task, which disables path aliases and forces `tsc` to consume linked monorepo build packages. - -**Local machine flow:** - -```sh -yarn nx run react-19-tests-v9:build - -yarn nx run react-19-tests-v9:type-check -``` - -**CI:** - -nx defines `build` targets to be executed prior to `type-check`. diff --git a/apps/react-19-tests-v9/package.json b/apps/react-19-tests-v9/package.json deleted file mode 100644 index 35a4f863099039..00000000000000 --- a/apps/react-19-tests-v9/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "@fluentui/react-19-tests-v9", - "description": "React 19 type-check against v9 source files", - "version": "1.0.0", - "private": true, - "scripts": { - "format": "prettier -w . --ignore-path ../.prettierignore", - "format:check": "yarn format -c" - }, - "devDependencies": { - "@fluentui/eslint-plugin": "*" - }, - "dependencies": { - "@fluentui/react-components": "*", - "@fluentui/react-calendar-compat": "*", - "@fluentui/react-datepicker-compat": "*", - "@fluentui/react-timepicker-compat": "*", - "@fluentui/react-migration-v8-v9": "*", - "@fluentui/react-menu-grid-preview": "*", - "tslib": "^2.1.0" - } -} diff --git a/apps/react-19-tests-v9/project.json b/apps/react-19-tests-v9/project.json deleted file mode 100644 index cdb226fd38ab67..00000000000000 --- a/apps/react-19-tests-v9/project.json +++ /dev/null @@ -1,98 +0,0 @@ -{ - "name": "react-19-tests-v9", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "application", - "implicitDependencies": [], - "tags": ["vNext"], - "metadata": { - "targetGroups": { - "React Integration Tester": ["test-rit--19--prepare", "test-rit--19--type-check", "test-rit"] - } - }, - "targets": { - "test-rit--19--prepare": { - "options": { - "cwd": "{projectRoot}", - "command": "yarn rit --prepare-only --no-install --project-id ci --react 19 --verbose" - }, - "cache": true, - "inputs": [ - "default", - "production", - "^production", - "{workspaceRoot}/jest.preset.js", - "{workspaceRoot}/tools/react-integration-testing/**" - ], - "outputs": ["{workspaceRoot}/tmp/rit/react-19/rit-tests-v9-react-19-ci"], - "dependsOn": ["^build"], - "metadata": { - "technologies": ["react-integration-tester"], - "description": "Run react integration tests against React 19", - "help": { - "command": "yarn rit --help", - "example": {} - } - }, - "executor": "nx:run-commands", - "configurations": {}, - "parallelism": true - }, - "test-rit--19--type-check": { - "options": { - "cwd": "{projectRoot}", - "command": "yarn rit --project-id ci --react 19 --run type-check --verbose" - }, - "cache": true, - "inputs": [ - "default", - "production", - "^production", - "{workspaceRoot}/jest.preset.js", - "{workspaceRoot}/tools/react-integration-testing/**" - ], - "outputs": [], - "dependsOn": ["test-rit--19--prepare"], - "metadata": { - "technologies": ["react-integration-tester"], - "description": "Run react integration tests against React 19", - "help": { - "command": "yarn rit --help", - "example": {} - } - }, - "executor": "nx:run-commands", - "configurations": {}, - "parallelism": true - }, - "test-rit": { - "executor": "nx:noop", - "cache": true, - "dependsOn": [ - { - "target": "test-rit--19--type-check", - "projects": "self", - "params": "forward" - } - ], - "inputs": [ - "default", - "production", - "^production", - "{workspaceRoot}/jest.preset.js", - "{workspaceRoot}/tools/react-integration-testing/**" - ], - "outputs": [], - "metadata": { - "technologies": ["react-integration-tester"], - "description": "Run react integration tests against React 19", - "help": { - "command": "yarn rit --help", - "example": {} - } - }, - "configurations": {}, - "options": {}, - "parallelism": true - } - } -} diff --git a/apps/react-19-tests-v9/src/index.ts b/apps/react-19-tests-v9/src/index.ts deleted file mode 100644 index cb0ff5c3b541f6..00000000000000 --- a/apps/react-19-tests-v9/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/apps/react-19-tests-v9/tsconfig.json b/apps/react-19-tests-v9/tsconfig.json deleted file mode 100644 index 9cf5fafb90afb5..00000000000000 --- a/apps/react-19-tests-v9/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "module": "CommonJS", - "target": "ES2019", - "noEmit": true, - "isolatedModules": true, - "importHelpers": true, - "jsx": "react", - "noUnusedLocals": true, - "preserveConstEnums": true, - "skipLibCheck": true - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - } - ] -} diff --git a/apps/react-19-tests-v9/tsconfig.lib.json b/apps/react-19-tests-v9/tsconfig.lib.json deleted file mode 100644 index c0d322adf8cb3b..00000000000000 --- a/apps/react-19-tests-v9/tsconfig.lib.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2019", - "module": "esnext", - "moduleResolution": "node", - "lib": ["ES2019", "ES2020.Intl", "dom"], - "sourceMap": true, - "strict": true, - "pretty": true, - "noEmit": true, - "isolatedModules": true, - "importHelpers": true, - "jsx": "react", - "noUnusedLocals": true, - "preserveConstEnums": true, - "skipLibCheck": true, - "types": [] - }, - "exclude": [ - "../../packages/react-components/react-migration-v0-v9/**", - "../../packages/react-components/react-migration-v8-v9/**", - "../../packages/react-components/react-conformance-griffel/**", - "../../packages/react-components/**/*.stories.tsx", - "../../packages/react-components/**/*.stories.ts", - "../../packages/react-components/**/*.test.tsx", - "../../packages/react-components/**/*.test.ts", - "../../packages/react-components/**/*.spec.tsx", - "../../packages/react-components/**/*.spec.ts", - "../../packages/react-components/**/*.cy.tsx", - "../../packages/react-components/**/*.cy.ts" - ], - "include": [ - "../../packages/react-components/react-*/library/src/*.tsx", - "../../packages/react-components/react-*/library/src/*.ts" - ], - "files": ["../../typings/static-assets/index.d.ts", "../../typings/environment/index.d.ts"] -} From 38e2a8bf87ef0fc644b7b05361069a675594d332 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 13:44:27 +0100 Subject: [PATCH 04/42] chore(react-conformance-griffel): backport removed legacy react-dom types --- .../react-conformance-griffel/src/overridesWin.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-conformance-griffel/src/overridesWin.ts b/packages/react-components/react-conformance-griffel/src/overridesWin.ts index 8e2ec8dba566e4..5e9662d1c4cee9 100644 --- a/packages/react-components/react-conformance-griffel/src/overridesWin.ts +++ b/packages/react-components/react-conformance-griffel/src/overridesWin.ts @@ -120,8 +120,8 @@ async function render(element: React.ReactElement, container: HTMLElement) { }); }; } else { - // React 17 approach - const ReactDOM = await import('react-dom'); + // augment legacy react-dom APIs when using React 18 types + const ReactDOM = (await import('react-dom')) as unknown as ReactDOMLegacy; /* eslint-disable @typescript-eslint/no-deprecated -- This is expect to support React 17 */ ReactDOM.render(element, container); unmount = () => ReactDOM.unmountComponentAtNode(container); @@ -130,3 +130,8 @@ async function render(element: React.ReactElement, container: HTMLElement) { return { container, unmount }; } + +declare interface ReactDOMLegacy { + render(element: React.ReactElement, container: Element | DocumentFragment | null): void; + unmountComponentAtNode(container: Element | DocumentFragment | null): void; +} From 917ef8a0afe0e208eab417d0980996037160c5e1 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 13:59:22 +0100 Subject: [PATCH 05/42] chore(react-utilities): resolve issues exposed by R19 --- .../react-utilities/src/hooks/useOnClickOutside.ts | 4 ++-- .../react-utilities/src/utils/getReactElementRef.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts index 71e22587d346a2..d852bd6421e8e4 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts @@ -163,7 +163,7 @@ const useIFrameFocus = (options: UseIFrameFocusOptions) => { pollDuration = 100, refs, } = options; - const timeoutRef = React.useRef(); + const timeoutRef = React.useRef(undefined); const listener = useEventCallback((e: Event) => { const isOutside = refs.every(ref => !contains(ref.current || null, e.target as HTMLElement)); @@ -202,7 +202,7 @@ const useIFrameFocus = (options: UseIFrameFocusOptions) => { }, pollDuration); return () => { - targetDocument?.defaultView?.clearTimeout(timeoutRef.current); + targetDocument?.defaultView?.clearInterval(timeoutRef.current); }; }, [targetDocument, disabled, pollDuration]); }; diff --git a/packages/react-components/react-utilities/src/utils/getReactElementRef.ts b/packages/react-components/react-utilities/src/utils/getReactElementRef.ts index 27bd58a122d00f..4b2dce62af8cca 100644 --- a/packages/react-components/react-utilities/src/utils/getReactElementRef.ts +++ b/packages/react-components/react-utilities/src/utils/getReactElementRef.ts @@ -14,7 +14,7 @@ export function getReactElementRef(element: React.ReactElement | null | undef } if (IS_REACT_19_OR_HIGHER) { - return element.props.ref; + return (element as React.ReactElement<{ ref?: React.Ref }>).props.ref; } return (element as React.ReactElement & { ref: React.Ref | undefined }).ref; From 546f50d7d02508a75b90ed73a376baa766d24fc7 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 14:11:37 +0100 Subject: [PATCH 06/42] chore(react-context-selector): resolve issues exposed by R19 --- .../react-context-selector/src/createContext.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-context-selector/src/createContext.ts b/packages/react-components/react-context-selector/src/createContext.ts index 52004a15cce5df..767760c2ee8482 100644 --- a/packages/react-components/react-context-selector/src/createContext.ts +++ b/packages/react-components/react-context-selector/src/createContext.ts @@ -14,7 +14,7 @@ const createProvider = (Original: React.Provider>) => const versionRef = React.useRef(0); // A stable object, is used to avoid context updates via mutation of its values. - const contextValue = React.useRef>(); + const contextValue = React.useRef>(null); if (!contextValue.current) { contextValue.current = { From 9610b65bcfaea600f66a9ad9c0c5b66b31484854 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 14:12:16 +0100 Subject: [PATCH 07/42] fix(react-tabster): resolve invalid RefObject return types --- .../react-components/react-tabster/etc/react-tabster.api.md | 6 +++--- .../react-tabster/src/hooks/useFocusVisible.ts | 2 +- .../react-tabster/src/hooks/useFocusWithin.ts | 2 +- .../react-tabster/src/hooks/useKeyboardNavAttribute.ts | 5 +++-- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/react-components/react-tabster/etc/react-tabster.api.md b/packages/react-components/react-tabster/etc/react-tabster.api.md index 7aeed4e5ac0cb9..c1f5998ebf5784 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -1488,16 +1488,16 @@ export const useFocusFinders: () => { export function useFocusObserved(name: string, options?: UseFocusObservedOptions): () => Types.ObservedElementAsyncRequest; // @public (undocumented) -export function useFocusVisible(options?: UseFocusVisibleOptions): React_2.RefObject; +export function useFocusVisible(options?: UseFocusVisibleOptions): React_2.RefObject; // @public -export function useFocusWithin(): React_2.RefObject; +export function useFocusWithin(): React_2.RefObject; // @public export function useIsNavigatingWithKeyboard(): () => boolean; // @public -export function useKeyboardNavAttribute(): React_2.RefObject; +export function useKeyboardNavAttribute(): React_2.RefObject; // @internal export const useMergedTabsterAttributes_unstable: (...attributes: (Partial | null | undefined)[]) => Types.TabsterDOMAttribute; diff --git a/packages/react-components/react-tabster/src/hooks/useFocusVisible.ts b/packages/react-components/react-tabster/src/hooks/useFocusVisible.ts index dd550bb8ba9ad1..a205e315305720 100644 --- a/packages/react-components/react-tabster/src/hooks/useFocusVisible.ts +++ b/packages/react-components/react-tabster/src/hooks/useFocusVisible.ts @@ -11,7 +11,7 @@ type UseFocusVisibleOptions = { export function useFocusVisible( options: UseFocusVisibleOptions = {}, -): React.RefObject { +): React.RefObject { const contextValue = useFluent(); const scopeRef = React.useRef(null); diff --git a/packages/react-components/react-tabster/src/hooks/useFocusWithin.ts b/packages/react-components/react-tabster/src/hooks/useFocusWithin.ts index b51ef211d2233f..4a07bbd814575e 100644 --- a/packages/react-components/react-tabster/src/hooks/useFocusWithin.ts +++ b/packages/react-components/react-tabster/src/hooks/useFocusWithin.ts @@ -9,7 +9,7 @@ import { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill'; * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151 * @returns ref to the element that uses `:focus-within` styles */ -export function useFocusWithin(): React.RefObject { +export function useFocusWithin(): React.RefObject { const { targetDocument } = useFluent(); const elementRef = React.useRef(null); diff --git a/packages/react-components/react-tabster/src/hooks/useKeyboardNavAttribute.ts b/packages/react-components/react-tabster/src/hooks/useKeyboardNavAttribute.ts index 2a35f145e179ec..913c9439c66137 100644 --- a/packages/react-components/react-tabster/src/hooks/useKeyboardNavAttribute.ts +++ b/packages/react-components/react-tabster/src/hooks/useKeyboardNavAttribute.ts @@ -11,7 +11,7 @@ import type { KeyborgCallback } from 'keyborg'; * attribute to a referenced element to ensure keyboard navigation awareness * synced to keyborg logic without having to cause a re-render on react tree. */ -export function useKeyboardNavAttribute(): React.RefObject { +export function useKeyboardNavAttribute(): React.RefObject { const { targetDocument } = useFluent(); const keyborg = React.useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]); const ref = React.useRef(null); @@ -25,10 +25,11 @@ export function useKeyboardNavAttribute(): React.RefObjec return () => keyborg.unsubscribe(cb); } }, [keyborg]); + return ref; } -function setBooleanAttribute(elementRef: React.RefObject, attribute: string, value: boolean) { +function setBooleanAttribute(elementRef: React.RefObject, attribute: string, value: boolean) { if (!elementRef.current) { return; } From 12eaeb43b6e165c685930e718a31eb82315d0c48 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 15:27:30 +0100 Subject: [PATCH 08/42] fix(v9 deprecated): resolve type issues exposed by R19 --- .../react-infobutton/etc/react-infobutton.api.md | 3 ++- .../src/components/InfoButton/InfoButton.types.ts | 7 ++++++- .../src/components/InfoButton/useInfoButton.tsx | 8 ++++---- .../VirtualizerScrollViewDynamic.ts | 8 +++++--- .../useVirtualizerScrollViewDynamic.tsx | 2 +- .../src/hooks/useIntersectionObserver.ts | 2 +- .../react-virtualizer/src/hooks/useMutationObserver.ts | 2 +- 7 files changed, 20 insertions(+), 12 deletions(-) diff --git a/packages/react-components/deprecated/react-infobutton/etc/react-infobutton.api.md b/packages/react-components/deprecated/react-infobutton/etc/react-infobutton.api.md index 4c977087c17a4c..871a15f79823ec 100644 --- a/packages/react-components/deprecated/react-infobutton/etc/react-infobutton.api.md +++ b/packages/react-components/deprecated/react-infobutton/etc/react-infobutton.api.md @@ -21,9 +21,10 @@ export const InfoButton: ForwardRefComponent; export const infoButtonClassNames: SlotClassNames; // @public @deprecated -export type InfoButtonProps = Omit>, 'disabled'> & { +export type InfoButtonProps = Omit>, 'disabled' | 'popover'> & { size?: 'small' | 'medium' | 'large'; inline?: boolean; + popover?: InfoButtonSlots['popover']; }; // @public @deprecated (undocumented) diff --git a/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/InfoButton.types.ts b/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/InfoButton.types.ts index 315bda3894faab..663b6a235f295c 100644 --- a/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/InfoButton.types.ts +++ b/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/InfoButton.types.ts @@ -24,7 +24,7 @@ export type InfoButtonSlots = { * * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead */ -export type InfoButtonProps = Omit>, 'disabled'> & { +export type InfoButtonProps = Omit>, 'disabled' | 'popover'> & { /** * Size of the InfoButton. * @@ -38,6 +38,11 @@ export type InfoButtonProps = Omit>, 'di * @default true */ inline?: boolean; + + /** + * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover. + */ + popover?: InfoButtonSlots['popover']; }; /** diff --git a/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/useInfoButton.tsx index 75abb63090142a..9c17fd0d36ad90 100644 --- a/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/useInfoButton.tsx +++ b/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/useInfoButton.tsx @@ -41,7 +41,7 @@ const popoverSizeMap = { * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead */ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref): InfoButtonState => { - const { size = 'medium', inline = true } = props; + const { size = 'medium', inline = true, popover, info, ...rest } = props; const state: InfoButtonState = { inline, @@ -58,7 +58,7 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref>>, }), - info: slot.always(props.info, { + info: slot.always(info, { defaultProps: { role: 'note', tabIndex: -1, diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts index d36de508c91ef8..5909fbda071374 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts @@ -12,9 +12,10 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; * Virtualizer ScrollView * @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release. */ -export const VirtualizerScrollViewDynamic: React.FC = ( +export const VirtualizerScrollViewDynamic = (( props: VirtualizerScrollViewDynamicProps, - context: React.Context, + // NOTE: this second context parameter doesn't exists in React 19 + _context: React.Context, ) => { const state = useVirtualizerScrollViewDynamic_unstable(props); @@ -22,6 +23,7 @@ export const VirtualizerScrollViewDynamic: React.FC; VirtualizerScrollViewDynamic.displayName = 'VirtualizerScrollViewDynamic'; diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx index 513c52277cf7fd..f08a9a3c616452 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx +++ b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx @@ -161,7 +161,7 @@ export function useVirtualizerScrollViewDynamic_unstable( if (React.isValidElement(child)) { virtualizerState.virtualizedChildren[index] = ( )} key={child.key} ref={(element: HTMLElement & IndexedResizeCallbackElement) => { if (child.hasOwnProperty('ref')) { diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts index e200975eae504e..c332ceb41bdf49 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts @@ -66,7 +66,7 @@ export const useIntersectionObserver = ( // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286 - const observer = useRef(); + const observer = useRef(undefined); const [observerList, setObserverList] = useState(); const { targetDocument } = useFluent(); const win = targetDocument?.defaultView; diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts index b0b483bad01eb4..23986744fd6867 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts @@ -19,7 +19,7 @@ export const useMutationObserver = ( // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286 - const observer = useRef(); + const observer = useRef(undefined); const { targetDocument } = useFluent(); const win = targetDocument?.defaultView; From ca3509dfca511aaf6590abdd9f341a820b6ace84 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 15:48:04 +0100 Subject: [PATCH 09/42] fix(v8): resolve issues exposed by R19 --- .../src/components/FocusZone/FocusZone.tsx | 2 +- .../react-hooks/src/useMergedRefs.test.tsx | 27 +++++++++----- packages/react/etc/react.api.md | 36 +++++++++---------- packages/react/src/common/testUtilities.ts | 3 +- .../src/components/Autofill/Autofill.test.tsx | 4 +-- .../BaseExtendedPicker.test.tsx | 6 ++-- .../FloatingPicker/BaseFloatingPicker.tsx | 2 +- .../Items/SelectedItemWithContextMenu.tsx | 2 +- .../components/SpinButton/SpinButton.test.tsx | 4 +-- packages/react/src/components/Stack/Stack.tsx | 11 ++++-- scripts/jest/src/jest.preset.v8.js | 4 ++- 11 files changed, 59 insertions(+), 42 deletions(-) diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.tsx b/packages/react-focus/src/components/FocusZone/FocusZone.tsx index 056d4c181fe3c7..60e1e24eb32ae6 100644 --- a/packages/react-focus/src/components/FocusZone/FocusZone.tsx +++ b/packages/react-focus/src/components/FocusZone/FocusZone.tsx @@ -130,7 +130,7 @@ export class FocusZone extends React.Component implements IFocu // eslint-disable-next-line @typescript-eslint/no-explicit-any public context: any; - private _root: React.RefObject = React.createRef(); + private _root: React.RefObject = React.createRef(); private _mergedRef = createMergedRef(); private _id: string; diff --git a/packages/react-hooks/src/useMergedRefs.test.tsx b/packages/react-hooks/src/useMergedRefs.test.tsx index 3fadf0e024e6c2..902c73cda17646 100644 --- a/packages/react-hooks/src/useMergedRefs.test.tsx +++ b/packages/react-hooks/src/useMergedRefs.test.tsx @@ -5,7 +5,9 @@ import { useMergedRefs } from './useMergedRefs'; describe('useMergedRefs', () => { it('always returns the same ref (refs should be immutable)', () => { let lastMergedRef; - const refFunc = () => null; + const refFunc = () => { + // no-op + }; const TestComponent: React.FunctionComponent = () => { lastMergedRef = useMergedRefs(refFunc); return null; @@ -23,7 +25,10 @@ describe('useMergedRefs', () => { let lastMergedRef; const TestComponent: React.FunctionComponent = () => { - lastMergedRef = useMergedRefs(() => ({})); + lastMergedRef = useMergedRefs((_instance: boolean | null): void => { + // no-op + return; + }); return null; }; @@ -36,10 +41,12 @@ describe('useMergedRefs', () => { }); it('updates all provided refs', () => { - const refObject: React.RefObject = React.createRef(); + const refObject = React.createRef(); let refValue: boolean | null = null; const TestComponent: React.FunctionComponent = () => { - const mergedRef = useMergedRefs(refObject, val => (refValue = val)); + const mergedRef = useMergedRefs(refObject, (val): void => { + refValue = val; + }); mergedRef(true); @@ -69,7 +76,7 @@ describe('useMergedRefs', () => { }); it('reuses the same ref callback if refs remain stable', () => { - const refObject: React.RefObject = React.createRef(); + const refObject = React.createRef(); // eslint-disable-next-line @typescript-eslint/no-empty-function const refValueFunc = (val: boolean) => {}; @@ -91,10 +98,12 @@ describe('useMergedRefs', () => { }); it('handles changing ref callbacks', () => { - const refObject: React.RefObject = React.createRef(); + const refObject = React.createRef(); let firstRefValue: boolean | null = null; - let refValueFunc = (val: boolean) => (firstRefValue = val); + let refValueFunc = (val: boolean): void => { + firstRefValue = val; + }; const TestComponent: React.FunctionComponent<{ update?: boolean }> = () => { const mergedRef = useMergedRefs(refObject, refValueFunc); @@ -107,7 +116,9 @@ describe('useMergedRefs', () => { const { rerender } = render(); let secondRefValue: boolean | null = null; - refValueFunc = (val: boolean) => (secondRefValue = val); + refValueFunc = (val: boolean): void => { + secondRefValue = val; + }; // Re-render the component rerender(); diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index 2ba0046e6e2fd5..724e115f710c49 100644 --- a/packages/react/etc/react.api.md +++ b/packages/react/etc/react.api.md @@ -558,7 +558,7 @@ export class BaseExtendedPicker>>; + floatingPicker: React_2.RefObject> | null>; // (undocumented) protected get floatingPickerProps(): IBaseFloatingPickerProps; // (undocumented) @@ -566,7 +566,7 @@ export class BaseExtendedPicker; + protected input: React_2.RefObject; // (undocumented) get inputElement(): HTMLInputElement | null; // (undocumented) @@ -596,9 +596,9 @@ export class BaseExtendedPicker; + protected root: React_2.RefObject; // (undocumented) - selectedItemsList: React_2.RefObject>>; + selectedItemsList: React_2.RefObject> | null>; // (undocumented) protected get selectedItemsListProps(): IBaseSelectedItemsListProps; // (undocumented) @@ -651,7 +651,7 @@ export class BaseFloatingPicker; + protected root: React_2.RefObject; // (undocumented) protected selection: Selection; // (undocumented) @@ -659,7 +659,7 @@ export class BaseFloatingPicker>; + protected suggestionsControl: React_2.RefObject | null>; // (undocumented) protected SuggestionsControlOfProperType: new (props: ISuggestionsControlProps) => SuggestionsControl; // (undocumented) @@ -724,7 +724,7 @@ export class BasePicker> extends Rea // @deprecated (undocumented) protected getSuggestionsAlert(suggestionAlertClassName?: string): JSXElement | undefined; // (undocumented) - protected input: React_2.RefObject; + protected input: React_2.RefObject; // (undocumented) get items(): T[]; // (undocumented) @@ -781,13 +781,13 @@ export class BasePicker> extends Rea // (undocumented) protected resolveNewValue(updatedValue: string, suggestions: T[]): void; // (undocumented) - protected root: React_2.RefObject; + protected root: React_2.RefObject; // (undocumented) protected selection: Selection_2; // @deprecated (undocumented) protected _shouldFocusZoneEnterInnerZone: (ev: React_2.KeyboardEvent) => boolean; // (undocumented) - protected suggestionElement: React_2.RefObject>; + protected suggestionElement: React_2.RefObject | null>; // @deprecated (undocumented) protected SuggestionOfProperType: new (props: ISuggestionsProps) => Suggestions; // (undocumented) @@ -1593,7 +1593,7 @@ export class ExtendedPeoplePicker extends BaseExtendedPeoplePicker { export class ExtendedSelectedItem extends React_2.Component { constructor(props: ISelectedPeopleItemProps); // (undocumented) - protected persona: React_2.RefObject; + protected persona: React_2.RefObject; // (undocumented) render(): JSXElement; } @@ -1836,7 +1836,7 @@ export { getFocusOutlineStyle } export { getFocusStyle } // @public -export const getFontIcon: (iconName: string, className?: string, ariaLabel?: string) => React_2.ReactNode; +export const getFontIcon: (iconName: string, className?: string, ariaLabel?: string) => React_2.ReactNode | Promise; // @public export function getFullColorString(color: IColor): string; @@ -11090,7 +11090,7 @@ export class Suggestions extends React_2.Component, ISug // (undocumented) focusSearchForMoreButton(): void; // (undocumented) - protected _forceResolveButton: React_2.RefObject; + protected _forceResolveButton: React_2.RefObject; // (undocumented) hasSuggestedAction(): boolean; // (undocumented) @@ -11098,13 +11098,13 @@ export class Suggestions extends React_2.Component, ISug // (undocumented) render(): JSXElement; // (undocumented) - protected _scrollContainer: React_2.RefObject; + protected _scrollContainer: React_2.RefObject; // (undocumented) scrollSelected(): void; // (undocumented) - protected _searchForMoreButton: React_2.RefObject; + protected _searchForMoreButton: React_2.RefObject; // (undocumented) - protected _selectedElement: React_2.RefObject; + protected _selectedElement: React_2.RefObject; tryHandleKeyDown: (keyCode: number, currentSuggestionIndex: number) => boolean; } @@ -11148,13 +11148,13 @@ export class SuggestionsControl extends React_2.Component; + protected _selectedElement: React_2.RefObject; protected selectFirstItem(): void; protected selectLastItem(): void; protected selectNextItem(itemType: SuggestionItemType, originalItemType?: SuggestionItemType): void; protected selectPreviousItem(itemType: SuggestionItemType, originalItemType?: SuggestionItemType): void; // (undocumented) - protected _suggestions: React_2.RefObject>; + protected _suggestions: React_2.RefObject | null>; } // @public (undocumented) @@ -11218,7 +11218,7 @@ export class SuggestionsCore extends React_2.Component; + protected _selectedElement: React_2.RefObject; // (undocumented) setSelectedSuggestion(index: number): void; } diff --git a/packages/react/src/common/testUtilities.ts b/packages/react/src/common/testUtilities.ts index 87f0babb7c498a..46e9b5a6049723 100644 --- a/packages/react/src/common/testUtilities.ts +++ b/packages/react/src/common/testUtilities.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import type * as ReactTestUtils from 'react-dom/test-utils'; import { render } from '@testing-library/react'; // v2 - avoiding usage of enzyme @@ -37,7 +36,7 @@ export function renderIntoDocument(element: React.ReactElement): HTMLElemen return renderedDOM as HTMLElement; } -export function mockEvent(targetValue: string = ''): ReactTestUtils.SyntheticEventData { +export function mockEvent(targetValue: string = '') { const target: EventTarget = { value: targetValue } as HTMLInputElement; return { target }; } diff --git a/packages/react/src/components/Autofill/Autofill.test.tsx b/packages/react/src/components/Autofill/Autofill.test.tsx index eb063ac7e191cc..65a7b1d183f873 100644 --- a/packages/react/src/components/Autofill/Autofill.test.tsx +++ b/packages/react/src/components/Autofill/Autofill.test.tsx @@ -9,7 +9,7 @@ import type { IAutofill } from './index'; jest.useFakeTimers(); describe('Autofill', () => { - let autofillRef: React.RefObject; + let autofillRef: React.RefObject; let updatedText: string | undefined; let onInputValueChange: (text: string | undefined, composing?: boolean) => void; @@ -19,7 +19,7 @@ describe('Autofill', () => { }); beforeEach(() => { - autofillRef = React.createRef(); + autofillRef = React.createRef(); updatedText = undefined; onInputValueChange = (text: string | undefined) => { updatedText = text; diff --git a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.test.tsx b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.test.tsx index 72196f9ee62c87..2b7f8995f151c5 100644 --- a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.test.tsx +++ b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.test.tsx @@ -138,7 +138,7 @@ describe('Pickers', () => { it('force resolves to the first suggestion', () => { jest.useFakeTimers(); - const pickerRef: React.RefObject = React.createRef(); + const pickerRef: React.RefObject = React.createRef(); create( { it('Can hide and show picker', () => { jest.useFakeTimers(); - const pickerRef: React.RefObject = React.createRef(); + const pickerRef: React.RefObject = React.createRef(); create( { it('Completes the suggestion', () => { jest.useFakeTimers(); - const pickerRef: React.RefObject = React.createRef(); + const pickerRef: React.RefObject = React.createRef(); create( (); protected suggestionStore: SuggestionsStore; - protected suggestionsControl: React.RefObject> = React.createRef(); + protected suggestionsControl: React.RefObject | null> = React.createRef(); protected SuggestionsControlOfProperType: new (props: ISuggestionsControlProps) => SuggestionsControl = SuggestionsControl as new (props: ISuggestionsControlProps) => SuggestionsControl; protected currentPromise: PromiseLike; diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx index 595d45d7dee56f..74b0d1b55f5c57 100644 --- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx +++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx @@ -22,7 +22,7 @@ export class SelectedItemWithContextMenu extends React.Component< ISelectedItemWithContextMenuProps, IPeoplePickerItemState > { - protected itemElement: React.RefObject = React.createRef(); + protected itemElement: React.RefObject = React.createRef(); constructor(props: ISelectedItemWithContextMenuProps) { super(props); diff --git a/packages/react/src/components/SpinButton/SpinButton.test.tsx b/packages/react/src/components/SpinButton/SpinButton.test.tsx index 468bca0e956604..0c764522aa0668 100644 --- a/packages/react/src/components/SpinButton/SpinButton.test.tsx +++ b/packages/react/src/components/SpinButton/SpinButton.test.tsx @@ -9,7 +9,7 @@ import { isConformant } from '../../common/isConformant'; import type { ISpinButton } from './SpinButton.types'; describe('SpinButton', () => { - let ref: React.RefObject; + let ref: React.RefObject; /** * Verify the value of the input field and related properties. @@ -95,7 +95,7 @@ describe('SpinButton', () => { } beforeEach(() => { - ref = React.createRef(); + ref = React.createRef(); resetIds(); }); diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx index 25a11c472ee911..92c812f63d3984 100644 --- a/packages/react/src/components/Stack/Stack.tsx +++ b/packages/react/src/components/Stack/Stack.tsx @@ -60,7 +60,7 @@ function _processStackChildren( enableScopedSelectors, doNotRenderFalsyValues, }: { disableShrink: boolean; enableScopedSelectors: boolean; doNotRenderFalsyValues: boolean }, -): (React.ReactElement | number | string | Iterable | React.ReactPortal)[] { +): React.ReactNode[] { let childrenArray = React.Children.toArray(children); childrenArray = React.Children.map(childrenArray, child => { @@ -75,8 +75,13 @@ function _processStackChildren( } if (child.type === React.Fragment) { - return child.props.children - ? _processStackChildren(child.props.children, { disableShrink, enableScopedSelectors, doNotRenderFalsyValues }) + const fragmentChild = child as React.ReactElement<{ children?: React.ReactNode }>; + return fragmentChild.props.children + ? _processStackChildren(fragmentChild.props.children, { + disableShrink, + enableScopedSelectors, + doNotRenderFalsyValues, + }) : null; } diff --git a/scripts/jest/src/jest.preset.v8.js b/scripts/jest/src/jest.preset.v8.js index da676a4103369d..dde585bc7214d1 100644 --- a/scripts/jest/src/jest.preset.v8.js +++ b/scripts/jest/src/jest.preset.v8.js @@ -1,13 +1,14 @@ const fs = require('fs'); const path = require('path'); -const { findRepoDeps } = require('@fluentui/scripts-monorepo'); +const { findRepoDeps, findGitRoot } = require('@fluentui/scripts-monorepo'); const { findConfig, merge } = require('@fluentui/scripts-utils'); const { workersConfig } = require('./shared'); const packageJsonPath = findConfig('package.json') ?? ''; const packageRoot = path.dirname(packageJsonPath); +const repoRoot = findGitRoot(); const jestAliases = () => { // Get deps of the current package within the repo @@ -50,6 +51,7 @@ const createConfig = (customConfig = {}) => { '\\.(scss)$': path.resolve(__dirname, './v8/jest-style-mock.js'), KeyCodes: path.resolve(__dirname, './v8/jest-mock.js'), enzyme: path.resolve(__dirname, './v8/jest-mock.js'), + '^@testing-library/react-hooks$': path.join(repoRoot, 'node_modules/@testing-library/react'), ...jestAliases(), }, From 86188f9f6823ce86a436656ab03a47eed283a910 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 16:06:58 +0100 Subject: [PATCH 10/42] chore(v9-sb-addon): turn on skipLibCheck to make generate-api pass - sb 7 doesnt ship R19 valid types --- .../react-storybook-addon/config/api-extractor.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-storybook-addon/config/api-extractor.json b/packages/react-components/react-storybook-addon/config/api-extractor.json index e533bf30b48a2b..9a76bd20b53e01 100644 --- a/packages/react-components/react-storybook-addon/config/api-extractor.json +++ b/packages/react-components/react-storybook-addon/config/api-extractor.json @@ -1,4 +1,7 @@ { "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", - "extends": "@fluentui/scripts-api-extractor/api-extractor.common.v-next.json" + "extends": "@fluentui/scripts-api-extractor/api-extractor.common.v-next.json", + "compiler": { + "skipLibCheck": true + } } From 7a7ac744a4a248aa5bc1dfc72d2a86d5d785df66 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 16:55:03 +0100 Subject: [PATCH 11/42] fix(v8/react-experiments): resolve issues exposed by R19 --- .../FloatingSuggestions/FloatingSuggestions.tsx | 2 +- .../MicroFeedback/MicroFeedback.types.ts | 4 ++-- .../MicroFeedback/MicroFeedback.view.tsx | 16 ++++++++++------ .../Items/subcomponents/DefaultEditingItem.tsx | 2 +- .../SelectedItemsList/SelectedItemsList.tsx | 5 +++-- .../SelectedPeopleList.test.tsx | 6 +++--- .../src/components/TilesList/TilesList.tsx | 2 +- 7 files changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/react-experiments/src/components/FloatingSuggestions/FloatingSuggestions.tsx b/packages/react-experiments/src/components/FloatingSuggestions/FloatingSuggestions.tsx index 3c094871909ef9..f28786ea217c9c 100644 --- a/packages/react-experiments/src/components/FloatingSuggestions/FloatingSuggestions.tsx +++ b/packages/react-experiments/src/components/FloatingSuggestions/FloatingSuggestions.tsx @@ -24,7 +24,7 @@ export class FloatingSuggestions { private root = React.createRef(); private suggestionStore: SuggestionsStore; - private suggestionsControl: React.RefObject> = React.createRef(); + private suggestionsControl: React.RefObject | null> = React.createRef(); private currentPromise: PromiseLike; private isComponentMounted: boolean = false; private _async: Async; diff --git a/packages/react-experiments/src/components/MicroFeedback/MicroFeedback.types.ts b/packages/react-experiments/src/components/MicroFeedback/MicroFeedback.types.ts index 173072ea13fa14..f6f23555223db2 100644 --- a/packages/react-experiments/src/components/MicroFeedback/MicroFeedback.types.ts +++ b/packages/react-experiments/src/components/MicroFeedback/MicroFeedback.types.ts @@ -164,12 +164,12 @@ export interface IMicroFeedbackViewProps extends IMicroFeedbackProps { /** * Defines a reference for the Like button. */ - likeRef: React.RefObject; + likeRef: React.RefObject; /** * Defines a reference for the Dislike button. */ - dislikeRef: React.RefObject; + dislikeRef: React.RefObject; /** * Defines a callback that is called when the Callout is dismissed. diff --git a/packages/react-experiments/src/components/MicroFeedback/MicroFeedback.view.tsx b/packages/react-experiments/src/components/MicroFeedback/MicroFeedback.view.tsx index 09b89a7b3282a1..fe564a57f05827 100644 --- a/packages/react-experiments/src/components/MicroFeedback/MicroFeedback.view.tsx +++ b/packages/react-experiments/src/components/MicroFeedback/MicroFeedback.view.tsx @@ -130,24 +130,28 @@ export const MicroFeedbackView: IMicroFeedbackComponent['view'] = props => { {children} -
+ {withSlots( + 'div', + { ref: likeRef }, -
-
+ />, + )} + {withSlots( + 'div', + { ref: dislikeRef }, -
+ />, + )} {likeQuestion && !hideLikeCallout && renderFollowup(likeQuestion, likeRef.current)} {dislikeQuestion && !hideDislikeCallout && renderFollowup(dislikeQuestion, dislikeRef.current)} diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/subcomponents/DefaultEditingItem.tsx b/packages/react-experiments/src/components/SelectedItemsList/Items/subcomponents/DefaultEditingItem.tsx index 3c5d35af5347d2..7f72525157e330 100644 --- a/packages/react-experiments/src/components/SelectedItemsList/Items/subcomponents/DefaultEditingItem.tsx +++ b/packages/react-experiments/src/components/SelectedItemsList/Items/subcomponents/DefaultEditingItem.tsx @@ -88,7 +88,7 @@ export const DefaultEditingItemInner = ( props: IDefaultEditingItemInnerProps, // eslint-disable-next-line @typescript-eslint/no-deprecated ): JSXElement => { - const editingInput = React.useRef(); + const editingInput = React.useRef(null); const editingFloatingPicker = React.createRef(); const [editingSuggestions, setEditingSuggestions] = React.useState[]>([]); const [inputValue, setInputValue] = React.useState(''); diff --git a/packages/react-experiments/src/components/SelectedItemsList/SelectedItemsList.tsx b/packages/react-experiments/src/components/SelectedItemsList/SelectedItemsList.tsx index e9e3cb6b750a2a..b62afca096e29f 100644 --- a/packages/react-experiments/src/components/SelectedItemsList/SelectedItemsList.tsx +++ b/packages/react-experiments/src/components/SelectedItemsList/SelectedItemsList.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; import type { ISelectedItemsList, ISelectedItemsListProps, BaseSelectedItem } from './SelectedItemsList.types'; +import { JSXElement } from '@fluentui/react-utilities'; /* eslint-disable react-hooks/rules-of-hooks */ const _SelectedItemsList = ( props: ISelectedItemsListProps, - ref: React.Ref>, -) => { + _ref?: React.Ref>, +): JSXElement => { const { dragDropEvents, dragDropHelper, selectedItems, defaultSelectedItems, replaceItem } = props; const [items, setItems] = React.useState(selectedItems || defaultSelectedItems || []); diff --git a/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.test.tsx b/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.test.tsx index 023c66292a4cb1..80f2236caef8c2 100644 --- a/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.test.tsx +++ b/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.test.tsx @@ -6,13 +6,13 @@ import type { ISelectedPeopleList, ItemCanDispatchTrigger } from '../index'; describe('SelectedPeopleList', () => { it('renders nothing if nothing is provided', () => { - const pickerRef: React.RefObject = React.createRef(); + const pickerRef: React.RefObject = React.createRef(); const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); it('renders personas that are passed in', () => { - const pickerRef: React.RefObject = React.createRef(); + const pickerRef: React.RefObject = React.createRef(); const { container, getAllByText } = render( , ); @@ -24,7 +24,7 @@ describe('SelectedPeopleList', () => { }); it('renders personas that are passed in as default', () => { - const pickerRef: React.RefObject = React.createRef(); + const pickerRef: React.RefObject = React.createRef(); const { container, getAllByText } = render( , ); diff --git a/packages/react-experiments/src/components/TilesList/TilesList.tsx b/packages/react-experiments/src/components/TilesList/TilesList.tsx index 0758972df23c3c..6dcaa481022de8 100644 --- a/packages/react-experiments/src/components/TilesList/TilesList.tsx +++ b/packages/react-experiments/src/components/TilesList/TilesList.tsx @@ -106,7 +106,7 @@ interface IPageSpecificationCache { */ export class TilesList extends React.Component, ITilesListState> { private _pageSpecificationCache: IPageSpecificationCache | undefined; - private listRef: React.RefObject; + private listRef: React.RefObject; constructor(props: ITilesListProps, context?: any) { // eslint-disable-next-line @typescript-eslint/no-deprecated From 190cf7d9916ea68a8d1f211bcc1980ac3f47d57f Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 16:57:37 +0100 Subject: [PATCH 12/42] fix(v8/storybook): resolve issues exposed by R19 --- packages/storybook/tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json index f305375c114b38..04dcd3aad13dc8 100644 --- a/packages/storybook/tsconfig.json +++ b/packages/storybook/tsconfig.json @@ -17,7 +17,8 @@ "lib": ["es6", "dom"], "types": [], "esModuleInterop": true, - "isolatedModules": true + "isolatedModules": true, + "skipLibCheck": true }, "include": ["src"] } From dd69387ad6ea90cbd1d564fcd9a6bb7c1d75709f Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 17:11:18 +0100 Subject: [PATCH 13/42] fix(v8/react-charting): resolve issues exposed by R19 --- .../components/AreaChart/AreaChart.base.tsx | 4 ++-- .../components/ChartTable/ChartTable.base.tsx | 4 +++- .../CommonComponents/CartesianChart.base.tsx | 11 +++++++-- .../components/DonutChart/DonutChart.base.tsx | 6 +++-- .../FunnelChart/FunnelChart.base.tsx | 10 +++----- .../components/GaugeChart/GaugeChart.base.tsx | 9 +++++-- .../GroupedVerticalBarChart.base.tsx | 6 ++--- .../HeatMapChart/HeatMapChart.base.tsx | 4 ++-- .../HorizontalBarChart.base.tsx | 2 +- .../HorizontalBarChartWithAxis.base.tsx | 4 ++-- .../src/components/Legends/Legends.base.tsx | 11 +++++++-- .../components/LineChart/LineChart.base.tsx | 4 ++-- .../LineChart/eventAnnotation/Textbox.tsx | 2 +- .../ResponsiveContainer.tsx | 2 +- .../SankeyChart/SankeyChart.base.tsx | 4 +++- .../MultiStackedBarChart.base.tsx | 2 +- .../StackedBarChart/StackedBarChart.base.tsx | 2 +- .../VerticalBarChart.base.tsx | 8 ++++--- .../VerticalStackedBarChart.base.tsx | 24 ++++++++++++++----- 19 files changed, 77 insertions(+), 42 deletions(-) diff --git a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx index 913f2abb8763e7..ea3779ccd1ace5 100644 --- a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -147,8 +147,8 @@ export class AreaChartBase extends React.Component; - private _legendsRef: React.RefObject; + private _cartesianChartRef: React.RefObject; + private _legendsRef: React.RefObject; private _containsSecondaryYAxis = false; private _hasDuplicateXValues = false; private _hasMissingXValues = false; diff --git a/packages/charts/react-charting/src/components/ChartTable/ChartTable.base.tsx b/packages/charts/react-charting/src/components/ChartTable/ChartTable.base.tsx index 90effc54e84ae1..6678b3123be56f 100644 --- a/packages/charts/react-charting/src/components/ChartTable/ChartTable.base.tsx +++ b/packages/charts/react-charting/src/components/ChartTable/ChartTable.base.tsx @@ -111,7 +111,9 @@ export class ChartTableBase extends React.Component { return (
(this._rootElem = el)} + ref={el => { + this._rootElem = el; + }} className={classNames.root} style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }} > diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index 26a53b8cf5b4b5..091880b62e38af 100644 --- a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -590,7 +590,9 @@ export class CartesianChartBase
(this.chartContainer = rootElem)} + ref={(rootElem: HTMLDivElement) => { + this.chartContainer = rootElem; + }} onMouseLeave={this._onChartLeave} > {!this._isFirstRender &&
} @@ -754,7 +756,12 @@ export class CartesianChartBase {!this.props.hideLegend && ( -
(this.legendContainer = e)} className={this._classNames.legendContainer}> +
{ + this.legendContainer = e; + }} + className={this._classNames.legendContainer} + > {this.props.legendBars}
)} diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx index 5a7cef23aa0a2d..7ff3ba4770dfcc 100644 --- a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx +++ b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx @@ -54,7 +54,7 @@ export class DonutChartBase extends React.Component; + private _legendsRef: React.RefObject; public static getDerivedStateFromProps( nextProps: Readonly, @@ -141,7 +141,9 @@ export class DonutChartBase extends React.Component (this._rootElem = rootElem)} + ref={(rootElem: HTMLElement | null) => { + this._rootElem = rootElem; + }} onMouseLeave={this._handleChartMouseLeave} > {this.props.xAxisAnnotation && ( diff --git a/packages/charts/react-charting/src/components/FunnelChart/FunnelChart.base.tsx b/packages/charts/react-charting/src/components/FunnelChart/FunnelChart.base.tsx index 03324f7500f1c8..2f82a0466b04ab 100644 --- a/packages/charts/react-charting/src/components/FunnelChart/FunnelChart.base.tsx +++ b/packages/charts/react-charting/src/components/FunnelChart/FunnelChart.base.tsx @@ -28,7 +28,7 @@ const getClassNames = classNamesFunction = React.forwardRef< HTMLDivElement, IFunnelChartProps ->((props, forwardedRef) => { +>(({ orientation = 'vertical', ...props }, forwardedRef) => { const _tooltipId: string = getId('FunnelChartTooltipId_'); const _emptyChartId: string = getId('_FunnelChart_empty'); const isRTL = getRTL(); @@ -248,7 +248,7 @@ export const FunnelChartBase: React.FunctionComponent = React return data.map((d, i) => { const geometryProps = - props.orientation === 'vertical' + orientation === 'vertical' ? getVerticalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL }) : getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL }); @@ -302,7 +302,7 @@ export const FunnelChartBase: React.FunctionComponent = React })); const geom = - props.orientation === 'vertical' + orientation === 'vertical' ? getStackedVerticalFunnelSegmentGeometry({ ...geometryParams, stages: stagesWithSubValues, @@ -493,7 +493,3 @@ export const FunnelChartBase: React.FunctionComponent = React ); }); FunnelChartBase.displayName = 'FunnelChart'; -// eslint-disable-next-line @typescript-eslint/no-deprecated -FunnelChartBase.defaultProps = { - orientation: 'vertical', -}; diff --git a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx index c3f2d2e07d8606..5281c14def7d2f 100644 --- a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx +++ b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx @@ -135,7 +135,7 @@ export class GaugeChartBase extends React.Component; + private _legendsRef: React.RefObject; constructor(props: IGaugeChartProps) { super(props); @@ -203,7 +203,12 @@ export class GaugeChartBase extends React.Component (this._rootElem = el)}> +
{ + this._rootElem = el; + }} + > ; - private _legendsRef: React.RefObject; + private _cartesianChartRef: React.RefObject; + private _legendsRef: React.RefObject; private _legendColorMap: Record = {}; private readonly Y_ORIGIN: number = 0; - private _rectRef: React.RefObject; + private _rectRef: React.RefObject; private _uniqDotId = getId('gvbc_dot_'); public constructor(props: IGroupedVerticalBarChartProps) { diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx index 1ab80d09b85298..7e04c36d914c89 100644 --- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx +++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx @@ -136,8 +136,8 @@ export class HeatMapChartBase extends React.Component; - private _legendsRef: React.RefObject; + private _cartesianChartRef: React.RefObject; + private _legendsRef: React.RefObject; public constructor(props: IHeatMapChartProps) { super(props); diff --git a/packages/charts/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/charts/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx index b2abcb966414bc..5b5a914d47dbf7 100644 --- a/packages/charts/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx @@ -47,7 +47,7 @@ export class HorizontalBarChartBase extends React.Component; + private barChartSvgRef: React.RefObject; private _emptyChartId: string; constructor(props: IHorizontalBarChartProps) { diff --git a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx index 93700c75a46e63..74a053bc02f5f2 100644 --- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx +++ b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx @@ -91,8 +91,8 @@ export class HorizontalBarChartWithAxisBase private _xAxisType: XAxisTypes; private _yAxisType: YAxisType; private _calloutAnchorPoint: IHorizontalBarChartWithAxisDataPoint | null; - private _cartesianChartRef: React.RefObject; - private _legendsRef: React.RefObject; + private _cartesianChartRef: React.RefObject; + private _legendsRef: React.RefObject; private _longestBarPositiveTotalValue: number; private _longestBarNegativeTotalValue: number; private readonly X_ORIGIN: number = 0; diff --git a/packages/charts/react-charting/src/components/Legends/Legends.base.tsx b/packages/charts/react-charting/src/components/Legends/Legends.base.tsx index 1f65d1b64d070a..3898b094104f3a 100644 --- a/packages/charts/react-charting/src/components/Legends/Legends.base.tsx +++ b/packages/charts/react-charting/src/components/Legends/Legends.base.tsx @@ -109,7 +109,12 @@ export class LegendsBase extends React.Component im this._isLegendSelected = Object.keys(this.state.selectedLegends).length > 0; const dataToRender = this._generateData(); return ( -
(this._rootElem = el)}> +
{ + this._rootElem = el; + }} + > {this.props.enabledWrapLines ? ( this._onRenderData(dataToRender) ) : ( @@ -344,7 +349,9 @@ export class LegendsBase extends React.Component im
(this._hoverCardRef = rootElem)} + ref={(rootElem: HTMLDivElement) => { + this._hoverCardRef = rootElem; + }} {...(allowFocusOnLegends && { role: 'button', 'aria-expanded': this.state.isHoverCardVisible, diff --git a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx index d188b799e782c5..b69203cfe50ef6 100644 --- a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx +++ b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx @@ -208,8 +208,8 @@ export class LineChartBase extends React.Component; - private _legendsRef: React.RefObject; + private _cartesianChartRef: React.RefObject; + private _legendsRef: React.RefObject; private _yScaleSecondary: ScaleLinear | undefined; private _hasMarkersMode: boolean = false; private _isXAxisDateType: boolean = false; diff --git a/packages/charts/react-charting/src/components/LineChart/eventAnnotation/Textbox.tsx b/packages/charts/react-charting/src/components/LineChart/eventAnnotation/Textbox.tsx index 14f77f7462ca69..329054a3c594aa 100644 --- a/packages/charts/react-charting/src/components/LineChart/eventAnnotation/Textbox.tsx +++ b/packages/charts/react-charting/src/components/LineChart/eventAnnotation/Textbox.tsx @@ -14,7 +14,7 @@ interface ITextboxProps { } export const Textbox: React.FunctionComponent = props => { - const textElementRef: React.RefObject = React.useRef(null); + const textElementRef: React.RefObject = React.useRef(null); const wrapWords = () => { if (!textElementRef.current) { diff --git a/packages/charts/react-charting/src/components/ResponsiveContainer/ResponsiveContainer.tsx b/packages/charts/react-charting/src/components/ResponsiveContainer/ResponsiveContainer.tsx index 2437012dbcdc7f..76e781e29d4542 100644 --- a/packages/charts/react-charting/src/components/ResponsiveContainer/ResponsiveContainer.tsx +++ b/packages/charts/react-charting/src/components/ResponsiveContainer/ResponsiveContainer.tsx @@ -8,7 +8,7 @@ import { IResponsiveChildProps, IResponsiveContainerProps } from './ResponsiveCo */ export const ResponsiveContainer: React.FC = props => { const containerRef = React.useRef(null); - const onResizeRef = React.useRef(); + const onResizeRef = React.useRef(undefined); const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({}); diff --git a/packages/charts/react-charting/src/components/SankeyChart/SankeyChart.base.tsx b/packages/charts/react-charting/src/components/SankeyChart/SankeyChart.base.tsx index 0eead6aef93a29..76cb2bb1833ebe 100644 --- a/packages/charts/react-charting/src/components/SankeyChart/SankeyChart.base.tsx +++ b/packages/charts/react-charting/src/components/SankeyChart/SankeyChart.base.tsx @@ -843,7 +843,9 @@ export class SankeyChartBase extends React.Component (this.chartContainer = rootElem)} + ref={(rootElem: HTMLDivElement) => { + this.chartContainer = rootElem; + }} onMouseLeave={this._onCloseCallout} > {/* diff --git a/packages/charts/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/charts/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index 950f03165abc16..5cac2122ab6548 100644 --- a/packages/charts/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -59,7 +59,7 @@ export class MultiStackedBarChartBase extends React.Component; + private barChartSvgRef: React.RefObject; private _emptyChartId: string; private _barId: string; private _barIdPlaceholderPartToWhole: string; diff --git a/packages/charts/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/charts/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx index b384f37d9698b4..97ff25536b6b3d 100644 --- a/packages/charts/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx @@ -40,7 +40,7 @@ export class StackedBarChartBase extends React.Component; + private barChartSvgRef: React.RefObject; private _isRTL = getRTL(); public constructor(props: IStackedBarChartProps) { diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 67b5445b702d54..6a84e1e9026df5 100644 --- a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -118,8 +118,8 @@ export class VerticalBarChartBase private _emptyChartId: string; private _xAxisInnerPadding: number; private _xAxisOuterPadding: number; - private _cartesianChartRef: React.RefObject; - private _legendsRef: React.RefObject; + private _cartesianChartRef: React.RefObject; + private _legendsRef: React.RefObject; public constructor(props: IVerticalBarChartProps) { super(props); @@ -406,7 +406,9 @@ export class VerticalBarChartBase // at the same x-axis point in the stack callout. So to prevent an increase in focusable elements // and avoid conveying duplicate info, make these line points non-focusable. data-is-focusable={this._legendHighlighted(lineLegendText!)} - ref={e => (circleRef.refElement = e)} + ref={e => { + circleRef.refElement = e; + }} onFocus={this._lineFocus.bind(this, item.point, circleRef)} onBlur={this._handleChartMouseLeave} /> diff --git a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 79b97edc333489..f38d064fe2dac3 100644 --- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -141,8 +141,8 @@ export class VerticalStackedBarChartBase private _emptyChartId: string; private _xAxisInnerPadding: number; private _xAxisOuterPadding: number; - private _cartesianChartRef: React.RefObject; - private _legendsRef: React.RefObject; + private _cartesianChartRef: React.RefObject; + private _legendsRef: React.RefObject; private readonly Y_ORIGIN: number = 0; private _yAxisType: YAxisType; private _yAxisLabels: string[] = []; @@ -516,7 +516,9 @@ export class VerticalStackedBarChartBase // For more information, see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html opacity={this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity} transform={`translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`} - ref={e => (circleRef.refElement = e)} + ref={e => { + circleRef.refElement = e; + }} {...(noBarsActive && (this._noLegendHighlighted() || this._isLegendHighlighted(item)) ? { 'data-is-focusable': !this.props.hideTooltip, @@ -1086,7 +1088,9 @@ export class VerticalStackedBarChartBase `} fill={this.props.enableGradient ? `url(#${gradientId})` : startColor} rx={this.props.roundCorners ? 3 : 0} - ref={e => (ref.refElement = e)} + ref={e => { + ref.refElement = e; + }} transform={`translate(${xScaleBandwidthTranslate}, 0)`} {...rectFocusProps} /> @@ -1114,7 +1118,9 @@ export class VerticalStackedBarChartBase height={barHeight} fill={this.props.enableGradient ? `url(#${gradientId})` : startColor} rx={this.props.roundCorners ? 3 : 0} - ref={e => (ref.refElement = e)} + ref={e => { + ref.refElement = e; + }} {...rectFocusProps} transform={`translate(${xScaleBandwidthTranslate}, 0)`} /> @@ -1158,7 +1164,13 @@ export class VerticalStackedBarChartBase } return ( - (groupRef.refElement = e)} {...stackFocusProps}> + { + groupRef.refElement = e; + }} + {...stackFocusProps} + > {singleBar} {/* From a4260d7a9f848619ff79618f05bc51e2a50cf505 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 17:24:48 +0100 Subject: [PATCH 14/42] fix(v9/react-charts): resolve issues exposed by R19 --- .../library/etc/react-charts.api.md | 4 +-- .../src/components/ChartTable/ChartTable.tsx | 4 ++- .../CommonComponents/CartesianChart.tsx | 26 +++++++++++-------- .../CommonComponents/CartesianChart.types.ts | 2 +- .../src/components/DonutChart/DonutChart.tsx | 18 ++++++++----- .../components/FunnelChart/FunnelChart.tsx | 7 ++--- .../src/components/GaugeChart/GaugeChart.tsx | 7 ++++- .../components/HeatMapChart/HeatMapChart.tsx | 10 +++---- .../HorizontalBarChart/HorizontalBarChart.tsx | 9 +++++-- .../src/components/Legends/Legends.tsx | 4 ++- .../src/components/Legends/Legends.types.ts | 2 +- .../src/components/LineChart/LineChart.tsx | 6 ++--- .../LineChart/eventAnnotation/Textbox.tsx | 2 +- .../ResponsiveContainer.tsx | 2 +- .../components/SankeyChart/SankeyChart.tsx | 2 +- .../VerticalBarChart/VerticalBarChart.tsx | 4 ++- .../VerticalStackedBarChart.tsx | 20 +++++++++++--- .../src/utilities/FocusableTooltipText.tsx | 2 +- .../library/src/utilities/SVGTooltipText.tsx | 14 ++++------ 19 files changed, 86 insertions(+), 59 deletions(-) diff --git a/packages/charts/react-charts/library/etc/react-charts.api.md b/packages/charts/react-charts/library/etc/react-charts.api.md index e2bb736449a19b..e73e591c67e290 100644 --- a/packages/charts/react-charts/library/etc/react-charts.api.md +++ b/packages/charts/react-charts/library/etc/react-charts.api.md @@ -154,7 +154,7 @@ export interface CartesianChartProps { calloutProps?: Partial; calloutPropsPerDataPoint?: (dataPointCalloutProps: any) => ChartPopoverProps; className?: string; - componentRef?: React_2.RefObject; + componentRef?: React_2.RefObject; customDateTimeFormatter?: (dateTime: Date) => string; dateLocalizeOptions?: Intl.DateTimeFormatOptions; enabledLegendsWrapLines?: boolean; @@ -1082,7 +1082,7 @@ export interface LegendsProps { defaultSelectedLegend?: string; defaultSelectedLegends?: string[]; enabledWrapLines?: boolean; - legendRef?: React_2.RefObject; + legendRef?: React_2.RefObject; legends: Legend[]; onChange?: (selectedLegends: string[], event: React_2.MouseEvent, currentLegend?: Legend) => void; overflowStyles?: React_2.CSSProperties; diff --git a/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx b/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx index d5a58721dd2903..26429390e36e30 100644 --- a/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx +++ b/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx @@ -103,7 +103,9 @@ export const ChartTable: React.FunctionComponent = React.forwar return (
(_rootElem.current = el)} + ref={el => { + _rootElem.current = el; + }} className={classes.root as string} style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }} > diff --git a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx index 7023a5ac648683..2cb5676c0bb02c 100644 --- a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx +++ b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx @@ -38,13 +38,13 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs export const CartesianChart: React.FunctionComponent = React.forwardRef< HTMLDivElement, ModifiedCartesianChartProps ->((props, forwardedRef) => { - const chartContainer = React.useRef(); +>(({ hideTickOverlap = true, ...props }, forwardedRef) => { + const chartContainer = React.useRef(null); let legendContainer: HTMLDivElement; const minLegendContainerHeight: number = 40; - const xAxisElement = React.useRef(); - const yAxisElement = React.useRef(); - const yAxisElementSecondary = React.useRef(); + const xAxisElement = React.useRef(null); + const yAxisElement = React.useRef(null); + const yAxisElementSecondary = React.useRef(null); let margins: IMargins; const idForGraph: string = 'chart_'; let _reqID: number | undefined; @@ -268,7 +268,7 @@ export const CartesianChart: React.FunctionComponent (chartContainer.current = rootElem)} + ref={(rootElem: HTMLDivElement) => { + chartContainer.current = rootElem; + }} onMouseLeave={_onChartLeave} >
@@ -789,7 +791,12 @@ export const CartesianChart: React.FunctionComponent {!props.hideLegend && ( -
(legendContainer = e)} className={classes.legendContainer}> +
{ + legendContainer = e; + }} + className={classes.legendContainer} + > {props.legendBars}
)} @@ -799,6 +806,3 @@ export const CartesianChart: React.FunctionComponent; + componentRef?: React.RefObject; /** * Prop to set the x axis annotation. Used to display additional information on the x-axis. diff --git a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx index 69259dcfcc8d94..17ca943e54a0c7 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx +++ b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx @@ -24,7 +24,8 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40; * {@docCategory DonutChart} */ export const DonutChart: React.FunctionComponent = React.forwardRef( - (props, forwardedRef) => { + ({ innerRadius = 0, hideLabels = true, ...restProps }, forwardedRef) => { + const props = { innerRadius, hideLabels, ...restProps }; const _rootElem = React.useRef(null); const _uniqText: string = useId('_Pie_'); /* eslint-disable @typescript-eslint/no-explicit-any */ @@ -321,7 +322,9 @@ export const DonutChart: React.FunctionComponent = React.forwar return !_isChartEmpty() ? (
(_rootElem.current = rootElem)} + ref={(rootElem: HTMLDivElement | null) => { + _rootElem.current = rootElem; + }} onMouseLeave={_handleChartMouseLeave} > {props.xAxisAnnotation && ( @@ -376,7 +379,12 @@ export const DonutChart: React.FunctionComponent = React.forwar isCartesian={false} /> {!hideLegend && ( -
(legendContainer.current = e)} className={classes.legendContainer}> +
{ + legendContainer.current = e; + }} + className={classes.legendContainer} + > {legendBars}
)} @@ -388,7 +396,3 @@ export const DonutChart: React.FunctionComponent = React.forwar ); DonutChart.displayName = 'DonutChart'; -DonutChart.defaultProps = { - innerRadius: 0, - hideLabels: true, -}; diff --git a/packages/charts/react-charts/library/src/components/FunnelChart/FunnelChart.tsx b/packages/charts/react-charts/library/src/components/FunnelChart/FunnelChart.tsx index 43bcea4749a300..0471c87ef24236 100644 --- a/packages/charts/react-charts/library/src/components/FunnelChart/FunnelChart.tsx +++ b/packages/charts/react-charts/library/src/components/FunnelChart/FunnelChart.tsx @@ -24,7 +24,8 @@ import { toImage } from '../../utilities/image-export-utils'; export const FunnelChart: React.FunctionComponent = React.forwardRef< HTMLDivElement, FunnelChartProps ->((props, forwardedRef) => { +>(({ orientation = 'vertical', ...restProps }, forwardedRef) => { + const props = { orientation, ...restProps }; const _emptyChartId: string = useId('_FunnelChart_empty'); const isRTL = useRtl(); @@ -496,7 +497,3 @@ export const FunnelChart: React.FunctionComponent = React.forw ); }); FunnelChart.displayName = 'FunnelChart'; -// eslint-disable-next-line @typescript-eslint/no-deprecated -FunnelChart.defaultProps = { - orientation: 'vertical', -}; diff --git a/packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.tsx b/packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.tsx index c37274f6c90fda..a6827fc3ab92b8 100644 --- a/packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.tsx +++ b/packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.tsx @@ -588,7 +588,12 @@ export const GaugeChart: React.FunctionComponent = React.forwar const { arcs } = _processProps(); const focusAttributes = useFocusableGroup(); return ( -
(_rootElem.current = el)}> +
{ + _rootElem.current = el; + }} + >
= React.fo const _stringYAxisDataPoints = React.useRef([]); const _dataSet = React.useRef({}); // eslint-disable-next-line @typescript-eslint/no-explicit-any - const _colorScale = React.useRef(); + const _colorScale = React.useRef(undefined); // eslint-disable-next-line @typescript-eslint/no-explicit-any - const _xAxisScale = React.useRef(); + const _xAxisScale = React.useRef(undefined); // eslint-disable-next-line @typescript-eslint/no-explicit-any - const _yAxisScale = React.useRef(); - const _xAxisType = React.useRef(); - const _yAxisType = React.useRef(); + const _yAxisScale = React.useRef(undefined); + const _xAxisType = React.useRef(undefined); + const _yAxisType = React.useRef(undefined); const _calloutAnchorPoint = React.useRef(null); const _emptyChartId = useId('_HeatMap_empty'); const _margins = React.useRef({}); diff --git a/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx b/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx index 605ae81e67bb0a..10027b20b40dd2 100644 --- a/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx +++ b/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx @@ -27,7 +27,7 @@ export const HorizontalBarChart: React.FunctionComponent = React.createRef(); + const barChartSvgRef: React.RefObject = React.createRef(); const _emptyChartId: string = useId('_HBC_empty'); let _barHeight: number; let _calloutAnchorPoint: ChartDataPoint | null; @@ -478,7 +478,12 @@ export const HorizontalBarChart: React.FunctionComponent {!isSingleBar && ( -
(legendContainer.current = e)} className={classes.legendContainer}> +
{ + legendContainer.current = e; + }} + className={classes.legendContainer} + > {legendButtons}
)} diff --git a/packages/charts/react-charts/library/src/components/Legends/Legends.tsx b/packages/charts/react-charts/library/src/components/Legends/Legends.tsx index e477777c10afea..e13dd971af2938 100644 --- a/packages/charts/react-charts/library/src/components/Legends/Legends.tsx +++ b/packages/charts/react-charts/library/src/components/Legends/Legends.tsx @@ -119,7 +119,9 @@ export const Legends: React.FunctionComponent = React.forwardRef (_rootElem.current = el)} + ref={el => { + _rootElem.current = el; + }} >
diff --git a/packages/charts/react-charts/library/src/components/Legends/Legends.types.ts b/packages/charts/react-charts/library/src/components/Legends/Legends.types.ts index 0f990d6fa7293b..ceb06cd5e8fd86 100644 --- a/packages/charts/react-charts/library/src/components/Legends/Legends.types.ts +++ b/packages/charts/react-charts/library/src/components/Legends/Legends.types.ts @@ -251,7 +251,7 @@ export interface LegendsProps { /** * Callback to access the public methods and properties of the component. */ - legendRef?: React.RefObject; + legendRef?: React.RefObject; } /** diff --git a/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx b/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx index a33ab82f892522..b51ce05af2b191 100644 --- a/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx +++ b/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx @@ -144,7 +144,8 @@ type LineChartDataWithIndex = LineChartPoints & { index: number }; * {@docCategory LineChart} */ export const LineChart: React.FunctionComponent = React.forwardRef( - (props, forwardedRef) => { + ({ isCalloutForStack = true, ...restProps }, forwardedRef) => { + const props = { isCalloutForStack, ...restProps }; let _hasMarkersMode: boolean = false; let _isXAxisDateType: boolean = false; let _isScatterPolar: boolean = false; @@ -1910,6 +1911,3 @@ export const LineChart: React.FunctionComponent = React.forwardR }, ); LineChart.displayName = 'LineChart'; -LineChart.defaultProps = { - isCalloutForStack: true, -}; diff --git a/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/Textbox.tsx b/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/Textbox.tsx index d877a82f805c8c..ddacec854b6a5b 100644 --- a/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/Textbox.tsx +++ b/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/Textbox.tsx @@ -16,7 +16,7 @@ interface TextboxProps { } export const Textbox: React.FunctionComponent = props => { - const textElementRef: React.RefObject = React.useRef(null); + const textElementRef: React.RefObject = React.useRef(null); const wrapWords = () => { if (!textElementRef.current) { diff --git a/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.tsx b/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.tsx index 1dee1dea067946..a42bcafc570d55 100644 --- a/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.tsx +++ b/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.tsx @@ -12,7 +12,7 @@ import { mergeClasses } from '@griffel/react'; */ export const ResponsiveContainer: React.FC = props => { const containerRef = React.useRef(null); - const onResizeRef = React.useRef(); + const onResizeRef = React.useRef(undefined); const childClasses = useResponsiveChildStyles(); const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({}); diff --git a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx index fa643a5c2a33af..32bacec74ed562 100644 --- a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx +++ b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx @@ -542,7 +542,7 @@ export const SankeyChart: React.FunctionComponent = React.forw >((props, forwardedRef) => { const classes = useSankeyChartStyles(props); const chartContainer = React.useRef(null); - const _reqID = React.useRef(); + const _reqID = React.useRef(undefined); const _linkId = useId('link'); const _chartId = useId('sankeyChart'); const _emptyChartId = useId('_SankeyChart_empty'); diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx index e645768e8298a9..478e505facf228 100644 --- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx +++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx @@ -277,7 +277,9 @@ export const VerticalBarChart: React.FunctionComponent = // at the same x-axis point in the stack callout. So to prevent an increase in focusable elements // and avoid conveying duplicate info, make these line points non-focusable. data-is-focusable={_legendHighlighted(lineLegendText!)} - ref={e => (circleRef.refElement = e)} + ref={e => { + circleRef.refElement = e; + }} onFocus={event => _lineFocus(event, item.point, circleRef)} onBlur={_handleChartMouseLeave} tabIndex={_legendHighlighted(lineLegendText!) ? 0 : undefined} diff --git a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx index 02c853ce29ddde..a2b1ad32ca3435 100644 --- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx +++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx @@ -685,7 +685,9 @@ export const VerticalStackedBarChart: React.FunctionComponent (circleRef.refElement = e)} + ref={e => { + circleRef.refElement = e; + }} {...(noBarsAndLinesActive ? { tabIndex: !props.hideTooltip ? 0 : undefined, @@ -1132,7 +1134,9 @@ export const VerticalStackedBarChart: React.FunctionComponent (ref.refElement = e)} + ref={e => { + ref.refElement = e; + }} transform={`translate(${xScaleBandwidthTranslate}, 0)`} cursor={props.href ? 'pointer' : 'default'} {...rectFocusProps} @@ -1155,7 +1159,9 @@ export const VerticalStackedBarChart: React.FunctionComponent (ref.refElement = e)} + ref={e => { + ref.refElement = e; + }} {...rectFocusProps} transform={`translate(${xScaleBandwidthTranslate}, 0)`} /> @@ -1198,7 +1204,13 @@ export const VerticalStackedBarChart: React.FunctionComponent - (groupRef.refElement = e)} {...stackFocusProps}> + { + groupRef.refElement = e; + }} + {...stackFocusProps} + > {singleBar} {/* diff --git a/packages/charts/react-charts/library/src/utilities/FocusableTooltipText.tsx b/packages/charts/react-charts/library/src/utilities/FocusableTooltipText.tsx index 92ac79e30ac9d0..29dca68a80f889 100644 --- a/packages/charts/react-charts/library/src/utilities/FocusableTooltipText.tsx +++ b/packages/charts/react-charts/library/src/utilities/FocusableTooltipText.tsx @@ -28,7 +28,7 @@ export const FocusableTooltipText: React.FunctionComponent(null); const async = useRef(new Async()).current; - const resizeObserver = useRef(); + const resizeObserver = useRef(undefined); const getTargetElement = useCallback((): HTMLElement | undefined => { if (!tooltipChild.current || !tooltipChild.current.parentElement) { diff --git a/packages/charts/react-charts/library/src/utilities/SVGTooltipText.tsx b/packages/charts/react-charts/library/src/utilities/SVGTooltipText.tsx index 2a45089b83464f..304de3f0fc4702 100644 --- a/packages/charts/react-charts/library/src/utilities/SVGTooltipText.tsx +++ b/packages/charts/react-charts/library/src/utilities/SVGTooltipText.tsx @@ -26,7 +26,8 @@ export interface SVGTooltipTextProps { export const SVGTooltipText: React.FunctionComponent = React.forwardRef< HTMLDivElement, SVGTooltipTextProps ->((props, forwardedRef) => { +>(({ delay = 0, showBackground = false, ...restProps }, forwardedRef) => { + const props = { delay, showBackground, ...restProps }; const [isTooltipVisible, setIsTooltipVisible] = useState(false); const [isOverflowing, setIsOverflowing] = useState(false); const [textWidth, setTextWidth] = useState(0); @@ -34,10 +35,10 @@ export const SVGTooltipText: React.FunctionComponent = Reac const tooltipHostRef = useRef(null); const async = useRef(new Async()).current; - const dismissTimerId = useRef(); - const openTimerId = useRef(); + const dismissTimerId = useRef(undefined); + const openTimerId = useRef(undefined); const tooltipHostId = useRef(useId('tooltip-host')).current; - const ignoreNextFocusEvent = useRef(false); + const ignoreNextFocusEvent = useRef(false); const portalMountNode = usePortalMountNode(); const PADDING = 3; @@ -205,8 +206,3 @@ export const SVGTooltipText: React.FunctionComponent = Reac ); }); -// eslint-disable-next-line @typescript-eslint/no-deprecated -SVGTooltipText.defaultProps = { - delay: 0, - showBackground: false, -}; From 93a0e3fa46707c334c48118e81d0fb494efc1e63 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 18:50:53 +0100 Subject: [PATCH 15/42] fix(v8/react-monaco-editor): resolve issues exposed by R19 --- packages/react-monaco-editor/src/components/Editor.tsx | 4 ++-- packages/react-monaco-editor/src/components/TsxEditor.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-monaco-editor/src/components/Editor.tsx b/packages/react-monaco-editor/src/components/Editor.tsx index 3a73112f6d2ec6..0f8c550730dfe6 100644 --- a/packages/react-monaco-editor/src/components/Editor.tsx +++ b/packages/react-monaco-editor/src/components/Editor.tsx @@ -23,12 +23,12 @@ export const Editor: React.FunctionComponent = (props: IEditorProp // Hooks must be called unconditionally, so we have to create a backup ref here even if we // immediately throw it away to use the one passed in. - const backupModelRef = React.useRef(); + const backupModelRef = React.useRef(undefined); const modelRef = props.modelRef || backupModelRef; // Store the latest onChange and debounceTime in a ref to ensure that we get the latest values // (if they change at all, which they ideally shouldn't) without needing to re-create the editor - const internalState = React.useRef>(); + const internalState = React.useRef | undefined>(undefined); internalState.current = { onChange, debounceTime }; const divRef = React.useRef(null); diff --git a/packages/react-monaco-editor/src/components/TsxEditor.tsx b/packages/react-monaco-editor/src/components/TsxEditor.tsx index 9f55eaf3ffd50c..c622ab8df8f721 100644 --- a/packages/react-monaco-editor/src/components/TsxEditor.tsx +++ b/packages/react-monaco-editor/src/components/TsxEditor.tsx @@ -23,7 +23,7 @@ export const TsxEditor: React.FunctionComponent = (props: ITsxE // Hooks must be called unconditionally, so we have to create a backup ref here even if we // immediately throw it away to use the one passed in. - const backupModelRef = React.useRef(); + const backupModelRef = React.useRef(undefined); const modelRef = editorProps.modelRef || backupModelRef; // Load the globals before loading the editor (otherwise there will be an error executing the @@ -38,7 +38,7 @@ export const TsxEditor: React.FunctionComponent = (props: ITsxE // Store the latest onChange in a ref to ensure that we get the latest values // without forcing re-rendering - const onChangeRef = React.useRef(); + const onChangeRef = React.useRef(undefined); onChangeRef.current = (text: string) => { if (editorProps.onChange) { // If the consumer provided an additional onChange, call that too From 78f62de0f00bc45c9d440eb5682baae9673af22d Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 19:05:21 +0100 Subject: [PATCH 16/42] fix(v8/react-docsite-components): resolve issues exposed by R19 --- .../src/components/ComponentPage/ComponentPage.tsx | 4 +++- .../src/components/Markdown/MarkdownHeader.tsx | 2 +- .../react-docsite-components/src/components/Video/Video.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx b/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx index 0c8d6524a2b464..0b9d20dfe0b77b 100644 --- a/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx @@ -218,7 +218,9 @@ export class ComponentPageBase extends React.PureComponent const { exampleCards } = this.props; // We want to show the "Variants" header if the header is present since it has a relative anchor to it // or we have more than one example JSX element to render. - const hasVariants = this.props.isHeaderVisible || (exampleCards && !!exampleCards.props.children.length); + const hasVariants = + this.props.isHeaderVisible || + (exampleCards && !!(exampleCards.props as { children: React.ReactNode[] }).children.length); // If only one variant then use its title as the header text, otherwise use "Variants". const headerText = hasVariants ? 'Variants' : this.props.title; diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx index 2f4a0a65ddfd0b..0e8bb0b6d65b7c 100644 --- a/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx +++ b/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx @@ -7,7 +7,7 @@ import { FontSizes, NeutralColors } from '@fluentui/theme'; * The component props. */ export interface IMarkdownHeaderProps { - as?: keyof React.ReactHTML; + as?: keyof React.JSX.IntrinsicElements; children?: React.ReactNode; className?: string; id?: string; diff --git a/packages/react-docsite-components/src/components/Video/Video.tsx b/packages/react-docsite-components/src/components/Video/Video.tsx index 1fb84a617e5023..a41b9e2b61bd8a 100644 --- a/packages/react-docsite-components/src/components/Video/Video.tsx +++ b/packages/react-docsite-components/src/components/Video/Video.tsx @@ -8,7 +8,7 @@ export interface IVideoState { } export class Video extends React.Component { - private videoRef: React.RefObject; + private videoRef: React.RefObject; public constructor(props: IVideoProps) { super(props); From 147bff67ec29365523240751e27d5893280014ef Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Fri, 31 Oct 2025 19:08:18 +0100 Subject: [PATCH 17/42] fix(v9/react-migration-v0-v9): resolve issues exposed by R19 --- .../library/etc/react-migration-v0-v9.api.md | 4 +--- .../library/src/components/Flex/Flex.tsx | 2 +- .../library/src/components/FormField/FormFieldShim.tsx | 3 ++- .../library/src/components/Video/Video.tsx | 2 +- 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md b/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md index 617868906623fd..abc384b6bf6367 100644 --- a/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md +++ b/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md @@ -154,9 +154,7 @@ export const input: { // @public (undocumented) export const ItemLayout: React_2.ForwardRefExoticComponent & Omit<{ as?: "div" | undefined; -} & Omit, HTMLDivElement>, "ref"> & { - ref?: ((instance: HTMLDivElement | null) => void | React_2.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React_2.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React_2.RefObject | null | undefined; -}, "children"> & { +} & Omit, HTMLDivElement>, "children"> & { children?: any; }, "ref"> & React_2.RefAttributes>; diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Flex/Flex.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/Flex/Flex.tsx index 0735e8e650be8b..59fcf2135ecc87 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/Flex/Flex.tsx +++ b/packages/react-components/react-migration-v0-v9/library/src/components/Flex/Flex.tsx @@ -98,7 +98,7 @@ export const Flex = React.forwardRef, { flexDirection: column ? 'column' : 'row', }) : child; diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx index 36446b6bc83d78..ed600ae3c061e1 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx +++ b/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx @@ -73,7 +73,8 @@ export const FormFieldShim = React.forwardRef React.cloneElement(child, { ...fieldControlProps, ...child.props }); + fieldProps.children = fieldControlProps => + React.cloneElement(child, { ...fieldControlProps, ...(child.props as any) }); } else { fieldProps.children = children; } diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Video/Video.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/Video/Video.tsx index 344b09b9f19051..dc061a346d97bc 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/Video/Video.tsx +++ b/packages/react-components/react-migration-v0-v9/library/src/components/Video/Video.tsx @@ -48,7 +48,7 @@ export const Video = React.forwardRef((props, ref) const { className, muted, ...rest } = props; - const videoRef = React.useRef(); + const videoRef = React.useRef(null); const classes = useVideoStyles(); React.useEffect(() => { From 53f5b902e77dc4380428858dc42adfbbf8b65d13 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Nov 2025 09:39:47 +0100 Subject: [PATCH 18/42] fix(v9/react-migration-v8-v9): resolve issues exposed by R19 --- .../src/components/Stack/StackShim.tsx | 47 ++++++++++--------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Stack/StackShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Stack/StackShim.tsx index 0cd76a48ae16f9..fc238d50fdae9b 100644 --- a/packages/react-components/react-migration-v8-v9/library/src/components/Stack/StackShim.tsx +++ b/packages/react-components/react-migration-v8-v9/library/src/components/Stack/StackShim.tsx @@ -78,36 +78,37 @@ export const StackShim = (props: IStackProps): JSXElement => { (!tokens || !tokens.childrenGap) && styles.innerWidth, ]; - let stackChildren = React.Children.toArray(props.children); + type StackChildren = Exclude; + + let stackChildren = React.Children.toArray(props.children) as StackChildren[]; if ( stackChildren.length === 1 && React.isValidElement(stackChildren[0]) && stackChildren[0].type === React.Fragment ) { - stackChildren = stackChildren[0].props.children; + stackChildren = (stackChildren[0].props as React.FragmentProps).children as StackChildren[]; } - stackChildren = React.Children.map( - stackChildren as React.ReactElement[], - (child: React.ReactElement) => { - if (!child) { - return null; - } - - if (child.type && ((child as React.ReactElement).type as React.ComponentType).name === 'StackItemShim') { - const defaultItemProps: IStackItemProps = { - shrink: !disableShrink, - }; - - return React.cloneElement(child, { - ...defaultItemProps, - ...child.props, - }); - } - - return child; - }, - ); + stackChildren = React.Children.map(stackChildren, child => { + if (!child) { + return null; + } + + const _child = child as React.ReactElement<{}, React.ComponentType>; + + if (_child.type && _child.type.name === 'StackItemShim') { + const defaultItemProps: IStackItemProps = { + shrink: !disableShrink, + }; + + return React.cloneElement(_child, { + ...defaultItemProps, + ..._child.props, + }); + } + + return child; + }); if (reversed) { if (horizontal) { From 455398e7c3677d8bbf820cb8ede2743ee38a0d0f Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Nov 2025 09:47:11 +0100 Subject: [PATCH 19/42] fix(v8/public-docsite): resolve issues exposed by R19 --- apps/public-docsite/src/components/IconGrid/IconGrid.tsx | 2 +- apps/public-docsite/src/components/Nav/Nav.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/public-docsite/src/components/IconGrid/IconGrid.tsx b/apps/public-docsite/src/components/IconGrid/IconGrid.tsx index 6a35e2b8192a52..66f5b173c170d3 100644 --- a/apps/public-docsite/src/components/IconGrid/IconGrid.tsx +++ b/apps/public-docsite/src/components/IconGrid/IconGrid.tsx @@ -31,7 +31,7 @@ export type IIconGridProps = IFontIconGridProps | ISvgIconGridProps; interface IFontIconDefinition { name: string; - ref: React.RefObject; + ref: React.RefObject; iconType: 'core-font' | 'react-font'; } diff --git a/apps/public-docsite/src/components/Nav/Nav.tsx b/apps/public-docsite/src/components/Nav/Nav.tsx index fcbd71c6ba9e37..7ef520abc8712b 100644 --- a/apps/public-docsite/src/components/Nav/Nav.tsx +++ b/apps/public-docsite/src/components/Nav/Nav.tsx @@ -100,7 +100,7 @@ export class Nav extends React.Component { ); } - private _renderLinkList = (pages: INavPage[], isSubMenu: boolean): React.ReactElement => { + private _renderLinkList = (pages: INavPage[], isSubMenu: boolean): React.ReactElement => { const { searchablePageTitle } = this.props; const { sortState } = this.state; From 83cd28319e43c1345129a2db70d0325636597ff1 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Nov 2025 10:24:46 +0100 Subject: [PATCH 20/42] chore(react-utilities): resolve issues exposed by R19 v2 --- .../src/compose/deprecated/getSlots.ts | 1 - .../src/compose/deprecated/getSlotsNext.ts | 1 - .../react-utilities/src/compose/types.test.ts | 6 +++- .../react-utilities/src/compose/types.ts | 8 +++-- .../src/hooks/useMergedRefs.test.tsx | 30 ++++++++++++------- .../src/hooks/useMergedRefs.ts | 8 ++--- .../src/hooks/useOnClickOutside.ts | 3 +- .../src/utils/getReactElementRef.test.ts | 2 +- 8 files changed, 36 insertions(+), 23 deletions(-) diff --git a/packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts b/packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts index 9ccc3b544a4bd4..67904db684a635 100644 --- a/packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts +++ b/packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts @@ -103,7 +103,6 @@ function getSlot( } const shouldOmitAsProp = typeof slot === 'string' && asProp; - // eslint-disable-next-line @typescript-eslint/no-deprecated const slotProps = (shouldOmitAsProp ? omit(props, ['as']) : (props as UnknownSlotProps)) as R[K]; return [asserted, slotProps]; } diff --git a/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.ts b/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.ts index 28c2e83f0be3e6..6b61adfda154fa 100644 --- a/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.ts +++ b/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.ts @@ -66,7 +66,6 @@ function getSlotNext( ) as React.ElementType; const shouldOmitAsProp = typeof slot === 'string' && asProp; - // eslint-disable-next-line @typescript-eslint/no-deprecated const slotProps: UnknownSlotProps = shouldOmitAsProp ? propsWithoutAs : props; return [slot as React.ElementType, slotProps as R[K]]; diff --git a/packages/react-components/react-utilities/src/compose/types.test.ts b/packages/react-components/react-utilities/src/compose/types.test.ts index e725ebd386c0f7..af36a7f2fbe4cb 100644 --- a/packages/react-components/react-utilities/src/compose/types.test.ts +++ b/packages/react-components/react-utilities/src/compose/types.test.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/naming-convention */ import * as React from 'react'; import type * as Types from './types'; @@ -58,10 +57,14 @@ describe(`types`, () => { // // v9 ForwardRefComponent + RefAttributes with React 18.2.61 types issue + // NOTE: in React 19 this was reverted and LegacyRef was removed again ! for those reasons this test will fail with React 19 -> Commenting Out // + /** + // @types/react@18.2.61 introduced a change in the `RefAttributes` type to include `LegacyRef` interface RefAttributesAfterTypesReact18_2_61 extends React.Attributes { + // eslint-disable-next-line @typescript-eslint/no-deprecated ref?: React.LegacyRef; } @@ -96,6 +99,7 @@ describe(`types`, () => { return React.createElement(React.Fragment, null, wrong, correct); }); console.log(Example); + */ }); }); }); diff --git a/packages/react-components/react-utilities/src/compose/types.ts b/packages/react-components/react-utilities/src/compose/types.ts index edd166302b8ec7..432d3f00ee2701 100644 --- a/packages/react-components/react-utilities/src/compose/types.ts +++ b/packages/react-components/react-utilities/src/compose/types.ts @@ -106,8 +106,12 @@ type EmptyIntrinsicElements = * * Disallows children for empty tags like 'img'. */ type IntrinsicElementProps = Type extends EmptyIntrinsicElements - ? PropsWithoutChildren>> - : React.PropsWithRef>; + ? PropsWithoutChildren< + // eslint-disable-next-line @typescript-eslint/no-deprecated + React.PropsWithRef> + > + : // eslint-disable-next-line @typescript-eslint/no-deprecated + React.PropsWithRef>; /** * The props type and shorthand value for a slot. Type is either a single intrinsic element like `'div'`, diff --git a/packages/react-components/react-utilities/src/hooks/useMergedRefs.test.tsx b/packages/react-components/react-utilities/src/hooks/useMergedRefs.test.tsx index d4e7425026ad5a..5a4ff778be8f84 100644 --- a/packages/react-components/react-utilities/src/hooks/useMergedRefs.test.tsx +++ b/packages/react-components/react-utilities/src/hooks/useMergedRefs.test.tsx @@ -4,7 +4,8 @@ import { renderHook } from '@testing-library/react-hooks'; describe('useMergedRefs', () => { it('always returns the same ref (refs should be immutable)', () => { - const refFunc = () => null; + // eslint-disable-next-line @typescript-eslint/no-empty-function + const refFunc = () => {}; const { result, rerender } = renderHook(() => useMergedRefs(refFunc)); const firstRefValue = result.current; @@ -13,7 +14,8 @@ describe('useMergedRefs', () => { }); it('always mutates the ref when 1 or more merged refs mutate', () => { - const { result, rerender } = renderHook(() => useMergedRefs(() => ({}))); + // eslint-disable-next-line @typescript-eslint/no-empty-function + const { result, rerender } = renderHook(() => useMergedRefs(() => {})); const firstRefValue = result.current; rerender(); @@ -22,10 +24,14 @@ describe('useMergedRefs', () => { }); it('updates all provided refs', () => { - const refObject: React.RefObject = React.createRef(); + const refObject: React.RefObject = React.createRef(); let refValue: boolean | null = null; - const { result } = renderHook(() => useMergedRefs(refObject, val => (refValue = val))); + const { result } = renderHook(() => + useMergedRefs(refObject, val => { + refValue = val; + }), + ); result.current(true); expect(refObject.current).toBe(true); @@ -40,9 +46,9 @@ describe('useMergedRefs', () => { }); it('reuses the same ref callback if refs remain stable', () => { - const refObject: React.RefObject = React.createRef(); + const refObject: React.RefObject = React.createRef(); // eslint-disable-next-line @typescript-eslint/no-empty-function - const refValueFunc = (val: boolean) => {}; + const refValueFunc = (val: boolean | null) => {}; const { result, rerender } = renderHook(() => useMergedRefs(refObject, refValueFunc)); const firstRefCallback = result.current; @@ -52,14 +58,18 @@ describe('useMergedRefs', () => { }); it('handles changing ref callbacks', () => { - const refObject: React.RefObject = React.createRef(); + const refObject: React.RefObject = React.createRef(); let firstRefValue: boolean | null = null; - let refValueFunc = (val: boolean) => (firstRefValue = val); + let refValueFunc = (val: boolean | null) => { + firstRefValue = val; + }; const { result, rerender } = renderHook(() => useMergedRefs(refObject, refValueFunc)); result.current(true); let secondRefValue: boolean | null = null; - refValueFunc = (val: boolean) => (secondRefValue = val); + refValueFunc = (val: boolean | null) => { + secondRefValue = val; + }; rerender(); result.current(true); @@ -72,7 +82,7 @@ describe('useMergedRefs', () => { result: { current: mergedRef }, } = renderHook(() => useMergedRefs<1 | 2>()); - const refO: React.RefObject<1> | React.RefObject<2> = mergedRef; + const refO: React.RefObject<1 | null> | React.RefObject<2 | null> = mergedRef; const refF: React.RefCallback<1> | React.RefCallback<2> = mergedRef; refF; refO; diff --git a/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts b/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts index d2d41e9276899c..744104c1e2022e 100644 --- a/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts +++ b/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts @@ -8,9 +8,6 @@ import * as React from 'react'; */ export type RefObjectFunction = React.RefObject & ((value: T | null) => void); -/** @internal */ -type MutableRefObjectFunction = React.MutableRefObject & ((value: T | null) => void); - /** * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that * updates all provided refs @@ -40,14 +37,13 @@ export function useMergedRefs(...refs: (React.Ref | undefined)[]): RefObje if (typeof ref === 'function') { ref(value); } else if (ref) { - // work around the immutability of the React.Ref type - (ref as React.MutableRefObject).current = value; + ref.current = value; } } }, // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive [...refs], - ) as MutableRefObjectFunction; + ) as RefObjectFunction; return mergedCallback; } diff --git a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts index d852bd6421e8e4..23ed1cfe29ce27 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts @@ -15,7 +15,8 @@ export type UseOnClickOrScrollOutsideOptions = { /** * Refs to elements that check if the click is outside */ - refs: React.MutableRefObject[]; + refs: // eslint-disable-next-line @typescript-eslint/no-deprecated + React.MutableRefObject[]; /** * By default uses element.contains, but custom contain function can be provided diff --git a/packages/react-components/react-utilities/src/utils/getReactElementRef.test.ts b/packages/react-components/react-utilities/src/utils/getReactElementRef.test.ts index 04f02d929cc291..230dd701d97c34 100644 --- a/packages/react-components/react-utilities/src/utils/getReactElementRef.test.ts +++ b/packages/react-components/react-utilities/src/utils/getReactElementRef.test.ts @@ -55,7 +55,7 @@ describe('getReactElementRef', () => { }); it('handles function refs in pre-React 19', () => { - const mockFunctionRef = jest.fn(() => null) as React.RefCallback; + const mockFunctionRef = jest.fn() as React.RefCallback; const element = createReactElementWithRef(mockFunctionRef); expect(getReactElementRef(element)).toBe(mockFunctionRef); From d2fc4b91905afa89814e02298709bf53bd0c49f3 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Nov 2025 11:28:34 +0100 Subject: [PATCH 21/42] chore(react-tabster): resolve issues exposed by R19 v2 --- .../react-tabster/src/hooks/useFocusVisible.test.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-tabster/src/hooks/useFocusVisible.test.tsx b/packages/react-components/react-tabster/src/hooks/useFocusVisible.test.tsx index a9f793d17f493c..04cfdb0e44510e 100644 --- a/packages/react-components/react-tabster/src/hooks/useFocusVisible.test.tsx +++ b/packages/react-components/react-tabster/src/hooks/useFocusVisible.test.tsx @@ -32,10 +32,7 @@ describe('useFocusVisible', () => { ); - const { result, rerender } = renderHook< - { targetDocument: Document | undefined }, - React.MutableRefObject - >(() => useFocusVisible(), { wrapper: Wrapper }); + const { result, rerender } = renderHook(() => useFocusVisible(), { wrapper: Wrapper }); result.current.current = element; wrapperTargetDocument = targetDocument; @@ -55,7 +52,7 @@ describe('useFocusVisible', () => { const { result, rerender } = renderHook< { targetDocument: Document | undefined }, - React.MutableRefObject + React.RefObject >(props => useFocusVisible({ targetDocument: props.targetDocument }), { wrapper: Wrapper, initialProps: { targetDocument: undefined }, From 0d2211697d5620e935a275555eae391180de0d96 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Nov 2025 12:10:02 +0100 Subject: [PATCH 22/42] chore(react-jsx-runtime): resolve issues exposed by R19 --- .../src/jsx-namespace.test.d.ts | 18 ++++++++++++++++++ .../react-jsx-runtime/tsconfig.lib.json | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 packages/react-components/react-jsx-runtime/src/jsx-namespace.test.d.ts diff --git a/packages/react-components/react-jsx-runtime/src/jsx-namespace.test.d.ts b/packages/react-components/react-jsx-runtime/src/jsx-namespace.test.d.ts new file mode 100644 index 00000000000000..b8927ca9c2a892 --- /dev/null +++ b/packages/react-components/react-jsx-runtime/src/jsx-namespace.test.d.ts @@ -0,0 +1,18 @@ +// needed to augment the JSX namespace for test where directly `createElement` from './createElement' is used, as we are not importing from @fluentui/react-jsx-runtime +// NOTE: this will augment all test files ! +import type * as React from 'react'; + +/** + * Cross React Major Version compatible Intrinsic Element Keys + */ +type JSXIntrinsicElementKeys = Exclude; +/** + * Cross React Major Version compatible IntrinsicElement Dictionary + */ +type JSXIntrinsicElements = { [K in JSXIntrinsicElementKeys]: React.ComponentProps }; + +declare global { + namespace JSX { + interface IntrinsicElements extends JSXIntrinsicElements {} + } +} diff --git a/packages/react-components/react-jsx-runtime/tsconfig.lib.json b/packages/react-components/react-jsx-runtime/tsconfig.lib.json index b2da24eff1b32f..e1401d0b1057a2 100644 --- a/packages/react-components/react-jsx-runtime/tsconfig.lib.json +++ b/packages/react-components/react-jsx-runtime/tsconfig.lib.json @@ -9,6 +9,6 @@ "inlineSources": true, "types": ["static-assets", "environment"] }, - "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.test.d.ts"], "include": ["./src/**/*.ts", "./src/**/*.tsx"] } From c8ed2481f3c3b6f83a2b5f795590745552191222 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Nov 2025 13:49:09 +0100 Subject: [PATCH 23/42] test(react-examples): fix RIT configuration --- packages/react-examples/rit.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-examples/rit.config.js b/packages/react-examples/rit.config.js index 68fe4629523b3d..d682e729b7d78d 100644 --- a/packages/react-examples/rit.config.js +++ b/packages/react-examples/rit.config.js @@ -6,6 +6,7 @@ const config = { react: { 17: { runConfig: { 'type-check': { configPath: 'tsconfig.rit.json' } } }, + 18: { runConfig: { 'type-check': { configPath: 'tsconfig.rit.json' } } }, 19: { runConfig: { 'type-check': { configPath: 'tsconfig.rit.json' } } }, }, }; From 2642c265fc282fb9188a7d97258484a5328948ff Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Nov 2025 14:15:56 +0100 Subject: [PATCH 24/42] chore(v9): resolve issues exposed by R19 --- .../react-context-selector/src/types.ts | 6 ++++-- .../src/components/Portal/Portal.types.ts | 3 ++- .../__snapshots__/SafeZoneArea.test.tsx.snap | 16 ++++++++-------- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/react-components/react-context-selector/src/types.ts b/packages/react-components/react-context-selector/src/types.ts index 29ffae061ec368..21830cee6d2f11 100644 --- a/packages/react-components/react-context-selector/src/types.ts +++ b/packages/react-components/react-context-selector/src/types.ts @@ -23,10 +23,12 @@ export type ContextValue = { listeners: ((payload: readonly [ContextVersion, Value]) => void)[]; /** Holds an actual value of React's context that will be propagated down for computations. */ - value: React.MutableRefObject; + value: // eslint-disable-next-line @typescript-eslint/no-deprecated + React.MutableRefObject; /** A version field is used to sync a context value and consumers. */ - version: React.MutableRefObject; + version: // eslint-disable-next-line @typescript-eslint/no-deprecated + React.MutableRefObject; }; /** diff --git a/packages/react-components/react-portal/library/src/components/Portal/Portal.types.ts b/packages/react-components/react-portal/library/src/components/Portal/Portal.types.ts index 32cc3590138de0..eccf708ce1bfb0 100644 --- a/packages/react-components/react-portal/library/src/components/Portal/Portal.types.ts +++ b/packages/react-components/react-portal/library/src/components/Portal/Portal.types.ts @@ -20,5 +20,6 @@ export type PortalState = Pick & { /** * Ref to the root span element as virtual parent */ - virtualParentRootRef: React.MutableRefObject; + virtualParentRootRef: // eslint-disable-next-line @typescript-eslint/no-deprecated + React.MutableRefObject; }; diff --git a/packages/react-components/react-positioning/library/src/hooks/useSafeZoneArea/__snapshots__/SafeZoneArea.test.tsx.snap b/packages/react-components/react-positioning/library/src/hooks/useSafeZoneArea/__snapshots__/SafeZoneArea.test.tsx.snap index 52d4c4757b00d7..1d8cb42979793e 100644 --- a/packages/react-components/react-positioning/library/src/hooks/useSafeZoneArea/__snapshots__/SafeZoneArea.test.tsx.snap +++ b/packages/react-components/react-positioning/library/src/hooks/useSafeZoneArea/__snapshots__/SafeZoneArea.test.tsx.snap @@ -9,7 +9,7 @@ exports[`SafeZoneArea updateSVGs updates SVGs 1`] = ` > Date: Mon, 3 Nov 2025 15:29:56 +0100 Subject: [PATCH 25/42] style: mitigate lint issues after R19 bump --- .../DeclarativeChart/PlotlyColorAdapter.ts | 4 ++++ .../DeclarativeChart/PlotlySchemaAdapter.ts | 17 +++++++++++++++++ .../DeclarativeChart/PlotlyColorAdapter.ts | 4 ++++ .../DeclarativeChart/PlotlySchemaAdapter.ts | 17 +++++++++++++++++ .../components/Virtualizer/Virtualizer.types.ts | 4 ++++ .../react-virtualizer/src/hooks/hooks.types.ts | 1 + .../src/hooks/useDynamicVirtualizerMeasure.ts | 2 ++ .../src/hooks/useIntersectionObserver.ts | 1 + .../src/hooks/useMeasureList.ts | 3 +++ .../src/hooks/useMutationObserver.ts | 1 + .../src/hooks/useVirtualizerMeasure.ts | 2 ++ .../src/utilities/VirtualizerContext/types.ts | 1 + .../react-aria/library/src/button/types.ts | 1 + .../src/useTypingAnnounce/useTypingAnnounce.ts | 1 + .../CalendarDayGrid/CalendarDayGrid.tsx | 1 + .../CalendarDayGrid/CalendarGridRow.tsx | 1 + .../library/src/utils/ComboboxBase.types.ts | 1 + .../library/src/utils/useComboboxPositioning.ts | 4 ++-- .../library/src/utils/usePopupPositioning.ts | 1 + .../library/src/components/Menu/Menu.types.ts | 2 ++ .../library/src/components/Menu/useMenu.tsx | 2 ++ .../library/src/contexts/menuContext.ts | 2 ++ .../library/src/testing/mockUseMenuContext.ts | 2 ++ .../library/src/contexts/messageBarContext.ts | 2 ++ .../library/src/components/Flex/Flex.tsx | 3 ++- .../src/components/FormField/FormFieldShim.tsx | 6 +++++- .../library/src/hooks/useMotionImperativeRef.ts | 1 + .../OverflowItem/OverflowItem.test.tsx | 1 + .../library/src/useOverflowContainer.test.ts | 1 + .../library/src/useOverflowItem.test.tsx | 2 ++ .../library/src/useOverflowMenu.ts | 1 + .../src/components/Popover/Popover.types.ts | 3 +++ .../src/components/Portal/usePortalMountNode.ts | 4 +++- .../react-positioning/library/src/types.ts | 6 +++--- .../library/src/utils/useCallbackRef.ts | 1 + .../Tooltip/private/useTooltipTimeout.ts | 1 + .../src/components/Tooltip/useTooltip.tsx | 3 +++ .../src/hooks/useHTMLElementWalkerRef.ts | 1 + .../react-tree/library/src/utils/assert.ts | 1 + .../src/components/ExampleCard/ExampleCard.tsx | 1 + .../src/components/Markdown/MarkdownHeader.tsx | 3 ++- .../HoverCard/HoverCard.Target.Example.tsx | 1 + .../SelectedItemsList/SelectedItemsList.tsx | 2 +- .../src/components/TilesList/TilesList.types.ts | 1 + packages/react-hooks/src/useMergedRefs.ts | 2 ++ packages/react-hooks/src/useRefEffect.ts | 1 + .../src/components/Editor.types.ts | 1 + .../src/components/EditorWrapper.types.ts | 1 + .../CalendarDayGrid/CalendarDayGrid.base.tsx | 1 + .../CalendarDayGrid/CalendarGridRow.tsx | 1 + .../ContextualMenu/ContextualMenu.base.tsx | 3 +++ .../components/DetailsList/DetailsList.base.tsx | 6 ++++++ .../src/components/Dropdown/Dropdown.base.tsx | 1 + .../src/components/Layer/LayerHost.types.ts | 1 + .../react/src/components/Pivot/Pivot.base.tsx | 6 +++++- .../test-utilities/src/deprecated/safeCreate.ts | 3 +-- packages/utilities/src/createMergedRef.ts | 1 + packages/utilities/src/createRef.ts | 1 + 58 files changed, 136 insertions(+), 13 deletions(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlyColorAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlyColorAdapter.ts index 511d01d4633fa5..9c18e83bd1caa6 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlyColorAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlyColorAdapter.ts @@ -106,6 +106,7 @@ function tryMapFluentDataViz( export const getColor = ( legendLabel: string, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, templateColorway: PlotlyColorway, isDarkTheme?: boolean, @@ -134,6 +135,7 @@ export const getColor = ( export const getSchemaColors = ( colorway: string[] | undefined, colors: PieColors | Color | Color[] | string | null | undefined, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, isDarkTheme?: boolean, isDonut?: boolean, @@ -170,6 +172,7 @@ export const extractColor = ( colorway: string[] | undefined, colorwayType: ColorwayType, colors: PieColors | Color | Color[] | string | null | undefined, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, isDarkTheme?: boolean, isDonut?: boolean, @@ -183,6 +186,7 @@ export const resolveColor = ( extractedColors: string[] | string | null | undefined, index: number, legend: string, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorway: string[] | undefined, isDarkTheme?: boolean, diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 89a83db41c7f92..985524b26bda57 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -328,6 +328,7 @@ export const _getGaugeAxisColor = ( colorway: string[] | undefined, colorwayType: ColorwayType, color: Color | undefined, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, isDarkTheme?: boolean, ): string => { @@ -1160,6 +1161,7 @@ export const transformPlotlyJsonToAnnotationChartProps = ( export const transformPlotlyJsonToDonutProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1263,6 +1265,7 @@ export const transformPlotlyJsonToDonutProps = ( export const transformPlotlyJsonToVSBCProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1454,6 +1457,7 @@ export const transformPlotlyJsonToVSBCProps = ( export const transformPlotlyJsonToGVBCProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1627,6 +1631,7 @@ export const transformPlotlyJsonToGVBCProps = ( export const transformPlotlyJsonToVBCProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1736,6 +1741,7 @@ export const transformPlotlyJsonToVBCProps = ( export const transformPlotlyJsonToAreaChartProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1753,6 +1759,7 @@ export const transformPlotlyJsonToAreaChartProps = ( export const transformPlotlyJsonToLineChartProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1770,6 +1777,7 @@ export const transformPlotlyJsonToLineChartProps = ( export const transformPlotlyJsonToScatterChartProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1808,6 +1816,7 @@ const transformPlotlyJsonToScatterTraceProps = ( input: PlotlySchema, isMultiPlot: boolean, chartType: ScatterChartTypes, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -2038,6 +2047,7 @@ const transformPlotlyJsonToScatterTraceProps = ( export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -2117,6 +2127,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( export const transformPlotlyJsonToGanttChartProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -2218,6 +2229,7 @@ export const transformPlotlyJsonToGanttChartProps = ( export const transformPlotlyJsonToHeatmapProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -2380,6 +2392,7 @@ export const transformPlotlyJsonToHeatmapProps = ( export const transformPlotlyJsonToSankeyProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -2454,6 +2467,7 @@ export const transformPlotlyJsonToSankeyProps = ( export const transformPlotlyJsonToGaugeProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -2642,6 +2656,7 @@ function mergeCells(tableCells?: TableData['cells'], templateCells?: TableData[' export const transformPlotlyJsonToChartTableProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -2790,6 +2805,7 @@ function getCategoriesAndValues(series: Partial): { export const transformPlotlyJsonToFunnelChartProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -3265,6 +3281,7 @@ const getLegendShape = (series: Partial): ILegend['shape'] => { export const getAllupLegendsProps = ( input: PlotlySchema, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, traceInfo: TraceInfo[], diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts index 511d01d4633fa5..9c18e83bd1caa6 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts @@ -106,6 +106,7 @@ function tryMapFluentDataViz( export const getColor = ( legendLabel: string, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, templateColorway: PlotlyColorway, isDarkTheme?: boolean, @@ -134,6 +135,7 @@ export const getColor = ( export const getSchemaColors = ( colorway: string[] | undefined, colors: PieColors | Color | Color[] | string | null | undefined, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, isDarkTheme?: boolean, isDonut?: boolean, @@ -170,6 +172,7 @@ export const extractColor = ( colorway: string[] | undefined, colorwayType: ColorwayType, colors: PieColors | Color | Color[] | string | null | undefined, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, isDarkTheme?: boolean, isDonut?: boolean, @@ -183,6 +186,7 @@ export const resolveColor = ( extractedColors: string[] | string | null | undefined, index: number, legend: string, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorway: string[] | undefined, isDarkTheme?: boolean, diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index b326fb9d7076a1..dde2c88dfd340d 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -319,6 +319,7 @@ export const _getGaugeAxisColor = ( colorway: string[] | undefined, colorwayType: ColorwayType, color: Color | undefined, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, isDarkTheme?: boolean, ): string => { @@ -488,6 +489,7 @@ export const normalizeObjectArrayForGVBC = ( export const transformPlotlyJsonToDonutProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -593,6 +595,7 @@ export const transformPlotlyJsonToDonutProps = ( export const transformPlotlyJsonToVSBCProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -810,6 +813,7 @@ export const transformPlotlyJsonToVSBCProps = ( export const transformPlotlyJsonToGVBCProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -980,6 +984,7 @@ export const transformPlotlyJsonToGVBCProps = ( export const transformPlotlyJsonToVBCProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1084,6 +1089,7 @@ export const transformPlotlyJsonToVBCProps = ( export const transformPlotlyJsonToAreaChartProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1101,6 +1107,7 @@ export const transformPlotlyJsonToAreaChartProps = ( export const transformPlotlyJsonToLineChartProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1118,6 +1125,7 @@ export const transformPlotlyJsonToLineChartProps = ( export const transformPlotlyJsonToScatterChartProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1156,6 +1164,7 @@ const transformPlotlyJsonToScatterTraceProps = ( input: PlotlySchema, isMultiPlot: boolean, chartType: ScatterChartTypes, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1381,6 +1390,7 @@ const transformPlotlyJsonToScatterTraceProps = ( export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1460,6 +1470,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( export const transformPlotlyJsonToGanttChartProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1561,6 +1572,7 @@ export const transformPlotlyJsonToGanttChartProps = ( export const transformPlotlyJsonToHeatmapProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1724,6 +1736,7 @@ export const transformPlotlyJsonToHeatmapProps = ( export const transformPlotlyJsonToSankeyProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1799,6 +1812,7 @@ export const transformPlotlyJsonToSankeyProps = ( export const transformPlotlyJsonToGaugeProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -1989,6 +2003,7 @@ function mergeCells(tableCells?: TableData['cells'], templateCells?: TableData[' export const transformPlotlyJsonToChartTableProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -2137,6 +2152,7 @@ function getCategoriesAndValues(series: Partial): { export const transformPlotlyJsonToFunnelChartProps = ( input: PlotlySchema, isMultiPlot: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, isDarkTheme?: boolean, @@ -2607,6 +2623,7 @@ const getLegendShape = (series: Partial): Legend['shape'] => { export const getAllupLegendsProps = ( input: PlotlySchema, + // eslint-disable-next-line @typescript-eslint/no-deprecated colorMap: React.MutableRefObject>, colorwayType: ColorwayType, traceInfo: TraceInfo[], diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.types.ts b/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.types.ts index 41967016d8b23f..c81b504c9870d6 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.types.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.types.ts @@ -70,10 +70,12 @@ export type VirtualizerConfigState = { /** * Ref for access to internal size knowledge, can be used to measure updates */ + // eslint-disable-next-line @typescript-eslint/no-deprecated childSizes: React.MutableRefObject; /** * Ref for access to internal progressive size knowledge, can be used to measure updates */ + // eslint-disable-next-line @typescript-eslint/no-deprecated childProgressiveSizes: React.MutableRefObject; }; @@ -157,6 +159,7 @@ export type VirtualizerConfigProps = { * Enables users to override the intersectionObserverRoot. * We recommend passing this in for accurate distance assessment in IO */ + // eslint-disable-next-line @typescript-eslint/no-deprecated scrollViewRef?: React.MutableRefObject; /** @@ -197,6 +200,7 @@ export type VirtualizerConfigProps = { /* * Callback for notifying when a flagged index has been rendered */ + // eslint-disable-next-line @typescript-eslint/no-deprecated flaggedIndex?: React.MutableRefObject; /** diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/hooks.types.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/hooks.types.ts index e9e5728fed23e1..1c489c41c90274 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/hooks/hooks.types.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/hooks.types.ts @@ -83,6 +83,7 @@ export interface ResizeCallbackWithRef { // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286 observer: ResizeObserver, + // eslint-disable-next-line @typescript-eslint/no-deprecated scrollRef?: React.MutableRefObject, ): void; } diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicVirtualizerMeasure.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicVirtualizerMeasure.ts index 81c0fe35b83a09..653f0f2c74088b 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicVirtualizerMeasure.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicVirtualizerMeasure.ts @@ -43,6 +43,7 @@ export const useDynamicVirtualizerMeasure = ( const { targetDocument } = useFluent(); const container = React.useRef(null); const handleScrollResize = React.useCallback( + // eslint-disable-next-line @typescript-eslint/no-deprecated (scrollRef: React.MutableRefObject) => { if (!scrollRef?.current) { // Error? ignore? @@ -137,6 +138,7 @@ export const useDynamicVirtualizerMeasure = ( // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286 _observer: ResizeObserver, + // eslint-disable-next-line @typescript-eslint/no-deprecated scrollRef?: React.MutableRefObject, ) => { if (scrollRef) { diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts index c332ceb41bdf49..b7251191d82913 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts @@ -60,6 +60,7 @@ export const useIntersectionObserver = ( setObserverInit: (newInit: IntersectionObserverInit | undefined) => void; // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286 + // eslint-disable-next-line @typescript-eslint/no-deprecated observer: React.MutableRefObject; } => { 'use no memo'; diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useMeasureList.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useMeasureList.ts index 04128d14acc280..f40b94def52543 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useMeasureList.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useMeasureList.ts @@ -25,9 +25,12 @@ export function useMeasureList< totalLength: number, defaultItemSize: number, ): { + // eslint-disable-next-line @typescript-eslint/no-deprecated widthArray: React.MutableRefObject; + // eslint-disable-next-line @typescript-eslint/no-deprecated heightArray: React.MutableRefObject; createIndexedRef: (index: number) => (el: TElement | null) => void; + // eslint-disable-next-line @typescript-eslint/no-deprecated refArray: React.MutableRefObject>; sizeUpdateCount: number; } { diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts index 23986744fd6867..a0b37480e35b7c 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts @@ -13,6 +13,7 @@ export const useMutationObserver = ( callback: MutationCallback, options?: MutationObserverInit, ): { + // eslint-disable-next-line @typescript-eslint/no-deprecated observer: React.MutableRefObject; } => { 'use no memo'; diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useVirtualizerMeasure.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useVirtualizerMeasure.ts index 8c03410359f264..1a93e793f5e245 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useVirtualizerMeasure.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useVirtualizerMeasure.ts @@ -16,6 +16,7 @@ export const useStaticVirtualizerMeasure = ( bufferItems: number; bufferSize: number; scrollRef: (instance: TElement | null) => void; + // eslint-disable-next-line @typescript-eslint/no-deprecated containerSizeRef: React.MutableRefObject; } => { const { defaultItemSize, direction = 'vertical', bufferItems, bufferSize } = virtualizerProps; @@ -37,6 +38,7 @@ export const useStaticVirtualizerMeasure = ( // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286 _observer: ResizeObserver, + // eslint-disable-next-line @typescript-eslint/no-deprecated scrollRef?: React.MutableRefObject, ) => { if (!scrollRef?.current) { diff --git a/packages/react-components/deprecated/react-virtualizer/src/utilities/VirtualizerContext/types.ts b/packages/react-components/deprecated/react-virtualizer/src/utilities/VirtualizerContext/types.ts index 8e9e4c6cd7cfa4..7635509a385c54 100644 --- a/packages/react-components/deprecated/react-virtualizer/src/utilities/VirtualizerContext/types.ts +++ b/packages/react-components/deprecated/react-virtualizer/src/utilities/VirtualizerContext/types.ts @@ -9,6 +9,7 @@ export type VirtualizerContextProps = { /* * These optional props are used in dynamic virtualizer */ + // eslint-disable-next-line @typescript-eslint/no-deprecated childProgressiveSizes?: React.MutableRefObject; }; diff --git a/packages/react-components/react-aria/library/src/button/types.ts b/packages/react-components/react-aria/library/src/button/types.ts index 658ef90b2f41a1..e91db0a7eafa63 100644 --- a/packages/react-components/react-aria/library/src/button/types.ts +++ b/packages/react-components/react-aria/library/src/button/types.ts @@ -25,6 +25,7 @@ export type ARIAButtonElementIntersection = DistributiveOmit< + // eslint-disable-next-line @typescript-eslint/no-deprecated React.PropsWithRef>, 'children' > & { diff --git a/packages/react-components/react-aria/library/src/useTypingAnnounce/useTypingAnnounce.ts b/packages/react-components/react-aria/library/src/useTypingAnnounce/useTypingAnnounce.ts index 9c853ab0c57148..a36f8738b0609a 100644 --- a/packages/react-components/react-aria/library/src/useTypingAnnounce/useTypingAnnounce.ts +++ b/packages/react-components/react-aria/library/src/useTypingAnnounce/useTypingAnnounce.ts @@ -20,6 +20,7 @@ const valueMutationOptions = { interface TypingAnnounceReturn { typingAnnounce: AriaLiveAnnounceFn; + // eslint-disable-next-line @typescript-eslint/no-deprecated inputRef: React.MutableRefObject; } diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx index 147d0ace462b10..83747833b1ff30 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx @@ -51,6 +51,7 @@ function useAnimateBackwards(weeks: DayInfo[][]): boolean | undefined { export const CalendarDayGrid: React.FunctionComponent = props => { const navigatedDayRef = React.useRef( null, + // eslint-disable-next-line @typescript-eslint/no-deprecated ) as React.MutableRefObject; const activeDescendantId = useId(); diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarGridRow.tsx b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarGridRow.tsx index 9ccdea6f28f2ea..19094c629041c6 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarGridRow.tsx +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarGridRow.tsx @@ -17,6 +17,7 @@ export interface CalendarGridRowProps extends CalendarDayGridProps { ariaHidden?: boolean; rowClassName?: string; ariaRole?: string; + // eslint-disable-next-line @typescript-eslint/no-deprecated navigatedDayRef: React.MutableRefObject; activeDescendantId: string; calculateRoundedStyles(above: boolean, below: boolean, left: boolean, right: boolean): string; diff --git a/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts b/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts index 8d87b6db7b9983..21bf23beec7dc1 100644 --- a/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts +++ b/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts @@ -112,6 +112,7 @@ export type ComboboxBaseState = Required< * @deprecated - no longer used internally * Whether the next blur event should be ignored, and the combobox/dropdown will not close. */ + // eslint-disable-next-line @typescript-eslint/no-deprecated ignoreNextBlur: React.MutableRefObject; /** diff --git a/packages/react-components/react-combobox/library/src/utils/useComboboxPositioning.ts b/packages/react-components/react-combobox/library/src/utils/useComboboxPositioning.ts index a065ab107e8ecc..3f481ad72ef4f1 100644 --- a/packages/react-components/react-combobox/library/src/utils/useComboboxPositioning.ts +++ b/packages/react-components/react-combobox/library/src/utils/useComboboxPositioning.ts @@ -5,9 +5,9 @@ import type { ComboboxBaseProps } from './ComboboxBase.types'; import * as React from 'react'; export function useComboboxPositioning(props: ComboboxBaseProps): [ - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated listboxRef: React.MutableRefObject, - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated triggerRef: React.MutableRefObject, ] { const { positioning } = props; diff --git a/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts b/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts index 3faccf6174eaf0..beac98a83de2e0 100644 --- a/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts +++ b/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts @@ -13,6 +13,7 @@ import type { DatePickerProps } from '../DatePicker'; */ export function usePopupPositioning( props: DatePickerProps, + // eslint-disable-next-line @typescript-eslint/no-deprecated ): [triggerRef: React.MutableRefObject, popupRef: React.MutableRefObject] { const { positioning } = props; diff --git a/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts b/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts index 7d392253b47f3e..8f843a90ad4f8e 100644 --- a/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts +++ b/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts @@ -127,6 +127,7 @@ export type MenuState = ComponentState & /** * The ref for the popup */ + // eslint-disable-next-line @typescript-eslint/no-deprecated menuPopoverRef: React.MutableRefObject; /** @@ -152,6 +153,7 @@ export type MenuState = ComponentState & /** * The ref for the MenuTrigger, used for popup positioning */ + // eslint-disable-next-line @typescript-eslint/no-deprecated triggerRef: React.MutableRefObject; /** diff --git a/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx b/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx index ae9c7b61ec2bd8..ec2d403139d4be 100644 --- a/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx +++ b/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx @@ -290,6 +290,7 @@ const useMenuOpenState = ( element: targetDocument, refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter( Boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated ) as React.MutableRefObject[], callback: event => setOpen(event, { open: false, type: 'clickOutside', event }), }); @@ -302,6 +303,7 @@ const useMenuOpenState = ( callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }), refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter( Boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated ) as React.MutableRefObject[], disabled: !open || !closeOnScroll, }); diff --git a/packages/react-components/react-menu/library/src/contexts/menuContext.ts b/packages/react-components/react-menu/library/src/contexts/menuContext.ts index d6ae9284e21d81..ffac734863514e 100644 --- a/packages/react-components/react-menu/library/src/contexts/menuContext.ts +++ b/packages/react-components/react-menu/library/src/contexts/menuContext.ts @@ -15,7 +15,9 @@ const menuContextDefaultValue: MenuContextValue = { checkedValues: {}, onCheckedValueChange: () => null, isSubmenu: false, + // eslint-disable-next-line @typescript-eslint/no-deprecated triggerRef: { current: null } as unknown as React.MutableRefObject, + // eslint-disable-next-line @typescript-eslint/no-deprecated menuPopoverRef: { current: null } as unknown as React.MutableRefObject, mountNode: null, triggerId: '', diff --git a/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts b/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts index 947042e47216d4..4b5aaac379b9f5 100644 --- a/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts +++ b/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts @@ -11,7 +11,9 @@ export const mockUseMenuContext = (options: Partial = {}): voi const mockContext: MenuContextValue = { open: false, setOpen: () => null, + // eslint-disable-next-line @typescript-eslint/no-deprecated triggerRef: { current: null } as unknown as React.MutableRefObject, + // eslint-disable-next-line @typescript-eslint/no-deprecated menuPopoverRef: { current: null } as unknown as React.MutableRefObject, mountNode: null, openOnContext: false, diff --git a/packages/react-components/react-message-bar/library/src/contexts/messageBarContext.ts b/packages/react-components/react-message-bar/library/src/contexts/messageBarContext.ts index 8cac8f0b305c44..2fca30269283c6 100644 --- a/packages/react-components/react-message-bar/library/src/contexts/messageBarContext.ts +++ b/packages/react-components/react-message-bar/library/src/contexts/messageBarContext.ts @@ -4,7 +4,9 @@ import * as React from 'react'; export type MessageBarContextValue = { layout: 'multiline' | 'singleline' | 'auto'; + // eslint-disable-next-line @typescript-eslint/no-deprecated actionsRef: React.MutableRefObject; + // eslint-disable-next-line @typescript-eslint/no-deprecated bodyRef: React.MutableRefObject; titleId: string; }; diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Flex/Flex.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/Flex/Flex.tsx index 59fcf2135ecc87..aecde38ec46bb7 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/Flex/Flex.tsx +++ b/packages/react-components/react-migration-v0-v9/library/src/components/Flex/Flex.tsx @@ -98,7 +98,8 @@ export const Flex = React.forwardRef, { + ? // eslint-disable-next-line @typescript-eslint/no-explicit-any + React.cloneElement(child as React.ReactElement, { flexDirection: column ? 'column' : 'row', }) : child; diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx index ed600ae3c061e1..66ad3b13c117f1 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx +++ b/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx @@ -74,7 +74,11 @@ export const FormFieldShim = React.forwardRef - React.cloneElement(child, { ...fieldControlProps, ...(child.props as any) }); + React.cloneElement(child, { + ...fieldControlProps, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ...(child.props as any), + }); } else { fieldProps.children = children; } diff --git a/packages/react-components/react-motion/library/src/hooks/useMotionImperativeRef.ts b/packages/react-components/react-motion/library/src/hooks/useMotionImperativeRef.ts index f4023091038649..831046bd1f58d9 100644 --- a/packages/react-components/react-motion/library/src/hooks/useMotionImperativeRef.ts +++ b/packages/react-components/react-motion/library/src/hooks/useMotionImperativeRef.ts @@ -5,6 +5,7 @@ import type { AnimationHandle, MotionImperativeRef } from '../types'; export function useMotionImperativeRef( imperativeRef: React.Ref | undefined, + // eslint-disable-next-line @typescript-eslint/no-deprecated ): React.MutableRefObject { const animationRef = React.useRef(undefined); diff --git a/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.test.tsx b/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.test.tsx index a7e0fe26c7d894..e9618ea6cf1538 100644 --- a/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.test.tsx +++ b/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.test.tsx @@ -43,6 +43,7 @@ describe('OverflowItem', () => { const triggerRef = jest.fn(); const menuContextValue: Partial = { + // eslint-disable-next-line @typescript-eslint/no-deprecated triggerRef: triggerRef as unknown as React.MutableRefObject, }; diff --git a/packages/react-components/react-overflow/library/src/useOverflowContainer.test.ts b/packages/react-components/react-overflow/library/src/useOverflowContainer.test.ts index a696fc095c7c64..eb2a947c289a24 100644 --- a/packages/react-components/react-overflow/library/src/useOverflowContainer.test.ts +++ b/packages/react-components/react-overflow/library/src/useOverflowContainer.test.ts @@ -66,6 +66,7 @@ describe('useOverflowContainer', () => { const { result, rerender } = renderHook(() => { return useOverflowContainer(() => undefined, { onUpdateItemVisibility: () => undefined }); }); + // eslint-disable-next-line @typescript-eslint/no-deprecated (result.current.containerRef as React.MutableRefObject).current = document.createElement('div'); rerender(); expect(observeMock).toHaveBeenCalledTimes(1); diff --git a/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx b/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx index 769afc446fdd41..48ba136c54b3db 100644 --- a/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx +++ b/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx @@ -20,6 +20,7 @@ describe('useOverflowItem', () => { renderHook( () => { const ref = useOverflowItem('test', 0, '0'); + // eslint-disable-next-line @typescript-eslint/no-deprecated (ref as React.MutableRefObject).current = document.createElement('div'); }, { @@ -49,6 +50,7 @@ describe('useOverflowItem', () => { const { unmount } = renderHook( () => { const ref = useOverflowItem('test', 0, '0'); + // eslint-disable-next-line @typescript-eslint/no-deprecated (ref as React.MutableRefObject).current = document.createElement('div'); }, { diff --git a/packages/react-components/react-overflow/library/src/useOverflowMenu.ts b/packages/react-components/react-overflow/library/src/useOverflowMenu.ts index c9526dfe171a93..e9451c78d9178b 100644 --- a/packages/react-components/react-overflow/library/src/useOverflowMenu.ts +++ b/packages/react-components/react-overflow/library/src/useOverflowMenu.ts @@ -7,6 +7,7 @@ import { useOverflowCount } from './useOverflowCount'; export function useOverflowMenu( id?: string, + // eslint-disable-next-line @typescript-eslint/no-deprecated ): { ref: React.MutableRefObject; overflowCount: number; isOverflowing: boolean } { const elementId = useId('overflow-menu', id); const overflowCount = useOverflowCount(); diff --git a/packages/react-components/react-popover/library/src/components/Popover/Popover.types.ts b/packages/react-components/react-popover/library/src/components/Popover/Popover.types.ts index fe528c115cf42d..012fccd599334a 100644 --- a/packages/react-components/react-popover/library/src/components/Popover/Popover.types.ts +++ b/packages/react-components/react-popover/library/src/components/Popover/Popover.types.ts @@ -164,11 +164,13 @@ export type PopoverState = Pick< /** * Ref of the pointing arrow */ + // eslint-disable-next-line @typescript-eslint/no-deprecated arrowRef: React.MutableRefObject; /** * Ref of the PopoverSurface */ + // eslint-disable-next-line @typescript-eslint/no-deprecated contentRef: React.MutableRefObject; /** @@ -200,6 +202,7 @@ export type PopoverState = Pick< /** * Ref of the PopoverTrigger */ + // eslint-disable-next-line @typescript-eslint/no-deprecated triggerRef: React.MutableRefObject; }; diff --git a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.ts b/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.ts index 20f460995a024d..60f46090a85790 100644 --- a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.ts +++ b/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.ts @@ -26,6 +26,7 @@ type UseElementFactoryOptions = { className: string; dir: string; disabled: boolean | undefined; + // eslint-disable-next-line @typescript-eslint/no-deprecated focusVisibleRef: React.MutableRefObject; targetNode: HTMLElement | ShadowRoot | undefined; }; @@ -235,11 +236,12 @@ const useElementFactory = useInsertionEffect ? useModernElementFactory : useLega * Creates a new element on a "document.body" to mount portals. */ export const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElement | null => { - 'use no memo'; + ('use no memo'); const { targetDocument, dir } = useFluent(); const mountNode = usePortalMountNodeContext(); + // eslint-disable-next-line @typescript-eslint/no-deprecated const focusVisibleRef = useFocusVisible() as React.MutableRefObject; const classes = usePortalMountNodeStylesStyles(); const themeClassName = useThemeClassName(); diff --git a/packages/react-components/react-positioning/library/src/types.ts b/packages/react-components/react-positioning/library/src/types.ts index 4912db2586dd39..86e06e5fb7f97c 100644 --- a/packages/react-components/react-positioning/library/src/types.ts +++ b/packages/react-components/react-positioning/library/src/types.ts @@ -29,11 +29,11 @@ export interface UsePositioningReturn { // (allows a more general type to be passed rather than a more specific one) // However, Typescript currently can't infer that fact for refs // See https://github.com/microsoft/TypeScript/issues/30748 for more information - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated targetRef: React.MutableRefObject; - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated containerRef: React.MutableRefObject; - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated arrowRef: React.MutableRefObject; } diff --git a/packages/react-components/react-positioning/library/src/utils/useCallbackRef.ts b/packages/react-components/react-positioning/library/src/utils/useCallbackRef.ts index d7c086bc6c9753..a5457ce811bc44 100644 --- a/packages/react-components/react-positioning/library/src/utils/useCallbackRef.ts +++ b/packages/react-components/react-positioning/library/src/utils/useCallbackRef.ts @@ -24,6 +24,7 @@ export function useCallbackRef( initialValue: T | null, callback: (newValue: T | null, lastValue: T | null) => void, skipInitialResolve?: boolean, + // eslint-disable-next-line @typescript-eslint/no-deprecated ): React.MutableRefObject { const isFirst = React.useRef(true); const [ref] = React.useState(() => ({ diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/private/useTooltipTimeout.ts b/packages/react-components/react-tooltip/library/src/components/Tooltip/private/useTooltipTimeout.ts index fe7f2d1dc06b81..27db6f15d5e2e4 100644 --- a/packages/react-components/react-tooltip/library/src/components/Tooltip/private/useTooltipTimeout.ts +++ b/packages/react-components/react-tooltip/library/src/components/Tooltip/private/useTooltipTimeout.ts @@ -16,6 +16,7 @@ type BrowserTimerSetter = * @returns A pair of [setTimeout, clearTimeout] that are stable between renders. */ export function useTooltipTimeout( + // eslint-disable-next-line @typescript-eslint/no-deprecated triggerElementRef: React.MutableRefObject, ): readonly [(fn: () => void, delay?: number) => number, () => void] { const { targetDocument } = useFluent(); diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltip.tsx b/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltip.tsx index 8936c50fc6f1bb..fdb74805d26b4a 100644 --- a/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltip.tsx +++ b/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltip.tsx @@ -98,8 +98,11 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => { containerRef, arrowRef, }: { + // eslint-disable-next-line @typescript-eslint/no-deprecated targetRef: React.MutableRefObject; + // eslint-disable-next-line @typescript-eslint/no-deprecated containerRef: React.MutableRefObject; + // eslint-disable-next-line @typescript-eslint/no-deprecated arrowRef: React.MutableRefObject; } = usePositioning(positioningOptions); diff --git a/packages/react-components/react-tree/library/src/hooks/useHTMLElementWalkerRef.ts b/packages/react-components/react-tree/library/src/hooks/useHTMLElementWalkerRef.ts index 757b3fd915237c..f03b21d5d1f106 100644 --- a/packages/react-components/react-tree/library/src/hooks/useHTMLElementWalkerRef.ts +++ b/packages/react-components/react-tree/library/src/hooks/useHTMLElementWalkerRef.ts @@ -6,6 +6,7 @@ import { HTMLElementWalker, createHTMLElementWalker } from '../utils/createHTMLE import { treeItemFilter } from '../utils/treeItemFilter'; export function useHTMLElementWalkerRef(): { + // eslint-disable-next-line @typescript-eslint/no-deprecated walkerRef: React.MutableRefObject; rootRef: React.Ref; } { diff --git a/packages/react-components/react-tree/library/src/utils/assert.ts b/packages/react-components/react-tree/library/src/utils/assert.ts index cff4acd57522e8..00418b56f5d64f 100644 --- a/packages/react-components/react-tree/library/src/utils/assert.ts +++ b/packages/react-components/react-tree/library/src/utils/assert.ts @@ -3,6 +3,7 @@ import * as React from 'react'; export function assertIsDefinedRef( refObject: React.RefObject, msg = `assertIsDefinedRef: reference not properly defined ${refObject}`, + // eslint-disable-next-line @typescript-eslint/no-deprecated ): asserts refObject is React.MutableRefObject { // eslint-disable-next-line eqeqeq if (refObject.current == undefined && process.env.NODE_ENV === 'development') { diff --git a/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx b/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx index 3bbfa9e18b4f24..e4e8c43e676a23 100644 --- a/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx +++ b/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx @@ -34,6 +34,7 @@ const regionStyles: IStackComponent['styles'] = (props, theme) => ({ }); export class ExampleCardBase extends React.Component { + // eslint-disable-next-line @typescript-eslint/no-deprecated private _monacoModelRef: React.MutableRefObject = { current: undefined }; /** * Transformed version of the initial `props.code` for editing and/or export to codepen, diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx index 0e8bb0b6d65b7c..4323cc0dbc9b35 100644 --- a/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx +++ b/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { classNamesFunction, IStyleFunctionOrObject, styled, IStyleFunction } from '@fluentui/react/lib/Utilities'; +import type { JSXIntrinsicElementKeys } from '@fluentui/utilities'; import { ITheme, IStyle } from '@fluentui/react/lib/Styling'; import { FontSizes, NeutralColors } from '@fluentui/theme'; @@ -7,7 +8,7 @@ import { FontSizes, NeutralColors } from '@fluentui/theme'; * The component props. */ export interface IMarkdownHeaderProps { - as?: keyof React.JSX.IntrinsicElements; + as?: JSXIntrinsicElementKeys; children?: React.ReactNode; className?: string; id?: string; diff --git a/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx b/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx index 275c1e4278c098..9a87a359887728 100644 --- a/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx +++ b/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx @@ -68,6 +68,7 @@ const onRenderExpandedCard = (item: IExampleItem): JSXElement => { */ const KeyCellWithHoverCard: React.FunctionComponent<{ item: IExampleItem }> = ({ item }) => { const [contentRendered, { toggle: toggleContentRendered }] = useBoolean(false); + // eslint-disable-next-line @typescript-eslint/no-deprecated const targetElementRef: React.MutableRefObject = React.useRef(null); const expandingCardProps: IExpandingCardProps = useConst({ onRenderCompactCard, diff --git a/packages/react-experiments/src/components/SelectedItemsList/SelectedItemsList.tsx b/packages/react-experiments/src/components/SelectedItemsList/SelectedItemsList.tsx index b62afca096e29f..3e352fc46e5e53 100644 --- a/packages/react-experiments/src/components/SelectedItemsList/SelectedItemsList.tsx +++ b/packages/react-experiments/src/components/SelectedItemsList/SelectedItemsList.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import type { ISelectedItemsList, ISelectedItemsListProps, BaseSelectedItem } from './SelectedItemsList.types'; -import { JSXElement } from '@fluentui/react-utilities'; +import type { JSXElement } from '@fluentui/utilities'; /* eslint-disable react-hooks/rules-of-hooks */ diff --git a/packages/react-experiments/src/components/TilesList/TilesList.types.ts b/packages/react-experiments/src/components/TilesList/TilesList.types.ts index 91b4bc6bf4498c..74b90a1f3928f5 100644 --- a/packages/react-experiments/src/components/TilesList/TilesList.types.ts +++ b/packages/react-experiments/src/components/TilesList/TilesList.types.ts @@ -139,6 +139,7 @@ export interface ITilesGridSegment { type RemovedReactProps = { children?: React.ReactNode; + // eslint-disable-next-line @typescript-eslint/no-deprecated ref?: React.LegacyRef; }; diff --git a/packages/react-hooks/src/useMergedRefs.ts b/packages/react-hooks/src/useMergedRefs.ts index 7ec74517fec20e..19935456af57e7 100644 --- a/packages/react-hooks/src/useMergedRefs.ts +++ b/packages/react-hooks/src/useMergedRefs.ts @@ -16,6 +16,7 @@ export function useMergedRefs(...refs: (React.Ref | undefined)[]): RefObje const mergedCallback: RefObjectFunction = React.useCallback( (value: T) => { // Update the "current" prop hanging on the function. + // eslint-disable-next-line @typescript-eslint/no-deprecated (mergedCallback as unknown as React.MutableRefObject).current = value; for (const ref of refs) { @@ -23,6 +24,7 @@ export function useMergedRefs(...refs: (React.Ref | undefined)[]): RefObje ref(value); } else if (ref) { // work around the immutability of the React.Ref type + // eslint-disable-next-line @typescript-eslint/no-deprecated (ref as unknown as React.MutableRefObject).current = value; } } diff --git a/packages/react-hooks/src/useRefEffect.ts b/packages/react-hooks/src/useRefEffect.ts index 3197e2458fdfa8..49c76d93ec4efa 100644 --- a/packages/react-hooks/src/useRefEffect.ts +++ b/packages/react-hooks/src/useRefEffect.ts @@ -31,6 +31,7 @@ export type RefCallback = ((value: T | null) => void) & React.RefObject(callback: (value: T) => (() => void) | void, initial: T | null = null): RefCallback { type RefData = { + // eslint-disable-next-line @typescript-eslint/no-deprecated ref: ((value: T | null) => void) & React.MutableRefObject; callback: (value: T) => (() => void) | void; cleanup?: (() => void) | void; diff --git a/packages/react-monaco-editor/src/components/Editor.types.ts b/packages/react-monaco-editor/src/components/Editor.types.ts index d0e36841e05e90..7eeda23168391c 100644 --- a/packages/react-monaco-editor/src/components/Editor.types.ts +++ b/packages/react-monaco-editor/src/components/Editor.types.ts @@ -49,5 +49,6 @@ export interface IEditorProps { * Used to access the editor model. Cleared when editor component is disposed to avoid memory leaks. * WARNING: Changing this will re-create the editor. */ + // eslint-disable-next-line @typescript-eslint/no-deprecated modelRef?: React.MutableRefObject; } diff --git a/packages/react-monaco-editor/src/components/EditorWrapper.types.ts b/packages/react-monaco-editor/src/components/EditorWrapper.types.ts index 6bddec6bc93e53..1dddb0e0fb517a 100644 --- a/packages/react-monaco-editor/src/components/EditorWrapper.types.ts +++ b/packages/react-monaco-editor/src/components/EditorWrapper.types.ts @@ -39,6 +39,7 @@ export interface IEditorWrapperProps { * Used to access the editor model. Cleared when editor component is disposed to avoid memory leaks. * WARNING: Changing this will re-create the editor. */ + // eslint-disable-next-line @typescript-eslint/no-deprecated modelRef?: React.MutableRefObject; /** Force using the editor (vs the code viewer) on or off */ diff --git a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx index 41f0e7e297fa7c..4428873424d297 100644 --- a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx +++ b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx @@ -273,6 +273,7 @@ function useWeekCornerStyles(props: ICalendarDayGridProps) { } export const CalendarDayGridBase: React.FunctionComponent = props => { + // eslint-disable-next-line @typescript-eslint/no-deprecated const navigatedDayRef = React.useRef(null) as React.MutableRefObject; const activeDescendantId = useId(); diff --git a/packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx b/packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx index c280e07681e858..b425e16ee91a25 100644 --- a/packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx +++ b/packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx @@ -15,6 +15,7 @@ export interface ICalendarGridRowProps extends ICalendarDayGridProps { ariaHidden?: boolean; rowClassName?: string; ariaRole?: string; + // eslint-disable-next-line @typescript-eslint/no-deprecated navigatedDayRef: React.MutableRefObject; activeDescendantId: string; calculateRoundedStyles( diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx index 6960dc7e9bf530..91b908a56cc7ce 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx @@ -525,10 +525,13 @@ function useSubmenuEnterTimer({ subMenuHoverDelay = NavigationIdleDelay }: ICont function useMouseHandlers( props: IContextualMenuProps, + // eslint-disable-next-line @typescript-eslint/no-deprecated isScrollIdle: React.MutableRefObject, subMenuEntryTimer: React.RefObject, targetWindow: Window | undefined, + // eslint-disable-next-line @typescript-eslint/no-deprecated shouldUpdateFocusOnMouseEvent: React.MutableRefObject, + // eslint-disable-next-line @typescript-eslint/no-deprecated gotMouseMove: React.MutableRefObject, expandedMenuItemKey: string | undefined, hostElement: React.RefObject, diff --git a/packages/react/src/components/DetailsList/DetailsList.base.tsx b/packages/react/src/components/DetailsList/DetailsList.base.tsx index f1d86d6a3cb39a..79a343660a4b62 100644 --- a/packages/react/src/components/DetailsList/DetailsList.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsList.base.tsx @@ -92,11 +92,17 @@ type IDetailsListInnerProps = Omit & IDetailsListState & { selection: ISelection; dragDropHelper: DragDropHelper | undefined; + // eslint-disable-next-line @typescript-eslint/no-deprecated rootRef: React.MutableRefObject; + // eslint-disable-next-line @typescript-eslint/no-deprecated listRef: React.MutableRefObject; + // eslint-disable-next-line @typescript-eslint/no-deprecated groupedListRef: React.MutableRefObject; + // eslint-disable-next-line @typescript-eslint/no-deprecated focusZoneRef: React.MutableRefObject; + // eslint-disable-next-line @typescript-eslint/no-deprecated headerRef: React.MutableRefObject; + // eslint-disable-next-line @typescript-eslint/no-deprecated selectionZoneRef: React.MutableRefObject; onGroupExpandStateChanged: (isSomeGroupExpanded: boolean) => void; onColumnIsSizingChanged: (column: IColumn, isSizing: boolean) => void; diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx index 265251e596ae55..fda5c2b2d48ed2 100644 --- a/packages/react/src/components/Dropdown/Dropdown.base.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx @@ -62,6 +62,7 @@ const getClassNames = classNamesFunction() // eslint-disable-next-line @typescript-eslint/no-deprecated interface IDropdownInternalProps extends Omit, IWithResponsiveModeState { hoisted: { + // eslint-disable-next-line @typescript-eslint/no-deprecated rootRef: React.MutableRefObject; selectedIndices: number[]; setSelectedIndices: React.Dispatch>; diff --git a/packages/react/src/components/Layer/LayerHost.types.ts b/packages/react/src/components/Layer/LayerHost.types.ts index 1f59fb88b6cae6..ccbee54fe25176 100644 --- a/packages/react/src/components/Layer/LayerHost.types.ts +++ b/packages/react/src/components/Layer/LayerHost.types.ts @@ -13,6 +13,7 @@ export interface ILayerHost { * An element ref to the layer host's content root. * This is the element to which layers will be added. */ + // eslint-disable-next-line @typescript-eslint/no-deprecated rootRef: React.MutableRefObject; /** * Notifies the layer host that layers may have been added or removed within its root element. diff --git a/packages/react/src/components/Pivot/Pivot.base.tsx b/packages/react/src/components/Pivot/Pivot.base.tsx index ba7339f336aeba..e4c787d9253a1d 100644 --- a/packages/react/src/components/Pivot/Pivot.base.tsx +++ b/packages/react/src/components/Pivot/Pivot.base.tsx @@ -43,7 +43,11 @@ const getLinkItems = (props: IPivotProps, pivotId: string): PivotLinkCollection React.Children.forEach(React.Children.toArray(props.children), (child: React.ReactNode, index: number) => { if (isPivotItem(child)) { - const { linkText, ...pivotItemProps } = child.props; + const { + // eslint-disable-next-line @typescript-eslint/no-deprecated + linkText, + ...pivotItemProps + } = child.props; const itemKey = child.props.itemKey || index.toString(); result.links.push({ headerText: linkText, diff --git a/packages/test-utilities/src/deprecated/safeCreate.ts b/packages/test-utilities/src/deprecated/safeCreate.ts index 6d11222b15f0f1..46c84a036935fb 100644 --- a/packages/test-utilities/src/deprecated/safeCreate.ts +++ b/packages/test-utilities/src/deprecated/safeCreate.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-deprecated */ import * as React from 'react'; import * as renderer from 'react-test-renderer'; @@ -17,11 +18,9 @@ export function safeCreate( options?: renderer.TestRendererOptions, ): void { let wrapper: renderer.ReactTestRenderer; - /* eslint-disable @typescript-eslint/no-deprecated */ renderer.act(() => { wrapper = renderer.create(content, options); }); - /* eslint-enable @typescript-eslint/no-deprecated */ try { callback(wrapper!); diff --git a/packages/utilities/src/createMergedRef.ts b/packages/utilities/src/createMergedRef.ts index e1ac30e9fef5d6..a78f1d6ac8f9f7 100644 --- a/packages/utilities/src/createMergedRef.ts +++ b/packages/utilities/src/createMergedRef.ts @@ -21,6 +21,7 @@ const createResolver = ref(newValue); } else if (ref) { // work around the immutability of the React.Ref type + // eslint-disable-next-line @typescript-eslint/no-deprecated (ref as unknown as React.MutableRefObject).current = newValue; } } diff --git a/packages/utilities/src/createRef.ts b/packages/utilities/src/createRef.ts index 9f787806815c79..523873b0a96985 100644 --- a/packages/utilities/src/createRef.ts +++ b/packages/utilities/src/createRef.ts @@ -1,5 +1,6 @@ import * as React from 'react'; +// eslint-disable-next-line @typescript-eslint/no-deprecated export type IRefObject = React.MutableRefObject | RefObject | ((ref: T | null) => void); export type RefObject = { From 8d3a93fbcd6cee27bd39e5a3d189ccddbed57118 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Nov 2025 15:33:17 +0100 Subject: [PATCH 26/42] ci(pr-vrt): add 60min timeout --- .github/workflows/pr-vrt.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/pr-vrt.yml b/.github/workflows/pr-vrt.yml index 6e14013b20a5bb..f2ed427b93bfe4 100644 --- a/.github/workflows/pr-vrt.yml +++ b/.github/workflows/pr-vrt.yml @@ -24,6 +24,7 @@ jobs: if: ${{ github.repository_owner == 'microsoft' }} runs-on: macos-14-xlarge name: Generate screenshots + timeout-minutes: 60 steps: - uses: actions/checkout@v4 with: From 5b9b4ecd05b2b3140668e03fcd159f34db029e50 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Nov 2025 17:02:13 +0100 Subject: [PATCH 27/42] test(v9): update snapshots --- .../__snapshots__/CarouselCard.test.tsx.snap | 2 +- .../__snapshots__/Checkbox.test.tsx.snap | 18 ++++---- .../AlphaSlider/AlphaSlider.test.tsx | 2 +- .../components/ColorArea/ColorArea.test.tsx | 4 +- .../ColorSlider/ColorSlider.test.tsx | 2 +- .../__snapshots__/Combobox.test.tsx.snap | 12 ++--- .../__snapshots__/Dropdown.test.tsx.snap | 12 ++--- .../__snapshots__/Listbox.test.tsx.snap | 16 +++---- .../Option/__snapshots__/Option.test.tsx.snap | 6 +-- .../__snapshots__/OptionGroup.test.tsx.snap | 4 +- .../__snapshots__/DatePicker.test.tsx.snap | 8 ++-- .../__snapshots__/Divider.test.tsx.snap | 44 +++++++++---------- .../List/__snapshots__/List.test.tsx.snap | 8 ++-- .../__snapshots__/ListItem.test.tsx.snap | 2 +- .../Menu/__snapshots__/Menu.test.tsx.snap | 2 +- .../Menu/useMenuContextValues.test.tsx | 2 +- .../__snapshots__/MenuGroup.test.tsx.snap | 2 +- .../__snapshots__/MessageBar.test.tsx.snap | 2 +- .../__snapshots__/ListItem.test.tsx.snap | 2 +- .../src/PortalCompatProvider.test.tsx | 16 +++---- .../Slider/__snapshots__/Slider.test.tsx.snap | 6 +-- .../TableSelectionCell.test.tsx.snap | 2 +- .../src/hooks/useTableColumnSizing.test.ts | 5 +++ .../TagPickerOption.test.tsx.snap | 2 +- .../InteractionTag/InteractionTag.test.tsx | 2 +- .../ToastContainer.test.tsx.snap | 4 +- .../ToolbarDivider.test.tsx.snap | 4 +- 27 files changed, 98 insertions(+), 93 deletions(-) diff --git a/packages/react-components/react-carousel/library/src/components/CarouselCard/__snapshots__/CarouselCard.test.tsx.snap b/packages/react-components/react-carousel/library/src/components/CarouselCard/__snapshots__/CarouselCard.test.tsx.snap index fa01541c40b2a8..1c299de8a9fe03 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselCard/__snapshots__/CarouselCard.test.tsx.snap +++ b/packages/react-components/react-carousel/library/src/components/CarouselCard/__snapshots__/CarouselCard.test.tsx.snap @@ -4,7 +4,7 @@ exports[`CarouselCard renders a default state 1`] = `
Default CarouselCard diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap index c5728b884831ac..38588887499364 100644 --- a/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Checkbox renders a custom indicator 1`] = ` >
@@ -35,7 +35,7 @@ exports[`Checkbox renders a default state 1`] = ` >
@@ -93,7 +93,7 @@ exports[`Checkbox renders mixed 1`] = ` >
@@ -132,7 +132,7 @@ exports[`Checkbox renders with a label 1`] = ` >
diff --git a/packages/react-components/react-color-picker/library/src/components/AlphaSlider/AlphaSlider.test.tsx b/packages/react-components/react-color-picker/library/src/components/AlphaSlider/AlphaSlider.test.tsx index efba1d92ee1aa9..94cfa603cc018e 100644 --- a/packages/react-components/react-color-picker/library/src/components/AlphaSlider/AlphaSlider.test.tsx +++ b/packages/react-components/react-color-picker/library/src/components/AlphaSlider/AlphaSlider.test.tsx @@ -34,7 +34,7 @@ describe('AlphaSlider', () => { > diff --git a/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.test.tsx b/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.test.tsx index efc0ac8a1adae5..0e6d164aa84de7 100644 --- a/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.test.tsx +++ b/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.test.tsx @@ -22,13 +22,13 @@ describe('ColorArea', () => { > {
@@ -120,7 +120,7 @@ exports[`Combobox renders an open listbox 1`] = ` aria-selected="false" class="fui-Option" data-activedescendant="" - id="fluent-optionrk" + id="fluent-option_r_k_" role="option" > diff --git a/packages/react-components/react-menu/library/src/components/Menu/useMenuContextValues.test.tsx b/packages/react-components/react-menu/library/src/components/Menu/useMenuContextValues.test.tsx index 7024bdd544537a..0f261b115d9762 100644 --- a/packages/react-components/react-menu/library/src/components/Menu/useMenuContextValues.test.tsx +++ b/packages/react-components/react-menu/library/src/components/Menu/useMenuContextValues.test.tsx @@ -28,7 +28,7 @@ describe('useMenuContextValues_unstable', () => { "persistOnItemClick": false, "safeZone": null, "setOpen": [Function], - "triggerId": "menur0", + "triggerId": "menu_r_0_", "triggerRef": [Function], } `); diff --git a/packages/react-components/react-menu/library/src/components/MenuGroup/__snapshots__/MenuGroup.test.tsx.snap b/packages/react-components/react-menu/library/src/components/MenuGroup/__snapshots__/MenuGroup.test.tsx.snap index bb42a81a6214e7..e3bf50c1653459 100644 --- a/packages/react-components/react-menu/library/src/components/MenuGroup/__snapshots__/MenuGroup.test.tsx.snap +++ b/packages/react-components/react-menu/library/src/components/MenuGroup/__snapshots__/MenuGroup.test.tsx.snap @@ -2,7 +2,7 @@ exports[`MenuGroup renders a default state 1`] = `
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap b/packages/react-components/react-message-bar/library/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap index b65964febb087a..b4819325f78181 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap +++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap @@ -3,7 +3,7 @@ exports[`MessageBar renders a default state 1`] = `
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/__snapshots__/ListItem.test.tsx.snap b/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/__snapshots__/ListItem.test.tsx.snap index b8958a1d061255..42ca80de27adb5 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/__snapshots__/ListItem.test.tsx.snap +++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/__snapshots__/ListItem.test.tsx.snap @@ -4,7 +4,7 @@ exports[`ListItem renders a default state 1`] = `
  • { expect(result.current).toMatchInlineSnapshot(` Array [ - "fui-FluentProviderr0", + "fui-FluentProvider_r_0_", ] `); }); @@ -53,8 +53,8 @@ describe('useProviderThemeClasses', () => { expect(result.current).toMatchInlineSnapshot(` Array [ - "fui-FluentProviderr2", - "fui-FluentProviderr1", + "fui-FluentProvider_r_2_", + "fui-FluentProvider_r_1_", ] `); }); @@ -72,7 +72,7 @@ describe('useProviderThemeClasses', () => { expect(result.current).toMatchInlineSnapshot(` Array [ - "custom1-fui-FluentProviderr3", + "custom1-fui-FluentProvider_r_3_", ] `); }); @@ -143,7 +143,7 @@ describe('PortalCompatProvider', () => { expect(result.current(element)).toBeInstanceOf(Function); expect(element.classList).toMatchInlineSnapshot(` DOMTokenList { - "0": "fui-FluentProviderr4", + "0": "fui-FluentProvider_r_4_", } `); }); @@ -157,8 +157,8 @@ describe('PortalCompatProvider', () => { expect(result.current(element)).toBeInstanceOf(Function); expect(element.classList).toMatchInlineSnapshot(` DOMTokenList { - "0": "fui-FluentProviderr6", - "1": "fui-FluentProviderr5", + "0": "fui-FluentProvider_r_6_", + "1": "fui-FluentProvider_r_5_", } `); }); @@ -177,7 +177,7 @@ describe('PortalCompatProvider', () => { expect(element.classList).toMatchInlineSnapshot(` DOMTokenList { - "0": "fui-FluentProviderr7", + "0": "fui-FluentProvider_r_7_", } `); expect(unregister).toBeInstanceOf(Function); diff --git a/packages/react-components/react-slider/library/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/packages/react-components/react-slider/library/src/components/Slider/__snapshots__/Slider.test.tsx.snap index ed7caa328af675..f958c784a55d1b 100644 --- a/packages/react-components/react-slider/library/src/components/Slider/__snapshots__/Slider.test.tsx.snap +++ b/packages/react-components/react-slider/library/src/components/Slider/__snapshots__/Slider.test.tsx.snap @@ -9,7 +9,7 @@ exports[`Slider renders disabled Slider correctly 1`] = `
    { data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}" onBlur={[Function]} onKeyDown={[Function]} + ref={ + Object { + "current": null, + } + } role="separator" />, "style": Object { diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/__snapshots__/TagPickerOption.test.tsx.snap b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/__snapshots__/TagPickerOption.test.tsx.snap index e71a6231b17385..ef5bc1fc7eab20 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/__snapshots__/TagPickerOption.test.tsx.snap +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/__snapshots__/TagPickerOption.test.tsx.snap @@ -5,7 +5,7 @@ exports[`TagPickerOption renders a default state 1`] = `
    Default TagPickerOption diff --git a/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.test.tsx b/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.test.tsx index d8db8f1b0029e2..13687996fd513d 100644 --- a/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.test.tsx +++ b/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.test.tsx @@ -24,7 +24,7 @@ describe('InteractionTag', () => { , ); expect(getByTestId('secondary').getAttribute('aria-labelledby')).toMatchInlineSnapshot( - `"fui-InteractionTagPrimary-rf fui-InteractionTagSecondary-rg"`, + `"fui-InteractionTagPrimary-_r_f_ fui-InteractionTagSecondary-_r_g_"`, ); }); }); diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/__snapshots__/ToastContainer.test.tsx.snap b/packages/react-components/react-toast/library/src/components/ToastContainer/__snapshots__/ToastContainer.test.tsx.snap index 88aa35e1196d3c..37b205e617a02f 100644 --- a/packages/react-components/react-toast/library/src/components/ToastContainer/__snapshots__/ToastContainer.test.tsx.snap +++ b/packages/react-components/react-toast/library/src/components/ToastContainer/__snapshots__/ToastContainer.test.tsx.snap @@ -3,8 +3,8 @@ exports[`ToastContainer renders a default state 1`] = `