Merge branch 'marcosmoura/feat/drawer-component' into marcosmoura/fea…

…t/drawer-light-dismiss-prop

* marcosmoura/feat/drawer-component: (51 commits)
  fix: upgrade react-dialog
  Doc: Add/Remove TreeItem and useFlatTree stories (microsoft#27515)
  applying package updates
  Fix accessibility labels for tree stories (microsoft#27443)
  fix: BasePickerListBelow aria-describedby with values (microsoft#27525)
  chore: Remove deprecated InputField, etc. shim components (microsoft#27492)
  [Feature]: allow aria-description attribute on v9 (microsoft#27478)
  feat(react-jsx-runtime): implements custom JSX pragma (microsoft#27472)
  chore: update generator to include "test-ssr" script (microsoft#27463)
  applying package updates
  fix: add "style" to exports field (microsoft#27274)
  applying package updates
  feat(react-datepicker-compat): Make package public (microsoft#27524)
  fix: react-combobox defines fallbackPositions for popup on small screens (microsoft#27521)
  fix: use tabster to focus on trigger, instead of manually invoking .focus (microsoft#27512)
  add cxe-red to react-shared-context ownership (microsoft#27296)
  docs: add props tables for all exported Popover controls (microsoft#27503)
  fix: Update FormFieldShim to work with Field context changes (microsoft#27436)
  Fix wrong state narration for multiple selected legends (microsoft#27429)
  add codeowners to theme designer v9 (microsoft#27311)
  ...

.github/CODEOWNERS

@@ -156,7 +156,7 @@ packages/react-icons-mdl2 @microsoft/cxe-red @microsoft/cxe-coastal
 packages/react-monaco-editor @microsoft/fluentui-v8-website
 packages/react-components/react-positioning @microsoft/teams-prg
 packages/react-components/react-overflow @microsoft/teams-prg
-packages/react-components/react-shared-contexts @microsoft/teams-prg
+packages/react-components/react-shared-contexts @microsoft/teams-prg @microsoft/cxe-red
 packages/react-components/react-storybook-addon @microsoft/cxe-prg
 packages/react-components/react-tabster @microsoft/teams-prg
 packages/react-components/react-theme @microsoft/teams-prg
@@ -212,7 +212,7 @@ packages/react-components/react-portal-compat @microsoft/teams-prg
 packages/react-components/react-alert @microsoft/teams-prg
 packages/react-components/react-portal-compat-context @microsoft/teams-prg
 packages/react-components/react-theme-sass @microsoft/teams-prg
-packages/react-components/theme-designer @microsoft/cxe-coastal
+packages/react-components/theme-designer @microsoft/cxe-coastal @ms-acalzaretto
 packages/react-components/global-context @microsoft/teams-prg
 packages/react-components/babel-preset-global-context @microsoft/teams-prg
 packages/react-components/react-table @microsoft/teams-prg
@@ -233,6 +233,7 @@ packages/react-components/react-breadcrumb @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
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 ## Components

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

@@ -20,13 +20,13 @@
   "dependencies": {
     "@fluentui/scripts-perf-test-flamegrill": "*",
     "@griffel/core": "^1.9.0",
-    "@fluentui/react-avatar": "^9.4.7",
-    "@fluentui/react-button": "^9.3.7",
-    "@fluentui/react-field": "9.0.0-alpha.29",
-    "@fluentui/react-infobutton": "9.0.0-beta.25",
-    "@fluentui/react-persona": "^9.2.6",
-    "@fluentui/react-provider": "^9.5.1",
-    "@fluentui/react-spinbutton": "^9.2.7",
+    "@fluentui/react-avatar": "^9.4.8",
+    "@fluentui/react-button": "^9.3.8",
+    "@fluentui/react-field": "9.0.0-beta.2",
+    "@fluentui/react-infobutton": "9.0.0-beta.26",
+    "@fluentui/react-persona": "^9.2.7",
+    "@fluentui/react-provider": "^9.5.2",
+    "@fluentui/react-spinbutton": "^9.2.9",
     "@fluentui/react-theme": "^9.1.7",
     "@microsoft/load-themed-styles": "^1.10.26",
     "react": "17.0.2",

apps/perf-test/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@fluentui/scripts-perf-test-flamegrill": "*",
     "@fluentui/example-data": "^8.4.7",
-    "@fluentui/react": "^8.107.1",
+    "@fluentui/react": "^8.107.5",
     "@microsoft/load-themed-styles": "^1.10.26",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-resources/package.json

@@ -34,15 +34,15 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.107.1",
+    "@fluentui/react": "^8.107.5",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.5.75",
-    "@fluentui/react-docsite-components": "^8.11.36",
+    "@fluentui/azure-themes": "^8.5.79",
+    "@fluentui/react-docsite-components": "^8.11.40",
     "@fluentui/font-icons-mdl2": "^8.5.13",
     "@fluentui/set-version": "^8.2.6",
-    "@fluentui/theme-samples": "^8.7.71",
-    "@fluentui/react-monaco-editor": "^1.7.71",
+    "@fluentui/theme-samples": "^8.7.75",
+    "@fluentui/react-monaco-editor": "^1.7.75",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-v9/package.json

@@ -22,13 +22,13 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-datepicker-compat": "0.0.0-alpha.0",
-    "@fluentui/react-migration-v8-v9": "^9.2.6",
+    "@fluentui/react-datepicker-compat": "0.0.0-beta.1",
+    "@fluentui/react-migration-v8-v9": "^9.2.8",
     "@fluentui/react-migration-v0-v9": "9.0.0-alpha.0",
-    "@fluentui/react": "^8.107.1",
+    "@fluentui/react": "^8.107.5",
     "@fluentui/react-northstar": "^0.66.4",
     "@fluentui/react-icons-northstar": "^0.66.4",
-    "@fluentui/react-components": "^9.18.7",
+    "@fluentui/react-components": "^9.18.9",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0",
     "@griffel/react": "^1.5.2",

apps/public-docsite/package.json

@@ -25,7 +25,7 @@
   "devDependencies": {
     "@fluentui/common-styles": "^1.2.22",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-monaco-editor": "^1.7.71",
+    "@fluentui/react-monaco-editor": "^1.7.75",
     "write-file-webpack-plugin": "^4.1.0",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
@@ -34,17 +34,17 @@
     "@fluentui/font-icons-mdl2": "^8.5.13",
     "@fluentui/public-docsite-resources": "^8.1.41",
     "@fluentui/public-docsite-setup": "^0.3.18",
-    "@fluentui/react": "^8.107.1",
-    "@fluentui/react-docsite-components": "^8.11.36",
+    "@fluentui/react": "^8.107.5",
+    "@fluentui/react-docsite-components": "^8.11.40",
     "@fluentui/react-examples": "^8.34.4",
-    "@fluentui/react-experiments": "^8.14.66",
-    "@fluentui/fluent2-theme": "^8.106.8",
+    "@fluentui/react-experiments": "^8.14.70",
+    "@fluentui/fluent2-theme": "^8.106.12",
     "@fluentui/react-file-type-icons": "^8.8.13",
     "@fluentui/react-icons-mdl2": "^1.3.37",
     "@fluentui/react-icons-mdl2-branded": "^1.2.38",
     "@fluentui/set-version": "^8.2.6",
     "@fluentui/theme": "^2.6.25",
-    "@fluentui/theme-samples": "^8.7.71",
+    "@fluentui/theme-samples": "^8.7.75",
     "@fluentui/utilities": "^8.13.9",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-core": "^11.0.0",

apps/public-docsite/src/pages/Overviews/ControlsPage/docs/windows/ControlsOverview.md

@@ -4,4 +4,4 @@ To build Fluent experiences on Windows using WinUI controls, please see our [Win
 
 ### Fluent UI React Native
 
-To build Fluent experiences on Windows using Fluent UI React Native, please see our [Cross-platform Controls page](#/controls/crossplatform).
+To build Fluent experiences on Windows using Fluent UI React Native, please see our [Cross-platform Controls page](#/controls/cross).

apps/public-docsite/src/pages/Overviews/GetStartedPage/docs/cross/GetStartedOverview.md

@@ -4,7 +4,7 @@ Fluent UI React Native is an [open-source](https://github.com/microsoft/fluentui
 
 Fluent UI React Native includes an expanding library of controls written in JavaScript. These controls implement the Fluent Design language and provide consistency across Microsoft experiences.
 
-Fluent UI React Native is still in the early stages of development, and currently only supports Windows and macOS components, with iOS and Android component support coming soon. Documentation for the controls is a work in progress. Some controls can be found in the <a href="#/controls/crossplatform">Controls section</a> of the site. To view the full list, see the [Fluent UI React Native Github source folder](https://github.com/microsoft/fluentui-react-native/tree/master/packages/components).
+Fluent UI React Native is still in the early stages of development, and currently only supports Windows and macOS components, with iOS and Android component support coming soon. Documentation for the controls is a work in progress. Some controls can be found in the <a href="#/controls/cross">Controls section</a> of the site. To view the full list, see the [Fluent UI React Native Github source folder](https://github.com/microsoft/fluentui-react-native/tree/master/packages/components).
 
 ### Start developing
 

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

@@ -21,7 +21,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.107.1",
+    "@fluentui/react": "^8.107.5",
     "@fluentui/react-hooks": "^8.6.20",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.6",

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

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

apps/recipes-react-components/package.json

@@ -16,10 +16,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.18.7",
+    "@fluentui/react-components": "^9.18.9",
     "@fluentui/react-icons": "^2.0.196",
     "@fluentui/react-theme": "^9.1.7",
-    "@fluentui/react-provider": "^9.5.1",
+    "@fluentui/react-provider": "^9.5.2",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0",
     "@griffel/react": "^1.5.2",

apps/ssr-tests-v9/package.json

@@ -20,7 +20,7 @@
     "type-check": "tsc -b tsconfig.json"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.18.7"
+    "@fluentui/react-components": "^9.18.9"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

apps/ssr-tests-v9/src/utils/helpers.ts

@@ -3,3 +3,9 @@ export function hrToSeconds(hrtime: ReturnType<typeof process.hrtime>): string {
 
   return raw.toFixed(2) + 's';
 }
+
+export function containsAriaDescriptionWarning(message: string): boolean {
+  return message.startsWith(
+    'Warning: Invalid aria prop %s on <%s> tag. For details, see https://reactjs.org/link/invalid-aria-props%s `aria-description`',
+  );
+}

apps/ssr-tests-v9/src/utils/visitPage.ts

@@ -1,6 +1,8 @@
 import type { Browser } from 'puppeteer';
 import { visitUrl } from '@fluentui/scripts-puppeteer';
 import { PROVIDER_ID } from './constants';
+import * as React from 'react';
+import { containsAriaDescriptionWarning } from './helpers';
 
 class RenderError extends Error {
   public name = 'RangeError';
@@ -14,9 +16,17 @@ export async function visitPage(browser: Browser, url: string) {
 
   page.on('console', message => {
     if (message.type() === 'error') {
+      const messageContent = message.text();
+
+      // Ignoring 'aria-description' warning from react 17 as it's a valid prop
+      // https://github.com/facebook/react/issues/21035
+      if (containsAriaDescriptionWarning(messageContent) && React.version.startsWith('17')) {
+        return;
+      }
+
       // Ignoring network errors as we have an interceptor that prevents loading everything except our JS bundle
-      if (!message.text().includes('net::ERR_FAILED')) {
-        error = new RenderError(message.text());
+      if (!messageContent.includes('net::ERR_FAILED')) {
+        error = new RenderError(messageContent);
       }
     }
   });

apps/ssr-tests/package.json

@@ -13,7 +13,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react": "^8.107.1",
+    "@fluentui/react": "^8.107.5",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/mocha": "7.0.2",
     "@fluentui/public-docsite-resources": "^8.1.41",

apps/stress-test/package.json

@@ -10,10 +10,10 @@
     "type-check": "tsc -b tsconfig.type.json"
   },
   "dependencies": {
-    "@fluentui/react": "^8.107.1",
-    "@fluentui/react-components": "^9.18.7",
+    "@fluentui/react": "^8.107.5",
+    "@fluentui/react-components": "^9.18.9",
     "@fluentui/react-icons": "^2.0.196",
-    "@fluentui/web-components": "^2.5.12",
+    "@fluentui/web-components": "^2.5.13",
     "@microsoft/fast-element": "^1.11.0",
     "afterframe": "1.0.2",
     "react": "17.0.2",

apps/theming-designer/package.json

@@ -19,9 +19,9 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.107.1",
+    "@fluentui/react": "^8.107.5",
     "@fluentui/merge-styles": "^8.5.7",
-    "@fluentui/react-docsite-components": "^8.11.36",
+    "@fluentui/react-docsite-components": "^8.11.40",
     "@fluentui/foundation-legacy": "^8.2.33",
     "@fluentui/scheme-utilities": "^8.3.26",
     "@fluentui/set-version": "^8.2.6",

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.18.7"
+    "@fluentui/react-components": "^9.18.9"
   },
   "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.107.1"
+    "@fluentui/react": "^8.107.5"
   },
   "scripts": {
     "type-check": "tsc -p .",

apps/vr-tests-react-components/package.json

@@ -20,48 +20,48 @@
     "@fluentui/scripts-storybook": "*"
   },
   "dependencies": {
-    "@fluentui/react-accordion": "^9.1.7",
-    "@fluentui/react-avatar": "^9.4.7",
-    "@fluentui/react-badge": "^9.1.7",
-    "@fluentui/react-button": "^9.3.7",
-    "@fluentui/react-card": "^9.0.5",
-    "@fluentui/react-checkbox": "^9.1.7",
-    "@fluentui/react-combobox": "^9.2.7",
-    "@fluentui/react-datepicker-compat": "0.0.0-alpha.0",
-    "@fluentui/react-dialog": "^9.4.3",
-    "@fluentui/react-divider": "^9.2.7",
-    "@fluentui/react-field": "9.0.0-alpha.29",
+    "@fluentui/react-accordion": "^9.1.8",
+    "@fluentui/react-avatar": "^9.4.8",
+    "@fluentui/react-badge": "^9.1.8",
+    "@fluentui/react-button": "^9.3.8",
+    "@fluentui/react-card": "^9.0.6",
+    "@fluentui/react-checkbox": "^9.1.9",
+    "@fluentui/react-combobox": "^9.2.9",
+    "@fluentui/react-datepicker-compat": "0.0.0-beta.1",
+    "@fluentui/react-dialog": "^9.5.1",
+    "@fluentui/react-divider": "^9.2.8",
+    "@fluentui/react-field": "9.0.0-beta.2",
     "@fluentui/react-icons": "^2.0.196",
-    "@fluentui/react-image": "^9.1.4",
-    "@fluentui/react-infobutton": "9.0.0-beta.25",
-    "@fluentui/react-input": "^9.4.7",
-    "@fluentui/react-label": "^9.1.7",
-    "@fluentui/react-link": "^9.0.33",
-    "@fluentui/react-menu": "^9.7.7",
-    "@fluentui/react-persona": "^9.2.6",
-    "@fluentui/react-popover": "^9.5.7",
-    "@fluentui/react-portal": "^9.2.4",
-    "@fluentui/react-positioning": "^9.5.8",
-    "@fluentui/react-progress": "^9.1.7",
-    "@fluentui/react-provider": "^9.5.1",
-    "@fluentui/react-radio": "^9.1.7",
-    "@fluentui/react-select": "^9.1.7",
+    "@fluentui/react-image": "^9.1.5",
+    "@fluentui/react-infobutton": "9.0.0-beta.26",
+    "@fluentui/react-input": "^9.4.9",
+    "@fluentui/react-label": "^9.1.8",
+    "@fluentui/react-link": "^9.0.34",
+    "@fluentui/react-menu": "^9.7.8",
+    "@fluentui/react-persona": "^9.2.7",
+    "@fluentui/react-popover": "^9.5.8",
+    "@fluentui/react-portal": "^9.2.5",
+    "@fluentui/react-positioning": "^9.5.9",
+    "@fluentui/react-progress": "^9.1.9",
+    "@fluentui/react-provider": "^9.5.2",
+    "@fluentui/react-radio": "^9.1.9",
+    "@fluentui/react-select": "^9.1.9",
     "@fluentui/react-shared-contexts": "^9.3.3",
-    "@fluentui/react-skeleton": "9.0.0-beta.6",
-    "@fluentui/react-slider": "^9.1.7",
-    "@fluentui/react-spinner": "^9.1.7",
-    "@fluentui/react-spinbutton": "^9.2.7",
+    "@fluentui/react-skeleton": "9.0.0-beta.8",
+    "@fluentui/react-slider": "^9.1.9",
+    "@fluentui/react-spinner": "^9.1.8",
+    "@fluentui/react-spinbutton": "^9.2.9",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0",
-    "@fluentui/react-switch": "^9.1.7",
-    "@fluentui/react-tabs": "^9.3.7",
-    "@fluentui/react-table": "^9.2.3",
-    "@fluentui/react-text": "^9.3.4",
-    "@fluentui/react-textarea": "^9.3.7",
+    "@fluentui/react-switch": "^9.1.9",
+    "@fluentui/react-tabs": "^9.3.9",
+    "@fluentui/react-table": "^9.2.5",
+    "@fluentui/react-text": "^9.3.5",
+    "@fluentui/react-textarea": "^9.3.9",
     "@fluentui/react-theme": "^9.1.7",
-    "@fluentui/react-tooltip": "^9.2.7",
-    "@fluentui/react-toolbar": "^9.1.7",
-    "@fluentui/react-utilities": "^9.7.3",
+    "@fluentui/react-tooltip": "^9.2.8",
+    "@fluentui/react-toolbar": "^9.1.9",
+    "@fluentui/react-utilities": "^9.7.4",
     "@griffel/react": "^1.5.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx

@@ -159,3 +159,23 @@ export const SizeExtraLarge = () => {
 SizeExtraLarge.storyName = 'size: extra-large';
 
 export const SizeExtraLargeRTL = getStoryVariant(SizeExtraLarge, RTL);
+
+export const WidthConstrained = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.group}>
+      <div className={styles.widthConstrained}>
+        <Badge>1</Badge>
+        <Badge icon={<CircleRegular />} />
+        <Badge>BADGE</Badge>
+        <Badge icon={<CircleRegular />}>BADGE</Badge>
+        <Badge icon={<CircleRegular />} iconPosition="after">
+          BADGE
+        </Badge>
+      </div>
+      <span className={styles.description}>Badges should not clip their content when space constrained.</span>
+    </div>
+  );
+};
+
+WidthConstrained.storyName = 'width constrained';