Merge branch 'master' into jackieg/azuretheme-messagebarstatus

.github/CODEOWNERS

@@ -228,18 +228,18 @@ packages/react-components/react-tree @microsoft/teams-prg
 packages/react-components/react-virtualizer @microsoft/xc-uxe @Mitch-At-Work
 packages/react-components/react-skeleton @microsoft/cxe-red
 packages/tokens @microsoft/teams-prg
-packages/react-components/react-tags @microsoft/cxe-coastal @microsoft/teams-prg
+packages/react-components/react-tags-preview @microsoft/cxe-coastal @microsoft/teams-prg
 packages/react-components/react-data-grid-react-window @microsoft/teams-prg
 packages/react-components/react-migration-v0-v9 @microsoft/teams-prg
 packages/react-components/react-datepicker-compat @microsoft/cxe-red @sopranopillow @khmakoto
 packages/react-components/react-migration-v8-v9 @microsoft/cxe-red @microsoft/cxe-coastal @geoffcoxmsft
-packages/react-components/react-breadcrumb @microsoft/cxe-prg
+packages/react-components/react-breadcrumb-preview @microsoft/cxe-prg
 packages/react-components/react-drawer @microsoft/cxe-prg
 packages/react-components/react-storybook-addon-codesandbox @microsoft/fluentui-react-build
 packages/react-components/babel-preset-storybook-full-source @microsoft/fluentui-react-build
 packages/react-components/react-jsx-runtime @microsoft/teams-prg
 packages/react-components/react-toast @microsoft/teams-prg
-packages/react-components/react-search @microsoft/cxe-coastal
+packages/react-components/react-search-preview @microsoft/cxe-coastal
 packages/react-components/react-colorpicker-compat @microsoft/cxe-red @sopranopillow
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 

apps/perf-test-react-components/package.json

@@ -19,14 +19,14 @@
   },
   "dependencies": {
     "@fluentui/scripts-perf-test-flamegrill": "*",
-    "@fluentui/react-avatar": "^9.5.11",
-    "@fluentui/react-button": "^9.3.22",
-    "@fluentui/react-field": "^9.1.10",
-    "@fluentui/react-infobutton": "9.0.0-beta.40",
-    "@fluentui/react-persona": "^9.2.21",
-    "@fluentui/react-provider": "^9.7.8",
-    "@fluentui/react-spinbutton": "^9.2.20",
-    "@fluentui/react-theme": "^9.1.9",
+    "@fluentui/react-avatar": "*",
+    "@fluentui/react-button": "*",
+    "@fluentui/react-field": "*",
+    "@fluentui/react-infobutton": "9.0.0-beta.42",
+    "@fluentui/react-persona": "*",
+    "@fluentui/react-provider": "*",
+    "@fluentui/react-spinbutton": "*",
+    "@fluentui/react-theme": "*",
     "@griffel/core": "^1.11.0",
     "@microsoft/load-themed-styles": "^1.10.26",
     "react": "17.0.2",

apps/perf-test/package.json

@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@fluentui/scripts-perf-test-flamegrill": "*",
-    "@fluentui/example-data": "^8.4.11",
-    "@fluentui/react": "^8.110.8",
+    "@fluentui/example-data": "*",
+    "@fluentui/react": "*",
     "@microsoft/load-themed-styles": "^1.10.26",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-resources/package.json

@@ -27,22 +27,22 @@
     "update-snapshots": "just-scripts jest -u"
   },
   "devDependencies": {
-    "@fluentui/api-docs": "^8.2.11",
+    "@fluentui/api-docs": "*",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-monorepo": "*",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.8",
-    "@fluentui/react-examples": "^8.34.4",
+    "@fluentui/react": "*",
+    "@fluentui/react-examples": "*",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.6.22",
-    "@fluentui/react-docsite-components": "^8.12.30",
-    "@fluentui/font-icons-mdl2": "^8.5.23",
-    "@fluentui/set-version": "^8.2.11",
-    "@fluentui/theme-samples": "^8.7.101",
-    "@fluentui/react-monaco-editor": "^1.7.107",
+    "@fluentui/azure-themes": "*",
+    "@fluentui/react-docsite-components": "*",
+    "@fluentui/font-icons-mdl2": "*",
+    "@fluentui/set-version": "*",
+    "@fluentui/theme-samples": "*",
+    "@fluentui/react-monaco-editor": "*",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-v9/.storybook/main.js

@@ -12,9 +12,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
     '../src/**/*.stories.mdx',
     '../src/**/*.stories.@(ts|tsx)',
     ...getPackageStoriesGlob({ packageName: '@fluentui/react-components', callerPath: __dirname }),
-    '../../../packages/react-components/react-migration-v0-v9/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
-    '../../../packages/react-components/react-migration-v8-v9/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
-    '../../../packages/react-components/react-datepicker-compat/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
+    ...getPackageStoriesGlob({ packageName: '@fluentui/public-docsite-v9', callerPath: __dirname }),
   ],
   staticDirs: ['../public'],
   addons: [...rootMain.addons],

