Merge branch 'master' into feat/drawer-components

* master:
  chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707)
  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)
  test: use `isolatedModules` for all ts-jest configs to lower memory footprint on CI (microsoft#27670)
  chore: bump @griffel/eslint-plugin & enable @griffel/hook-naming (microsoft#27687)
  feat(react-tree): makes useFlatTree generic (microsoft#27682)
  Enable export to codepen for charting library (microsoft#27539)
  Overflow: added useOverflowCount to exports (microsoft#27678)
  fix: Menu should not steal focus on re-render (microsoft#27688)
  feat(react-conformance): add new TS config api to be able to specify configName and configDir (microsoft#27664)

.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"
 }

.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-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"
+}

package.json

@@ -8,7 +8,7 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "engines": {
-    "node": "^14.18.1 || ^16.0.0"
+    "node": "^16.18.1 || ^18.0.0"
   },
   "scripts": {
     "build": "lage build --verbose",
@@ -89,7 +89,7 @@
     "@cypress/webpack-dev-server": "1.8.3",
     "@fluentui/react-icons": "^2.0.196",
     "@griffel/babel-preset": "1.4.8",
-    "@griffel/eslint-plugin": "1.0.0",
+    "@griffel/eslint-plugin": "^1.2.0",
     "@griffel/jest-serializer": "1.1.4",
     "@griffel/react": "^1.5.2",
     "@griffel/webpack-extraction-plugin": "0.3.3",
@@ -165,7 +165,7 @@
     "@types/lodash": "4.14.182",
     "@types/markdown-table": "2.0.0",
     "@types/micromatch": "4.0.2",
-    "@types/node": "14.18.32",
+    "@types/node": "16.18.1",
     "@types/node-fetch": "2.5.7",
     "@types/prettier": "2.7.2",
     "@types/progress": "2.0.5",

packages/eslint-plugin/package.json

@@ -13,6 +13,7 @@
     "test": "yarn jest --passWithNoTests"
   },
   "dependencies": {
+    "@griffel/eslint-plugin": "^1.2.0",
     "@rnx-kit/eslint-plugin": "^0.2.5",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/experimental-utils": "^4.22.0",

packages/eslint-plugin/src/configs/react-config.js

@@ -25,6 +25,7 @@ module.exports = {
      * griffel eslint rules
      * @see https://github.com/microsoft/griffel/tree/main/packages/eslint-plugin
      */
+    '@griffel/hook-naming': 'error',
     '@griffel/no-shorthands': 'error',
     /**
      * react eslint rules

packages/react-components/babel-preset-global-context/jest.config.js

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