Merge branch 'feat/drawer-components' into feat/drawer-header

* feat/drawer-components: (81 commits) docs: remove TODO marks fix: remove conflict code leftover applying package updates microsoft#25730: TimePicker Default Value Fix, Controllable Usage, Example Updates (microsoft#26482) docs(react-datepicker-compat): Add description to README.md (microsoft#27677) Updated to use single hook selector (microsoft#27491) fix: Make border around Avatar's badge transparent using a mask (microsoft#27527) Disable focus on non-interactive elements (microsoft#27580) feat(react-drawer): implement "prevent close on click outside" feature (microsoft#27551) fix(react-datepicker-compat): Make onValidationError onValidationResult so the error is updated when there's no longer an error (microsoft#27655) Fix `@fluentui/react-portal-compat`: to be compatible with React 18 (microsoft#27577) chore: fix versions of @fluentui/react-datepicker-compat (microsoft#27666) applying package updates applying package updates Make line chart screen reader accessible (microsoft#27632) fix(react-examples): Improve keyboard navigation in ContextualMenu.CustomMenuList (microsoft#25172) docs(react-textarea): Update examples to use Field (microsoft#27644) bugfix(react-dialog): `DialogTitle` root as `h2` by default (microsoft#27555) applying package updates chore: restructure stories, add separate category for flat tree (microsoft#27586) ...
marcosmoura · Apr 25, 2023 · c1151a3 · c1151a3
2 parents b2237ea + b61d019
commit c1151a3
Show file tree

Hide file tree

Showing 642 changed files with 11,184 additions and 3,561 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -150,6 +150,7 @@ packages/react-components/react-conformance-griffel @microsoft/teams-prg
 packages/react-components/react-context-selector @microsoft/teams-prg
 packages/react-date-time @microsoft/cxe-red
 packages/react-docsite-components @microsoft/fluentui-v8-website
+packages/react-examples @microsoft/cxe-red @microsoft/cxe-coastal
 packages/react-file-type-icons @microsoft/cxe-red @jahnp @bigbadcapers
 packages/react-hooks @microsoft/cxe-red
 packages/react-icons-mdl2 @microsoft/cxe-red @microsoft/cxe-coastal

diff --git a/apps/perf-test-react-components/package.json b/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.8",
-    "@fluentui/react-button": "^9.3.8",
-    "@fluentui/react-field": "9.0.0",
-    "@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-avatar": "^9.4.10",
+    "@fluentui/react-button": "^9.3.10",
+    "@fluentui/react-field": "^9.1.1",
+    "@fluentui/react-infobutton": "9.0.0-beta.28",
+    "@fluentui/react-persona": "^9.2.9",
+    "@fluentui/react-provider": "^9.5.4",
+    "@fluentui/react-spinbutton": "^9.2.11",
     "@fluentui/react-theme": "^9.1.7",
     "@microsoft/load-themed-styles": "^1.10.26",
     "react": "17.0.2",

diff --git 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.7",
-    "@fluentui/react": "^8.107.5",
+    "@fluentui/react": "^8.108.2",
     "@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
@@ -34,15 +34,15 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.107.5",
+    "@fluentui/react": "^8.108.2",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.5.79",
-    "@fluentui/react-docsite-components": "^8.11.40",
+    "@fluentui/azure-themes": "^8.5.83",
+    "@fluentui/react-docsite-components": "^8.12.2",
     "@fluentui/font-icons-mdl2": "^8.5.13",
     "@fluentui/set-version": "^8.2.6",
-    "@fluentui/theme-samples": "^8.7.75",
-    "@fluentui/react-monaco-editor": "^1.7.75",
+    "@fluentui/theme-samples": "^8.7.79",
+    "@fluentui/react-monaco-editor": "^1.7.79",
     "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
@@ -22,13 +22,13 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-datepicker-compat": "0.0.0-beta.1",
-    "@fluentui/react-migration-v8-v9": "^9.2.8",
+    "@fluentui/react-datepicker-compat": "^0.0.1",
+    "@fluentui/react-migration-v8-v9": "^9.2.10",
     "@fluentui/react-migration-v0-v9": "9.0.0-alpha.0",
-    "@fluentui/react": "^8.107.5",
+    "@fluentui/react": "^8.108.2",
     "@fluentui/react-northstar": "^0.66.4",
     "@fluentui/react-icons-northstar": "^0.66.4",
-    "@fluentui/react-components": "^9.18.9",
+    "@fluentui/react-components": "^9.19.1",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0",
     "@griffel/react": "^1.5.2",

