diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json index a01c463eafc58c..25303126d17dcf 100644 --- a/apps/perf-test/package.json +++ b/apps/perf-test/package.json @@ -20,7 +20,7 @@ "dependencies": { "@fluentui/scripts-perf-test-flamegrill": "*", "@fluentui/example-data": "^8.4.11", - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@microsoft/load-themed-styles": "^1.10.26", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json index 0351a0dc67a6c7..64070cfb6cc099 100644 --- a/apps/public-docsite-resources/package.json +++ b/apps/public-docsite-resources/package.json @@ -34,15 +34,15 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/react-examples": "^8.34.4", "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/azure-themes": "^8.6.12", - "@fluentui/react-docsite-components": "^8.12.17", + "@fluentui/azure-themes": "^8.6.13", + "@fluentui/react-docsite-components": "^8.12.18", "@fluentui/font-icons-mdl2": "^8.5.21", "@fluentui/set-version": "^8.2.11", - "@fluentui/theme-samples": "^8.7.91", - "@fluentui/react-monaco-editor": "^1.7.94", + "@fluentui/theme-samples": "^8.7.92", + "@fluentui/react-monaco-editor": "^1.7.95", "office-ui-fabric-core": "^11.0.0", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index c156daa8b0890c..090e5e1ff9cc4f 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -26,7 +26,7 @@ "@fluentui/react-datepicker-compat": "^0.1.5", "@fluentui/react-migration-v8-v9": "^9.2.16", "@fluentui/react-migration-v0-v9": "^9.0.2", - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/react-northstar": "^0.66.4", "@fluentui/react-icons-northstar": "^0.66.4", "@fluentui/react-components": "^9.21.0", diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json index 13595d5f6af6a5..3ab0c2d6b2cc5c 100644 --- a/apps/public-docsite/package.json +++ b/apps/public-docsite/package.json @@ -25,7 +25,7 @@ "devDependencies": { "@fluentui/common-styles": "^1.2.30", "@fluentui/eslint-plugin": "*", - "@fluentui/react-monaco-editor": "^1.7.94", + "@fluentui/react-monaco-editor": "^1.7.95", "write-file-webpack-plugin": "^4.1.0", "@fluentui/scripts-tasks": "*", "@fluentui/scripts-webpack": "*" @@ -34,17 +34,17 @@ "@fluentui/font-icons-mdl2": "^8.5.21", "@fluentui/public-docsite-resources": "^8.1.41", "@fluentui/public-docsite-setup": "^0.3.21", - "@fluentui/react": "^8.109.10", - "@fluentui/react-docsite-components": "^8.12.17", + "@fluentui/react": "^8.109.11", + "@fluentui/react-docsite-components": "^8.12.18", "@fluentui/react-examples": "^8.34.4", - "@fluentui/react-experiments": "^8.14.86", - "@fluentui/fluent2-theme": "^8.107.16", + "@fluentui/react-experiments": "^8.14.87", + "@fluentui/fluent2-theme": "^8.107.17", "@fluentui/react-file-type-icons": "^8.8.21", "@fluentui/react-icons-mdl2": "^1.3.45", "@fluentui/react-icons-mdl2-branded": "^1.2.46", "@fluentui/set-version": "^8.2.11", "@fluentui/theme": "^2.6.32", - "@fluentui/theme-samples": "^8.7.91", + "@fluentui/theme-samples": "^8.7.92", "@fluentui/utilities": "^8.13.16", "@microsoft/load-themed-styles": "^1.10.26", "office-ui-fabric-core": "^11.0.0", diff --git a/apps/react-18-tests-v8/package.json b/apps/react-18-tests-v8/package.json index 2f931ecef389ac..7d8b0fe2674506 100644 --- a/apps/react-18-tests-v8/package.json +++ b/apps/react-18-tests-v8/package.json @@ -21,7 +21,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/react-hooks": "^8.6.27", "@types/react": "18.0.14", "@types/react-dom": "18.0.6", diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index 29a54eb22a936f..4af102ed27afae 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -13,7 +13,7 @@ }, "license": "MIT", "devDependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@microsoft/load-themed-styles": "^1.10.26", "@types/mocha": "7.0.2", "@fluentui/public-docsite-resources": "^8.1.41", diff --git a/apps/stress-test/package.json b/apps/stress-test/package.json index 52fab2eb9e2f4a..b9e8c1e48ed10b 100644 --- a/apps/stress-test/package.json +++ b/apps/stress-test/package.json @@ -10,7 +10,7 @@ "type-check": "tsc -b tsconfig.type.json" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/react-components": "^9.21.0", "@fluentui/react-icons": "^2.0.196", "@fluentui/web-components": "^2.5.15", diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json index 805cc52c96f04c..b93c65e28b0937 100644 --- a/apps/theming-designer/package.json +++ b/apps/theming-designer/package.json @@ -19,9 +19,9 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/merge-styles": "^8.5.12", - "@fluentui/react-docsite-components": "^8.12.17", + "@fluentui/react-docsite-components": "^8.12.18", "@fluentui/foundation-legacy": "^8.2.41", "@fluentui/scheme-utilities": "^8.3.33", "@fluentui/set-version": "^8.2.11", diff --git a/apps/ts-minbar-test-react/package.json b/apps/ts-minbar-test-react/package.json index bfd98ce64aece2..5de67d1509f0a1 100644 --- a/apps/ts-minbar-test-react/package.json +++ b/apps/ts-minbar-test-react/package.json @@ -5,7 +5,7 @@ "description": "Testing Fluent UI React compatibility with Typescript 3.9", "license": "MIT", "dependencies": { - "@fluentui/react": "^8.109.10" + "@fluentui/react": "^8.109.11" }, "scripts": { "type-check": "tsc -p .", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 05238bacfea207..b0d39bd37e873d 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -22,8 +22,8 @@ "dependencies": { "@fluentui/example-data": "^8.4.11", "@fluentui/font-icons-mdl2": "^8.5.21", - "@fluentui/react": "^8.109.10", - "@fluentui/react-experiments": "^8.14.86", + "@fluentui/react": "^8.109.11", + "@fluentui/react-experiments": "^8.14.87", "@fluentui/react-hooks": "^8.6.27", "@fluentui/react-icons-mdl2": "^1.3.45", "@fluentui/storybook": "^1.0.0", diff --git a/change/@fluentui-react-4cf263e9-5a59-4ce0-b9b1-a08d8baa5e67.json b/change/@fluentui-react-4cf263e9-5a59-4ce0-b9b1-a08d8baa5e67.json deleted file mode 100644 index 71710250dc3676..00000000000000 --- a/change/@fluentui-react-4cf263e9-5a59-4ce0-b9b1-a08d8baa5e67.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: Dropdown hover high contrast mode colors", - "packageName": "@fluentui/react", - "email": "sarah.higley@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json b/change/@fluentui-react-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json deleted file mode 100644 index 1f93b779e7e008..00000000000000 --- a/change/@fluentui-react-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "MessageBar: Add SmallScreenSelector styles to use grid layout to properly place buttons", - "packageName": "@fluentui/react", - "email": "mgodbolt@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-conformance-09db4fc5-2f5c-4dbe-a602-2c226cff5bab.json b/change/@fluentui-react-conformance-09db4fc5-2f5c-4dbe-a602-2c226cff5bab.json deleted file mode 100644 index d3c19c955f1589..00000000000000 --- a/change/@fluentui-react-conformance-09db4fc5-2f5c-4dbe-a602-2c226cff5bab.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: testOptions custom classname prefix now works as intended.", - "packageName": "@fluentui/react-conformance", - "email": "tristan.watanabe@gmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-data-grid-react-window-9216b207-e3ef-40d2-814b-9e6f2267d335.json b/change/@fluentui-react-data-grid-react-window-9216b207-e3ef-40d2-814b-9e6f2267d335.json new file mode 100644 index 00000000000000..1cd494249a19ac --- /dev/null +++ b/change/@fluentui-react-data-grid-react-window-9216b207-e3ef-40d2-814b-9e6f2267d335.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Fixed an issue where columns would overflow when resizableColumns is on", + "packageName": "@fluentui/react-data-grid-react-window", + "email": "jirivyhnalek@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-53bb57fc-9922-42a6-9795-a9ae7da8c8b4.json b/change/@fluentui-react-table-53bb57fc-9922-42a6-9795-a9ae7da8c8b4.json new file mode 100644 index 00000000000000..7d35c863072a45 --- /dev/null +++ b/change/@fluentui-react-table-53bb57fc-9922-42a6-9795-a9ae7da8c8b4.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "DataGrid now exposes containerWidthOffset prop, which is mainly used internally to adjust available space for column resizing based on other props", + "packageName": "@fluentui/react-table", + "email": "jirivyhnalek@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-utilities-d5e2a8b7-bfb3-4995-bd38-c0e77ebc6981.json b/change/@fluentui-react-utilities-d5e2a8b7-bfb3-4995-bd38-c0e77ebc6981.json new file mode 100644 index 00000000000000..43f7648afbb422 --- /dev/null +++ b/change/@fluentui-react-utilities-d5e2a8b7-bfb3-4995-bd38-c0e77ebc6981.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: getNativeElementProps should support animation event handlers", + "packageName": "@fluentui/react-utilities", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json index e244a7fafb4957..483add49657ec8 100644 --- a/packages/azure-themes/CHANGELOG.json +++ b/packages/azure-themes/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/azure-themes", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/azure-themes_v8.6.13", + "version": "8.6.13", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/azure-themes_v8.6.12", diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md index 465026d5bf06c3..72849c2313558c 100644 --- a/packages/azure-themes/CHANGELOG.md +++ b/packages/azure-themes/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/azure-themes -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.6.13](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.13) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.12..@fluentui/azure-themes_v8.6.13) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.6.12](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.12) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json index 90b461552e2dcc..60fcc64f21ff69 100644 --- a/packages/azure-themes/package.json +++ b/packages/azure-themes/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/azure-themes", - "version": "8.6.12", + "version": "8.6.13", "description": "Azure themes for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/set-version": "^8.2.11", "tslib": "^2.1.0" } diff --git a/packages/cra-template/CHANGELOG.json b/packages/cra-template/CHANGELOG.json index f1cdff14eb7087..ab974a39d4df4d 100644 --- a/packages/cra-template/CHANGELOG.json +++ b/packages/cra-template/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/cra-template", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/cra-template_v8.4.93", + "version": "8.4.93", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/cra-template", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/cra-template_v8.4.92", diff --git a/packages/cra-template/CHANGELOG.md b/packages/cra-template/CHANGELOG.md index 4e5ad1cc76436b..72e96e0d132237 100644 --- a/packages/cra-template/CHANGELOG.md +++ b/packages/cra-template/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/cra-template -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.4.93](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.93) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/cra-template_v8.4.92..@fluentui/cra-template_v8.4.93) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.4.92](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.92) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json index 5f1dd80cfa5d89..6aa2db3e71a241 100644 --- a/packages/cra-template/package.json +++ b/packages/cra-template/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/cra-template", - "version": "8.4.92", + "version": "8.4.93", "description": "Create React App template for Fluent UI React (@fluentui/react)", "repository": { "type": "git", @@ -18,7 +18,7 @@ "template.json" ], "devDependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/scripts-projects-test": "*", "@fluentui/scripts-monorepo": "*" } diff --git a/packages/fluent2-theme/CHANGELOG.json b/packages/fluent2-theme/CHANGELOG.json index cbe42efbc246f4..1e80ee90198b8b 100644 --- a/packages/fluent2-theme/CHANGELOG.json +++ b/packages/fluent2-theme/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/fluent2-theme", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.17", + "version": "8.107.17", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/fluent2-theme_v8.107.16", diff --git a/packages/fluent2-theme/CHANGELOG.md b/packages/fluent2-theme/CHANGELOG.md index db3624c4bbc113..a3514897c797e5 100644 --- a/packages/fluent2-theme/CHANGELOG.md +++ b/packages/fluent2-theme/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/fluent2-theme -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.107.17](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.17) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.16..@fluentui/fluent2-theme_v8.107.17) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.107.16](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.16) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/fluent2-theme/package.json b/packages/fluent2-theme/package.json index cd464aad79f3f2..ba90b0b6ecc8b4 100644 --- a/packages/fluent2-theme/package.json +++ b/packages/fluent2-theme/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/fluent2-theme", - "version": "8.107.16", + "version": "8.107.17", "description": "A Fluent2 theme for Fluent UI React 8.x", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/set-version": "^8.2.11", "tslib": "^2.1.0" } diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json index 2644fb2f903a49..fc8a9a8cfe2696 100644 --- a/packages/react-cards/CHANGELOG.json +++ b/packages/react-cards/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-cards", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-cards_v0.205.92", + "version": "0.205.92", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/react-cards_v0.205.91", diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md index 50a605d6f40674..fa91f153548eea 100644 --- a/packages/react-cards/CHANGELOG.md +++ b/packages/react-cards/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-cards -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [0.205.92](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.92) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.91..@fluentui/react-cards_v0.205.92) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [0.205.91](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.91) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json index 172ed9471466c4..e339f168739e4b 100644 --- a/packages/react-cards/package.json +++ b/packages/react-cards/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-cards", - "version": "0.205.91", + "version": "0.205.92", "description": "Deprecated experimental Card container components for Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -34,7 +34,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/foundation-legacy": "^8.2.41", "@fluentui/set-version": "^8.2.11", "@microsoft/load-themed-styles": "^1.10.26", diff --git a/packages/react-charting/CHANGELOG.json b/packages/react-charting/CHANGELOG.json index c244bbc7cd9ceb..6439598c63723e 100644 --- a/packages/react-charting/CHANGELOG.json +++ b/packages/react-charting/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-charting", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-charting_v5.16.38", + "version": "5.16.38", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react-focus to v8.8.28", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/theme-samples to v8.7.92", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Fri, 02 Jun 2023 07:35:08 GMT", "tag": "@fluentui/react-charting_v5.16.37", diff --git a/packages/react-charting/CHANGELOG.md b/packages/react-charting/CHANGELOG.md index e959331a9e4d15..d1d35e3f48caec 100644 --- a/packages/react-charting/CHANGELOG.md +++ b/packages/react-charting/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-charting -This log was last generated on Fri, 02 Jun 2023 07:35:08 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [5.16.38](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.38) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.37..@fluentui/react-charting_v5.16.38) + +### Patches + +- Bump @fluentui/react-focus to v8.8.28 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) +- Bump @fluentui/theme-samples to v8.7.92 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [5.16.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.37) Fri, 02 Jun 2023 07:35:08 GMT diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index 55068e197babc2..ae58fbc956fd3d 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-charting", - "version": "5.16.37", + "version": "5.16.38", "description": "Experimental React charting components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ }, "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@types/react-addons-test-utils": "0.14.18", "@fluentui/jest-serializer-merge-styles": "^8.0.29", "@fluentui/scripts-jest": "*", @@ -37,8 +37,8 @@ "jest-canvas-mock": "2.4.0" }, "dependencies": { - "@fluentui/react-focus": "^8.8.27", - "@fluentui/theme-samples": "^8.7.91", + "@fluentui/react-focus": "^8.8.28", + "@fluentui/theme-samples": "^8.7.92", "@microsoft/load-themed-styles": "^1.10.26", "@types/d3-array": "1.2.1", "@types/d3-axis": "1.0.10", @@ -64,7 +64,7 @@ "tslib": "^2.1.0" }, "peerDependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "react": ">=16.8.0 <19.0.0", diff --git a/packages/react-components/react-conformance-griffel/package.json b/packages/react-components/react-conformance-griffel/package.json index e39c7da813ddab..9aa582f01bfe26 100644 --- a/packages/react-components/react-conformance-griffel/package.json +++ b/packages/react-components/react-conformance-griffel/package.json @@ -29,7 +29,7 @@ "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "typescript": "^4.3.0", - "@fluentui/react-conformance": "^0.16.2" + "@fluentui/react-conformance": "^0.16.3" }, "dependencies": { "@griffel/react": "^1.5.7", diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx index 62bfa0648d0305..b2daaa21a7941e 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useDataGrid_unstable } from './useDataGrid.styles'; +import { useDataGrid_unstable } from './useDataGrid'; import { renderDataGrid_unstable, useDataGridStyles_unstable, diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts index b5c5a7388b1d75..0b3589e2b3bc1d 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts @@ -1,2 +1,2 @@ export * from './DataGrid'; -export * from './useDataGrid.styles'; +export * from './useDataGrid'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.styles.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts similarity index 51% rename from packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.styles.ts rename to packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts index c50790787ddad8..fab0d21d7ea5a1 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.styles.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts @@ -1,6 +1,7 @@ import * as React from 'react'; -import type { DataGridProps, DataGridState } from '@fluentui/react-table'; +import { DataGridProps, DataGridState, TABLE_SELECTION_CELL_WIDTH } from '@fluentui/react-table'; import { useDataGrid_unstable as useBaseState } from '@fluentui/react-table'; +import { useFluent, useScrollbarWidth } from '@fluentui/react-components'; /** * Create the state required to render DataGrid. @@ -12,5 +13,15 @@ import { useDataGrid_unstable as useBaseState } from '@fluentui/react-table'; * @param ref - reference to root HTMLElement of DataGrid */ export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref): DataGridState => { - return useBaseState({ ...props, 'aria-rowcount': props.items.length }, ref); + const { targetDocument } = useFluent(); + const scrollbarWidth = useScrollbarWidth({ targetDocument }); + + let containerWidthOffset = props.containerWidthOffset; + + if (containerWidthOffset === undefined) { + containerWidthOffset = props.selectionMode ? -TABLE_SELECTION_CELL_WIDTH : 0; + containerWidthOffset -= scrollbarWidth || 0; + } + + return useBaseState({ ...props, 'aria-rowcount': props.items.length, containerWidthOffset }, ref); }; diff --git a/packages/react-components/react-migration-v8-v9/package.json b/packages/react-components/react-migration-v8-v9/package.json index 393849996aa0ce..b37e63c1caa438 100644 --- a/packages/react-components/react-migration-v8-v9/package.json +++ b/packages/react-components/react-migration-v8-v9/package.json @@ -32,8 +32,8 @@ }, "dependencies": { "@ctrl/tinycolor": "3.3.4", - "@fluentui/fluent2-theme": "^8.107.16", - "@fluentui/react": "^8.109.10", + "@fluentui/fluent2-theme": "^8.107.17", + "@fluentui/react": "^8.109.11", "@fluentui/react-components": "^9.21.0", "@fluentui/react-icons": "^2.0.196", "@fluentui/react-theme": "^9.1.8", diff --git a/packages/react-components/react-skeleton/stories/Skeleton/index.stories.tsx b/packages/react-components/react-skeleton/stories/Skeleton/index.stories.tsx index 48d214dde603ef..df3d5d478cf640 100644 --- a/packages/react-components/react-skeleton/stories/Skeleton/index.stories.tsx +++ b/packages/react-components/react-skeleton/stories/Skeleton/index.stories.tsx @@ -9,7 +9,7 @@ export { Animation } from './SkeletonAnimation.stories'; export { Row } from './SkeletonRow.stories'; export default { - title: 'Skeleton', + title: 'Components/Skeleton', component: Skeleton, parameters: { docs: { diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index da972c37b1bea5..dca10704a31e82 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/packages/react-components/react-table/etc/react-table.api.md @@ -134,6 +134,7 @@ export type DataGridProps = TableProps & Pick void; + containerWidthOffset?: number; }; // @public @@ -242,6 +243,9 @@ export type SortDirection = 'ascending' | 'descending'; // @public export const Table: ForwardRefComponent; +// @public (undocumented) +export const TABLE_SELECTION_CELL_WIDTH = 44; + // @public export const TableBody: ForwardRefComponent; diff --git a/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts b/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts index dcd38068af3084..b7146c4498a096 100644 --- a/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts +++ b/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts @@ -80,6 +80,12 @@ export type DataGridProps = TableProps & e: KeyboardEvent | TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }, ) => void; + /** + * For column resizing. Allows for a container size to be adjusted by a number of pixels, to make + * sure the columns don't overflow the table. + * By default, this value is calculated internally based on other props, but can be overriden. + */ + containerWidthOffset?: number; }; /** diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts index edfe1be7f4e105..cecb2188e6f6cb 100644 --- a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts +++ b/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts @@ -34,8 +34,11 @@ export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref JSX.Element; +// @public +export const renderToast_unstable: (state: ToastState) => JSX.Element; + +// @public +export const renderToastBody_unstable: (state: ToastBodyState) => JSX.Element; // @public export const renderToaster_unstable: (state: ToasterState) => JSX.Element; // @public -export const ToastAlert: ForwardRefComponent; +export const renderToastFooter_unstable: (state: ToastFooterState) => JSX.Element; + +// @public +export const renderToastTitle_unstable: (state: ToastTitleState) => JSX.Element; + +// @public +export const Toast: ForwardRefComponent; + +// @public +export const ToastBody: ForwardRefComponent; // @public (undocumented) -export const toastAlertClassNames: SlotClassNames; +export const toastBodyClassNames: SlotClassNames; // @public -export type ToastAlertProps = ComponentProps & { - intent?: 'info' | 'success' | 'error' | 'warning'; - appearance?: 'primary' | 'inverted'; -}; +export type ToastBodyProps = ComponentProps & {}; // @public (undocumented) -export type ToastAlertSlots = { - root: NonNullable>; - media?: Slot<'div'>; - action?: Slot<'div'>; +export type ToastBodySlots = { + root: Slot<'div'>; + subtitle?: Slot<'div'>; }; // @public -export type ToastAlertState = ComponentState & Pick & Required>; +export type ToastBodyState = ComponentState; + +// @public (undocumented) +export const toastClassNames: SlotClassNames; // @public export const Toaster: React_2.FC; @@ -66,6 +77,23 @@ export type ToasterState = ComponentState & Pick; + +// @public (undocumented) +export const toastFooterClassNames: SlotClassNames; + +// @public +export type ToastFooterProps = ComponentProps & {}; + +// @public (undocumented) +export type ToastFooterSlots = { + root: Slot<'div'>; +}; + +// @public +export type ToastFooterState = ComponentState; + // @public (undocumented) export type ToastId = string; @@ -75,6 +103,38 @@ export type ToastOffset = Partial> | To // @public (undocumented) export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'; +// @public +export type ToastProps = ComponentProps & {}; + +// @public (undocumented) +export type ToastSlots = { + root: Slot<'div'>; +}; + +// @public +export type ToastState = ComponentState; + +// @public +export const ToastTitle: ForwardRefComponent; + +// @public (undocumented) +export const toastTitleClassNames: SlotClassNames; + +// @public +export type ToastTitleProps = ComponentProps & { + intent?: 'info' | 'success' | 'error' | 'warning'; +}; + +// @public (undocumented) +export type ToastTitleSlots = { + root: NonNullable>; + media?: Slot<'div'>; + action?: Slot<'div'>; +}; + +// @public +export type ToastTitleState = ComponentState & Required>; + // @public export const ToastTrigger: React_2.FC; @@ -92,17 +152,20 @@ export type ToastTriggerState = { }; // @public -export const useToastAlert_unstable: (props: ToastAlertProps, ref: React_2.Ref) => ToastAlertState; +export const useToast_unstable: (props: ToastProps, ref: React_2.Ref) => ToastState; // @public -export const useToastAlertStyles_unstable: (state: ToastAlertState) => ToastAlertState; +export const useToastBody_unstable: (props: ToastBodyProps, ref: React_2.Ref) => ToastBodyState; + +// @public +export const useToastBodyStyles_unstable: (state: ToastBodyState) => ToastBodyState; // @public (undocumented) export function useToastController(toasterId?: ToasterId): { - dispatchToast: (content: React_2.ReactNode, options?: Partial> | undefined) => void; + dispatchToast: (content: React_2.ReactNode, options?: DispatchToastOptions | undefined) => void; dismissToast: (toastId: ToastId) => void; dismissAllToasts: () => void; - updateToast: (options: UpdateToastEventDetail) => void; + updateToast: (options: UpdateToastOptions) => void; }; // @public @@ -111,6 +174,21 @@ export const useToaster_unstable: (props: ToasterProps) => ToasterState; // @public export const useToasterStyles_unstable: (state: ToasterState) => ToasterState; +// @public +export const useToastFooter_unstable: (props: ToastFooterProps, ref: React_2.Ref) => ToastFooterState; + +// @public +export const useToastFooterStyles_unstable: (state: ToastFooterState) => ToastFooterState; + +// @public +export const useToastStyles_unstable: (state: ToastState) => ToastState; + +// @public +export const useToastTitle_unstable: (props: ToastTitleProps, ref: React_2.Ref) => ToastTitleState; + +// @public +export const useToastTitleStyles_unstable: (state: ToastTitleState) => ToastTitleState; + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-components/react-toast/src/Toast.ts b/packages/react-components/react-toast/src/Toast.ts new file mode 100644 index 00000000000000..a84c38a13fc605 --- /dev/null +++ b/packages/react-components/react-toast/src/Toast.ts @@ -0,0 +1 @@ +export * from './components/Toast/index'; diff --git a/packages/react-components/react-toast/src/ToastAlert.ts b/packages/react-components/react-toast/src/ToastAlert.ts deleted file mode 100644 index f66ac7caf00937..00000000000000 --- a/packages/react-components/react-toast/src/ToastAlert.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/ToastAlert'; diff --git a/packages/react-components/react-toast/src/ToastBody.ts b/packages/react-components/react-toast/src/ToastBody.ts new file mode 100644 index 00000000000000..526fb1959cccd9 --- /dev/null +++ b/packages/react-components/react-toast/src/ToastBody.ts @@ -0,0 +1 @@ +export * from './components/ToastBody/index'; diff --git a/packages/react-components/react-toast/src/ToastContainer.ts b/packages/react-components/react-toast/src/ToastContainer.ts new file mode 100644 index 00000000000000..14ef7e7a4fff6e --- /dev/null +++ b/packages/react-components/react-toast/src/ToastContainer.ts @@ -0,0 +1 @@ +export * from './components/ToastContainer/index'; diff --git a/packages/react-components/react-toast/src/ToastFooter.ts b/packages/react-components/react-toast/src/ToastFooter.ts new file mode 100644 index 00000000000000..1a569b6d26a6d7 --- /dev/null +++ b/packages/react-components/react-toast/src/ToastFooter.ts @@ -0,0 +1 @@ +export * from './components/ToastFooter/index'; diff --git a/packages/react-components/react-toast/src/ToastTitle.ts b/packages/react-components/react-toast/src/ToastTitle.ts new file mode 100644 index 00000000000000..3424a5dcbc301d --- /dev/null +++ b/packages/react-components/react-toast/src/ToastTitle.ts @@ -0,0 +1 @@ +export * from './components/ToastTitle/index'; diff --git a/packages/react-components/react-toast/src/components/Timer/Timer.tsx b/packages/react-components/react-toast/src/components/Timer/Timer.tsx index f98265da4ca1f5..d98f9f994ff25d 100644 --- a/packages/react-components/react-toast/src/components/Timer/Timer.tsx +++ b/packages/react-components/react-toast/src/components/Timer/Timer.tsx @@ -1,22 +1,16 @@ import * as React from 'react'; import { useStyles } from './useTimerStyles.styles'; -export const Timer: React.FC<{ +export type TimerProps = { running: boolean; timeout: number; onTimeout: () => void; -}> = props => { + as?: 'span'; +}; + +export const Timer = React.forwardRef((props, ref) => { const styles = useStyles(); const { running, timeout, onTimeout } = props; - const ref = React.useRef(null); - - React.useEffect(() => { - if (ref.current) { - const timerElement = ref.current; - timerElement.addEventListener('animationend', onTimeout); - return () => timerElement.removeEventListener('animationend', onTimeout); - } - }, [onTimeout]); const style: React.CSSProperties = { animationDuration: `${timeout}ms`, @@ -27,5 +21,15 @@ export const Timer: React.FC<{ return null; } - return ; -}; + return ( + + ); +}); + +Timer.displayName = 'Timer'; diff --git a/packages/react-components/react-toast/src/components/Toast.tsx b/packages/react-components/react-toast/src/components/Toast.tsx deleted file mode 100644 index 0c5aba4346fc39..00000000000000 --- a/packages/react-components/react-toast/src/components/Toast.tsx +++ /dev/null @@ -1,73 +0,0 @@ -/** - * ⚠️ This is temporary and WILL be removed - */ - -import * as React from 'react'; -import { Transition } from 'react-transition-group'; -import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities'; -import { mergeClasses } from '@griffel/react'; -import { useToast, Toast as ToastProps } from '../state'; -import { Timer } from './Timer'; -import { Announce } from '../AriaLive'; -import { useToastStyles } from './Toast.styles'; -import { ToastContextProvider } from '../contexts/toastContext'; - -export const Toast: React.FC = props => { - const styles = useToastStyles(); - - const { visible, children, close, remove, updateId, announce, ...toastOptions } = props; - const { timeout, politeness } = toastOptions; - const { play, running, toastRef } = useToast({ ...props, content: children }); - - // start the toast once it's fully in - useIsomorphicLayoutEffect(() => { - if (toastRef.current) { - const toast = toastRef.current; - toast.addEventListener('animationend', play, { - once: true, - }); - } - }, [play, toastRef]); - - React.useEffect(() => { - if (visible) { - announce(toastRef.current?.textContent ?? '', { politeness }); - } - }, [announce, politeness, toastRef, visible, updateId]); - - const onEntering = () => { - if (!toastRef.current) { - return; - } - - const element = toastRef.current; - element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`); - }; - - const contextValue = React.useMemo( - () => ({ - close, - }), - [close], - ); - - return ( - - -
- {children} - -
- - - ); -}; diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.test.tsx b/packages/react-components/react-toast/src/components/Toast/Toast.test.tsx new file mode 100644 index 00000000000000..0c750cb4087258 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/Toast.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { Toast } from './Toast'; +import { isConformant } from '../../testing/isConformant'; + +describe('Toast', () => { + isConformant({ + Component: Toast, + displayName: 'Toast', + }); + + it('renders a default state', () => { + const result = render(Default Toast); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.tsx b/packages/react-components/react-toast/src/components/Toast/Toast.tsx new file mode 100644 index 00000000000000..78998c00a7b492 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/Toast.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useToast_unstable } from './useToast'; +import { renderToast_unstable } from './renderToast'; +import { useToastStyles_unstable } from './useToastStyles.styles'; +import type { ToastProps } from './Toast.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * Toast component + */ +export const Toast: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToast_unstable(props, ref); + + useToastStyles_unstable(state); + return renderToast_unstable(state); +}); + +Toast.displayName = 'Toast'; diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.types.ts b/packages/react-components/react-toast/src/components/Toast/Toast.types.ts new file mode 100644 index 00000000000000..a894239f2ade9f --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/Toast.types.ts @@ -0,0 +1,15 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type ToastSlots = { + root: Slot<'div'>; +}; + +/** + * Toast Props + */ +export type ToastProps = ComponentProps & {}; + +/** + * State used in rendering Toast + */ +export type ToastState = ComponentState; diff --git a/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap b/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap new file mode 100644 index 00000000000000..4e224d666dc00e --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Toast renders a default state 1`] = ` +
+
+ Default Toast +
+
+`; diff --git a/packages/react-components/react-toast/src/components/Toast/index.ts b/packages/react-components/react-toast/src/components/Toast/index.ts new file mode 100644 index 00000000000000..0bd595944fb22a --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/index.ts @@ -0,0 +1,5 @@ +export * from './Toast'; +export * from './Toast.types'; +export * from './renderToast'; +export * from './useToast'; +export * from './useToastStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/Toast/renderToast.tsx b/packages/react-components/react-toast/src/components/Toast/renderToast.tsx new file mode 100644 index 00000000000000..b7eef53f8eccf2 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/renderToast.tsx @@ -0,0 +1,15 @@ +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import type { ToastState, ToastSlots } from './Toast.types'; + +/** + * Render the final JSX of Toast + */ +export const renderToast_unstable = (state: ToastState) => { + const { slots, slotProps } = getSlotsNext(state); + + return ; +}; diff --git a/packages/react-components/react-toast/src/components/Toast/useToast.ts b/packages/react-components/react-toast/src/components/Toast/useToast.ts new file mode 100644 index 00000000000000..8409bf802a1d37 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/useToast.ts @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { getNativeElementProps } from '@fluentui/react-utilities'; +import type { ToastProps, ToastState } from './Toast.types'; + +/** + * Create the state required to render Toast. + * + * The returned state can be modified with hooks such as useToastStyles_unstable, + * before being passed to renderToast_unstable. + * + * @param props - props from this instance of Toast + * @param ref - reference to root HTMLElement of Toast + */ +export const useToast_unstable = (props: ToastProps, ref: React.Ref): ToastState => { + return { + components: { + root: 'div', + }, + root: getNativeElementProps('div', { + ref, + ...props, + }), + }; +}; diff --git a/packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts b/packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts new file mode 100644 index 00000000000000..2a1a251ff65921 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts @@ -0,0 +1,42 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import type { ToastSlots, ToastState } from './Toast.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; + +export const toastClassNames: SlotClassNames = { + root: 'fui-Toast', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'grid', + gridTemplateColumns: 'auto 1fr auto', + ...shorthands.padding('12px', '12px'), + ...shorthands.borderRadius(tokens.borderRadiusMedium), + ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke), + boxShadow: tokens.shadow8, + fontSize: tokens.fontSizeBase300, + lineHeight: '20px', + fontWeight: tokens.fontWeightSemibold, + color: tokens.colorNeutralForeground1, + backgroundColor: tokens.colorNeutralBackground1, + }, + + inverted: { + color: tokens.colorNeutralForegroundInverted2, + backgroundColor: tokens.colorNeutralBackgroundInverted, + }, +}); + +/** + * Apply styling to the Toast slots based on the state + */ +export const useToastStyles_unstable = (state: ToastState): ToastState => { + const styles = useStyles(); + state.root.className = mergeClasses(toastClassNames.root, styles.root, state.root.className); + + return state; +}; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.test.tsx b/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.test.tsx deleted file mode 100644 index 0eaeb262d5a6d9..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.test.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; - -import { render, screen } from '@testing-library/react'; - -import { isConformant } from '../../testing/isConformant'; -import { ToastAlert } from './ToastAlert'; -import { toastAlertClassNames } from './useToastAlertStyles.styles'; - -describe('ToastAlert', () => { - isConformant({ - Component: ToastAlert, - displayName: 'ToastAlert', - testOptions: { - 'has-static-classnames': [ - { - props: { - media: 'Test Icon', - action: 'Test Action', - }, - expectedClassNames: { - root: toastAlertClassNames.root, - media: toastAlertClassNames.media, - action: toastAlertClassNames.action, - }, - }, - ], - }, - }); - - it('renders a default state', () => { - render(Test); - expect(screen.getByText('Test')).toBeTruthy(); - }); - - it('renders an media', () => { - render(}>Test); - expect(screen.getByTestId('foo')).toBeTruthy(); - }); - - it('renders a button', () => { - render( - - Test - , - ); - expect(screen.getByText('Undo')).toBeTruthy(); - }); - - it('prioritizes media over intent prop', () => { - render( - }> - Test - , - ); - expect(screen.getByTestId('foo')).toBeTruthy(); - }); -}); diff --git a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.tsx b/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.tsx deleted file mode 100644 index 9c486da57ff63d..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; - -import { renderToastAlert_unstable } from './renderToastAlert'; -import { useToastAlert_unstable } from './useToastAlert'; -import { useToastAlertStyles_unstable } from './useToastAlertStyles.styles'; - -import type { ToastAlertProps } from './ToastAlert.types'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; - -/** - * An ToastAlert component displays a brief, important message to attract a user's attention - * without interrupting their current task. - */ -export const ToastAlert: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useToastAlert_unstable(props, ref); - - useToastAlertStyles_unstable(state); - return renderToastAlert_unstable(state); -}) as ForwardRefComponent; - -ToastAlert.displayName = 'ToastAlert'; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.types.ts b/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.types.ts deleted file mode 100644 index eda967255639de..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.types.ts +++ /dev/null @@ -1,39 +0,0 @@ -import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; - -export type ToastAlertSlots = { - /** - * The root slot is the top level container for the toastAlert component - */ - root: NonNullable>; - /** - * The icon slot renders the icon determined by the `icon` or `intent` prop - */ - media?: Slot<'div'>; - /** - * The action slot renders a button that prompts the user to take action on the toastAlert - */ - action?: Slot<'div'>; -}; - -/** - * ToastAlert Props - */ -export type ToastAlertProps = ComponentProps & { - /** - * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop - * overrides the intent prop - */ - intent?: 'info' | 'success' | 'error' | 'warning'; - /** - * The appearance of the ToastAlert. - * @default 'primary' - */ - appearance?: 'primary' | 'inverted'; -}; - -/** - * State used in rendering ToastAlert - */ -export type ToastAlertState = ComponentState & - Pick & - Required>; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/index.ts b/packages/react-components/react-toast/src/components/ToastAlert/index.ts deleted file mode 100644 index 81a58c2c5274b7..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './ToastAlert'; -export * from './ToastAlert.types'; -export * from './renderToastAlert'; -export * from './useToastAlert'; -export * from './useToastAlertStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/renderToastAlert.tsx b/packages/react-components/react-toast/src/components/ToastAlert/renderToastAlert.tsx deleted file mode 100644 index bdbcb4394e52cd..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/renderToastAlert.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/** @jsxRuntime classic */ -/** @jsx createElement */ - -import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; - -import type { ToastAlertState, ToastAlertSlots } from './ToastAlert.types'; - -export const renderToastAlert_unstable = (state: ToastAlertState) => { - const { slots, slotProps } = getSlotsNext(state); - - return ( - - {slots.media && } - {slotProps.root.children} - {slots.action && } - - ); -}; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/useToastAlertStyles.styles.ts b/packages/react-components/react-toast/src/components/ToastAlert/useToastAlertStyles.styles.ts deleted file mode 100644 index 213e3b6aca49e3..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/useToastAlertStyles.styles.ts +++ /dev/null @@ -1,120 +0,0 @@ -import { tokens } from '@fluentui/react-theme'; -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; -import type { ToastAlertSlots, ToastAlertState } from './ToastAlert.types'; -import type { SlotClassNames } from '@fluentui/react-utilities'; - -export const toastAlertClassNames: SlotClassNames = { - root: 'fui-ToastAlert', - media: 'fui-ToastAlert__media', - action: 'fui-ToastAlert__action', -}; - -const useStyles = makeStyles({ - root: { - display: 'flex', - alignItems: 'center', - minHeight: '44px', - ...shorthands.padding('0px', '12px'), - ...shorthands.borderRadius(tokens.borderRadiusMedium), - ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke), - boxShadow: tokens.shadow8, - fontSize: tokens.fontSizeBase300, - lineHeight: '20px', - fontWeight: tokens.fontWeightSemibold, - color: tokens.colorNeutralForeground1, - backgroundColor: tokens.colorNeutralBackground1, - }, - inverted: { - color: tokens.colorNeutralForegroundInverted2, - backgroundColor: tokens.colorNeutralBackgroundInverted, - }, - media: { - height: '16px', - fontSize: '16px', - ...shorthands.padding('0', '8px', '0', '0'), - }, - avatar: { - ...shorthands.margin('0', '8px', '0', '0'), - }, - action: { - ...shorthands.padding('5px', '10px'), - minWidth: 0, - marginLeft: 'auto', - color: tokens.colorBrandForeground1, - }, -}); - -const useIntentMediaStyles = makeStyles({ - success: { - color: tokens.colorPaletteGreenForeground3, - }, - error: { - color: tokens.colorPaletteRedForeground3, - }, - warning: { - color: tokens.colorPaletteYellowForeground2, - }, - info: { - color: tokens.colorNeutralForeground2, - }, -}); - -const useIntentMediaStylesInverted = makeStyles({ - success: { - color: tokens.colorPaletteGreenForegroundInverted, - }, - error: { - color: tokens.colorPaletteRedForegroundInverted, - }, - warning: { - color: tokens.colorPaletteYellowForegroundInverted, - }, - info: { - color: tokens.colorNeutralForegroundInverted2, - }, -}); - -const useActionButtonColorInverted = makeStyles({ - action: { - color: tokens.colorBrandForegroundInverted, - }, -}); - -/** - * Apply styling to the ToastAlert slots based on the state - */ -export const useToastAlertStyles_unstable = (state: ToastAlertState): ToastAlertState => { - const inverted = state.appearance === 'inverted'; - const styles = useStyles(); - const intentMediaStylesPrimary = useIntentMediaStyles(); - const intentMediaStylesInverted = useIntentMediaStylesInverted(); - const actionStylesInverted = useActionButtonColorInverted(); - - state.root.className = mergeClasses( - toastAlertClassNames.root, - styles.root, - inverted && styles.inverted, - state.root.className, - ); - - if (state.media) { - state.media.className = mergeClasses( - toastAlertClassNames.media, - styles.media, - state.intent && (inverted ? intentMediaStylesInverted[state.intent] : intentMediaStylesPrimary[state.intent]), - state.media.className, - ); - } - - if (state.action) { - // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last - state.action.className = mergeClasses( - toastAlertClassNames.action, - styles.action, - inverted && actionStylesInverted.action, - state.action.className, - ); - } - - return state; -}; diff --git a/packages/react-components/react-toast/src/components/ToastBody/ToastBody.test.tsx b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.test.tsx new file mode 100644 index 00000000000000..4364402cf9d694 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.test.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { ToastBody } from './ToastBody'; +import { isConformant } from '../../testing/isConformant'; +import { ToastBodyProps } from './ToastBody.types'; + +describe('ToastBody', () => { + isConformant({ + Component: ToastBody, + displayName: 'ToastBody', + disabledTests: [ + // TODO: having problems due to the fact root is Fragment + 'component-has-static-classnames-object', + ], + requiredProps: { + subtitle: 'subtitle', + }, + }); + + it('renders a default state', () => { + const result = render(Default ToastBody); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-toast/src/components/ToastBody/ToastBody.tsx b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.tsx new file mode 100644 index 00000000000000..782a29b90fe7d2 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useToastBody_unstable } from './useToastBody'; +import { renderToastBody_unstable } from './renderToastBody'; +import { useToastBodyStyles_unstable } from './useToastBodyStyles.styles'; +import type { ToastBodyProps } from './ToastBody.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * ToastBody component + */ +export const ToastBody: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToastBody_unstable(props, ref); + + useToastBodyStyles_unstable(state); + return renderToastBody_unstable(state); +}); + +ToastBody.displayName = 'ToastBody'; diff --git a/packages/react-components/react-toast/src/components/ToastBody/ToastBody.types.ts b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.types.ts new file mode 100644 index 00000000000000..22dcda4c205c3e --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.types.ts @@ -0,0 +1,16 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type ToastBodySlots = { + root: Slot<'div'>; + subtitle?: Slot<'div'>; +}; + +/** + * ToastBody Props + */ +export type ToastBodyProps = ComponentProps & {}; + +/** + * State used in rendering ToastBody + */ +export type ToastBodyState = ComponentState; diff --git a/packages/react-components/react-toast/src/components/ToastBody/__snapshots__/ToastBody.test.tsx.snap b/packages/react-components/react-toast/src/components/ToastBody/__snapshots__/ToastBody.test.tsx.snap new file mode 100644 index 00000000000000..5d597e15f4b9b0 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/__snapshots__/ToastBody.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToastBody renders a default state 1`] = ` +
+
+ Default ToastBody +
+
+`; diff --git a/packages/react-components/react-toast/src/components/ToastBody/index.ts b/packages/react-components/react-toast/src/components/ToastBody/index.ts new file mode 100644 index 00000000000000..e6021a19a6001c --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/index.ts @@ -0,0 +1,5 @@ +export * from './ToastBody'; +export * from './ToastBody.types'; +export * from './renderToastBody'; +export * from './useToastBody'; +export * from './useToastBodyStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/ToastBody/renderToastBody.tsx b/packages/react-components/react-toast/src/components/ToastBody/renderToastBody.tsx new file mode 100644 index 00000000000000..905b5c45715b5e --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/renderToastBody.tsx @@ -0,0 +1,21 @@ +/** @jsxRuntime classic */ +/** @jsxFrag Fragment */ +/** @jsx createElement */ + +import { createElement, Fragment } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import type { ToastBodyState, ToastBodySlots } from './ToastBody.types'; + +/** + * Render the final JSX of ToastBody + */ +export const renderToastBody_unstable = (state: ToastBodyState) => { + const { slots, slotProps } = getSlotsNext(state); + + return ( + <> + + {slots.subtitle ? : null} + + ); +}; diff --git a/packages/react-components/react-toast/src/components/ToastBody/useToastBody.ts b/packages/react-components/react-toast/src/components/ToastBody/useToastBody.ts new file mode 100644 index 00000000000000..320310518ccc7e --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/useToastBody.ts @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import type { ToastBodyProps, ToastBodyState } from './ToastBody.types'; + +/** + * Create the state required to render ToastBody. + * + * The returned state can be modified with hooks such as useToastBodyStyles_unstable, + * before being passed to renderToastBody_unstable. + * + * @param props - props from this instance of ToastBody + * @param ref - reference to root HTMLElement of ToastBody + */ +export const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref): ToastBodyState => { + return { + components: { + root: 'div', + subtitle: 'div', + }, + subtitle: resolveShorthand(props.subtitle), + root: getNativeElementProps('div', { + ref, + ...props, + }), + }; +}; diff --git a/packages/react-components/react-toast/src/components/ToastBody/useToastBodyStyles.styles.ts b/packages/react-components/react-toast/src/components/ToastBody/useToastBodyStyles.styles.ts new file mode 100644 index 00000000000000..f0fcb270487a0a --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/useToastBodyStyles.styles.ts @@ -0,0 +1,47 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import type { ToastBodySlots, ToastBodyState } from './ToastBody.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; + +export const toastBodyClassNames: SlotClassNames = { + root: 'fui-ToastBody', + subtitle: 'fui-ToastBody__subtitle', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + gridColumnStart: 2, + gridColumnEnd: 3, + paddingTop: '6px', + fontSize: tokens.fontSizeBase300, + lineHeight: tokens.fontSizeBase300, + fontWeight: tokens.fontWeightRegular, + }, + + subtitle: { + paddingTop: '4px', + gridColumnStart: 2, + gridColumnEnd: 3, + fontSize: tokens.fontSizeBase200, + lineHeight: tokens.fontSizeBase200, + fontWeight: tokens.fontWeightRegular, + color: tokens.colorNeutralForeground2, + }, +}); + +/** + * Apply styling to the ToastBody slots based on the state + */ +export const useToastBodyStyles_unstable = (state: ToastBodyState): ToastBodyState => { + const styles = useStyles(); + state.root.className = mergeClasses(toastBodyClassNames.root, styles.root, state.root.className); + + if (state.subtitle) { + state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, styles.subtitle, state.subtitle.className); + } + + return state; +}; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.test.tsx b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.test.tsx new file mode 100644 index 00000000000000..324f2bed1d8e2b --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.test.tsx @@ -0,0 +1,210 @@ +import * as React from 'react'; +import { render, act, fireEvent } from '@testing-library/react'; +import { ToastContainer } from './ToastContainer'; +import { isConformant } from '../../testing/isConformant'; +import { ToastContainerProps } from './ToastContainer.types'; +import { toastClassNames } from './useToastContainerStyles.styles'; + +const defaultToastContainerProps: ToastContainerProps = { + announce: () => null, + close: () => null, + content: '', + data: {}, + dispatchedAt: 0, + pauseOnHover: false, + pauseOnWindowBlur: false, + politeness: 'polite', + position: 'bottom-left', + priority: 0, + remove: () => null, + timeout: -1, + toasterId: 'toaster', + toastId: 'toast', + updateId: 0, + visible: true, +}; + +const runningTimerSelector = '[data-timer-status="running"]'; +const pausedTimerSelector = '[data-timer-status="paused"]'; + +describe('ToastContainer', () => { + beforeEach(() => { + jest.useRealTimers(); + }); + + isConformant({ + Component: ToastContainer, + displayName: 'ToastContainer', + requiredProps: defaultToastContainerProps, + isInternal: true, + }); + + it('renders a default state', () => { + const result = render(Default ToastContainer); + expect(result.container).toMatchSnapshot(); + }); + + it('should announce on mount', () => { + const announce = jest.fn(); + const toastProps = { ...defaultToastContainerProps, announce }; + render(ToastContainer); + + expect(announce).toHaveBeenCalledTimes(1); + expect(announce).toHaveBeenCalledWith('ToastContainer', { politeness: 'polite' }); + }); + + it('should announce on updateId change', () => { + const announce = jest.fn(); + const toastProps = { ...defaultToastContainerProps, announce }; + const { rerender } = render(ToastContainer); + + toastProps.updateId++; + + rerender(ToastContainer); + + expect(announce).toHaveBeenCalledTimes(2); + expect(announce).toHaveBeenNthCalledWith(2, 'ToastContainer', { politeness: 'polite' }); + }); + + it('should announce with configured politeness', () => { + const announce = jest.fn(); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, announce, politeness: 'assertive' }; + render(ToastContainer); + + expect(announce).toHaveBeenCalledTimes(1); + expect(announce).toHaveBeenCalledWith('ToastContainer', { politeness: 'assertive' }); + }); + + it('should respect user root', () => { + const className = 'foo'; + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, data: { root: { className } } }; + const { container } = render(ToastContainer); + + expect(container.querySelector(`.${className}`)).not.toBe(null); + }); + + it('should remove toast after visible is false', () => { + jest.useFakeTimers(); + const remove = jest.fn(); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, remove }; + const { rerender } = render(ToastContainer); + toastProps.visible = false; + rerender(ToastContainer); + + jest.advanceTimersByTime(500); + + expect(remove).toHaveBeenCalledTimes(1); + }); + + it('should start timer after toast on animationend', () => { + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, timeout: 1 }; + const { container } = render(ToastContainer); + + const toastElement = container.querySelector(`.${toastClassNames.root}`); + expect(toastElement).not.toBeNull(); + act(() => { + if (toastElement) { + fireEvent.animationEnd(toastElement); + } + }); + + expect(container.querySelector(runningTimerSelector)).not.toBeNull(); + }); + + it('should close toast ontimeout', () => { + const close = jest.fn(); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, timeout: 1, close }; + const { container } = render(ToastContainer); + + const toastElement = container.querySelector(`.${toastClassNames.root}`); + expect(toastElement).not.toBeNull(); + act(() => { + if (toastElement) { + fireEvent.animationEnd(toastElement); + } + }); + + const timer = container.querySelector(runningTimerSelector); + expect(timer).not.toBeNull(); + + act(() => { + if (timer) { + fireEvent.animationEnd(timer); + } + }); + + expect(close).toHaveBeenCalledTimes(1); + }); + + it('should pause on hover', () => { + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, timeout: 1, pauseOnHover: true }; + const { container } = render(ToastContainer); + + const toastElement = container.querySelector(`.${toastClassNames.root}`); + expect(toastElement).not.toBeNull(); + act(() => { + if (toastElement) { + fireEvent.animationEnd(toastElement); + } + }); + + expect(container.querySelector(runningTimerSelector)).not.toBeNull(); + + act(() => { + if (toastElement) { + fireEvent.mouseEnter(toastElement); + } + }); + + expect(container.querySelector(pausedTimerSelector)).not.toBeNull(); + + act(() => { + if (toastElement) { + fireEvent.mouseLeave(toastElement); + } + }); + + expect(container.querySelector(runningTimerSelector)).not.toBeNull(); + }); + + it('should pause on window blur', () => { + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, timeout: 1, pauseOnWindowBlur: true }; + const { container } = render(ToastContainer); + + const toastElement = container.querySelector(`.${toastClassNames.root}`); + expect(toastElement).not.toBeNull(); + act(() => { + if (toastElement) { + fireEvent.animationEnd(toastElement); + } + }); + + expect(container.querySelector(runningTimerSelector)).not.toBeNull(); + + act(() => { + fireEvent.blur(window); + }); + + expect(container.querySelector(pausedTimerSelector)).not.toBeNull(); + + act(() => { + fireEvent.focus(window); + }); + + expect(container.querySelector(runningTimerSelector)).not.toBeNull(); + }); + + it('should render different timer on update', () => { + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, timeout: 1 }; + const { container, rerender } = render(ToastContainer); + + const firstTimer = container.querySelector(pausedTimerSelector); + expect(firstTimer).not.toBeNull(); + + toastProps.updateId++; + rerender(ToastContainer); + + const secondTimer = container.querySelector(pausedTimerSelector); + expect(firstTimer).not.toBe(secondTimer); + }); +}); diff --git a/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.tsx b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.tsx new file mode 100644 index 00000000000000..1b12bf79a9ca23 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { useToastContainer_unstable } from './useToastContainer'; +import { renderToastContainer_unstable } from './renderToastContainer'; +import { useToastContainerStyles_unstable } from './useToastContainerStyles.styles'; +import type { ToastContainerProps } from './ToastContainer.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { useToastContainerContextValues_unstable } from './useToastContainerContextValues'; + +/** + * ToastContainer component + */ +export const ToastContainer: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToastContainer_unstable(props, ref); + + useToastContainerStyles_unstable(state); + return renderToastContainer_unstable(state, useToastContainerContextValues_unstable(state)); +}); + +ToastContainer.displayName = 'ToastContainer'; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.types.ts b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.types.ts new file mode 100644 index 00000000000000..1f9540e57299a4 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.types.ts @@ -0,0 +1,36 @@ +import * as React from 'react'; +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; +import { Announce } from '../AriaLive/AriaLive.types'; +import { Toast as VanillaToast } from '../../state'; +import { ToastContextValue } from '../../contexts/toastContext'; +import { TimerProps } from '../Timer/Timer'; + +export type ToastContainerContextValues = { + toast: ToastContextValue; +}; + +export type ToastContainerSlots = { + root: NonNullable>; + timer: NonNullable>; +}; + +/** + * ToastContainer Props + */ +export type ToastContainerProps = ComponentProps> & + VanillaToast & { + visible: boolean; + announce: Announce; + }; + +/** + * State used in rendering ToastContainer + */ +export type ToastContainerState = ComponentState & + Pick & { + transitionTimeout: number; + timerTimeout: number; + running: boolean; + onTransitionEntering: () => void; + nodeRef: React.Ref; + }; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/__snapshots__/ToastContainer.test.tsx.snap b/packages/react-components/react-toast/src/components/ToastContainer/__snapshots__/ToastContainer.test.tsx.snap new file mode 100644 index 00000000000000..d7709d893913ab --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/__snapshots__/ToastContainer.test.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToastContainer renders a default state 1`] = ` +
+
+ Default ToastContainer +
+
+`; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/index.ts b/packages/react-components/react-toast/src/components/ToastContainer/index.ts new file mode 100644 index 00000000000000..01a852c24989ac --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/index.ts @@ -0,0 +1,6 @@ +export * from './ToastContainer'; +export * from './ToastContainer.types'; +export * from './renderToastContainer'; +export * from './useToastContainer'; +export * from './useToastContainerStyles.styles'; +export * from './useToastContainerContextValues'; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/renderToastContainer.tsx b/packages/react-components/react-toast/src/components/ToastContainer/renderToastContainer.tsx new file mode 100644 index 00000000000000..ab13cae7610e10 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/renderToastContainer.tsx @@ -0,0 +1,36 @@ +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import { Transition } from 'react-transition-group'; +import type { ToastContainerState, ToastContainerSlots, ToastContainerContextValues } from './ToastContainer.types'; +import { ToastContextProvider } from '../../contexts/toastContext'; + +/** + * Render the final JSX of ToastContainer + */ +export const renderToastContainer_unstable = ( + state: ToastContainerState, + contextValues: ToastContainerContextValues, +) => { + const { onTransitionEntering, visible, transitionTimeout, remove, nodeRef } = state; + const { slots, slotProps } = getSlotsNext(state); + + return ( + + + + + + + ); +}; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts new file mode 100644 index 00000000000000..0896334b207adc --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts @@ -0,0 +1,94 @@ +import * as React from 'react'; +import { + getNativeElementProps, + useMergedRefs, + ExtractSlotProps, + Slot, + useEventCallback, + resolveShorthand, +} from '@fluentui/react-utilities'; +import type { ToastContainerProps, ToastContainerState } from './ToastContainer.types'; +import { useToast } from '../../state'; +import { Timer, TimerProps } from '../Timer/Timer'; + +/** + * Create the state required to render ToastContainer. + * + * The returned state can be modified with hooks such as useToastContainerStyles_unstable, + * before being passed to renderToastContainer_unstable. + * + * @param props - props from this instance of ToastContainer + * @param ref - reference to root HTMLElement of ToastContainer + */ +export const useToastContainer_unstable = ( + props: ToastContainerProps, + ref: React.Ref, +): ToastContainerState => { + const { + visible, + children, + close, + remove, + updateId, + announce, + data, + timeout: timerTimeout, + politeness, + ...rest + } = props; + const { play, running, toastRef } = useToast({ ...props, content: children }); + + React.useEffect(() => { + if (visible) { + announce(toastRef.current?.textContent ?? '', { politeness }); + } + }, [announce, politeness, toastRef, visible, updateId]); + + // It's impossible to animate to height: auto in CSS, the actual pixel value must be known + // Get the height of the toast before animation styles have been applied and set a CSS + // variable with its height. The CSS variable will be used by the styles + const onTransitionEntering = () => { + if (!toastRef.current) { + return; + } + + const element = toastRef.current; + element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`); + }; + + // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController + const userRootSlot = (data as { root?: ExtractSlotProps> }).root; + + const onAnimationEnd = useEventCallback((e: React.AnimationEvent) => { + // start toast once it's fully animated in + play(); + userRootSlot?.onAnimationEnd?.(e); + }); + + return { + components: { + timer: Timer, + root: 'div', + }, + timer: resolveShorthand( + { key: updateId, onTimeout: close, running, timeout: timerTimeout ?? -1 }, + { required: true }, + ), + root: getNativeElementProps('div', { + ref: useMergedRefs(ref, toastRef), + children, + ...rest, + ...userRootSlot, + onAnimationEnd, + }), + timerTimeout, + transitionTimeout: 500, + running, + visible, + remove, + close, + onTransitionEntering, + updateId, + nodeRef: toastRef, + }; +}; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts new file mode 100644 index 00000000000000..7ea8809573013b --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { ToastContainerContextValues, ToastContainerState } from './ToastContainer.types'; + +export function useToastContainerContextValues_unstable(state: ToastContainerState): ToastContainerContextValues { + const { close } = state; + + const toastContext = React.useMemo( + () => ({ + close, + }), + [close], + ); + + return { + toast: toastContext, + }; +} diff --git a/packages/react-components/react-toast/src/components/Toast.styles.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts similarity index 57% rename from packages/react-components/react-toast/src/components/Toast.styles.ts rename to packages/react-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts index 23ae5f6a4dee36..e90e56c74d777e 100644 --- a/packages/react-components/react-toast/src/components/Toast.styles.ts +++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts @@ -1,19 +1,26 @@ -/** - * ⚠️ This is temporary and WILL be removed - */ - -import { makeStyles, shorthands } from '@griffel/react'; +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; +import type { ToastContainerSlots, ToastContainerState } from './ToastContainer.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; -export const useToastStyles = makeStyles({ - toast: { - pointerEvents: 'all', +export const toastClassNames: SlotClassNames = { + root: 'fui-ToastContainer', + timer: 'fui-ToastContainer__timer', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { boxSizing: 'border-box', marginTop: '16px', minHeight: '44px', + pointerEvents: 'all', ...shorthands.borderRadius(tokens.borderRadiusMedium), '--fui-toast-height': '44px', }, + enter: { animationDuration: '200ms, 400ms', animationDelay: '0ms, 200ms', @@ -66,3 +73,18 @@ export const useToastStyles = makeStyles({ ], }, }); + +/** + * Apply styling to the ToastContainer slots based on the state + */ +export const useToastContainerStyles_unstable = (state: ToastContainerState): ToastContainerState => { + const styles = useStyles(); + state.root.className = mergeClasses( + toastClassNames.root, + state.visible ? styles.enter : styles.exit, + styles.root, + state.root.className, + ); + + return state; +}; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.test.tsx b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.test.tsx new file mode 100644 index 00000000000000..bba43a6b1d209c --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { ToastFooter } from './ToastFooter'; +import { isConformant } from '../../testing/isConformant'; + +describe('ToastFooter', () => { + isConformant({ + Component: ToastFooter, + displayName: 'ToastFooter', + }); + + it('renders a default state', () => { + const result = render(Default ToastFooter); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.tsx b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.tsx new file mode 100644 index 00000000000000..153b0139f50313 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useToastFooter_unstable } from './useToastFooter'; +import { renderToastFooter_unstable } from './renderToastFooter'; +import { useToastFooterStyles_unstable } from './useToastFooterStyles.styles'; +import type { ToastFooterProps } from './ToastFooter.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * ToastFooter component + */ +export const ToastFooter: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToastFooter_unstable(props, ref); + + useToastFooterStyles_unstable(state); + return renderToastFooter_unstable(state); +}); + +ToastFooter.displayName = 'ToastFooter'; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.types.ts b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.types.ts new file mode 100644 index 00000000000000..6bbdcc6459e10b --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.types.ts @@ -0,0 +1,15 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type ToastFooterSlots = { + root: Slot<'div'>; +}; + +/** + * ToastFooter Props + */ +export type ToastFooterProps = ComponentProps & {}; + +/** + * State used in rendering ToastFooter + */ +export type ToastFooterState = ComponentState; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/__snapshots__/ToastFooter.test.tsx.snap b/packages/react-components/react-toast/src/components/ToastFooter/__snapshots__/ToastFooter.test.tsx.snap new file mode 100644 index 00000000000000..42ae654e933d60 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/__snapshots__/ToastFooter.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToastFooter renders a default state 1`] = ` +
+
+ Default ToastFooter +
+
+`; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/index.ts b/packages/react-components/react-toast/src/components/ToastFooter/index.ts new file mode 100644 index 00000000000000..dfd6de50783477 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/index.ts @@ -0,0 +1,5 @@ +export * from './ToastFooter'; +export * from './ToastFooter.types'; +export * from './renderToastFooter'; +export * from './useToastFooter'; +export * from './useToastFooterStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/renderToastFooter.tsx b/packages/react-components/react-toast/src/components/ToastFooter/renderToastFooter.tsx new file mode 100644 index 00000000000000..23c5e5674c1149 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/renderToastFooter.tsx @@ -0,0 +1,15 @@ +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import type { ToastFooterState, ToastFooterSlots } from './ToastFooter.types'; + +/** + * Render the final JSX of ToastFooter + */ +export const renderToastFooter_unstable = (state: ToastFooterState) => { + const { slots, slotProps } = getSlotsNext(state); + + return ; +}; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.ts b/packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.ts new file mode 100644 index 00000000000000..bc6454c2f4fff7 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.ts @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { getNativeElementProps } from '@fluentui/react-utilities'; +import type { ToastFooterProps, ToastFooterState } from './ToastFooter.types'; + +/** + * Create the state required to render ToastFooter. + * + * The returned state can be modified with hooks such as useToastFooterStyles_unstable, + * before being passed to renderToastFooter_unstable. + * + * @param props - props from this instance of ToastFooter + * @param ref - reference to root HTMLElement of ToastFooter + */ +export const useToastFooter_unstable = (props: ToastFooterProps, ref: React.Ref): ToastFooterState => { + return { + components: { + root: 'div', + }, + root: getNativeElementProps('div', { + ref, + ...props, + }), + }; +}; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/useToastFooterStyles.styles.ts b/packages/react-components/react-toast/src/components/ToastFooter/useToastFooterStyles.styles.ts new file mode 100644 index 00000000000000..d3161b0cf2c316 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/useToastFooterStyles.styles.ts @@ -0,0 +1,31 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import type { ToastFooterSlots, ToastFooterState } from './ToastFooter.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; + +export const toastFooterClassNames: SlotClassNames = { + root: 'fui-ToastFooter', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + paddingTop: '16px', + gridColumnStart: 2, + gridColumnEnd: 3, + display: 'flex', + alignItems: 'center', + ...shorthands.gap('14px'), + }, +}); + +/** + * Apply styling to the ToastFooter slots based on the state + */ +export const useToastFooterStyles_unstable = (state: ToastFooterState): ToastFooterState => { + const styles = useStyles(); + state.root.className = mergeClasses(toastFooterClassNames.root, styles.root, state.root.className); + + return state; +}; diff --git a/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.test.tsx b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.test.tsx new file mode 100644 index 00000000000000..b40ce5e663ac1c --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.test.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { ToastTitle } from './ToastTitle'; +import { isConformant } from '../../testing/isConformant'; +import { ToastTitleProps } from './ToastTitle.types'; +import { toastTitleClassNames } from './useToastTitleStyles.styles'; + +describe('ToastTitle', () => { + isConformant({ + Component: ToastTitle, + displayName: 'ToastTitle', + getTargetElement: result => { + const targetElement = result.container.querySelector(`.${toastTitleClassNames.root}`); + if (targetElement) { + return targetElement as HTMLElement; + } + + throw new Error(`Failed to get ToastTitle root ${toastTitleClassNames.root}`); + }, + disabledTests: [ + // TODO: having problems due to the fact root is Fragment + 'component-has-static-classnames-object', + ], + requiredProps: { + media: 'c', + action: 'a', + }, + }); + + it('renders a default state', () => { + const result = render(Default ToastTitle); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.tsx b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.tsx new file mode 100644 index 00000000000000..86e6d18dc34f4c --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useToastTitle_unstable } from './useToastTitle'; +import { renderToastTitle_unstable } from './renderToastTitle'; +import { useToastTitleStyles_unstable } from './useToastTitleStyles.styles'; +import type { ToastTitleProps } from './ToastTitle.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * ToastTitle component + */ +export const ToastTitle: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToastTitle_unstable(props, ref); + + useToastTitleStyles_unstable(state); + return renderToastTitle_unstable(state); +}); + +ToastTitle.displayName = 'ToastTitle'; diff --git a/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts new file mode 100644 index 00000000000000..e3b5f9f0ec1483 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts @@ -0,0 +1,23 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type ToastTitleSlots = { + root: NonNullable>; + media?: Slot<'div'>; + action?: Slot<'div'>; +}; + +/** + * ToastTitle Props + */ +export type ToastTitleProps = ComponentProps & { + /** + * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop + * overrides the intent prop + */ + intent?: 'info' | 'success' | 'error' | 'warning'; +}; + +/** + * State used in rendering ToastTitle + */ +export type ToastTitleState = ComponentState & Required>; diff --git a/packages/react-components/react-toast/src/components/ToastTitle/__snapshots__/ToastTitle.test.tsx.snap b/packages/react-components/react-toast/src/components/ToastTitle/__snapshots__/ToastTitle.test.tsx.snap new file mode 100644 index 00000000000000..48019b3e400ffe --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/__snapshots__/ToastTitle.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToastTitle renders a default state 1`] = ` +
+
+ Default ToastTitle +
+
+`; diff --git a/packages/react-components/react-toast/src/components/ToastTitle/index.ts b/packages/react-components/react-toast/src/components/ToastTitle/index.ts new file mode 100644 index 00000000000000..951ef82050691a --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/index.ts @@ -0,0 +1,5 @@ +export * from './ToastTitle'; +export * from './ToastTitle.types'; +export * from './renderToastTitle'; +export * from './useToastTitle'; +export * from './useToastTitleStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/ToastTitle/renderToastTitle.tsx b/packages/react-components/react-toast/src/components/ToastTitle/renderToastTitle.tsx new file mode 100644 index 00000000000000..aa0268ad3c4b2c --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/renderToastTitle.tsx @@ -0,0 +1,22 @@ +/** @jsxRuntime classic */ +/** @jsxFrag Fragment */ +/** @jsx createElement */ + +import { createElement, Fragment } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import type { ToastTitleState, ToastTitleSlots } from './ToastTitle.types'; + +/** + * Render the final JSX of ToastTitle + */ +export const renderToastTitle_unstable = (state: ToastTitleState) => { + const { slots, slotProps } = getSlotsNext(state); + + return ( + <> + {slots.media ? : null} + + {slots.action ? : null} + + ); +}; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/useToastAlert.tsx b/packages/react-components/react-toast/src/components/ToastTitle/useToastTitle.tsx similarity index 68% rename from packages/react-components/react-toast/src/components/ToastAlert/useToastAlert.tsx rename to packages/react-components/react-toast/src/components/ToastTitle/useToastTitle.tsx index d61d1ae69e8380..e25f93e846d321 100644 --- a/packages/react-components/react-toast/src/components/ToastAlert/useToastAlert.tsx +++ b/packages/react-components/react-toast/src/components/ToastTitle/useToastTitle.tsx @@ -3,19 +3,19 @@ import * as React from 'react'; import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; -import type { ToastAlertProps, ToastAlertState } from './ToastAlert.types'; +import type { ToastTitleProps, ToastTitleState } from './ToastTitle.types'; /** - * Create the state required to render ToastAlert. + * Create the state required to render ToastTitle. * - * The returned state can be modified with hooks such as useToastAlertStyles_unstable, - * before being passed to renderToastAlert_unstable. + * The returned state can be modified with hooks such as useToastTitleStyles_unstable, + * before being passed to renderToastTitle_unstable. * - * @param props - props from this instance of ToastAlert - * @param ref - reference to root HTMLElement of ToastAlert + * @param props - props from this instance of ToastTitle + * @param ref - reference to root HTMLElement of ToastTitle */ -export const useToastAlert_unstable = (props: ToastAlertProps, ref: React.Ref): ToastAlertState => { - const { appearance = 'primary', intent } = props; +export const useToastTitle_unstable = (props: ToastTitleProps, ref: React.Ref): ToastTitleState => { + const { intent = 'info' } = props; /** Determine the role and media to render based on the intent */ let defaultIcon; @@ -36,7 +36,6 @@ export const useToastAlert_unstable = (props: ToastAlertProps, ref: React.Ref = { + root: 'fui-ToastTitle', + media: 'fui-ToastTitle__media', + action: 'fui-ToastTitle__action', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'center', + gridColumnEnd: 3, + }, + + media: { + display: 'flex', + alignItems: 'center', + gridColumnEnd: 2, + paddingRight: '8px', + fontSize: '16px', + }, + + action: { + display: 'flex', + alignItems: 'center', + paddingLeft: '12px', + gridColumnEnd: -1, + color: tokens.colorBrandForeground1, + }, +}); + +/** + * Apply styling to the ToastTitle slots based on the state + */ +export const useToastTitleStyles_unstable = (state: ToastTitleState): ToastTitleState => { + const styles = useStyles(); + state.root.className = mergeClasses(toastTitleClassNames.root, styles.root, state.root.className); + + if (state.media) { + state.media.className = mergeClasses(toastTitleClassNames.media, styles.media, state.media.className); + } + + if (state.action) { + state.action.className = mergeClasses(toastTitleClassNames.action, styles.action, state.action.className); + } + + return state; +}; diff --git a/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx b/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx index c2b58c2b55becb..73b3a1946c17ea 100644 --- a/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx +++ b/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx @@ -3,7 +3,7 @@ import { ExtractSlotProps, Slot, getNativeElementProps, resolveShorthand } from import type { ToasterProps, ToasterState } from './Toaster.types'; import { TOAST_POSITIONS, ToastPosition, useToaster } from '../../state'; import { Announce } from '../AriaLive'; -import { Toast } from '../Toast'; +import { ToastContainer } from '../ToastContainer'; /** * Create the state required to render Toaster. @@ -22,9 +22,9 @@ export const useToaster_unstable = (props: ToasterProps): ToasterState => { resolveShorthand(toastsToRender.has(toastPosition) ? rootProps : null, { defaultProps: { children: toastsToRender.get(toastPosition)?.map(toast => ( - + {toast.content as React.ReactNode} - + )), 'data-toaster-position': toastPosition, // Explicitly casting because our slot types can't handle data attributes diff --git a/packages/react-components/react-toast/src/index.ts b/packages/react-components/react-toast/src/index.ts index 88682c72c42efe..b72bb14ab99da0 100644 --- a/packages/react-components/react-toast/src/index.ts +++ b/packages/react-components/react-toast/src/index.ts @@ -1,13 +1,5 @@ export { useToastController } from './state'; export type { ToastPosition, ToastId, ToastOffset } from './state'; -export { - ToastAlert, - useToastAlertStyles_unstable, - useToastAlert_unstable, - renderToastAlert_unstable, - toastAlertClassNames, -} from './ToastAlert'; -export type { ToastAlertProps, ToastAlertSlots, ToastAlertState } from './ToastAlert'; export { ToastTrigger } from './ToastTrigger'; export type { ToastTriggerChildProps, ToastTriggerProps, ToastTriggerState } from './ToastTrigger'; @@ -19,3 +11,32 @@ export { toasterClassNames, } from './Toaster'; export type { ToasterProps, ToasterState, ToasterSlots } from './Toaster'; +export { Toast, useToastStyles_unstable, useToast_unstable, renderToast_unstable, toastClassNames } from './Toast'; +export type { ToastProps, ToastState, ToastSlots } from './Toast'; + +export { + ToastTitle, + useToastTitleStyles_unstable, + useToastTitle_unstable, + renderToastTitle_unstable, + toastTitleClassNames, +} from './ToastTitle'; +export type { ToastTitleProps, ToastTitleState, ToastTitleSlots } from './ToastTitle'; + +export { + ToastBody, + useToastBodyStyles_unstable, + useToastBody_unstable, + renderToastBody_unstable, + toastBodyClassNames, +} from './ToastBody'; +export type { ToastBodyProps, ToastBodyState, ToastBodySlots } from './ToastBody'; + +export { + ToastFooter, + useToastFooterStyles_unstable, + useToastFooter_unstable, + renderToastFooter_unstable, + toastFooterClassNames, +} from './ToastFooter'; +export type { ToastFooterProps, ToastFooterState, ToastFooterSlots } from './ToastFooter'; diff --git a/packages/react-components/react-toast/src/state/types.ts b/packages/react-components/react-toast/src/state/types.ts index 58ef94dc0ece07..0a02ab35c660d9 100644 --- a/packages/react-components/react-toast/src/state/types.ts +++ b/packages/react-components/react-toast/src/state/types.ts @@ -1,3 +1,4 @@ +import type { Slot } from '@fluentui/react-utilities'; import { EVENTS } from './constants'; export type ToastId = string; @@ -5,7 +6,7 @@ export type ToasterId = string; export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'; -export interface ToastOptions { +export interface ToastOptions { toastId: ToastId; position: ToastPosition; content: unknown; @@ -15,6 +16,7 @@ export interface ToastOptions { toasterId: ToasterId | undefined; priority: number; politeness: 'assertive' | 'polite'; + data: TData; } export interface ToastOffsetObject { @@ -31,7 +33,7 @@ export interface ToasterOptions limit?: number; } -export interface Toast extends ToastOptions { +export interface Toast extends ToastOptions { close: () => void; remove: () => void; updateId: number; @@ -64,3 +66,13 @@ export type ToastListenerMap = { [EVENTS.dismissAll]: EventListener; [EVENTS.update]: EventListener; }; + +type RootSlot = Slot<'div'>; + +export interface DispatchToastOptions extends Partial> { + root?: RootSlot; +} + +export interface UpdateToastOptions extends UpdateToastEventDetail { + root?: RootSlot; +} diff --git a/packages/react-components/react-toast/src/state/useToastController.test.ts b/packages/react-components/react-toast/src/state/useToastController.test.ts new file mode 100644 index 00000000000000..052597ea1f3d01 --- /dev/null +++ b/packages/react-components/react-toast/src/state/useToastController.test.ts @@ -0,0 +1,68 @@ +import { renderHook } from '@testing-library/react-hooks'; +import { + dismissAllToasts as dismissAllToastsVanilla, + dismissToast as dismissToastVanilla, + dispatchToast as dispatchToastVanilla, + updateToast as updateToastVanilla, +} from './vanilla'; +import { useToastController } from './useToastController'; + +jest.mock('./vanilla'); + +describe('useToastController', () => { + beforeEach(() => { + jest.resetAllMocks(); + }); + + it('should set toaster id for all actions if passed as an argument', () => { + const toasterId = 'test'; + const { result } = renderHook(() => useToastController(toasterId)); + const { dismissAllToasts, dismissToast, dispatchToast, updateToast } = result.current; + + dismissAllToasts(); + dismissToast('toast'); + dispatchToast('toast'); + updateToast({ toastId: 'toast' }); + + expect(dismissAllToastsVanilla).toHaveBeenCalledTimes(1); + expect(dismissToastVanilla).toHaveBeenCalledTimes(1); + expect(dispatchToastVanilla).toHaveBeenCalledTimes(1); + expect(updateToastVanilla).toHaveBeenCalledTimes(1); + + expect(dismissAllToastsVanilla).toHaveBeenCalledWith(toasterId, document); + expect(dismissToastVanilla).toHaveBeenCalledWith(expect.anything(), toasterId, document); + expect(dispatchToastVanilla).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ toasterId }), + document, + ); + expect(updateToastVanilla).toHaveBeenCalledWith(expect.objectContaining({ toasterId }), document); + }); + + describe('dispatchToast', () => { + it('should pass root to data', () => { + const { result } = renderHook(() => useToastController()); + const { dispatchToast } = result.current; + + dispatchToast('toast', { root: { className: 'foo' } }); + expect(dispatchToastVanilla).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ data: { root: { className: 'foo' } } }), + document, + ); + }); + }); + + describe('updateTpast', () => { + it('should pass root to data', () => { + const { result } = renderHook(() => useToastController()); + const { updateToast } = result.current; + + updateToast({ toastId: 'foo', root: { className: 'foo' } }); + expect(updateToastVanilla).toHaveBeenCalledWith( + expect.objectContaining({ data: { root: { className: 'foo' } } }), + document, + ); + }); + }); +}); diff --git a/packages/react-components/react-toast/src/state/useToastController.ts b/packages/react-components/react-toast/src/state/useToastController.ts index 247466eb45f831..f290ea7cc26826 100644 --- a/packages/react-components/react-toast/src/state/useToastController.ts +++ b/packages/react-components/react-toast/src/state/useToastController.ts @@ -6,7 +6,7 @@ import { dismissAllToasts as dismissAllToastsVanilla, updateToast as updateToastVanilla, } from './vanilla'; -import { ToastId, ToastOptions, ToasterId, UpdateToastEventDetail } from './types'; +import { DispatchToastOptions, ToastId, ToasterId, UpdateToastOptions } from './types'; const noop = () => undefined; @@ -24,8 +24,8 @@ export function useToastController(toasterId?: ToasterId) { } return { - dispatchToast: (content: React.ReactNode, options?: Partial>) => { - dispatchToastVanilla(content, { ...options, toasterId }, targetDocument); + dispatchToast: (content: React.ReactNode, options?: DispatchToastOptions) => { + dispatchToastVanilla(content, { ...options, toasterId, data: { root: options?.root } }, targetDocument); }, dismissToast: (toastId: ToastId) => { dismissToastVanilla(toastId, toasterId, targetDocument); @@ -33,8 +33,8 @@ export function useToastController(toasterId?: ToasterId) { dismissAllToasts: () => { dismissAllToastsVanilla(toasterId, targetDocument); }, - updateToast: (options: UpdateToastEventDetail) => { - updateToastVanilla({ ...options, toasterId }, targetDocument); + updateToast: (options: UpdateToastOptions) => { + updateToastVanilla({ ...options, data: { root: options.root }, toasterId }, targetDocument); }, }; }, [targetDocument, toasterId]); diff --git a/packages/react-components/react-toast/src/state/vanilla/toaster.ts b/packages/react-components/react-toast/src/state/vanilla/toaster.ts index b134cbef363f3b..dca75b06f1e9b8 100644 --- a/packages/react-components/react-toast/src/state/vanilla/toaster.ts +++ b/packages/react-components/react-toast/src/state/vanilla/toaster.ts @@ -177,6 +177,7 @@ export class Toaster { updateId: 0, toasterId, dispatchedAt: Date.now(), + data: {}, }; assignDefined(toast, toastOptions); diff --git a/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx b/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx index d07144815244cb..f9e93cf785f8cc 100644 --- a/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert, ToasterProps } from '@fluentui/react-toast'; +import { Toaster, useToastController, Toast, ToastTitle, ToasterProps } from '@fluentui/react-toast'; import { useId, Link, makeStyles, shorthands } from '@fluentui/react-components'; const useStyles = makeStyles({ @@ -24,17 +24,21 @@ export const CustomAnnounce = () => { const { dispatchToast } = useToastController(toasterId); const dispatchAlert = () => dispatchToast( - Undo}> - Assertive toast {counter++} - , + + Undo}> + Assertive toast {counter++} + + , { politeness: 'assertive' }, ); const dispatchStatus = () => dispatchToast( - Undo}> - Polite toast {counter++} - , + + Undo}> + Polite toast {counter++} + + , { politeness: 'polite' }, ); diff --git a/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx b/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx index 1f72ea4f0f8044..9504287e88e721 100644 --- a/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx @@ -1,11 +1,17 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const CustomTimeout = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); - const notify = () => dispatchToast(Custom timeout 1000ms, { timeout: 1000 }); + const notify = () => + dispatchToast( + + Custom timeout 1000ms + , + { timeout: 1000 }, + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/Default.stories.tsx b/packages/react-components/react-toast/stories/Toast/Default.stories.tsx index 907b00606231dc..7f7ecf3cd34018 100644 --- a/packages/react-components/react-toast/stories/Toast/Default.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/Default.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, Toast, ToastTitle, ToastBody, ToastFooter } from '@fluentui/react-toast'; import { useId, Link } from '@fluentui/react-components'; export const Default = () => { @@ -7,9 +7,16 @@ export const Default = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - Undo}> - Email sent - , + + Undo}> + Email sent + + This is a toast body + + Action + Action + + , ); return ( diff --git a/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx b/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx index 8322d1f416a5f9..12474895120545 100644 --- a/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx @@ -1,11 +1,16 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const DefaultToastOptions = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); - const notify = () => dispatchToast(Options configured in Toaster); + const notify = () => + dispatchToast( + + Options configured in Toaster + , + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx b/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx index da66671714bd36..af71e386da1fc7 100644 --- a/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx @@ -1,11 +1,16 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const DismissAll = () => { const toasterId = useId('toaster'); const { dispatchToast, dismissAllToasts } = useToastController(toasterId); - const notify = () => dispatchToast('This is a toast); + const notify = () => + dispatchToast( + + 'This is a toast + , + ); const dismissAll = () => dismissAllToasts(); return ( diff --git a/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx b/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx index b2929fa4f43f22..24185f579b2519 100644 --- a/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx @@ -1,12 +1,18 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const DismissToast = () => { const toasterId = useId('toaster'); const toastId = useId('example'); const { dispatchToast, dismissToast } = useToastController(toasterId); - const notify = () => dispatchToast(This is a toast, { toastId }); + const notify = () => + dispatchToast( + + This is a toast + , + { toastId }, + ); const dismiss = () => dismissToast(toastId); return ( diff --git a/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx b/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx index 5f9a208ed3d012..7b1f5c773d2575 100644 --- a/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert, ToastTrigger } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastTrigger, Toast } from '@fluentui/react-toast'; import { useId, Link } from '@fluentui/react-components'; export const DismissToastWithAction = () => { @@ -7,16 +7,18 @@ export const DismissToastWithAction = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - - Dismiss - - } - > - Dismiss me - , + + + Dismiss + + } + > + Dismiss me + + , { timeout: -1 }, ); diff --git a/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx b/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx index 81fa6e345e9bb1..0fa9a6e8c2d06c 100644 --- a/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const MultipeToasters = () => { @@ -7,8 +7,18 @@ export const MultipeToasters = () => { const second = useId('toaster-2'); const { dispatchToast: dispatchFirstToast } = useToastController(first); const { dispatchToast: dispatchSecondToast } = useToastController(second); - const notifyFirst = () => dispatchFirstToast(First toaster); - const notifySecond = () => dispatchSecondToast(Second toaster); + const notifyFirst = () => + dispatchFirstToast( + + First toaster + , + ); + const notifySecond = () => + dispatchSecondToast( + + Second toaster + , + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx b/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx index e1b0221f77e2dc..5559bd7da1a48a 100644 --- a/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ToastPosition, Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { ToastPosition, Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const Offset = () => { @@ -7,9 +7,11 @@ export const Offset = () => { const { dispatchToast } = useToastController(toasterId); const notify = (position: ToastPosition) => dispatchToast( - - Offset: {horizontal}, {vertical} - , + + + Offset: {horizontal}, {vertical} + + , { position }, ); const [horizontal, setHorizontal] = React.useState(10); diff --git a/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx b/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx index 00a66d0b0d6f73..d56a06b87e6071 100644 --- a/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx @@ -1,11 +1,17 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const PauseOnHover = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); - const notify = () => dispatchToast(Hover me!, { pauseOnHover: true }); + const notify = () => + dispatchToast( + + Hover me! + , + { pauseOnHover: true }, + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx b/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx index d2cbb16a444da9..6ddfd6a3dff7a3 100644 --- a/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx @@ -1,12 +1,17 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const PauseOnWindowBlur = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); const notify = () => - dispatchToast(Click on another window!, { pauseOnWindowBlur: true }); + dispatchToast( + + Click on another window! + , + { pauseOnWindowBlur: true }, + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx b/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx index 2b8336dcc2d86f..210cb7556ed684 100644 --- a/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx @@ -1,12 +1,17 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastPosition, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastPosition, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const ToastPositions = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); const notify = (position: ToastPosition) => - dispatchToast(This toast is {position}, { position }); + dispatchToast( + + This toast is {position} + , + { position }, + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx b/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx index b1ab714c7f73ac..0c20ea998408b7 100644 --- a/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx @@ -1,11 +1,16 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const ToasterLimit = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); - const notify = () => dispatchToast(Limited to 3 toasts); + const notify = () => + dispatchToast( + + Limited to 3 toasts + , + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx b/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx index 2716e90cd5fe92..9bd15047953b16 100644 --- a/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx @@ -1,25 +1,45 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const UpdateToast = () => { + const toastId = useId('toast'); const toasterId = useId('toaster'); - const toastId = useId('example'); + const [dispatched, setDispatched] = React.useState(false); + const { dispatchToast, updateToast } = useToastController(toasterId); const notify = () => - dispatchToast(This toast never closes, { toastId, timeout: -1 }); + dispatchToast( + + This toast never closes + , + { toastId, timeout: -1 }, + ); const update = () => updateToast({ - content: This toast will close soon, + content: ( + + This toast will close soon + + ), toastId, - timeout: 1000, + timeout: 2000, }); + const onClick = () => { + if (dispatched) { + update(); + setDispatched(false); + } else { + notify(); + setDispatched(true); + } + }; + return ( <> - - + ); }; diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx index 5641f5100967c3..444f69bc1bdce4 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx @@ -233,7 +233,7 @@ OverflowItems.parameters = { story: [ 'This example uses the', 'Overflow component and utilities,', - 'Please refer to the documentation for achieve more complex scenarios.', + 'Please refer to the documentation to achieve more complex scenarios.', ].join('\n'), }, }, diff --git a/packages/react-components/react-utilities/src/utils/properties.ts b/packages/react-components/react-utilities/src/utils/properties.ts index c270f142615547..2f434f8afc95b3 100644 --- a/packages/react-components/react-utilities/src/utils/properties.ts +++ b/packages/react-components/react-utilities/src/utils/properties.ts @@ -19,6 +19,8 @@ const toObjectMap = (...items: (string[] | Record)[]) => { */ export const baseElementEvents = toObjectMap([ 'onAuxClick', + 'onAnimationEnd', + 'onAnimationStart', 'onCopy', 'onCut', 'onPaste', diff --git a/packages/react-conformance/CHANGELOG.json b/packages/react-conformance/CHANGELOG.json index 7d33074b38d1d1..7401d2d9594008 100644 --- a/packages/react-conformance/CHANGELOG.json +++ b/packages/react-conformance/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-conformance", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-conformance_v0.16.3", + "version": "0.16.3", + "comments": { + "patch": [ + { + "author": "tristan.watanabe@gmail.com", + "package": "@fluentui/react-conformance", + "commit": "59d477883786b3330c55ff6877c6bbed11d34bae", + "comment": "fix: testOptions custom classname prefix now works as intended." + } + ] + } + }, { "date": "Wed, 31 May 2023 07:38:39 GMT", "tag": "@fluentui/react-conformance_v0.16.2", diff --git a/packages/react-conformance/CHANGELOG.md b/packages/react-conformance/CHANGELOG.md index 6ec9ee69c98fc1..5664fcf9fcdad7 100644 --- a/packages/react-conformance/CHANGELOG.md +++ b/packages/react-conformance/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-conformance -This log was last generated on Wed, 31 May 2023 07:38:39 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [0.16.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-conformance_v0.16.3) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-conformance_v0.16.2..@fluentui/react-conformance_v0.16.3) + +### Patches + +- fix: testOptions custom classname prefix now works as intended. ([PR #28101](https://github.com/microsoft/fluentui/pull/28101) by tristan.watanabe@gmail.com) + ## [0.16.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-conformance_v0.16.2) Wed, 31 May 2023 07:38:39 GMT diff --git a/packages/react-conformance/package.json b/packages/react-conformance/package.json index 0f5cc5ef6de766..6291197e04e93a 100644 --- a/packages/react-conformance/package.json +++ b/packages/react-conformance/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-conformance", - "version": "0.16.2", + "version": "0.16.3", "description": "Customizable conformance testing utility for Fluent UI React components.", "main": "lib-commonjs/index.js", "typings": "lib-commonjs/index.d.ts", diff --git a/packages/react-date-time/CHANGELOG.json b/packages/react-date-time/CHANGELOG.json index 2f649a83476abc..1c2817bbe6e6da 100644 --- a/packages/react-date-time/CHANGELOG.json +++ b/packages/react-date-time/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-date-time", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-date-time_v8.7.92", + "version": "8.7.92", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-date-time", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/react-date-time_v8.7.91", diff --git a/packages/react-date-time/CHANGELOG.md b/packages/react-date-time/CHANGELOG.md index 6526146d3b0222..a74fcd38675c36 100644 --- a/packages/react-date-time/CHANGELOG.md +++ b/packages/react-date-time/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-date-time -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.7.92](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.92) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-date-time_v8.7.91..@fluentui/react-date-time_v8.7.92) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.7.91](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.91) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/react-date-time/package.json b/packages/react-date-time/package.json index 8a26b3dcce9dbe..0663d1f76be7a2 100644 --- a/packages/react-date-time/package.json +++ b/packages/react-date-time/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-date-time", - "version": "8.7.91", + "version": "8.7.92", "description": "Date and time related React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/set-version": "^8.2.11", "tslib": "^2.1.0" }, diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json index 6b2e574997b872..47495c3ae71905 100644 --- a/packages/react-docsite-components/CHANGELOG.json +++ b/packages/react-docsite-components/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-docsite-components", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-docsite-components_v8.12.18", + "version": "8.12.18", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + }, + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.95", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Fri, 02 Jun 2023 07:35:08 GMT", "tag": "@fluentui/react-docsite-components_v8.12.17", diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md index bc3d066d76dff7..9506ef42a4a733 100644 --- a/packages/react-docsite-components/CHANGELOG.md +++ b/packages/react-docsite-components/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-docsite-components -This log was last generated on Fri, 02 Jun 2023 07:35:08 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.12.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.12.18) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.12.17..@fluentui/react-docsite-components_v8.12.18) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.95 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.12.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.12.17) Fri, 02 Jun 2023 07:35:08 GMT diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json index 80c1c2d3cb6e87..4828610240cffa 100644 --- a/packages/react-docsite-components/package.json +++ b/packages/react-docsite-components/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-docsite-components", - "version": "8.12.17", + "version": "8.12.18", "description": "Fluent UI React components for building documentation sites.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -35,14 +35,14 @@ "react-dom": ">=16.8.0 <19.0.0" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/theme": "^2.6.32", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.11", "@fluentui/public-docsite-setup": "^0.3.21", "@fluentui/react-hooks": "^8.6.27", "@fluentui/set-version": "^8.2.11", - "@fluentui/react-monaco-editor": "^1.7.94", + "@fluentui/react-monaco-editor": "^1.7.95", "color-check": "0.0.2", "markdown-to-jsx": "^7.0.0", "office-ui-fabric-core": "^11.0.0", diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index a36907d58c2d68..b5d0eb32b9bf67 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -25,26 +25,26 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/azure-themes": "^8.6.12", + "@fluentui/azure-themes": "^8.6.13", "@fluentui/date-time-utilities": "^8.5.12", "@fluentui/dom-utilities": "^2.2.11", "@fluentui/example-data": "^8.4.11", "@fluentui/font-icons-mdl2": "^8.5.21", "@fluentui/foundation-legacy": "^8.2.41", "@fluentui/merge-styles": "^8.5.12", - "@fluentui/react": "^8.109.10", - "@fluentui/react-cards": "^0.205.91", - "@fluentui/react-charting": "^5.16.37", - "@fluentui/react-docsite-components": "^8.12.17", - "@fluentui/react-experiments": "^8.14.86", + "@fluentui/react": "^8.109.11", + "@fluentui/react-cards": "^0.205.92", + "@fluentui/react-charting": "^5.16.38", + "@fluentui/react-docsite-components": "^8.12.18", + "@fluentui/react-experiments": "^8.14.87", "@fluentui/react-file-type-icons": "^8.8.21", - "@fluentui/react-focus": "^8.8.27", + "@fluentui/react-focus": "^8.8.28", "@fluentui/react-hooks": "^8.6.27", "@fluentui/react-icons-mdl2": "^1.3.45", "@fluentui/scheme-utilities": "^8.3.33", "@fluentui/style-utilities": "^8.9.14", "@fluentui/theme": "^2.6.32", - "@fluentui/theme-samples": "^8.7.91", + "@fluentui/theme-samples": "^8.7.92", "@fluentui/utilities": "^8.13.16", "@microsoft/load-themed-styles": "^1.10.26", "d3-fetch": "3.0.1", diff --git a/packages/react-experiments/CHANGELOG.json b/packages/react-experiments/CHANGELOG.json index aab4128c663eb6..2bc4ae4e0770dd 100644 --- a/packages/react-experiments/CHANGELOG.json +++ b/packages/react-experiments/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-experiments", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-experiments_v8.14.87", + "version": "8.14.87", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/react-experiments_v8.14.86", diff --git a/packages/react-experiments/CHANGELOG.md b/packages/react-experiments/CHANGELOG.md index 36a82a2d7e13f4..3890258526a518 100644 --- a/packages/react-experiments/CHANGELOG.md +++ b/packages/react-experiments/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-experiments -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.14.87](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.87) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-experiments_v8.14.86..@fluentui/react-experiments_v8.14.87) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.14.86](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.86) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/react-experiments/package.json b/packages/react-experiments/package.json index 0cb84e1d8d24b7..3b4cdeaba8c259 100644 --- a/packages/react-experiments/package.json +++ b/packages/react-experiments/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-experiments", - "version": "8.14.86", + "version": "8.14.87", "description": "Experimental React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -39,7 +39,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/theme": "^2.6.32", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.11", diff --git a/packages/react-focus/package.json b/packages/react-focus/package.json index 2654af46b007dd..b961007ffda683 100644 --- a/packages/react-focus/package.json +++ b/packages/react-focus/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-focus", - "version": "8.8.27", + "version": "8.8.28", "description": "Focus helpers to be used in React applications.", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json index c7f6824ef8b867..883da66ff7478f 100644 --- a/packages/react-monaco-editor/CHANGELOG.json +++ b/packages/react-monaco-editor/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-monaco-editor", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.95", + "version": "1.7.95", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + }, + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.16.38", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Fri, 02 Jun 2023 07:35:08 GMT", "tag": "@fluentui/react-monaco-editor_v1.7.94", diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md index f86b8f768601a2..8ccd4d8aeae3f3 100644 --- a/packages/react-monaco-editor/CHANGELOG.md +++ b/packages/react-monaco-editor/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-monaco-editor -This log was last generated on Fri, 02 Jun 2023 07:35:08 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [1.7.95](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.95) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.94..@fluentui/react-monaco-editor_v1.7.95) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) +- Bump @fluentui/react-charting to v5.16.38 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [1.7.94](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.94) Fri, 02 Jun 2023 07:35:08 GMT diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json index e8582518924e62..2e1047240438b1 100644 --- a/packages/react-monaco-editor/package.json +++ b/packages/react-monaco-editor/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-monaco-editor", - "version": "1.7.94", + "version": "1.7.95", "description": "Live React example editing using monaco", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -30,12 +30,12 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.11", "@fluentui/monaco-editor": "^1.3.11", "@fluentui/react-hooks": "^8.6.27", - "@fluentui/react-charting": "^5.16.37", + "@fluentui/react-charting": "^5.16.38", "raw-loader": "4.0.2", "react-syntax-highlighter": "^10.1.3", "tslib": "^2.1.0" diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json index 0122a7123d0058..30ed24dc06d1df 100644 --- a/packages/react/CHANGELOG.json +++ b/packages/react/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:24 GMT", + "tag": "@fluentui/react_v8.109.11", + "version": "8.109.11", + "comments": { + "patch": [ + { + "author": "sarah.higley@microsoft.com", + "package": "@fluentui/react", + "commit": "0868df85405025c1488c8b0f8285ead56c379626", + "comment": "fix: Dropdown hover high contrast mode colors" + }, + { + "author": "mgodbolt@microsoft.com", + "package": "@fluentui/react", + "commit": "4a9f03c96b04bd9cca11b7718a3f7f60bf78d2ee", + "comment": "MessageBar: Add SmallScreenSelector styles to use grid layout to properly place buttons" + }, + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/react-focus to v8.8.28", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/react_v8.109.10", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 90cf72274bac1e..3bc8a5839b3b0d 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:24 GMT and should not be manually modified. +## [8.109.11](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.109.11) + +Mon, 05 Jun 2023 07:37:24 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react_v8.109.10..@fluentui/react_v8.109.11) + +### Patches + +- fix: Dropdown hover high contrast mode colors ([PR #27306](https://github.com/microsoft/fluentui/pull/27306) by sarah.higley@microsoft.com) +- MessageBar: Add SmallScreenSelector styles to use grid layout to properly place buttons ([PR #28100](https://github.com/microsoft/fluentui/pull/28100) by mgodbolt@microsoft.com) +- Bump @fluentui/react-focus to v8.8.28 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.109.10](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.109.10) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/react/package.json b/packages/react/package.json index 811aa987fe2068..b20b773395b5de 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react", - "version": "8.109.10", + "version": "8.109.11", "description": "Reusable React components for building web experiences.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -51,7 +51,7 @@ "@fluentui/foundation-legacy": "^8.2.41", "@fluentui/font-icons-mdl2": "^8.5.21", "@fluentui/merge-styles": "^8.5.12", - "@fluentui/react-focus": "^8.8.27", + "@fluentui/react-focus": "^8.8.28", "@fluentui/react-hooks": "^8.6.27", "@fluentui/react-portal-compat-context": "^9.0.6", "@fluentui/react-window-provider": "^2.2.15", diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 16ef8a98243bdb..360e12ad87c578 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -22,13 +22,13 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/theme": "^2.6.32", "@storybook/addon-knobs": "6.4.0", "@storybook/addon-essentials": "6.5.15", "@storybook/addons": "6.5.15", - "@fluentui/azure-themes": "^8.6.12", - "@fluentui/theme-samples": "^8.7.91", + "@fluentui/azure-themes": "^8.6.13", + "@fluentui/theme-samples": "^8.7.92", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/theme-samples/CHANGELOG.json b/packages/theme-samples/CHANGELOG.json index 774e87035b561b..febd5c5ec1347a 100644 --- a/packages/theme-samples/CHANGELOG.json +++ b/packages/theme-samples/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/theme-samples", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/theme-samples_v8.7.92", + "version": "8.7.92", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/theme-samples", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/theme-samples_v8.7.91", diff --git a/packages/theme-samples/CHANGELOG.md b/packages/theme-samples/CHANGELOG.md index 3e38e7bd28129f..7f76e75355718a 100644 --- a/packages/theme-samples/CHANGELOG.md +++ b/packages/theme-samples/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/theme-samples -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.7.92](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.92) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme-samples_v8.7.91..@fluentui/theme-samples_v8.7.92) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.7.91](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.91) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/theme-samples/package.json b/packages/theme-samples/package.json index ce3e04c7e4b619..96e3bc960faf2d 100644 --- a/packages/theme-samples/package.json +++ b/packages/theme-samples/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/theme-samples", - "version": "8.7.91", + "version": "8.7.92", "description": "Sample themes for use with Fabric components.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/set-version": "^8.2.11", "@fluentui/scheme-utilities": "^8.3.33", "tslib": "^2.1.0"