Merge branch 'master' into feat/drawer-motion

* master: (37 commits)
  release (microsoft#28696)
  Fixing re-render issue for all charts when empty (microsoft#28321)
  feat(FluentProvider): emit errors on duplicate IDs (microsoft#28670)
  applying package updates
  fix(react-positioning): autoSize causing position update to reach maximum (microsoft#28689)
  fix(react-tags-preview): fix InteractionTag hover styles (microsoft#28686)
  Accordion: export AccordionHeaderProvider (microsoft#28542)
  feat(react-shared-contexts): add AnnounceContext (microsoft#28654)
  Added VR tests for Breadcrumb (microsoft#28653)
  fix(react-menu): use outline for menuItem focus ring (microsoft#28685)
  [Bug]: Tree, vertical spacing of branches and children is inconsistent (microsoft#28681)
  feaTt(react-tree): adds openItems and checkedItems to tree callback data (microsoft#28669)
  applying package updates
  Add mountNode prop to combos (microsoft#28661)
  react-tags-preview: add more vr test (microsoft#28582)
  chore: migrate to nx 16.1.4 (microsoft#28583)
  applying package updates
  chore: improves internal headless signature (microsoft#28651)
  fix: remove margin from icon when ToolbarButton is vertical (microsoft#28658)
  applying package updates
  ...

.eslintrc.json

@@ -1,4 +1,3 @@
-// Default eslintrc for packages without one, or files outside a package
 {
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -20,5 +19,12 @@
     "**/node_modules",
     "**/temp",
     "**/*.scss.ts"
+  ],
+  "overrides": [
+    {
+      "files": "*.json",
+      "parser": "jsonc-eslint-parser",
+      "rules": {}
+    }
   ]
 }

.github/CODEOWNERS

@@ -228,7 +228,6 @@ packages/react-components/react-virtualizer @microsoft/xc-uxe @Mitch-At-Work
 packages/react-components/react-skeleton @microsoft/cxe-red
 packages/tokens @microsoft/teams-prg
 packages/react-components/react-tags-preview @microsoft/cxe-coastal @microsoft/teams-prg
-packages/react-components/react-data-grid-react-window @microsoft/teams-prg
 packages/react-components/react-migration-v0-v9 @microsoft/teams-prg
 packages/react-components/react-datepicker-compat @microsoft/cxe-red @sopranopillow @khmakoto
 packages/react-components/react-migration-v8-v9 @microsoft/cxe-red @microsoft/cxe-coastal @geoffcoxmsft

.vscode/settings.json

@@ -45,6 +45,7 @@
   },
   "editor.rulers": [120],
   "eslint.workingDirectories": [{ "mode": "auto" }], // infer working directory based on .eslintrc/package.json location
+  "eslint.validate": ["json"],
   "files.associations": {
     "**/package.json.hbs": "json",
     "**/*.json.hbs": "jsonc",

apps/public-docsite-v9/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@fluentui/react-breadcrumb-preview": "*",
+    "@fluentui/react-tags-preview": "*",
     "@fluentui/react-datepicker-compat": "*",
     "@fluentui/react-migration-v8-v9": "*",
     "@fluentui/react-migration-v0-v9": "*",

apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx

@@ -114,6 +114,23 @@ function MyComponent(props) {
 
 Having multiple applications using `FluentProvider` on a single web page can cause interop problems when they come from different bundles, more details in [microsoft/fluentui#26496](https://github.com/microsoft/fluentui/pull/26496).
 
+### React 18
+
+It's possible to handle id prefixing natively with React 18 using the [`createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters) API by configuring `identifierPrefix` on it:
+
+```jsx
+import * as React from 'react';
+import { createRoot } from 'react-dom';
+
+const root = createRoot(document.getElementById('root'), {
+  identifierPrefix: 'APP1-',
+});
+
+root.render(<App />);
+```
+
+### React 16 & 17
+
 Adding the `IdPrefixProvider` component around the `FluentProvider` will resolve the issue of losing styling on components and IDs collisions in an application.
 
 ```jsx

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

@@ -23,6 +23,7 @@
     "@fluentui/react-accordion": "*",
     "@fluentui/react-avatar": "*",
     "@fluentui/react-badge": "*",
+    "@fluentui/react-breadcrumb-preview": "*",
     "@fluentui/react-button": "*",
     "@fluentui/react-card": "*",
     "@fluentui/react-checkbox": "*",

apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Breadcrumb } from '@fluentui/react-breadcrumb-preview';
+import { SampleBreadcrumbButtons, SampleBreadcrumbLinks, SampleBreadcrumbItems, steps } from './utils';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Breadcrumb Converged',
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Breadcrumb>;
+
+export const Appearance = () => (
+  <>
+    <h1>BreadcrumbButton</h1>
+    <h2>Transparent</h2>
+    <SampleBreadcrumbButtons appearance="transparent" />
+    <h2>Subtle</h2>
+    <SampleBreadcrumbButtons appearance="subtle" />
+
+    <h1>BreadcrumbLink</h1>
+    <h2>Transparent</h2>
+    <SampleBreadcrumbLinks appearance="transparent" />
+    <h2>Subtle</h2>
+    <SampleBreadcrumbLinks appearance="subtle" />
+  </>
+);
+
+Appearance.storyName = 'appearance';
+
+export const AppearanceDarkMode = getStoryVariant(Appearance, DARK_MODE);
+export const AppearanceHighContrast = getStoryVariant(Appearance, HIGH_CONTRAST);
+export const AppearanceRTL = getStoryVariant(Appearance, RTL);
+
+export const Size = () => (
+  <>
+    <h1>BreadcrumbButton</h1>
+    <SampleBreadcrumbButtons size="small" />
+    <SampleBreadcrumbButtons size="medium" />
+    <SampleBreadcrumbButtons size="large" />
+
+    <h1>BreadcrumbLink</h1>
+    <SampleBreadcrumbLinks size="small" />
+    <SampleBreadcrumbLinks size="medium" />
+    <SampleBreadcrumbLinks size="large" />
+
+    <h1>BreadcrumbItem</h1>
+    <SampleBreadcrumbItems size="small" />
+    <SampleBreadcrumbItems size="medium" />
+    <SampleBreadcrumbItems size="large" />
+  </>
+);
+
+Size.storyName = 'size';
+
+export const DividerType = () => (
+  <>
+    <h1>BreadcrumbButton</h1>
+    <SampleBreadcrumbButtons dividerType="chevron" />
+
+    <h1>BreadcrumbLink</h1>
+    <SampleBreadcrumbLinks dividerType="chevron" />
+
+    <h1>BreadcrumbItem</h1>
+    <SampleBreadcrumbItems dividerType="slash" size="small" />
+    <SampleBreadcrumbItems dividerType="chevron" />
+  </>
+);
+
+DividerType.storyName = 'divider type';

apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Steps } from 'storywright';
+import {
+  Breadcrumb,
+  BreadcrumbButton,
+  BreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbDivider,
+} from '@fluentui/react-breadcrumb-preview';
+import { bundleIcon, CalendarMonth20Filled, CalendarMonth20Regular } from '@fluentui/react-icons';
+const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular);
+
+export const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover('.breadcrumb-sample')
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  .mouseDown('.breadcrumb-sample')
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .focus('.breadcrumb-sample')
+  .snapshot('focused', { cropTo: '.testWrapper' })
+  .end();
+
+export const SampleBreadcrumbButtons = (props: BreadcrumbProps) => (
+  <Breadcrumb {...props} className="breadcrumb-sample">
+    <BreadcrumbItem>
+      <BreadcrumbButton icon={<CalendarMonth />}>Item 1</BreadcrumbButton>
+    </BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>
+      <BreadcrumbButton disabled>Item 2</BreadcrumbButton>
+    </BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>
+      <BreadcrumbButton current>Item 3</BreadcrumbButton>
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+export const SampleBreadcrumbLinks = (props: BreadcrumbProps) => (
+  <Breadcrumb {...props} className="breadcrumb-sample">
+    <BreadcrumbItem>
+      <BreadcrumbLink icon={<CalendarMonth />}>Item 1</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>
+      <BreadcrumbLink disabled>Item 2</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>
+      <BreadcrumbLink current>Item 3</BreadcrumbLink>
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+export const SampleBreadcrumbItems = (props: BreadcrumbProps) => (
+  <Breadcrumb {...props} className="breadcrumb-sample">
+    <BreadcrumbItem>Item 1</BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>Item 2</BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem current>Item 3</BreadcrumbItem>
+  </Breadcrumb>
+);

apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+
+import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover, MenuGroup, MenuDivider } from '@fluentui/react-menu';
+import { makeStyles, shorthands } from '@griffel/react';
+import { PositioningProps } from '@fluentui/react-positioning';
+import { Steps, StoryWright } from 'storywright';
+const useStyles = makeStyles({
+  wrapper: { display: 'flex' },
+  shortContainer: {
+    width: '200px',
+    height: '220px',
+    ...shorthands.border('2px', 'dashed', 'red'),
+    ...shorthands.padding('10px'),
+  },
+  longContainer: {
+    width: '200px',
+    height: '400px',
+    ...shorthands.border('2px', 'dashed', 'green'),
+    ...shorthands.padding('10px'),
+  },
+  scrollableMenuGroup: {
+    maxHeight: '150px',
+    overflowY: 'auto',
+  },
+  menuPopover: {
+    overflowX: 'hidden',
+  },
+});
+
+const ScrollableMenu = ({ overflowBoundary }: Pick<PositioningProps, 'overflowBoundary'>) => {
+  const styles = useStyles();
+  return (
+    <Menu open positioning={{ overflowBoundary, flipBoundary: overflowBoundary, autoSize: true }}>
+      <MenuTrigger disableButtonEnhancement>
+        <button>Menu</button>
+      </MenuTrigger>
+
+      <MenuPopover className={styles.menuPopover}>
+        <MenuList>
+          <MenuGroup className={styles.scrollableMenuGroup}>
+            <MenuItem>Cut</MenuItem>
+            <MenuItem>Paste</MenuItem>
+            <MenuItem>Edit</MenuItem>
+            <MenuItem>Undo</MenuItem>
+            <MenuItem>Redo</MenuItem>
+            <MenuItem disabled>Open File</MenuItem>
+            <MenuItem>Open Folder</MenuItem>
+          </MenuGroup>
+          <MenuDivider />
+          <MenuItem>New </MenuItem>
+          <MenuItem>New Window</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+const Example = () => {
+  const styles = useStyles();
+  const [shortOverflowBoundary, setShortOverflowBoundary] = React.useState<HTMLElement | null>(null);
+  const [longOverflowBoundary, setLongOverflowBoundary] = React.useState<HTMLElement | null>(null);
+
+  return (
+    <StoryWright steps={steps}>
+      <div className={styles.wrapper}>
+        <div className={styles.shortContainer} ref={setShortOverflowBoundary}>
+          <div>Short viewport:</div>
+          <ScrollableMenu overflowBoundary={shortOverflowBoundary} />
+        </div>
+
+        <div className={styles.longContainer} ref={setLongOverflowBoundary}>
+          <div>Long viewport:</div>
+          <ScrollableMenu overflowBoundary={longOverflowBoundary} />
+        </div>
+      </div>
+    </StoryWright>
+  );
+};
+
+const steps = new Steps().snapshot('default').end();
+export const ScrollableMenuSmallViewport = () => (
+  <StoryWright steps={steps}>
+    <Example />
+  </StoryWright>
+);

apps/vr-tests-react-components/src/stories/Menu/index.stories.tsx

@@ -3,6 +3,7 @@ import { ComponentMeta } from '@storybook/react';
 
 export { NestedSubmenusSmallViewportStacked } from './NestedMenuSmallViewportStacked.stories';
 export { NestedSubmenusSmallViewportFlipped } from './NestedMenuSmallViewportFlipped.stories';
+export { ScrollableMenuSmallViewport } from './ScrollableMenuSmallViewport.stories';
 
 export default {
   title: 'Menu',