apps/public-docsite-v9/package.json

@@ -23,16 +23,18 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-datepicker-compat": "^0.1.11",
-    "@fluentui/react-migration-v8-v9": "^9.3.6",
-    "@fluentui/react-migration-v0-v9": "^9.0.9",
-    "@fluentui/react": "^8.110.8",
-    "@fluentui/react-northstar": "^0.66.4",
-    "@fluentui/react-icons-northstar": "^0.66.4",
-    "@fluentui/react-components": "^9.25.1",
-    "@fluentui/react-storybook-addon": "^0.1.0",
-    "@fluentui/react-storybook-addon-codesandbox": "^0.1.0",
-    "@fluentui/theme-designer": "^9.0.0",
+    "@fluentui/react-breadcrumb-preview": "*",
+    "@fluentui/react-datepicker-compat": "*",
+    "@fluentui/react-migration-v8-v9": "*",
+    "@fluentui/react-migration-v0-v9": "*",
+    "@fluentui/react": "*",
+    "@fluentui/react-northstar": "*",
+    "@fluentui/react-icons-northstar": "*",
+    "@fluentui/react-components": "*",
+    "@fluentui/react-storybook-addon": "*",
+    "@fluentui/react-storybook-addon-codesandbox": "*",
+    "@fluentui/theme-designer": "*",
+    "@fluentui/react-search-preview": "*",
     "@griffel/react": "^1.5.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx

