Merge branch 'master' into feat/tokens/add-zindexes

* master: (77 commits)
  fix(react-drawer): update scroll state when children changes (microsoft#32818)
  feat(react-storybook-addon): improve addon to more readable names (microsoft#32815)
  chore: cleanup react-carousel-preview (microsoft#32475)
  feat(storybook): add rtl/ltr toggle storybook addon (microsoft#32814)
  Carousel: Storybook updates and fixing exports/focus (microsoft#32457)
  release: applying package updates - react v8
  release: applying package updates - web-components
  Update d3 dependency versions to 3.x.x and 4.x.x (microsoft#32463)
  RFC: Extended Design Tokens for Fluent UI React (microsoft#32058)
  update doc to reflect setTheme function change (microsoft#32490)
  fix (react-dialog): Use consistent rounding for clientHeight and innerHeight (microsoft#32480)
  fix(public-doscite-v9): global styles should not be applied to story elements (microsoft#32472)
  feat(workspace-plugin): implement verify-packaging executor (microsoft#32403)
  release: applying package updates - react-components
  Add strokeDasharray property when optimizeLargeData is true (microsoft#32494)
  fix(TreeItemLayout): Actions should not unmount between successive mouse events (microsoft#32477)
  release: applying package updates - react v8
  bugfix(react-tree): recover from tabIndex=-1 when TreeItem is removed (microsoft#32442)
  Fix onResolveSuggestions not being called after component is remounted in react 18 strict mode (microsoft#28227)
  fix(codeowners): update most packages owned by cxe-red with cxe-prg (microsoft#32445)
  ...

.storybook/docs-root.css

@@ -15,12 +15,12 @@
   margin-top: 49px;
 }
 
-#storybook-docs details {
+#storybook-docs details:not(.sbdocs-preview details) {
   position: relative;
   z-index: 99;
 }
 
-#storybook-docs .sbdocs:not(.sbdocs-preview) p {
+#storybook-docs .sbdocs p:not(.sbdocs-preview p) {
   font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
     sans-serif;
   font-size: 18px;
@@ -45,13 +45,13 @@
   border-radius: 24px;
 }
 
-#storybook-docs .sbdocs:not(.sbdocs-preview) hr {
+#storybook-docs .sbdocs hr:not(.sbdocs-preview hr) {
   margin: 48px 0;
   height: 0;
   border-top: 1px solid #ebebeb;
 }
 
-#storybook-docs .sbdocs h2 {
+#storybook-docs .sbdocs h2:not(.sbdocs-preview h2) {
   font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
     sans-serif;
   font-size: 24px;
@@ -64,7 +64,7 @@
   padding: 48px 0 0 0;
 }
 
-#storybook-docs .sbdocs h2 code {
+#storybook-docs .sbdocs h2 code:not(.sbdocs-preview h2 code) {
   border-radius: 4px;
   font-size: 20px;
 }
@@ -92,7 +92,7 @@
   margin: -40px 0 0;
 }
 
-#storybook-docs .sbdocs:not(.sbdocs-preview) li {
+#storybook-docs .sbdocs li:not(.sbdocs-preview li) {
   font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
     sans-serif;
   font-size: 16px;
@@ -104,11 +104,11 @@
   margin-top: 8px;
 }
 
-#storybook-docs .sbdocs:not(.sbdocs-preview) ul {
+#storybook-docs .sbdocs ul:not(.sbdocs-preview ul) {
   margin: 12px 0;
 }
 
-#storybook-docs .sbdocs-ul .sbdocs:not(.sbdocs-preview) li {
+#storybook-docs .sbdocs-ul li:not(.sbdocs-preview .sbdocs-ul li) {
   list-style: none;
   position: relative;
 }
@@ -190,26 +190,26 @@
   text-decoration: underline;
 }
 
-/* Styles for Github-flawored Markdown tables */
-#storybook-docs table:not(.docblock-argstable) {
+/* Styles for Github-flavored Markdown tables */
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) {
   margin: 16px 0px;
   font-size: 14px;
   line-height: 24px;
   padding: 0;
   border-collapse: collapse;
 }
-#storybook-docs table:not(.docblock-argstable) tr {
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) tr {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-#storybook-docs table:not(.docblock-argstable) th {
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) th {
   font-weight: bold;
   color: rgb(51, 51, 51);
   border: 1px solid rgba(0, 0, 0, 0.1);
   padding: 6px 13px;
 }
 
-#storybook-docs table:not(.docblock-argstable) td {
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) td {
   border: 1px solid rgba(0, 0, 0, 0.1);
   padding: 6px 13px;
 }
@@ -276,7 +276,7 @@
   line-height: 21px;
 }
 
-#storybook-docs code,
+#storybook-docs code:not(.sbdocs-preview code),
 #storybook-docs .docblock-argstable tbody tr td:nth-child(3) > div > span,
 #storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
 #storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
@@ -313,7 +313,7 @@
   white-space: normal;
 }
 
-#storybook-docs code {
+#storybook-docs code:not(.sbdocs-preview code) {
   padding: 0.1em 0.2em;
   display: inline-block;
   background-color: rgba(17, 16, 15, 0.1);
@@ -426,7 +426,7 @@ h1.fluent {
   letter-spacing: -0.16px;
 }
 
