Merge branch 'master' into docs/react-drawer-best-practices

* master: Added truncation and tooltips to the Breadcrumb (microsoft#27859) applying package updates applying package updates Export selection types from combobox (microsoft#28054) fix(react-datepicker-compat): Remove focus function from the deps to avoid constant move of focus (microsoft#28053) Updated poster for new stable components (microsoft#28051) Griffel/bump to 1.5.7 (microsoft#27925) feat(scripts): replace use of SWC CLI with SWC transform api (microsoft#27380) chore: Add positioning test for scroll jumps (microsoft#28043) chore: migrate to TS 4.5 (microsoft#27936) Fix toolbar divider styles (microsoft#28044) fix: createFocusOutlineStyle don't work with CSS variables (microsoft#27966) feat(react-tags): use simple button for TagButton content instead of aria button (microsoft#28033)
marcosmoura · May 31, 2023 · 30720be · 30720be
2 parents 53f9553 + d780664
commit 30720be
Show file tree

Hide file tree

Showing 370 changed files with 6,489 additions and 1,725 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -13,11 +13,11 @@ const realSetCurrentStory = window.__setCurrentStory;
 window.__setCurrentStory = function (categorization, story) {
   try {
     realSetCurrentStory(categorization, story);
-  } catch (e) {
+  } catch (err) {
     // Ignore API removed errors from cypress-storybook's call to forceReRender
     // https://github.com/storybookjs/storybook/blob/208d2f930b2b72a48355367d993e65e5b01be655/lib/core-client/src/preview/start.ts#L24
-    if (!(typeof e.message === 'string' && e.message.includes('was removed in storyStoreV7'))) {
-      throw e;
+    if (!(err instanceof Error && err.message.includes('was removed in storyStoreV7'))) {
+      throw err;
     }
   }
 };

diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json
@@ -19,15 +19,15 @@
   },
   "dependencies": {
     "@fluentui/scripts-perf-test-flamegrill": "*",
-    "@griffel/core": "^1.9.0",
-    "@fluentui/react-avatar": "^9.5.4",
-    "@fluentui/react-button": "^9.3.15",
-    "@fluentui/react-field": "^9.1.5",
-    "@fluentui/react-infobutton": "9.0.0-beta.33",
-    "@fluentui/react-persona": "^9.2.14",
-    "@fluentui/react-provider": "^9.7.1",
-    "@fluentui/react-spinbutton": "^9.2.15",
+    "@fluentui/react-avatar": "^9.5.5",
+    "@fluentui/react-button": "^9.3.16",
+    "@fluentui/react-field": "^9.1.6",
+    "@fluentui/react-infobutton": "9.0.0-beta.34",
+    "@fluentui/react-persona": "^9.2.15",
+    "@fluentui/react-provider": "^9.7.2",
+    "@fluentui/react-spinbutton": "^9.2.16",
     "@fluentui/react-theme": "^9.1.8",
+    "@griffel/core": "^1.11.0",
     "@microsoft/load-themed-styles": "^1.10.26",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json
@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@fluentui/scripts-perf-test-flamegrill": "*",
-    "@fluentui/example-data": "^8.4.10",
-    "@fluentui/react": "^8.109.8",
+    "@fluentui/example-data": "^8.4.11",
+    "@fluentui/react": "^8.109.9",
     "@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
@@ -27,22 +27,22 @@
     "update-snapshots": "just-scripts jest -u"
   },
   "devDependencies": {
-    "@fluentui/api-docs": "^8.2.9",
+    "@fluentui/api-docs": "^8.2.10",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-monorepo": "*",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.109.8",
+    "@fluentui/react": "^8.109.9",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.6.10",
-    "@fluentui/react-docsite-components": "^8.12.14",
-    "@fluentui/font-icons-mdl2": "^8.5.19",
-    "@fluentui/set-version": "^8.2.10",
-    "@fluentui/theme-samples": "^8.7.89",
-    "@fluentui/react-monaco-editor": "^1.7.91",
+    "@fluentui/azure-themes": "^8.6.11",
+    "@fluentui/react-docsite-components": "^8.12.15",
+    "@fluentui/font-icons-mdl2": "^8.5.20",
+    "@fluentui/set-version": "^8.2.11",
+    "@fluentui/theme-samples": "^8.7.90",
+    "@fluentui/react-monaco-editor": "^1.7.92",
     "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
@@ -23,17 +23,17 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-datepicker-compat": "^0.1.4",
-    "@fluentui/react-migration-v8-v9": "^9.2.15",
-    "@fluentui/react-migration-v0-v9": "^9.0.1",
-    "@fluentui/react": "^8.109.8",
+    "@fluentui/react-datepicker-compat": "^0.1.5",
+    "@fluentui/react-migration-v8-v9": "^9.2.16",
+    "@fluentui/react-migration-v0-v9": "^9.0.2",
+    "@fluentui/react": "^8.109.9",
     "@fluentui/react-northstar": "^0.66.4",
     "@fluentui/react-icons-northstar": "^0.66.4",
-    "@fluentui/react-components": "^9.20.4",
+    "@fluentui/react-components": "^9.21.0",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0",
     "@fluentui/theme-designer": "^9.0.0",
-    "@griffel/react": "^1.5.2",
+    "@griffel/react": "^1.5.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-window": "^1.8.6",

diff --git a/apps/public-docsite-v9/src/Concepts/Poster/metadata.ts b/apps/public-docsite-v9/src/Concepts/Poster/metadata.ts
@@ -4,7 +4,7 @@ export const libraryInfo: LibraryInfo = {
   name: 'Fluent UI React v9',
   areas: [
     {
-      name: 'Basic Inputs',
+      name: 'Buttons and Form Inputs',
       packages: [
         {
           name: 'react-button',
@@ -33,11 +33,26 @@ export const libraryInfo: LibraryInfo = {
         },
         {
           name: 'react-checkbox',
-          newColumn: true,
           codeItems: [{ name: 'CheckBox', componentType: 'component' }],
         },
+        {
+          name: 'react-combobox',
+          newColumn: true,
+          codeItems: [
+            { name: 'Combobox', componentType: 'component' },
+            { name: 'Dropdown', componentType: 'component' },
+            { name: 'Listbox', componentType: 'component' },
+            { name: 'Option', componentType: 'component' },
+            { name: 'OptionGroup', componentType: 'component' },
+          ],
+        },
+        {
+          name: 'react-field',
+          codeItems: [{ name: 'Field', componentType: 'component' }],
+        },
         {
           name: 'react-input',
+          newColumn: true,
           codeItems: [{ name: 'Input', componentType: 'component' }],
         },
         {
@@ -46,11 +61,11 @@ export const libraryInfo: LibraryInfo = {
         },
         {
           name: 'react-link',
-          newColumn: true,
           codeItems: [{ name: 'Link', componentType: 'component' }],
         },
         {
           name: 'react-radio',
+          newColumn: true,
           codeItems: [
             { name: 'Radio', componentType: 'component' },
             { name: 'RadioGroup', componentType: 'component' },
@@ -62,11 +77,11 @@ export const libraryInfo: LibraryInfo = {
         },
         {
           name: 'react-slider',
-          newColumn: true,
           codeItems: [{ name: 'Slider', componentType: 'component' }],
         },
         {
           name: 'react-spinbutton',
+          newColumn: true,
           codeItems: [{ name: 'SpinButton', componentType: 'component' }],
         },
         {
@@ -84,8 +99,36 @@ export const libraryInfo: LibraryInfo = {
         },
       ],
     },
+    {
+      name: 'Lists, Grids, and Trees',
+      packages: [
+        {
+          name: 'react-table',
+          codeItems: [
+            { name: 'DataGrid', componentType: 'component' },
+            { name: 'DataGridBody', componentType: 'component' },
+            { name: 'DataGridCell', componentType: 'component' },
+            { name: 'DataGridHeader', componentType: 'component' },
+            { name: 'DataGridHeaderCell', componentType: 'component' },
+            { name: 'DataGridRow', componentType: 'component' },
+            { name: 'DataGridSelectionCell', componentType: 'component' },
+            { name: 'Table', newColumn: true, componentType: 'component' },
+            { name: 'TableBody', componentType: 'component' },
+            { name: 'TableCell', componentType: 'component' },
+            { name: 'TableCellActions', componentType: 'component' },
+            { name: 'TableCellLayout', componentType: 'component' },
+            { name: 'TableHeader', newColumn: true, componentType: 'component' },
+            { name: 'TableHeaderCell', componentType: 'component' },
+            { name: 'TableResizeHandle', componentType: 'component' },
+            { name: 'TableRow', componentType: 'component' },
+            { name: 'TableSelectionCell', componentType: 'component' },
+          ],
+        },
+      ],
+    },
     {
       name: 'Menus and Navigation',
+      newRow: true,
       packages: [
         {
           name: 'react-accordion',
@@ -125,7 +168,6 @@ export const libraryInfo: LibraryInfo = {
     },
     {
       name: 'Surfaces',
-      newRow: true,
       packages: [
         {
           name: 'react-card',
@@ -148,6 +190,10 @@ export const libraryInfo: LibraryInfo = {
             { name: 'DialogActions', componentType: 'component' },
           ],
         },
+        {
+          name: 'react-divider',
+          codeItems: [{ name: 'Divider', componentType: 'component' }],
+        },
         {
           name: 'react-popover',
           newColumn: true,
@@ -159,7 +205,6 @@ export const libraryInfo: LibraryInfo = {
         },
         {
           name: 'react-portal',
-          newColumn: true,
           codeItems: [
             { name: 'Portal', componentType: 'component' },
             { name: 'PopoverSurface', componentType: 'component' },
@@ -168,6 +213,7 @@ export const libraryInfo: LibraryInfo = {
         },
         {
           name: 'react-toolbar',
+          newColumn: true,
           codeItems: [
             { name: 'Toolbar', componentType: 'component' },
             { name: 'ToolbarButton', componentType: 'component' },
@@ -196,13 +242,17 @@ export const libraryInfo: LibraryInfo = {
           ],
         },
         {
-          name: 'react-divider',
+          name: 'react-image',
+          codeItems: [{ name: 'Image', componentType: 'component' }],
+        },
+        {
+          name: 'react-persona',
           newColumn: true,
-          codeItems: [{ name: 'Divider', componentType: 'component' }],
+          codeItems: [{ name: 'Persona', componentType: 'component' }],
         },
         {
-          name: 'react-image',
-          codeItems: [{ name: 'Image', componentType: 'component' }],
+          name: 'react-progress',
+          codeItems: [{ name: 'ProgressBar', componentType: 'component' }],
         },
         {
           name: 'react-spinner',
@@ -232,6 +282,7 @@ export const libraryInfo: LibraryInfo = {
     },
     {
       name: 'Theming',
+      newRow: true,
       packages: [
         {
           name: 'react-provider',
@@ -267,7 +318,6 @@ export const libraryInfo: LibraryInfo = {
     },
     {
       name: 'Utilities',
-      newRow: true,
       packages: [
         {
           name: 'react-context-selector',

diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json
@@ -23,29 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/common-styles": "^1.2.28",
+    "@fluentui/common-styles": "^1.2.29",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-monaco-editor": "^1.7.91",
+    "@fluentui/react-monaco-editor": "^1.7.92",
     "write-file-webpack-plugin": "^4.1.0",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/font-icons-mdl2": "^8.5.19",
+    "@fluentui/font-icons-mdl2": "^8.5.20",
     "@fluentui/public-docsite-resources": "^8.1.41",
-    "@fluentui/public-docsite-setup": "^0.3.20",
-    "@fluentui/react": "^8.109.8",
-    "@fluentui/react-docsite-components": "^8.12.14",
+    "@fluentui/public-docsite-setup": "^0.3.21",
+    "@fluentui/react": "^8.109.9",
+    "@fluentui/react-docsite-components": "^8.12.15",
     "@fluentui/react-examples": "^8.34.4",
-    "@fluentui/react-experiments": "^8.14.84",
-    "@fluentui/fluent2-theme": "^8.107.14",
-    "@fluentui/react-file-type-icons": "^8.8.19",
-    "@fluentui/react-icons-mdl2": "^1.3.43",
-    "@fluentui/react-icons-mdl2-branded": "^1.2.44",
-    "@fluentui/set-version": "^8.2.10",
-    "@fluentui/theme": "^2.6.30",
-    "@fluentui/theme-samples": "^8.7.89",
-    "@fluentui/utilities": "^8.13.14",
+    "@fluentui/react-experiments": "^8.14.85",
+    "@fluentui/fluent2-theme": "^8.107.15",
+    "@fluentui/react-file-type-icons": "^8.8.20",
+    "@fluentui/react-icons-mdl2": "^1.3.44",
+    "@fluentui/react-icons-mdl2-branded": "^1.2.45",
+    "@fluentui/set-version": "^8.2.11",
+    "@fluentui/theme": "^2.6.31",
+    "@fluentui/theme-samples": "^8.7.90",
+    "@fluentui/utilities": "^8.13.15",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",

diff --git a/apps/react-18-tests-v8/package.json b/apps/react-18-tests-v8/package.json
@@ -21,8 +21,8 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.109.8",
-    "@fluentui/react-hooks": "^8.6.25",
+    "@fluentui/react": "^8.109.9",
+    "@fluentui/react-hooks": "^8.6.26",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.6",
     "react": "18.2.0",

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.20.4",
+    "@fluentui/react-components": "^9.21.0",
     "@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,13 +16,13 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.20.4",
+    "@fluentui/react-components": "^9.21.0",
     "@fluentui/react-icons": "^2.0.196",
     "@fluentui/react-theme": "^9.1.8",
-    "@fluentui/react-provider": "^9.7.1",
+    "@fluentui/react-provider": "^9.7.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",
+    "@griffel/react": "^1.5.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "tslib": "^2.1.0"

diff --git a/apps/ssr-tests-v9/package.json b/apps/ssr-tests-v9/package.json
@@ -18,7 +18,7 @@
     "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.20.4"
+    "@fluentui/react-components": "^9.21.0"
   },
   "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.109.8",
+    "@fluentui/react": "^8.109.9",
     "@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,8 +10,8 @@
     "type-check": "tsc -b tsconfig.type.json"
   },
   "dependencies": {
-    "@fluentui/react": "^8.109.8",
-    "@fluentui/react-components": "^9.20.4",
+    "@fluentui/react": "^8.109.9",
+    "@fluentui/react-components": "^9.21.0",
     "@fluentui/react-icons": "^2.0.196",
     "@fluentui/web-components": "^2.5.14",
     "@microsoft/fast-element": "^1.11.1",

diff --git a/apps/test-bundles/webpack.config.js b/apps/test-bundles/webpack.config.js
@@ -21,6 +21,7 @@ if (packageName === '@fluentui/react-northstar') {
   entries = buildEntries('@fluentui/react');
   entries['keyboard-key'] = buildEntry('@fluentui/keyboard-key');
 } else {
+  console.error('🚨 No packageName provided!');
   process.exit(1);
 }