Merge branch 'master' into marcosmoura/feat/drawer-component

* master: (47 commits) fix: Fix vertical alignment of inline Checkbox when checked vs. unchecked (microsoft#27324) applying package updates Fix: Revert microsoft#26931 change due to new bug it introduced (microsoft#27323) chore(react-infobutton): Renaming content slot to info (microsoft#27316) applying package updates Fix bad release mismatch of react-select (microsoft#27321) applying package updates Fix react-combobox mismatch after bad release (microsoft#27319) docs: add section about media query sorting (microsoft#27307) applying package updates fix: sync packages and changefiles after bad release (microsoft#27317) applying package updates chore(react-datepicker-compat): Cleanup types, unused code, and restore utils tests (microsoft#27297) [Fluent 2 Theme] Fixing link color in dark theme (microsoft#27203) Tree documentation and stories (microsoft#27270) feat: Render theme CSS variables in SSR style element (microsoft#27277) chore (scripts): update create-package plop templates to use swc/helpers in deps (microsoft#27286) fix(DialogContent): adds padding to allow focus visibility (microsoft#27248) Adding Card component style hooks to shared context (microsoft#27295) Virtualizer: Static scroll hooks and embedded scrollview (microsoft#26985) ...
marcosmoura · Mar 27, 2023 · 3467654 · 3467654
2 parents 486734a + 4fad4cb
commit 3467654
Show file tree

Hide file tree

Showing 755 changed files with 16,371 additions and 2,582 deletions.
diff --git a/.babelrc-v9.json b/.babelrc-v9.json
@@ -0,0 +1,23 @@
+{
+  "presets": [
+    [
+      "@griffel",
+      {
+        "babelOptions": {
+          "plugins": [
+            [
+              "babel-plugin-module-resolver",
+              {
+                "root": ["../../../"],
+                "alias": {
+                  "@fluentui/tokens": "packages/tokens/lib/index.js",
+                  "^@fluentui/(?!react-icons)(.+)": "packages/react-components/\\1/lib/index.js"
+                }
+              }
+            ]
+          ]
+        }
+      }
+    ]
+  ]
+}
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -292,3 +292,4 @@ packages/react-experiments/src/components/TileList @ThomasMichon
 **/cypress.config.ts @microsoft/fluentui-react-build
 **/api-extractor.json @microsoft/fluentui-react-build
 **/api-extractor.unstable.json @microsoft/fluentui-react-build
+**/.swcrc @microsoft/fluentui-react-build
diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ The following table will help you navigate the 3 projects and understand their d
 | **Docs**        | [https://react.fluentui.dev/](https://react.fluentui.dev/) | [aka.ms/fluentui-react](https://aka.ms/fluentui-react) | [aka.ms/fluentui-web-components](https://aka.ms/fluentui-web-components) |
 | **NPM**         | `@fluentui/react-components` | `@fluentui/react`| `@fluentui/web-components` |
 | **Version**     | [![npm version](https://img.shields.io/npm/v/@fluentui/react-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-components) | [![npm version](https://img.shields.io/npm/v/@fluentui/react?style=flat-square)](https://www.npmjs.com/package/@fluentui/react) | [![npm version](https://img.shields.io/npm/v/@fluentui/web-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components) |
-| **Issues**      | [![Fluent UI React Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-components+%28v9%29%22) | [![Fluent UI React GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react%20(v8)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react+(v8)%22) | [![Fluent UI Web Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/web-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22web-components%22) |
+| **Issues**      | [![Fluent UI React Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react-components%20(v9)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-components+%28v9%29%22) | [![Fluent UI React GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react%20(v8)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react+(v8)%22) | [![Fluent UI Web Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/web-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22web-components%22) |
 <!-- prettier-ignore-end -->
 
 > Why are there two React versions? Fluent UI v8 is still widely used. We encourage you to migrate to Fluent UI v9. See the [Migration overview](https://react.fluentui.dev/?path=/docs/concepts-migration-overview--page).

diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json
@@ -18,14 +18,14 @@
   },
   "dependencies": {
     "@griffel/core": "^1.9.0",
-    "@fluentui/react-avatar": "^9.4.3",
-    "@fluentui/react-button": "^9.3.3",
-    "@fluentui/react-field": "9.0.0-alpha.25",
-    "@fluentui/react-infobutton": "9.0.0-beta.21",
-    "@fluentui/react-persona": "^9.2.3",
-    "@fluentui/react-provider": "^9.4.3",
-    "@fluentui/react-spinbutton": "^9.2.3",
-    "@fluentui/react-theme": "^9.1.6",
+    "@fluentui/react-avatar": "^9.4.6",
+    "@fluentui/react-button": "^9.3.6",
+    "@fluentui/react-field": "9.0.0-alpha.28",
+    "@fluentui/react-infobutton": "9.0.0-beta.24",
+    "@fluentui/react-persona": "^9.2.5",
+    "@fluentui/react-provider": "^9.5.0",
+    "@fluentui/react-spinbutton": "^9.2.6",
+    "@fluentui/react-theme": "^9.1.7",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",
     "lodash": "^4.17.15",

diff --git a/apps/perf-test-react-components/src/scenarios/InfoButton.tsx b/apps/perf-test-react-components/src/scenarios/InfoButton.tsx
@@ -3,7 +3,7 @@ import { InfoButton } from '@fluentui/react-infobutton';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
 
-const Scenario = () => <InfoButton content={"This is an InfoButton's content."} />;
+const Scenario = () => <InfoButton info={"This is an InfoButton's content."} />;
 
 Scenario.decorator = (props: { children: React.ReactNode }) => {
   <FluentProvider theme={webLightTheme}>{props.children}</FluentProvider>;

diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json
@@ -17,8 +17,8 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/example-data": "^8.4.6",
-    "@fluentui/react": "^8.106.6",
+    "@fluentui/example-data": "^8.4.7",
+    "@fluentui/react": "^8.106.9",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",
     "lodash": "^4.17.15",

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.6",
+    "@fluentui/api-docs": "^8.2.7",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-monorepo": "*",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.106.6",
+    "@fluentui/react": "^8.106.9",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.5.69",
-    "@fluentui/react-docsite-components": "^8.11.30",
-    "@fluentui/font-icons-mdl2": "^8.5.12",
-    "@fluentui/set-version": "^8.2.5",
-    "@fluentui/theme-samples": "^8.7.65",
-    "@fluentui/react-monaco-editor": "^1.7.65",
+    "@fluentui/azure-themes": "^8.5.72",
+    "@fluentui/react-docsite-components": "^8.11.33",
+    "@fluentui/font-icons-mdl2": "^8.5.13",
+    "@fluentui/set-version": "^8.2.6",
+    "@fluentui/theme-samples": "^8.7.68",
+    "@fluentui/react-monaco-editor": "^1.7.68",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js
@@ -25,7 +25,14 @@ export const parameters = {
         [
           'Introduction',
           'Developer',
-          ['Quick Start', 'Styling Components', 'Positioning Components', 'Component Poster', 'Server-Side Rendering'],
+          [
+            'Quick Start',
+            'Styling Components',
+            'Positioning Components',
+            'Component Poster',
+            'Server-Side Rendering',
+            ['Basic setup', 'Next.js setup', 'Limitations with Portals'],
+          ],
           'Migration',
           [
             'Getting Started',

diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json
@@ -22,12 +22,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-migration-v8-v9": "^9.2.0",
+    "@fluentui/react-migration-v8-v9": "^9.2.5",
     "@fluentui/react-migration-v0-v9": "9.0.0-alpha.0",
-    "@fluentui/react": "^8.106.6",
+    "@fluentui/react": "^8.106.9",
     "@fluentui/react-northstar": "^0.66.4",
     "@fluentui/react-icons-northstar": "^0.66.4",
-    "@fluentui/react-components": "^9.18.1",
+    "@fluentui/react-components": "^9.18.6",
     "@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/AdvancedConfiguration.stories.mdx b/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx
@@ -32,7 +32,62 @@ function MyComponent(props) {
 
 You can check complete example at [CodeSandbox](https://codesandbox.io/s/fluentuireact-components-render-into-iframe-l62ke).
 
-### Content Security Policies
+### Media Queries Sorting
+
+Fluent UI React v9 uses Griffel as CSS-in-JS to apply styles. To provide deterministic behavior, styles applied by Griffel [are sorted]((https://griffel.js.org/react/guides/atomic-css#lvfha-order-of-pseudo-classes), the same applies to media queries. Fluent UI does not provide an opinionated default to sort media queries as the order may vary depending on the specific needs of the application.
+
+To configure the sorting behavior, please pass `compareMediaQueries` function with the same signature as sort functions in e.g. `Array.prototype.sort`.
+
+```js
+import { createDOMRenderer } from '@griffel/react';
+
+const mediaQueryOrder = [
+  'only screen and (min-width: 1366px)',
+  'only screen and (min-width: 1366px)',
+  'only screen and (min-width: 1920px)',
+];
+
+function sortMediaQueries(a, b) {
+  return mediaQueryOrder.indexOf(a) - mediaQueryOrder.indexOf(b);
+}
+
+const renderer = createDOMRenderer(document, {
+  compareMediaQueries,
+});
+```
+
+```html
+<html>
+  <head>
+    <style media="only screen and (min-width: 1024px)" data-make-styles-bucket="m"></style>
+    <style media="only screen and (min-width: 1366px)" data-make-styles-bucket="m"></style>
+    <style media="only screen and (min-width: 1920px)" data-make-styles-bucket="m"></style>
+  </head>
+</html>
+```
+
+For mobile-first methodology, consider using [`sort-css-media-queries`](https://github.com/dutchenkoOleg/sort-css-media-queries):
+
+```js
+import { createDOMRenderer } from '@griffel/react';
+import sortCSSmq from 'sort-css-media-queries';
+
+const renderer = createDOMRenderer(document, {
+  compareMediaQueries: sortCSSmq,
+});
+```
+
+```html
+<html>
+  <head>
+    <style media="only screen and (min-width: 1px)" data-make-styles-bucket="m"></style>
+    <style media="only screen and (min-width: 480px)" data-make-styles-bucket="m"></style>
+    <style media="only screen and (min-width: 640px)" data-make-styles-bucket="m"></style>
+  </head>
+</html>
+```
+
+### Content Security Policies (CSP)
 
 To add `nonce` attribute need for [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), please use `styleElementAttributes` to specify it:
 

diff --git a/apps/public-docsite-v9/src/Concepts/SSR/Nextjs.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/Nextjs.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Developer/Server-Side Rendering/NextJS Setup" />
+<Meta title="Concepts/Developer/Server-Side Rendering/Next.js setup" />
 
 ## Next.js
 
@@ -9,14 +9,18 @@ For basic instructions on getting Next.js set up, see [Getting Started](https://
 1. Get a basic next.js setup running, rendering a page from the `pages` folder, as guided by the tutorial.
 2. Add the Fluent UI dependencies: `@fluentui/react-components`.
 
-```sh
-// yarn
+```shell
+# Using Yarn
 yarn add @fluentui/react-components
 
-//npm
+# Using NPM
 npm install @fluentui/react-components
 ```
 
+> **Note on [experimental appDir support](https://beta.nextjs.org/docs/api-reference/next-config#appdir)**
+>
+> Fluent UI React v9 use extensively React Context API, to use Fluent components within `app` directory please use [`use client` directive](https://beta.nextjs.org/docs/rendering/server-and-client-components#convention).
+
 1. Create a `_document.tsx` file under your `pages` folder with the following content:
 
 ```tsx

diff --git a/apps/public-docsite-v9/src/Concepts/SSR/Portals.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/Portals.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 import { SSRDefaultOpen } from './MenuSSRDefaultOpen.stories';
 
-<Meta title="Concepts/Developer/Server-Side Rendering/Portals" />
+<Meta title="Concepts/Developer/Server-Side Rendering/Limitations with Portals" />
 
 ## React Portals
 

diff --git a/apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx
@@ -1,20 +1,20 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Developer/Server-Side Rendering/Basic Setup" />
+<Meta title="Concepts/Developer/Server-Side Rendering/Basic setup" />
 
 ## Server-Side Rendering
 
-Fluent UI React v9 fully supports Server-Side Rendering.
+Fluent UI React v9 supports Server-Side Rendering.
 
 ### Basic setup
 
 Add `@fluentui/react-components` dependency:
 
-```sh
-// yarn
+```shell
+# Using Yarn
 yarn add @fluentui/react-components
 
-//npm
+# Using NPM
 npm install @fluentui/react-components
 ```
 

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.21",
+    "@fluentui/common-styles": "^1.2.22",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-monaco-editor": "^1.7.65",
+    "@fluentui/react-monaco-editor": "^1.7.68",
     "write-file-webpack-plugin": "^4.1.0",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/font-icons-mdl2": "^8.5.12",
+    "@fluentui/font-icons-mdl2": "^8.5.13",
     "@fluentui/public-docsite-resources": "^8.1.41",
-    "@fluentui/public-docsite-setup": "^0.3.17",
-    "@fluentui/react": "^8.106.6",
-    "@fluentui/react-docsite-components": "^8.11.30",
+    "@fluentui/public-docsite-setup": "^0.3.18",
+    "@fluentui/react": "^8.106.9",
+    "@fluentui/react-docsite-components": "^8.11.33",
     "@fluentui/react-examples": "^8.34.4",
-    "@fluentui/react-experiments": "^8.14.60",
-    "@fluentui/fluent2-theme": "^8.106.1",
-    "@fluentui/react-file-type-icons": "^8.8.12",
-    "@fluentui/react-icons-mdl2": "^1.3.36",
-    "@fluentui/react-icons-mdl2-branded": "^1.2.37",
-    "@fluentui/set-version": "^8.2.5",
-    "@fluentui/theme": "^2.6.24",
-    "@fluentui/theme-samples": "^8.7.65",
-    "@fluentui/utilities": "^8.13.8",
+    "@fluentui/react-experiments": "^8.14.63",
+    "@fluentui/fluent2-theme": "^8.106.5",
+    "@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.68",
+    "@fluentui/utilities": "^8.13.9",
     "@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.106.6",
-    "@fluentui/react-hooks": "^8.6.19",
+    "@fluentui/react": "^8.106.9",
+    "@fluentui/react-hooks": "^8.6.20",
     "@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.18.1",
+    "@fluentui/react-components": "^9.18.6",
     "@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.1",
-    "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-theme": "^9.1.6",
-    "@fluentui/react-provider": "^9.4.3",
+    "@fluentui/react-components": "^9.18.6",
+    "@fluentui/react-icons": "^2.0.196",
+    "@fluentui/react-theme": "^9.1.7",
+    "@fluentui/react-provider": "^9.5.0",
     "@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.1"
+    "@fluentui/react-components": "^9.18.6"
   },
   "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.106.6",
+    "@fluentui/react": "^8.106.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,9 +10,9 @@
     "type-check": "tsc -b tsconfig.type.json"
   },
   "dependencies": {
-    "@fluentui/react": "^8.106.6",
-    "@fluentui/react-components": "^9.18.1",
-    "@fluentui/react-icons": "^2.0.175",
+    "@fluentui/react": "^8.106.9",
+    "@fluentui/react-components": "^9.18.6",
+    "@fluentui/react-icons": "^2.0.196",
     "@fluentui/web-components": "^2.5.12",
     "@microsoft/fast-element": "^1.11.0",
     "afterframe": "1.0.2",