-h1 .fluent-version {
+h1.fluent .fluent-version {
   display: block;
   font-size: 24px; /* --font-size-base-600 */
   line-height: 32px;

apps/public-docsite-v9/src/Concepts/WebComponentsInterop/UsingFluentReactWithWebComponents.stories.mdx

@@ -31,6 +31,8 @@ import { FluentProvider, webLightTheme, Button } from '@fluentui/react-component
 In the above example, note that `FluentProvider` sits outside the shadow DOM. When `FluentProvider` is inside the shadow
 DOM styling/theming will not work as expected.
 
+> ⚠️ `FluentProvider` must be in the light DOM for this method to work.
+
 ```tsx
 // ❌ This will not render correctly, for example purposes only ❌
 import { root } from '@fluentui-contrib/react-shadow';

apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import {
   DocsContext,
-  ArgTypes,
+  ArgsTable,
   Title,
   Subtitle,
   Description,
   HeaderMdx,
   Primary,
   Stories,
+  type DocsContextProps,
 } from '@storybook/addon-docs';
 import type { SBEnumType } from '@storybook/csf';
 import { makeStyles, shorthands, tokens, Link, Text } from '@fluentui/react-components';
@@ -135,6 +136,8 @@ export const FluentDocsPage = () => {
   const primaryStory = stories[0];
   const primaryStoryContext = context.getStoryContext(primaryStory);
 
+  assertStoryMetaValues(primaryStory);
+
   const dir = primaryStoryContext.parameters?.dir ?? primaryStoryContext.globals?.[DIR_ID] ?? 'ltr';
   const selectedTheme = themes.find(theme => theme.id === primaryStoryContext.globals![THEME_ID]);
 
@@ -171,7 +174,7 @@ export const FluentDocsPage = () => {
             {primaryStory.name}
           </HeaderMdx>
           <Primary />
-          <ArgTypes of={primaryStory.component} />
+          <ArgsTable of={primaryStory.component} />
           {primaryStory.argTypes.as && primaryStory.argTypes.as?.type?.name === 'enum' && (
             <div className={styles.nativeProps}>
               <InfoFilled className={styles.nativePropsIcon} />
@@ -196,3 +199,15 @@ export const FluentDocsPage = () => {
     </div>
   );
 };
+
+function assertStoryMetaValues(story: ReturnType<DocsContextProps['componentStories']>[number]) {
+  if (story.component === null) {
+    throw new Error(
+      [
+        '🚨 Invalid Story Meta declaration:',
+        `- primaryStory.component of componentId:${story.componentId} is "null"`,
+        '- to resolve this error, please update "component" property value in your story definition to reference a React Component or remove it if it is not needed.',
+      ].join('\n'),
+    );
+  }
+}

azure-pipelines.release-vnext-nightly.yml

@@ -83,15 +83,15 @@ extends:
                 displayName: 'Bump and commit nightly versions'
 
               - script: |
-                  yarn nx run react-components:build --nxBai
+                  yarn nx run react-components:build --nxBail
                 displayName: build
 
               - script: |
-                  yarn nx run react-components:lint --nxBai
+                  yarn nx run react-components:lint --nxBail
                 displayName: lint
 
               - script: |
-                  yarn nx run react-components:test --nxBai
+                  yarn nx run react-components:test --nxBail
                 displayName: test
 
               - script: |

azure-pipelines.release-vnext.yml

@@ -70,15 +70,15 @@ extends:
                 displayName: yarn
 
               - script: |
-                  yarn nx run-many -t build -p tag:vNext --exclude 'tag:tools,apps/**' --nxBail --production
+                  FLUENT_PROD_BUILD=true yarn nx run-many -t build -p tag:vNext --exclude 'tag:tools,tag:type:stories,apps/**' --nxBail
                 displayName: build
 
               - script: |
-                  yarn nx run-many -t test -p tag:vNext --exclude 'tag:tools,apps/**' --nxBail
+                  FLUENT_PROD_BUILD=true yarn nx run-many -t test -p tag:vNext --exclude 'tag:tools,tag:type:stories,apps/**' --nxBail
                 displayName: test
 
               - script: |
-                  yarn nx run-many -t lint -p tag:vNext --exclude 'tag:tools,apps/**' --nxBail
+                  FLUENT_PROD_BUILD=true yarn nx run-many -t lint -p tag:vNext --exclude 'tag:tools,tag:type:stories,apps/**' --nxBail
                 displayName: lint
 
               - script: |

azure-pipelines.release.tools.yml

@@ -59,15 +59,15 @@ extends:
                 displayName: yarn
 
               - script: |
-                  yarn nx run-many -t build -p tag:tools --exclude 'apps/**' --nxBail --production
+                  FLUENT_PROD_BUILD=true yarn nx run-many -t build -p tag:tools --exclude 'apps/**' --nxBail
                 displayName: build
 
               - script: |
-                  yarn nx run-many -t test -p tag:tools --exclude 'apps/**' --nxBail
+                  FLUENT_PROD_BUILD=true yarn nx run-many -t test -p tag:tools --exclude 'apps/**' --nxBail
                 displayName: test
 
               - script: |
-                  yarn nx run-many -t lint -p tag:tools --exclude 'apps/**' --nxBail
+                  FLUENT_PROD_BUILD=true yarn nx run-many -t lint -p tag:tools --exclude 'apps/**' --nxBail
                 displayName: lint
 
               - script: |

change/@fluentui-react-carousel-preview-3334f542-c831-4e06-8558-bad1d236135e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: cleanup before the release",
+  "packageName": "@fluentui/react-carousel-preview",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-carousel-preview-f1b94266-3a02-4f4f-924e-a6b3b229ec0f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Add CarouselNavContainer for easy layout options, add missing exports and cleanup focus behavior of multiple cards",
+  "packageName": "@fluentui/react-carousel-preview",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-a4232c34-ea7b-4222-a164-74574abfa9e1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Adjust window height comparison in fractional cases.",
+  "packageName": "@fluentui/react-dialog",
+  "email": "owcampbe@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-drawer-6bf581dd-1ead-41a7-8f5c-1e543da04967.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update scroll state when children changes",
+  "packageName": "@fluentui/react-drawer",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}