diff --git a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx
@@ -14,7 +14,7 @@ const exampleTheme = {
 };
 ```
 
-You can browse all the available tokens in **[Theme](/docs/theme-color--page)** section of the docs.
+You can browse all the available tokens in **[Theme](/docs/theme-colors--page)** section of the docs.
 
 ## How theme is applied
 

diff --git a/apps/public-docsite/package.json b/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.75",
+    "@fluentui/react-monaco-editor": "^1.7.79",
     "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.5",
-    "@fluentui/react-docsite-components": "^8.11.40",
+    "@fluentui/react": "^8.108.2",
+    "@fluentui/react-docsite-components": "^8.12.2",
     "@fluentui/react-examples": "^8.34.4",
-    "@fluentui/react-experiments": "^8.14.70",
-    "@fluentui/fluent2-theme": "^8.106.12",
+    "@fluentui/react-experiments": "^8.14.74",
+    "@fluentui/fluent2-theme": "^8.107.3",
     "@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.75",
+    "@fluentui/theme-samples": "^8.7.79",
     "@fluentui/utilities": "^8.13.9",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-core": "^11.0.0",

diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx
@@ -62,21 +62,7 @@ export const SiteDefinition: ISiteDefinition<Platforms> = {
     { from: '#/styles/web/fluent-theme', to: '#/controls/web/themes' },
     { from: '#/examples', to: '#/controls/web' },
   ],
-  messageBars: [
-    {
-      path: '#',
-      text: (
-        <span>
-          🎉 Announcing Fluent UI React v9 stable release! Visit{' '}
-          <a href="https://react.fluentui.dev/" style={{ color: '#006cbe' }}>
-            Fluent UI React v9
-          </a>{' '}
-          to see more.
-        </span>
-      ),
-      sessionStoragePrefix: 'FluentUI9',
-    },
-  ],
+  messageBars: [],
   // This is defined by loadSite() from @fluentui/public-docsite-setup
   versionSwitcherDefinition: window.__versionSwitcherDefinition,
 };
diff --git a/apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx b/apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx
@@ -9,6 +9,13 @@ export interface IControlsPageProps extends IPageProps<Platforms> {}
 
 const apiRequireContext = require.context('@fluentui/public-docsite-resources/dist/api/', true, /^(?!references).*/);
 
+const webPlatformBanner = {
+  banner: {
+    title: 'Fluent UI v9',
+    message: 'Check out the all new [Fluent UI version 9](https://react.fluentui.dev)!',
+  },
+};
+
 const ControlsAreaPageBase: React.FunctionComponent<IControlsPageProps> = props => {
   let jsonDocs: IPageJson;
   if (props.platform === 'web' && !props.jsonDocs) {
@@ -25,6 +32,7 @@ const ControlsAreaPageBase: React.FunctionComponent<IControlsPageProps> = props
       subTitle={getSubTitle(props.platform!)}
       jsonDocs={jsonDocs!}
       {...props}
+      {...(props.platform === Platforms.web && webPlatformBanner)}
       versionSwitcherDefinition={
         props.platform === Platforms.web ? SiteDefinition.versionSwitcherDefinition : undefined
       }

diff --git 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.107.5",
+    "@fluentui/react": "^8.108.2",
     "@fluentui/react-hooks": "^8.6.20",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.6",

diff --git a/apps/react-18-tests-v9/package.json b/apps/react-18-tests-v9/package.json
@@ -19,7 +19,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.18.9",
+    "@fluentui/react-components": "^9.19.1",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.6",
     "react": "18.2.0",

diff --git a/apps/recipes-react-components/package.json b/apps/recipes-react-components/package.json
@@ -16,10 +16,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.18.9",
+    "@fluentui/react-components": "^9.19.1",
     "@fluentui/react-icons": "^2.0.196",
     "@fluentui/react-theme": "^9.1.7",
-    "@fluentui/react-provider": "^9.5.2",
+    "@fluentui/react-provider": "^9.5.4",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0",
     "@griffel/react": "^1.5.2",

diff --git a/apps/ssr-tests-v9/package.json b/apps/ssr-tests-v9/package.json
@@ -20,7 +20,7 @@
     "type-check": "tsc -b tsconfig.json"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.18.9"
+    "@fluentui/react-components": "^9.19.1"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
@@ -13,7 +13,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react": "^8.107.5",
+    "@fluentui/react": "^8.108.2",
     "@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
@@ -10,10 +10,10 @@
     "type-check": "tsc -b tsconfig.type.json"
   },
   "dependencies": {
-    "@fluentui/react": "^8.107.5",
-    "@fluentui/react-components": "^9.18.9",
+    "@fluentui/react": "^8.108.2",
+    "@fluentui/react-components": "^9.19.1",
     "@fluentui/react-icons": "^2.0.196",
-    "@fluentui/web-components": "^2.5.13",
+    "@fluentui/web-components": "^2.5.14",
     "@microsoft/fast-element": "^1.11.1",
     "afterframe": "1.0.2",
     "react": "17.0.2",

diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json
@@ -19,9 +19,9 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.107.5",
+    "@fluentui/react": "^8.108.2",
     "@fluentui/merge-styles": "^8.5.7",
-    "@fluentui/react-docsite-components": "^8.11.40",
+    "@fluentui/react-docsite-components": "^8.12.2",
     "@fluentui/foundation-legacy": "^8.2.33",
     "@fluentui/scheme-utilities": "^8.3.26",
     "@fluentui/set-version": "^8.2.6",

diff --git a/apps/ts-minbar-test-react-components/package.json b/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.9"
+    "@fluentui/react-components": "^9.19.1"
   },
   "scripts": {
     "type-check": "tsc -p .",

diff --git 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.107.5"
+    "@fluentui/react": "^8.108.2"
   },
   "scripts": {
     "type-check": "tsc -p .",

diff --git a/apps/ts-minbar-test-react/src/index.ts b/apps/ts-minbar-test-react/src/index.ts
@@ -1,4 +1,3 @@
-import * as fs from 'fs';
 import * as path from 'path';
 
 import {
@@ -25,13 +24,10 @@ async function performTest() {
     tempPaths = prepareTempDirs(`${testName}-`);
     logger(`✔️ Temporary directories created under ${tempPaths.root}`);
 
-    // https://github.com/microsoft/fluentui/issues/27425 - remove related logic once issue will be resolved
-    const pinnedReactTypesVersion = '17.0.55';
-
     // Install dependencies, using the minimum TS version supported for consumers
     const dependencies = [
       '@types/node@14',
-      `@types/react@${pinnedReactTypesVersion}`,
+      `@types/react@17`,
       '@types/react-dom@17',
       'react@17',
       'react-dom@17',
@@ -44,13 +40,6 @@ async function performTest() {
     const packedPackages = await packProjectPackages(logger, lernaRoot, ['@fluentui/react']);
     await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
-    // Remove Start - once will be resolved https://github.com/microsoft/fluentui/issues/27425
-    const jsonPath = path.resolve(tempPaths.testApp, 'package.json');
-    const packageJson = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'));
-    packageJson.resolutions['@types/react-dom/@types/react'] = pinnedReactTypesVersion;
-    fs.writeFileSync(jsonPath, JSON.stringify(packageJson), 'utf-8');
-    // Remove End
-
     await shEcho(`yarn add ${packedPackages['@fluentui/react']}`, tempPaths.testApp);
     logger(`✔️ Fluent UI packages were added to dependencies`);
 

diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
@@ -20,48 +20,48 @@
     "@fluentui/scripts-storybook": "*"
   },
   "dependencies": {
-    "@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",
+    "@fluentui/react-accordion": "^9.1.10",
+    "@fluentui/react-avatar": "^9.4.10",
+    "@fluentui/react-badge": "^9.1.10",
+    "@fluentui/react-button": "^9.3.10",
+    "@fluentui/react-card": "^9.0.8",
+    "@fluentui/react-checkbox": "^9.1.11",
+    "@fluentui/react-combobox": "^9.2.11",
+    "@fluentui/react-datepicker-compat": "^0.0.1",
+    "@fluentui/react-dialog": "^9.5.3",
+    "@fluentui/react-divider": "^9.2.10",
+    "@fluentui/react-field": "^9.1.1",
     "@fluentui/react-icons": "^2.0.196",
-    "@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-image": "^9.1.7",
+    "@fluentui/react-infobutton": "9.0.0-beta.28",
+    "@fluentui/react-input": "^9.4.11",
+    "@fluentui/react-label": "^9.1.10",
+    "@fluentui/react-link": "^9.0.36",
+    "@fluentui/react-menu": "^9.7.10",
+    "@fluentui/react-persona": "^9.2.9",
+    "@fluentui/react-popover": "^9.5.10",
+    "@fluentui/react-portal": "^9.2.6",
+    "@fluentui/react-positioning": "^9.5.10",
+    "@fluentui/react-progress": "^9.1.11",
+    "@fluentui/react-provider": "^9.5.4",
+    "@fluentui/react-radio": "^9.1.11",
+    "@fluentui/react-select": "^9.1.11",
     "@fluentui/react-shared-contexts": "^9.3.3",
-    "@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-skeleton": "9.0.0-beta.10",
+    "@fluentui/react-slider": "^9.1.11",
+    "@fluentui/react-spinner": "^9.1.10",
+    "@fluentui/react-spinbutton": "^9.2.11",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0",
-    "@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-switch": "^9.1.11",
+    "@fluentui/react-tabs": "^9.3.11",
+    "@fluentui/react-table": "^9.2.7",
+    "@fluentui/react-text": "^9.3.7",
+    "@fluentui/react-textarea": "^9.3.11",
     "@fluentui/react-theme": "^9.1.7",
-    "@fluentui/react-tooltip": "^9.2.8",
-    "@fluentui/react-toolbar": "^9.1.9",
-    "@fluentui/react-utilities": "^9.7.4",
+    "@fluentui/react-tooltip": "^9.2.10",
+    "@fluentui/react-toolbar": "^9.1.11",
+    "@fluentui/react-utilities": "^9.8.0",
     "@griffel/react": "^1.5.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ const exampleTheme = { @@
     };
     ```
-    You can browse all the available tokens in **[Theme](/docs/theme-color--page)** section of the docs.
+    You can browse all the available tokens in **[Theme](/docs/theme-colors--page)** section of the docs.
     ## How theme is applied
@@ Expand Down @@