@@ -59,8 +59,6 @@ See [Migrate positioning props](?path=/docs/concepts-migrating-from-v0-positioni
 
 Here's a [codesandbox](https://codesandbox.io/s/popup-migration-ccodmt?file=/example.js) comparing v0 Popup and v9 Popover.
 
----
-
 ## Migrate content and contentRef
 
 `contentRef` can be replaced by React ref on `PopoverSurface`.
@@ -126,3 +124,23 @@ export const useStyles = makeStyles({
 ```
 
 ⚠️ **If this is your first time migrating style overrides**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page).
+
+### Nested popups
+
+If you have nested popups, and migrate to v9 inner popup first, you might have a problem with handling of `Escape` key.
+
+To prevent this problem you can use `onKeyDown` prop on `PopoverSurface` to prevent `Escape` key from bubbling up to the outer popup.
+
+```tsx
+<PopoverSurface
+  onKeyDown={e => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+    }
+  }}
+/>
+```
+
+You can check out [this codesandbox](https://codesandbox.io/s/goofy-snowflake-gjjq8f?file=/example.tsx:424-543) for an example.
+
+> Note: this workaround is not needed if you migrate outer popup first or if you migrate both popups at the same time.

apps/public-docsite/package.json

@@ -23,29 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/common-styles": "^1.2.32",
+    "@fluentui/common-styles": "*",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-monaco-editor": "^1.7.107",
+    "@fluentui/react-monaco-editor": "*",
     "write-file-webpack-plugin": "^4.1.0",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/font-icons-mdl2": "^8.5.23",
-    "@fluentui/public-docsite-resources": "^8.1.41",
-    "@fluentui/public-docsite-setup": "^0.3.21",
-    "@fluentui/react": "^8.110.8",
-    "@fluentui/react-docsite-components": "^8.12.30",
-    "@fluentui/react-examples": "^8.34.4",
-    "@fluentui/react-experiments": "^8.14.96",
-    "@fluentui/fluent2-theme": "^8.107.27",
-    "@fluentui/react-file-type-icons": "^8.9.3",
-    "@fluentui/react-icons-mdl2": "^1.3.47",
-    "@fluentui/react-icons-mdl2-branded": "^1.2.48",
-    "@fluentui/set-version": "^8.2.11",
-    "@fluentui/theme": "^2.6.34",
-    "@fluentui/theme-samples": "^8.7.101",
-    "@fluentui/utilities": "^8.13.18",
+    "@fluentui/font-icons-mdl2": "*",
+    "@fluentui/public-docsite-resources": "*",
+    "@fluentui/public-docsite-setup": "*",
+    "@fluentui/react": "*",
+    "@fluentui/react-docsite-components": "*",
+    "@fluentui/react-examples": "*",
+    "@fluentui/react-experiments": "*",
+    "@fluentui/fluent2-theme": "*",
+    "@fluentui/react-file-type-icons": "*",
+    "@fluentui/react-icons-mdl2": "*",
+    "@fluentui/react-icons-mdl2-branded": "*",
+    "@fluentui/set-version": "*",
+    "@fluentui/theme": "*",
+    "@fluentui/theme-samples": "*",
+    "@fluentui/utilities": "*",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",

apps/react-18-tests-v8/package.json

@@ -21,8 +21,8 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.8",
-    "@fluentui/react-hooks": "^8.6.29",
+    "@fluentui/react": "*",
+    "@fluentui/react-hooks": "*",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.6",
     "react": "18.2.0",

apps/react-18-tests-v9/package.json

@@ -19,7 +19,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.25.1",
+    "@fluentui/react-components": "*",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.6",
     "react": "18.2.0",

apps/recipes-react-components/package.json

@@ -16,12 +16,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.25.1",
+    "@fluentui/react-components": "*",
     "@fluentui/react-icons": "^2.0.203",
-    "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-provider": "^9.7.8",
-    "@fluentui/react-storybook-addon": "^0.1.0",
-    "@fluentui/react-storybook-addon-codesandbox": "^0.1.0",
+    "@fluentui/react-theme": "*",
+    "@fluentui/react-provider": "*",
+    "@fluentui/react-storybook-addon": "*",
+    "@fluentui/react-storybook-addon-codesandbox": "*",
     "@griffel/react": "^1.5.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/ssr-tests-v9/package.json

@@ -18,7 +18,7 @@
     "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.25.1"
+    "@fluentui/react-components": "*"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

apps/ssr-tests/package.json

@@ -13,10 +13,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react": "^8.110.8",
+    "@fluentui/react": "*",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/mocha": "7.0.2",
-    "@fluentui/public-docsite-resources": "^8.1.41",
+    "@fluentui/public-docsite-resources": "*",
     "mocha": "7.2.0",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"

apps/stress-test/package.json

@@ -10,10 +10,10 @@
     "type-check": "tsc -b tsconfig.type.json"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.8",
-    "@fluentui/react-components": "^9.25.1",
+    "@fluentui/react": "*",
+    "@fluentui/react-components": "*",
     "@fluentui/react-icons": "^2.0.203",
-    "@fluentui/web-components": "^2.5.15",
+    "@fluentui/web-components": "*",
     "@microsoft/fast-element": "^1.11.1",
     "afterframe": "1.0.2",
     "react": "17.0.2",

apps/theming-designer/package.json

@@ -19,13 +19,13 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.8",
-    "@fluentui/merge-styles": "^8.5.12",
-    "@fluentui/react-docsite-components": "^8.12.30",
-    "@fluentui/foundation-legacy": "^8.2.43",
-    "@fluentui/scheme-utilities": "^8.3.35",
-    "@fluentui/set-version": "^8.2.11",
-    "@fluentui/font-icons-mdl2": "^8.5.23",
+    "@fluentui/react": "*",
+    "@fluentui/merge-styles": "*",
+    "@fluentui/react-docsite-components": "*",
+    "@fluentui/foundation-legacy": "*",
+    "@fluentui/scheme-utilities": "*",
+    "@fluentui/set-version": "*",
+    "@fluentui/font-icons-mdl2": "*",
     "@microsoft/load-themed-styles": "^1.10.26",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/ts-minbar-test-react-components/package.json

@@ -5,7 +5,7 @@
   "description": "Testing Fluent UI React Components compatibility with Typescript 3.9",
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-components": "^9.25.1"
+    "@fluentui/react-components": "*"
   },
   "scripts": {
     "type-check": "tsc -p .",

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.110.8"
+    "@fluentui/react": "*"
   },
   "scripts": {
     "type-check": "tsc -p .",