Merge branch 'master' into rfc/z-index-handling

* master: (90 commits)
  fix(react-drawer): do not create global header/footer roles (microsoft#31799)
  release: applying package updates - react v8
  release: applying package updates - web-components
  Add 'allowParentArrowNavigation' prop to `ComboBox`. (microsoft#31805)
  Add drawer web component (microsoft#31521)
  fix: MenuButton is styled correctly when aria-expanded is a string (microsoft#31809)
  chore: Updating version of `@fluentui/react-icons` to `^2.0.245` (microsoft#31802)
  chore:(docs) Migrate e2e Cypress testing doc (microsoft#31796)
  chore:(docs) Update API Extractor file (microsoft#31651)
  chore: migrate to nx 18 (microsoft#31746)
  release: applying package updates - react v8
  release: applying package updates - web-components
  feat: update text to use element internals for custom states (microsoft#31770)
  chore(web-components): Remove define imports from story modules (microsoft#31622)
  fix(`merge-styles`): Correctly processing selectors when value is a class name and they are not wrapped in `selectors` wrapper (microsoft#31798)
  style(react-combobox): turn off react-compiler lints for non compliant code (microsoft#31795)
  docs: Add AriaLiveAnnouncer to all examples (microsoft#31794)
  fix(public-docsite-v9): disable storybook keyboard shortcuts (microsoft#31762)
  feat: V0 Attachment compact component (microsoft#31634)
  release: applying package updates - react v8
  ...

.github/CODEOWNERS

@@ -371,6 +371,8 @@ packages/react-components/react-carousel-preview/stories @microsoft/xc-uxe @micr
 packages/react-components/recipes @microsoft/fluentui-react @sopranopillow
 packages/react-components/react-motion-components-preview/library @microsoft/teams-prg
 packages/react-components/react-motion-components-preview/stories @microsoft/teams-prg
+packages/react-components/react-utilities-compat/library @microsoft/cxe-red
+packages/react-components/react-utilities-compat/stories @microsoft/cxe-red
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 ## Components

.github/github-docs-readme.md

@@ -18,7 +18,7 @@ https://docs.github.com/en/actions/using-workflows/about-workflows
 >
 > Originally this was a json configuration which we converted to yml via this tool https://github.com/1ES-microsoft/GitOps.PullRequestIssueManagement/tree/main/src/Tools/GitOps.PullRequestIssueManagement.JsonToYmlConverter
 
-GitOps bot - docs https://github.com/microsoft/GitOps/blob/main/docs/policies/resource-management.md
+GitOps bot - docs https://eng.ms/docs/products/gitops/apps/resource-management
 
 ## `triage-bot.config.json`
 

.github/policies/botRules.yml

@@ -171,7 +171,7 @@ configuration:
           - isOpen
           - isIssue
           - noActivitySince:
-              days: 150
+              days: 180
           - isNotLabeledWith:
               label: Needs Dev Input
           - isNotLabeledWith:
@@ -219,13 +219,11 @@ configuration:
         actions:
           - addReply:
               reply: >-
-                Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.
+                This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes.
 
-
-                *Still require assistance? Please, create a new issue with up-to date details.*
+                *Still require assistance? Please add comment - "keep open".*
           - addLabel:
               label: 'Resolution: Soft Close'
-          - closeIssue
       - description:
         frequencies:
           - hourly:
@@ -240,11 +238,9 @@ configuration:
               label: 'Resolution: Soft Close'
           - addReply:
               reply: >-
-                Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.
-
+                This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes.
 
-                *Still require assistance? Please, create a new issue with up-to date details.*
-          - closeIssue
+                *Still require assistance? Please add comment - "keep open".*
       - description:
         frequencies:
           - hourly:

.storybook/main.js

@@ -94,7 +94,7 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
   },
   /**
    * Programmatically enhance previewHead as inheriting just static file `preview-head.html` doesn't work in monorepo
-   * @see https://storybook.js.org/docs/react/addons/writing-presets#previewmanager-templates
+   * @see https://storybook.js.org/docs/addons/writing-presets#ui-configuration
    */
   previewHead: head => head + previewHeadTemplate,
 });

apps/public-docsite-v9/.storybook/manager-head.html

@@ -1,13 +1,7 @@
 <!--
   Override the default favicon used in the Storybook in the browser tab.
  -->
-<link rel="shortcut icon" href="https://www.microsoft.com/design/fluent/assets/favicons/favicon-192.png" />
-<link
-  rel="icon"
-  type="image/png"
-  href="https://www.microsoft.com/design/fluent/assets/favicons/favicon-192.png"
-  sizes="192x192"
-/>
+<link rel="shortcut icon" type="image/x-icon" href="https://react.fluentui.dev/favicon-192.ico" />
 <link href="/shell.css" rel="stylesheet" />
 
 <!-- Primary meta tags -->

apps/public-docsite-v9/.storybook/manager.js

@@ -4,13 +4,14 @@ import { ApplicationInsights } from '@microsoft/applicationinsights-web';
 import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from '@storybook/core-events';
 
 addons.setConfig({
+  enableShortcuts: false,
   theme: fluentStorybookTheme,
   showPanel: false,
 });
 
 addons.register('application-insights', api => {
   if (process.env.NODE_ENV === 'production') {
-    const { STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY } = process.env;
+    const STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY = process.env.STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY;
 
     if (STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY) {
       const appInsights = new ApplicationInsights({

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.Stack.stories.mdx

@@ -309,7 +309,7 @@ MDN documentation:
 
 ## horizontalAlign / verticalAlign
 
-horizontaAling/verticalAlign change which props they affect depending on your `flex-direction`.
+horizontalAlign/verticalAlign change which props they affect depending on your `flex-direction`.
 
 Here is a table you can follow for which prop to use for alignment:
 

apps/public-docsite-v9/src/Icons/IconsDescription.md

@@ -1,13 +1,12 @@
 The `@fluentui/react-icons` package provides [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons) icon set. Each icon within this set is encapsulated within a React component, utilizing SVG-based graphics. Icons are available in two distinct styles: `Filled` and `Regular`.
 
-<details>
-<summary>Sized icons vs unsized icons?</summary>
+## Sized icons vs unsized icons
 
 - **Unsized** icons (e.g., `SendRegular`, `SendFilled`, etc.) are set to `1em` in size and can be adjusted proportionally using the `fontSize` property.
 - **Sized** icons (e.g., `Send24Regular`, `Send32Regular`) are fixed to predetermined sizes and do not scale.
 
 As a general guideline, it's recommended to utilize unsized icons since the same instance of an icon can be reused multiple times. However, there are instances where icons may not scale effectively. For example, icons containing logos and signs often have varied glyph sizes. In such cases, it's advisable to opt for sized icons.
 
-</details>
+---
 
 You can preview <a href="#" data-sb-kind="icons-catalog--page">all icons in the catalog</a>.

apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeBestPractices.md

@@ -1,7 +1,4 @@
-<details>
-<summary>
- Best Practices
-</summary>
+## Best practices
 
 ### Do
 
@@ -11,5 +8,3 @@
 - **Prefer using `FluentProvider`.**
   `FluentProvider` generates CSS rules using `createCSSRuleFromTheme()` and should cover most cases. Only reach for `createCSSRuleFromTheme()` when
   `FluentProvider` cannot address your needs.
-
-</details>

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

@@ -6,6 +6,12 @@
 module.exports = {
   displayName: 'react-18-tests-v9',
   preset: '../../jest.preset.js',
+  // Heads up!
+  // Forces React to be resolved from the root node_modules to ensure the same instance is used across all packages
+  moduleNameMapper: {
+    '^react$': '<rootDir>/node_modules/react',
+    '^react-dom$': '<rootDir>/node_modules/react-dom',
+  },
   transform: {
     '^.+\\.tsx?$': [
       'ts-jest',

apps/react-18-tests-v9/package.json

@@ -20,6 +20,9 @@
   },
   "dependencies": {
     "@fluentui/react-components": "*",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.6",
     "react": "18.2.0",

apps/react-18-tests-v9/src/App.test.tsx

@@ -27,7 +27,7 @@ describe('App with React 18', () => {
       const elementProviderClassName = element.className.split(' ')[1];
       const matchingStyleTag = document.getElementById(elementProviderClassName);
 
-      expect(matchingStyleTag).toBeDefined;
+      expect(matchingStyleTag).toBeDefined();
     });
   });
 });

apps/react-18-tests-v9/src/createPresenceComponent.test.tsx

@@ -0,0 +1,84 @@
+import { createPresenceComponent, useEventCallback } from '@fluentui/react-components';
+import { act, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+const keyframes = [{ opacity: 0 }, { opacity: 1 }];
+const options = { duration: 500, fill: 'forwards' as const };
+
+const TestAtom = createPresenceComponent({
+  enter: { keyframes, ...options },
+  exit: { keyframes: keyframes.slice().reverse(), ...options },
+});
+const TestComponent: React.FC<{ appear?: boolean; finish?: () => void }> = props => {
+  const { appear, finish } = props;
+
+  const [visible, setVisible] = React.useState(true);
+  const onMotionFinish = useEventCallback(() => {
+    finish?.();
+  });
+
+  return (
+    <>
+      <button onClick={() => setVisible(v => !v)}>Click me</button>
+      <TestAtom appear={appear} onMotionFinish={onMotionFinish} visible={visible} unmountOnExit>
+        <div>Hello</div>
+      </TestAtom>
+    </>
+  );
+};
+
+// Heads up!
+//
+// Unfortunately, jsdom (the optional environment for Jest) does not support the Web Animations API, which is used by
+// createPresenceComponent() to animate elements.
+//
+// This test suite ensures that the component works correctly in tests using that environment.
+
+describe('createPresenceComponent', () => {
+  it('does not support .animate()', () => {
+    expect(Element.prototype.animate).toBeUndefined();
+  });
+
+  it('unmounts when state changes', async () => {
+    const finish = jest.fn();
+
+    const { getByText, queryByText } = render(<TestComponent finish={finish} />);
+    expect(queryByText('Hello')).toBeInTheDocument();
+
+    // ---
+
+    await act(async () => {
+      await userEvent.click(getByText('Click me'));
+    });
+
+    expect(finish).toHaveBeenCalledTimes(1);
+    expect(queryByText('Hello')).not.toBeInTheDocument();
+
+    // ---
+
+    await act(async () => {
+      await userEvent.click(getByText('Click me'));
+    });
+
+    expect(finish).toHaveBeenCalledTimes(2);
+    expect(queryByText('Hello')).toBeInTheDocument();
+  });
+
+  it('handles "appear"', async () => {
+    const finish = jest.fn();
+    const { getByText, queryByText } = render(<TestComponent appear finish={finish} />);
+
+    expect(finish).toHaveBeenCalledTimes(1);
+    expect(queryByText('Hello')).toBeInTheDocument();
+
+    // ---
+
+    await act(async () => {
+      await userEvent.click(getByText('Click me'));
+    });
+
+    expect(finish).toHaveBeenCalledTimes(2);
+    expect(queryByText('Hello')).not.toBeInTheDocument();
+  });
+});

apps/react-18-tests-v9/tsconfig.spec.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "dist",
-    "types": ["jest", "node"]
+    "types": ["jest", "node", "@testing-library/jest-dom"]
   },
   "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
 }

apps/vr-tests-react-components/package.json

@@ -34,7 +34,7 @@
     "@fluentui/react-divider": "*",
     "@fluentui/react-drawer": "*",
     "@fluentui/react-field": "*",
-    "@fluentui/react-icons": "^2.0.239",
+    "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-image": "*",
     "@fluentui/react-infolabel": "*",
     "@fluentui/react-input": "*",

apps/vr-tests-web-components/src/stories/link/link.stories.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { LinkDefinition, FluentDesignSystem } from '@fluentui/web-components';
+
+LinkDefinition.define(FluentDesignSystem.registry);
+
+const linkId = 'link-id';
+
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${linkId}`)
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  .mouseDown(`#${linkId}`)
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'Link',
+  decorators: [
+    (story: () => React.ReactElement) => {
+      return (
+        <StoryWright steps={steps}>
+          <div className="testWrapper" style={{ width: '300px' }}>
+            {story()}
+          </div>
+        </StoryWright>
+      );
+    },
+  ],
+};
+
+export const Default = () => parse(`<fluent-link id="${linkId}">Default</fluent-link>`);
+
+export const Subtle = () => parse(`<fluent-link id="${linkId}" appearance="subtle">Primary</fluent-link>`);
+
+export const Inline = () =>
+  parse(`<p>This is an <fluent-link id="${linkId}" inline>inline link</fluent-link> used alongside text</p>.`);
+
+export const WithLongText = () =>
+  parse(`
+    <style>
+    .max-width {
+      display: block;
+      width: 250px;
+    }
+    </style>
+    <p class="max-width">
+    This paragraph contains a link which is very long.
+    <fluent-link href="#">Fluent links wrap correctly between lines when they are very long.</fluent-link> This is
+    because they are inline elements.
+    </p>
+`);

azure-pipelines.release-vnext.yml

@@ -84,7 +84,7 @@ extends:
                 displayName: yarn build
 
               - script: |
-                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-vNext.config.js
+                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-vNext.config.js --message 'release: applying package updates - react-components'
                   git reset --hard origin/master
                 env:
                   GITHUB_PAT: $(githubPAT)

azure-pipelines.release.web-components.yml

@@ -75,7 +75,7 @@ extends:
                 displayName: Build, [test], Lint
 
               - script: |
-                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-web-components.config.js
+                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-web-components.config.js --message 'release: applying package updates - web-components'
                   git reset --hard origin/master
                 env:
                   GITHUB_PAT: $(githubPAT)

azure-pipelines.release.yml

@@ -120,7 +120,7 @@ extends:
                 displayName: yarn bundle
 
               - script: |
-                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-v8.config.js
+                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-v8.config.js --message 'release: applying package updates - react v8'
                   git reset --hard origin/master
                 env:
                   GITHUB_PAT: $(githubPAT)

change/@fluentui-react-accordion-7c04c866-80b9-42c1-9332-1272b109bc22.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Update react-icons package to ^2.0.245",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-accordion-fb735b51-0d39-4ec7-9891-0440b40eeb9b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: add eslint react-compiler",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-aria-98a2ae86-abde-4e51-888a-d17e8e7badba.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add options to manually show/hide focus visibility on active descendants, and scroll the active item into view",
+  "packageName": "@fluentui/react-aria",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}