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

* feat/drawer-components: (120 commits)
  fix: add missing change file
  Component testing - Donut chart (microsoft#27033)
  fix: update .npmignore files to resolve npm8/node16 regression with npm publish for v9 packages (microsoft#27741)
  chore: add .swcrc to .npmignore (generator) (microsoft#27739)
  docs: update API
  Autogenerate react-toast package (microsoft#27730)
  applying package updates
  fix: dont ignore lib, lib-commonjs and lib-amd files (microsoft#27736)
  Add DraggableZone into export map (microsoft#27569)
  Add export for FolderCover.scss (microsoft#27507)
  applying package updates
  Add filetype icon for Microsoft Designer (microsoft#27724)
  ci: add build task back as lint pre-requirement to unblock temporarily import plugin lint rule (microsoft#27729)
  fix(react-charting): add missing dependency to fix lint violations during release (microsoft#27728)
  Added partition for controlled overflow menu (microsoft#27520)
  Azure Theme 8.0: Tag Button variant for DefaultButton and PrimaryButton (microsoft#27186)
  Azure Theme 8.0 dropdown fix for high contrast themes (microsoft#27346)
  chore: enable TS intellisense in cross library projects for better/consistent DX (microsoft#26605)
  chore: enforce files naming to use .styles.ts [cxe-red files] (microsoft#27710)
  chore(v0): enable emit only dts and use new conformance test API to narrow down TS Program (microsoft#27686)
  ...

.codesandbox/ci.json

@@ -2,5 +2,5 @@
   "buildCommand": "build:codesandbox",
   "packages": ["packages/react", "packages/react-components/react-components"],
   "sandboxes": ["x5u3t", "spnyu"],
-  "node": "14"
+  "node": "16"
 }

.devcontainer/Dockerfile

@@ -1,7 +1,7 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile
 
 # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
-ARG VARIANT="14-bullseye"
+ARG VARIANT="16-bullseye"
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
 
 # [Optional] Uncomment this section to install additional OS packages.

.devcontainer/devcontainer.json

@@ -7,7 +7,7 @@
     // Update 'VARIANT' to pick a Node version: 16, 14, 12.
     // Append -bullseye or -buster to pin to an OS version.
     // Use -bullseye variants on local arm64/Apple Silicon.
-    "args": { "VARIANT": "14" }
+    "args": { "VARIANT": "16" }
   },
   // Set *default* container specific settings.json values on container create.
   "settings": {},

.devops/templates/tools.yml

@@ -2,7 +2,7 @@
 steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '14.18.1'
+      versionSpec: '16.18.1'
       checkLatest: false
     displayName: 'Install Node.js'
 

.github/CODEOWNERS

@@ -133,6 +133,7 @@ apps/recipes-react-components @microsoft/cxe-red @microsoft/cxe-coastal @microso
 #### Packages
 packages/azure-themes @Jacqueline-ms @robtaft-ms
 packages/bundle-size @microsoft/teams-prg
+packages/react-conformance @microsoft/fluentui-react-build
 packages/date-time-utilities @microsoft/cxe-red
 packages/eslint-plugin @microsoft/fluentui-react-build
 packages/foundation-legacy @microsoft/cxe-red @khmakoto
@@ -219,13 +220,12 @@ packages/react-components/babel-preset-global-context @microsoft/teams-prg
 packages/react-components/react-table @microsoft/teams-prg
 packages/react-components/react-progress @microsoft/cxe-red @tomi-msft
 packages/react-components/react-persona @microsoft/cxe-red @sopranopillow
-packages/react-components/react-avatar-context @microsoft/teams-prg
 packages/react-components/react-infobutton @microsoft/cxe-red @sopranopillow
 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 @TristanWatanabe
+packages/react-components/react-tags @microsoft/cxe-coastal @YuanboXue-Amber
 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
@@ -235,6 +235,7 @@ 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
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 ## Components

.github/workflows/check-packages.yml

@@ -12,7 +12,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.18.1
+          node-version: 16.18.1
           cache: 'yarn'
 
       - uses: tj-actions/changed-files@v34
@@ -44,7 +44,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.18.1
+          node-version: 16.18.1
 
       - uses: actions/github-script@v6
         with:
@@ -70,7 +70,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.18.1
+          node-version: 16.18.1
 
       - uses: actions/github-script@v6
         with:

.github/workflows/docsite-publish-chromatic.yml

@@ -37,7 +37,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.18.1
+          node-version: 16.18.1
           cache: 'yarn'
 
       - name: Install packages

.github/workflows/docsite-publish-ghpages.yml

@@ -37,7 +37,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.18.1
+          node-version: 16.18.1
           cache: 'yarn'
 
       - name: Install packages

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.9",
-    "@fluentui/react-button": "^9.3.9",
-    "@fluentui/react-field": "^9.1.0",
-    "@fluentui/react-infobutton": "9.0.0-beta.27",
-    "@fluentui/react-persona": "^9.2.8",
-    "@fluentui/react-provider": "^9.5.3",
-    "@fluentui/react-spinbutton": "^9.2.10",
+    "@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",

apps/perf-test/package.json

@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@fluentui/scripts-perf-test-flamegrill": "*",
-    "@fluentui/example-data": "^8.4.7",
-    "@fluentui/react": "^8.107.6",
+    "@fluentui/example-data": "^8.4.8",
+    "@fluentui/react": "^8.109.0",
     "@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.7",
+    "@fluentui/api-docs": "^8.2.8",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-monorepo": "*",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.107.6",
+    "@fluentui/react": "^8.109.0",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.5.80",
-    "@fluentui/react-docsite-components": "^8.11.41",
-    "@fluentui/font-icons-mdl2": "^8.5.13",
-    "@fluentui/set-version": "^8.2.6",
-    "@fluentui/theme-samples": "^8.7.76",
-    "@fluentui/react-monaco-editor": "^1.7.76",
+    "@fluentui/azure-themes": "^8.6.1",
+    "@fluentui/react-docsite-components": "^8.12.4",
+    "@fluentui/font-icons-mdl2": "^8.5.15",
+    "@fluentui/set-version": "^8.2.8",
+    "@fluentui/theme-samples": "^8.7.81",
+    "@fluentui/react-monaco-editor": "^1.7.81",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-v9/.storybook/fix-title.js

@@ -1,6 +1,11 @@
 const fs = require('fs');
 const path = require('path');
 
+/**
+ *
+ * @param {string} filePath
+ * @param {string} title
+ */
 function fixTitle(filePath, title) {
   const htmlDocumentPath = path.resolve(__dirname, filePath);
   const htmlDocument = fs.readFileSync(htmlDocumentPath, 'utf-8');

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

@@ -1,16 +1,9 @@
-// @ts-check
-
-const {
-  getPackageStoriesGlob,
-  createPathAliasesConfig,
-  registerTsPaths,
-  rules,
-  registerRules,
-} = require('@fluentui/scripts-storybook');
+const path = require('path');
+const { getPackageStoriesGlob, registerTsPaths, rules, registerRules } = require('@fluentui/scripts-storybook');
 
 const rootMain = require('../../../.storybook/main');
 
-const { tsConfigAllPath } = createPathAliasesConfig();
+const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json');
 
 module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,

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

@@ -1,6 +1,8 @@
+import * as rootPreview from '../../../.storybook/preview';
+
 import { FluentDocsContainer } from '../src/DocsComponents/FluentDocsContainer.stories';
 import { FluentDocsPage } from '../src/DocsComponents/FluentDocsPage.stories';
-import * as rootPreview from '../../../.storybook/preview';
+
 import './docs-root-v9.css';
 
 /** @type {NonNullable<import('@storybook/react').Story['decorators']>} */

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

@@ -1,4 +1,5 @@
 import { create } from '@storybook/theming';
+
 import logo from '../public/fluentui-logo.svg';
 
 /**

apps/public-docsite-v9/.storybook/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["node", "static-assets", "storybook__addons"]
+  },
+  "include": ["*.js"]
+}

apps/public-docsite-v9/package.json

@@ -12,6 +12,7 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
+    "type-check": "just-scripts type-check",
     "start": "yarn storybook:docs",
     "storybook": "start-storybook --port 3000 --no-manager-cache",
     "storybook:docs": "yarn storybook --docs"
@@ -22,13 +23,13 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-datepicker-compat": "0.0.0-beta.2",
-    "@fluentui/react-migration-v8-v9": "^9.2.9",
+    "@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.6",
+    "@fluentui/react": "^8.109.0",
     "@fluentui/react-northstar": "^0.66.4",
     "@fluentui/react-icons-northstar": "^0.66.4",
-    "@fluentui/react-components": "^9.19.0",
+    "@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",

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx

@@ -33,7 +33,7 @@ export const V9ControlledExample = () => {
   );
 };
 
-const getFormattedExampleStyles = makeStyles({
+const useGetFormattedExampleStyles = makeStyles({
   wrapper: {
     display: 'grid',
     alignItems: 'center',
@@ -43,7 +43,7 @@ const getFormattedExampleStyles = makeStyles({
 });
 
 export const V9FormattedValueExample = () => {
-  const styles = getFormattedExampleStyles();
+  const styles = useGetFormattedExampleStyles();
   const [sliderValue, setSliderValue] = React.useState(0);
   const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value);
   const formattedId = useId();

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
 

apps/public-docsite-v9/tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ES2019",
+    "noEmit": false,
+    "outDir": "lib",
+    "jsx": "react",
+    "sourceMap": true,
+    "types": ["webpack-env"]
+  },
+  "include": ["src"]
+}

apps/public-docsite-v9/tsconfig.json

@@ -1,21 +1,23 @@
 {
+  "extends": "../../tsconfig.base.all.json",
   "compilerOptions": {
-    "target": "es5",
-    "outDir": "lib",
-    "module": "commonjs",
-    "jsx": "react",
-    "declaration": true,
-    "sourceMap": true,
+    "module": "ESNext",
+    "target": "ES2019",
     "noEmit": true,
     "experimentalDecorators": true,
     "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
     "strictNullChecks": true,
     "noImplicitAny": true,
-    "moduleResolution": "node",
-    "preserveConstEnums": true,
-    "skipLibCheck": true,
-    "types": ["webpack-env", "@storybook/react"]
+    "types": ["webpack-env"]
   },
-  "include": ["src"]
+  "include": [],
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
+    }
+  ]
 }

apps/public-docsite/package.json

@@ -23,29 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/common-styles": "^1.2.22",
+    "@fluentui/common-styles": "^1.2.24",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-monaco-editor": "^1.7.76",
+    "@fluentui/react-monaco-editor": "^1.7.81",
     "write-file-webpack-plugin": "^4.1.0",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/font-icons-mdl2": "^8.5.13",
+    "@fluentui/font-icons-mdl2": "^8.5.15",
     "@fluentui/public-docsite-resources": "^8.1.41",
-    "@fluentui/public-docsite-setup": "^0.3.18",
-    "@fluentui/react": "^8.107.6",
-    "@fluentui/react-docsite-components": "^8.11.41",
+    "@fluentui/public-docsite-setup": "^0.3.19",
+    "@fluentui/react": "^8.109.0",
+    "@fluentui/react-docsite-components": "^8.12.4",
     "@fluentui/react-examples": "^8.34.4",
-    "@fluentui/react-experiments": "^8.14.71",
-    "@fluentui/fluent2-theme": "^8.107.0",
-    "@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.76",
-    "@fluentui/utilities": "^8.13.9",
+    "@fluentui/react-experiments": "^8.14.76",
+    "@fluentui/fluent2-theme": "^8.107.5",
+    "@fluentui/react-file-type-icons": "^8.8.15",
+    "@fluentui/react-icons-mdl2": "^1.3.39",
+    "@fluentui/react-icons-mdl2-branded": "^1.2.40",
+    "@fluentui/set-version": "^8.2.8",
+    "@fluentui/theme": "^2.6.27",
+    "@fluentui/theme-samples": "^8.7.81",
+    "@fluentui/utilities": "^8.13.11",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",