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

* feat/drawer-components: (28 commits)
  docs: update API
  feat: add style overrides for upcoming drawer components
  feat: add support to override drawer styles
  fix: prevent elements from stretching
  chore: upgrade devcontainer node version to 16 (microsoft#27716)
  fix: rename styles file to use the newer naming conventions
  test: add cypress tests for scroll positions
  chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707)
  feat: add support to override drawer body styles
  chore: migrate to NodeJS v16 (microsoft#27711)
  remove react-avatar-context package (microsoft#27709)
  test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669)
  chore: Add caret to react-datepicker-compat dependencies (microsoft#27671)
  test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661)
  chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702)
  chore: enforce files naming to use .styles.ts (microsoft#27698)
  feat: adds lazy loading example (microsoft#27587)
  feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025)
  chore(react-tree): updates useOpenItemsState internals (microsoft#27697)
  feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668)
  ...

.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,7 +220,6 @@ 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

.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/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/react-18-tests-v8/jest.config.js

@@ -15,7 +15,7 @@ if (config.globals) {
   // override ts-jest config, otherwise it gets merged
   config.globals['ts-jest'] = {
     tsconfig: '<rootDir>/tsconfig.spec.json',
-    diagnostics: { warnOnly: true /* , exclude: ['packages/**']  */ },
+    isolatedModules: true,
   };
 }
 

apps/react-18-tests-v9/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: { warnOnly: true, exclude: ['packages/**'] },
+      isolatedModules: true,
     },
   },
   transform: {

apps/ssr-tests-v9/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {

apps/stress-test/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {

apps/vr-tests-react-components/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.json',
-      diagnostics: false,
+      isolatedModules: true,
     },
   },
   transform: {

change/@fluentui-eslint-plugin-5fd26f6f-a0b9-458f-80e0-86e99da9672a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: enable @griffel/hook-naming rule",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-global-context-bd251f47-0c11-4359-86a3-0ddfbab981a4.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update internal types to reflect node 16 types",
+  "packageName": "@fluentui/global-context",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-alert-bf0a8560-2a11-4cbd-abab-090b17f2f115.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-alert",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-combobox-aa8ff159-8fa3-4a0b-acf2-8b9bad6c66b7.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: allow space character insertion while typing in freeform combobox",
+  "packageName": "@fluentui/react-combobox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-9cf91ecc-b503-4ff6-92cb-f50e3d21b209.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: added useOverflowCount to react-components exports",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-conformance-9b875b33-ced4-434a-9690-448766658f08.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add new TS config api to be able to specify configName and configDir",
+  "packageName": "@fluentui/react-conformance",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-data-grid-react-window-4eb5b7ef-7eb3-43be-8678-f904b1c34516.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-data-grid-react-window",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-589ba0e3-87be-4c97-84f7-1e0e44d016c0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enable export to codepen for react charting",
+  "packageName": "@fluentui/react-docsite-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Menu should not steal focus on re-render",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-ce914d92-b9ef-49ba-9259-00beb4ee18b6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add react charting to support export to codepen",
+  "packageName": "@fluentui/react-monaco-editor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-overflow-a55c8fa2-3e82-481d-9e24-f502760f0c87.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-overflow",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-portal-c5baa26a-8d16-4d09-a003-7ab57ca5659b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-portal",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-provider-0530b7e5-56a7-4fee-be88-952cc1896cc8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add style overrides for upcoming drawer components",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-51c05197-e10f-49cd-a537-b19d4a4f7dd9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-text",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toolbar-f331e95e-2241-42a7-8319-e27d78457cc5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: makes useFlatTree generic",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: updates useOpenItemsState internals",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-a7765c4b-3557-4927-9f74-96da76ce5ccb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-d2b17f80-1a10-4456-a7dd-89b53f9a27f4.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: adds lazy loading story",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-fa9ce15a-c1d5-4b9a-93e7-e07b2d60b837.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: simplifies useControllableState hook internals",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}