From 1a8fcdedfaa41b4478342d3f7aa49f58a85c07dd Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Mon, 24 Jul 2023 12:13:48 -0700
Subject: [PATCH 01/37] fix: Datepicker renders input description if
 inputProps.onRenderDescription is set (#27784)

---
 ...luentui-react-75983ba2-b5ea-4e4e-9578-6fc0293ce309.json | 7 +++++++
 .../react/src/components/DatePicker/DatePicker.base.tsx    | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-react-75983ba2-b5ea-4e4e-9578-6fc0293ce309.json

diff --git a/change/@fluentui-react-75983ba2-b5ea-4e4e-9578-6fc0293ce309.json b/change/@fluentui-react-75983ba2-b5ea-4e4e-9578-6fc0293ce309.json
new file mode 100644
index 0000000000000..712b59243816d
--- /dev/null
+++ b/change/@fluentui-react-75983ba2-b5ea-4e4e-9578-6fc0293ce309.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Datepicker renders input description if onRenderDescription is passed in",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/DatePicker/DatePicker.base.tsx b/packages/react/src/components/DatePicker/DatePicker.base.tsx
index 5547cb160aa12..e71be0e550c67 100644
--- a/packages/react/src/components/DatePicker/DatePicker.base.tsx
+++ b/packages/react/src/components/DatePicker/DatePicker.base.tsx
@@ -410,7 +410,7 @@ export const DatePickerBase: React.FunctionComponent<IDatePickerProps> = React.f
   const renderTextfieldDescription = (inputProps: ITextFieldProps, defaultRender: IRenderFunction<ITextFieldProps>) => {
     return (
       <>
-        {inputProps.description ? defaultRender(inputProps) : null}
+        {inputProps.description || inputProps.onRenderDescription ? defaultRender(inputProps) : null}
         <div aria-live="assertive" className={classNames.statusMessage}>
           {statusMessage}
         </div>

From e6e662c52a7a7d9c4a9f95e01e1e2194f4e72b04 Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Mon, 24 Jul 2023 12:14:55 -0700
Subject: [PATCH 02/37] fix: do not dismiss editable comboboxes on scroll or
 resize immediately after opening (#28591)

---
 ...-f1224d11-1ccf-4845-805f-fe84e7b89377.json |  7 +++++
 .../src/components/ComboBox/ComboBox.tsx      | 31 +++++++++++++++++--
 .../src/components/pickers/BasePicker.tsx     | 23 ++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-f1224d11-1ccf-4845-805f-fe84e7b89377.json

diff --git a/change/@fluentui-react-f1224d11-1ccf-4845-805f-fe84e7b89377.json b/change/@fluentui-react-f1224d11-1ccf-4845-805f-fe84e7b89377.json
new file mode 100644
index 0000000000000..99c5e0234c7bb
--- /dev/null
+++ b/change/@fluentui-react-f1224d11-1ccf-4845-805f-fe84e7b89377.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: do not dismiss editable comboboxes on scroll or resize immediately after opening",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index e71d282f39486..630e7ba599f96 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -293,6 +293,10 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
   private _async: Async;
   private _events: EventGroup;
 
+  // props to prevent dismiss on scroll/resize immediately after opening
+  private _overrideScrollDismiss = false;
+  private _overrideScrollDimissTimeout: number;
+
   constructor(props: IComboBoxInternalProps) {
     super(props);
 
@@ -403,8 +407,15 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
 
     this._notifyPendingValueChanged(prevState);
 
-    if (isOpen && !prevState.isOpen && onMenuOpen) {
-      onMenuOpen();
+    if (isOpen && !prevState.isOpen) {
+      // handle dismiss buffer after suggestions are opened
+      this._overrideScrollDismiss = true;
+      this._async.clearTimeout(this._overrideScrollDimissTimeout);
+      this._overrideScrollDimissTimeout = this._async.setTimeout(() => {
+        this._overrideScrollDismiss = false;
+      }, 100);
+
+      onMenuOpen?.();
     }
 
     if (!isOpen && prevState.isOpen && onMenuDismissed) {
@@ -835,6 +846,20 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
       : this._processInputChangeWithoutFreeform(updatedValue);
   };
 
+  /**
+   * Do not dismiss if the window resizes or scrolls within 100ms of opening
+   * This prevents the Android issue where pickers immediately dismiss on open, because the keyboard appears
+   * @param ev - the event triggering the dismiss check
+   * @returns a boolean indicating whether the callout dismissal should be prevented
+   */
+  private _preventDismissOnScrollOrResize(ev: Event) {
+    if (this._overrideScrollDismiss && (ev.type === 'scroll' || ev.type === 'resize')) {
+      return true;
+    }
+
+    return false;
+  }
+
   /**
    * Process the new input's new value when the combo box allows freeform entry
    * @param updatedValue - the input's newly changed value
@@ -1371,6 +1396,8 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
         calloutMaxWidth={dropdownMaxWidth ? dropdownMaxWidth : comboBoxMenuWidth}
         hidden={persistMenu ? !isOpen : undefined}
         shouldRestoreFocus={shouldRestoreFocus}
+        // eslint-disable-next-line react/jsx-no-bind
+        preventDismissOnEvent={(ev: Event) => this._preventDismissOnScrollOrResize(ev)}
       >
         {onRenderUpperContent(this.props, this._onRenderUpperContent)}
         <div className={this._classNames.optionsContainerWrapper} ref={this._comboBoxMenu}>
diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx
index 3aed937602412..6a6de045a6aed 100644
--- a/packages/react/src/components/pickers/BasePicker.tsx
+++ b/packages/react/src/components/pickers/BasePicker.tsx
@@ -111,6 +111,8 @@ export class BasePicker<T, P extends IBasePickerProps<T>>
   private _styledSuggestions = getStyledSuggestions(this.SuggestionOfProperType);
   private _id: string;
   private _async: Async;
+  private _overrideScrollDismiss = false;
+  private _overrideScrollDimissTimeout: number;
 
   public static getDerivedStateFromProps(newProps: IBasePickerProps<any>) {
     if (newProps.selectedItems) {
@@ -175,6 +177,15 @@ export class BasePicker<T, P extends IBasePickerProps<T>>
         }
       }
     }
+
+    // handle dismiss buffer after suggestions are opened
+    if (this.state.suggestionsVisible && !oldState.suggestionsVisible) {
+      this._overrideScrollDismiss = true;
+      this._async.clearTimeout(this._overrideScrollDimissTimeout);
+      this._overrideScrollDimissTimeout = this._async.setTimeout(() => {
+        this._overrideScrollDismiss = false;
+      }, 100);
+    }
   }
 
   public componentWillUnmount(): void {
@@ -356,6 +367,8 @@ export class BasePicker<T, P extends IBasePickerProps<T>>
         onDismiss={this.dismissSuggestions}
         directionalHint={DirectionalHint.bottomLeftEdge}
         directionalHintForRTL={DirectionalHint.bottomRightEdge}
+        // eslint-disable-next-line react/jsx-no-bind
+        preventDismissOnEvent={(ev: Event) => this._preventDismissOnScrollOrResize(ev)}
         {...this.props.pickerCalloutProps}
       >
         <StyledTypedSuggestions
@@ -953,6 +966,16 @@ export class BasePicker<T, P extends IBasePickerProps<T>>
     );
   }
 
+  // do not dismiss if the window resizes or scrolls within 100ms of opening
+  // this prevents the Android issue where pickers immediately dismiss on open, because the keyboard appears
+  private _preventDismissOnScrollOrResize(ev: Event) {
+    if (this._overrideScrollDismiss && (ev.type === 'scroll' || ev.type === 'resize')) {
+      return true;
+    }
+
+    return false;
+  }
+
   /** If suggestions are still loading after a predefined amount of time, set state to show user alert */
   private _startLoadTimer() {
     this._async.setTimeout(() => {

From fe5d70f04fa3ad62d10da9cd19662a7bcfb771b2 Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Mon, 24 Jul 2023 15:54:35 -0700
Subject: [PATCH 03/37] fix: DetailsColumn tooltip shows on focus, is
 associated via aria-describedby (#28604)

---
 ...-aea800d3-31d8-4c2c-a34f-9b91f4d2463d.json |  7 +++
 .../DetailsList/DetailsColumn.base.tsx        | 22 ++++++++--
 .../DetailsList/DetailsColumn.test.tsx        | 38 +++++++++++++++-
 .../__snapshots__/DetailsColumn.test.tsx.snap | 20 +++++----
 .../__snapshots__/DetailsHeader.test.tsx.snap | 18 ++++++++
 .../__snapshots__/DetailsList.test.tsx.snap   | 44 +++++++++++++++++++
 .../__snapshots__/DetailsListV2.test.tsx.snap | 44 +++++++++++++++++++
 .../__snapshots__/DetailsRow.test.tsx.snap    | 24 ++++++++++
 8 files changed, 203 insertions(+), 14 deletions(-)
 create mode 100644 change/@fluentui-react-aea800d3-31d8-4c2c-a34f-9b91f4d2463d.json

diff --git a/change/@fluentui-react-aea800d3-31d8-4c2c-a34f-9b91f4d2463d.json b/change/@fluentui-react-aea800d3-31d8-4c2c-a34f-9b91f4d2463d.json
new file mode 100644
index 0000000000000..7586aa0c657ce
--- /dev/null
+++ b/change/@fluentui-react-aea800d3-31d8-4c2c-a34f-9b91f4d2463d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: DetailsColumn tooltip shows on focus, and is associated via aria-describedby",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/DetailsList/DetailsColumn.base.tsx b/packages/react/src/components/DetailsList/DetailsColumn.base.tsx
index 387e31c4320b5..b8363c78f5a08 100644
--- a/packages/react/src/components/DetailsList/DetailsColumn.base.tsx
+++ b/packages/react/src/components/DetailsList/DetailsColumn.base.tsx
@@ -13,6 +13,7 @@ import type {
   IDetailsColumnRenderTooltipProps,
   IDetailsColumnFilterIconProps,
 } from './DetailsColumn.types';
+import { ITooltipHost } from '../Tooltip/TooltipHost.types';
 
 const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
 
@@ -46,6 +47,7 @@ export class DetailsColumnBase extends React.Component<IDetailsColumnProps> {
   private _root = React.createRef<HTMLDivElement>();
   private _dragDropSubscription?: IDisposable;
   private _classNames: IProcessedStyleSet<IDetailsColumnStyles>;
+  private _tooltipRef = React.createRef<ITooltipHost>();
 
   constructor(props: IDetailsColumnProps) {
     super(props);
@@ -94,13 +96,14 @@ export class DetailsColumnBase extends React.Component<IDetailsColumnProps> {
     const hasInnerButton =
       column.columnActionsMode !== ColumnActionsMode.disabled &&
       (column.onColumnClick !== undefined || this.props.onColumnClick !== undefined);
+    // use aria-describedby to point to the tooltip if the tooltip is not using the ariaLabel string
+    const shouldAssociateTooltip = this.props.onRenderColumnHeaderTooltip
+      ? !column.ariaLabel
+      : this._hasAccessibleDescription();
     const accNameDescription = {
       'aria-label': column.ariaLabel ? column.ariaLabel : column.isIconOnly ? column.name : undefined,
       'aria-labelledby': column.ariaLabel || column.isIconOnly ? undefined : `${parentId}-${column.key}-name`,
-      'aria-describedby':
-        !this.props.onRenderColumnHeaderTooltip && this._hasAccessibleDescription()
-          ? `${parentId}-${column.key}-tooltip`
-          : undefined,
+      'aria-describedby': shouldAssociateTooltip ? `${parentId}-${column.key}-tooltip` : undefined,
     };
 
     return (
@@ -127,6 +130,8 @@ export class DetailsColumnBase extends React.Component<IDetailsColumnProps> {
           }}
           data-automationid={'ColumnsHeaderColumn'}
           data-item-key={column.key}
+          onBlur={this._onColumnBlur}
+          onFocus={this._onColumnFocus}
         >
           {isDraggable && (
             <IconComponent iconName="GripperBarVertical" className={classNames.gripperBarVerticalStyle} />
@@ -137,6 +142,7 @@ export class DetailsColumnBase extends React.Component<IDetailsColumnProps> {
               id: `${parentId}-${column.key}-tooltip`,
               setAriaDescribedBy: false,
               column,
+              componentRef: this._tooltipRef,
               content: column.columnActionsMode !== ColumnActionsMode.disabled ? column.ariaLabel : '',
               children: (
                 <span
@@ -270,6 +276,14 @@ export class DetailsColumnBase extends React.Component<IDetailsColumnProps> {
     }
   };
 
+  private _onColumnBlur = () => {
+    this._tooltipRef.current && this._tooltipRef.current.dismiss();
+  };
+
+  private _onColumnFocus = () => {
+    this._tooltipRef.current && this._tooltipRef.current.show();
+  };
+
   private _getColumnDragDropOptions(): IDragDropOptions {
     const { columnIndex } = this.props;
     const options = {
diff --git a/packages/react/src/components/DetailsList/DetailsColumn.test.tsx b/packages/react/src/components/DetailsList/DetailsColumn.test.tsx
index bcd60c3e371e1..9a58c884da516 100644
--- a/packages/react/src/components/DetailsList/DetailsColumn.test.tsx
+++ b/packages/react/src/components/DetailsList/DetailsColumn.test.tsx
@@ -4,6 +4,7 @@ import { ColumnActionsMode } from './DetailsList.types';
 import { mount } from 'enzyme';
 import { DetailsList } from './DetailsList';
 import { TooltipHost } from '../../Tooltip';
+import { resetIds } from '../../Utilities';
 import * as renderer from 'react-test-renderer';
 import type { IColumn, IDetailsHeaderProps } from './DetailsList.types';
 import type { IRenderFunction } from '../../Utilities';
@@ -14,6 +15,7 @@ let baseColumn: IColumn;
 
 describe('DetailsColumn', () => {
   beforeEach(() => {
+    resetIds();
     mockOnColumnClick = jest.fn();
     baseColumn = {
       key: '1',
@@ -184,11 +186,45 @@ describe('DetailsColumn', () => {
     expect(component.exists(`#${referenceId}`)).toBe(true);
   });
 
-  it('does not render invalid aria-describedby if custom DetailsHeader has onRenderColumnHeaderTooltip', () => {
+  it('renders valid aria-describedby pointing to a custom tooltip not set using ariaLabel', () => {
     const column: IColumn = { ...baseColumn, isFiltered: true, filterAriaLabel: 'Foo' };
     let component: any;
     const columns = [column];
 
+    component = mount(
+      <DetailsList
+        items={[]}
+        setKey={'key1'}
+        initialFocusedIndex={0}
+        skipViewportMeasures={true}
+        columns={columns}
+        onRenderDetailsHeader={(props: IDetailsHeaderProps, defaultRenderer?: IRenderFunction<IDetailsHeaderProps>) => {
+          return defaultRenderer!({
+            ...props,
+            onRenderColumnHeaderTooltip: (
+              tooltipProps: ITooltipHostProps,
+              tooltipRenderer?: IRenderFunction<ITooltipHostProps>,
+            ) => {
+              return <TooltipHost {...tooltipProps} content="foo" />;
+            },
+          });
+        }}
+        componentRef={ref => (component = ref)}
+        onShouldVirtualize={() => false}
+      />,
+    );
+
+    const ariaDescribedByEl = component.find('[aria-describedby]').first().getDOMNode();
+    const referenceId = ariaDescribedByEl.getAttribute('aria-describedby');
+
+    expect(component.exists(`#${referenceId}`)).toBe(true);
+  });
+
+  it('does not render invalid aria-describedby if custom DetailsHeader has onRenderColumnHeaderTooltip', () => {
+    const column: IColumn = { ...baseColumn, isFiltered: true, ariaLabel: 'Foo', filterAriaLabel: 'Foo' };
+    let component: any;
+    const columns = [column];
+
     component = mount(
       <DetailsList
         items={[]}
diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap
index 67ec0d86b8e8d..523eacc938059 100644
--- a/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap
+++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap
@@ -78,7 +78,7 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
                 display: block;
               }
           data-automationid="DetailsHeader"
-          data-focuszone-id="FocusZone44"
+          data-focuszone-id="FocusZone2"
           onFocus={[Function]}
           onKeyDown={[Function]}
           onMouseDownCapture={[Function]}
@@ -86,7 +86,7 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
           role="row"
         >
           <div
-            aria-labelledby="header43-checkTooltip"
+            aria-labelledby="header1-checkTooltip"
             className=
                 ms-DetailsHeader-cell
                 ms-DetailsHeader-cellIsCheck
@@ -192,7 +192,7 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
                 data-automationid="DetailsRowCheck"
                 data-is-focusable={true}
                 data-selection-toggle={true}
-                id="header43-check"
+                id="header1-check"
                 role="checkbox"
                 tabIndex={-1}
               >
@@ -388,6 +388,8 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
             data-is-draggable={false}
             data-item-key="1"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -408,8 +410,8 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
                   }
             >
               <span
-                aria-describedby="header43-1-tooltip"
-                aria-labelledby="header43-1-name"
+                aria-describedby="header1-1-tooltip"
+                aria-labelledby="header1-1-name"
                 className=
                     ms-DetailsHeader-cellTitle
                     {
@@ -441,7 +443,7 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
                       z-index: 1;
                     }
                 data-is-focusable="true"
-                id="header43-1"
+                id="header1-1"
                 onClick={[Function]}
                 onContextMenu={[Function]}
                 role="button"
@@ -456,7 +458,7 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
                         overflow: hidden;
                         text-overflow: ellipsis;
                       }
-                  id="header43-1-name"
+                  id="header1-1-name"
                 >
                   Foo
                 </span>
@@ -514,7 +516,7 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
                   width: 1px;
                 }
             hidden={true}
-            id="header43-1-tooltip"
+            id="header1-1-tooltip"
           >
             Foo
           </label>
@@ -548,7 +550,7 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
                   min-height: 1px;
                   min-width: 100%;
                 }
-            data-focuszone-id="FocusZone45"
+            data-focuszone-id="FocusZone3"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyDown={[Function]}
diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
index bb2d072e6a1a9..4f41dafb7defd 100644
--- a/packages/react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
+++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
@@ -348,6 +348,8 @@ exports[`DetailsHeader can render 1`] = `
     data-is-focusable="true"
     data-item-key="a"
     draggable={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
     role="columnheader"
     style={
       Object {
@@ -537,6 +539,8 @@ exports[`DetailsHeader can render 1`] = `
     data-is-focusable="true"
     data-item-key="b"
     draggable={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
     role="columnheader"
     style={
       Object {
@@ -756,6 +760,8 @@ exports[`DetailsHeader can render 1`] = `
     data-is-focusable="true"
     data-item-key="c"
     draggable={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
     role="columnheader"
     style={
       Object {
@@ -1130,6 +1136,8 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti
     data-is-focusable="true"
     data-item-key="a"
     draggable={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
     role="columnheader"
     style={
       Object {
@@ -1319,6 +1327,8 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti
     data-is-focusable="true"
     data-item-key="b"
     draggable={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
     role="columnheader"
     style={
       Object {
@@ -1538,6 +1548,8 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti
     data-is-focusable="true"
     data-item-key="c"
     draggable={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
     role="columnheader"
     style={
       Object {
@@ -2074,6 +2086,8 @@ exports[`DetailsHeader renders accessible labels 1`] = `
     data-is-focusable="true"
     data-item-key="a"
     draggable={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
     role="columnheader"
     style={
       Object {
@@ -2264,6 +2278,8 @@ exports[`DetailsHeader renders accessible labels 1`] = `
     data-is-focusable="true"
     data-item-key="b"
     draggable={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
     role="columnheader"
     style={
       Object {
@@ -2509,6 +2525,8 @@ exports[`DetailsHeader renders accessible labels 1`] = `
     data-is-focusable="true"
     data-item-key="c"
     draggable={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
     role="columnheader"
     style={
       Object {
diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
index 77aaf42a06639..4f0cec9cad24d 100644
--- a/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
+++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
@@ -2232,6 +2232,8 @@ exports[`DetailsList renders List correctly 1`] = `
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -2420,6 +2422,8 @@ exports[`DetailsList renders List correctly 1`] = `
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -2608,6 +2612,8 @@ exports[`DetailsList renders List correctly 1`] = `
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3215,6 +3221,8 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_0"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3347,6 +3355,8 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_1"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3479,6 +3489,8 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_2"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3611,6 +3623,8 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_3"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3743,6 +3757,8 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_4"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -4295,6 +4311,8 @@ exports[`DetailsList renders List in compact mode correctly 1`] = `
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -4483,6 +4501,8 @@ exports[`DetailsList renders List in compact mode correctly 1`] = `
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -4671,6 +4691,8 @@ exports[`DetailsList renders List in compact mode correctly 1`] = `
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -5279,6 +5301,8 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = `
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -5467,6 +5491,8 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = `
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -5655,6 +5681,8 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = `
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -6262,6 +6290,8 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_0"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -6397,6 +6427,8 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_1"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -6532,6 +6564,8 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_2"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -6667,6 +6701,8 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_3"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -6802,6 +6838,8 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_4"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -7217,6 +7255,8 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -7405,6 +7445,8 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -7593,6 +7635,8 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsListV2.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsListV2.test.tsx.snap
index 55575e7591d79..85a3f5c51bd8c 100644
--- a/packages/react/src/components/DetailsList/__snapshots__/DetailsListV2.test.tsx.snap
+++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsListV2.test.tsx.snap
@@ -1704,6 +1704,8 @@ exports[`DetailsListV2 renders List correctly 1`] = `
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -1892,6 +1894,8 @@ exports[`DetailsListV2 renders List correctly 1`] = `
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -2080,6 +2084,8 @@ exports[`DetailsListV2 renders List correctly 1`] = `
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -2687,6 +2693,8 @@ exports[`DetailsListV2 renders List correctly with onRenderDivider props 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_0"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -2819,6 +2827,8 @@ exports[`DetailsListV2 renders List correctly with onRenderDivider props 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_1"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -2951,6 +2961,8 @@ exports[`DetailsListV2 renders List correctly with onRenderDivider props 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_2"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3083,6 +3095,8 @@ exports[`DetailsListV2 renders List correctly with onRenderDivider props 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_3"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3215,6 +3229,8 @@ exports[`DetailsListV2 renders List correctly with onRenderDivider props 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_4"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3767,6 +3783,8 @@ exports[`DetailsListV2 renders List in compact mode correctly 1`] = `
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3955,6 +3973,8 @@ exports[`DetailsListV2 renders List in compact mode correctly 1`] = `
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -4143,6 +4163,8 @@ exports[`DetailsListV2 renders List in compact mode correctly 1`] = `
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -4751,6 +4773,8 @@ exports[`DetailsListV2 renders List in fixed constrained layout correctly 1`] =
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -4939,6 +4963,8 @@ exports[`DetailsListV2 renders List in fixed constrained layout correctly 1`] =
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -5127,6 +5153,8 @@ exports[`DetailsListV2 renders List in fixed constrained layout correctly 1`] =
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -5734,6 +5762,8 @@ exports[`DetailsListV2 renders List with custom icon as column divider 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_0"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -5869,6 +5899,8 @@ exports[`DetailsListV2 renders List with custom icon as column divider 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_1"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -6004,6 +6036,8 @@ exports[`DetailsListV2 renders List with custom icon as column divider 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_2"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -6139,6 +6173,8 @@ exports[`DetailsListV2 renders List with custom icon as column divider 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_3"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -6274,6 +6310,8 @@ exports[`DetailsListV2 renders List with custom icon as column divider 1`] = `
             data-is-focusable="true"
             data-item-key="column_key_4"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -6689,6 +6727,8 @@ exports[`DetailsListV2 renders List with hidden checkboxes correctly 1`] = `
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -6877,6 +6917,8 @@ exports[`DetailsListV2 renders List with hidden checkboxes correctly 1`] = `
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -7065,6 +7107,8 @@ exports[`DetailsListV2 renders List with hidden checkboxes correctly 1`] = `
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
index a2b933f1131d4..494afddbb219a 100644
--- a/packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
+++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
@@ -390,6 +390,8 @@ exports[`DetailsRow renders details list row correctly 1`] = `
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -522,6 +524,8 @@ exports[`DetailsRow renders details list row correctly 1`] = `
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -654,6 +658,8 @@ exports[`DetailsRow renders details list row correctly 1`] = `
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -1225,6 +1231,8 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -1357,6 +1365,8 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -1489,6 +1499,8 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -2557,6 +2569,8 @@ exports[`DetailsRow renders details list row with multiple selections correctly
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -2689,6 +2703,8 @@ exports[`DetailsRow renders details list row with multiple selections correctly
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -2821,6 +2837,8 @@ exports[`DetailsRow renders details list row with multiple selections correctly
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3392,6 +3410,8 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
             data-is-focusable="true"
             data-item-key="key"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3524,6 +3544,8 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
             data-is-focusable="true"
             data-item-key="name"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {
@@ -3656,6 +3678,8 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
             data-is-focusable="true"
             data-item-key="value"
             draggable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
             role="columnheader"
             style={
               Object {

From 086cd4c549d2cfabefdb3dcb7965082dc3baf846 Mon Sep 17 00:00:00 2001
From: Yush singla <70366079+yush-singla@users.noreply.github.com>
Date: Tue, 25 Jul 2023 11:25:06 +0530
Subject: [PATCH 04/37] fixed the keyboard accessibiilty bug in area chart on
 legend click (#28515)

* fixed the keyboard accessibiilty bug in area chart on legend click

* added yarn change

* fixed accessibility bug in area chart

* updated snapshots

* fixed area chart bug and color of line chart vertical line

---------

Co-authored-by: Yush Singla <yushsingla@microsoft.com>
---
 ...-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json |  7 +++
 .../components/AreaChart/AreaChart.base.tsx   |  4 +-
 .../__snapshots__/AreaChart.test.tsx.snap     | 48 +++++++++----------
 .../components/LineChart/LineChart.base.tsx   |  2 +-
 .../__snapshots__/LineChart.test.tsx.snap     | 22 ++++-----
 5 files changed, 45 insertions(+), 38 deletions(-)
 create mode 100644 change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json

diff --git a/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json b/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json
new file mode 100644
index 0000000000000..1727efd9f070d
--- /dev/null
+++ b/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fixed the keyboard accessibility issue in area chart when legend is clicked",
+  "packageName": "@fluentui/react-charting",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
index c2fde62eba04f..dcccd12ae9fdf 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -695,7 +695,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
               onMouseOut={this._onRectMouseOut}
               onMouseOver={this._onRectMouseMove}
               {...(this.props.optimizeLargeData && {
-                'data-is-focusable': true,
+                'data-is-focusable': points[index]!.legend === this.state.selectedLegend,
                 role: 'img',
                 'aria-label': `${points[index].legend}, series ${index + 1} of ${points.length} with ${
                   points[index].data.length
@@ -726,7 +726,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
                 <circle
                   key={circleId}
                   id={circleId}
-                  data-is-focusable={true}
+                  data-is-focusable={points[index]!.legend === this.state.selectedLegend}
                   cx={xScale(singlePoint.xVal)}
                   cy={yScale(singlePoint.values[1])}
                   stroke={lineColor}
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
index adc1d00ad35b3..655ad28a31884 100644
--- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
@@ -143,7 +143,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -161,7 +161,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="#ffffff"
             id="circle2_1"
             key="circle2_1"
@@ -685,7 +685,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -703,7 +703,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="#ffffff"
             id="circle2_1"
             key="circle2_1"
@@ -1124,7 +1124,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -1142,7 +1142,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="#ffffff"
             id="circle2_1"
             key="circle2_1"
@@ -1547,7 +1547,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
         <path
           aria-label="metaData1, series 1 of 1 with 2 data points."
           d="M40,115.625L-20,20L-20,275L40,275Z"
-          data-is-focusable={true}
+          data-is-focusable={false}
           fill="red"
           fillOpacity={0.7}
           id="0-graph-areaChart_0"
@@ -1882,7 +1882,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="#637cef"
             id="circle2_0"
             key="circle2_0"
@@ -1900,7 +1900,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="#637cef"
             id="circle2_1"
             key="circle2_1"
@@ -2241,7 +2241,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -2259,7 +2259,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -2604,7 +2604,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
             aria-label="20. metaData1, 50."
             cx={10}
             cy={29.8076923076923}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -2945,7 +2945,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -2963,7 +2963,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -3284,7 +3284,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
             aria-label="20. metaData1, 50."
             cx={40}
             cy={130.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -3302,7 +3302,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -3482,7 +3482,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -3500,7 +3500,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -3841,7 +3841,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -3859,7 +3859,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -4200,7 +4200,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -4218,7 +4218,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -4559,7 +4559,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -4577,7 +4577,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={true}
+            data-is-focusable={false}
             fill="red"
             id="circle2_1"
             key="circle2_1"
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
index 511ea301d4b1b..bedf80dbf3d75 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -301,7 +301,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                   y1={0}
                   x2={0}
                   y2={props.containerHeight}
-                  stroke={'#C8C8C8'}
+                  stroke={'#323130'}
                   id={this._verticalLine}
                   visibility={'hidden'}
                   strokeDasharray={'5,5'}
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
index 2a881059711d3..37500215689d9 100644
--- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
+++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
@@ -104,7 +104,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
@@ -628,7 +628,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
@@ -1050,7 +1050,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
@@ -1472,7 +1472,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
@@ -1813,7 +1813,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
@@ -2154,7 +2154,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
@@ -2475,7 +2475,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
@@ -2655,7 +2655,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
@@ -2996,7 +2996,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
@@ -3337,7 +3337,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
@@ -3678,7 +3678,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
       <g>
         <line
           id="verticalLine3"
-          stroke="#C8C8C8"
+          stroke="#323130"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}

From aebf58a3a35a7453be8879c3b19668432e77a997 Mon Sep 17 00:00:00 2001
From: Fluent UI Build <fluentui-internal@service.microsoft.com>
Date: Tue, 25 Jul 2023 07:45:03 +0000
Subject: [PATCH 05/37] applying package updates

---
 ...-75983ba2-b5ea-4e4e-9578-6fc0293ce309.json |  7 -----
 ...-aea800d3-31d8-4c2c-a34f-9b91f4d2463d.json |  7 -----
 ...-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json |  7 -----
 ...-f1224d11-1ccf-4845-805f-fe84e7b89377.json |  7 -----
 packages/azure-themes/CHANGELOG.json          | 15 +++++++++++
 packages/azure-themes/CHANGELOG.md            | 11 +++++++-
 packages/azure-themes/package.json            |  4 +--
 packages/cra-template/package.json            |  2 +-
 packages/fluent2-theme/CHANGELOG.json         | 15 +++++++++++
 packages/fluent2-theme/CHANGELOG.md           | 11 +++++++-
 packages/fluent2-theme/package.json           |  4 +--
 packages/react-cards/CHANGELOG.json           | 15 +++++++++++
 packages/react-cards/CHANGELOG.md             | 11 +++++++-
 packages/react-cards/package.json             |  4 +--
 packages/react-charting/CHANGELOG.json        | 27 +++++++++++++++++++
 packages/react-charting/CHANGELOG.md          | 13 ++++++++-
 packages/react-charting/package.json          |  6 ++---
 .../react-migration-v8-v9/package.json        |  4 +--
 packages/react-date-time/CHANGELOG.json       | 15 +++++++++++
 packages/react-date-time/CHANGELOG.md         | 11 +++++++-
 packages/react-date-time/package.json         |  4 +--
 .../react-docsite-components/CHANGELOG.json   | 21 +++++++++++++++
 .../react-docsite-components/CHANGELOG.md     | 12 ++++++++-
 .../react-docsite-components/package.json     |  6 ++---
 packages/react-examples/package.json          | 14 +++++-----
 packages/react-experiments/CHANGELOG.json     | 15 +++++++++++
 packages/react-experiments/CHANGELOG.md       | 11 +++++++-
 packages/react-experiments/package.json       |  4 +--
 packages/react-monaco-editor/CHANGELOG.json   | 21 +++++++++++++++
 packages/react-monaco-editor/CHANGELOG.md     | 12 ++++++++-
 packages/react-monaco-editor/package.json     |  6 ++---
 packages/react/CHANGELOG.json                 | 27 +++++++++++++++++++
 packages/react/CHANGELOG.md                   | 13 ++++++++-
 packages/react/package.json                   |  2 +-
 packages/storybook/package.json               |  6 ++---
 packages/theme-samples/CHANGELOG.json         | 15 +++++++++++
 packages/theme-samples/CHANGELOG.md           | 11 +++++++-
 packages/theme-samples/package.json           |  4 +--
 38 files changed, 327 insertions(+), 73 deletions(-)
 delete mode 100644 change/@fluentui-react-75983ba2-b5ea-4e4e-9578-6fc0293ce309.json
 delete mode 100644 change/@fluentui-react-aea800d3-31d8-4c2c-a34f-9b91f4d2463d.json
 delete mode 100644 change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json
 delete mode 100644 change/@fluentui-react-f1224d11-1ccf-4845-805f-fe84e7b89377.json

diff --git a/change/@fluentui-react-75983ba2-b5ea-4e4e-9578-6fc0293ce309.json b/change/@fluentui-react-75983ba2-b5ea-4e4e-9578-6fc0293ce309.json
deleted file mode 100644
index 712b59243816d..0000000000000
--- a/change/@fluentui-react-75983ba2-b5ea-4e4e-9578-6fc0293ce309.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: Datepicker renders input description if onRenderDescription is passed in",
-  "packageName": "@fluentui/react",
-  "email": "sarah.higley@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-aea800d3-31d8-4c2c-a34f-9b91f4d2463d.json b/change/@fluentui-react-aea800d3-31d8-4c2c-a34f-9b91f4d2463d.json
deleted file mode 100644
index 7586aa0c657ce..0000000000000
--- a/change/@fluentui-react-aea800d3-31d8-4c2c-a34f-9b91f4d2463d.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: DetailsColumn tooltip shows on focus, and is associated via aria-describedby",
-  "packageName": "@fluentui/react",
-  "email": "sarah.higley@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json b/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json
deleted file mode 100644
index 1727efd9f070d..0000000000000
--- a/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fixed the keyboard accessibility issue in area chart when legend is clicked",
-  "packageName": "@fluentui/react-charting",
-  "email": "email not defined",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-f1224d11-1ccf-4845-805f-fe84e7b89377.json b/change/@fluentui-react-f1224d11-1ccf-4845-805f-fe84e7b89377.json
deleted file mode 100644
index 99c5e0234c7bb..0000000000000
--- a/change/@fluentui-react-f1224d11-1ccf-4845-805f-fe84e7b89377.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: do not dismiss editable comboboxes on scroll or resize immediately after opening",
-  "packageName": "@fluentui/react",
-  "email": "sarah.higley@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json
index effa8204bca99..230dd63a914e6 100644
--- a/packages/azure-themes/CHANGELOG.json
+++ b/packages/azure-themes/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/azure-themes",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 07:44:54 GMT",
+      "tag": "@fluentui/azure-themes_v8.6.26",
+      "version": "8.6.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/azure-themes",
+            "comment": "Bump @fluentui/react to v8.110.11",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 19 Jul 2023 07:34:08 GMT",
       "tag": "@fluentui/azure-themes_v8.6.25",
diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md
index ceb22e7a18191..362a3e6ec6076 100644
--- a/packages/azure-themes/CHANGELOG.md
+++ b/packages/azure-themes/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/azure-themes
 
-This log was last generated on Wed, 19 Jul 2023 07:34:08 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.6.26](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.26)
+
+Tue, 25 Jul 2023 07:44:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.25..@fluentui/azure-themes_v8.6.26)
+
+### Patches
+
+- Bump @fluentui/react to v8.110.11 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+
 ## [8.6.25](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.25)
 
 Wed, 19 Jul 2023 07:34:08 GMT 
diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json
index d45c17f093dad..b90ed255d93fb 100644
--- a/packages/azure-themes/package.json
+++ b/packages/azure-themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/azure-themes",
-  "version": "8.6.25",
+  "version": "8.6.26",
   "description": "Azure themes for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,7 +28,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/react": "^8.110.11",
     "@fluentui/set-version": "^8.2.11",
     "tslib": "^2.1.0"
   }
diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json
index b47f8391d41f1..1b22748cfcfcd 100644
--- a/packages/cra-template/package.json
+++ b/packages/cra-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/cra-template",
-  "version": "8.4.104",
+  "version": "8.4.105",
   "description": "Create React App template for Fluent UI React (@fluentui/react)",
   "repository": {
     "type": "git",
diff --git a/packages/fluent2-theme/CHANGELOG.json b/packages/fluent2-theme/CHANGELOG.json
index 2ee1396049826..1f646305b1944 100644
--- a/packages/fluent2-theme/CHANGELOG.json
+++ b/packages/fluent2-theme/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/fluent2-theme",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 07:44:54 GMT",
+      "tag": "@fluentui/fluent2-theme_v8.107.31",
+      "version": "8.107.31",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/fluent2-theme",
+            "comment": "Bump @fluentui/react to v8.110.11",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 18 Jul 2023 07:35:17 GMT",
       "tag": "@fluentui/fluent2-theme_v8.107.30",
diff --git a/packages/fluent2-theme/CHANGELOG.md b/packages/fluent2-theme/CHANGELOG.md
index 7b72946db0984..08232539c90b2 100644
--- a/packages/fluent2-theme/CHANGELOG.md
+++ b/packages/fluent2-theme/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/fluent2-theme
 
-This log was last generated on Tue, 18 Jul 2023 07:35:17 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.107.31](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.31)
+
+Tue, 25 Jul 2023 07:44:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.30..@fluentui/fluent2-theme_v8.107.31)
+
+### Patches
+
+- Bump @fluentui/react to v8.110.11 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+
 ## [8.107.30](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.30)
 
 Tue, 18 Jul 2023 07:35:17 GMT 
diff --git a/packages/fluent2-theme/package.json b/packages/fluent2-theme/package.json
index 867986a9b90d1..57cbf416feaf2 100644
--- a/packages/fluent2-theme/package.json
+++ b/packages/fluent2-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/fluent2-theme",
-  "version": "8.107.30",
+  "version": "8.107.31",
   "description": "A Fluent2 theme for Fluent UI React 8.x",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,7 +28,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/react": "^8.110.11",
     "@fluentui/set-version": "^8.2.11",
     "tslib": "^2.1.0"
   }
diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json
index 7018cae79ec2f..32c6a85a47229 100644
--- a/packages/react-cards/CHANGELOG.json
+++ b/packages/react-cards/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-cards",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 07:44:54 GMT",
+      "tag": "@fluentui/react-cards_v0.205.104",
+      "version": "0.205.104",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-cards",
+            "comment": "Bump @fluentui/react to v8.110.11",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 18 Jul 2023 07:35:18 GMT",
       "tag": "@fluentui/react-cards_v0.205.103",
diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md
index 90207c4764901..c0b25afe700d4 100644
--- a/packages/react-cards/CHANGELOG.md
+++ b/packages/react-cards/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-cards
 
-This log was last generated on Tue, 18 Jul 2023 07:35:18 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.205.104](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.104)
+
+Tue, 25 Jul 2023 07:44:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.103..@fluentui/react-cards_v0.205.104)
+
+### Patches
+
+- Bump @fluentui/react to v8.110.11 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+
 ## [0.205.103](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.103)
 
 Tue, 18 Jul 2023 07:35:18 GMT 
diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json
index b99b1acc88493..50b1d6e42c5e2 100644
--- a/packages/react-cards/package.json
+++ b/packages/react-cards/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-cards",
-  "version": "0.205.103",
+  "version": "0.205.104",
   "description": "Deprecated experimental Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/react": "^8.110.11",
     "@fluentui/foundation-legacy": "^8.2.43",
     "@fluentui/set-version": "^8.2.11",
     "@microsoft/load-themed-styles": "^1.10.26",
diff --git a/packages/react-charting/CHANGELOG.json b/packages/react-charting/CHANGELOG.json
index 35715fa4adb81..70804cb12570c 100644
--- a/packages/react-charting/CHANGELOG.json
+++ b/packages/react-charting/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 07:44:54 GMT",
+      "tag": "@fluentui/react-charting_v5.16.55",
+      "version": "5.16.55",
+      "comments": {
+        "patch": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui/react-charting",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846",
+            "comment": "fixed the keyboard accessibility issue in area chart when legend is clicked"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/theme-samples to v8.7.104",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/react to v8.110.11",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 18 Jul 2023 07:35:17 GMT",
       "tag": "@fluentui/react-charting_v5.16.54",
diff --git a/packages/react-charting/CHANGELOG.md b/packages/react-charting/CHANGELOG.md
index ba7cf90fb501a..e3eafd883f56e 100644
--- a/packages/react-charting/CHANGELOG.md
+++ b/packages/react-charting/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Tue, 18 Jul 2023 07:35:17 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.16.55](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.55)
+
+Tue, 25 Jul 2023 07:44:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.54..@fluentui/react-charting_v5.16.55)
+
+### Patches
+
+- fixed the keyboard accessibility issue in area chart when legend is clicked ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by email not defined)
+- Bump @fluentui/theme-samples to v8.7.104 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+- Bump @fluentui/react to v8.110.11 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+
 ## [5.16.54](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.54)
 
 Tue, 18 Jul 2023 07:35:17 GMT 
diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json
index 0119d5f6a93fa..743c584b3d436 100644
--- a/packages/react-charting/package.json
+++ b/packages/react-charting/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.16.54",
+  "version": "5.16.55",
   "description": "Experimental React charting components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@fluentui/react-focus": "^8.8.30",
-    "@fluentui/theme-samples": "^8.7.103",
+    "@fluentui/theme-samples": "^8.7.104",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/d3-array": "1.2.1",
     "@types/d3-axis": "1.0.10",
@@ -64,7 +64,7 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/react": "^8.110.11",
     "@testing-library/react": "12.1.2",
     "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",
diff --git a/packages/react-components/react-migration-v8-v9/package.json b/packages/react-components/react-migration-v8-v9/package.json
index 489d01fd18d95..ff6c2fe050f47 100644
--- a/packages/react-components/react-migration-v8-v9/package.json
+++ b/packages/react-components/react-migration-v8-v9/package.json
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "3.3.4",
-    "@fluentui/fluent2-theme": "^8.107.30",
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/fluent2-theme": "^8.107.31",
+    "@fluentui/react": "^8.110.11",
     "@fluentui/react-components": "^9.26.2",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-date-time/CHANGELOG.json b/packages/react-date-time/CHANGELOG.json
index 88498eebeaee8..7997fc52d1ce3 100644
--- a/packages/react-date-time/CHANGELOG.json
+++ b/packages/react-date-time/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-date-time",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 07:44:54 GMT",
+      "tag": "@fluentui/react-date-time_v8.7.104",
+      "version": "8.7.104",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-date-time",
+            "comment": "Bump @fluentui/react to v8.110.11",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 18 Jul 2023 07:35:18 GMT",
       "tag": "@fluentui/react-date-time_v8.7.103",
diff --git a/packages/react-date-time/CHANGELOG.md b/packages/react-date-time/CHANGELOG.md
index 88a0680bba420..2d9759fc6535d 100644
--- a/packages/react-date-time/CHANGELOG.md
+++ b/packages/react-date-time/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-date-time
 
-This log was last generated on Tue, 18 Jul 2023 07:35:18 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.7.104](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.104)
+
+Tue, 25 Jul 2023 07:44:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-date-time_v8.7.103..@fluentui/react-date-time_v8.7.104)
+
+### Patches
+
+- Bump @fluentui/react to v8.110.11 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+
 ## [8.7.103](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.103)
 
 Tue, 18 Jul 2023 07:35:18 GMT 
diff --git a/packages/react-date-time/package.json b/packages/react-date-time/package.json
index ecc44533d653d..96d8e49765a60 100644
--- a/packages/react-date-time/package.json
+++ b/packages/react-date-time/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-date-time",
-  "version": "8.7.103",
+  "version": "8.7.104",
   "description": "Date and time related React components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,7 +28,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/react": "^8.110.11",
     "@fluentui/set-version": "^8.2.11",
     "tslib": "^2.1.0"
   },
diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json
index 2479a30fe5a77..c2ab5667ae695 100644
--- a/packages/react-docsite-components/CHANGELOG.json
+++ b/packages/react-docsite-components/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-docsite-components",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 07:44:54 GMT",
+      "tag": "@fluentui/react-docsite-components_v8.12.35",
+      "version": "8.12.35",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-docsite-components",
+            "comment": "Bump @fluentui/react to v8.110.11",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-docsite-components",
+            "comment": "Bump @fluentui/react-monaco-editor to v1.7.112",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 18 Jul 2023 07:35:18 GMT",
       "tag": "@fluentui/react-docsite-components_v8.12.34",
diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md
index 5e6c24da175b2..08ba7bbe0b0c7 100644
--- a/packages/react-docsite-components/CHANGELOG.md
+++ b/packages/react-docsite-components/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-docsite-components
 
-This log was last generated on Tue, 18 Jul 2023 07:35:18 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.12.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.12.35)
+
+Tue, 25 Jul 2023 07:44:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.12.34..@fluentui/react-docsite-components_v8.12.35)
+
+### Patches
+
+- Bump @fluentui/react to v8.110.11 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+- Bump @fluentui/react-monaco-editor to v1.7.112 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+
 ## [8.12.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.12.34)
 
 Tue, 18 Jul 2023 07:35:18 GMT 
diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json
index 2af189d1f90ac..19a8b2a3cba81 100644
--- a/packages/react-docsite-components/package.json
+++ b/packages/react-docsite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-docsite-components",
-  "version": "8.12.34",
+  "version": "8.12.35",
   "description": "Fluent UI React components for building documentation sites.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,14 +35,14 @@
     "react-dom": ">=16.8.0 <19.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/react": "^8.110.11",
     "@fluentui/theme": "^2.6.34",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/example-data": "^8.4.11",
     "@fluentui/public-docsite-setup": "^0.3.21",
     "@fluentui/react-hooks": "^8.6.29",
     "@fluentui/set-version": "^8.2.11",
-    "@fluentui/react-monaco-editor": "^1.7.111",
+    "@fluentui/react-monaco-editor": "^1.7.112",
     "color-check": "0.0.2",
     "markdown-to-jsx": "^7.0.0",
     "office-ui-fabric-core": "^11.0.0",
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index 34a64787094e8..560f9cc8bd688 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -25,18 +25,18 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/azure-themes": "^8.6.25",
+    "@fluentui/azure-themes": "^8.6.26",
     "@fluentui/date-time-utilities": "^8.5.13",
     "@fluentui/dom-utilities": "^2.2.11",
     "@fluentui/example-data": "^8.4.11",
     "@fluentui/font-icons-mdl2": "^8.5.23",
     "@fluentui/foundation-legacy": "^8.2.43",
     "@fluentui/merge-styles": "^8.5.12",
-    "@fluentui/react": "^8.110.10",
-    "@fluentui/react-cards": "^0.205.103",
-    "@fluentui/react-charting": "^5.16.54",
-    "@fluentui/react-docsite-components": "^8.12.34",
-    "@fluentui/react-experiments": "^8.14.98",
+    "@fluentui/react": "^8.110.11",
+    "@fluentui/react-cards": "^0.205.104",
+    "@fluentui/react-charting": "^5.16.55",
+    "@fluentui/react-docsite-components": "^8.12.35",
+    "@fluentui/react-experiments": "^8.14.99",
     "@fluentui/react-file-type-icons": "^8.10.0",
     "@fluentui/react-focus": "^8.8.30",
     "@fluentui/react-hooks": "^8.6.29",
@@ -44,7 +44,7 @@
     "@fluentui/scheme-utilities": "^8.3.35",
     "@fluentui/style-utilities": "^8.9.16",
     "@fluentui/theme": "^2.6.34",
-    "@fluentui/theme-samples": "^8.7.103",
+    "@fluentui/theme-samples": "^8.7.104",
     "@fluentui/utilities": "^8.13.18",
     "@microsoft/load-themed-styles": "^1.10.26",
     "d3-fetch": "3.0.1",
diff --git a/packages/react-experiments/CHANGELOG.json b/packages/react-experiments/CHANGELOG.json
index 7c9109c10ab45..dd576335ce8d8 100644
--- a/packages/react-experiments/CHANGELOG.json
+++ b/packages/react-experiments/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-experiments",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 07:44:54 GMT",
+      "tag": "@fluentui/react-experiments_v8.14.99",
+      "version": "8.14.99",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-experiments",
+            "comment": "Bump @fluentui/react to v8.110.11",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 18 Jul 2023 07:35:18 GMT",
       "tag": "@fluentui/react-experiments_v8.14.98",
diff --git a/packages/react-experiments/CHANGELOG.md b/packages/react-experiments/CHANGELOG.md
index 0308db24f311f..6096f23310ffe 100644
--- a/packages/react-experiments/CHANGELOG.md
+++ b/packages/react-experiments/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-experiments
 
-This log was last generated on Tue, 18 Jul 2023 07:35:18 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.14.99](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.99)
+
+Tue, 25 Jul 2023 07:44:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-experiments_v8.14.98..@fluentui/react-experiments_v8.14.99)
+
+### Patches
+
+- Bump @fluentui/react to v8.110.11 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+
 ## [8.14.98](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.98)
 
 Tue, 18 Jul 2023 07:35:18 GMT 
diff --git a/packages/react-experiments/package.json b/packages/react-experiments/package.json
index e0e8d816dba95..c6203378ce732 100644
--- a/packages/react-experiments/package.json
+++ b/packages/react-experiments/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-experiments",
-  "version": "8.14.98",
+  "version": "8.14.99",
   "description": "Experimental React components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,7 +39,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/react": "^8.110.11",
     "@fluentui/theme": "^2.6.34",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/example-data": "^8.4.11",
diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json
index aa35f508feaf4..a2fa20f9c00c1 100644
--- a/packages/react-monaco-editor/CHANGELOG.json
+++ b/packages/react-monaco-editor/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-monaco-editor",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 07:44:54 GMT",
+      "tag": "@fluentui/react-monaco-editor_v1.7.112",
+      "version": "1.7.112",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-monaco-editor",
+            "comment": "Bump @fluentui/react to v8.110.11",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-monaco-editor",
+            "comment": "Bump @fluentui/react-charting to v5.16.55",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 18 Jul 2023 07:35:18 GMT",
       "tag": "@fluentui/react-monaco-editor_v1.7.111",
diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md
index e94a7b0270d1c..1af0dbf16af9b 100644
--- a/packages/react-monaco-editor/CHANGELOG.md
+++ b/packages/react-monaco-editor/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-monaco-editor
 
-This log was last generated on Tue, 18 Jul 2023 07:35:18 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.7.112](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.112)
+
+Tue, 25 Jul 2023 07:44:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.111..@fluentui/react-monaco-editor_v1.7.112)
+
+### Patches
+
+- Bump @fluentui/react to v8.110.11 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+- Bump @fluentui/react-charting to v5.16.55 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+
 ## [1.7.111](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.111)
 
 Tue, 18 Jul 2023 07:35:18 GMT 
diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json
index 04efd66c32e9a..149727030a06a 100644
--- a/packages/react-monaco-editor/package.json
+++ b/packages/react-monaco-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-monaco-editor",
-  "version": "1.7.111",
+  "version": "1.7.112",
   "description": "Live React example editing using monaco",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,12 +30,12 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/react": "^8.110.11",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/example-data": "^8.4.11",
     "@fluentui/monaco-editor": "^1.3.11",
     "@fluentui/react-hooks": "^8.6.29",
-    "@fluentui/react-charting": "^5.16.54",
+    "@fluentui/react-charting": "^5.16.55",
     "raw-loader": "4.0.2",
     "react-syntax-highlighter": "^10.1.3",
     "tslib": "^2.1.0"
diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json
index 7a761cb095f04..baf1397f80c31 100644
--- a/packages/react/CHANGELOG.json
+++ b/packages/react/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 07:44:53 GMT",
+      "tag": "@fluentui/react_v8.110.11",
+      "version": "8.110.11",
+      "comments": {
+        "patch": [
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react",
+            "commit": "1a8fcdedfaa41b4478342d3f7aa49f58a85c07dd",
+            "comment": "fix: Datepicker renders input description if onRenderDescription is passed in"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react",
+            "commit": "fe5d70f04fa3ad62d10da9cd19662a7bcfb771b2",
+            "comment": "fix: DetailsColumn tooltip shows on focus, and is associated via aria-describedby"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react",
+            "commit": "e6e662c52a7a7d9c4a9f95e01e1e2194f4e72b04",
+            "comment": "fix: do not dismiss editable comboboxes on scroll or resize immediately after opening"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 18 Jul 2023 07:35:18 GMT",
       "tag": "@fluentui/react_v8.110.10",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index b6846c7f0a168..45ad888448b06 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react
 
-This log was last generated on Tue, 18 Jul 2023 07:35:18 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 07:44:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.110.11](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.110.11)
+
+Tue, 25 Jul 2023 07:44:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react_v8.110.10..@fluentui/react_v8.110.11)
+
+### Patches
+
+- fix: Datepicker renders input description if onRenderDescription is passed in ([PR #27784](https://github.com/microsoft/fluentui/pull/27784) by sarah.higley@microsoft.com)
+- fix: DetailsColumn tooltip shows on focus, and is associated via aria-describedby ([PR #28604](https://github.com/microsoft/fluentui/pull/28604) by sarah.higley@microsoft.com)
+- fix: do not dismiss editable comboboxes on scroll or resize immediately after opening ([PR #28591](https://github.com/microsoft/fluentui/pull/28591) by sarah.higley@microsoft.com)
+
 ## [8.110.10](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.110.10)
 
 Tue, 18 Jul 2023 07:35:18 GMT 
diff --git a/packages/react/package.json b/packages/react/package.json
index c5f8f403ab542..5ba409c1e8d2f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react",
-  "version": "8.110.10",
+  "version": "8.110.11",
   "description": "Reusable React components for building web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 3c91cb870dec5..deaafd82ca504 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -22,13 +22,13 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/react": "^8.110.11",
     "@fluentui/theme": "^2.6.34",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-essentials": "6.5.15",
     "@storybook/addons": "6.5.15",
-    "@fluentui/azure-themes": "^8.6.25",
-    "@fluentui/theme-samples": "^8.7.103",
+    "@fluentui/azure-themes": "^8.6.26",
+    "@fluentui/theme-samples": "^8.7.104",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
diff --git a/packages/theme-samples/CHANGELOG.json b/packages/theme-samples/CHANGELOG.json
index ec6376931cc55..00ec797437b5a 100644
--- a/packages/theme-samples/CHANGELOG.json
+++ b/packages/theme-samples/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/theme-samples",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 07:44:54 GMT",
+      "tag": "@fluentui/theme-samples_v8.7.104",
+      "version": "8.7.104",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/theme-samples",
+            "comment": "Bump @fluentui/react to v8.110.11",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 18 Jul 2023 07:35:18 GMT",
       "tag": "@fluentui/theme-samples_v8.7.103",
diff --git a/packages/theme-samples/CHANGELOG.md b/packages/theme-samples/CHANGELOG.md
index c4ac934d375fe..b060934b99759 100644
--- a/packages/theme-samples/CHANGELOG.md
+++ b/packages/theme-samples/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/theme-samples
 
-This log was last generated on Tue, 18 Jul 2023 07:35:18 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.7.104](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.104)
+
+Tue, 25 Jul 2023 07:44:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme-samples_v8.7.103..@fluentui/theme-samples_v8.7.104)
+
+### Patches
+
+- Bump @fluentui/react to v8.110.11 ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by beachball)
+
 ## [8.7.103](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.103)
 
 Tue, 18 Jul 2023 07:35:18 GMT 
diff --git a/packages/theme-samples/package.json b/packages/theme-samples/package.json
index ba4cd27f43816..64699aacb4b81 100644
--- a/packages/theme-samples/package.json
+++ b/packages/theme-samples/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/theme-samples",
-  "version": "8.7.103",
+  "version": "8.7.104",
   "description": "Sample themes for use with Fabric components.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,7 +27,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.110.10",
+    "@fluentui/react": "^8.110.11",
     "@fluentui/set-version": "^8.2.11",
     "@fluentui/scheme-utilities": "^8.3.35",
     "tslib": "^2.1.0"

From d8493a92520cacac29e9fe341a17d3595bc48343 Mon Sep 17 00:00:00 2001
From: ling1726 <lingfangao@hotmail.com>
Date: Tue, 25 Jul 2023 10:35:50 +0200
Subject: [PATCH 06/37] fix: Overflow update should run show/hide steps twice
 (#28628)

* fix: Overflow update should run show/hide steps twice

When new items are added to the overflow manager, they are always
visible by default. This might not actually be the 'correct' state
especially considering priorities.

Consider and item that is added whose priority is less than the top of
the invisible item queue - it should actually not be visible. This can
negatively affect the overflow calculation (which is batched)

In order to avoid these other solutions for their negative perf and
complexity:
* Add more logic to addItem to account for an 'invalid' state
* Call `forceUpdate` every time an item is added

This PR simply changes the logic to run the hide/show step twice. Which
will resolve any new items to their correct state first. In order to
improve performance a cache for the offset size was added. This improves
the performance even compared to the current version since `offsetWidth`
and `offsetHeight` can be called multiple times for a single element in
an overflow update.

* changefile

* fix lint

* revert story
---
 ...-c98cbac7-b421-4898-a6b9-cd0cf7dfb500.json |  7 ++
 ...-87d68562-a91a-45c0-bdd9-133e3a7d2616.json |  7 ++
 .../priority-overflow/src/overflowManager.ts  | 35 +++++++---
 .../react-overflow/src/Overflow.cy.tsx        | 69 +++++++++++--------
 4 files changed, 82 insertions(+), 36 deletions(-)
 create mode 100644 change/@fluentui-priority-overflow-c98cbac7-b421-4898-a6b9-cd0cf7dfb500.json
 create mode 100644 change/@fluentui-react-overflow-87d68562-a91a-45c0-bdd9-133e3a7d2616.json

diff --git a/change/@fluentui-priority-overflow-c98cbac7-b421-4898-a6b9-cd0cf7dfb500.json b/change/@fluentui-priority-overflow-c98cbac7-b421-4898-a6b9-cd0cf7dfb500.json
new file mode 100644
index 0000000000000..832af5bdb03ff
--- /dev/null
+++ b/change/@fluentui-priority-overflow-c98cbac7-b421-4898-a6b9-cd0cf7dfb500.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Overflow update should run show/hide steps twice",
+  "packageName": "@fluentui/priority-overflow",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-overflow-87d68562-a91a-45c0-bdd9-133e3a7d2616.json b/change/@fluentui-react-overflow-87d68562-a91a-45c0-bdd9-133e3a7d2616.json
new file mode 100644
index 0000000000000..5bfd0c7455d35
--- /dev/null
+++ b/change/@fluentui-react-overflow-87d68562-a91a-45c0-bdd9-133e3a7d2616.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Overflow update should run show/hide steps twice",
+  "packageName": "@fluentui/react-overflow",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/priority-overflow/src/overflowManager.ts b/packages/react-components/priority-overflow/src/overflowManager.ts
index 03f30cc9cc696..b624cd789264c 100644
--- a/packages/react-components/priority-overflow/src/overflowManager.ts
+++ b/packages/react-components/priority-overflow/src/overflowManager.ts
@@ -14,6 +14,9 @@ import type {
  * @returns overflow manager instance
  */
 export function createOverflowManager(): OverflowManager {
+  // calls to `offsetWidth or offsetHeight` can happen multiple times in an update
+  // Use a cache to avoid causing too many recalcs and avoid scripting time to meausure sizes
+  const sizeCache = new Map<HTMLElement, number>();
   let container: HTMLElement | undefined;
   let overflowMenu: HTMLElement | undefined;
   // Set as true when resize observer is observing
@@ -136,7 +139,13 @@ export function createOverflowManager(): OverflowManager {
   });
 
   const getOffsetSize = (el: HTMLElement) => {
-    return options.overflowAxis === 'horizontal' ? el.offsetWidth : el.offsetHeight;
+    if (sizeCache.has(el)) {
+      return sizeCache.get(el)!;
+    }
+
+    const offsetSize = options.overflowAxis === 'horizontal' ? el.offsetWidth : el.offsetHeight;
+    sizeCache.set(el, offsetSize);
+    return offsetSize;
   };
 
   function computeSizeChange(entry: OverflowItemEntry) {
@@ -193,6 +202,8 @@ export function createOverflowManager(): OverflowManager {
     if (!container) {
       return false;
     }
+    sizeCache.clear();
+
     const totalDividersWidth = Object.values(overflowDividers)
       .map(dvdr => (dvdr.groupId ? getOffsetSize(dvdr.element) : 0))
       .reduce((prev, current) => prev + current, 0);
@@ -207,20 +218,24 @@ export function createOverflowManager(): OverflowManager {
     const visibleTop = visibleItemQueue.peek();
     const invisibleTop = invisibleItemQueue.peek();
 
-    let currentWidth = visibleItemQueue
+    let currentSize = visibleItemQueue
       .all()
       .map(id => overflowItems[id].element)
       .map(getOffsetSize)
       .reduce((prev, current) => prev + current, 0);
 
-    // Add items until available width is filled - can result in overflow
-    while (currentWidth + overflowMenuSize() < availableSize && invisibleItemQueue.size() > 0) {
-      currentWidth += showItem();
-    }
+    // Run the show/hide step twice - the first step might not be correct if
+    // it was triggered by a new item being added - new items are always visible by default.
+    for (let i = 0; i < 2; i++) {
+      // Add items until available width is filled - can result in overflow
+      while (currentSize + overflowMenuSize() < availableSize && invisibleItemQueue.size() > 0) {
+        currentSize += showItem();
+      }
 
-    // Remove items until there's no more overflow
-    while (currentWidth + overflowMenuSize() > availableSize && visibleItemQueue.size() > options.minimumVisible) {
-      currentWidth -= hideItem();
+      // Remove items until there's no more overflow
+      while (currentSize + overflowMenuSize() > availableSize && visibleItemQueue.size() > options.minimumVisible) {
+        currentSize -= hideItem();
+      }
     }
 
     // only update when the state of visible/invisible items has changed
@@ -247,6 +262,7 @@ export function createOverflowManager(): OverflowManager {
 
   const disconnect: OverflowManager['disconnect'] = () => {
     observing = false;
+    sizeCache.clear();
     resizeObserver.disconnect();
   };
 
@@ -316,6 +332,7 @@ export function createOverflowManager(): OverflowManager {
       item.element.removeAttribute(DATA_OVERFLOW_GROUP);
     }
 
+    sizeCache.delete(item.element);
     delete overflowItems[itemId];
     update();
   };
diff --git a/packages/react-components/react-overflow/src/Overflow.cy.tsx b/packages/react-components/react-overflow/src/Overflow.cy.tsx
index e266ec5c0cca3..de19559187208 100644
--- a/packages/react-components/react-overflow/src/Overflow.cy.tsx
+++ b/packages/react-components/react-overflow/src/Overflow.cy.tsx
@@ -9,7 +9,6 @@ import {
   useIsOverflowGroupVisible,
   useOverflowMenu,
   useOverflowContext,
-  useIsOverflowItemVisible,
 } from '@fluentui/react-overflow';
 import { Portal } from '@fluentui/react-portal';
 
@@ -641,34 +640,50 @@ describe('Overflow', () => {
     cy.contains('Update priority').click().get('#foo-visibility').should('have.text', 'visible');
   });
 
-  it('Should have correct initial visibility state', () => {
-    const mapHelper = new Array(10).fill(0).map((_, i) => i);
-    const Assert = () => {
-      const isVisible = mapHelper.map(i => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        return useIsOverflowItemVisible(i.toString());
-      });
-
-      if (isVisible.every(x => x)) {
-        return <span data-passed="true" />;
-      }
-
-      return null;
+  it('Should switch priorities and use all available space', () => {
+    const Example = () => {
+      const [selected, setSelelected] = React.useState(0);
+      return (
+        <>
+          <Container>
+            {mapHelper.map(i => (
+              <Item key={i} id={i.toString()} priority={selected === i ? 1000 : 0} width={i === 9 ? 100 : undefined}>
+                <span onClick={() => setSelelected(i)} style={{ color: selected === i ? 'red' : 'black' }}>
+                  {i}
+                </span>
+              </Item>
+            ))}
+            <Menu />
+          </Container>
+          <div>
+            <button id="select-9" onClick={() => setSelelected(9)}>
+              Select 9
+            </button>
+            <button id="select-0" onClick={() => setSelelected(0)}>
+              Select 0
+            </button>
+          </div>
+        </>
+      );
     };
 
-    mount(
-      <Container minimumVisible={5}>
-        {mapHelper.map(i => (
-          <Item key={i} id={i.toString()}>
-            {i}
-          </Item>
-        ))}
-        <Menu />
-        <Assert />
-      </Container>,
-    );
+    const mapHelper = new Array(10).fill(0).map((_, i) => i);
+    mount(<Example />);
 
-    setContainerSize(500);
-    cy.get('[data-passed="true"]').should('exist');
+    cy.get(`[${selectors.item}="3"]`).click();
+    setContainerSize(250);
+    cy.get('#select-9').click();
+    cy.get(`[${selectors.item}="9"]`).should('be.visible');
+    cy.get(`[${selectors.item}="0"]`).should('be.visible');
+    cy.get(`[${selectors.item}="1"]`).should('be.visible');
+    cy.get(`[${selectors.item}="2"]`).should('not.be.visible');
+    cy.get(`[${selectors.item}="3"]`).should('not.be.visible');
+
+    cy.get('#select-0').click();
+    cy.get(`[${selectors.item}="9"]`).should('not.be.visible');
+    cy.get(`[${selectors.item}="0"]`).should('be.visible');
+    cy.get(`[${selectors.item}="1"]`).should('be.visible');
+    cy.get(`[${selectors.item}="2"]`).should('be.visible');
+    cy.get(`[${selectors.item}="3"]`).should('be.visible');
   });
 });

From c017e880f238c1f113ff7ff6e28560d77e7ea46b Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Tue, 25 Jul 2023 12:09:17 +0200
Subject: [PATCH 07/37] feat: creates FlatTree component (#28620)

* feat: creates FlatTree component

* chore: prevent default on arrow down and up

* chore: rename subbaseTree to subtree
---
 ...-5df66655-eef3-48d3-96da-4d8feb59acb5.json |   7 +
 ...-ddf7694e-548f-4a39-bec8-ab7f30b1c301.json |   7 +
 .../etc/react-components.unstable.api.md      |  40 +-
 .../react-components/src/unstable/index.ts    |  16 +-
 .../react-tree/etc/react-tree.api.md          | 100 +++--
 .../react-tree/src/FlatTree.ts                |   1 +
 .../src/components/FlatTree/FlatTree.cy.tsx   | 253 +++++++++++
 .../src/components/FlatTree/FlatTree.test.tsx |  19 +
 .../src/components/FlatTree/FlatTree.tsx      |  21 +
 .../src/components/FlatTree/FlatTree.types.ts |  83 ++++
 .../__snapshots__/FlatTree.test.tsx.snap      |  12 +
 .../src/components/FlatTree/index.ts          |   9 +
 .../useFlatControllableCheckedItems.ts        |  47 +-
 .../src/components/FlatTree/useFlatTree.ts    |   5 +
 .../FlatTree}/useFlatTreeNavigation.ts        |  33 +-
 .../FlatTree/useFlatTreeStyles.styles.ts      |  32 ++
 .../FlatTree/useHeadlessFlatTree.ts}          | 106 ++---
 .../src/components/Tree/Tree.cy.tsx           | 416 +++++++++---------
 .../src/components/Tree/Tree.test.tsx         |   9 +-
 .../react-tree/src/components/Tree/Tree.tsx   |  15 +-
 .../src/components/Tree/Tree.types.ts         |  12 +-
 .../Tree/__snapshots__/Tree.test.tsx.snap     |   6 +-
 .../react-tree/src/components/Tree/index.ts   |   4 +-
 .../src/components/Tree/renderTree.tsx        |   2 +-
 .../Tree/useControllableCheckedItems.ts}      |  32 +-
 .../react-tree/src/components/Tree/useTree.ts |  65 ++-
 .../components/Tree/useTreeContextValues.ts   |   2 +-
 .../Tree/useTreeNavigation.ts}                |  14 +-
 .../components/Tree/useTreeStyles.styles.ts   |   4 +-
 .../react-tree/src/contexts/treeContext.ts    |   2 +-
 .../src/contexts/treeItemContext.ts           |   4 +-
 .../react-tree/src/hooks/index.ts             |   5 -
 .../src/hooks/useControllableOpenItems.ts     |  10 +-
 .../{components/Tree => hooks}/useRootTree.ts |  82 ++--
 .../{components/Tree => hooks}/useSubtree.ts  |  12 +-
 .../react-components/react-tree/src/index.ts  |  39 +-
 .../src/testing/flattenTreeFromElement.ts     |  10 +-
 .../react-tree/src/utils/ImmutableMap.ts      |   5 +
 .../react-tree/src/utils/ImmutableSet.ts      |   5 +
 .../src/utils/createCheckedItems.ts           |  21 +
 .../src/utils/createFlatTreeItems.ts          | 210 ---------
 .../src/utils/createHeadlessTree.ts           | 231 ++++++++++
 .../react-tree/src/utils/createOpenItems.ts   |  12 +
 .../react-tree/src/utils/flattenTree.ts       |  14 +-
 .../A_Tree/TreeMultipleSelection.stories.tsx  |  46 --
 .../A_Tree/TreeSingleSelection.stories.tsx    |  40 --
 .../stories/A_Tree/index.stories.tsx          |   2 -
 ...TreeItemExpandCollapseIconOnly.stories.tsx |  23 +-
 .../TreeInfiniteScrolling.stories.tsx         |  12 +-
 .../D_flatTree/TreeItemAddRemove.stories.tsx  |  10 +-
 .../D_flatTree/TreeLazyLoading.stories.tsx    |  10 +-
 .../D_flatTree/TreeMultiSelection.stories.tsx |  12 +-
 .../TreeSingleSelection.stories.tsx           |  12 +-
 .../D_flatTree/Virtualization.stories.tsx     |  34 +-
 .../D_flatTree/flattenTree.stories.tsx        |  10 +-
 .../D_flatTree/useFlatTree.stories.tsx        |  12 +-
 56 files changed, 1375 insertions(+), 882 deletions(-)
 create mode 100644 change/@fluentui-react-components-5df66655-eef3-48d3-96da-4d8feb59acb5.json
 create mode 100644 change/@fluentui-react-tree-ddf7694e-548f-4a39-bec8-ab7f30b1c301.json
 create mode 100644 packages/react-components/react-tree/src/FlatTree.ts
 create mode 100644 packages/react-components/react-tree/src/components/FlatTree/FlatTree.cy.tsx
 create mode 100644 packages/react-components/react-tree/src/components/FlatTree/FlatTree.test.tsx
 create mode 100644 packages/react-components/react-tree/src/components/FlatTree/FlatTree.tsx
 create mode 100644 packages/react-components/react-tree/src/components/FlatTree/FlatTree.types.ts
 create mode 100644 packages/react-components/react-tree/src/components/FlatTree/__snapshots__/FlatTree.test.tsx.snap
 create mode 100644 packages/react-components/react-tree/src/components/FlatTree/index.ts
 rename packages/react-components/react-tree/src/{hooks => components/FlatTree}/useFlatControllableCheckedItems.ts (51%)
 create mode 100644 packages/react-components/react-tree/src/components/FlatTree/useFlatTree.ts
 rename packages/react-components/react-tree/src/{hooks => components/FlatTree}/useFlatTreeNavigation.ts (72%)
 create mode 100644 packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts
 rename packages/react-components/react-tree/src/{hooks/useFlatTree.ts => components/FlatTree/useHeadlessFlatTree.ts} (67%)
 rename packages/react-components/react-tree/src/{hooks/useNestedControllableCheckedItems.ts => components/Tree/useControllableCheckedItems.ts} (83%)
 rename packages/react-components/react-tree/src/{hooks/useNestedTreeNavigation.ts => components/Tree/useTreeNavigation.ts} (81%)
 delete mode 100644 packages/react-components/react-tree/src/hooks/index.ts
 rename packages/react-components/react-tree/src/{components/Tree => hooks}/useRootTree.ts (67%)
 rename packages/react-components/react-tree/src/{components/Tree => hooks}/useSubtree.ts (78%)
 create mode 100644 packages/react-components/react-tree/src/utils/createCheckedItems.ts
 delete mode 100644 packages/react-components/react-tree/src/utils/createFlatTreeItems.ts
 create mode 100644 packages/react-components/react-tree/src/utils/createHeadlessTree.ts
 create mode 100644 packages/react-components/react-tree/src/utils/createOpenItems.ts
 delete mode 100644 packages/react-components/react-tree/stories/A_Tree/TreeMultipleSelection.stories.tsx
 delete mode 100644 packages/react-components/react-tree/stories/A_Tree/TreeSingleSelection.stories.tsx

diff --git a/change/@fluentui-react-components-5df66655-eef3-48d3-96da-4d8feb59acb5.json b/change/@fluentui-react-components-5df66655-eef3-48d3-96da-4d8feb59acb5.json
new file mode 100644
index 0000000000000..03e75c0038d20
--- /dev/null
+++ b/change/@fluentui-react-components-5df66655-eef3-48d3-96da-4d8feb59acb5.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: exports FlatTree",
+  "packageName": "@fluentui/react-components",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tree-ddf7694e-548f-4a39-bec8-ab7f30b1c301.json b/change/@fluentui-react-tree-ddf7694e-548f-4a39-bec8-ab7f30b1c301.json
new file mode 100644
index 0000000000000..62d32603c749f
--- /dev/null
+++ b/change/@fluentui-react-tree-ddf7694e-548f-4a39-bec8-ab7f30b1c301.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: creates FlatTree component",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md
index d810d1cf7c20d..fd255941ffcf6 100644
--- a/packages/react-components/react-components/etc/react-components.unstable.api.md
+++ b/packages/react-components/react-components/etc/react-components.unstable.api.md
@@ -46,9 +46,14 @@ import { DrawerSlots } from '@fluentui/react-drawer';
 import { DrawerState } from '@fluentui/react-drawer';
 import { flattenTree_unstable } from '@fluentui/react-tree';
 import { FlatTree } from '@fluentui/react-tree';
-import { FlatTreeItem } from '@fluentui/react-tree';
-import { FlatTreeItemProps } from '@fluentui/react-tree';
+import { flatTreeClassNames } from '@fluentui/react-tree';
 import { FlatTreeProps } from '@fluentui/react-tree';
+import { FlatTreeSlots } from '@fluentui/react-tree';
+import { FlatTreeState } from '@fluentui/react-tree';
+import { HeadlessFlatTree } from '@fluentui/react-tree';
+import { HeadlessFlatTreeItem } from '@fluentui/react-tree';
+import { HeadlessFlatTreeItemProps } from '@fluentui/react-tree';
+import { HeadlessFlatTreeOptions } from '@fluentui/react-tree';
 import { InfoButton } from '@fluentui/react-infobutton';
 import { infoButtonClassNames } from '@fluentui/react-infobutton';
 import { InfoButtonProps } from '@fluentui/react-infobutton';
@@ -59,7 +64,6 @@ import { infoLabelClassNames } from '@fluentui/react-infobutton';
 import { InfoLabelProps } from '@fluentui/react-infobutton';
 import { InfoLabelSlots } from '@fluentui/react-infobutton';
 import { InfoLabelState } from '@fluentui/react-infobutton';
-import { NestedTreeItem } from '@fluentui/react-tree';
 import { renderAlert_unstable } from '@fluentui/react-alert';
 import { renderDrawer_unstable } from '@fluentui/react-drawer';
 import { renderDrawerBody_unstable } from '@fluentui/react-drawer';
@@ -69,6 +73,7 @@ import { renderDrawerHeaderNavigation_unstable } from '@fluentui/react-drawer';
 import { renderDrawerHeaderTitle_unstable } from '@fluentui/react-drawer';
 import { renderDrawerInline_unstable } from '@fluentui/react-drawer';
 import { renderDrawerOverlay_unstable } from '@fluentui/react-drawer';
+import { renderFlatTree_unstable } from '@fluentui/react-tree';
 import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
 import { renderInfoLabel_unstable } from '@fluentui/react-infobutton';
 import { renderTree_unstable } from '@fluentui/react-tree';
@@ -131,6 +136,9 @@ import { useDrawerOverlay_unstable } from '@fluentui/react-drawer';
 import { useDrawerOverlayStyles_unstable } from '@fluentui/react-drawer';
 import { useDynamicVirtualizerMeasure } from '@fluentui/react-virtualizer';
 import { useFlatTree_unstable } from '@fluentui/react-tree';
+import { useFlatTreeContextValues_unstable } from '@fluentui/react-tree';
+import { useFlatTreeStyles_unstable } from '@fluentui/react-tree';
+import { useHeadlessFlatTree_unstable } from '@fluentui/react-tree';
 import { useInfoButton_unstable } from '@fluentui/react-infobutton';
 import { useInfoButtonStyles_unstable } from '@fluentui/react-infobutton';
 import { useInfoLabel_unstable } from '@fluentui/react-infobutton';
@@ -262,12 +270,22 @@ export { flattenTree_unstable }
 
 export { FlatTree }
 
-export { FlatTreeItem }
-
-export { FlatTreeItemProps }
+export { flatTreeClassNames }
 
 export { FlatTreeProps }
 
+export { FlatTreeSlots }
+
+export { FlatTreeState }
+
+export { HeadlessFlatTree }
+
+export { HeadlessFlatTreeItem }
+
+export { HeadlessFlatTreeItemProps }
+
+export { HeadlessFlatTreeOptions }
+
 export { InfoButton }
 
 export { infoButtonClassNames }
@@ -288,8 +306,6 @@ export { InfoLabelSlots }
 
 export { InfoLabelState }
 
-export { NestedTreeItem }
-
 export { renderAlert_unstable }
 
 export { renderDrawer_unstable }
@@ -308,6 +324,8 @@ export { renderDrawerInline_unstable }
 
 export { renderDrawerOverlay_unstable }
 
+export { renderFlatTree_unstable }
+
 export { renderInfoButton_unstable }
 
 export { renderInfoLabel_unstable }
@@ -432,6 +450,12 @@ export { useDynamicVirtualizerMeasure }
 
 export { useFlatTree_unstable }
 
+export { useFlatTreeContextValues_unstable }
+
+export { useFlatTreeStyles_unstable }
+
+export { useHeadlessFlatTree_unstable }
+
 export { useInfoButton_unstable }
 
 export { useInfoButtonStyles_unstable }
diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
index 216046cd87393..3cdc2426a02c8 100644
--- a/packages/react-components/react-components/src/unstable/index.ts
+++ b/packages/react-components/react-components/src/unstable/index.ts
@@ -79,6 +79,7 @@ export type {
 export {
   Tree,
   TreeItem,
+  FlatTree,
   TreeProvider,
   TreeItemLayout,
   TreeItemProvider,
@@ -87,6 +88,7 @@ export {
   useTreeContextValues_unstable,
   useTreeItemContext_unstable,
   useTreeItemContextValues_unstable,
+  useFlatTreeContextValues_unstable,
   useTree_unstable,
   useTreeItem_unstable,
   useTreeItemLayout_unstable,
@@ -104,7 +106,11 @@ export {
   treeItemLayoutClassNames,
   treeItemClassNames,
   treeClassNames,
+  flatTreeClassNames,
   useFlatTree_unstable,
+  useHeadlessFlatTree_unstable,
+  useFlatTreeStyles_unstable,
+  renderFlatTree_unstable,
   flattenTree_unstable,
 } from '@fluentui/react-tree';
 
@@ -126,11 +132,13 @@ export type {
   TreeItemLayoutSlots,
   TreeItemLayoutProps,
   TreeContextValue,
-  NestedTreeItem,
-  FlatTree,
   FlatTreeProps,
-  FlatTreeItemProps,
-  FlatTreeItem,
+  FlatTreeSlots,
+  FlatTreeState,
+  HeadlessFlatTree,
+  HeadlessFlatTreeItem,
+  HeadlessFlatTreeItemProps,
+  HeadlessFlatTreeOptions,
 } from '@fluentui/react-tree';
 
 export {
diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md
index 889a1f29df995..6e0afba6c4f9e 100644
--- a/packages/react-components/react-tree/etc/react-tree.api.md
+++ b/packages/react-components/react-tree/etc/react-tree.api.md
@@ -34,47 +34,57 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
-export const flattenTree_unstable: <Props extends TreeItemProps>(items: NestedTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
+export const flattenTree_unstable: <Props extends TreeItemProps>(items: FlattenTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
+
+// @public (undocumented)
+export type FlattenTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
+    value: TreeItemValue;
+    subtree?: FlattenTreeItem<Props>[];
+};
 
 // @public
-export type FlatTree<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
-    getTreeProps(): FlatTreeProps;
-    navigate(data: TreeNavigationData_unstable): void;
-    getNextNavigableItem(visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable): FlatTreeItem<Props> | undefined;
-    getElementFromItem(item: FlatTreeItem<Props>): HTMLElement | null;
-    items(): IterableIterator<FlatTreeItem<Props>>;
+export const FlatTree: ForwardRefComponent<FlatTreeProps>;
+
+// @public (undocumented)
+export const flatTreeClassNames: SlotClassNames<TreeSlots>;
+
+// @public (undocumented)
+export type FlatTreeProps = ComponentProps<TreeSlots> & {
+    appearance?: 'subtle' | 'subtle-alpha' | 'transparent';
+    size?: 'small' | 'medium';
+    openItems?: Iterable<TreeItemValue>;
+    onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;
+    onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;
+    selectionMode?: SelectionMode_2;
+    checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
+    onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;
 };
 
 // @public
-export type FlatTreeItem<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
-    index: number;
-    level: number;
-    childrenValues: TreeItemValue[];
-    value: TreeItemValue;
-    parentValue: TreeItemValue | undefined;
-    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Omit<Props, 'parentId'>;
+export type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {
+    getTreeProps(): Required<Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable' | 'checkedItems' | 'onCheckedChange'>> & {
+        ref: React_2.Ref<HTMLDivElement>;
+        openItems: ImmutableSet<TreeItemValue>;
+    };
+    navigate(data: TreeNavigationData_unstable): void;
+    getNextNavigableItem(visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable): HeadlessTreeItem<Props> | undefined;
+    getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;
+    items(): IterableIterator<HeadlessTreeItem<Props>>;
 };
 
 // @public (undocumented)
-export type FlatTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & Partial<Pick<TreeItemProps, 'itemType'>> & {
-    value: TreeItemValue;
-    parentValue?: TreeItemValue;
-};
+export type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;
 
 // @public (undocumented)
-export type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable' | 'checkedItems' | 'onCheckedChange'>> & {
-    ref: React_2.Ref<HTMLDivElement>;
-    openItems: ImmutableSet<TreeItemValue>;
-};
+export type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;
 
 // @public (undocumented)
-export type NestedTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
-    value: TreeItemValue;
-    subtree?: NestedTreeItem<Props>[];
-};
+export type HeadlessFlatTreeOptions = Pick<FlatTreeProps, 'onOpenChange' | 'onNavigation_unstable' | 'selectionMode' | 'onCheckedChange'> & Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems' | 'defaultChecked'>;
 
 // @public (undocumented)
-export const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
+const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
+export { renderTree_unstable as renderFlatTree_unstable }
+export { renderTree_unstable }
 
 // @public
 export const renderTreeItem_unstable: (state: TreeItemState, contextValues: TreeItemContextValues) => JSX.Element;
@@ -119,12 +129,26 @@ export type TreeContextValue = {
     requestTreeResponse(request: TreeItemRequest): void;
 };
 
+// @public (undocumented)
+export type TreeContextValues = {
+    tree: TreeContextValue;
+};
+
 // @public
 export const TreeItem: ForwardRefComponent<TreeItemProps>;
 
 // @public (undocumented)
 export const treeItemClassNames: SlotClassNames<TreeItemInternalSlot>;
 
+// @public (undocumented)
+export type TreeItemContextValue = {
+    layoutRef: React_2.Ref<HTMLDivElement>;
+    subtreeRef: React_2.Ref<HTMLDivElement>;
+    itemType: TreeItemType;
+    value: TreeItemValue;
+    open: boolean;
+};
+
 // @public
 export const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
 
@@ -284,26 +308,38 @@ export const TreeProvider: Provider<TreeContextValue | undefined> & FC<ProviderP
 export type TreeSelectionValue = MultiSelectValue | SingleSelectValue;
 
 // @public (undocumented)
-export type TreeSlots = {
+type TreeSlots = {
     root: Slot<'div'>;
 };
+export { TreeSlots as FlatTreeSlots }
+export { TreeSlots }
 
 // @public
-export type TreeState = ComponentState<TreeSlots> & TreeContextValue & {
+type TreeState = ComponentState<TreeSlots> & TreeContextValue & {
     open: boolean;
 };
+export { TreeState as FlatTreeState }
+export { TreeState }
 
-// @public
-export function useFlatTree_unstable<Props extends FlatTreeItemProps = FlatTreeItemProps>(flatTreeItemProps: Props[], options?: FlatTreeOptions): FlatTree<Props>;
+// @public (undocumented)
+export const useFlatTree_unstable: (props: FlatTreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
+
+// @public (undocumented)
+export const useFlatTreeStyles_unstable: (state: TreeState) => TreeState;
 
 // @public
+export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(flatTreeItemProps: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTree<Props>;
+
+// @public (undocumented)
 export const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
 
 // @public (undocumented)
 export const useTreeContext_unstable: <T>(selector: ContextSelector<TreeContextValue, T>) => T;
 
 // @public (undocumented)
-export function useTreeContextValues_unstable(state: TreeState): TreeContextValues;
+function useTreeContextValues_unstable(state: TreeState): TreeContextValues;
+export { useTreeContextValues_unstable as useFlatTreeContextValues_unstable }
+export { useTreeContextValues_unstable }
 
 // @public
 export function useTreeItem_unstable(props: TreeItemProps, ref: React_2.Ref<HTMLDivElement>): TreeItemState;
diff --git a/packages/react-components/react-tree/src/FlatTree.ts b/packages/react-components/react-tree/src/FlatTree.ts
new file mode 100644
index 0000000000000..b6782abc82e9a
--- /dev/null
+++ b/packages/react-components/react-tree/src/FlatTree.ts
@@ -0,0 +1 @@
+export * from './components/FlatTree/index';
diff --git a/packages/react-components/react-tree/src/components/FlatTree/FlatTree.cy.tsx b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.cy.tsx
new file mode 100644
index 0000000000000..f699853b4b0d4
--- /dev/null
+++ b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.cy.tsx
@@ -0,0 +1,253 @@
+import * as React from 'react';
+import { mount as mountBase } from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { teamsLightTheme } from '@fluentui/react-theme';
+import {
+  Tree,
+  TreeItem,
+  TreeItemLayout,
+  treeItemLayoutClassNames,
+  TreeItemValue,
+  FlatTreeProps,
+  HeadlessFlatTreeOptions,
+  useHeadlessFlatTree_unstable,
+  FlatTree,
+} from '@fluentui/react-tree';
+import { Button } from '@fluentui/react-button';
+import { flattenTreeFromElement } from '../../testing/flattenTreeFromElement';
+
+const mount = (element: JSX.Element) => {
+  mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);
+};
+
+const TreeTest: React.FC<FlatTreeProps & HeadlessFlatTreeOptions> = props => {
+  const flatTree = useHeadlessFlatTree_unstable(
+    flattenTreeFromElement(
+      props.children ? (
+        <>{props.children}</>
+      ) : (
+        <>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
+                <TreeItemLayout>level 2, item 1</TreeItemLayout>
+              </TreeItem>
+              <TreeItem itemType="leaf" value="item1__item2" data-testid="item1__item2">
+                <TreeItemLayout>level 2, item 2</TreeItemLayout>
+              </TreeItem>
+              <TreeItem itemType="leaf" value="item1__item3" data-testid="item1__item3">
+                <TreeItemLayout>level 2, item 3</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+          <TreeItem itemType="branch" value="item2" data-testid="item2">
+            <TreeItemLayout>level 1, item 2</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="branch" value="item2__item1" data-testid="item2__item1">
+                <TreeItemLayout>level 2, item 1</TreeItemLayout>
+                <Tree>
+                  <TreeItem itemType="leaf" value="item2__item1__item1" data-testid="item2__item1__item1">
+                    <TreeItemLayout>level 3, item 1</TreeItemLayout>
+                  </TreeItem>
+                </Tree>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </>
+      ),
+    ),
+    props,
+  );
+  return (
+    <FlatTree {...props} {...flatTree.getTreeProps()} id="baseTree" aria-label="Tree">
+      {Array.from(flatTree.items(), item => (
+        <TreeItem key={item.value} {...item.getTreeItemProps()} />
+      ))}
+    </FlatTree>
+  );
+};
+TreeTest.displayName = 'FlatTree';
+
+describe(TreeTest.displayName!, () => {
+  it('should have all but first level items hidden', () => {
+    mount(<TreeTest />);
+    cy.get('[data-testid="item1__item1"]').should('not.exist');
+    cy.get('[data-testid="item1__item2"]').should('not.exist');
+    cy.get('[data-testid="item1__item3"]').should('not.exist');
+    cy.get('[data-testid="item2__item1"]').should('not.exist');
+    cy.get('[data-testid="item2__item1__item1"]').should('not.exist');
+  });
+
+  it('should have all items visible', () => {
+    mount(<TreeTest defaultOpenItems={['item1', 'item2', 'item2__item1']} />);
+    cy.get('[data-testid="item1__item1"]').should('exist');
+    cy.get('[data-testid="item1__item2"]').should('exist');
+    cy.get('[data-testid="item1__item3"]').should('exist');
+    cy.get('[data-testid="item2__item1"]').should('exist');
+    cy.get('[data-testid="item2__item1__item1"]').should('exist');
+  });
+
+  describe('Mouse interactions', () => {
+    it('should expand/collapse item on layout click', () => {
+      mount(<TreeTest />);
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+    });
+    it('should expand/collapse item on expandIcon click only', () => {
+      const ExpandIconTest = () => {
+        const [openItems, setOpenItems] = React.useState<Set<TreeItemValue>>(() => new Set());
+        return (
+          <TreeTest
+            openItems={openItems}
+            onOpenChange={(_, data) => {
+              if (data.type === 'ExpandIconClick') {
+                const newSet = new Set(openItems);
+                data.open ? newSet.add(data.value) : newSet.delete(data.value);
+                setOpenItems(newSet);
+              }
+            }}
+          />
+        );
+      };
+      mount(<ExpandIconTest />);
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.expandIcon}`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.expandIcon}`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+    });
+    it('should not expand/collapse item on actions click', () => {
+      mount(
+        <TreeTest id="baseTree" aria-label="Tree">
+          <TreeItem actions={<Button id="action">action!</Button>} itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
+                <TreeItemLayout>level 2, item 1</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </TreeTest>,
+      );
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get('[data-testid="item1"]').focus();
+      cy.get(`#action`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+    });
+  });
+  describe('Keyboard interactions', () => {
+    it('should expand/collapse item on Enter key', () => {
+      mount(<TreeTest />);
+      cy.get('[data-testid="item1"]').focus();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{enter}');
+      cy.get('[data-testid="item1__item1"]').should('exist');
+    });
+    it('should expand item on Right key', () => {
+      mount(<TreeTest />);
+      cy.get('[data-testid="item1"]').focus();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{rightarrow}');
+      cy.get('[data-testid="item1__item1"]').should('exist');
+    });
+    it('should collapse item on Left key', () => {
+      mount(<TreeTest />);
+      cy.get('[data-testid="item1"]').focus();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{rightarrow}');
+      cy.get('[data-testid="item1__item1"]').should('exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{leftarrow}');
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+    });
+    it('should focus on actions when pressing tab key', () => {
+      mount(
+        <TreeTest id="baseTree" aria-label="Tree">
+          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
+                <TreeItemLayout>level 2, item 1</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </TreeTest>,
+      );
+      cy.focused().should('not.exist');
+      cy.document().realPress('Tab');
+      cy.get('[data-testid="item1"]').should('be.focused');
+      cy.document().realPress('Tab');
+      cy.get('#action').should('be.focused');
+    });
+    it('should not expand/collapse item on actions Enter/Space key', () => {
+      mount(
+        <TreeTest id="baseTree" aria-label="Tree">
+          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
+                <TreeItemLayout>level 2, item 1</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </TreeTest>,
+      );
+      cy.focused().should('not.exist');
+      cy.document().realPress('Tab');
+      cy.get('[data-testid="item1"]').should('be.focused');
+      cy.document().realPress('Tab');
+      cy.get('#action').should('be.focused').realPress('{enter}');
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get('#action').should('be.focused').realPress('Space');
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+    });
+    it('should focus on first item when pressing tab key', () => {
+      mount(<TreeTest />);
+      cy.focused().should('not.exist');
+      cy.document().realPress('Tab');
+      cy.get('[data-testid="item1"]').should('be.focused');
+    });
+    it('should focus out of baseTree when pressing tab key inside baseTree.', () => {
+      mount(<TreeTest />);
+      cy.focused().should('not.exist');
+      cy.document().realPress('Tab');
+      cy.get('[data-testid="item1"]').should('be.focused');
+      cy.focused().realPress('Tab');
+      cy.focused().should('not.exist');
+    });
+    describe('Navigation', () => {
+      it('should move with Up/Down keys', () => {
+        mount(<TreeTest />);
+        cy.get('[data-testid="item1"]').focus().realPress('{downarrow}');
+        cy.get('[data-testid="item2"]').should('be.focused');
+        cy.focused().realPress('Tab').should('not.exist');
+      });
+      it('should move with Left/Right keys', () => {
+        mount(<TreeTest defaultOpenItems={['item2', 'item2__item1']} />);
+        cy.get('[data-testid="item1"]').focus().realPress('{downarrow}');
+        cy.get('[data-testid="item2"]').should('be.focused').realPress('{rightarrow}');
+        cy.get('[data-testid="item2__item1"]').should('be.focused').realPress('{rightarrow}');
+        cy.get('[data-testid="item2__item1__item1"]').should('be.focused').realPress('{leftarrow}');
+        cy.get('[data-testid="item2__item1"]').should('be.focused').realPress('{leftarrow}').realPress('{leftarrow}');
+        cy.get('[data-testid="item2"]').should('be.focused');
+      });
+      it('should move to last item with End key', () => {
+        mount(<TreeTest defaultOpenItems={['item1', 'item2', 'item2__item1']} />);
+        cy.get('[data-testid="item1"]').focus().realPress('{end}');
+        cy.get('[data-testid="item2__item1__item1"]').should('be.focused');
+      });
+      it('should move to first item with Home key', () => {
+        mount(<TreeTest defaultOpenItems={['item1', 'item2', 'item2__item1']} />);
+        cy.get('[data-testid="item1"]').focus().realPress('{end}');
+        cy.get('[data-testid="item2__item1__item1"]').should('be.focused').realPress('{home}');
+        cy.get('[data-testid="item1"]').should('be.focused');
+      });
+    });
+  });
+});
diff --git a/packages/react-components/react-tree/src/components/FlatTree/FlatTree.test.tsx b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.test.tsx
new file mode 100644
index 0000000000000..6773525184a50
--- /dev/null
+++ b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.test.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { FlatTree } from './FlatTree';
+
+describe('FlatTree', () => {
+  isConformant({
+    Component: FlatTree,
+    displayName: 'FlatTree',
+    disabledTests: ['consistent-callback-args'],
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<FlatTree>Default FlatTree</FlatTree>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components/react-tree/src/components/FlatTree/FlatTree.tsx b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.tsx
new file mode 100644
index 0000000000000..0aad4662e9ca9
--- /dev/null
+++ b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { FlatTreeProps } from './FlatTree.types';
+import {
+  useTreeContextValues_unstable as useFlatTreeContextValues_unstable,
+  renderTree_unstable as renderFlatTree_unstable,
+} from '../Tree/index';
+import { useFlatTree_unstable } from './useFlatTree';
+import { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';
+
+/**
+ * FlatTree component - TODO: add more docs
+ */
+export const FlatTree: ForwardRefComponent<FlatTreeProps> = React.forwardRef((props, ref) => {
+  const state = useFlatTree_unstable(props, ref);
+  const contextValues = useFlatTreeContextValues_unstable(state);
+  useFlatTreeStyles_unstable(state);
+  return renderFlatTree_unstable(state, contextValues);
+});
+
+FlatTree.displayName = 'FlatTree';
diff --git a/packages/react-components/react-tree/src/components/FlatTree/FlatTree.types.ts b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.types.ts
new file mode 100644
index 0000000000000..9fc9d73189758
--- /dev/null
+++ b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.types.ts
@@ -0,0 +1,83 @@
+import type { ComponentProps, SelectionMode } from '@fluentui/react-utilities';
+import type {
+  TreeSlots,
+  TreeState,
+  TreeCheckedChangeData,
+  TreeCheckedChangeEvent,
+  TreeNavigationData_unstable,
+  TreeNavigationEvent_unstable,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+  TreeSelectionValue,
+} from '../Tree/index';
+import type { TreeItemValue } from '../TreeItem/index';
+
+export { TreeSlots as FlatTreeSlots, TreeState as FlatTreeState };
+
+export type FlatTreeProps = ComponentProps<TreeSlots> & {
+  /**
+   * A tree item can have various appearances:
+   * - 'subtle' (default): The default tree item styles.
+   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.
+   * - 'transparent': Removes background color.
+   * @default 'subtle'
+   */
+  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';
+  /**
+   * Size of the tree item.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium';
+  /**
+   * This refers to a list of ids of opened tree items.
+   * Controls the state of the open tree items.
+   * These property is ignored for subtrees.
+   */
+  openItems?: Iterable<TreeItemValue>;
+  /**
+   * Callback fired when the component changes value from open state.
+   * These property is ignored for subtrees.
+   *
+   * @param event - a React's Synthetic event
+   * @param data - A data object with relevant information,
+   * such as open value and type of interaction that created the event.
+   */
+  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;
+
+  /**
+   * Callback fired when navigation happens inside the component.
+   * These property is ignored for subtrees.
+   *
+   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.
+   *
+   * @param event - a React's Synthetic event
+   * @param data - A data object with relevant information,
+   */
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;
+
+  /**
+   * This refers to the selection mode of the tree.
+   * - undefined: No selection can be done.
+   * - 'single': Only one tree item can be selected, radio buttons are rendered.
+   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.
+   *
+   * @default undefined
+   */
+  selectionMode?: SelectionMode;
+  /**
+   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.
+   * Controls the state of the checked tree items.
+   * These property is ignored for subtrees.
+   */
+  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
+  /**
+   * Callback fired when the component changes value from checked state.
+   * These property is ignored for subtrees.
+   *
+   * @param event - a React's Synthetic event
+   * @param data - A data object with relevant information,
+   * such as checked value and type of interaction that created the event.
+   */
+  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;
+};
diff --git a/packages/react-components/react-tree/src/components/FlatTree/__snapshots__/FlatTree.test.tsx.snap b/packages/react-components/react-tree/src/components/FlatTree/__snapshots__/FlatTree.test.tsx.snap
new file mode 100644
index 0000000000000..3c359b50b261a
--- /dev/null
+++ b/packages/react-components/react-tree/src/components/FlatTree/__snapshots__/FlatTree.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FlatTree renders a default state 1`] = `
+<div>
+  <div
+    class="fui-FlatTree"
+    role="baseTree"
+  >
+    Default FlatTree
+  </div>
+</div>
+`;
diff --git a/packages/react-components/react-tree/src/components/FlatTree/index.ts b/packages/react-components/react-tree/src/components/FlatTree/index.ts
new file mode 100644
index 0000000000000..30ad76d7e65fc
--- /dev/null
+++ b/packages/react-components/react-tree/src/components/FlatTree/index.ts
@@ -0,0 +1,9 @@
+export * from './FlatTree';
+export * from './FlatTree.types';
+export {
+  renderTree_unstable as renderFlatTree_unstable,
+  useTreeContextValues_unstable as useFlatTreeContextValues_unstable,
+} from '../Tree/index';
+export * from './useHeadlessFlatTree';
+export * from './useFlatTree';
+export * from './useFlatTreeStyles.styles';
diff --git a/packages/react-components/react-tree/src/hooks/useFlatControllableCheckedItems.ts b/packages/react-components/react-tree/src/components/FlatTree/useFlatControllableCheckedItems.ts
similarity index 51%
rename from packages/react-components/react-tree/src/hooks/useFlatControllableCheckedItems.ts
rename to packages/react-components/react-tree/src/components/FlatTree/useFlatControllableCheckedItems.ts
index 15572507c45e5..bbb28a1adf70e 100644
--- a/packages/react-components/react-tree/src/hooks/useFlatControllableCheckedItems.ts
+++ b/packages/react-components/react-tree/src/components/FlatTree/useFlatControllableCheckedItems.ts
@@ -1,69 +1,52 @@
 import { useControllableState } from '@fluentui/react-utilities';
-import type { TreeCheckedChangeData, TreeProps } from '../Tree';
-import { TreeItemValue } from '../TreeItem';
-import { ImmutableMap } from '../utils/ImmutableMap';
+import { TreeItemValue } from '../../TreeItem';
+import { ImmutableMap } from '../../utils/ImmutableMap';
 import * as React from 'react';
-import type { FlatTreeItemProps } from './useFlatTree';
-import { FlatTreeItems } from '../utils/createFlatTreeItems';
+import type { HeadlessTree, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';
+import { createCheckedItems } from '../../utils/createCheckedItems';
+import type { TreeCheckedChangeData, TreeProps } from '../Tree/Tree.types';
 
-function initializeMap(iterable?: Iterable<TreeItemValue | [TreeItemValue, 'mixed' | boolean]>) {
-  const map = new Map<TreeItemValue, 'mixed' | boolean>();
-  if (iterable === undefined) {
-    return ImmutableMap.empty;
-  }
-  for (const item of iterable) {
-    if (Array.isArray(item)) {
-      map.set(item[0], item[1]);
-    } else {
-      map.set(item, true);
-    }
-  }
-  return ImmutableMap.dangerouslyCreate_unstable(map);
-}
-
-export function useFlatControllableCheckedItems(
-  props: Pick<TreeProps, 'checkedItems' | 'defaultCheckedItems' | 'selectionMode'>,
-) {
+export function useFlatControllableCheckedItems(props: Pick<TreeProps, 'checkedItems' | 'defaultCheckedItems'>) {
   const [checkedItems, setCheckedItems] = useControllableState({
     initialState: ImmutableMap.empty,
-    state: React.useMemo(() => props.checkedItems && initializeMap(props.checkedItems), [props.checkedItems]),
-    defaultState: () => initializeMap(props.defaultCheckedItems),
+    state: React.useMemo(() => props.checkedItems && createCheckedItems(props.checkedItems), [props.checkedItems]),
+    defaultState: () => createCheckedItems(props.defaultCheckedItems),
   });
 
   return [checkedItems, setCheckedItems] as const;
 }
 
-export function createNextFlatCheckedItems<Props extends FlatTreeItemProps = FlatTreeItemProps>(
+export function createNextFlatCheckedItems<Props extends HeadlessTreeItemProps>(
   data: Pick<TreeCheckedChangeData, 'value' | 'checked' | 'selectionMode'>,
   previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,
-  flatTreeItems: FlatTreeItems<Props>,
+  virtualTree: HeadlessTree<Props>,
 ): ImmutableMap<TreeItemValue, 'mixed' | boolean> {
   if (data.selectionMode === 'single') {
     return ImmutableMap.create([[data.value, data.checked]]);
   }
-  const treeItem = flatTreeItems.get(data.value);
+  const treeItem = virtualTree.get(data.value);
   if (!treeItem) {
     if (process.env.NODE_ENV !== 'production') {
       // eslint-disable-next-line no-console
-      console.error(`useFlatTree: tree item ${data.value} not found`);
+      console.error(`useHeadlessFlatTree: tree item ${data.value} not found`);
     }
     return previousCheckedItems;
   }
   const nextCheckedItems = new Map(previousCheckedItems);
-  for (const children of flatTreeItems.subtree(data.value)) {
+  for (const children of virtualTree.subtree(data.value)) {
     nextCheckedItems.set(children.value, data.checked);
   }
   nextCheckedItems.set(data.value, data.checked);
 
   let isAncestorsMixed = false;
-  for (const parent of flatTreeItems.ancestors(treeItem.value)) {
+  for (const parent of virtualTree.ancestors(treeItem.value)) {
     // if one parent is mixed, all ancestors are mixed
     if (isAncestorsMixed) {
       nextCheckedItems.set(parent.value, 'mixed');
       continue;
     }
     const checkedChildren = [];
-    for (const child of flatTreeItems.children(parent.value)) {
+    for (const child of virtualTree.children(parent.value)) {
       if ((nextCheckedItems.get(child.value) ?? false) === data.checked) {
         checkedChildren.push(child);
       }
diff --git a/packages/react-components/react-tree/src/components/FlatTree/useFlatTree.ts b/packages/react-components/react-tree/src/components/FlatTree/useFlatTree.ts
new file mode 100644
index 0000000000000..61c9966ad22df
--- /dev/null
+++ b/packages/react-components/react-tree/src/components/FlatTree/useFlatTree.ts
@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { useRootTree } from '../../hooks/useRootTree';
+import { FlatTreeProps, FlatTreeState } from './FlatTree.types';
+
+export const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = useRootTree;
diff --git a/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeNavigation.ts
similarity index 72%
rename from packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts
rename to packages/react-components/react-tree/src/components/FlatTree/useFlatTreeNavigation.ts
index 9c62019d85fd2..79e655c0f78b8 100644
--- a/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts
+++ b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeNavigation.ts
@@ -1,18 +1,15 @@
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { TreeNavigationData_unstable } from '../Tree';
-import { FlatTreeItems } from '../utils/createFlatTreeItems';
-import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
-import { treeDataTypes } from '../utils/tokens';
-import { treeItemFilter } from '../utils/treeItemFilter';
-import { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';
-import { useRovingTabIndex } from './useRovingTabIndexes';
-import { FlatTreeItemProps } from './useFlatTree';
-import { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../utils/getTreeItemValueFromElement';
+import { TreeNavigationData_unstable } from '../../Tree';
+import { HeadlessTree, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';
+import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
+import { treeDataTypes } from '../../utils/tokens';
+import { treeItemFilter } from '../../utils/treeItemFilter';
+import { HTMLElementWalker, useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';
+import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
+import { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../../utils/getTreeItemValueFromElement';
 
-export function useFlatTreeNavigation<Props extends FlatTreeItemProps = FlatTreeItemProps>(
-  flatTreeItems: FlatTreeItems<Props>,
-) {
+export function useFlatTreeNavigation<Props extends HeadlessTreeItemProps>(virtualTree: HeadlessTree<Props>) {
   const { targetDocument } = useFluent_unstable();
   const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);
   const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
@@ -29,7 +26,7 @@ export function useFlatTreeNavigation<Props extends FlatTreeItemProps = FlatTree
         treeItemWalker.currentElement = data.target;
         return nextTypeAheadElement(treeItemWalker, data.event.key);
       case treeDataTypes.ArrowLeft:
-        return parentElement(flatTreeItems, data.target, treeItemWalker);
+        return parentElement(virtualTree, data.target, treeItemWalker);
       case treeDataTypes.ArrowRight:
         treeItemWalker.currentElement = data.target;
         return firstChild(data.target, treeItemWalker);
@@ -71,7 +68,7 @@ function firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLEle
 }
 
 function parentElement(
-  flatTreeItems: FlatTreeItems<FlatTreeItemProps>,
+  virtualTreeItems: HeadlessTree<HeadlessTreeItemProps>,
   target: HTMLElement,
   treeWalker: HTMLElementWalker,
 ) {
@@ -79,9 +76,11 @@ function parentElement(
   if (value === null) {
     return null;
   }
-  const flatTreeItem = flatTreeItems.get(value);
-  if (flatTreeItem?.parentValue) {
-    return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}="${flatTreeItem.parentValue}"]`);
+  const virtualTreeItem = virtualTreeItems.get(value);
+  if (virtualTreeItem?.parentValue) {
+    return treeWalker.root.querySelector<HTMLElement>(
+      `[${dataTreeItemValueAttrName}="${virtualTreeItem.parentValue}"]`,
+    );
   }
   return null;
 }
diff --git a/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts
new file mode 100644
index 0000000000000..c096d5bf3ed81
--- /dev/null
+++ b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts
@@ -0,0 +1,32 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { tokens } from '@fluentui/react-theme';
+import { FlatTreeSlots, FlatTreeState } from './FlatTree.types';
+
+export const flatTreeClassNames: SlotClassNames<FlatTreeSlots> = {
+  root: 'fui-FlatTree',
+};
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: tokens.spacingVerticalXXS,
+  },
+  subtree: {
+    ...shorthands.flex(1, 1, '100%'),
+    ...shorthands.gridArea('subtree'),
+  },
+});
+
+export const useFlatTreeStyles_unstable = (state: FlatTreeState): FlatTreeState => {
+  const styles = useStyles();
+  const isSubTree = state.level > 0;
+  state.root.className = mergeClasses(
+    flatTreeClassNames.root,
+    styles.root,
+    isSubTree && styles.subtree,
+    state.root.className,
+  );
+  return state;
+};
diff --git a/packages/react-components/react-tree/src/hooks/useFlatTree.ts b/packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts
similarity index 67%
rename from packages/react-components/react-tree/src/hooks/useFlatTree.ts
rename to packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts
index af88c85c9bb6f..d646efeae8ae7 100644
--- a/packages/react-components/react-tree/src/hooks/useFlatTree.ts
+++ b/packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts
@@ -1,10 +1,15 @@
 import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { createFlatTreeItems } from '../utils/createFlatTreeItems';
-import { treeDataTypes } from '../utils/tokens';
+import { HeadlessTreeItem, HeadlessTreeItemProps, createHeadlessTree } from '../../utils/createHeadlessTree';
+import { treeDataTypes } from '../../utils/tokens';
 import { useFlatTreeNavigation } from './useFlatTreeNavigation';
-import { createNextOpenItems, useControllableOpenItems } from './useControllableOpenItems';
-import type {
+import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
+import type { TreeItemValue } from '../../TreeItem';
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
+import { ImmutableSet } from '../../utils/ImmutableSet';
+import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';
+import { FlatTreeProps } from './FlatTree.types';
+import {
   TreeCheckedChangeData,
   TreeCheckedChangeEvent,
   TreeNavigationData_unstable,
@@ -12,38 +17,10 @@ import type {
   TreeOpenChangeData,
   TreeOpenChangeEvent,
   TreeProps,
-} from '../Tree';
-import type { TreeItemProps, TreeItemValue } from '../TreeItem';
-import { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';
-import { ImmutableSet } from '../utils/ImmutableSet';
-import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';
-
-export type FlatTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> &
-  Partial<Pick<TreeItemProps, 'itemType'>> & {
-    value: TreeItemValue;
-    parentValue?: TreeItemValue;
-  };
-
-/**
- * The item that is returned by `useFlatTree`, it represents a wrapper around the properties provided to
- * `useFlatTree` but with extra information that might be useful on flat tree scenarios
- */
-export type FlatTreeItem<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
-  index: number;
-  level: number;
-  childrenValues: TreeItemValue[];
-  value: TreeItemValue;
-  parentValue: TreeItemValue | undefined;
-  getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> &
-    Omit<Props, 'parentId'>;
-};
+} from '../Tree/Tree.types';
 
-export type FlatTreeProps = Required<
-  Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable' | 'checkedItems' | 'onCheckedChange'>
-> & {
-  ref: React.Ref<HTMLDivElement>;
-  openItems: ImmutableSet<TreeItemValue>;
-};
+export type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;
+export type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;
 
 /**
  * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -55,13 +32,18 @@ export type FlatTreeProps = Required<
  *
  * On simple scenarios it is advised to simply use a nested structure instead.
  */
-export type FlatTree<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
+export type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {
   /**
    * returns the properties required for the Tree component to work properly.
    * That includes:
    * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
    */
-  getTreeProps(): FlatTreeProps;
+  getTreeProps(): Required<
+    Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable' | 'checkedItems' | 'onCheckedChange'>
+  > & {
+    ref: React.Ref<HTMLDivElement>;
+    openItems: ImmutableSet<TreeItemValue>;
+  };
   /**
    * internal method used to react to an `onNavigation` event.
    * This method ensures proper navigation on keyboard and mouse interaction.
@@ -94,30 +76,24 @@ export type FlatTree<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
    * On the case of TypeAhead navigation this method returns the current item.
    */
   getNextNavigableItem(
-    visibleItems: FlatTreeItem<Props>[],
+    visibleItems: HeadlessTreeItem<Props>[],
     data: TreeNavigationData_unstable,
-  ): FlatTreeItem<Props> | undefined;
+  ): HeadlessTreeItem<Props> | undefined;
   /**
    * similar to getElementById but for FlatTreeItems
    */
-  getElementFromItem(item: FlatTreeItem<Props>): HTMLElement | null;
+  getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;
   /**
    * an iterable containing all visually available flat tree items
    */
-  items(): IterableIterator<FlatTreeItem<Props>>;
+  items(): IterableIterator<HeadlessTreeItem<Props>>;
 };
 
-export type FlatTreeOptions = Pick<
-  TreeProps,
-  | 'openItems'
-  | 'defaultOpenItems'
-  | 'onOpenChange'
-  | 'onNavigation_unstable'
-  | 'selectionMode'
-  | 'checkedItems'
-  | 'defaultCheckedItems'
-  | 'onCheckedChange'
->;
+export type HeadlessFlatTreeOptions = Pick<
+  FlatTreeProps,
+  'onOpenChange' | 'onNavigation_unstable' | 'selectionMode' | 'onCheckedChange'
+> &
+  Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems' | 'defaultChecked'>;
 
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -131,21 +107,18 @@ export type FlatTreeOptions = Pick<
  * @param flatTreeItemProps - a list of tree items
  * @param options - in case control over the internal openItems is required
  */
-export function useFlatTree_unstable<Props extends FlatTreeItemProps = FlatTreeItemProps>(
+export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(
   flatTreeItemProps: Props[],
-  options: FlatTreeOptions = {},
-): FlatTree<Props> {
-  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);
+  options: HeadlessFlatTreeOptions = {},
+): HeadlessFlatTree<Props> {
+  const flatTreeItems = React.useMemo(() => createHeadlessTree(flatTreeItemProps), [flatTreeItemProps]);
   const [openItems, setOpenItems] = useControllableOpenItems(options);
   const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options);
   const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
   const treeRef = React.useRef<HTMLDivElement>(null);
   const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
     options.onOpenChange?.(event, data);
-    if (!event.isDefaultPrevented()) {
-      setOpenItems(createNextOpenItems(data, openItems));
-    }
-    event.preventDefault();
+    setOpenItems(createNextOpenItems(data, openItems));
   });
 
   const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {
@@ -156,15 +129,12 @@ export function useFlatTree_unstable<Props extends FlatTreeItemProps = FlatTreeI
   const handleNavigation = useEventCallback(
     (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {
       options.onNavigation_unstable?.(event, data);
-      if (!event.isDefaultPrevented()) {
-        navigate(data);
-      }
-      event.preventDefault();
+      navigate(data);
     },
   );
 
   const getNextNavigableItem = useEventCallback(
-    (visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable) => {
+    (visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable) => {
       const item = flatTreeItems.get(data.value);
       if (item) {
         switch (data.type) {
@@ -187,11 +157,11 @@ export function useFlatTree_unstable<Props extends FlatTreeItemProps = FlatTreeI
     },
   );
 
-  const getElementFromItem = React.useCallback((item: FlatTreeItem<Props>) => {
+  const getElementFromItem = React.useCallback((item: HeadlessTreeItem<Props>) => {
     return treeRef.current?.querySelector(`[${dataTreeItemValueAttrName}="${item.value}"]`) as HTMLElement | null;
   }, []);
 
-  const ref = useMergedRefs(treeRef, navigationRef as React.Ref<HTMLDivElement>);
+  const ref = useMergedRefs<HTMLDivElement>(treeRef, navigationRef as React.Ref<HTMLDivElement>);
 
   const getTreeProps = React.useCallback(
     () => ({
@@ -210,7 +180,7 @@ export function useFlatTree_unstable<Props extends FlatTreeItemProps = FlatTreeI
 
   const items = React.useCallback(() => flatTreeItems.visibleItems(openItems), [openItems, flatTreeItems]);
 
-  return React.useMemo(
+  return React.useMemo<HeadlessFlatTree<Props>>(
     () => ({ navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items }),
     [navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items],
   );
diff --git a/packages/react-components/react-tree/src/components/Tree/Tree.cy.tsx b/packages/react-components/react-tree/src/components/Tree/Tree.cy.tsx
index 4a5ec52ddc7fb..97f66a59f4421 100644
--- a/packages/react-components/react-tree/src/components/Tree/Tree.cy.tsx
+++ b/packages/react-components/react-tree/src/components/Tree/Tree.cy.tsx
@@ -3,255 +3,237 @@ import { mount as mountBase } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';
 import { teamsLightTheme } from '@fluentui/react-theme';
 import {
+  TreeProps,
   Tree,
   TreeItem,
   TreeItemLayout,
-  TreeProps,
   treeItemLayoutClassNames,
-  useFlatTree_unstable,
+  TreeItemValue,
 } from '@fluentui/react-tree';
 import { Button } from '@fluentui/react-button';
-import { flattenTreeFromElement } from '../../testing/flattenTreeFromElement';
 
 const mount = (element: JSX.Element) => {
   mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);
 };
 
-const treeItems = (
-  <>
-    <TreeItem itemType="branch" value="item1" data-testid="item1">
-      <TreeItemLayout>level 1, item 1</TreeItemLayout>
-      <Tree>
-        <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
-          <TreeItemLayout>level 2, item 1</TreeItemLayout>
-        </TreeItem>
-        <TreeItem itemType="leaf" value="item1__item2" data-testid="item1__item2">
-          <TreeItemLayout>level 2, item 2</TreeItemLayout>
-        </TreeItem>
-        <TreeItem itemType="leaf" value="item1__item3" data-testid="item1__item3">
-          <TreeItemLayout>level 2, item 3</TreeItemLayout>
-        </TreeItem>
-      </Tree>
-    </TreeItem>
-    <TreeItem itemType="branch" value="item2" data-testid="item2">
-      <TreeItemLayout>level 1, item 2</TreeItemLayout>
-      <Tree>
-        <TreeItem itemType="branch" value="item2__item1" data-testid="item2__item1">
-          <TreeItemLayout>level 2, item 1</TreeItemLayout>
-          <Tree>
-            <TreeItem itemType="leaf" value="item2__item1__item1" data-testid="item2__item1__item1">
-              <TreeItemLayout>level 3, item 1</TreeItemLayout>
-            </TreeItem>
-          </Tree>
-        </TreeItem>
-      </Tree>
-    </TreeItem>
-  </>
-);
-
-const NestedTree: React.FC<TreeProps> = props => {
+const TreeTest: React.FC<TreeProps> = props => {
   return (
-    <Tree id="tree" aria-label="Tree" {...props}>
-      {props.children ?? treeItems}
+    <Tree id="baseTree" aria-label="Tree" {...props}>
+      {props.children ?? (
+        <>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
+                <TreeItemLayout>level 2, item 1</TreeItemLayout>
+              </TreeItem>
+              <TreeItem itemType="leaf" value="item1__item2" data-testid="item1__item2">
+                <TreeItemLayout>level 2, item 2</TreeItemLayout>
+              </TreeItem>
+              <TreeItem itemType="leaf" value="item1__item3" data-testid="item1__item3">
+                <TreeItemLayout>level 2, item 3</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+          <TreeItem itemType="branch" value="item2" data-testid="item2">
+            <TreeItemLayout>level 1, item 2</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="branch" value="item2__item1" data-testid="item2__item1">
+                <TreeItemLayout>level 2, item 1</TreeItemLayout>
+                <Tree>
+                  <TreeItem itemType="leaf" value="item2__item1__item1" data-testid="item2__item1__item1">
+                    <TreeItemLayout>level 3, item 1</TreeItemLayout>
+                  </TreeItem>
+                </Tree>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </>
+      )}
     </Tree>
   );
 };
-NestedTree.displayName = 'NestedTree';
+TreeTest.displayName = 'Tree';
 
-const FlatTree: React.FC<TreeProps> = (props: TreeProps) => {
-  const flatTree = useFlatTree_unstable(
-    flattenTreeFromElement(props.children ? <>{props.children}</> : treeItems),
-    props,
-  );
-  return (
-    <Tree {...props} {...flatTree.getTreeProps()} id="tree" aria-label="Tree">
-      {Array.from(flatTree.items(), item => (
-        <TreeItem key={item.value} {...item.getTreeItemProps()} />
-      ))}
-    </Tree>
-  );
-};
-FlatTree.displayName = 'FlatTree';
+describe(TreeTest.displayName!, () => {
+  it('should have all but first level items hidden', () => {
+    mount(<TreeTest />);
+    cy.get('[data-testid="item1__item1"]').should('not.exist');
+    cy.get('[data-testid="item1__item2"]').should('not.exist');
+    cy.get('[data-testid="item1__item3"]').should('not.exist');
+    cy.get('[data-testid="item2__item1"]').should('not.exist');
+    cy.get('[data-testid="item2__item1__item1"]').should('not.exist');
+  });
+
+  it('should have all items visible', () => {
+    mount(<TreeTest defaultOpenItems={['item1', 'item2', 'item2__item1']} />);
+    cy.get('[data-testid="item1__item1"]').should('exist');
+    cy.get('[data-testid="item1__item2"]').should('exist');
+    cy.get('[data-testid="item1__item3"]').should('exist');
+    cy.get('[data-testid="item2__item1"]').should('exist');
+    cy.get('[data-testid="item2__item1__item1"]').should('exist');
+  });
 
-for (const TreeTest of [NestedTree, FlatTree]) {
-  describe(TreeTest.displayName!, () => {
-    it('should have all but first level items hidden', () => {
+  describe('Mouse interactions', () => {
+    it('should expand/collapse item on layout click', () => {
       mount(<TreeTest />);
       cy.get('[data-testid="item1__item1"]').should('not.exist');
-      cy.get('[data-testid="item1__item2"]').should('not.exist');
-      cy.get('[data-testid="item1__item3"]').should('not.exist');
-      cy.get('[data-testid="item2__item1"]').should('not.exist');
-      cy.get('[data-testid="item2__item1__item1"]').should('not.exist');
-    });
-
-    it('should have all items visible', () => {
-      mount(<TreeTest defaultOpenItems={['item1', 'item2', 'item2__item1']} />);
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realClick();
       cy.get('[data-testid="item1__item1"]').should('exist');
-      cy.get('[data-testid="item1__item2"]').should('exist');
-      cy.get('[data-testid="item1__item3"]').should('exist');
-      cy.get('[data-testid="item2__item1"]').should('exist');
-      cy.get('[data-testid="item2__item1__item1"]').should('exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
     });
-
-    describe('Mouse interactions', () => {
-      it('should expand/collapse item on layout click', () => {
-        mount(<TreeTest />);
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
-        cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realClick();
-        cy.get('[data-testid="item1__item1"]').should('exist');
-        cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realClick();
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
-      });
-      it('should expand/collapse item on expandIcon click only', () => {
-        mount(
+    it('should expand/collapse item on expandIcon click only', () => {
+      const ExpandIconTest = () => {
+        const [openItems, setOpenItems] = React.useState<Set<TreeItemValue>>(() => new Set());
+        return (
           <TreeTest
-            onOpenChange={(event, data) => {
-              if (data.type === 'Click') {
-                event.preventDefault();
+            openItems={openItems}
+            onOpenChange={(_, data) => {
+              if (data.type === 'ExpandIconClick') {
+                const newSet = new Set(openItems);
+                data.open ? newSet.add(data.value) : newSet.delete(data.value);
+                setOpenItems(newSet);
               }
             }}
-          />,
+          />
         );
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
-        cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.expandIcon}`).realClick();
-        cy.get('[data-testid="item1__item1"]').should('exist');
-        cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.expandIcon}`).realClick();
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
+      };
+      mount(<ExpandIconTest />);
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.expandIcon}`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.expandIcon}`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
 
-        cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realClick();
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
-      });
-      it('should not expand/collapse item on actions click', () => {
-        mount(
-          <TreeTest id="tree" aria-label="Tree">
-            <TreeItem
-              actions={<Button id="action">action!</Button>}
-              itemType="branch"
-              value="item1"
-              data-testid="item1"
-            >
-              <TreeItemLayout>level 1, item 1</TreeItemLayout>
-              <Tree>
-                <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
-                  <TreeItemLayout>level 2, item 1</TreeItemLayout>
-                </TreeItem>
-              </Tree>
-            </TreeItem>
-          </TreeTest>,
-        );
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
-        cy.get('[data-testid="item1"]').focus();
-        cy.get(`#action`).realClick();
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
-      });
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
     });
-    describe('Keyboard interactions', () => {
-      it('should expand/collapse item on Enter key', () => {
-        mount(<TreeTest />);
-        cy.get('[data-testid="item1"]').focus();
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
-        cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{enter}');
-        cy.get('[data-testid="item1__item1"]').should('exist');
-      });
-      it('should expand item on Right key', () => {
-        mount(<TreeTest />);
-        cy.get('[data-testid="item1"]').focus();
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
-        cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{rightarrow}');
-        cy.get('[data-testid="item1__item1"]').should('exist');
-      });
-      it('should collapse item on Left key', () => {
+    it('should not expand/collapse item on actions click', () => {
+      mount(
+        <TreeTest id="baseTree" aria-label="Tree">
+          <TreeItem actions={<Button id="action">action!</Button>} itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
+                <TreeItemLayout>level 2, item 1</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </TreeTest>,
+      );
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get('[data-testid="item1"]').focus();
+      cy.get(`#action`).realClick();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+    });
+  });
+  describe('Keyboard interactions', () => {
+    it('should expand/collapse item on Enter key', () => {
+      mount(<TreeTest />);
+      cy.get('[data-testid="item1"]').focus();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{enter}');
+      cy.get('[data-testid="item1__item1"]').should('exist');
+    });
+    it('should expand item on Right key', () => {
+      mount(<TreeTest />);
+      cy.get('[data-testid="item1"]').focus();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{rightarrow}');
+      cy.get('[data-testid="item1__item1"]').should('exist');
+    });
+    it('should collapse item on Left key', () => {
+      mount(<TreeTest />);
+      cy.get('[data-testid="item1"]').focus();
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{rightarrow}');
+      cy.get('[data-testid="item1__item1"]').should('exist');
+      cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{leftarrow}');
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+    });
+    it('should focus on actions when pressing tab key', () => {
+      mount(
+        <TreeTest id="baseTree" aria-label="Tree">
+          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
+                <TreeItemLayout>level 2, item 1</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </TreeTest>,
+      );
+      cy.focused().should('not.exist');
+      cy.document().realPress('Tab');
+      cy.get('[data-testid="item1"]').should('be.focused');
+      cy.document().realPress('Tab');
+      cy.get('#action').should('be.focused');
+    });
+    it('should not expand/collapse item on actions Enter/Space key', () => {
+      mount(
+        <TreeTest id="baseTree" aria-label="Tree">
+          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
+                <TreeItemLayout>level 2, item 1</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </TreeTest>,
+      );
+      cy.focused().should('not.exist');
+      cy.document().realPress('Tab');
+      cy.get('[data-testid="item1"]').should('be.focused');
+      cy.document().realPress('Tab');
+      cy.get('#action').should('be.focused').realPress('{enter}');
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+      cy.get('#action').should('be.focused').realPress('Space');
+      cy.get('[data-testid="item1__item1"]').should('not.exist');
+    });
+    it('should focus on first item when pressing tab key', () => {
+      mount(<TreeTest />);
+      cy.focused().should('not.exist');
+      cy.document().realPress('Tab');
+      cy.get('[data-testid="item1"]').should('be.focused');
+    });
+    it('should focus out of baseTree when pressing tab key inside baseTree.', () => {
+      mount(<TreeTest />);
+      cy.focused().should('not.exist');
+      cy.document().realPress('Tab');
+      cy.get('[data-testid="item1"]').should('be.focused');
+      cy.focused().realPress('Tab');
+      cy.focused().should('not.exist');
+    });
+    describe('Navigation', () => {
+      it('should move with Up/Down keys', () => {
         mount(<TreeTest />);
-        cy.get('[data-testid="item1"]').focus();
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
-        cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{rightarrow}');
-        cy.get('[data-testid="item1__item1"]').should('exist');
-        cy.get(`[data-testid="item1"] .${treeItemLayoutClassNames.root}`).realPress('{leftarrow}');
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
+        cy.get('[data-testid="item1"]').focus().realPress('{downarrow}');
+        cy.get('[data-testid="item2"]').should('be.focused');
+        cy.focused().realPress('Tab').should('not.exist');
       });
-      it('should focus on actions when pressing tab key', () => {
-        mount(
-          <TreeTest id="tree" aria-label="Tree">
-            <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
-              <TreeItemLayout>level 1, item 1</TreeItemLayout>
-              <Tree>
-                <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
-                  <TreeItemLayout>level 2, item 1</TreeItemLayout>
-                </TreeItem>
-              </Tree>
-            </TreeItem>
-          </TreeTest>,
-        );
-        cy.focused().should('not.exist');
-        cy.document().realPress('Tab');
-        cy.get('[data-testid="item1"]').should('be.focused');
-        cy.document().realPress('Tab');
-        cy.get('#action').should('be.focused');
+      it('should move with Left/Right keys', () => {
+        mount(<TreeTest defaultOpenItems={['item2', 'item2__item1']} />);
+        cy.get('[data-testid="item1"]').focus().realPress('{downarrow}');
+        cy.get('[data-testid="item2"]').should('be.focused').realPress('{rightarrow}');
+        cy.get('[data-testid="item2__item1"]').should('be.focused').realPress('{rightarrow}');
+        cy.get('[data-testid="item2__item1__item1"]').should('be.focused').realPress('{leftarrow}');
+        cy.get('[data-testid="item2__item1"]').should('be.focused').realPress('{leftarrow}').realPress('{leftarrow}');
+        cy.get('[data-testid="item2"]').should('be.focused');
       });
-      it('should not expand/collapse item on actions Enter/Space key', () => {
-        mount(
-          <TreeTest id="tree" aria-label="Tree">
-            <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
-              <TreeItemLayout>level 1, item 1</TreeItemLayout>
-              <Tree>
-                <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
-                  <TreeItemLayout>level 2, item 1</TreeItemLayout>
-                </TreeItem>
-              </Tree>
-            </TreeItem>
-          </TreeTest>,
-        );
-        cy.focused().should('not.exist');
-        cy.document().realPress('Tab');
-        cy.get('[data-testid="item1"]').should('be.focused');
-        cy.document().realPress('Tab');
-        cy.get('#action').should('be.focused').realPress('{enter}');
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
-        cy.get('#action').should('be.focused').realPress('Space');
-        cy.get('[data-testid="item1__item1"]').should('not.exist');
+      it('should move to last item with End key', () => {
+        mount(<TreeTest defaultOpenItems={['item1', 'item2', 'item2__item1']} />);
+        cy.get('[data-testid="item1"]').focus().realPress('{end}');
+        cy.get('[data-testid="item2__item1__item1"]').should('be.focused');
       });
-      it('should focus on first item when pressing tab key', () => {
-        mount(<TreeTest />);
-        cy.focused().should('not.exist');
-        cy.document().realPress('Tab');
+      it('should move to first item with Home key', () => {
+        mount(<TreeTest defaultOpenItems={['item1', 'item2', 'item2__item1']} />);
+        cy.get('[data-testid="item1"]').focus().realPress('{end}');
+        cy.get('[data-testid="item2__item1__item1"]').should('be.focused').realPress('{home}');
         cy.get('[data-testid="item1"]').should('be.focused');
       });
-      it('should focus out of tree when pressing tab key inside tree.', () => {
-        mount(<TreeTest />);
-        cy.focused().should('not.exist');
-        cy.document().realPress('Tab');
-        cy.get('[data-testid="item1"]').should('be.focused');
-        cy.focused().realPress('Tab');
-        cy.focused().should('not.exist');
-      });
-      describe('Navigation', () => {
-        it('should move with Up/Down keys', () => {
-          mount(<TreeTest />);
-          cy.get('[data-testid="item1"]').focus().realPress('{downarrow}');
-          cy.get('[data-testid="item2"]').should('be.focused');
-          cy.focused().realPress('Tab').should('not.exist');
-        });
-        it('should move with Left/Right keys', () => {
-          mount(<TreeTest defaultOpenItems={['item2', 'item2__item1']} />);
-          cy.get('[data-testid="item1"]').focus().realPress('{downarrow}');
-          cy.get('[data-testid="item2"]').should('be.focused').realPress('{rightarrow}');
-          cy.get('[data-testid="item2__item1"]').should('be.focused').realPress('{rightarrow}');
-          cy.get('[data-testid="item2__item1__item1"]').should('be.focused').realPress('{leftarrow}');
-          cy.get('[data-testid="item2__item1"]').should('be.focused').realPress('{leftarrow}').realPress('{leftarrow}');
-          cy.get('[data-testid="item2"]').should('be.focused');
-        });
-        it('should move to last item with End key', () => {
-          mount(<TreeTest defaultOpenItems={['item1', 'item2', 'item2__item1']} />);
-          cy.get('[data-testid="item1"]').focus().realPress('{end}');
-          cy.get('[data-testid="item2__item1__item1"]').should('be.focused');
-        });
-        it('should move to first item with Home key', () => {
-          mount(<TreeTest defaultOpenItems={['item1', 'item2', 'item2__item1']} />);
-          cy.get('[data-testid="item1"]').focus().realPress('{end}');
-          cy.get('[data-testid="item2__item1__item1"]').should('be.focused').realPress('{home}');
-          cy.get('[data-testid="item1"]').should('be.focused');
-        });
-      });
     });
   });
-}
+});
diff --git a/packages/react-components/react-tree/src/components/Tree/Tree.test.tsx b/packages/react-components/react-tree/src/components/Tree/Tree.test.tsx
index 5faefcfeb2398..b8ea7b8aa01d4 100644
--- a/packages/react-components/react-tree/src/components/Tree/Tree.test.tsx
+++ b/packages/react-components/react-tree/src/components/Tree/Tree.test.tsx
@@ -1,18 +1,19 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { Tree } from './Tree';
 import { isConformant } from '../../testing/isConformant';
-import { TreeProps } from './index';
+import { Tree } from './Tree';
 
 describe('Tree', () => {
-  isConformant<TreeProps>({
+  isConformant({
     Component: Tree,
     displayName: 'Tree',
     disabledTests: ['consistent-callback-args'],
   });
 
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
   it('renders a default state', () => {
-    const result = render(<Tree />);
+    const result = render(<Tree>Default Tree</Tree>);
     expect(result.container).toMatchSnapshot();
   });
 });
diff --git a/packages/react-components/react-tree/src/components/Tree/Tree.tsx b/packages/react-components/react-tree/src/components/Tree/Tree.tsx
index b70762ce1ba5b..bee06317a1d1e 100644
--- a/packages/react-components/react-tree/src/components/Tree/Tree.tsx
+++ b/packages/react-components/react-tree/src/components/Tree/Tree.tsx
@@ -1,23 +1,18 @@
 import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useTree_unstable } from './useTree';
-import { renderTree_unstable } from './renderTree';
-import { useTreeStyles_unstable } from './useTreeStyles.styles';
 import type { TreeProps } from './Tree.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useTreeContextValues_unstable } from './useTreeContextValues';
+import { useTreeStyles_unstable } from './useTreeStyles.styles';
+import { renderTree_unstable } from './renderTree';
 
 /**
- * A tree view widget presents a hierarchical list.
- * Any item in the hierarchy may have child items,
- * and items that have children may be expanded or collapsed to show or hide the children.
- * For example, in a file system navigator that uses a tree view to display folders and files,
- * an item representing a folder can be expanded to reveal the contents of the folder,
- * which may be files, folders, or both.
+ * Tree component - TODO: add more docs
  */
 export const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {
   const state = useTree_unstable(props, ref);
-  useTreeStyles_unstable(state);
   const contextValues = useTreeContextValues_unstable(state);
+  useTreeStyles_unstable(state);
   return renderTree_unstable(state, contextValues);
 });
 
diff --git a/packages/react-components/react-tree/src/components/Tree/Tree.types.ts b/packages/react-components/react-tree/src/components/Tree/Tree.types.ts
index 47c8517e7e8f1..19ca60bab2cd8 100644
--- a/packages/react-components/react-tree/src/components/Tree/Tree.types.ts
+++ b/packages/react-components/react-tree/src/components/Tree/Tree.types.ts
@@ -6,8 +6,8 @@ import type { TreeItemValue } from '../TreeItem/TreeItem.types';
 import { CheckboxProps } from '@fluentui/react-checkbox';
 import { RadioProps } from '@fluentui/react-radio';
 
-export type MultiSelectValue = NonNullable<CheckboxProps['checked']>;
-export type SingleSelectValue = NonNullable<RadioProps['checked']>;
+type MultiSelectValue = NonNullable<CheckboxProps['checked']>;
+type SingleSelectValue = NonNullable<RadioProps['checked']>;
 export type TreeSelectionValue = MultiSelectValue | SingleSelectValue;
 
 export type TreeSlots = {
@@ -86,9 +86,8 @@ export type TreeProps = ComponentProps<TreeSlots> & {
    */
   openItems?: Iterable<TreeItemValue>;
   /**
-   * This refers to a list of ids of opened tree items.
-   * Default value for the uncontrolled state of open tree items.
-   * These property is ignored for subtrees.
+   * This refers to a list of ids of default opened items.
+   * This property is ignored for subtrees.
    */
   defaultOpenItems?: Iterable<TreeItemValue>;
   /**
@@ -129,8 +128,7 @@ export type TreeProps = ComponentProps<TreeSlots> & {
    */
   checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
   /**
-   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.
-   * Default value for the uncontrolled state of checked tree items.
+   * This refers to a list of ids of default checked items, or a list of tuples of ids and checked state.
    * These property is ignored for subtrees.
    */
   defaultCheckedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
diff --git a/packages/react-components/react-tree/src/components/Tree/__snapshots__/Tree.test.tsx.snap b/packages/react-components/react-tree/src/components/Tree/__snapshots__/Tree.test.tsx.snap
index 78bf383fb10a6..0a325e6d2f376 100644
--- a/packages/react-components/react-tree/src/components/Tree/__snapshots__/Tree.test.tsx.snap
+++ b/packages/react-components/react-tree/src/components/Tree/__snapshots__/Tree.test.tsx.snap
@@ -4,7 +4,9 @@ exports[`Tree renders a default state 1`] = `
 <div>
   <div
     class="fui-Tree"
-    role="tree"
-  />
+    role="baseTree"
+  >
+    Default Tree
+  </div>
 </div>
 `;
diff --git a/packages/react-components/react-tree/src/components/Tree/index.ts b/packages/react-components/react-tree/src/components/Tree/index.ts
index d20cc73b01b66..c73d538388c0b 100644
--- a/packages/react-components/react-tree/src/components/Tree/index.ts
+++ b/packages/react-components/react-tree/src/components/Tree/index.ts
@@ -1,6 +1,6 @@
 export * from './Tree';
 export * from './Tree.types';
-export * from './renderTree';
 export * from './useTree';
-export * from './useTreeStyles.styles';
 export * from './useTreeContextValues';
+export * from './useTreeStyles.styles';
+export * from './renderTree';
diff --git a/packages/react-components/react-tree/src/components/Tree/renderTree.tsx b/packages/react-components/react-tree/src/components/Tree/renderTree.tsx
index 855cf24b1e708..3b37c301f9a08 100644
--- a/packages/react-components/react-tree/src/components/Tree/renderTree.tsx
+++ b/packages/react-components/react-tree/src/components/Tree/renderTree.tsx
@@ -3,8 +3,8 @@
 
 import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
-import type { TreeState, TreeSlots, TreeContextValues } from './Tree.types';
 import { TreeProvider } from '../../contexts';
+import type { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';
 
 export const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {
   const { slots, slotProps } = getSlotsNext<TreeSlots>(state);
diff --git a/packages/react-components/react-tree/src/hooks/useNestedControllableCheckedItems.ts b/packages/react-components/react-tree/src/components/Tree/useControllableCheckedItems.ts
similarity index 83%
rename from packages/react-components/react-tree/src/hooks/useNestedControllableCheckedItems.ts
rename to packages/react-components/react-tree/src/components/Tree/useControllableCheckedItems.ts
index 4d768a13c81c0..81f539570c33d 100644
--- a/packages/react-components/react-tree/src/hooks/useNestedControllableCheckedItems.ts
+++ b/packages/react-components/react-tree/src/components/Tree/useControllableCheckedItems.ts
@@ -1,31 +1,19 @@
 import { useControllableState } from '@fluentui/react-utilities';
 import * as React from 'react';
-import type { TreeProps } from '../Tree';
-import { TreeItemValue } from '../TreeItem';
-import { ImmutableMap } from '../utils/ImmutableMap';
+import type { TreeProps } from './Tree.types';
+import { ImmutableMap } from '../../utils/ImmutableMap';
+import { createCheckedItems } from '../../utils/createCheckedItems';
 
-function initializeMap(iterable?: Iterable<TreeItemValue | [TreeItemValue, 'mixed' | boolean]>) {
-  const map = new Map<TreeItemValue, 'mixed' | boolean>();
-  if (iterable === undefined) {
-    return ImmutableMap.empty;
-  }
-  for (const item of iterable) {
-    if (Array.isArray(item)) {
-      map.set(item[0], item[1]);
-    } else {
-      map.set(item, true);
-    }
-  }
-  return ImmutableMap.dangerouslyCreate_unstable(map);
-}
+export type ControllableCheckedItemsOptions = {
+  checkedItems?: TreeProps['checkedItems'];
+  defaultCheckedItems?: TreeProps['checkedItems'];
+};
 
-export function useNestedControllableCheckedItems(
-  props: Pick<TreeProps, 'checkedItems' | 'defaultCheckedItems' | 'selectionMode'>,
-) {
+export function useControllableCheckedItems(props: ControllableCheckedItemsOptions) {
   return useControllableState({
     initialState: ImmutableMap.empty,
-    state: React.useMemo(() => props.checkedItems && initializeMap(props.checkedItems), [props.checkedItems]),
-    defaultState: () => initializeMap(props.defaultCheckedItems),
+    state: React.useMemo(() => props.checkedItems && createCheckedItems(props.checkedItems), [props.checkedItems]),
+    defaultState: () => createCheckedItems(props.defaultCheckedItems),
   });
 }
 
diff --git a/packages/react-components/react-tree/src/components/Tree/useTree.ts b/packages/react-components/react-tree/src/components/Tree/useTree.ts
index a886ab732afc1..be62cac02e678 100644
--- a/packages/react-components/react-tree/src/components/Tree/useTree.ts
+++ b/packages/react-components/react-tree/src/components/Tree/useTree.ts
@@ -1,22 +1,57 @@
 import * as React from 'react';
-import { TreeProps, TreeState } from './Tree.types';
-import { useTreeContext_unstable } from '../../contexts';
-import { useSubtree } from './useSubtree';
-import { useRootTree } from './useRootTree';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import type {
+  TreeCheckedChangeData,
+  TreeCheckedChangeEvent,
+  TreeNavigationData_unstable,
+  TreeNavigationEvent_unstable,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+  TreeProps,
+  TreeState,
+} from './Tree.types';
+import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
+import { useTreeNavigation } from './useTreeNavigation';
+import { useControllableCheckedItems } from './useControllableCheckedItems';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { useRootTree } from '../../hooks/useRootTree';
+import { useSubtree } from '../../hooks/useSubtree';
 
-/**
- * Create the state required to render Tree.
- *
- * The returned state can be modified with hooks such as useTreeStyles_unstable,
- * before being passed to renderTree_unstable.
- *
- * @param props - props from this instance of Tree
- * @param ref - reference to root HTMLElement of Tree
- */
 export const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {
+  const [openItems, setOpenItems] = useControllableOpenItems(props);
+  const [checkedItems] = useControllableCheckedItems(props);
+  const [navigate, navigationRef] = useTreeNavigation();
+
+  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
+    props.onOpenChange?.(event, data);
+    setOpenItems(createNextOpenItems(data, openItems));
+  });
+  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {
+    props.onCheckedChange?.(event, data);
+    // TODO: implement next checked items for  tree
+  });
+  const handleNavigation = useEventCallback(
+    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {
+      props.onNavigation_unstable?.(event, data);
+      navigate(data);
+    },
+  );
+
+  const baseProps = {
+    ...props,
+    openItems,
+    checkedItems,
+    onOpenChange: handleOpenChange,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    onNavigation_unstable: handleNavigation,
+    onCheckedChange: handleCheckedChange,
+  };
+
+  const baseRef = useMergedRefs(ref, navigationRef);
+
   const isSubtree = useTreeContext_unstable(ctx => ctx.level > 0);
-  // as isSubtree is static, this doesn't break rule of hooks
+  // as isSubTree is static, this doesn't break rule of hooks
   // and if this becomes an issue later on, this can be easily converted
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  return isSubtree ? useSubtree(props, ref) : useRootTree(props, ref);
+  return isSubtree ? useSubtree(baseProps, baseRef) : useRootTree(baseProps, baseRef);
 };
diff --git a/packages/react-components/react-tree/src/components/Tree/useTreeContextValues.ts b/packages/react-components/react-tree/src/components/Tree/useTreeContextValues.ts
index 8f0c09ca6e090..7479f8c290ec9 100644
--- a/packages/react-components/react-tree/src/components/Tree/useTreeContextValues.ts
+++ b/packages/react-components/react-tree/src/components/Tree/useTreeContextValues.ts
@@ -1,5 +1,5 @@
 import { TreeContextValue } from '../../contexts';
-import type { TreeContextValues, TreeState } from './Tree.types';
+import { TreeContextValues, TreeState } from './Tree.types';
 
 export function useTreeContextValues_unstable(state: TreeState): TreeContextValues {
   const { openItems, checkedItems, selectionMode, level, appearance, size, requestTreeResponse } = state;
diff --git a/packages/react-components/react-tree/src/hooks/useNestedTreeNavigation.ts b/packages/react-components/react-tree/src/components/Tree/useTreeNavigation.ts
similarity index 81%
rename from packages/react-components/react-tree/src/hooks/useNestedTreeNavigation.ts
rename to packages/react-components/react-tree/src/components/Tree/useTreeNavigation.ts
index 4d25d88a33a8a..317755ea6cac4 100644
--- a/packages/react-components/react-tree/src/hooks/useNestedTreeNavigation.ts
+++ b/packages/react-components/react-tree/src/components/Tree/useTreeNavigation.ts
@@ -1,12 +1,12 @@
 import { useMergedRefs } from '@fluentui/react-utilities';
-import { TreeNavigationData_unstable } from '../Tree';
-import { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';
-import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
-import { treeDataTypes } from '../utils/tokens';
-import { treeItemFilter } from '../utils/treeItemFilter';
-import { useRovingTabIndex } from './useRovingTabIndexes';
+import { TreeNavigationData_unstable } from './Tree.types';
+import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
+import { treeDataTypes } from '../../utils/tokens';
+import { treeItemFilter } from '../../utils/treeItemFilter';
+import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
+import { HTMLElementWalker, useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';
 
-export function useNestedTreeNavigation() {
+export function useTreeNavigation() {
   const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
   const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);
 
diff --git a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts
index 18bd522677ce0..e438354319179 100644
--- a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts
+++ b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts
@@ -21,11 +21,11 @@ const useStyles = makeStyles({
 
 export const useTreeStyles_unstable = (state: TreeState): TreeState => {
   const styles = useStyles();
-  const isSubtree = state.level > 0;
+  const isSubTree = state.level > 0;
   state.root.className = mergeClasses(
     treeClassNames.root,
     styles.root,
-    isSubtree && styles.subtree,
+    isSubTree && styles.subtree,
     state.root.className,
   );
   return state;
diff --git a/packages/react-components/react-tree/src/contexts/treeContext.ts b/packages/react-components/react-tree/src/contexts/treeContext.ts
index e5b5d8b62a079..d8a3bca4b35fd 100644
--- a/packages/react-components/react-tree/src/contexts/treeContext.ts
+++ b/packages/react-components/react-tree/src/contexts/treeContext.ts
@@ -1,9 +1,9 @@
 import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';
-import { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';
 import { TreeItemType, TreeItemValue } from '../TreeItem';
 import { SelectionMode } from '@fluentui/react-utilities';
 import { ImmutableSet } from '../utils/ImmutableSet';
 import { ImmutableMap } from '../utils/ImmutableMap';
+import { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';
 
 export type TreeContextValue = {
   level: number;
diff --git a/packages/react-components/react-tree/src/contexts/treeItemContext.ts b/packages/react-components/react-tree/src/contexts/treeItemContext.ts
index f7a1219a4fd58..354d1057645dc 100644
--- a/packages/react-components/react-tree/src/contexts/treeItemContext.ts
+++ b/packages/react-components/react-tree/src/contexts/treeItemContext.ts
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';
-import { TreeItemType } from '../TreeItem';
+import type { TreeItemType, TreeItemValue } from '../TreeItem';
 
 export type TreeItemContextValue = {
   layoutRef: React.Ref<HTMLDivElement>;
   subtreeRef: React.Ref<HTMLDivElement>;
   itemType: TreeItemType;
-  value: string;
+  value: TreeItemValue;
   open: boolean;
 };
 
diff --git a/packages/react-components/react-tree/src/hooks/index.ts b/packages/react-components/react-tree/src/hooks/index.ts
deleted file mode 100644
index 68cb5841cf40a..0000000000000
--- a/packages/react-components/react-tree/src/hooks/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './useFlatTree';
-export * from './useNestedTreeNavigation';
-export * from './useControllableOpenItems';
-export * from './useNestedControllableCheckedItems';
-export * from './useFlatControllableCheckedItems';
diff --git a/packages/react-components/react-tree/src/hooks/useControllableOpenItems.ts b/packages/react-components/react-tree/src/hooks/useControllableOpenItems.ts
index 1c8fc65b8df9c..83cc3783be2f8 100644
--- a/packages/react-components/react-tree/src/hooks/useControllableOpenItems.ts
+++ b/packages/react-components/react-tree/src/hooks/useControllableOpenItems.ts
@@ -1,20 +1,24 @@
 import { useControllableState } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { ImmutableSet } from '../utils/ImmutableSet';
-import type { TreeOpenChangeData, TreeProps } from '../components/Tree/Tree.types';
 import type { TreeItemValue } from '../components/TreeItem/TreeItem.types';
+import { createOpenItems } from '../utils/createOpenItems';
+import { TreeOpenChangeData, TreeProps } from '../Tree';
 
 /**
  * @internal
  */
 export function useControllableOpenItems(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {
   return useControllableState({
-    state: React.useMemo(() => props.openItems && ImmutableSet.create(props.openItems), [props.openItems]),
-    defaultState: props.defaultOpenItems && (() => ImmutableSet.create(props.defaultOpenItems)),
+    state: React.useMemo(() => props.openItems && createOpenItems(props.openItems), [props.openItems]),
+    defaultState: () => createOpenItems(props.defaultOpenItems),
     initialState: ImmutableSet.empty,
   });
 }
 
+/**
+ * @internal
+ */
 export function createNextOpenItems(
   data: Pick<TreeOpenChangeData, 'value' | 'open'>,
   previousOpenItems: ImmutableSet<TreeItemValue>,
diff --git a/packages/react-components/react-tree/src/components/Tree/useRootTree.ts b/packages/react-components/react-tree/src/hooks/useRootTree.ts
similarity index 67%
rename from packages/react-components/react-tree/src/components/Tree/useRootTree.ts
rename to packages/react-components/react-tree/src/hooks/useRootTree.ts
index 99e20656efb39..d3ec2bfb4c28a 100644
--- a/packages/react-components/react-tree/src/components/Tree/useRootTree.ts
+++ b/packages/react-components/react-tree/src/hooks/useRootTree.ts
@@ -1,59 +1,51 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { SelectionMode, getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import {
+import { SelectionMode, getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';
+import type {
+  TreeCheckedChangeData,
+  TreeNavigationData_unstable,
   TreeOpenChangeData,
   TreeProps,
   TreeState,
-  TreeNavigationData_unstable,
-  TreeCheckedChangeData,
-} from './Tree.types';
-import {
-  useControllableOpenItems,
-  useNestedTreeNavigation,
-  useNestedControllableCheckedItems,
-  createNextOpenItems,
-} from '../../hooks';
-import { treeDataTypes } from '../../utils/tokens';
-import { TreeItemRequest } from '../../contexts';
+} from '../Tree';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { TreeItemRequest } from '../contexts/treeContext';
+import { createOpenItems } from '../utils/createOpenItems';
+import { createCheckedItems } from '../utils/createCheckedItems';
+import { treeDataTypes } from '../utils/tokens';
 
 /**
- * Create the state required to render the root level Tree.
+ * Create the state required to render the root level BaseTree.
  *
- * @param props - props from this instance of Tree
- * @param ref - reference to root HTMLElement of Tree
+ * @param props - props from this instance of BaseTree
+ * @param ref - reference to root HTMLElement of BaseTree
  */
-export function useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {
+export function useRootTree(
+  props: Pick<
+    TreeProps,
+    | 'selectionMode'
+    | 'appearance'
+    | 'size'
+    | 'openItems'
+    | 'checkedItems'
+    | 'onOpenChange'
+    | 'onCheckedChange'
+    | 'onNavigation_unstable'
+    | 'aria-label'
+    | 'aria-labelledby'
+  >,
+  ref: React.Ref<HTMLElement>,
+): TreeState {
   warnIfNoProperPropsRootTree(props);
 
   const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;
 
-  const [openItems, setOpenItems] = useControllableOpenItems(props);
-
-  const [checkedItems] = useNestedControllableCheckedItems(props);
-  const [navigate, navigationRef] = useNestedTreeNavigation();
-
-  const requestOpenChange = (data: TreeOpenChangeData) => {
-    props.onOpenChange?.(data.event, data);
-    if (data.event.isDefaultPrevented()) {
-      return;
-    }
-    return setOpenItems(createNextOpenItems(data, openItems));
-  };
-
-  const requestCheckedChange = (data: TreeCheckedChangeData) => {
-    props.onCheckedChange?.(data.event, data);
-    // TODO:
-    // we should implement the logic for nested tree selection
-    // return setCheckedItems(checkedItems);
-  };
+  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);
+  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);
+  const requestOpenChange = (data: TreeOpenChangeData) => props.onOpenChange?.(data.event, data);
 
+  const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);
   const requestNavigation = (data: TreeNavigationData_unstable) => {
     props.onNavigation_unstable?.(data.event, data);
-    if (data.event.isDefaultPrevented()) {
-      return;
-    }
-    navigate(data);
     if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {
       data.event.preventDefault();
     }
@@ -119,8 +111,8 @@ export function useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): Tree
     checkedItems,
     requestTreeResponse,
     root: getNativeElementProps('div', {
-      ref: useMergedRefs(navigationRef, ref),
-      role: 'tree',
+      ref,
+      role: 'baseTree',
       'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
       ...props,
     }),
@@ -131,7 +123,7 @@ function warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria
   if (process.env.NODE_ENV === 'development') {
     if (!props['aria-label'] && !props['aria-labelledby']) {
       // eslint-disable-next-line no-console
-      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');
+      console.warn('BaseTree must have either a `aria-label` or `aria-labelledby` property defined');
     }
   }
 }
diff --git a/packages/react-components/react-tree/src/components/Tree/useSubtree.ts b/packages/react-components/react-tree/src/hooks/useSubtree.ts
similarity index 78%
rename from packages/react-components/react-tree/src/components/Tree/useSubtree.ts
rename to packages/react-components/react-tree/src/hooks/useSubtree.ts
index 0d72557c09314..e6a947703d058 100644
--- a/packages/react-components/react-tree/src/components/Tree/useSubtree.ts
+++ b/packages/react-components/react-tree/src/hooks/useSubtree.ts
@@ -1,15 +1,15 @@
 import * as React from 'react';
+import { TreeProps, TreeState } from '../Tree';
+import { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
-import { TreeProps, TreeState } from './Tree.types';
-import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';
 
 /**
- * Create the state required to render a sub-level Tree.
+ * Create the state required to render a sub-level BaseTree.
  *
- * @param props - props from this instance of Tree
- * @param ref - reference to root HTMLElement of Tree
+ * @param props - props from this instance of BaseTree
+ * @param ref - reference to root HTMLElement of BaseTree
  */
-export function useSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {
+export function useSubtree(props: Pick<TreeProps, 'appearance' | 'size'>, ref: React.Ref<HTMLElement>): TreeState {
   const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);
   const contextSize = useTreeContext_unstable(ctx => ctx.size);
   const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);
diff --git a/packages/react-components/react-tree/src/index.ts b/packages/react-components/react-tree/src/index.ts
index 4ee54c095cc65..3284b5f5f17d3 100644
--- a/packages/react-components/react-tree/src/index.ts
+++ b/packages/react-components/react-tree/src/index.ts
@@ -1,26 +1,48 @@
 export {
   Tree,
   treeClassNames,
-  renderTree_unstable,
-  useTreeStyles_unstable,
   useTree_unstable,
+  useTreeStyles_unstable,
   useTreeContextValues_unstable,
+  renderTree_unstable,
 } from './Tree';
+
 export type {
+  TreeSlots,
   TreeProps,
   TreeState,
-  TreeSlots,
-  TreeSelectionValue,
+  TreeContextValues,
   TreeOpenChangeData,
+  TreeSelectionValue,
   TreeOpenChangeEvent,
   TreeCheckedChangeData,
   TreeCheckedChangeEvent,
-  TreeNavigationEvent_unstable,
   TreeNavigationData_unstable,
+  TreeNavigationEvent_unstable,
 } from './Tree';
 
+export {
+  FlatTree,
+  flatTreeClassNames,
+  useFlatTree_unstable,
+  useFlatTreeStyles_unstable,
+  useFlatTreeContextValues_unstable,
+  renderFlatTree_unstable,
+  useHeadlessFlatTree_unstable,
+} from './FlatTree';
+
+export type {
+  FlatTreeSlots,
+  FlatTreeProps,
+  FlatTreeState,
+  HeadlessFlatTree,
+  HeadlessFlatTreeItem,
+  HeadlessFlatTreeOptions,
+  HeadlessFlatTreeItemProps,
+} from './FlatTree';
+
 export { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';
-export type { TreeContextValue } from './contexts';
+export type { TreeContextValue, TreeItemContextValue } from './contexts';
 
 export { treeItemLevelToken } from './utils/tokens';
 
@@ -56,8 +78,5 @@ export type {
   TreeItemPersonaLayoutState,
 } from './TreeItemPersonaLayout';
 
-export { useFlatTree_unstable } from './hooks/index';
-export type { FlatTreeItem, FlatTreeItemProps, FlatTreeProps, FlatTree } from './hooks/index';
-
 export { flattenTree_unstable } from './utils/flattenTree';
-export type { NestedTreeItem } from './utils/flattenTree';
+export type { FlattenTreeItem } from './utils/flattenTree';
diff --git a/packages/react-components/react-tree/src/testing/flattenTreeFromElement.ts b/packages/react-components/react-tree/src/testing/flattenTreeFromElement.ts
index 00506fa422b08..6c809a0392e00 100644
--- a/packages/react-components/react-tree/src/testing/flattenTreeFromElement.ts
+++ b/packages/react-components/react-tree/src/testing/flattenTreeFromElement.ts
@@ -1,6 +1,6 @@
+import { HeadlessFlatTreeItemProps } from '../../dist/index';
 import { TreeItemProps, TreeItemValue } from '../TreeItem';
 import * as React from 'react';
-import { FlatTreeItemProps } from '../hooks/useFlatTree';
 
 /**
  * @internal
@@ -11,18 +11,18 @@ export const flattenTreeFromElement = (
       | React.ReactElement<TreeItemProps & { value: TreeItemValue }>
       | React.ReactElement<TreeItemProps & { value: TreeItemValue }>[];
   }>,
-  parent?: FlatTreeItemProps,
+  parent?: HeadlessFlatTreeItemProps,
   level = 1,
-): FlatTreeItemProps[] => {
+): HeadlessFlatTreeItemProps[] => {
   const children = React.Children.toArray(root.props.children) as React.ReactElement<
     TreeItemProps & { value: TreeItemValue }
   >[];
-  return children.reduce<FlatTreeItemProps[]>((acc, curr, index) => {
+  return children.reduce<HeadlessFlatTreeItemProps[]>((acc, curr, index) => {
     const childrenArray = React.Children.toArray(curr.props.children);
     const subtree = (childrenArray.length === 3 ? childrenArray[2] : childrenArray[1]) as typeof root | undefined;
     const [content] = childrenArray;
     const actions = (childrenArray.length === 3 ? childrenArray[1] : undefined) as React.ReactNode | undefined;
-    const flatTreeItem: FlatTreeItemProps = {
+    const flatTreeItem: HeadlessFlatTreeItemProps = {
       'aria-level': level,
       'aria-posinset': index + 1,
       'aria-setsize': children.length,
diff --git a/packages/react-components/react-tree/src/utils/ImmutableMap.ts b/packages/react-components/react-tree/src/utils/ImmutableMap.ts
index 2588baec9ef38..76b73e7db3b81 100644
--- a/packages/react-components/react-tree/src/utils/ImmutableMap.ts
+++ b/packages/react-components/react-tree/src/utils/ImmutableMap.ts
@@ -64,9 +64,14 @@ function dangerouslyCreateImmutableMap<Key, Value>(internalMap: Map<Key, Value>)
   };
 }
 
+function isImmutableMap<Key, Value>(value: unknown): value is ImmutableMap<Key, Value> {
+  return typeof value === 'object' && value !== null && 'dangerouslyGetInternalMap_unstable' in value;
+}
+
 export const ImmutableMap = {
   empty: emptyImmutableMap,
   create: createImmutableMap,
+  isImmutableMap,
   // eslint-disable-next-line @typescript-eslint/naming-convention
   dangerouslyCreate_unstable: dangerouslyCreateImmutableMap,
 };
diff --git a/packages/react-components/react-tree/src/utils/ImmutableSet.ts b/packages/react-components/react-tree/src/utils/ImmutableSet.ts
index 4bfe89a4232ad..46f2236dbb688 100644
--- a/packages/react-components/react-tree/src/utils/ImmutableSet.ts
+++ b/packages/react-components/react-tree/src/utils/ImmutableSet.ts
@@ -64,6 +64,10 @@ function dangerouslyCreateImmutableSet<Value>(internalSet: Set<Value>): Immutabl
   };
 }
 
+function isImmutableSet<Value>(value: unknown): value is ImmutableSet<Value> {
+  return typeof value === 'object' && value !== null && 'dangerouslyGetInternalSet_unstable' in value;
+}
+
 /**
  * properly creates an ImmutableSet instance from an iterable
  */
@@ -75,6 +79,7 @@ function createImmutableSet<Value>(iterable?: Iterable<Value>): ImmutableSet<Val
 export const ImmutableSet = {
   empty: emptyImmutableSet,
   create: createImmutableSet,
+  isImmutableSet,
   // eslint-disable-next-line @typescript-eslint/naming-convention
   dangerouslyCreate_unstable: dangerouslyCreateImmutableSet,
 };
diff --git a/packages/react-components/react-tree/src/utils/createCheckedItems.ts b/packages/react-components/react-tree/src/utils/createCheckedItems.ts
new file mode 100644
index 0000000000000..a7bfd0ca5d68d
--- /dev/null
+++ b/packages/react-components/react-tree/src/utils/createCheckedItems.ts
@@ -0,0 +1,21 @@
+import { ImmutableMap } from './ImmutableMap';
+import type { TreeSelectionValue } from '../Tree';
+import type { TreeItemValue } from '../TreeItem';
+
+export function createCheckedItems(iterable?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>) {
+  if (iterable === undefined) {
+    return ImmutableMap.empty;
+  }
+  if (ImmutableMap.isImmutableMap<TreeItemValue, TreeSelectionValue>(iterable)) {
+    return iterable;
+  }
+  const internalMap = new Map<TreeItemValue, 'mixed' | boolean>();
+  for (const item of iterable) {
+    if (Array.isArray(item)) {
+      internalMap.set(item[0], item[1]);
+    } else {
+      internalMap.set(item, true);
+    }
+  }
+  return ImmutableMap.dangerouslyCreate_unstable(internalMap);
+}
diff --git a/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts b/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts
deleted file mode 100644
index 1e832051290ee..0000000000000
--- a/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import type { FlatTreeItem, FlatTreeItemProps } from '../hooks/useFlatTree';
-import { TreeItemValue } from '../TreeItem';
-import { ImmutableSet } from './ImmutableSet';
-
-/**
- * @internal
- */
-export type FlatTreeItems<Props extends FlatTreeItemProps> = {
-  size: number;
-  root: FlatTreeItem;
-  get(key: TreeItemValue): FlatTreeItem<Props> | undefined;
-  getParent(key: TreeItemValue): FlatTreeItem<Props>;
-  getByIndex(index: number): FlatTreeItem<Props>;
-  subtree(key: TreeItemValue): IterableIterator<FlatTreeItem<Props>>;
-  children(key: TreeItemValue): IterableIterator<FlatTreeItem<Props>>;
-  visibleItems(openItems: ImmutableSet<TreeItemValue>): IterableIterator<FlatTreeItem<Props>>;
-  ancestors(key: TreeItemValue): IterableIterator<FlatTreeItem<Props>>;
-};
-
-/**
- * creates a list of flat tree items
- * and provides a map to access each item by id
- */
-export function createFlatTreeItems<Props extends FlatTreeItemProps>(flatTreeItemProps: Props[]): FlatTreeItems<Props> {
-  const root = createFlatTreeRootItem();
-  const itemsPerValue = new Map<TreeItemValue, FlatTreeItem<FlatTreeItemProps>>([[root.value, root]]);
-  const items: FlatTreeItem<FlatTreeItemProps>[] = [];
-
-  for (let index = 0; index < flatTreeItemProps.length; index++) {
-    const { parentValue = flatTreeRootId, ...treeItemProps } = flatTreeItemProps[index];
-
-    const nextItemProps: Props | undefined = flatTreeItemProps[index + 1];
-    const currentParent = itemsPerValue.get(parentValue);
-    if (!currentParent) {
-      if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.error(
-          `useFlatTree: item ${flatTreeItemProps[index].value} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`,
-        );
-      }
-      break;
-    }
-    const itemType =
-      treeItemProps.itemType ??
-      (treeItemProps.value === undefined || nextItemProps?.parentValue !== treeItemProps.value ? 'leaf' : 'branch');
-    const currentLevel = (currentParent.level ?? 0) + 1;
-
-    const flatTreeItem: FlatTreeItem<FlatTreeItemProps> = {
-      value: treeItemProps.value,
-      getTreeItemProps: () => ({
-        ...treeItemProps,
-        'aria-level': currentLevel,
-        'aria-posinset': currentChildrenSize,
-        'aria-setsize': currentParent.childrenValues.length,
-        itemType,
-      }),
-      level: currentLevel,
-      parentValue,
-      childrenValues: [],
-      index: -1,
-    };
-    const currentChildrenSize = currentParent.childrenValues.push(flatTreeItem.value);
-    itemsPerValue.set(flatTreeItem.value, flatTreeItem);
-    items.push(flatTreeItem);
-  }
-
-  const flatTreeItems: FlatTreeItems<FlatTreeItemProps> = {
-    root,
-    size: items.length,
-    getByIndex: index => items[index],
-    getParent: key => itemsPerValue.get(itemsPerValue.get(key)?.parentValue ?? root.value) ?? root,
-    get: key => itemsPerValue.get(key),
-    subtree: key => FlatTreeSubtreeGenerator(key, flatTreeItems),
-    children: key => FlatTreeChildrenGenerator(key, flatTreeItems),
-    ancestors: key => FlatTreeAncestorsGenerator(key, flatTreeItems),
-    visibleItems: openItems => VisibleFlatTreeItemGenerator(openItems, flatTreeItems),
-  };
-
-  return flatTreeItems as FlatTreeItems<Props>;
-}
-
-export const flatTreeRootId = '__fuiFlatTreeRoot';
-
-function createFlatTreeRootItem(): FlatTreeItem {
-  return {
-    parentValue: undefined,
-    value: flatTreeRootId,
-    getTreeItemProps: () => {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
-      }
-      return {
-        id: flatTreeRootId,
-        value: flatTreeRootId,
-        'aria-setsize': -1,
-        'aria-level': -1,
-        'aria-posinset': -1,
-        itemType: 'branch',
-      };
-    },
-    childrenValues: [],
-    get index() {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
-      }
-      return -1;
-    },
-    level: 0,
-  };
-}
-
-/**
- * Generator that returns all subtree of a given flat tree item
- * @param key the key of the item to get the subtree from
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function* FlatTreeSubtreeGenerator<Props extends FlatTreeItemProps>(
-  key: TreeItemValue,
-  flatTreeItems: FlatTreeItems<Props>,
-) {
-  const item = flatTreeItems.get(key);
-  if (!item || item.childrenValues.length === 0) {
-    return [];
-  }
-  let counter = item.childrenValues.length;
-  let index = item.index;
-  while (counter > 0) {
-    const children = flatTreeItems.getByIndex(++index);
-    yield children;
-    counter += children.childrenValues.length - 1;
-  }
-}
-
-/**
- * Generator that returns all children of a given flat tree item
- * @param key the key of the item to get the children from
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function* FlatTreeChildrenGenerator<Props extends FlatTreeItemProps>(
-  key: TreeItemValue,
-  flatTreeItems: FlatTreeItems<Props>,
-) {
-  const item = flatTreeItems.get(key);
-  if (!item || item.childrenValues.length === 0) {
-    return;
-  }
-  for (const childValue of item.childrenValues) {
-    yield flatTreeItems.get(childValue)!;
-  }
-}
-
-/**
- * Generator that returns all ancestors of a given flat tree item
- * @param key the key of the item to get the children from
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function* FlatTreeAncestorsGenerator<Props extends FlatTreeItemProps>(
-  key: TreeItemValue,
-  flatTreeItems: FlatTreeItems<Props>,
-) {
-  let parent = flatTreeItems.getParent(key);
-  while (parent !== flatTreeItems.root) {
-    yield parent;
-    parent = flatTreeItems.getParent(parent.value);
-  }
-}
-
-/**
- * Generator that returns all visible items of a given flat tree
- * @param openItems the open items of the tree
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function* VisibleFlatTreeItemGenerator<Props extends FlatTreeItemProps>(
-  openItems: ImmutableSet<TreeItemValue>,
-  flatTreeItems: FlatTreeItems<Props>,
-) {
-  for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {
-    const item = flatTreeItems.getByIndex(index) as FlatTreeItem<Props>;
-    if (isItemVisible(item, openItems, flatTreeItems)) {
-      item.index = visibleIndex++;
-      yield item;
-    } else {
-      // Jump the amount of children the current item has, since those items will also be hidden
-      index += item.childrenValues.length;
-    }
-  }
-}
-
-function isItemVisible(
-  item: FlatTreeItem<FlatTreeItemProps>,
-  openItems: ImmutableSet<TreeItemValue>,
-  flatTreeItems: FlatTreeItems<FlatTreeItemProps>,
-) {
-  if (item.level === 1) {
-    return true;
-  }
-  while (item.parentValue && item.parentValue !== flatTreeItems.root.value) {
-    if (!openItems.has(item.parentValue)) {
-      return false;
-    }
-    const parent = flatTreeItems.get(item.parentValue);
-    if (!parent) {
-      return false;
-    }
-    item = parent;
-  }
-  return true;
-}
diff --git a/packages/react-components/react-tree/src/utils/createHeadlessTree.ts b/packages/react-components/react-tree/src/utils/createHeadlessTree.ts
new file mode 100644
index 0000000000000..f84654ccc56b9
--- /dev/null
+++ b/packages/react-components/react-tree/src/utils/createHeadlessTree.ts
@@ -0,0 +1,231 @@
+import { TreeItemProps, TreeItemType, TreeItemValue } from '../TreeItem';
+import { ImmutableSet } from './ImmutableSet';
+
+export type HeadlessTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & {
+  value: TreeItemValue;
+  itemType?: TreeItemType;
+  parentValue?: TreeItemValue;
+};
+
+/**
+ * The item that is returned by `createHeadlessTree`, it represents a wrapper around the properties provided to
+ * `createHeadlessTree` but with extra information that might be useful on virtual tree scenarios
+ */
+export type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {
+  index: number;
+  level: number;
+  childrenValues: TreeItemValue[];
+  value: TreeItemValue;
+  parentValue: TreeItemValue | undefined;
+  getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> &
+    Omit<Props, 'parentValue'>;
+};
+
+/**
+ * @internal
+ */
+export type HeadlessTree<Props extends HeadlessTreeItemProps> = {
+  size: number;
+  root: HeadlessTreeItem<HeadlessTreeItemProps>;
+  get(key: TreeItemValue): HeadlessTreeItem<Props> | undefined;
+  getParent(key: TreeItemValue): HeadlessTreeItem<Props>;
+  getByIndex(index: number): HeadlessTreeItem<Props>;
+  subtree(key: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;
+  children(key: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;
+  visibleItems(openItems: ImmutableSet<TreeItemValue>): IterableIterator<HeadlessTreeItem<Props>>;
+  ancestors(key: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;
+};
+
+/**
+ * creates a list of virtual tree items
+ * and provides a map to access each item by id
+ */
+export function createHeadlessTree<Props extends HeadlessTreeItemProps>(
+  virtualTreeItemProps: Props[],
+): HeadlessTree<Props> {
+  const root = createHeadlessTreeRootItem();
+  const itemsPerValue = new Map<TreeItemValue, HeadlessTreeItem<HeadlessTreeItemProps>>([[root.value, root]]);
+  const items: HeadlessTreeItem<HeadlessTreeItemProps>[] = [];
+
+  for (let index = 0; index < virtualTreeItemProps.length; index++) {
+    const { parentValue = virtualTreeRootId, ...treeItemProps } = virtualTreeItemProps[index];
+
+    const nextItemProps: Props | undefined = virtualTreeItemProps[index + 1];
+    const currentParent = itemsPerValue.get(parentValue);
+    if (!currentParent) {
+      if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.error(
+          `useHeadlessTree: item ${virtualTreeItemProps[index].value} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`,
+        );
+      }
+      break;
+    }
+    const itemType =
+      treeItemProps.itemType ??
+      (treeItemProps.value === undefined || nextItemProps?.parentValue !== treeItemProps.value ? 'leaf' : 'branch');
+    const currentLevel = (currentParent.level ?? 0) + 1;
+
+    const virtualTreeItem: HeadlessTreeItem<HeadlessTreeItemProps> = {
+      value: treeItemProps.value,
+      getTreeItemProps: () => ({
+        ...treeItemProps,
+        'aria-level': currentLevel,
+        'aria-posinset': currentChildrenSize,
+        'aria-setsize': currentParent.childrenValues.length,
+        itemType,
+      }),
+      level: currentLevel,
+      parentValue,
+      childrenValues: [],
+      index: -1,
+    };
+    const currentChildrenSize = currentParent.childrenValues.push(virtualTreeItem.value);
+    itemsPerValue.set(virtualTreeItem.value, virtualTreeItem);
+    items.push(virtualTreeItem);
+  }
+
+  const virtualTreeItems: HeadlessTree<HeadlessTreeItemProps> = {
+    root,
+    size: items.length,
+    getByIndex: index => items[index],
+    getParent: key => itemsPerValue.get(itemsPerValue.get(key)?.parentValue ?? root.value) ?? root,
+    get: key => itemsPerValue.get(key),
+    subtree: key => HeadlessTreeSubtreeGenerator(key, virtualTreeItems),
+    children: key => HeadlessTreeChildrenGenerator(key, virtualTreeItems),
+    ancestors: key => HeadlessTreeAncestorsGenerator(key, virtualTreeItems),
+    visibleItems: openItems => HeadlessTreeVisibleItemsGenerator(openItems, virtualTreeItems),
+  };
+
+  return virtualTreeItems as HeadlessTree<Props>;
+}
+
+export const virtualTreeRootId = '__fuiHeadlessTreeRoot';
+
+function createHeadlessTreeRootItem(): HeadlessTreeItem<HeadlessTreeItemProps> {
+  return {
+    parentValue: undefined,
+    value: virtualTreeRootId,
+    getTreeItemProps: () => {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error('useHeadlessTree: internal error, trying to access treeitem props from invalid root element');
+      }
+      return {
+        id: virtualTreeRootId,
+        value: virtualTreeRootId,
+        'aria-setsize': -1,
+        'aria-level': -1,
+        'aria-posinset': -1,
+        itemType: 'branch',
+      };
+    },
+    childrenValues: [],
+    get index() {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error('useHeadlessTree: internal error, trying to access treeitem props from invalid root element');
+      }
+      return -1;
+    },
+    level: 0,
+  };
+}
+
+/**
+ * Generator that returns all subtree of a given virtual tree item
+ * @param key the key of the item to get the subtree from
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function* HeadlessTreeSubtreeGenerator<Props extends HeadlessTreeItemProps>(
+  key: TreeItemValue,
+  virtualTreeItems: HeadlessTree<Props>,
+) {
+  const item = virtualTreeItems.get(key);
+  if (!item || item.childrenValues.length === 0) {
+    return [];
+  }
+  let counter = item.childrenValues.length;
+  let index = item.index;
+  while (counter > 0) {
+    const children = virtualTreeItems.getByIndex(++index);
+    yield children;
+    counter += children.childrenValues.length - 1;
+  }
+}
+
+/**
+ * Generator that returns all children of a given virtual tree item
+ * @param key the key of the item to get the children from
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function* HeadlessTreeChildrenGenerator<Props extends HeadlessTreeItemProps>(
+  key: TreeItemValue,
+  virtualTreeItems: HeadlessTree<Props>,
+) {
+  const item = virtualTreeItems.get(key);
+  if (!item || item.childrenValues.length === 0) {
+    return;
+  }
+  for (const childValue of item.childrenValues) {
+    yield virtualTreeItems.get(childValue)!;
+  }
+}
+
+/**
+ * Generator that returns all ancestors of a given virtual tree item
+ * @param key the key of the item to get the children from
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function* HeadlessTreeAncestorsGenerator<Props extends HeadlessTreeItemProps>(
+  key: TreeItemValue,
+  virtualTreeItems: HeadlessTree<Props>,
+) {
+  let parent = virtualTreeItems.getParent(key);
+  while (parent !== virtualTreeItems.root) {
+    yield parent;
+    parent = virtualTreeItems.getParent(parent.value);
+  }
+}
+
+/**
+ * Generator that returns all visible items of a given virtual tree
+ * @param openItems the open items of the tree
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function* HeadlessTreeVisibleItemsGenerator<Props extends HeadlessTreeItemProps>(
+  openItems: ImmutableSet<TreeItemValue>,
+  virtualTreeItems: HeadlessTree<Props>,
+) {
+  for (let index = 0, visibleIndex = 0; index < virtualTreeItems.size; index++) {
+    const item = virtualTreeItems.getByIndex(index) as HeadlessTreeItem<Props>;
+    if (isItemVisible(item, openItems, virtualTreeItems)) {
+      item.index = visibleIndex++;
+      yield item;
+    } else {
+      // Jump the amount of children the current item has, since those items will also be hidden
+      index += item.childrenValues.length;
+    }
+  }
+}
+
+function isItemVisible(
+  item: HeadlessTreeItem<HeadlessTreeItemProps>,
+  openItems: ImmutableSet<TreeItemValue>,
+  virtualTreeItems: HeadlessTree<HeadlessTreeItemProps>,
+) {
+  if (item.level === 1) {
+    return true;
+  }
+  while (item.parentValue && item.parentValue !== virtualTreeItems.root.value) {
+    if (!openItems.has(item.parentValue)) {
+      return false;
+    }
+    const parent = virtualTreeItems.get(item.parentValue);
+    if (!parent) {
+      return false;
+    }
+    item = parent;
+  }
+  return true;
+}
diff --git a/packages/react-components/react-tree/src/utils/createOpenItems.ts b/packages/react-components/react-tree/src/utils/createOpenItems.ts
new file mode 100644
index 0000000000000..72e7d80a447df
--- /dev/null
+++ b/packages/react-components/react-tree/src/utils/createOpenItems.ts
@@ -0,0 +1,12 @@
+import { ImmutableSet } from './ImmutableSet';
+import type { TreeItemValue } from '../TreeItem';
+
+export function createOpenItems(iterable?: Iterable<TreeItemValue>) {
+  if (iterable === undefined) {
+    return ImmutableSet.empty;
+  }
+  if (ImmutableSet.isImmutableSet<TreeItemValue>(iterable)) {
+    return iterable;
+  }
+  return ImmutableSet.create(iterable);
+}
diff --git a/packages/react-components/react-tree/src/utils/flattenTree.ts b/packages/react-components/react-tree/src/utils/flattenTree.ts
index d840785329b1b..5812f93360180 100644
--- a/packages/react-components/react-tree/src/utils/flattenTree.ts
+++ b/packages/react-components/react-tree/src/utils/flattenTree.ts
@@ -1,16 +1,16 @@
-import { FlatTreeItemProps } from '../hooks/useFlatTree';
+import { HeadlessFlatTreeItemProps } from '../FlatTree';
 import { TreeItemProps, TreeItemValue } from '../TreeItem';
 
-export type NestedTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
+export type FlattenTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
   value: TreeItemValue;
-  subtree?: NestedTreeItem<Props>[];
+  subtree?: FlattenTreeItem<Props>[];
 };
 
-export type FlattenedTreeItem<Props extends TreeItemProps> = FlatTreeItemProps & Props;
+export type FlattenedTreeItem<Props extends TreeItemProps> = HeadlessFlatTreeItemProps & Props;
 
 function flattenTreeRecursive<Props extends TreeItemProps>(
-  items: NestedTreeItem<Props>[],
-  parent?: FlatTreeItemProps & Props,
+  items: FlattenTreeItem<Props>[],
+  parent?: HeadlessFlatTreeItemProps & Props,
   level = 1,
 ): FlattenedTreeItem<Props>[] {
   return items.reduce<FlattenedTreeItem<Props>[]>((acc, { subtree, ...item }, index) => {
@@ -71,5 +71,5 @@ function flattenTreeRecursive<Props extends TreeItemProps>(
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const flattenTree_unstable = <Props extends TreeItemProps>(
-  items: NestedTreeItem<Props>[],
+  items: FlattenTreeItem<Props>[],
 ): FlattenedTreeItem<Props>[] => flattenTreeRecursive(items);
diff --git a/packages/react-components/react-tree/stories/A_Tree/TreeMultipleSelection.stories.tsx b/packages/react-components/react-tree/stories/A_Tree/TreeMultipleSelection.stories.tsx
deleted file mode 100644
index de413a49a8045..0000000000000
--- a/packages/react-components/react-tree/stories/A_Tree/TreeMultipleSelection.stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
-import { Image20Regular } from '@fluentui/react-icons';
-
-export const MultipleSelection = () => {
-  return (
-    <Tree defaultOpenItems={['1', '2', '2-1']} selectionMode="multiselect" aria-label="Tree">
-      <TreeItem value="1" itemType="branch">
-        <TreeItemLayout iconBefore={<Image20Regular />}>level 1, item 1</TreeItemLayout>
-        <Tree>
-          <TreeItem value="1-1" itemType="leaf">
-            <TreeItemLayout iconBefore={<Image20Regular />}>level 2, item 1</TreeItemLayout>
-          </TreeItem>
-          <TreeItem value="1-2" itemType="leaf">
-            <TreeItemLayout iconBefore={<Image20Regular />}>level 2, item 2</TreeItemLayout>
-          </TreeItem>
-          <TreeItem value="1-3" itemType="leaf">
-            <TreeItemLayout iconBefore={<Image20Regular />}>level 2, item 3</TreeItemLayout>
-          </TreeItem>
-        </Tree>
-      </TreeItem>
-      <TreeItem value="2" itemType="branch">
-        <TreeItemLayout iconBefore={<Image20Regular />}>level 1, item 2</TreeItemLayout>
-        <Tree>
-          <TreeItem value="2-1" itemType="branch">
-            <TreeItemLayout iconBefore={<Image20Regular />}>level 2, item 1</TreeItemLayout>
-            <Tree>
-              <TreeItem value="2-1-1" itemType="leaf">
-                <TreeItemLayout iconBefore={<Image20Regular />}>level 3, item 1</TreeItemLayout>
-              </TreeItem>
-              <TreeItem value="2-1-2" itemType="leaf">
-                <TreeItemLayout iconBefore={<Image20Regular />}>level 3, item 2</TreeItemLayout>
-              </TreeItem>
-            </Tree>
-          </TreeItem>
-          <TreeItem value="2-2" itemType="leaf">
-            <TreeItemLayout iconBefore={<Image20Regular />}>level 2, item 2</TreeItemLayout>
-          </TreeItem>
-        </Tree>
-      </TreeItem>
-      <TreeItem value="3" itemType="leaf">
-        <TreeItemLayout iconBefore={<Image20Regular />}>level 1, item 3</TreeItemLayout>
-      </TreeItem>
-    </Tree>
-  );
-};
diff --git a/packages/react-components/react-tree/stories/A_Tree/TreeSingleSelection.stories.tsx b/packages/react-components/react-tree/stories/A_Tree/TreeSingleSelection.stories.tsx
deleted file mode 100644
index e4a4a2868d3d6..0000000000000
--- a/packages/react-components/react-tree/stories/A_Tree/TreeSingleSelection.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
-import { Image20Regular } from '@fluentui/react-icons';
-
-export const SingleSelection = () => {
-  return (
-    <Tree defaultOpenItems={['1', '2', '2-1']} selectionMode="single" aria-label="Tree">
-      <TreeItem value="1" itemType="branch">
-        <TreeItemLayout iconBefore={<Image20Regular />}>level 1, item 1</TreeItemLayout>
-        <Tree>
-          <TreeItem value="1-1" itemType="leaf">
-            <TreeItemLayout iconBefore={<Image20Regular />}>level 2, item 1</TreeItemLayout>
-          </TreeItem>
-          <TreeItem value="1-2" itemType="leaf">
-            <TreeItemLayout iconBefore={<Image20Regular />}>level 2, item 2</TreeItemLayout>
-          </TreeItem>
-          <TreeItem value="1-3" itemType="leaf">
-            <TreeItemLayout iconBefore={<Image20Regular />}>level 2, item 3</TreeItemLayout>
-          </TreeItem>
-        </Tree>
-      </TreeItem>
-      <TreeItem value="2" itemType="branch">
-        <TreeItemLayout iconBefore={<Image20Regular />}>level 1, item 2</TreeItemLayout>
-        <Tree>
-          <TreeItem value="2-1" itemType="branch">
-            <TreeItemLayout iconBefore={<Image20Regular />}>level 2, item 1</TreeItemLayout>
-            <Tree>
-              <TreeItem value="2-2" itemType="leaf">
-                <TreeItemLayout iconBefore={<Image20Regular />}>level 3, item 1</TreeItemLayout>
-              </TreeItem>
-            </Tree>
-          </TreeItem>
-        </Tree>
-      </TreeItem>
-      <TreeItem value="3" itemType="leaf">
-        <TreeItemLayout iconBefore={<Image20Regular />}>level 1, item 3</TreeItemLayout>
-      </TreeItem>
-    </Tree>
-  );
-};
diff --git a/packages/react-components/react-tree/stories/A_Tree/index.stories.tsx b/packages/react-components/react-tree/stories/A_Tree/index.stories.tsx
index b7f8f7f7cee0c..23315dbb92ded 100644
--- a/packages/react-components/react-tree/stories/A_Tree/index.stories.tsx
+++ b/packages/react-components/react-tree/stories/A_Tree/index.stories.tsx
@@ -8,8 +8,6 @@ export { DefaultOpenTrees } from './TreeDefaultOpenTrees.stories';
 export { Appearance } from './TreeAppearance.stories';
 export { Size } from './TreeSize.stories';
 export { OpenItemsControlled } from './TreeControllingOpenAndClose.stories';
-export { SingleSelection } from './TreeSingleSelection.stories';
-export { MultipleSelection } from './TreeMultipleSelection.stories';
 
 export default {
   title: 'Preview Components/Tree/Tree',
diff --git a/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx
index fbf6c6528b64a..d046a1c460dea 100644
--- a/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx
+++ b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx
@@ -1,19 +1,32 @@
 import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
-import { TreeOpenChangeData, TreeOpenChangeEvent } from '../../src/components/Tree/Tree.types';
+import {
+  Tree,
+  TreeItem,
+  TreeItemLayout,
+  TreeItemValue,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+} from '@fluentui/react-tree';
 import story from './TreeItemExpandCollapseIconOnly.md';
 
 export const ExpandCollapseIconOnly = () => {
+  const [openItems, setOpenItems] = React.useState<Set<TreeItemValue>>(() => new Set());
   const onOpenChange = (event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
     if (data.type === 'Click' || data.type === 'Enter') {
-      event.preventDefault();
-      // TODO: We might need to add the ID of the treeeItem to the event
       alert('click on item');
+      return;
     }
+    const nextOpenItems = new Set(openItems);
+    if (data.open) {
+      nextOpenItems.add(data.value);
+    } else {
+      nextOpenItems.delete(data.value);
+    }
+    setOpenItems(nextOpenItems);
   };
 
   return (
-    <Tree aria-label="Tree" onOpenChange={onOpenChange}>
+    <Tree openItems={openItems} aria-label="Tree" onOpenChange={onOpenChange}>
       <TreeItem itemType="branch" value="default-subtree-1">
         <TreeItemLayout>level 1, item 1</TreeItemLayout>
         <Tree>
diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeInfiniteScrolling.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeInfiniteScrolling.stories.tsx
index 7b5e8877fa0b1..e264c9b5121d7 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/TreeInfiniteScrolling.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/TreeInfiniteScrolling.stories.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout, useFlatTree_unstable, FlatTreeItemProps } from '@fluentui/react-tree';
+import {
+  FlatTree as Tree,
+  TreeItem,
+  TreeItemLayout,
+  HeadlessFlatTreeItemProps,
+  useHeadlessFlatTree_unstable,
+} from '@fluentui/react-tree';
 import { makeStyles, shorthands, Spinner } from '@fluentui/react-components';
 import story from './TreeInfiniteScrolling.md';
 
@@ -7,7 +13,7 @@ interface Result {
   results: { name: string }[];
 }
 
-type Item = FlatTreeItemProps & { name: string | React.ReactNode };
+type Item = HeadlessFlatTreeItemProps & { name: string | React.ReactNode };
 
 const MAX_PAGES = 5;
 
@@ -57,7 +63,7 @@ export const InfiniteScrolling = () => {
 
   const styles = useStyles();
 
-  const flatTree = useFlatTree_unstable(items, { defaultOpenItems: ['pinned', 'people'] });
+  const flatTree = useHeadlessFlatTree_unstable(items, { defaultOpenItems: ['pinned', 'people'] });
 
   const fetchMoreItems = () => {
     setIsLoading(true);
diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
index 60a145080325e..77fbd454c980c 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react';
 import {
-  FlatTreeItemProps,
-  Tree,
+  FlatTree as Tree,
   TreeItem,
   TreeItemLayout,
   TreeOpenChangeData,
   TreeOpenChangeEvent,
-  useFlatTree_unstable,
+  HeadlessFlatTreeItemProps,
+  useHeadlessFlatTree_unstable,
 } from '@fluentui/react-tree';
 import { Delete20Regular } from '@fluentui/react-icons';
 import { Button } from '@fluentui/react-components';
 import story from './TreeItemAddRemove.md';
 
-type ItemProps = FlatTreeItemProps & { content: string };
+type ItemProps = HeadlessFlatTreeItemProps & { content: string };
 
 const defaultSubTrees: ItemProps[][] = [
   [
@@ -60,7 +60,7 @@ export const AddRemoveTreeItem = () => {
       return [...currentTrees.slice(0, subtreeIndex), nextSubTree, ...currentTrees.slice(subtreeIndex + 1)];
     });
 
-  const flatTree = useFlatTree_unstable(
+  const flatTree = useHeadlessFlatTree_unstable(
     React.useMemo(
       () => [
         ...trees[0],
diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx
index f448c2cb46f75..cf5750b1a74af 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import {
-  FlatTreeItemProps,
-  Tree,
+  FlatTree as Tree,
   TreeItem,
   TreeItemLayout,
   TreeOpenChangeData,
   TreeOpenChangeEvent,
-  useFlatTree_unstable,
+  HeadlessFlatTreeItemProps,
+  useHeadlessFlatTree_unstable,
 } from '@fluentui/react-tree';
 import story from './TreeLazyLoading.md';
 import { Spinner } from '@fluentui/react-components';
@@ -15,7 +15,7 @@ interface Result {
   results: { name: string }[];
 }
 
-type Entity = FlatTreeItemProps & { name: string };
+type Entity = HeadlessFlatTreeItemProps & { name: string };
 
 export const LazyLoading = () => {
   const peopleTree = useQuery<Entity[]>([]);
@@ -72,7 +72,7 @@ export const LazyLoading = () => {
     }
   };
 
-  const flatTree = useFlatTree_unstable(tree, { onOpenChange: handleOpenChange });
+  const flatTree = useHeadlessFlatTree_unstable(tree, { onOpenChange: handleOpenChange });
   const treeProps = flatTree.getTreeProps();
   return (
     <Tree {...treeProps} aria-label="Tree">
diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeMultiSelection.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeMultiSelection.stories.tsx
index ed9b6e67cb89e..6c3043f588ab0 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/TreeMultiSelection.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/TreeMultiSelection.stories.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout, useFlatTree_unstable, FlatTreeItemProps } from '@fluentui/react-tree';
+import {
+  FlatTree as Tree,
+  TreeItem,
+  TreeItemLayout,
+  HeadlessFlatTreeItemProps,
+  useHeadlessFlatTree_unstable,
+} from '@fluentui/react-tree';
 import story from './TreeMultiSelection.md';
 
-type Item = FlatTreeItemProps & { content: string };
+type Item = HeadlessFlatTreeItemProps & { content: string };
 
 const defaultItems: Item[] = [
   { value: '1', content: 'Level 1, item 1' },
@@ -20,7 +26,7 @@ const defaultItems: Item[] = [
 ];
 
 export const TreeMultiSelection = () => {
-  const flatTree = useFlatTree_unstable(defaultItems, {
+  const flatTree = useHeadlessFlatTree_unstable(defaultItems, {
     defaultOpenItems: ['1', '2', '2-1', '2-2'],
     selectionMode: 'multiselect',
   });
diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeSingleSelection.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeSingleSelection.stories.tsx
index 3910aafd9ff6d..13386e4673423 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/TreeSingleSelection.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/TreeSingleSelection.stories.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout, useFlatTree_unstable, FlatTreeItemProps } from '@fluentui/react-tree';
+import {
+  FlatTree as Tree,
+  TreeItem,
+  TreeItemLayout,
+  HeadlessFlatTreeItemProps,
+  useHeadlessFlatTree_unstable,
+} from '@fluentui/react-tree';
 import story from './TreeSingleSelection.md';
 
-type Item = FlatTreeItemProps & { content: string };
+type Item = HeadlessFlatTreeItemProps & { content: string };
 
 const defaultItems: Item[] = [
   { value: '1', content: 'Level 1, item 1' },
@@ -16,7 +22,7 @@ const defaultItems: Item[] = [
 ];
 
 export const TreeSingleSelection = () => {
-  const flatTree = useFlatTree_unstable(defaultItems, {
+  const flatTree = useHeadlessFlatTree_unstable(defaultItems, {
     defaultOpenItems: ['1', '2', '2-1'],
     selectionMode: 'single',
   });
diff --git a/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx
index 18fa7662c9fd3..6189ca4497377 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx
@@ -3,22 +3,22 @@ import {
   TreeProps,
   TreeItem,
   TreeItemLayout,
-  useTree_unstable,
-  useTreeStyles_unstable,
-  useTreeContextValues_unstable,
   TreeProvider,
   TreeSlots,
   TreeNavigationData_unstable,
   TreeNavigationEvent_unstable,
-  FlatTreeItemProps,
   useFlatTree_unstable,
-  FlatTreeItem,
+  HeadlessFlatTreeItemProps,
+  useFlatTreeStyles_unstable,
+  useFlatTreeContextValues_unstable,
+  HeadlessFlatTreeItem,
+  useHeadlessFlatTree_unstable,
 } from '@fluentui/react-tree';
 import { FixedSizeList, FixedSizeListProps, ListChildComponentProps } from 'react-window';
 import { ForwardRefComponent, getSlots } from '@fluentui/react-components';
 import story from './Virtualization.md';
 
-type ItemProps = FlatTreeItemProps & { content: string };
+type ItemProps = HeadlessFlatTreeItemProps & { content: string };
 
 const defaultItems: ItemProps[] = [
   {
@@ -49,9 +49,9 @@ type FixedSizeTreeProps = Omit<TreeProps, 'children'> & {
  * FixedSizeTree is a recomposition of Tree component that uses react-window FixedSizeList to render items.
  */
 const FixedSizeTree: ForwardRefComponent<FixedSizeTreeProps> = React.forwardRef((props, ref) => {
-  const state = useTree_unstable(props, ref);
-  useTreeStyles_unstable(state);
-  const contextValues = useTreeContextValues_unstable(state);
+  const state = useFlatTree_unstable(props, ref);
+  useFlatTreeStyles_unstable(state);
+  const contextValues = useFlatTreeContextValues_unstable(state);
   const { slots, slotProps } = getSlots<TreeSlots>(state);
   return (
     <TreeProvider value={contextValues.tree}>
@@ -63,7 +63,7 @@ const FixedSizeTree: ForwardRefComponent<FixedSizeTreeProps> = React.forwardRef(
 });
 
 interface FixedSizeTreeItemProps extends ListChildComponentProps {
-  data: FlatTreeItem<ItemProps>[];
+  data: HeadlessFlatTreeItem<ItemProps>[];
 }
 
 const FixedSizeTreeItem = (props: FixedSizeTreeItemProps) => {
@@ -77,9 +77,9 @@ const FixedSizeTreeItem = (props: FixedSizeTreeItemProps) => {
 };
 
 export const Virtualization = () => {
-  const flatTree = useFlatTree_unstable(defaultItems);
+  const virtualTree = useHeadlessFlatTree_unstable(defaultItems);
   const listRef = React.useRef<FixedSizeList>(null);
-  const items = React.useMemo(() => Array.from(flatTree.items()), [flatTree]);
+  const items = React.useMemo(() => Array.from(virtualTree.items()), [virtualTree]);
 
   /**
    * Since navigation is not possible due to the fact that not all items are rendered,
@@ -87,22 +87,22 @@ export const Virtualization = () => {
    */
   const handleNavigation = (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {
     event.preventDefault();
-    const nextItem = flatTree.getNextNavigableItem(items, data);
+    const nextItem = virtualTree.getNextNavigableItem(items, data);
     if (!nextItem) {
       return;
     }
     // if the next item is not rendered, scroll to it and try to navigate again
-    if (!flatTree.getElementFromItem(nextItem)) {
+    if (!virtualTree.getElementFromItem(nextItem)) {
       listRef.current?.scrollToItem(nextItem.index);
-      return requestAnimationFrame(() => flatTree.navigate(data));
+      return requestAnimationFrame(() => virtualTree.navigate(data));
     }
     // if the next item is rendered, navigate to it
-    flatTree.navigate(data);
+    virtualTree.navigate(data);
   };
 
   return (
     <FixedSizeTree
-      {...flatTree.getTreeProps()}
+      {...virtualTree.getTreeProps()}
       listProps={{
         ref: listRef,
         height: 300,
diff --git a/packages/react-components/react-tree/stories/D_flatTree/flattenTree.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/flattenTree.stories.tsx
index 2ea1815c3f03f..a0f883d87978b 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/flattenTree.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/flattenTree.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
-  Tree,
+  FlatTree as Tree,
   TreeItem,
-  useFlatTree_unstable,
   flattenTree_unstable,
   TreeItemProps,
   TreeItemLayout,
+  useHeadlessFlatTree_unstable,
 } from '@fluentui/react-tree';
 import story from './flattenTree.md';
 
@@ -55,10 +55,10 @@ const defaultItems = flattenTree_unstable<Item>([
 ]);
 
 export const FlattenTree = () => {
-  const flatTree = useFlatTree_unstable(defaultItems);
+  const virtualTree = useHeadlessFlatTree_unstable(defaultItems);
   return (
-    <Tree {...flatTree.getTreeProps()} aria-label="Tree">
-      {Array.from(flatTree.items(), item => {
+    <Tree {...virtualTree.getTreeProps()} aria-label="Tree">
+      {Array.from(virtualTree.items(), item => {
         const { layout, ...itemProps } = item.getTreeItemProps();
         return (
           <TreeItem {...itemProps} key={item.value}>
diff --git a/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx
index cb9f9e5d60d5f..2f1b2e260ef7a 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout, useFlatTree_unstable, FlatTreeItemProps } from '@fluentui/react-tree';
+import {
+  FlatTree as Tree,
+  TreeItem,
+  TreeItemLayout,
+  HeadlessFlatTreeItemProps,
+  useHeadlessFlatTree_unstable,
+} from '@fluentui/react-tree';
 import story from './useFlatTree.md';
 
-type Item = FlatTreeItemProps & { content: string };
+type Item = HeadlessFlatTreeItemProps & { content: string };
 
 const defaultItems: Item[] = [
   { value: '1', content: 'Level 1, item 1' },
@@ -20,7 +26,7 @@ const defaultItems: Item[] = [
 ];
 
 export const UseFlatTree = () => {
-  const flatTree = useFlatTree_unstable(defaultItems);
+  const flatTree = useHeadlessFlatTree_unstable(defaultItems);
 
   return (
     <Tree {...flatTree.getTreeProps()} aria-label="Tree">

From 0d4d0ef8daebaf5b6ebbcce17e64e35488864e0e Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Tue, 25 Jul 2023 13:44:49 +0200
Subject: [PATCH 08/37] chore: moves slots from TreeItem to TreeItemLayout
 (#28621)

---
 ...-977289b7-1256-4054-948b-aa984f37e4c2.json |   7 +
 .../react-tree/etc/react-tree.api.md          |  36 ++--
 .../src/components/FlatTree/FlatTree.cy.tsx   |  12 +-
 .../src/components/Tree/Tree.cy.tsx           |  12 +-
 .../src/components/TreeItem/TreeItem.types.ts |  39 +----
 .../components/TreeItem/renderTreeItem.tsx    |  10 +-
 .../src/components/TreeItem/useTreeItem.tsx   |  93 ++--------
 .../TreeItem/useTreeItemContextValues.ts      |  28 ++-
 .../TreeItem/useTreeItemStyles.styles.ts      |   4 +-
 .../TreeItemLayout/TreeItemLayout.test.tsx    |  29 +++-
 .../TreeItemLayout/TreeItemLayout.types.ts    |  30 +++-
 .../TreeItemLayout/renderTreeItemLayout.tsx   |   4 +-
 .../TreeItemLayout/useTreeItemLayout.ts       |  50 ------
 .../TreeItemLayout/useTreeItemLayout.tsx      |  91 ++++++++++
 .../useTreeItemLayoutStyles.styles.ts         |   4 +-
 .../TreeItemPersonaLayout.test.tsx            |  29 +++-
 .../TreeItemPersonaLayout.types.ts            |   9 +-
 .../renderTreeItemPersonaLayout.tsx           |   5 +-
 .../useTreeItemPersonaLayout.ts               |   6 +
 .../useTreeItemPersonaLayoutStyles.styles.ts  |   9 +-
 .../react-tree/src/contexts/index.ts          |   1 -
 .../src/contexts/treeItemContext.ts           |  10 ++
 .../src/contexts/treeItemSlotsContext.ts      |  23 ---
 .../B_TreeItem/TreeItemActions.stories.tsx    |  44 ++---
 .../B_TreeItem/TreeItemExpandIcon.stories.tsx |  30 ++--
 .../C_Layouts/LayoutsDefault.stories.tsx      | 159 +++++++++---------
 .../C_Layouts/TreeItemLayout.stories.tsx      |  20 +--
 .../C_Layouts/TreeItemLayoutAside.stories.tsx |  52 +++---
 .../TreeItemPersonaLayout.stories.tsx         |  44 ++---
 ...reeItemPersonaLayoutReadUnread.stories.tsx |   7 +-
 .../D_flatTree/TreeItemAddRemove.stories.tsx  |  30 ++--
 .../D_flatTree/TreeLazyLoading.stories.tsx    |   4 +-
 32 files changed, 461 insertions(+), 470 deletions(-)
 create mode 100644 change/@fluentui-react-tree-977289b7-1256-4054-948b-aa984f37e4c2.json
 delete mode 100644 packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts
 create mode 100644 packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
 delete mode 100644 packages/react-components/react-tree/src/contexts/treeItemSlotsContext.ts

diff --git a/change/@fluentui-react-tree-977289b7-1256-4054-948b-aa984f37e4c2.json b/change/@fluentui-react-tree-977289b7-1256-4054-948b-aa984f37e4c2.json
new file mode 100644
index 0000000000000..45ec9c69ada1f
--- /dev/null
+++ b/change/@fluentui-react-tree-977289b7-1256-4054-948b-aa984f37e4c2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: moves slots from TreeItem to TreeItemLayout",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md
index 6e0afba6c4f9e..5ad74baae6fc0 100644
--- a/packages/react-components/react-tree/etc/react-tree.api.md
+++ b/packages/react-components/react-tree/etc/react-tree.api.md
@@ -13,7 +13,7 @@ import type { ArrowUp } from '@fluentui/keyboard-keys';
 import type { AvatarContextValue } from '@fluentui/react-avatar';
 import type { AvatarSize } from '@fluentui/react-avatar';
 import { ButtonContextValue } from '@fluentui/react-button';
-import type { Checkbox } from '@fluentui/react-checkbox';
+import { Checkbox } from '@fluentui/react-checkbox';
 import { CheckboxProps } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
@@ -26,7 +26,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { Home } from '@fluentui/keyboard-keys';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
-import type { Radio } from '@fluentui/react-radio';
+import { Radio } from '@fluentui/react-radio';
 import { RadioProps } from '@fluentui/react-radio';
 import * as React_2 from 'react';
 import { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
@@ -138,10 +138,15 @@ export type TreeContextValues = {
 export const TreeItem: ForwardRefComponent<TreeItemProps>;
 
 // @public (undocumented)
-export const treeItemClassNames: SlotClassNames<TreeItemInternalSlot>;
+export const treeItemClassNames: SlotClassNames<TreeItemSlots>;
 
 // @public (undocumented)
 export type TreeItemContextValue = {
+    isActionsVisible: boolean;
+    isAsideVisible: boolean;
+    selectionRef: React_2.Ref<HTMLInputElement>;
+    actionsRef: React_2.Ref<HTMLDivElement>;
+    expandIconRef: React_2.Ref<HTMLDivElement>;
     layoutRef: React_2.Ref<HTMLDivElement>;
     subtreeRef: React_2.Ref<HTMLDivElement>;
     itemType: TreeItemType;
@@ -153,7 +158,7 @@ export type TreeItemContextValue = {
 export const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
 
 // @public (undocumented)
-export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutInternalSlots>;
+export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;
 
 // @public
 export type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
@@ -164,10 +169,16 @@ export type TreeItemLayoutSlots = {
     content: NonNullable<Slot<'div'>>;
     iconBefore?: Slot<'div'>;
     iconAfter?: Slot<'div'>;
+    expandIcon?: Slot<'div'>;
+    aside?: Slot<'div'>;
+    actions?: Slot<ExtractSlotProps<Slot<'div'> & {
+        visible?: boolean;
+    }>>;
+    selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
 };
 
 // @public
-export type TreeItemLayoutState = ComponentState<TreeItemLayoutInternalSlots> & {
+export type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
     buttonContextValue: ButtonContextValue;
 };
 
@@ -178,13 +189,13 @@ export const treeItemLevelToken: "--fluent-TreeItem--level";
 export const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps>;
 
 // @public (undocumented)
-export const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutInternalSlots>;
+export const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots>;
 
 // @public
 export type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
 
 // @public (undocumented)
-export type TreeItemPersonaLayoutSlots = {
+export type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {
     root: NonNullable<Slot<'div'>>;
     media: NonNullable<Slot<'div'>>;
     content: NonNullable<Slot<'div'>>;
@@ -192,7 +203,7 @@ export type TreeItemPersonaLayoutSlots = {
 };
 
 // @public
-export type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutInternalSlots> & {
+export type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
     avatarSize: AvatarSize;
     buttonContextValue: ButtonContextValue;
 };
@@ -211,17 +222,10 @@ export type TreeItemSlots = {
     root: Slot<ExtractSlotProps<Slot<'div'> & {
         style?: TreeItemCSSProperties;
     }>>;
-    expandIcon?: Slot<'div'>;
-    aside?: Slot<'div'>;
-    actions?: Slot<ExtractSlotProps<Slot<'div'> & {
-        visible?: boolean;
-    }>>;
-    checkboxIndicator?: Slot<typeof Checkbox>;
-    radioIndicator?: Slot<typeof Radio>;
 };
 
 // @public
-export type TreeItemState = ComponentState<TreeItemInternalSlot> & TreeItemContextValue & TreeItemSlotsContextValue & {
+export type TreeItemState = ComponentState<TreeItemSlots> & TreeItemContextValue & {
     level: number;
     itemType: TreeItemType;
 };
diff --git a/packages/react-components/react-tree/src/components/FlatTree/FlatTree.cy.tsx b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.cy.tsx
index f699853b4b0d4..22fc40085f6fd 100644
--- a/packages/react-components/react-tree/src/components/FlatTree/FlatTree.cy.tsx
+++ b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.cy.tsx
@@ -126,8 +126,8 @@ describe(TreeTest.displayName!, () => {
     it('should not expand/collapse item on actions click', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action!</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action!</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>
@@ -169,8 +169,8 @@ describe(TreeTest.displayName!, () => {
     it('should focus on actions when pressing tab key', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>
@@ -188,8 +188,8 @@ describe(TreeTest.displayName!, () => {
     it('should not expand/collapse item on actions Enter/Space key', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>
diff --git a/packages/react-components/react-tree/src/components/Tree/Tree.cy.tsx b/packages/react-components/react-tree/src/components/Tree/Tree.cy.tsx
index 97f66a59f4421..cbd560b1de6b1 100644
--- a/packages/react-components/react-tree/src/components/Tree/Tree.cy.tsx
+++ b/packages/react-components/react-tree/src/components/Tree/Tree.cy.tsx
@@ -112,8 +112,8 @@ describe(TreeTest.displayName!, () => {
     it('should not expand/collapse item on actions click', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action!</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action!</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>
@@ -155,8 +155,8 @@ describe(TreeTest.displayName!, () => {
     it('should focus on actions when pressing tab key', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>
@@ -174,8 +174,8 @@ describe(TreeTest.displayName!, () => {
     it('should not expand/collapse item on actions Enter/Space key', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>
diff --git a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts
index ab68cc4000f9c..08a3950b03add 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts
@@ -2,9 +2,6 @@ import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fl
 import type { TreeItemContextValue } from '../../contexts';
 import { treeItemLevelToken } from '../../utils/tokens';
 import * as React from 'react';
-import { TreeItemSlotsContextValue } from '../../contexts/treeItemSlotsContext';
-import type { Checkbox } from '@fluentui/react-checkbox';
-import type { Radio } from '@fluentui/react-radio';
 
 export type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };
 
@@ -12,43 +9,12 @@ export type TreeItemType = 'leaf' | 'branch';
 
 export type TreeItemSlots = {
   root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;
-  /**
-   * Expand icon slot,
-   * by default renders a chevron icon to indicate opening and closing
-   */
-  expandIcon?: Slot<'div'>;
-  aside?: Slot<'div'>;
-  /**
-   * actionable elements are normally buttons, menus, or other focusable elements.
-   * Those elements are only visibly available if the given tree item is currently active.
-   */
-  actions?: Slot<
-    ExtractSlotProps<
-      Slot<'div'> & {
-        /**
-         * Forces visibility of the aside/action content
-         */
-        visible?: boolean;
-      }
-    >
-  >;
-  /**
-   * Selection indicator if selection type is checkbox
-   */
-  checkboxIndicator?: Slot<typeof Checkbox>;
-  /**
-   * Selection indicator if selection type is radio
-   */
-  radioIndicator?: Slot<typeof Radio>;
 };
 
-export type TreeItemInternalSlot = Pick<TreeItemSlots, 'root'>;
-
 export type TreeItemValue = string | number;
 
 export type TreeItemContextValues = {
   treeItem: TreeItemContextValue;
-  treeItemSlots: TreeItemSlotsContextValue;
 };
 
 /**
@@ -62,9 +28,8 @@ export type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
 /**
  * State used in rendering TreeItem
  */
-export type TreeItemState = ComponentState<TreeItemInternalSlot> &
-  TreeItemContextValue &
-  TreeItemSlotsContextValue & {
+export type TreeItemState = ComponentState<TreeItemSlots> &
+  TreeItemContextValue & {
     level: number;
     itemType: TreeItemType;
   };
diff --git a/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx
index 9d5a8ead2d814..62f6ee4d13669 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx
@@ -3,20 +3,18 @@
 
 import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
-import type { TreeItemState, TreeItemContextValues, TreeItemInternalSlot } from './TreeItem.types';
-import { TreeItemProvider, TreeItemSlotsProvider } from '../../contexts';
+import type { TreeItemState, TreeItemContextValues, TreeItemSlots } from './TreeItem.types';
+import { TreeItemProvider } from '../../contexts';
 
 /**
  * Render the final JSX of TreeItem
  */
 export const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {
-  const { slots, slotProps } = getSlotsNext<TreeItemInternalSlot>(state);
+  const { slots, slotProps } = getSlotsNext<TreeItemSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>
-      <TreeItemProvider value={contextValues.treeItem}>
-        <TreeItemSlotsProvider value={contextValues.treeItemSlots}>{slotProps.root.children}</TreeItemSlotsProvider>
-      </TreeItemProvider>
+      <TreeItemProvider value={contextValues.treeItem}>{slotProps.root.children}</TreeItemProvider>
     </slots.root>
   );
 };
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
index b7955d530cc85..8eff75465b65a 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
@@ -1,18 +1,10 @@
 import * as React from 'react';
-import {
-  getNativeElementProps,
-  isResolvedShorthand,
-  resolveShorthand,
-  useControllableState,
-  useId,
-  useMergedRefs,
-} from '@fluentui/react-utilities';
+import { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useEventCallback } from '@fluentui/react-utilities';
 import { elementContains } from '@fluentui/react-portal';
-import type { TreeItemProps, TreeItemSlots, TreeItemState } from './TreeItem.types';
+import type { TreeItemProps, TreeItemState } from './TreeItem.types';
 import { useTreeContext_unstable } from '../../contexts/index';
 import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
-import { TreeItemChevron } from '../TreeItemChevron';
 import { Space } from '@fluentui/keyboard-keys';
 import { treeDataTypes } from '../../utils/tokens';
 
@@ -28,33 +20,15 @@ import { treeDataTypes } from '../../utils/tokens';
 export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {
   const contextLevel = useTreeContext_unstable(ctx => ctx.level);
 
+  // note, if the value is not externally provided,
+  // then selection and expansion will not work properly
   const value = useId('fuiTreeItemValue-', props.value?.toString());
 
-  const {
-    onClick,
-    onKeyDown,
-    as = 'div',
-    itemType = 'leaf',
-    'aria-level': level = contextLevel,
-    expandIcon,
-    aside,
-    ...rest
-  } = props;
+  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
 
   const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);
 
-  const [isActionsVisibleExternal, actions]: [boolean | undefined, TreeItemSlots['actions']] = isResolvedShorthand(
-    props.actions,
-  )
-    ? // .visible prop should not be propagated to the DOM
-      [props.actions.visible, { ...props.actions, visible: undefined }]
-    : [undefined, props.actions];
-
-  const [isActionsVisible, setActionsVisible] = useControllableState({
-    state: isActionsVisibleExternal,
-    defaultState: false,
-    initialState: false,
-  });
+  const [isActionsVisible, setActionsVisible] = React.useState(false);
   const [isAsideVisible, setAsideVisible] = React.useState(true);
 
   const handleActionsRef = (actionsElement: HTMLDivElement | null) => {
@@ -71,13 +45,6 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
   const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);
   const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);
 
-  const actionsRefs = useMergedRefs(
-    isResolvedShorthand(actions) ? actions.ref : undefined,
-    handleActionsRef,
-    actionsRef,
-  );
-  const expandIconRefs = useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef);
-
   const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
     onClick?.(event);
     if (event.isDefaultPrevented()) {
@@ -170,43 +137,21 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
   });
 
   const isBranch = itemType === 'branch';
-
-  const actionsSlot = React.useMemo(
-    () => (isActionsVisible ? resolveShorthand(actions) : undefined),
-    [actions, isActionsVisible],
-  );
-  if (actionsSlot) {
-    actionsSlot.ref = actionsRefs;
-  }
-  const asideSlot = React.useMemo(
-    () => (isAsideVisible ? resolveShorthand(aside) : undefined),
-    [aside, isAsideVisible],
-  );
-  const expandIconSlot = React.useMemo(
-    () =>
-      resolveShorthand(expandIcon, {
-        required: isBranch,
-        defaultProps: {
-          children: <TreeItemChevron />,
-          'aria-hidden': true,
-        },
-      }),
-    [expandIcon, isBranch],
-  );
-  if (expandIconSlot) {
-    expandIconSlot.ref = expandIconRefs;
-  }
-
   return {
     value,
     open,
     subtreeRef,
     layoutRef,
+    selectionRef,
+    expandIconRef,
+    actionsRef: useMergedRefs(handleActionsRef, actionsRef),
     itemType,
     level,
     components: {
       root: 'div',
     },
+    isAsideVisible,
+    isActionsVisible,
     root: getNativeElementProps(as, {
       tabIndex: -1,
       ...rest,
@@ -225,21 +170,5 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
       onBlur: handleActionsInvisible,
       onChange: handleChange,
     }),
-    actions: actionsSlot,
-    aside: asideSlot,
-    expandIcon: expandIconSlot,
-    selector:
-      selectionMode === 'none'
-        ? undefined
-        : resolveShorthand(selectionMode === 'multiselect' ? props.checkboxIndicator : props.radioIndicator, {
-            required: true,
-            defaultProps: {
-              checked,
-              tabIndex: -1,
-              'aria-hidden': true,
-              ref: selectionRef,
-              // onChange: handleChange,
-            },
-          }),
   };
 }
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts
index 95e9dca5311ee..4bb493b9ed74d 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts
@@ -1,9 +1,19 @@
-import * as React from 'react';
 import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';
-import type { TreeItemContextValue, TreeItemSlotsContextValue } from '../../contexts';
+import type { TreeItemContextValue } from '../../contexts';
 
 export function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {
-  const { value, itemType, layoutRef, subtreeRef, open, actions, aside, expandIcon, selector } = state;
+  const {
+    value,
+    itemType,
+    layoutRef,
+    subtreeRef,
+    open,
+    expandIconRef,
+    actionsRef,
+    isActionsVisible,
+    isAsideVisible,
+    selectionRef,
+  } = state;
 
   /**
    * This context is created with "@fluentui/react-context-selector",
@@ -15,12 +25,12 @@ export function useTreeItemContextValues_unstable(state: TreeItemState): TreeIte
     layoutRef,
     subtreeRef,
     open,
+    selectionRef,
+    isActionsVisible,
+    isAsideVisible,
+    actionsRef,
+    expandIconRef,
   };
 
-  const treeItemSlots: TreeItemSlotsContextValue = React.useMemo(
-    () => ({ actions, aside, expandIcon, selector }),
-    [actions, aside, expandIcon, selector],
-  );
-
-  return { treeItem, treeItemSlots };
+  return { treeItem };
 }
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts
index 69aef7676ad65..42c8272f7cc39 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts
@@ -1,11 +1,11 @@
 import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';
-import type { TreeItemCSSProperties, TreeItemInternalSlot, TreeItemState } from './TreeItem.types';
+import type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { treeItemLevelToken } from '../../utils/tokens';
 
-export const treeItemClassNames: SlotClassNames<TreeItemInternalSlot> = {
+export const treeItemClassNames: SlotClassNames<TreeItemSlots> = {
   root: 'fui-TreeItem',
 };
 
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.test.tsx b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.test.tsx
index be6970d219678..6aaf890606d6b 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.test.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.test.tsx
@@ -2,22 +2,39 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import { TreeItemLayout } from './TreeItemLayout';
 import { isConformant } from '../../testing/isConformant';
-import { TreeItemSlotsProvider } from '../../contexts/treeItemSlotsContext';
+import { TreeItemProvider } from '../../contexts';
 
-const Wrap: React.FC = props => (
-  <TreeItemSlotsProvider value={{ actions: { visible: true, children: '' }, aside: '', expandIcon: '', selector: {} }}>
-    {props.children}
-  </TreeItemSlotsProvider>
+const Wrapper: React.FC = ({ children }) => (
+  <TreeItemProvider
+    value={{
+      value: '',
+      selectionRef: React.createRef(),
+      layoutRef: React.createRef(),
+      subtreeRef: React.createRef(),
+      actionsRef: React.createRef(),
+      expandIconRef: React.createRef(),
+      isActionsVisible: true,
+      isAsideVisible: true,
+      itemType: 'leaf',
+      open: false,
+    }}
+  >
+    {children}
+  </TreeItemProvider>
 );
 
 describe('TreeItemLayout', () => {
   isConformant({
     Component: TreeItemLayout,
-    renderOptions: { wrapper: Wrap },
+    renderOptions: { wrapper: Wrapper },
     displayName: 'TreeItemLayout',
     requiredProps: {
       iconAfter: 'iconAfter',
       iconBefore: 'iconBefore',
+      expandIcon: 'expandIcon',
+      actions: 'actions',
+      aside: 'aside',
+      selector: {},
     },
   });
 
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts
index 1f60e97abe7a6..8990857b46cc7 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts
@@ -1,6 +1,7 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';
 import { ButtonContextValue } from '@fluentui/react-button';
-import { TreeItemSlotsContextValue } from '../../contexts/treeItemSlotsContext';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { Radio } from '@fluentui/react-radio';
 
 export type TreeItemLayoutSlots = {
   root: Slot<'div'>;
@@ -16,10 +17,29 @@ export type TreeItemLayoutSlots = {
    * Icon slot that renders right after main content
    */
   iconAfter?: Slot<'div'>;
+  /**
+   * Expand icon slot,
+   * by default renders a chevron icon to indicate opening and closing
+   */
+  expandIcon?: Slot<'div'>;
+  aside?: Slot<'div'>;
+  /**
+   * actionable elements are normally buttons, menus, or other focusable elements.
+   * Those elements are only visibly available if the given tree item is currently active.
+   */
+  actions?: Slot<
+    ExtractSlotProps<
+      Slot<'div'> & {
+        /**
+         * Forces visibility of the aside/action content
+         */
+        visible?: boolean;
+      }
+    >
+  >;
+  selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
 };
 
-export type TreeItemLayoutInternalSlots = TreeItemLayoutSlots & TreeItemSlotsContextValue;
-
 /**
  * TreeItemLayout Props
  */
@@ -28,6 +48,6 @@ export type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
 /**
  * State used in rendering TreeItemLayout
  */
-export type TreeItemLayoutState = ComponentState<TreeItemLayoutInternalSlots> & {
+export type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
   buttonContextValue: ButtonContextValue;
 };
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/renderTreeItemLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemLayout/renderTreeItemLayout.tsx
index 86b6793d97ace..9f7250dd74d0e 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/renderTreeItemLayout.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/renderTreeItemLayout.tsx
@@ -3,14 +3,14 @@
 
 import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
-import type { TreeItemLayoutState, TreeItemLayoutInternalSlots } from './TreeItemLayout.types';
+import type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';
 import { ButtonContextProvider } from '@fluentui/react-button';
 
 /**
  * Render the final JSX of TreeItemLayout
  */
 export const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {
-  const { slots, slotProps } = getSlotsNext<TreeItemLayoutInternalSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts
deleted file mode 100644
index 8700d9adcdd0c..0000000000000
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
-import { useTreeItemContext_unstable, useTreeContext_unstable, useTreeItemSlotsContext_unstable } from '../../contexts';
-import type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';
-import { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';
-import { Radio, RadioProps } from '@fluentui/react-radio';
-
-/**
- * Create the state required to render TreeItemLayout.
- *
- * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,
- * before being passed to renderTreeItemLayout_unstable.
- *
- * @param props - props from this instance of TreeItemLayout
- * @param ref - reference to root HTMLElement of TreeItemLayout
- */
-export const useTreeItemLayout_unstable = (
-  props: TreeItemLayoutProps,
-  ref: React.Ref<HTMLElement>,
-): TreeItemLayoutState => {
-  const { content, iconAfter, iconBefore, as = 'span' } = props;
-
-  const { actions, aside, expandIcon, selector } = useTreeItemSlotsContext_unstable();
-
-  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);
-  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);
-
-  return {
-    components: {
-      root: 'div',
-      expandIcon: 'div',
-      iconBefore: 'div',
-      content: 'div',
-      iconAfter: 'div',
-      actions: 'div',
-      aside: 'div',
-      // Casting here to a union between checkbox and radio
-      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,
-    },
-    buttonContextValue: { size: 'small' },
-    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),
-    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),
-    content: resolveShorthand(content, { required: true }),
-    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),
-    aside: resolveShorthand(aside),
-    actions: resolveShorthand(actions),
-    expandIcon: resolveShorthand(expandIcon),
-    selector: resolveShorthand(selector),
-  };
-};
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
new file mode 100644
index 0000000000000..8e195e14ca2fe
--- /dev/null
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';
+import type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';
+import { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';
+import { Radio, RadioProps } from '@fluentui/react-radio';
+import { TreeItemChevron } from '../TreeItemChevron';
+
+/**
+ * Create the state required to render TreeItemLayout.
+ *
+ * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,
+ * before being passed to renderTreeItemLayout_unstable.
+ *
+ * @param props - props from this instance of TreeItemLayout
+ * @param ref - reference to root HTMLElement of TreeItemLayout
+ */
+export const useTreeItemLayout_unstable = (
+  props: TreeItemLayoutProps,
+  ref: React.Ref<HTMLElement>,
+): TreeItemLayoutState => {
+  const { content, iconAfter, iconBefore, as = 'span' } = props;
+
+  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);
+  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);
+
+  const [isActionsVisibleExternal, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =
+    isResolvedShorthand(props.actions)
+      ? // .visible prop should not be propagated to the DOM
+        [props.actions.visible, { ...props.actions, visible: undefined }]
+      : [undefined, props.actions];
+
+  const isActionsVisible = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;
+  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);
+  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);
+  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);
+  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);
+  const value = useTreeItemContext_unstable(ctx => ctx.value);
+  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);
+  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');
+
+  const expandIcon = resolveShorthand(props.expandIcon, {
+    required: isBranch,
+    defaultProps: {
+      children: <TreeItemChevron />,
+      'aria-hidden': true,
+    },
+  });
+
+  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);
+  if (expandIcon) {
+    expandIcon.ref = expandIconRefs;
+  }
+
+  const actions = isActionsVisible ? resolveShorthand(actionsShorthand) : undefined;
+
+  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);
+  if (actions) {
+    actions.ref = actionsRefs;
+  }
+
+  return {
+    components: {
+      root: 'div',
+      expandIcon: 'div',
+      iconBefore: 'div',
+      content: 'div',
+      iconAfter: 'div',
+      actions: 'div',
+      aside: 'div',
+      // Casting here to a union between checkbox and radio
+      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,
+    },
+    buttonContextValue: { size: 'small' },
+    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),
+    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),
+    content: resolveShorthand(content, { required: true }),
+    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),
+    aside: isAsideVisible ? resolveShorthand(props.aside) : undefined,
+    actions,
+    expandIcon,
+    selector: resolveShorthand(props.selector, {
+      defaultProps: {
+        checked,
+        tabIndex: -1,
+        'aria-hidden': true,
+        ref: selectionRef,
+      },
+    }),
+  };
+};
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts
index 782e9c461c0a0..f945fa5ced5ce 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts
@@ -1,12 +1,12 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { TreeItemLayoutInternalSlots, TreeItemLayoutState } from './TreeItemLayout.types';
+import type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useTreeContext_unstable } from '../../contexts/treeContext';
 import { treeItemLevelToken } from '../../utils/tokens';
 import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
 
-export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutInternalSlots> = {
+export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {
   root: 'fui-TreeItemLayout',
   iconBefore: 'fui-TreeItemLayout__iconBefore',
   content: 'fui-TreeItemLayout__content',
diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.test.tsx b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.test.tsx
index 05070f0711347..43cfb06e103a1 100644
--- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.test.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.test.tsx
@@ -2,21 +2,38 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import { TreeItemPersonaLayout } from './TreeItemPersonaLayout';
 import { isConformant } from '../../testing/isConformant';
-import { TreeItemSlotsProvider } from '../../contexts/treeItemSlotsContext';
+import { TreeItemProvider } from '../../contexts';
 
-const Wrap: React.FC = props => (
-  <TreeItemSlotsProvider value={{ actions: { visible: true, children: '' }, aside: '', expandIcon: '' }}>
-    {props.children}
-  </TreeItemSlotsProvider>
+const Wrapper: React.FC = ({ children }) => (
+  <TreeItemProvider
+    value={{
+      value: '',
+      selectionRef: React.createRef(),
+      layoutRef: React.createRef(),
+      subtreeRef: React.createRef(),
+      actionsRef: React.createRef(),
+      expandIconRef: React.createRef(),
+      isActionsVisible: true,
+      isAsideVisible: true,
+      itemType: 'leaf',
+      open: false,
+    }}
+  >
+    {children}
+  </TreeItemProvider>
 );
 
 describe('TreeItemPersonaLayout', () => {
   isConformant({
     Component: TreeItemPersonaLayout,
-    renderOptions: { wrapper: Wrap },
+    renderOptions: { wrapper: Wrapper },
     displayName: 'TreeItemPersonaLayout',
     requiredProps: {
       description: 'description',
+      expandIcon: 'expandIcon',
+      actions: 'actions',
+      aside: 'aside',
+      selector: {},
     },
   });
 
diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts
index 86e841c9368a7..c27558ebd226f 100644
--- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts
@@ -1,13 +1,13 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';
 import { ButtonContextValue } from '@fluentui/react-button';
-import { TreeItemSlots } from '../TreeItem/TreeItem.types';
+import { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';
 
 export type TreeItemPersonaLayoutContextValues = {
   avatar: AvatarContextValue;
 };
 
-export type TreeItemPersonaLayoutSlots = {
+export type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {
   root: NonNullable<Slot<'div'>>;
   /**
    * Avatar to display.
@@ -23,9 +23,6 @@ export type TreeItemPersonaLayoutSlots = {
   description?: Slot<'div'>;
 };
 
-export type TreeItemPersonaLayoutInternalSlots = TreeItemPersonaLayoutSlots &
-  Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;
-
 /**
  * TreeItemPersonaLayout Props
  */
@@ -34,7 +31,7 @@ export type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaL
 /**
  * State used in rendering TreeItemPersonaLayout
  */
-export type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutInternalSlots> & {
+export type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
   avatarSize: AvatarSize;
   buttonContextValue: ButtonContextValue;
 };
diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx
index d46e8f9d0cd5f..ec9c0dd338aaa 100644
--- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx
@@ -6,7 +6,7 @@ import { getSlotsNext } from '@fluentui/react-utilities';
 import type {
   TreeItemPersonaLayoutState,
   TreeItemPersonaLayoutContextValues,
-  TreeItemPersonaLayoutInternalSlots,
+  TreeItemPersonaLayoutSlots,
 } from './TreeItemPersonaLayout.types';
 import { AvatarContextProvider } from '@fluentui/react-avatar';
 import { ButtonContextProvider } from '@fluentui/react-button';
@@ -18,11 +18,12 @@ export const renderTreeItemPersonaLayout_unstable = (
   state: TreeItemPersonaLayoutState,
   contextValues: TreeItemPersonaLayoutContextValues,
 ) => {
-  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutInternalSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>
       {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}
+      {slots.selector && <slots.selector {...slotProps.selector} />}
       <AvatarContextProvider value={contextValues.avatar}>
         <slots.media {...slotProps.media} />
       </AvatarContextProvider>
diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts
index ef222db21e458..fb61825b426e1 100644
--- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts
@@ -4,6 +4,8 @@ import { resolveShorthand } from '@fluentui/react-utilities';
 import { useTreeContext_unstable } from '../../contexts';
 import { treeAvatarSize } from '../../utils/tokens';
 import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';
+import { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';
+import { Radio, RadioProps } from '@fluentui/react-radio';
 
 /**
  * Create the state required to render TreeItemPersonaLayout.
@@ -30,6 +32,8 @@ export const useTreeItemPersonaLayout_unstable = (
   );
 
   const size = useTreeContext_unstable(ctx => ctx.size);
+  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);
+
   return {
     ...treeItemLayoutState,
     components: {
@@ -40,6 +44,8 @@ export const useTreeItemPersonaLayout_unstable = (
       media: 'div',
       aside: 'div',
       actions: 'div',
+      // Casting here to a union between checkbox and radio
+      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,
     },
     avatarSize: treeAvatarSize[size],
     content: resolveShorthand(content, { required: true, defaultProps: { children } }),
diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts
index 236257fdb8d8e..c62e8f1db4cd0 100644
--- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts
@@ -1,11 +1,11 @@
-import type { TreeItemPersonaLayoutInternalSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';
+import type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { treeItemLevelToken } from '../../utils/tokens';
 import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
 
-export const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutInternalSlots> = {
+export const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {
   root: 'fui-TreeItemPersonaLayout',
   media: 'fui-TreeItemPersonaLayout__media',
   description: 'fui-TreeItemPersonaLayout__description',
@@ -13,6 +13,7 @@ export const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayo
   expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
   aside: 'fui-TreeItemPersonaLayout__aside',
   actions: 'fui-TreeItemPersonaLayout__actions',
+  selector: 'fui-TreeItemPersonaLayout__selector',
 };
 
 /**
@@ -198,5 +199,9 @@ export const useTreeItemPersonaLayoutStyles_unstable = (
     );
   }
 
+  if (state.selector) {
+    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);
+  }
+
   return state;
 };
diff --git a/packages/react-components/react-tree/src/contexts/index.ts b/packages/react-components/react-tree/src/contexts/index.ts
index 77a28ce91df42..7f886da3787ce 100644
--- a/packages/react-components/react-tree/src/contexts/index.ts
+++ b/packages/react-components/react-tree/src/contexts/index.ts
@@ -1,3 +1,2 @@
 export * from './treeContext';
 export * from './treeItemContext';
-export * from './treeItemSlotsContext';
diff --git a/packages/react-components/react-tree/src/contexts/treeItemContext.ts b/packages/react-components/react-tree/src/contexts/treeItemContext.ts
index 354d1057645dc..f1ca331d24d7e 100644
--- a/packages/react-components/react-tree/src/contexts/treeItemContext.ts
+++ b/packages/react-components/react-tree/src/contexts/treeItemContext.ts
@@ -3,6 +3,11 @@ import { Context, ContextSelector, createContext, useContextSelector } from '@fl
 import type { TreeItemType, TreeItemValue } from '../TreeItem';
 
 export type TreeItemContextValue = {
+  isActionsVisible: boolean;
+  isAsideVisible: boolean;
+  selectionRef: React.Ref<HTMLInputElement>;
+  actionsRef: React.Ref<HTMLDivElement>;
+  expandIconRef: React.Ref<HTMLDivElement>;
   layoutRef: React.Ref<HTMLDivElement>;
   subtreeRef: React.Ref<HTMLDivElement>;
   itemType: TreeItemType;
@@ -12,8 +17,13 @@ export type TreeItemContextValue = {
 
 const defaultContextValue: TreeItemContextValue = {
   value: '',
+  selectionRef: React.createRef(),
   layoutRef: React.createRef(),
   subtreeRef: React.createRef(),
+  actionsRef: React.createRef(),
+  expandIconRef: React.createRef(),
+  isActionsVisible: false,
+  isAsideVisible: false,
   itemType: 'leaf',
   open: false,
 };
diff --git a/packages/react-components/react-tree/src/contexts/treeItemSlotsContext.ts b/packages/react-components/react-tree/src/contexts/treeItemSlotsContext.ts
deleted file mode 100644
index aba0fc0613fef..0000000000000
--- a/packages/react-components/react-tree/src/contexts/treeItemSlotsContext.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import type { TreeItemSlots } from '../TreeItem';
-import type { Slot } from '@fluentui/react-utilities';
-import type { Checkbox } from '@fluentui/react-checkbox';
-import type { Radio } from '@fluentui/react-radio';
-
-export type TreeItemSlotsContextValue = Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'> & {
-  selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
-};
-
-const defaultContextValue: TreeItemSlotsContextValue = {
-  actions: undefined,
-  aside: undefined,
-  expandIcon: undefined,
-};
-
-export const TreeItemSlotsContext: React.Context<TreeItemSlotsContextValue | undefined> = React.createContext<
-  TreeItemSlotsContextValue | undefined
->(undefined);
-
-export const { Provider: TreeItemSlotsProvider } = TreeItemSlotsContext;
-export const useTreeItemSlotsContext_unstable = (): TreeItemSlotsContextValue =>
-  React.useContext(TreeItemSlotsContext) || defaultContextValue;
diff --git a/packages/react-components/react-tree/stories/B_TreeItem/TreeItemActions.stories.tsx b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemActions.stories.tsx
index 9330443fd66ba..b1125fdfe7ae7 100644
--- a/packages/react-components/react-tree/stories/B_TreeItem/TreeItemActions.stories.tsx
+++ b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemActions.stories.tsx
@@ -28,43 +28,43 @@ const ActionsExample = () => {
 
 export const Actions = () => (
   <Tree aria-label="Tree">
-    <TreeItem actions={<ActionsExample />} itemType="branch">
-      <TreeItemLayout>level 1, item 1</TreeItemLayout>
+    <TreeItem itemType="branch">
+      <TreeItemLayout actions={<ActionsExample />}>level 1, item 1</TreeItemLayout>
       <Tree>
-        <TreeItem actions={<ActionsExample />} itemType="leaf">
-          <TreeItemLayout>level 2, item 1</TreeItemLayout>
+        <TreeItem itemType="leaf">
+          <TreeItemLayout actions={<ActionsExample />}>level 2, item 1</TreeItemLayout>
         </TreeItem>
-        <TreeItem actions={<ActionsExample />} itemType="leaf">
-          <TreeItemLayout>level 2, item 2</TreeItemLayout>
+        <TreeItem itemType="leaf">
+          <TreeItemLayout actions={<ActionsExample />}>level 2, item 2</TreeItemLayout>
         </TreeItem>
-        <TreeItem actions={<ActionsExample />} itemType="leaf">
-          <TreeItemLayout>level 2, item 3</TreeItemLayout>
+        <TreeItem itemType="leaf">
+          <TreeItemLayout actions={<ActionsExample />}>level 2, item 3</TreeItemLayout>
         </TreeItem>
       </Tree>
     </TreeItem>
-    <TreeItem actions={<ActionsExample />} itemType="branch">
-      <TreeItemLayout>level 1, item 2</TreeItemLayout>
+    <TreeItem itemType="branch">
+      <TreeItemLayout actions={<ActionsExample />}>level 1, item 2</TreeItemLayout>
       <Tree>
-        <TreeItem actions={<ActionsExample />} itemType="branch">
-          <TreeItemLayout>level 2, item 1</TreeItemLayout>
+        <TreeItem itemType="branch">
+          <TreeItemLayout actions={<ActionsExample />}>level 2, item 1</TreeItemLayout>
           <Tree>
-            <TreeItem actions={<ActionsExample />} itemType="leaf">
-              <TreeItemLayout>level 3, item 1</TreeItemLayout>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout actions={<ActionsExample />}>level 3, item 1</TreeItemLayout>
             </TreeItem>
           </Tree>
         </TreeItem>
 
-        <TreeItem actions={<ActionsExample />} itemType="branch">
-          <TreeItemLayout>level 1, item 1</TreeItemLayout>
+        <TreeItem itemType="branch">
+          <TreeItemLayout actions={<ActionsExample />}>level 1, item 1</TreeItemLayout>
           <Tree>
-            <TreeItem actions={<ActionsExample />} itemType="leaf">
-              <TreeItemLayout>level 2, item 1</TreeItemLayout>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout actions={<ActionsExample />}>level 2, item 1</TreeItemLayout>
             </TreeItem>
-            <TreeItem actions={<ActionsExample />} itemType="leaf">
-              <TreeItemLayout>level 2, item 2</TreeItemLayout>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout actions={<ActionsExample />}>level 2, item 2</TreeItemLayout>
             </TreeItem>
-            <TreeItem actions={<ActionsExample />} itemType="leaf">
-              <TreeItemLayout>level 2, item 3</TreeItemLayout>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout actions={<ActionsExample />}>level 2, item 3</TreeItemLayout>
             </TreeItem>
           </Tree>
         </TreeItem>
diff --git a/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandIcon.stories.tsx b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandIcon.stories.tsx
index 899676c763323..112bbaab32f83 100644
--- a/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandIcon.stories.tsx
+++ b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandIcon.stories.tsx
@@ -11,12 +11,10 @@ export const ExpandIcon = () => {
   };
   return (
     <Tree aria-label="Tree" openItems={openItems} onOpenChange={handleOpenChange}>
-      <TreeItem
-        expandIcon={openItems.includes('tree-item-1') ? <Add12Regular /> : <Subtract12Regular />}
-        itemType="branch"
-        value="tree-item-1"
-      >
-        <TreeItemLayout>level 1, item 1</TreeItemLayout>
+      <TreeItem itemType="branch" value="tree-item-1">
+        <TreeItemLayout expandIcon={openItems.includes('tree-item-1') ? <Add12Regular /> : <Subtract12Regular />}>
+          level 1, item 1
+        </TreeItemLayout>
         <Tree>
           <TreeItem itemType="leaf">
             <TreeItemLayout>level 2, item 1</TreeItemLayout>
@@ -29,19 +27,15 @@ export const ExpandIcon = () => {
           </TreeItem>
         </Tree>
       </TreeItem>
-      <TreeItem
-        expandIcon={openItems.includes('tree-item-2') ? <Add12Regular /> : <Subtract12Regular />}
-        itemType="branch"
-        value="tree-item-2"
-      >
-        <TreeItemLayout>level 1, item 2</TreeItemLayout>
+      <TreeItem itemType="branch" value="tree-item-2">
+        <TreeItemLayout expandIcon={openItems.includes('tree-item-2') ? <Add12Regular /> : <Subtract12Regular />}>
+          level 1, item 2
+        </TreeItemLayout>
         <Tree>
-          <TreeItem
-            expandIcon={openItems.includes('tree-item-3') ? <Add12Regular /> : <Subtract12Regular />}
-            itemType="branch"
-            value="tree-item-3"
-          >
-            <TreeItemLayout>level 2, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="tree-item-3">
+            <TreeItemLayout expandIcon={openItems.includes('tree-item-3') ? <Add12Regular /> : <Subtract12Regular />}>
+              level 2, item 1
+            </TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf">
                 <TreeItemLayout>level 3, item 1</TreeItemLayout>
diff --git a/packages/react-components/react-tree/stories/C_Layouts/LayoutsDefault.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/LayoutsDefault.stories.tsx
index 330e063d514b4..22e7446da7b05 100644
--- a/packages/react-components/react-tree/stories/C_Layouts/LayoutsDefault.stories.tsx
+++ b/packages/react-components/react-tree/stories/C_Layouts/LayoutsDefault.stories.tsx
@@ -24,38 +24,36 @@ import {
 export const Default = () => {
   return (
     <Tree aria-label="Tree">
-      <TreeItem
-        aside={
-          <>
-            <Important16Regular primaryFill="red" />
-            <CounterBadge count={1} color="danger" size="small" />
-          </>
-        }
-        actions={{
-          visible: true,
-          children: (
+      <TreeItem itemType="branch">
+        <TreeItemLayout
+          aside={
             <>
-              <Button aria-label="Edit" appearance="subtle" icon={<FlagRegular />} />
-              <Menu>
-                <MenuTrigger disableButtonEnhancement>
-                  <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
-                </MenuTrigger>
-
-                <MenuPopover>
-                  <MenuList>
-                    <MenuItem>New </MenuItem>
-                    <MenuItem>New Window</MenuItem>
-                    <MenuItem disabled>Open File</MenuItem>
-                    <MenuItem>Open Folder</MenuItem>
-                  </MenuList>
-                </MenuPopover>
-              </Menu>
+              <Important16Regular primaryFill="red" />
+              <CounterBadge count={1} color="danger" size="small" />
             </>
-          ),
-        }}
-        itemType="branch"
-      >
-        <TreeItemLayout
+          }
+          actions={{
+            visible: true,
+            children: (
+              <>
+                <Button aria-label="Edit" appearance="subtle" icon={<FlagRegular />} />
+                <Menu>
+                  <MenuTrigger disableButtonEnhancement>
+                    <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
+                  </MenuTrigger>
+
+                  <MenuPopover>
+                    <MenuList>
+                      <MenuItem>New </MenuItem>
+                      <MenuItem>New Window</MenuItem>
+                      <MenuItem disabled>Open File</MenuItem>
+                      <MenuItem>Open Folder</MenuItem>
+                    </MenuList>
+                  </MenuPopover>
+                </Menu>
+              </>
+            ),
+          }}
           iconBefore={<CalendarMonthRegular />}
           iconAfter={
             <>
@@ -78,29 +76,27 @@ export const Default = () => {
           </TreeItem>
         </Tree>
       </TreeItem>
-      <TreeItem
-        actions={
-          <>
-            <Button aria-label="Edit" appearance="subtle" icon={<FlagRegular />} />
-            <Menu>
-              <MenuTrigger disableButtonEnhancement>
-                <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
-              </MenuTrigger>
-
-              <MenuPopover>
-                <MenuList>
-                  <MenuItem>New </MenuItem>
-                  <MenuItem>New Window</MenuItem>
-                  <MenuItem disabled>Open File</MenuItem>
-                  <MenuItem>Open Folder</MenuItem>
-                </MenuList>
-              </MenuPopover>
-            </Menu>
-          </>
-        }
-        itemType="branch"
-      >
+      <TreeItem itemType="branch">
         <TreeItemLayout
+          actions={
+            <>
+              <Button aria-label="Edit" appearance="subtle" icon={<FlagRegular />} />
+              <Menu>
+                <MenuTrigger disableButtonEnhancement>
+                  <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
+                </MenuTrigger>
+
+                <MenuPopover>
+                  <MenuList>
+                    <MenuItem>New </MenuItem>
+                    <MenuItem>New Window</MenuItem>
+                    <MenuItem disabled>Open File</MenuItem>
+                    <MenuItem>Open Folder</MenuItem>
+                  </MenuList>
+                </MenuPopover>
+              </Menu>
+            </>
+          }
           iconBefore={<CalendarMonthRegular />}
           iconAfter={
             <>
@@ -122,24 +118,25 @@ export const Default = () => {
           </TreeItem>
         </Tree>
       </TreeItem>
-      <TreeItem
-        aside={{
-          style: { flexDirection: 'column' },
-          children: (
-            <>
-              <Text font="numeric" as="span" style={{ whiteSpace: 'nowrap' }}>
-                00:00 AM
-              </Text>
-              <div style={{ display: 'flex', marginLeft: 'auto', gap: tokens.spacingHorizontalXS }}>
-                <Important16Regular primaryFill="red" />
-                <CounterBadge count={1} color="danger" size="small" />
-              </div>
-            </>
-          ),
-        }}
-        itemType="leaf"
-      >
-        <TreeItemPersonaLayout description="description" media={<Avatar />}>
+      <TreeItem itemType="leaf">
+        <TreeItemPersonaLayout
+          aside={{
+            style: { flexDirection: 'column' },
+            children: (
+              <>
+                <Text font="numeric" as="span" style={{ whiteSpace: 'nowrap' }}>
+                  00:00 AM
+                </Text>
+                <div style={{ display: 'flex', marginLeft: 'auto', gap: tokens.spacingHorizontalXS }}>
+                  <Important16Regular primaryFill="red" />
+                  <CounterBadge count={1} color="danger" size="small" />
+                </div>
+              </>
+            ),
+          }}
+          description="description"
+          media={<Avatar />}
+        >
           Content
         </TreeItemPersonaLayout>
         <Tree>
@@ -153,16 +150,18 @@ export const Default = () => {
           </TreeItem>
         </Tree>
       </TreeItem>
-      <TreeItem
-        aside={
-          <>
-            <Important16Regular primaryFill="red" />
-            <CounterBadge count={1} color="danger" size="small" />
-          </>
-        }
-        itemType="branch"
-      >
-        <TreeItemPersonaLayout media={<Avatar shape="square" />}>Content</TreeItemPersonaLayout>
+      <TreeItem itemType="branch">
+        <TreeItemPersonaLayout
+          aside={
+            <>
+              <Important16Regular primaryFill="red" />
+              <CounterBadge count={1} color="danger" size="small" />
+            </>
+          }
+          media={<Avatar shape="square" />}
+        >
+          Content
+        </TreeItemPersonaLayout>
         <Tree>
           <TreeItem itemType="branch">
             <TreeItemLayout>level 2, item 1</TreeItemLayout>
diff --git a/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayout.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayout.stories.tsx
index 420d9fdfdb26a..334d04b4ba669 100644
--- a/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayout.stories.tsx
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayout.stories.tsx
@@ -11,17 +11,14 @@ import story from './TreeItemLayout.md';
 
 export const Layout = () => (
   <Tree aria-label="Tree">
-    <TreeItem
-      aside={
-        <>
-          <Important16Regular primaryFill="red" />
-          <CounterBadge count={1} color="danger" size="small" />
-        </>
-      }
-      itemType="branch"
-      aria-description="Private, 1 message"
-    >
+    <TreeItem itemType="branch" aria-description="Private, 1 message">
       <TreeItemLayout
+        aside={
+          <>
+            <Important16Regular primaryFill="red" />
+            <CounterBadge count={1} color="danger" size="small" />
+          </>
+        }
         iconBefore={<Image20Regular />}
         iconAfter={
           <>
@@ -55,8 +52,9 @@ export const Layout = () => (
         </TreeItem>
       </Tree>
     </TreeItem>
-    <TreeItem aside={<Important16Regular primaryFill="red" />} itemType="branch" aria-description="Private">
+    <TreeItem itemType="branch" aria-description="Private">
       <TreeItemLayout
+        aside={<Important16Regular primaryFill="red" />}
         iconBefore={<Image20Regular />}
         iconAfter={
           <>
diff --git a/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutAside.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutAside.stories.tsx
index 58edd993c21a6..4d2dc04eabfb2 100644
--- a/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutAside.stories.tsx
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutAside.stories.tsx
@@ -17,48 +17,44 @@ const AsideContent = ({ isImportant, messageCount }: { isImportant?: boolean; me
 
 export const Aside = () => (
   <Tree aria-label="Tree">
-    <TreeItem
-      aside={<AsideContent isImportant={true} messageCount={3} />}
-      itemType="branch"
-      aria-description="Important, 3 message"
-    >
-      <TreeItemLayout>level 1, item 1</TreeItemLayout>
+    <TreeItem itemType="branch" aria-description="Important, 3 message">
+      <TreeItemLayout aside={<AsideContent isImportant={true} messageCount={3} />}>level 1, item 1</TreeItemLayout>
       <Tree>
-        <TreeItem aside={<AsideContent isImportant={true} />} itemType="leaf" aria-description="Important">
-          <TreeItemLayout>level 2, item 1</TreeItemLayout>
+        <TreeItem itemType="leaf" aria-description="Important">
+          <TreeItemLayout aside={<AsideContent isImportant={true} />}>level 2, item 1</TreeItemLayout>
         </TreeItem>
-        <TreeItem aside={<AsideContent messageCount={2} />} itemType="leaf" aria-description="2 messages">
-          <TreeItemLayout>level 2, item 2</TreeItemLayout>
+        <TreeItem itemType="leaf" aria-description="2 messages">
+          <TreeItemLayout aside={<AsideContent messageCount={2} />}>level 2, item 2</TreeItemLayout>
         </TreeItem>
-        <TreeItem aside={<AsideContent messageCount={1} />} itemType="leaf" aria-description="1 messages">
-          <TreeItemLayout>level 2, item 3</TreeItemLayout>
+        <TreeItem itemType="leaf" aria-description="1 messages">
+          <TreeItemLayout aside={<AsideContent messageCount={1} />}>level 2, item 3</TreeItemLayout>
         </TreeItem>
       </Tree>
     </TreeItem>
-    <TreeItem
-      aside={
-        <>
-          <AsideContent isImportant={true} messageCount={1} />
-        </>
-      }
-      itemType="branch"
-      aria-description="Important, 1 message"
-    >
-      <TreeItemLayout>level 1, item 2</TreeItemLayout>
+    <TreeItem itemType="branch" aria-description="Important, 1 message">
+      <TreeItemLayout
+        aside={
+          <>
+            <AsideContent isImportant={true} messageCount={1} />
+          </>
+        }
+      >
+        level 1, item 2
+      </TreeItemLayout>
 
       <Tree>
-        <TreeItem aside={<AsideContent messageCount={1} />} itemType="branch" aria-description="1 message">
-          <TreeItemLayout>level 2, item 1</TreeItemLayout>
+        <TreeItem itemType="branch" aria-description="1 message">
+          <TreeItemLayout aside={<AsideContent messageCount={1} />}>level 2, item 1</TreeItemLayout>
 
           <Tree>
-            <TreeItem aside={<AsideContent />} itemType="leaf">
-              <TreeItemLayout>level 3, item 1</TreeItemLayout>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout aside={<AsideContent />}>level 3, item 1</TreeItemLayout>
             </TreeItem>
           </Tree>
         </TreeItem>
 
-        <TreeItem aside={<AsideContent isImportant={true} />} itemType="branch" aria-description="Important">
-          <TreeItemLayout>level 2, item 2</TreeItemLayout>
+        <TreeItem itemType="branch" aria-description="Important">
+          <TreeItemLayout aside={<AsideContent isImportant={true} />}>level 2, item 2</TreeItemLayout>
 
           <Tree>
             <TreeItem itemType="leaf">
diff --git a/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayout.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayout.stories.tsx
index 601cb41d8f3a5..d691f924e9abd 100644
--- a/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayout.stories.tsx
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayout.stories.tsx
@@ -27,17 +27,17 @@ const Badges = () => {
 export const Layout = () => {
   return (
     <Tree aria-label="Tree">
-      <TreeItem
-        aside={
-          <>
-            <span>00:00 AM</span>
-            <Badges />
-          </>
-        }
-        itemType="branch"
-        aria-description="1 new message, important"
-      >
-        <TreeItemPersonaLayout description="Secondary text slot" media={<Avatar />}>
+      <TreeItem itemType="branch" aria-description="1 new message, important">
+        <TreeItemPersonaLayout
+          aside={
+            <>
+              <span>00:00 AM</span>
+              <Badges />
+            </>
+          }
+          description="Secondary text slot"
+          media={<Avatar />}
+        >
           Primary text slot
         </TreeItemPersonaLayout>
         <Tree>
@@ -55,17 +55,17 @@ export const Layout = () => {
           </TreeItem>
         </Tree>
       </TreeItem>
-      <TreeItem
-        aside={
-          <>
-            <span>00:00 AM</span>
-            <Badges />
-          </>
-        }
-        itemType="branch"
-        aria-description="1 message, important"
-      >
-        <TreeItemPersonaLayout description="Secondary text slot" media={<Avatar />}>
+      <TreeItem itemType="branch" aria-description="1 message, important">
+        <TreeItemPersonaLayout
+          aside={
+            <>
+              <span>00:00 AM</span>
+              <Badges />
+            </>
+          }
+          description="Secondary text slot"
+          media={<Avatar />}
+        >
           Primary text slot
         </TreeItemPersonaLayout>
         <Tree>
diff --git a/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
index 549a8c72fc222..cd8e4547dae5f 100644
--- a/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
@@ -14,13 +14,14 @@ export const ReadUnread = () => {
 
   return (
     <Tree aria-label="Tree">
-      <TreeItem expandIcon="" itemType="leaf">
-        <TreeItemPersonaLayout description="Secondary text content" media={<Avatar />}>
+      <TreeItem itemType="leaf">
+        <TreeItemPersonaLayout expandIcon="" description="Secondary text content" media={<Avatar />}>
           Read content message
         </TreeItemPersonaLayout>
       </TreeItem>
-      <TreeItem expandIcon="•" itemType="leaf" aria-description="New message">
+      <TreeItem itemType="leaf" aria-description="New message">
         <TreeItemPersonaLayout
+          expandIcon="•"
           description={{ className: styles.unread, children: 'Secondary text content' }}
           className={styles.unread}
           media={<Avatar />}
diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
index 77fbd454c980c..872f24969d6a2 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
@@ -87,21 +87,21 @@ export const AddRemoveTreeItem = () => {
         const isUndeletable = item.level === 1 || item.value.toString().endsWith('-btn');
         const { content, ...treeItemProps } = item.getTreeItemProps();
         return (
-          <TreeItem
-            key={item.value}
-            actions={
-              isUndeletable ? undefined : (
-                <Button
-                  aria-label="Remove item"
-                  appearance="subtle"
-                  onClick={() => removeFlatTreeItem(item.value.toString())}
-                  icon={<Delete20Regular />}
-                />
-              )
-            }
-            {...treeItemProps}
-          >
-            <TreeItemLayout>{content}</TreeItemLayout>
+          <TreeItem key={item.value} {...treeItemProps}>
+            <TreeItemLayout
+              actions={
+                isUndeletable ? undefined : (
+                  <Button
+                    aria-label="Remove item"
+                    appearance="subtle"
+                    onClick={() => removeFlatTreeItem(item.value.toString())}
+                    icon={<Delete20Regular />}
+                  />
+                )
+              }
+            >
+              {content}
+            </TreeItemLayout>
           </TreeItem>
         );
       })}
diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx
index cf5750b1a74af..665703d24fd67 100644
--- a/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx
+++ b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx
@@ -80,8 +80,8 @@ export const LazyLoading = () => {
         const { name, ...itemProps } = item.getTreeItemProps();
         const { isLoading = false } = trees[item.value as 'people' | 'planets' | 'starships'] ?? {};
         return (
-          <TreeItem key={item.value} expandIcon={isLoading ? <Spinner size="tiny" /> : undefined} {...itemProps}>
-            <TreeItemLayout>{name}</TreeItemLayout>
+          <TreeItem key={item.value} {...itemProps}>
+            <TreeItemLayout expandIcon={isLoading ? <Spinner size="tiny" /> : undefined}>{name}</TreeItemLayout>
           </TreeItem>
         );
       })}

From e7e522f452c4090c7f4426082efac571e8141a8e Mon Sep 17 00:00:00 2001
From: Valentina <vkozlova@microsoft.com>
Date: Tue, 25 Jul 2023 14:17:26 +0200
Subject: [PATCH 09/37] Added more content to Breadcrumb Readme and replaced
 MenuItem (#28626)

* added more info to readme

* added MenuItemLink instead of MenuItem for Link overflow

* Change files

* fixed wrong tag
---
 ...-54642078-ea6a-4423-8ea0-f5598e93fadb.json |  7 ++++
 .../react-breadcrumb-preview/README.md        | 40 +++++++++++++++++++
 .../BreadcrumbItem/useBreadcrumbItem.ts       |  2 +-
 .../BreadcrumbLinkWithOverflow.stories.tsx    | 14 +++----
 4 files changed, 55 insertions(+), 8 deletions(-)
 create mode 100644 change/@fluentui-react-breadcrumb-preview-54642078-ea6a-4423-8ea0-f5598e93fadb.json

diff --git a/change/@fluentui-react-breadcrumb-preview-54642078-ea6a-4423-8ea0-f5598e93fadb.json b/change/@fluentui-react-breadcrumb-preview-54642078-ea6a-4423-8ea0-f5598e93fadb.json
new file mode 100644
index 0000000000000..d99a05fa422cb
--- /dev/null
+++ b/change/@fluentui-react-breadcrumb-preview-54642078-ea6a-4423-8ea0-f5598e93fadb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: updated readme, replaced MenuItem with MenuItemLink",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-breadcrumb-preview/README.md b/packages/react-components/react-breadcrumb-preview/README.md
index a26b02a753316..9a1cc298f58c2 100644
--- a/packages/react-components/react-breadcrumb-preview/README.md
+++ b/packages/react-components/react-breadcrumb-preview/README.md
@@ -3,3 +3,43 @@
 **React Breadcrumb components for [Fluent UI React](https://react.fluentui.dev/)**
 
 These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page's location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy.
+
+## Usage
+
+To import React Breadcrumb components:
+
+```tsx
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbButton,
+  BreadcrumbDivider,
+  BreadcrumbProps
+} from "@fluentui/react-components';
+```
+
+Simple example of Breadcrumb Usage:
+
+```tsx
+import { Breadcrumb, BreadcrumbItem, BreadcrumbDivider } from '@fluentui/react-breadcrumb-preview';
+
+export const App = () => (
+  <Breadcrumb aria-label="breadcrumb">
+    <BreadcrumbItem>Item 1</BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>Item 2</BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem current={true}>Item 3</BreadcrumbItem>
+  </Breadcrumb>
+);
+```
+
+## Specification
+
+See the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.
+
+## API
+
+For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--default).
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts
index 5d70e079348bd..9aa96b3fe8621 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts
@@ -22,7 +22,7 @@ export const useBreadcrumbItem_unstable = (
     components: {
       root: 'li',
     },
-    root: getNativeElementProps('div', {
+    root: getNativeElementProps('li', {
       ref,
       ...props,
     }),
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbLinkWithOverflow.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbLinkWithOverflow.stories.tsx
index 84a8cc772bf0b..97eb7357eb866 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbLinkWithOverflow.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbLinkWithOverflow.stories.tsx
@@ -13,7 +13,7 @@ import {
   useOverflowMenu,
   Overflow,
   OverflowItem,
-  MenuItem,
+  MenuItemLink,
   OverflowDivider,
 } from '@fluentui/react-components';
 import {
@@ -41,7 +41,7 @@ type LinkItem = {
   item?: string;
   linkProps: {
     'aria-label'?: string;
-    href?: string;
+    href: string;
     icon?: BreadcrumbLinkProps['icon'];
     disabled?: boolean;
     iconPosition?: 'before' | 'after';
@@ -161,7 +161,7 @@ const useStyles = makeStyles({
   },
 });
 
-const OverflowBreadcrumbButton: React.FC<{ id: string; item: LinkItem }> = props => {
+const OverflowBreadcrumbLink: React.FC<{ id: string; item: LinkItem }> = props => {
   const { item, id } = props;
   const isVisible = useIsOverflowItemVisible(id);
 
@@ -169,7 +169,7 @@ const OverflowBreadcrumbButton: React.FC<{ id: string; item: LinkItem }> = props
     return null;
   }
 
-  return <MenuItem {...item.linkProps}>{item.item}</MenuItem>;
+  return <MenuItemLink {...item.linkProps}>{item.item}</MenuItemLink>;
 };
 
 const OverflowGroupDivider: React.FC<{
@@ -208,16 +208,16 @@ const ControlledOverflowMenu = (props: PartitionBreadcrumbItems<LinkItem>) => {
         <MenuList className={styles.menu}>
           {isOverflowing &&
             startDisplayedItems.map((item: LinkItem) => (
-              <OverflowBreadcrumbButton id={item.key.toString()} item={item} key={item.key} />
+              <OverflowBreadcrumbLink id={item.key.toString()} item={item} key={item.key} />
             ))}
           {overflowItems &&
             overflowItems.map((item: LinkItem) => (
-              <OverflowBreadcrumbButton id={item.key.toString()} item={item} key={item.key} />
+              <OverflowBreadcrumbLink id={item.key.toString()} item={item} key={item.key} />
             ))}
           {isOverflowing &&
             endDisplayedItems &&
             endDisplayedItems.map((item: LinkItem) => (
-              <OverflowBreadcrumbButton id={item.key.toString()} item={item} key={item.key} />
+              <OverflowBreadcrumbLink id={item.key.toString()} item={item} key={item.key} />
             ))}
         </MenuList>
       </MenuPopover>

From c0c62f9383781f0dbebd800eaa2c64ef761075a2 Mon Sep 17 00:00:00 2001
From: ling1726 <lingfangao@hotmail.com>
Date: Tue, 25 Jul 2023 14:20:59 +0200
Subject: [PATCH 10/37] feat: use tabster restorer API (#28530)

* feat: use tabster restorer API

* custom restorer hook

* update patch

* update snapshots

* update patch

* fix enums

* update patch

* bump tabster

* update md

* add docs

* changefiles

* add stories prefix

* remove changes

* update documentation example

* rename useMenuTrigger

* pr fixes

* update docs

* add popover doc example
---
 ...-5b15aaa9-20f7-44b3-a369-8096b4cdf7eb.json |   7 ++
 ...-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json |   7 ++
 ...-fdccbc10-8c41-442c-bac0-f034e5e3c266.json |   7 ++
 ...-c0ff6814-1ae9-4231-a304-d985128bdc9b.json |   7 ++
 .../etc/react-components.api.md               |   6 +
 .../react-components/src/index.ts             |   2 +
 .../Default.stories.stories.tsx               |  54 +++++++++
 .../FocusRestoreHistory.stories.tsx           |  99 +++++++++++++++++
 .../UserRestoreFocus.stories.stories.tsx      | 105 ++++++++++++++++++
 .../useRestoreFocusSource/index.stories.tsx   |  18 +++
 .../useRestoreFocusSourceDescription.md       |  10 ++
 .../DialogTrigger/DialogTrigger.test.tsx      |   4 +-
 .../__snapshots__/DialogTrigger.test.tsx.snap |   2 +-
 .../DialogTrigger/useDialogTrigger.ts         |   3 +-
 .../Dialog/DialogTriggerOutsideDialog.md      |   6 +-
 .../DialogTriggerOutsideDialog.stories.tsx    |  19 +---
 .../Menu/__snapshots__/Menu.test.tsx.snap     |   1 +
 .../src/components/Menu/useMenu.tsx           |  18 +--
 .../components/MenuPopover/useMenuPopover.ts  |   7 ++
 .../MenuTrigger/MenuTrigger.test.tsx          |   2 +
 .../components/MenuTrigger/MenuTrigger.tsx    |   2 +-
 .../__snapshots__/MenuTrigger.test.tsx.snap   |   1 +
 .../src/components/MenuTrigger/index.ts       |   2 +-
 ...enuTrigger.styles.ts => useMenuTrigger.ts} |   4 +-
 .../Menu/MenuAnchorToTarget.stories.tsx       |  10 +-
 .../PopoverSurface.test.tsx.snap              |   2 +-
 .../PopoverTrigger/PopoverTrigger.test.tsx    |   4 +-
 .../PopoverTrigger.test.tsx.snap              |   2 +-
 .../Popover/PopoverWithoutTrigger.stories.tsx |  72 ++++++++++++
 .../stories/Popover/index.stories.tsx         |   1 +
 .../react-tabster/etc/react-tabster.api.md    |   6 +
 .../react-tabster/package.json                |   2 +-
 .../react-tabster/src/hooks/index.ts          |   1 +
 .../src/hooks/useModalAttributes.ts           |  10 +-
 .../src/hooks/useRestoreFocus.ts              |  30 +++++
 .../react-tabster/src/index.ts                |   2 +
 yarn.lock                                     |   8 +-
 37 files changed, 483 insertions(+), 60 deletions(-)
 create mode 100644 change/@fluentui-react-components-5b15aaa9-20f7-44b3-a369-8096b4cdf7eb.json
 create mode 100644 change/@fluentui-react-dialog-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json
 create mode 100644 change/@fluentui-react-menu-fdccbc10-8c41-442c-bac0-f034e5e3c266.json
 create mode 100644 change/@fluentui-react-tabster-c0ff6814-1ae9-4231-a304-d985128bdc9b.json
 create mode 100644 packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/Default.stories.stories.tsx
 create mode 100644 packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/FocusRestoreHistory.stories.tsx
 create mode 100644 packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/UserRestoreFocus.stories.stories.tsx
 create mode 100644 packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/index.stories.tsx
 create mode 100644 packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/useRestoreFocusSourceDescription.md
 rename packages/react-components/react-menu/src/components/MenuTrigger/{useMenuTrigger.styles.ts => useMenuTrigger.ts} (97%)
 create mode 100644 packages/react-components/react-popover/stories/Popover/PopoverWithoutTrigger.stories.tsx
 create mode 100644 packages/react-components/react-tabster/src/hooks/useRestoreFocus.ts

diff --git a/change/@fluentui-react-components-5b15aaa9-20f7-44b3-a369-8096b4cdf7eb.json b/change/@fluentui-react-components-5b15aaa9-20f7-44b3-a369-8096b4cdf7eb.json
new file mode 100644
index 0000000000000..187195fcdf05c
--- /dev/null
+++ b/change/@fluentui-react-components-5b15aaa9-20f7-44b3-a369-8096b4cdf7eb.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export useRestoreFocusTarget and useRestoreFocusSource",
+  "packageName": "@fluentui/react-components",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-dialog-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json b/change/@fluentui-react-dialog-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json
new file mode 100644
index 0000000000000..0c0bf453cac7b
--- /dev/null
+++ b/change/@fluentui-react-dialog-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Focus should restore to a DialogTrigger outside of a Dialog",
+  "packageName": "@fluentui/react-dialog",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-fdccbc10-8c41-442c-bac0-f034e5e3c266.json b/change/@fluentui-react-menu-fdccbc10-8c41-442c-bac0-f034e5e3c266.json
new file mode 100644
index 0000000000000..f58d41be215d6
--- /dev/null
+++ b/change/@fluentui-react-menu-fdccbc10-8c41-442c-bac0-f034e5e3c266.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor: Remove custom focus code in favour of useRestoreFocus hooks",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabster-c0ff6814-1ae9-4231-a304-d985128bdc9b.json b/change/@fluentui-react-tabster-c0ff6814-1ae9-4231-a304-d985128bdc9b.json
new file mode 100644
index 0000000000000..5571d5c3038b0
--- /dev/null
+++ b/change/@fluentui-react-tabster-c0ff6814-1ae9-4231-a304-d985128bdc9b.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Implement useRestoreFocusSource and useRestoreFocusTarget based on the tabster restorer API",
+  "packageName": "@fluentui/react-tabster",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
index c77d39d33ddb8..22b016bee11ae 100644
--- a/packages/react-components/react-components/etc/react-components.api.md
+++ b/packages/react-components/react-components/etc/react-components.api.md
@@ -1001,6 +1001,8 @@ import { useRadioGroupContextValue_unstable } from '@fluentui/react-radio';
 import { useRadioGroupContextValues } from '@fluentui/react-radio';
 import { useRadioGroupStyles_unstable } from '@fluentui/react-radio';
 import { useRadioStyles_unstable } from '@fluentui/react-radio';
+import { useRestoreFocusSource } from '@fluentui/react-tabster';
+import { useRestoreFocusTarget } from '@fluentui/react-tabster';
 import { useScrollbarWidth } from '@fluentui/react-utilities';
 import { useSelect_unstable } from '@fluentui/react-select';
 import { useSelectStyles_unstable } from '@fluentui/react-select';
@@ -3087,6 +3089,10 @@ export { useRadioGroupStyles_unstable }
 
 export { useRadioStyles_unstable }
 
+export { useRestoreFocusSource }
+
+export { useRestoreFocusTarget }
+
 export { useScrollbarWidth }
 
 export { useSelect_unstable }
diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
index 2fe634a7b09f6..b1a7fdb853336 100644
--- a/packages/react-components/react-components/src/index.ts
+++ b/packages/react-components/react-components/src/index.ts
@@ -40,6 +40,8 @@ export {
   useModalAttributes,
   useObservedElement,
   useFocusObserved,
+  useRestoreFocusTarget,
+  useRestoreFocusSource,
 } from '@fluentui/react-tabster';
 export type {
   CreateCustomFocusIndicatorStyleOptions,
diff --git a/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/Default.stories.stories.tsx b/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/Default.stories.stories.tsx
new file mode 100644
index 0000000000000..77f4449c45436
--- /dev/null
+++ b/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/Default.stories.stories.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ThumbLikeRegular, ThumbDislikeRegular } from '@fluentui/react-icons';
+import {
+  useRestoreFocusSource,
+  useRestoreFocusTarget,
+  Button,
+  makeStyles,
+  Textarea,
+  Field,
+} from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  feedback: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  field: {
+    width: '300px',
+  },
+});
+
+export const Default = () => {
+  const styles = useStyles();
+  const restoreFocusSourceAttribute = useRestoreFocusSource();
+  const restoreFocusTargetAttribute = useRestoreFocusTarget();
+  const [feedbackSent, setFeedbackSent] = React.useState(false);
+
+  React.useEffect(() => {
+    if (feedbackSent) {
+      const timeout = setTimeout(() => setFeedbackSent(false), 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [feedbackSent]);
+
+  return (
+    <div>
+      <Field label="Compose message" className={styles.field}>
+        <Textarea />
+      </Field>
+      <br />
+      <Button {...restoreFocusTargetAttribute}>Send message</Button>
+      {!feedbackSent ? (
+        <div {...restoreFocusSourceAttribute} className={styles.feedback}>
+          How was your experience completing this task?
+          <Button appearance="subtle" onClick={() => setFeedbackSent(true)} icon={<ThumbLikeRegular />} />
+          <Button appearance="subtle" onClick={() => setFeedbackSent(true)} icon={<ThumbDislikeRegular />} />
+        </div>
+      ) : (
+        <div>Thanks for submitting feedback!</div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/FocusRestoreHistory.stories.tsx b/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/FocusRestoreHistory.stories.tsx
new file mode 100644
index 0000000000000..26de0e4fc5c1d
--- /dev/null
+++ b/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/FocusRestoreHistory.stories.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { ThumbLikeRegular, ThumbDislikeRegular } from '@fluentui/react-icons';
+import {
+  useRestoreFocusSource,
+  useRestoreFocusTarget,
+  Button,
+  makeStyles,
+  Textarea,
+  Field,
+} from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  feedback: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  field: {
+    width: '300px',
+  },
+});
+
+export const FocusRestoreHistory = () => {
+  const styles = useStyles();
+  const restoreFocusSourceAttribute = useRestoreFocusSource();
+  const restoreFocusTargetAttribute = useRestoreFocusTarget();
+  const [experienceFeedbackSent, setExperienceFeedbackSent] = React.useState(false);
+  const [deliveryFeedbackSent, setDeliveryFeedbackSent] = React.useState(false);
+
+  React.useEffect(() => {
+    // reset example
+    if (experienceFeedbackSent) {
+      const timeout = setTimeout(() => setExperienceFeedbackSent(false), 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [experienceFeedbackSent]);
+
+  React.useEffect(() => {
+    // reset example
+    if (deliveryFeedbackSent) {
+      const timeout = setTimeout(() => setDeliveryFeedbackSent(false), 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [deliveryFeedbackSent]);
+
+  return (
+    <div>
+      <Field label="Compose message" className={styles.field}>
+        <Textarea />
+      </Field>
+      <br />
+      <Button {...restoreFocusTargetAttribute}>Send message</Button>
+      {!experienceFeedbackSent ? (
+        <>
+          <div {...restoreFocusSourceAttribute} className={styles.feedback}>
+            How was your experience completing this task?
+            <Button
+              {...restoreFocusTargetAttribute}
+              appearance="subtle"
+              onClick={() => setExperienceFeedbackSent(true)}
+              icon={<ThumbLikeRegular />}
+            />
+            <Button
+              appearance="subtle"
+              onClick={() => setExperienceFeedbackSent(true)}
+              icon={<ThumbDislikeRegular />}
+            />
+          </div>
+        </>
+      ) : (
+        <div>Thanks for submitting feedback!</div>
+      )}
+      {!deliveryFeedbackSent ? (
+        <>
+          <div {...restoreFocusSourceAttribute} className={styles.feedback}>
+            Was your message delivered successfully?
+            <Button appearance="subtle" onClick={() => setDeliveryFeedbackSent(true)} icon={<ThumbLikeRegular />} />
+            <Button appearance="subtle" onClick={() => setDeliveryFeedbackSent(true)} icon={<ThumbDislikeRegular />} />
+          </div>
+        </>
+      ) : (
+        <div>Thanks for submitting feedback!</div>
+      )}
+    </div>
+  );
+};
+
+FocusRestoreHistory.parameters = {
+  docs: {
+    description: {
+      story: [
+        'Target elements are stored in a limited history. In this example try to submit the feedback in reverse order.',
+        'The first feedback button is a restore target, so once the second feedback is submitted focus is restored',
+        'to the first feedback button. Likewise once the first feedback is submitted, focus will be restored to the',
+        'send button.',
+      ].join('\n'),
+    },
+  },
+};
diff --git a/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/UserRestoreFocus.stories.stories.tsx b/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/UserRestoreFocus.stories.stories.tsx
new file mode 100644
index 0000000000000..e4a78f110b1f8
--- /dev/null
+++ b/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/UserRestoreFocus.stories.stories.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { ThumbLikeRegular, ThumbDislikeRegular } from '@fluentui/react-icons';
+import {
+  useRestoreFocusSource,
+  useRestoreFocusTarget,
+  Button,
+  makeStyles,
+  Textarea,
+  Field,
+} from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  feedback: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  field: {
+    width: '300px',
+  },
+});
+
+export const UserRestoreFocus = () => {
+  const styles = useStyles();
+  const restoreFocusSourceAttribute = useRestoreFocusSource();
+  const restoreFocusTargetAttribute = useRestoreFocusTarget();
+  const sendButtonRef = React.useRef<HTMLButtonElement | null>(null);
+  const [experienceFeedbackSent, setExperienceFeedbackSent] = React.useState(false);
+  const [deliveryFeedbackSent, setDeliveryFeedbackSent] = React.useState(false);
+
+  React.useEffect(() => {
+    // reset example
+    if (experienceFeedbackSent) {
+      const timeout = setTimeout(() => setExperienceFeedbackSent(false), 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [experienceFeedbackSent]);
+
+  React.useEffect(() => {
+    // reset example
+    if (deliveryFeedbackSent) {
+      sendButtonRef.current?.focus();
+      const timeout = setTimeout(() => setDeliveryFeedbackSent(false), 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [deliveryFeedbackSent]);
+
+  return (
+    <div>
+      <Field label="Compose message" className={styles.field}>
+        <Textarea />
+      </Field>
+      <br />
+      <Button ref={sendButtonRef} {...restoreFocusTargetAttribute}>
+        Send message
+      </Button>
+      {!experienceFeedbackSent ? (
+        <>
+          <div {...restoreFocusSourceAttribute} className={styles.feedback}>
+            How was your experience completing this task?
+            <Button
+              {...restoreFocusTargetAttribute}
+              appearance="subtle"
+              onClick={() => setExperienceFeedbackSent(true)}
+              icon={<ThumbLikeRegular />}
+            />
+            <Button
+              appearance="subtle"
+              onClick={() => setExperienceFeedbackSent(true)}
+              icon={<ThumbDislikeRegular />}
+            />
+          </div>
+        </>
+      ) : (
+        <div>Thanks for submitting feedback!</div>
+      )}
+      {!deliveryFeedbackSent ? (
+        <>
+          <div {...restoreFocusSourceAttribute} className={styles.feedback}>
+            Was your message delivered successfully?
+            <Button appearance="subtle" onClick={() => setDeliveryFeedbackSent(true)} icon={<ThumbLikeRegular />} />
+            <Button appearance="subtle" onClick={() => setDeliveryFeedbackSent(true)} icon={<ThumbDislikeRegular />} />
+          </div>
+        </>
+      ) : (
+        <div>Thanks for submitting feedback!</div>
+      )}
+    </div>
+  );
+};
+
+UserRestoreFocus.parameters = {
+  docs: {
+    description: {
+      story: [
+        'If the user manually moves focus to a desired element, then the utility **will not move focus**.',
+        'The focus will only be restored if it is lost to the `document body`.',
+        '',
+        'This example is similar to the previous. However, submitting the second feedback will manually move',
+        "focus to the 'Send message' button. This bypasses the restore focus history, which should restore",
+        'focus to the first feedback button.',
+      ].join('\n'),
+    },
+  },
+};
diff --git a/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/index.stories.tsx b/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/index.stories.tsx
new file mode 100644
index 0000000000000..df89cfc6c8c6e
--- /dev/null
+++ b/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/index.stories.tsx
@@ -0,0 +1,18 @@
+import { useRestoreFocusSource } from '@fluentui/react-components';
+import descriptionMd from './useRestoreFocusSourceDescription.md';
+
+export { Default } from './Default.stories.stories';
+export { FocusRestoreHistory } from './FocusRestoreHistory.stories';
+export { UserRestoreFocus } from './UserRestoreFocus.stories.stories';
+
+export default {
+  title: 'Utilities/Focus Management/useRestoreFocusSource',
+  component: useRestoreFocusSource,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/useRestoreFocusSourceDescription.md b/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/useRestoreFocusSourceDescription.md
new file mode 100644
index 0000000000000..48e185b2990bb
--- /dev/null
+++ b/packages/react-components/react-components/stories/Concepts/FocusManagement/useRestoreFocusSource/useRestoreFocusSourceDescription.md
@@ -0,0 +1,10 @@
+The hooks `useRestoreFocusSource` and `useRestoreFocusTarget` are intended to be used together, but without tight
+coupling.
+
+When the attribute returned by `useRestoreFocusSource` is applied to an element, it will be ready to restore focus
+to the last 'bookmarked' element that was set using `useRestoreFocusTarget`. The restore focus target
+**needs to be focused** before focus is lost from a source. This is to prevent focus randomly jumping across
+an application but being restored to the an element at the closest point in time.
+
+The examples below simulate a feedback experience. One a user submits feedback, the control will be removed from
+the page and the focus will need to revert from the body (since the focused element was removed).
diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.test.tsx b/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.test.tsx
index e515177f2691e..82020389d93f1 100644
--- a/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.test.tsx
+++ b/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.test.tsx
@@ -56,7 +56,7 @@ describe('DialogTrigger', () => {
     expect(ref.mock.calls[0]).toMatchInlineSnapshot(`
       Array [
         <button
-          data-tabster="{\\"deloser\\":{}}"
+          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
         >
           Trigger
         </button>,
@@ -85,7 +85,7 @@ describe('DialogTrigger', () => {
     expect(cb.mock.calls[0]).toMatchInlineSnapshot(`
       Array [
         <button
-          data-tabster="{\\"deloser\\":{}}"
+          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
         >
           Trigger
         </button>,
diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/__snapshots__/DialogTrigger.test.tsx.snap b/packages/react-components/react-dialog/src/components/DialogTrigger/__snapshots__/DialogTrigger.test.tsx.snap
index fd096629701b7..6e0f1d54bc456 100644
--- a/packages/react-components/react-dialog/src/components/DialogTrigger/__snapshots__/DialogTrigger.test.tsx.snap
+++ b/packages/react-components/react-dialog/src/components/DialogTrigger/__snapshots__/DialogTrigger.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`DialogTrigger renders a default state 1`] = `
 <button
-  data-tabster="{\\"deloser\\":{}}"
+  data-tabster="{\\"restorer\\":{\\"type\\":1}}"
   onClick={[Function]}
 >
   Dialog trigger
diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts b/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts
index 827b4ff31f013..75a3be91d3615 100644
--- a/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts
+++ b/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts
@@ -3,6 +3,7 @@ import { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '
 import type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';
 import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';
 import { useARIAButtonProps } from '@fluentui/react-aria';
+import { useModalAttributes } from '@fluentui/react-tabster';
 
 /**
  * Create the state required to render DialogTrigger.
@@ -18,7 +19,7 @@ export const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTrig
   const child = getTriggerChild(children);
 
   const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
-  const triggerAttributes = useDialogContext_unstable(ctx => ctx.triggerAttributes);
+  const { triggerAttributes } = useModalAttributes();
 
   const handleClick = useEventCallback(
     (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {
diff --git a/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md b/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md
index 8cc61c1143644..4066b5cb652ad 100644
--- a/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md
+++ b/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md
@@ -1,3 +1,3 @@
-`DialogTrigger` is not a component that can be used outside of `Dialog`. If you want to trigger the dialog from outside of `Dialog`, you should use controlled state instead.
-
-> ⚠️ Note: As there will be no `DialogTrigger`, you should handle focus restoration when the dialog gets closed.
+When using a `Dialog` without a `DialogTrigger`, it is up to the user to make sure that the focus is restored correctly
+when the dialog is closed. This can be done quite easily by using the `useRestoreFocusTarget` hook. The `Dialog` already
+uses the `useRestoreFocusSource` hook directly, which will restore focus to the most recently focused target on close.
diff --git a/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx b/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx
index dc51ae617b222..41fec25c7a482 100644
--- a/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx
+++ b/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx
@@ -8,33 +8,21 @@ import {
   DialogTrigger,
   DialogBody,
   Button,
-  DialogOpenChangeData,
+  useRestoreFocusTarget,
 } from '@fluentui/react-components';
 import story from './DialogTriggerOutsideDialog.md';
 
 export const TriggerOutsideDialog = () => {
-  const triggerRef = React.useRef<HTMLButtonElement>(null);
-
   const [open, setOpen] = React.useState(false);
-  const [closeAction, setCloseAction] = React.useState<DialogOpenChangeData['type'] | null>(null);
-
-  React.useEffect(() => {
-    // Prevents focusing on an initial render
-    if (open || closeAction === null) {
-      return;
-    }
-
-    triggerRef.current?.focus();
-  }, [closeAction, open]);
+  const restoreFocusTargetAttribute = useRestoreFocusTarget();
 
   return (
     <>
       <Button
+        {...restoreFocusTargetAttribute}
         onClick={() => {
           setOpen(true);
-          setCloseAction(null);
         }}
-        ref={triggerRef}
       >
         Open Dialog
       </Button>
@@ -43,7 +31,6 @@ export const TriggerOutsideDialog = () => {
         open={open}
         onOpenChange={(event, data) => {
           setOpen(data.open);
-          setCloseAction(data.type);
         }}
       >
         <DialogSurface>
diff --git a/packages/react-components/react-menu/src/components/Menu/__snapshots__/Menu.test.tsx.snap b/packages/react-components/react-menu/src/components/Menu/__snapshots__/Menu.test.tsx.snap
index fc7e36d350dc0..c604de7dd8c5e 100644
--- a/packages/react-components/react-menu/src/components/Menu/__snapshots__/Menu.test.tsx.snap
+++ b/packages/react-components/react-menu/src/components/Menu/__snapshots__/Menu.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Menu renders a default state 1`] = `
 <div>
   <button
     aria-haspopup="menu"
+    data-tabster="{\\"restorer\\":{\\"type\\":1}}"
     id="menu1"
   >
     Menu trigger
diff --git a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
index cf6c19f807ca0..0ea43aa3fb268 100644
--- a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
+++ b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
@@ -11,7 +11,6 @@ import {
   useOnClickOutside,
   useEventCallback,
   useOnScrollOutside,
-  useFirstMount,
 } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { elementContains } from '@fluentui/react-portal';
@@ -275,26 +274,11 @@ const useMenuOpenState = (
     firstFocusable?.focus();
   }, [findFirstFocusable, state.menuPopoverRef]);
 
-  const firstMount = useFirstMount();
   React.useEffect(() => {
     if (open) {
       focusFirst();
-    } else {
-      if (!firstMount) {
-        if (targetDocument?.activeElement === targetDocument?.body) {
-          // We know that React effects are sync so we focus the trigger here
-          // after any event handler (event handlers will update state and re-render).
-          // Since the browser only performs the default behaviour for the Tab key once
-          // keyboard events have fully bubbled up the window, the browser will move
-          // focus to the next tabbable element before/after the trigger if needed.
-          // If the Tab key was not pressed, focus will remain on the trigger as expected.
-          state.triggerRef.current?.focus();
-        }
-      }
     }
-    // firstMount change should not re-run this effect
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);
+  }, [open, focusFirst]);
 
   return [open, setOpen] as const;
 };
diff --git a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts
index c5221404070cf..7208d05e85107 100644
--- a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts
+++ b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts
@@ -6,6 +6,7 @@ import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { dispatchMenuEnterEvent } from '../../utils/index';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
+import { useRestoreFocusSource } from '@fluentui/react-tabster';
 
 /**
  * Create the state required to render MenuPopover.
@@ -21,9 +22,11 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<
   const setOpen = useMenuContext_unstable(context => context.setOpen);
   const open = useMenuContext_unstable(context => context.open);
   const openOnHover = useMenuContext_unstable(context => context.openOnHover);
+  const triggerRef = useMenuContext_unstable(context => context.triggerRef);
   const isSubmenu = useIsSubmenu();
   const canDispatchCustomEventRef = React.useRef(true);
   const throttleDispatchTimerRef = React.useRef(0);
+  const restoreFocusSourceAttributes = useRestoreFocusSource();
 
   const { dir } = useFluent();
   const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;
@@ -59,6 +62,7 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<
 
   const rootProps = getNativeElementProps('div', {
     role: 'presentation',
+    ...restoreFocusSourceAttributes,
     ...props,
     ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),
   });
@@ -87,6 +91,9 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<
 
     if (key === Tab) {
       setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });
+      if (!isSubmenu) {
+        triggerRef.current?.focus();
+      }
     }
 
     onKeyDownOriginal?.(event);
diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx b/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
index 4a55ade8fc0de..240ae1f22a9a7 100644
--- a/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
+++ b/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
@@ -57,6 +57,7 @@ describe('MenuTrigger', () => {
       Array [
         <button
           aria-haspopup="menu"
+          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
           id="id"
         >
           Trigger
@@ -87,6 +88,7 @@ describe('MenuTrigger', () => {
       Array [
         <button
           aria-haspopup="menu"
+          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
           id="id"
         >
           Trigger
diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx b/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx
index f33a6edd402c5..6b380e0dd3687 100644
--- a/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx
+++ b/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMenuTrigger_unstable } from './useMenuTrigger.styles';
+import { useMenuTrigger_unstable } from './useMenuTrigger';
 import { renderMenuTrigger_unstable } from './renderMenuTrigger';
 import type { MenuTriggerProps } from './MenuTrigger.types';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/__snapshots__/MenuTrigger.test.tsx.snap b/packages/react-components/react-menu/src/components/MenuTrigger/__snapshots__/MenuTrigger.test.tsx.snap
index 7826501c5a172..8d08c72a08737 100644
--- a/packages/react-components/react-menu/src/components/MenuTrigger/__snapshots__/MenuTrigger.test.tsx.snap
+++ b/packages/react-components/react-menu/src/components/MenuTrigger/__snapshots__/MenuTrigger.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`MenuTrigger renders a default state 1`] = `
 <button
   aria-haspopup="menu"
+  data-tabster="{\\"restorer\\":{\\"type\\":1}}"
   id="id"
   onClick={[Function]}
   onContextMenu={[Function]}
diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/index.ts b/packages/react-components/react-menu/src/components/MenuTrigger/index.ts
index 87de2ef026bca..b5b4a29882293 100644
--- a/packages/react-components/react-menu/src/components/MenuTrigger/index.ts
+++ b/packages/react-components/react-menu/src/components/MenuTrigger/index.ts
@@ -1,4 +1,4 @@
 export * from './MenuTrigger';
 export * from './MenuTrigger.types';
 export * from './renderMenuTrigger';
-export * from './useMenuTrigger.styles';
+export * from './useMenuTrigger';
diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.styles.ts b/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts
similarity index 97%
rename from packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.styles.ts
rename to packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts
index da15525001407..893288654a24b 100644
--- a/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.styles.ts
+++ b/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
-import { useFocusFinders } from '@fluentui/react-tabster';
+import { useFocusFinders, useRestoreFocusTarget } from '@fluentui/react-tabster';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';
 import {
@@ -31,6 +31,7 @@ export const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerSta
   const triggerId = useMenuContext_unstable(context => context.triggerId);
   const openOnHover = useMenuContext_unstable(context => context.openOnHover);
   const openOnContext = useMenuContext_unstable(context => context.openOnContext);
+  const restoreFocusTargetAttribute = useRestoreFocusTarget();
 
   const isSubmenu = useIsSubmenu();
 
@@ -135,6 +136,7 @@ export const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerSta
   const triggerChildProps = {
     'aria-haspopup': 'menu',
     'aria-expanded': !open && !isSubmenu ? undefined : open,
+    ...restoreFocusTargetAttribute,
     ...contextMenuProps,
     onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),
     onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),
diff --git a/packages/react-components/react-menu/stories/Menu/MenuAnchorToTarget.stories.tsx b/packages/react-components/react-menu/stories/Menu/MenuAnchorToTarget.stories.tsx
index 90861dbf3656b..cbb186374ae13 100644
--- a/packages/react-components/react-menu/stories/Menu/MenuAnchorToTarget.stories.tsx
+++ b/packages/react-components/react-menu/stories/Menu/MenuAnchorToTarget.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Button, Menu, MenuList, MenuItem, MenuPopover } from '@fluentui/react-components';
+import { Button, Menu, MenuList, MenuItem, MenuPopover, useRestoreFocusTarget } from '@fluentui/react-components';
 import type { MenuProps, PositioningImperativeRef } from '@fluentui/react-components';
 
 export const AnchorToCustomTarget = () => {
@@ -17,10 +17,14 @@ export const AnchorToCustomTarget = () => {
     }
   }, [buttonRef, positioningRef]);
 
+  const restoreFocusTargetAttribute = useRestoreFocusTarget();
+
   return (
     <>
-      <Button onClick={() => setOpen(s => !s)}>Open menu</Button>
-      <Button ref={buttonRef} onClick={() => setOpen(s => !s)}>
+      <Button {...restoreFocusTargetAttribute} onClick={() => setOpen(s => !s)}>
+        Open menu
+      </Button>
+      <Button {...restoreFocusTargetAttribute} ref={buttonRef} onClick={() => setOpen(s => !s)}>
         Custom target
       </Button>
       <Menu open={open} onOpenChange={onOpenChange} positioning={{ positioningRef }}>
diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap b/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap
index d5445f25375b2..bad1f93ae7068 100644
--- a/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap
+++ b/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`PopoverSurface renders a default state 1`] = `
 <div
   aria-label="test"
   class="fui-PopoverSurface"
-  data-tabster="{\\"deloser\\":{},\\"modalizer\\":{\\"id\\":\\"modal-1\\",\\"isOthersAccessible\\":true,\\"isAlwaysAccessible\\":true}}"
+  data-tabster="{\\"restorer\\":{\\"type\\":0},\\"modalizer\\":{\\"id\\":\\"modal-1\\",\\"isOthersAccessible\\":true,\\"isAlwaysAccessible\\":true}}"
   data-testid="component"
   role="group"
 >
diff --git a/packages/react-components/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx b/packages/react-components/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
index 21823e2282749..7045032e9256d 100644
--- a/packages/react-components/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
+++ b/packages/react-components/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
@@ -115,7 +115,7 @@ describe('PopoverTrigger', () => {
       Array [
         <button
           aria-expanded="false"
-          data-tabster="{\\"deloser\\":{}}"
+          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
         >
           Trigger
         </button>,
@@ -145,7 +145,7 @@ describe('PopoverTrigger', () => {
       Array [
         <button
           aria-expanded="false"
-          data-tabster="{\\"deloser\\":{}}"
+          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
         >
           Trigger
         </button>,
diff --git a/packages/react-components/react-popover/src/components/PopoverTrigger/__snapshots__/PopoverTrigger.test.tsx.snap b/packages/react-components/react-popover/src/components/PopoverTrigger/__snapshots__/PopoverTrigger.test.tsx.snap
index 6398b95b98600..fa1526a18e427 100644
--- a/packages/react-components/react-popover/src/components/PopoverTrigger/__snapshots__/PopoverTrigger.test.tsx.snap
+++ b/packages/react-components/react-popover/src/components/PopoverTrigger/__snapshots__/PopoverTrigger.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PopoverTrigger renders a default state 1`] = `
 <button
   aria-expanded="false"
-  data-tabster="{\\"deloser\\":{}}"
+  data-tabster="{\\"restorer\\":{\\"type\\":1}}"
   onClick={[Function]}
   onContextMenu={[Function]}
   onKeyDown={[Function]}
diff --git a/packages/react-components/react-popover/stories/Popover/PopoverWithoutTrigger.stories.tsx b/packages/react-components/react-popover/stories/Popover/PopoverWithoutTrigger.stories.tsx
new file mode 100644
index 0000000000000..a5b8c1b706b4c
--- /dev/null
+++ b/packages/react-components/react-popover/stories/Popover/PopoverWithoutTrigger.stories.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+  makeStyles,
+  shorthands,
+  Button,
+  Popover,
+  PopoverSurface,
+  useId,
+  useRestoreFocusTarget,
+} from '@fluentui/react-components';
+import type { PositioningImperativeRef } from '@fluentui/react-components';
+const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    ...shorthands.gap('10px'),
+  },
+
+  contentHeader: {
+    marginTop: '0',
+  },
+});
+
+export const WithoutTrigger = () => {
+  const [open, setOpen] = React.useState(false);
+  const headerId = useId();
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const positioningRef = React.useRef<PositioningImperativeRef>(null);
+  const styles = useStyles();
+  const restoreFocusTargetAttribute = useRestoreFocusTarget();
+
+  React.useEffect(() => {
+    if (buttonRef.current) {
+      positioningRef.current?.setTarget(buttonRef.current);
+    }
+  }, [buttonRef, positioningRef]);
+
+  return (
+    <div className={styles.container}>
+      <Button {...restoreFocusTargetAttribute} ref={buttonRef} onClick={() => setOpen(s => !s)}>
+        Toggle popover
+      </Button>
+      <Popover onOpenChange={(_, data) => setOpen(data.open)} trapFocus open={open} positioning={{ positioningRef }}>
+        <PopoverSurface aria-labelledby={headerId}>
+          <div>
+            <h3 id={headerId} className={styles.contentHeader}>
+              Popover content
+            </h3>
+
+            <div>This is some popover content</div>
+          </div>
+
+          <div>
+            <Button>Action</Button>
+            <Button>Action</Button>
+          </div>
+        </PopoverSurface>
+      </Popover>
+    </div>
+  );
+};
+
+WithoutTrigger.parameters = {
+  docs: {
+    description: {
+      story: [
+        'When using a `Popover` without a `PopoverTrigger`, it is up to the user to make sure that the focus is restored correctly',
+        'when the popover is closed. This can be done quite easily by using the `useRestoreFocusTarget` hook. The `Popover` already',
+        'uses the `useRestoreFocusSource` hook directly, which will restore focus to the most recently focused target on close.',
+      ].join('\n'),
+    },
+  },
+};
diff --git a/packages/react-components/react-popover/stories/Popover/index.stories.tsx b/packages/react-components/react-popover/stories/Popover/index.stories.tsx
index d1da6cb3e95b2..de167c34ee118 100644
--- a/packages/react-components/react-popover/stories/Popover/index.stories.tsx
+++ b/packages/react-components/react-popover/stories/Popover/index.stories.tsx
@@ -10,6 +10,7 @@ export { ControllingOpenAndClose } from './PopoverControllingOpenAndClose.storie
 export { NestedPopovers } from './PopoverNestedPopovers.stories';
 export { AnchorToCustomTarget } from './PopoverAnchorToCustomTarget.stories';
 export { CustomTrigger } from './PopoverCustomTrigger.stories';
+export { WithoutTrigger } from './PopoverWithoutTrigger.stories';
 export { InternalUpdateContent } from './PopoverInternalUpdateContent.stories';
 export { Appearance } from './PopoverAppearance.stories';
 
diff --git a/packages/react-components/react-tabster/etc/react-tabster.api.md b/packages/react-components/react-tabster/etc/react-tabster.api.md
index 42a4a84a1eee7..4c9f9446e22ea 100644
--- a/packages/react-components/react-tabster/etc/react-tabster.api.md
+++ b/packages/react-components/react-tabster/etc/react-tabster.api.md
@@ -109,6 +109,12 @@ export interface UseModalAttributesOptions {
 // @public (undocumented)
 export function useObservedElement(name: string | string[]): Types.TabsterDOMAttribute;
 
+// @public
+export function useRestoreFocusSource(): Types.TabsterDOMAttribute;
+
+// @public
+export function useRestoreFocusTarget(): Types.TabsterDOMAttribute;
+
 // @internal
 export const useTabsterAttributes: (props: Types.TabsterAttributeProps) => Types.TabsterDOMAttribute;
 
diff --git a/packages/react-components/react-tabster/package.json b/packages/react-components/react-tabster/package.json
index 5a03f4f474efb..f3c89010a7492 100644
--- a/packages/react-components/react-tabster/package.json
+++ b/packages/react-components/react-tabster/package.json
@@ -37,7 +37,7 @@
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14",
     "keyborg": "^2.0.0",
-    "tabster": "^4.5.1"
+    "tabster": "^4.7.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
diff --git a/packages/react-components/react-tabster/src/hooks/index.ts b/packages/react-components/react-tabster/src/hooks/index.ts
index 0ec86b306a850..e48122cde41d7 100644
--- a/packages/react-components/react-tabster/src/hooks/index.ts
+++ b/packages/react-components/react-tabster/src/hooks/index.ts
@@ -9,3 +9,4 @@ export * from './useTabsterAttributes';
 export * from './useObservedElement';
 export * from './useMergeTabsterAttributes';
 export * from './useFocusObserved';
+export * from './useRestoreFocus';
diff --git a/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts b/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts
index 2a2a060879eed..c4734b164d516 100644
--- a/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts
+++ b/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts
@@ -1,6 +1,6 @@
 import { useId } from '@fluentui/react-utilities';
 import { useTabsterAttributes } from './useTabsterAttributes';
-import { getDeloser, getModalizer, Types as TabsterTypes } from 'tabster';
+import { getModalizer, getRestorer, Types as TabsterTypes } from 'tabster';
 import { useTabster } from './useTabster';
 
 export interface UseModalAttributesOptions {
@@ -43,15 +43,15 @@ export const useModalAttributes = (
 ): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {
   const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;
   const tabster = useTabster();
-  // Initializes the modalizer and deloser APIs
+  // Initializes the modalizer and restorer APIs
   if (tabster) {
     getModalizer(tabster);
-    getDeloser(tabster);
+    getRestorer(tabster);
   }
 
   const id = useId('modal-', options.id);
   const modalAttributes = useTabsterAttributes({
-    deloser: {},
+    restorer: { type: TabsterTypes.RestorerTypes.Source },
     modalizer: {
       id,
       isOthersAccessible: !trapFocus,
@@ -61,7 +61,7 @@ export const useModalAttributes = (
   });
 
   const triggerAttributes = useTabsterAttributes({
-    deloser: {},
+    restorer: { type: TabsterTypes.RestorerTypes.Target },
   });
 
   return { modalAttributes, triggerAttributes };
diff --git a/packages/react-components/react-tabster/src/hooks/useRestoreFocus.ts b/packages/react-components/react-tabster/src/hooks/useRestoreFocus.ts
new file mode 100644
index 0000000000000..0c46715319abb
--- /dev/null
+++ b/packages/react-components/react-tabster/src/hooks/useRestoreFocus.ts
@@ -0,0 +1,30 @@
+import { getRestorer, getTabsterAttribute, Types as TabsterTypes } from 'tabster';
+import { useTabster } from './useTabster';
+
+/**
+ * Focus will be restored to the most recent target element when it is lost from a source
+ * @returns Attribute to apply to the target element where focus is restored
+ */
+export function useRestoreFocusTarget(): TabsterTypes.TabsterDOMAttribute {
+  const tabster = useTabster();
+  // Initializes the restorer API
+  if (tabster) {
+    getRestorer(tabster);
+  }
+
+  return getTabsterAttribute({ restorer: { type: TabsterTypes.RestorerTypes.Target } });
+}
+
+/**
+ * Focus will be restored to the most recent target element when it is lost from a source
+ * @returns Attribute to apply to the element that might lose focus
+ */
+export function useRestoreFocusSource(): TabsterTypes.TabsterDOMAttribute {
+  const tabster = useTabster();
+  // Initializes the restorer API
+  if (tabster) {
+    getRestorer(tabster);
+  }
+
+  return getTabsterAttribute({ restorer: { type: TabsterTypes.RestorerTypes.Source } });
+}
diff --git a/packages/react-components/react-tabster/src/index.ts b/packages/react-components/react-tabster/src/index.ts
index c0d3f9eb475ac..2fe856afbed88 100644
--- a/packages/react-components/react-tabster/src/index.ts
+++ b/packages/react-components/react-tabster/src/index.ts
@@ -10,6 +10,8 @@ export {
   useObservedElement,
   useFocusObserved,
   useMergedTabsterAttributes_unstable,
+  useRestoreFocusSource,
+  useRestoreFocusTarget,
 } from './hooks/index';
 export type {
   UseArrowNavigationGroupOptions,
diff --git a/yarn.lock b/yarn.lock
index 48cf7984d9e90..2b03112f72437 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24628,10 +24628,10 @@ table@^6.0.4, table@^6.0.7:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tabster@^4.5.1:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/tabster/-/tabster-4.5.1.tgz#15540f07f7f5ad43c53224fa22f7f701a86bd372"
-  integrity sha512-Zbvy4RN308q2siLBuzAFbx4LbCjeU6EnKcxAoEYhVSu8buZcrPFeUlcwfU5AvkrwYU/rq3lNl5E7millpuWITw==
+tabster@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/tabster/-/tabster-4.7.0.tgz#0c12e9e14e83a950e3a97e35ead17c255e8f2772"
+  integrity sha512-8+arpE2WOvhdU2bvU5GEaoaICbLBNNh8WhW9q85KeSOg4sIvRPfAI2/j18UxUnKT8Fv32zkbvEfToEf9Y1Sfug==
   dependencies:
     keyborg "^2.0.0"
     tslib "^2.3.1"

From e59b4b305eb656c5af005fefbfa2b1f69afcdc43 Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Tue, 25 Jul 2023 15:09:45 +0200
Subject: [PATCH 11/37] feat(react-menu, react-positioning): update maxSize to
 prevent double scrollbar for Menu in small viewport (#28622)

* fix

* conditional overflowy

* upd

* chg

* api

* use overflow scroll in test

* f

* scroll->auto
---
 .../ScrollableMenuSmallViewport.stories.tsx   | 85 +++++++++++++++++++
 .../src/stories/Menu/index.stories.tsx        |  1 +
 ...-03f8268f-d187-4f13-ac82-48548dfa3c97.json |  7 ++
 ...-f6515d84-5f8b-4649-90dc-7d0cf179d176.json |  7 ++
 .../react-menu/etc/react-menu.api.md          |  1 +
 .../MenuItem/useMenuItemStyles.styles.ts      |  1 +
 .../src/components/MenuList/MenuList.types.ts |  5 ++
 .../src/components/MenuList/useMenuList.ts    |  1 +
 .../MenuList/useMenuListStyles.styles.ts      | 10 ++-
 .../src/middleware/maxSize.ts                 | 40 ++++-----
 10 files changed, 137 insertions(+), 21 deletions(-)
 create mode 100644 apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx
 create mode 100644 change/@fluentui-react-menu-03f8268f-d187-4f13-ac82-48548dfa3c97.json
 create mode 100644 change/@fluentui-react-positioning-f6515d84-5f8b-4649-90dc-7d0cf179d176.json

diff --git a/apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx
new file mode 100644
index 0000000000000..272d85c284ade
--- /dev/null
+++ b/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>
+);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/index.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/index.stories.tsx
index bf47e1347ee3b..e94ae2cfa1d31 100644
--- a/apps/vr-tests-react-components/src/stories/Menu/index.stories.tsx
+++ b/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',
diff --git a/change/@fluentui-react-menu-03f8268f-d187-4f13-ac82-48548dfa3c97.json b/change/@fluentui-react-menu-03f8268f-d187-4f13-ac82-48548dfa3c97.json
new file mode 100644
index 0000000000000..1bf40f9e08652
--- /dev/null
+++ b/change/@fluentui-react-menu-03f8268f-d187-4f13-ac82-48548dfa3c97.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: update style to prevent double scrollbar",
+  "packageName": "@fluentui/react-menu",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-positioning-f6515d84-5f8b-4649-90dc-7d0cf179d176.json b/change/@fluentui-react-positioning-f6515d84-5f8b-4649-90dc-7d0cf179d176.json
new file mode 100644
index 0000000000000..72324923c9039
--- /dev/null
+++ b/change/@fluentui-react-positioning-f6515d84-5f8b-4649-90dc-7d0cf179d176.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: update maxSize middleware to apply height/width when overflow",
+  "packageName": "@fluentui/react-positioning",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-menu/etc/react-menu.api.md b/packages/react-components/react-menu/etc/react-menu.api.md
index 5d7d56f6127bb..842259d4efc19 100644
--- a/packages/react-components/react-menu/etc/react-menu.api.md
+++ b/packages/react-components/react-menu/etc/react-menu.api.md
@@ -241,6 +241,7 @@ export type MenuListState = ComponentState<MenuListSlots> & Required<Pick<MenuLi
     selectRadio: SelectableHandler;
     setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;
     toggleCheckbox: SelectableHandler;
+    hasMenuContext?: boolean;
 };
 
 // @public
diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
index 45bb3f5b5f619..8e9f4cf354049 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
+++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -27,6 +27,7 @@ const useStyles = makeStyles({
     paddingRight: '6px',
     paddingLeft: '6px',
     height: '32px',
+    minHeight: '32px',
     display: 'flex',
     alignItems: 'center',
     fontSize: tokens.fontSizeBase300,
diff --git a/packages/react-components/react-menu/src/components/MenuList/MenuList.types.ts b/packages/react-components/react-menu/src/components/MenuList/MenuList.types.ts
index a38bb1e882d21..7e469e730f611 100644
--- a/packages/react-components/react-menu/src/components/MenuList/MenuList.types.ts
+++ b/packages/react-components/react-menu/src/components/MenuList/MenuList.types.ts
@@ -63,6 +63,11 @@ export type MenuListState = ComponentState<MenuListSlots> &
      * Toggles the state of a checkbox item
      */
     toggleCheckbox: SelectableHandler;
+
+    /**
+     * States if the MenuList is inside MenuContext
+     */
+    hasMenuContext?: boolean;
   };
 
 export type MenuListContextValues = {
diff --git a/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts b/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts
index 561439c243da9..4def0247772bb 100644
--- a/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts
+++ b/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts
@@ -118,6 +118,7 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
     hasIcons: menuContext.hasIcons || false,
     hasCheckmarks: menuContext.hasCheckmarks || false,
     checkedValues,
+    hasMenuContext,
     setFocusByFirstCharacter,
     selectRadio,
     toggleCheckbox,
diff --git a/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts b/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts
index e445d37c291f8..59432241800e9 100644
--- a/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts
+++ b/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts
@@ -12,6 +12,9 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     ...shorthands.gap('2px'),
   },
+  hasMenuContext: {
+    height: '100%',
+  },
 });
 
 /**
@@ -19,6 +22,11 @@ const useStyles = makeStyles({
  */
 export const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(
+    menuListClassNames.root,
+    styles.root,
+    state.hasMenuContext && styles.hasMenuContext,
+    state.root.className,
+  );
   return state;
 };
diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.ts b/packages/react-components/react-positioning/src/middleware/maxSize.ts
index c37ade24333bf..3c3d4ed20143d 100644
--- a/packages/react-components/react-positioning/src/middleware/maxSize.ts
+++ b/packages/react-components/react-positioning/src/middleware/maxSize.ts
@@ -11,30 +11,30 @@ export function maxSize(autoSize: PositioningOptions['autoSize'], options: MaxSi
   return size({
     ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),
     apply({ availableHeight, availableWidth, elements, rects }) {
-      const applyMaxWidth =
-        autoSize === 'always' ||
-        autoSize === 'width-always' ||
-        (rects.floating.width > availableWidth && (autoSize === true || autoSize === 'width'));
+      if (autoSize) {
+        elements.floating.style.setProperty('box-sizing', 'border-box');
+      }
+
+      const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always';
+      const widthOverflow = rects.floating.width > availableWidth && (autoSize === true || autoSize === 'width');
 
-      const applyMaxHeight =
-        autoSize === 'always' ||
-        autoSize === 'height-always' ||
-        (rects.floating.height > availableHeight && (autoSize === true || autoSize === 'height'));
+      const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always';
+      const heightOverflow = rects.floating.height > availableHeight && (autoSize === true || autoSize === 'height');
 
-      if (applyMaxHeight) {
-        Object.assign<CSSStyleDeclaration, Partial<CSSStyleDeclaration>>(elements.floating.style, {
-          maxHeight: `${availableHeight}px`,
-          boxSizing: 'border-box',
-          overflowY: 'auto',
-        });
+      if (applyMaxHeight || heightOverflow) {
+        elements.floating.style.setProperty('max-height', `${availableHeight}px`);
+      }
+      if (heightOverflow) {
+        elements.floating.style.setProperty('height', `${availableHeight}px`);
+        elements.floating.style.setProperty('overflow-y', 'auto');
       }
 
-      if (applyMaxWidth) {
-        Object.assign<CSSStyleDeclaration, Partial<CSSStyleDeclaration>>(elements.floating.style, {
-          maxWidth: `${availableWidth}px`,
-          boxSizing: 'border-box',
-          overflowX: 'auto',
-        });
+      if (applyMaxWidth || widthOverflow) {
+        elements.floating.style.setProperty('max-width', `${availableWidth}px`);
+      }
+      if (widthOverflow) {
+        elements.floating.style.setProperty('width', `${availableWidth}px`);
+        elements.floating.style.setProperty('overflow-x', 'auto');
       }
     },
   });

From 8959c81f6a2ef8637a4a7d7dd8b67bd40aa64cd6 Mon Sep 17 00:00:00 2001
From: Fluent UI Build <fluentui-internal@service.microsoft.com>
Date: Tue, 25 Jul 2023 13:29:34 +0000
Subject: [PATCH 12/37] applying package updates

---
 ...-c98cbac7-b421-4898-a6b9-cd0cf7dfb500.json |   7 -
 ...-6624a20c-250b-4ee4-9803-35f573450f99.json |   7 -
 ...-19633d42-3236-478e-9cf9-aeb97a52ba2f.json |   7 -
 ...-b5fcd0d1-345c-4e84-9715-df646c74a3c9.json |   7 -
 ...-c8c22b83-b925-47db-ab90-c361d28995bb.json |   7 -
 ...-264aba89-04b7-4a50-86f2-f77d99b70a06.json |   7 -
 ...-54642078-ea6a-4423-8ea0-f5598e93fadb.json |   7 -
 ...-947a179a-446f-4171-b318-b4d9b224559c.json |   7 -
 ...-b303d0a4-11e5-4c7d-8606-db75f0af7dec.json |   7 -
 ...-6808bc34-7e2f-4001-9582-09a9860adef1.json |   7 -
 ...-d27d29cc-50d7-45b6-bac4-29db51800758.json |   7 -
 ...-5b15aaa9-20f7-44b3-a369-8096b4cdf7eb.json |   7 -
 ...-5df66655-eef3-48d3-96da-4d8feb59acb5.json |   7 -
 ...-2338b82c-710e-45b2-99b7-00235ab0daf5.json |   7 -
 ...-44506427-c898-415d-bad3-bb01892aa9bd.json |   7 -
 ...-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json |   7 -
 ...-a559711e-e7a0-4299-902f-72f7e782c95b.json |   7 -
 ...-abdebcd1-5ce1-49cc-8a81-2b637c8354b8.json |   7 -
 ...-5c7f36f1-a86f-471d-bdca-bd32b5bcaf61.json |   7 -
 ...-fdccbc10-8c41-442c-bac0-f034e5e3c266.json |   7 -
 ...-dd89211e-49c1-4b93-bed5-45248e0fbce6.json |   7 -
 ...-7b9c084f-1f6c-4255-a9b0-7a2266a4c630.json |   7 -
 ...-87d68562-a91a-45c0-bdd9-133e3a7d2616.json |   7 -
 ...-1d78057c-9d11-4af8-99d9-78ebee41661e.json |   7 -
 ...-aa5e86a1-a186-4ce7-b5d3-5cfed4369a47.json |   7 -
 ...-0543ec0f-24d5-434b-82d7-01457133a053.json |   7 -
 ...-503f7b00-0281-4c09-a2ef-2eeaabf38aee.json |   7 -
 ...-0321fb21-dac7-4362-9cb4-2457a2fce203.json |   7 -
 ...-94e2effa-fa5b-4373-bad4-d0e624254f22.json |   7 -
 ...-9bafa4eb-c107-4426-b422-56d0113f018b.json |   7 -
 ...-eab8f7dd-f7b8-4b8d-895a-012ad4eb3d68.json |   7 -
 ...-c0ff6814-1ae9-4231-a304-d985128bdc9b.json |   7 -
 ...-07ad44b7-68e5-4ab7-a567-fb993047256b.json |   7 -
 ...-3c6e628a-eeac-4b6e-ba1f-ef2f57a58c9a.json |   7 -
 ...-977289b7-1256-4054-948b-aa984f37e4c2.json |   7 -
 ...-ddf7694e-548f-4a39-bec8-ab7f30b1c301.json |   7 -
 .../priority-overflow/CHANGELOG.json          |  15 ++
 .../priority-overflow/CHANGELOG.md            |  11 +-
 .../priority-overflow/package.json            |   2 +-
 .../react-accordion/CHANGELOG.json            |  21 ++
 .../react-accordion/CHANGELOG.md              |  12 +-
 .../react-accordion/package.json              |   4 +-
 .../react-alert/CHANGELOG.json                |  33 +++
 .../react-components/react-alert/CHANGELOG.md |  14 +-
 .../react-components/react-alert/package.json |   8 +-
 .../react-avatar/CHANGELOG.json               |  39 +++
 .../react-avatar/CHANGELOG.md                 |  15 +-
 .../react-avatar/package.json                 |  10 +-
 .../react-badge/CHANGELOG.json                |  15 ++
 .../react-components/react-badge/CHANGELOG.md |  11 +-
 .../react-components/react-badge/package.json |   2 +-
 .../react-breadcrumb-preview/CHANGELOG.json   |  45 ++++
 .../react-breadcrumb-preview/CHANGELOG.md     |  16 +-
 .../react-breadcrumb-preview/package.json     |   8 +-
 .../react-button/CHANGELOG.json               |  21 ++
 .../react-button/CHANGELOG.md                 |  12 +-
 .../react-button/package.json                 |   4 +-
 .../react-card/CHANGELOG.json                 |  15 ++
 .../react-components/react-card/CHANGELOG.md  |  11 +-
 .../react-components/react-card/package.json  |   4 +-
 .../react-checkbox/CHANGELOG.json             |  27 +++
 .../react-checkbox/CHANGELOG.md               |  13 +-
 .../react-checkbox/package.json               |   6 +-
 .../react-combobox/CHANGELOG.json             |  27 +++
 .../react-combobox/CHANGELOG.md               |  13 +-
 .../react-combobox/package.json               |   6 +-
 .../react-components/CHANGELOG.json           | 229 ++++++++++++++++++
 .../react-components/CHANGELOG.md             |  81 ++++++-
 .../react-components/package.json             |  72 +++---
 .../CHANGELOG.json                            |  21 ++
 .../react-data-grid-react-window/CHANGELOG.md |  12 +-
 .../react-data-grid-react-window/package.json |   6 +-
 .../react-datepicker-compat/CHANGELOG.json    |  45 ++++
 .../react-datepicker-compat/CHANGELOG.md      |  16 +-
 .../react-datepicker-compat/package.json      |  12 +-
 .../react-dialog/CHANGELOG.json               |  33 +++
 .../react-dialog/CHANGELOG.md                 |  14 +-
 .../react-dialog/package.json                 |   6 +-
 .../react-drawer/CHANGELOG.json               |  15 ++
 .../react-drawer/CHANGELOG.md                 |  11 +-
 .../react-drawer/package.json                 |   4 +-
 .../react-field/CHANGELOG.json                |  15 ++
 .../react-components/react-field/CHANGELOG.md |  11 +-
 .../react-components/react-field/package.json |   2 +-
 .../react-infobutton/CHANGELOG.json           |  27 +++
 .../react-infobutton/CHANGELOG.md             |  13 +-
 .../react-infobutton/package.json             |   6 +-
 .../react-input/CHANGELOG.json                |  15 ++
 .../react-components/react-input/CHANGELOG.md |  11 +-
 .../react-components/react-input/package.json |   4 +-
 .../react-link/CHANGELOG.json                 |  15 ++
 .../react-components/react-link/CHANGELOG.md  |  11 +-
 .../react-components/react-link/package.json  |   4 +-
 .../react-menu/CHANGELOG.json                 |  33 +++
 .../react-components/react-menu/CHANGELOG.md  |  14 +-
 .../react-components/react-menu/package.json  |   6 +-
 .../react-migration-v0-v9/CHANGELOG.json      |  21 ++
 .../react-migration-v0-v9/CHANGELOG.md        |  12 +-
 .../react-migration-v0-v9/package.json        |   4 +-
 .../react-migration-v8-v9/CHANGELOG.json      |  21 ++
 .../react-migration-v8-v9/CHANGELOG.md        |  12 +-
 .../react-migration-v8-v9/package.json        |   4 +-
 .../react-overflow/CHANGELOG.json             |  21 ++
 .../react-overflow/CHANGELOG.md               |  12 +-
 .../react-overflow/package.json               |   4 +-
 .../react-persona/CHANGELOG.json              |  21 ++
 .../react-persona/CHANGELOG.md                |  12 +-
 .../react-persona/package.json                |   6 +-
 .../react-popover/CHANGELOG.json              |  21 ++
 .../react-popover/CHANGELOG.md                |  12 +-
 .../react-popover/package.json                |   6 +-
 .../react-portal-compat/CHANGELOG.json        |  21 ++
 .../react-portal-compat/CHANGELOG.md          |  12 +-
 .../react-portal-compat/package.json          |   6 +-
 .../react-portal/CHANGELOG.json               |  15 ++
 .../react-portal/CHANGELOG.md                 |  11 +-
 .../react-portal/package.json                 |   4 +-
 .../react-progress/CHANGELOG.json             |  15 ++
 .../react-progress/CHANGELOG.md               |  11 +-
 .../react-progress/package.json               |   4 +-
 .../react-provider/CHANGELOG.json             |  15 ++
 .../react-provider/CHANGELOG.md               |  11 +-
 .../react-provider/package.json               |   4 +-
 .../react-radio/CHANGELOG.json                |  27 +++
 .../react-components/react-radio/CHANGELOG.md |  13 +-
 .../react-components/react-radio/package.json |   6 +-
 .../react-search-preview/CHANGELOG.json       |  21 ++
 .../react-search-preview/CHANGELOG.md         |  12 +-
 .../react-search-preview/package.json         |   4 +-
 .../react-select/CHANGELOG.json               |  21 ++
 .../react-select/CHANGELOG.md                 |  12 +-
 .../react-select/package.json                 |   4 +-
 .../react-skeleton/CHANGELOG.json             |  15 ++
 .../react-skeleton/CHANGELOG.md               |  11 +-
 .../react-skeleton/package.json               |   4 +-
 .../react-slider/CHANGELOG.json               |  21 ++
 .../react-slider/CHANGELOG.md                 |  12 +-
 .../react-slider/package.json                 |   6 +-
 .../react-spinbutton/CHANGELOG.json           |  21 ++
 .../react-spinbutton/CHANGELOG.md             |  12 +-
 .../react-spinbutton/package.json             |   4 +-
 .../react-storybook-addon/package.json        |   2 +-
 .../react-switch/CHANGELOG.json               |  27 +++
 .../react-switch/CHANGELOG.md                 |  13 +-
 .../react-switch/package.json                 |   6 +-
 .../react-table/CHANGELOG.json                |  53 ++++
 .../react-components/react-table/CHANGELOG.md |  20 +-
 .../react-components/react-table/package.json |  10 +-
 .../react-tabs/CHANGELOG.json                 |  15 ++
 .../react-components/react-tabs/CHANGELOG.md  |  11 +-
 .../react-components/react-tabs/package.json  |   4 +-
 .../react-tabster/CHANGELOG.json              |  15 ++
 .../react-tabster/CHANGELOG.md                |  11 +-
 .../react-tabster/package.json                |   2 +-
 .../react-tags-preview/package.json           |   4 +-
 .../react-textarea/CHANGELOG.json             |  15 ++
 .../react-textarea/CHANGELOG.md               |  11 +-
 .../react-textarea/package.json               |   4 +-
 .../react-toast/CHANGELOG.json                |  27 +++
 .../react-components/react-toast/CHANGELOG.md |  13 +-
 .../react-components/react-toast/package.json |   6 +-
 .../react-toolbar/CHANGELOG.json              |  27 +++
 .../react-toolbar/CHANGELOG.md                |  13 +-
 .../react-toolbar/package.json                |   8 +-
 .../react-tooltip/CHANGELOG.json              |  15 ++
 .../react-tooltip/CHANGELOG.md                |  11 +-
 .../react-tooltip/package.json                |   4 +-
 .../react-tree/CHANGELOG.json                 |  63 +++++
 .../react-components/react-tree/CHANGELOG.md  |  19 +-
 .../react-components/react-tree/package.json  |  14 +-
 .../theme-designer/package.json               |   4 +-
 171 files changed, 1994 insertions(+), 453 deletions(-)
 delete mode 100644 change/@fluentui-priority-overflow-c98cbac7-b421-4898-a6b9-cd0cf7dfb500.json
 delete mode 100644 change/@fluentui-react-accordion-6624a20c-250b-4ee4-9803-35f573450f99.json
 delete mode 100644 change/@fluentui-react-alert-19633d42-3236-478e-9cf9-aeb97a52ba2f.json
 delete mode 100644 change/@fluentui-react-avatar-b5fcd0d1-345c-4e84-9715-df646c74a3c9.json
 delete mode 100644 change/@fluentui-react-badge-c8c22b83-b925-47db-ab90-c361d28995bb.json
 delete mode 100644 change/@fluentui-react-breadcrumb-preview-264aba89-04b7-4a50-86f2-f77d99b70a06.json
 delete mode 100644 change/@fluentui-react-breadcrumb-preview-54642078-ea6a-4423-8ea0-f5598e93fadb.json
 delete mode 100644 change/@fluentui-react-breadcrumb-preview-947a179a-446f-4171-b318-b4d9b224559c.json
 delete mode 100644 change/@fluentui-react-button-b303d0a4-11e5-4c7d-8606-db75f0af7dec.json
 delete mode 100644 change/@fluentui-react-checkbox-6808bc34-7e2f-4001-9582-09a9860adef1.json
 delete mode 100644 change/@fluentui-react-combobox-d27d29cc-50d7-45b6-bac4-29db51800758.json
 delete mode 100644 change/@fluentui-react-components-5b15aaa9-20f7-44b3-a369-8096b4cdf7eb.json
 delete mode 100644 change/@fluentui-react-components-5df66655-eef3-48d3-96da-4d8feb59acb5.json
 delete mode 100644 change/@fluentui-react-datepicker-compat-2338b82c-710e-45b2-99b7-00235ab0daf5.json
 delete mode 100644 change/@fluentui-react-dialog-44506427-c898-415d-bad3-bb01892aa9bd.json
 delete mode 100644 change/@fluentui-react-dialog-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json
 delete mode 100644 change/@fluentui-react-field-a559711e-e7a0-4299-902f-72f7e782c95b.json
 delete mode 100644 change/@fluentui-react-infobutton-abdebcd1-5ce1-49cc-8a81-2b637c8354b8.json
 delete mode 100644 change/@fluentui-react-menu-5c7f36f1-a86f-471d-bdca-bd32b5bcaf61.json
 delete mode 100644 change/@fluentui-react-menu-fdccbc10-8c41-442c-bac0-f034e5e3c266.json
 delete mode 100644 change/@fluentui-react-migration-v0-v9-dd89211e-49c1-4b93-bed5-45248e0fbce6.json
 delete mode 100644 change/@fluentui-react-migration-v8-v9-7b9c084f-1f6c-4255-a9b0-7a2266a4c630.json
 delete mode 100644 change/@fluentui-react-overflow-87d68562-a91a-45c0-bdd9-133e3a7d2616.json
 delete mode 100644 change/@fluentui-react-radio-1d78057c-9d11-4af8-99d9-78ebee41661e.json
 delete mode 100644 change/@fluentui-react-search-preview-aa5e86a1-a186-4ce7-b5d3-5cfed4369a47.json
 delete mode 100644 change/@fluentui-react-select-0543ec0f-24d5-434b-82d7-01457133a053.json
 delete mode 100644 change/@fluentui-react-spinbutton-503f7b00-0281-4c09-a2ef-2eeaabf38aee.json
 delete mode 100644 change/@fluentui-react-switch-0321fb21-dac7-4362-9cb4-2457a2fce203.json
 delete mode 100644 change/@fluentui-react-table-94e2effa-fa5b-4373-bad4-d0e624254f22.json
 delete mode 100644 change/@fluentui-react-table-9bafa4eb-c107-4426-b422-56d0113f018b.json
 delete mode 100644 change/@fluentui-react-table-eab8f7dd-f7b8-4b8d-895a-012ad4eb3d68.json
 delete mode 100644 change/@fluentui-react-tabster-c0ff6814-1ae9-4231-a304-d985128bdc9b.json
 delete mode 100644 change/@fluentui-react-toast-07ad44b7-68e5-4ab7-a567-fb993047256b.json
 delete mode 100644 change/@fluentui-react-tree-3c6e628a-eeac-4b6e-ba1f-ef2f57a58c9a.json
 delete mode 100644 change/@fluentui-react-tree-977289b7-1256-4054-948b-aa984f37e4c2.json
 delete mode 100644 change/@fluentui-react-tree-ddf7694e-548f-4a39-bec8-ab7f30b1c301.json

diff --git a/change/@fluentui-priority-overflow-c98cbac7-b421-4898-a6b9-cd0cf7dfb500.json b/change/@fluentui-priority-overflow-c98cbac7-b421-4898-a6b9-cd0cf7dfb500.json
deleted file mode 100644
index 832af5bdb03ff..0000000000000
--- a/change/@fluentui-priority-overflow-c98cbac7-b421-4898-a6b9-cd0cf7dfb500.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: Overflow update should run show/hide steps twice",
-  "packageName": "@fluentui/priority-overflow",
-  "email": "lingfan.gao@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-accordion-6624a20c-250b-4ee4-9803-35f573450f99.json b/change/@fluentui-react-accordion-6624a20c-250b-4ee4-9803-35f573450f99.json
deleted file mode 100644
index bc866e88638ba..0000000000000
--- a/change/@fluentui-react-accordion-6624a20c-250b-4ee4-9803-35f573450f99.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-accordion",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-alert-19633d42-3236-478e-9cf9-aeb97a52ba2f.json b/change/@fluentui-react-alert-19633d42-3236-478e-9cf9-aeb97a52ba2f.json
deleted file mode 100644
index 0ca94ec2e52e4..0000000000000
--- a/change/@fluentui-react-alert-19633d42-3236-478e-9cf9-aeb97a52ba2f.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-alert",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-avatar-b5fcd0d1-345c-4e84-9715-df646c74a3c9.json b/change/@fluentui-react-avatar-b5fcd0d1-345c-4e84-9715-df646c74a3c9.json
deleted file mode 100644
index 4442baba008b1..0000000000000
--- a/change/@fluentui-react-avatar-b5fcd0d1-345c-4e84-9715-df646c74a3c9.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-avatar",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-badge-c8c22b83-b925-47db-ab90-c361d28995bb.json b/change/@fluentui-react-badge-c8c22b83-b925-47db-ab90-c361d28995bb.json
deleted file mode 100644
index 2459dc40e0ecb..0000000000000
--- a/change/@fluentui-react-badge-c8c22b83-b925-47db-ab90-c361d28995bb.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-badge",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-breadcrumb-preview-264aba89-04b7-4a50-86f2-f77d99b70a06.json b/change/@fluentui-react-breadcrumb-preview-264aba89-04b7-4a50-86f2-f77d99b70a06.json
deleted file mode 100644
index b4d96fa9a2a4f..0000000000000
--- a/change/@fluentui-react-breadcrumb-preview-264aba89-04b7-4a50-86f2-f77d99b70a06.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-breadcrumb-preview",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-breadcrumb-preview-54642078-ea6a-4423-8ea0-f5598e93fadb.json b/change/@fluentui-react-breadcrumb-preview-54642078-ea6a-4423-8ea0-f5598e93fadb.json
deleted file mode 100644
index d99a05fa422cb..0000000000000
--- a/change/@fluentui-react-breadcrumb-preview-54642078-ea6a-4423-8ea0-f5598e93fadb.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: updated readme, replaced MenuItem with MenuItemLink",
-  "packageName": "@fluentui/react-breadcrumb-preview",
-  "email": "vkozlova@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-breadcrumb-preview-947a179a-446f-4171-b318-b4d9b224559c.json b/change/@fluentui-react-breadcrumb-preview-947a179a-446f-4171-b318-b4d9b224559c.json
deleted file mode 100644
index f11004c42e1a5..0000000000000
--- a/change/@fluentui-react-breadcrumb-preview-947a179a-446f-4171-b318-b4d9b224559c.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: spacing in BreadcrumbButton and Link, added more examples to the stories",
-  "packageName": "@fluentui/react-breadcrumb-preview",
-  "email": "vkozlova@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-button-b303d0a4-11e5-4c7d-8606-db75f0af7dec.json b/change/@fluentui-react-button-b303d0a4-11e5-4c7d-8606-db75f0af7dec.json
deleted file mode 100644
index 4f08f2bc99eae..0000000000000
--- a/change/@fluentui-react-button-b303d0a4-11e5-4c7d-8606-db75f0af7dec.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-button",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-checkbox-6808bc34-7e2f-4001-9582-09a9860adef1.json b/change/@fluentui-react-checkbox-6808bc34-7e2f-4001-9582-09a9860adef1.json
deleted file mode 100644
index 6cc7e789a49c9..0000000000000
--- a/change/@fluentui-react-checkbox-6808bc34-7e2f-4001-9582-09a9860adef1.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-checkbox",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-combobox-d27d29cc-50d7-45b6-bac4-29db51800758.json b/change/@fluentui-react-combobox-d27d29cc-50d7-45b6-bac4-29db51800758.json
deleted file mode 100644
index 7d3e704272874..0000000000000
--- a/change/@fluentui-react-combobox-d27d29cc-50d7-45b6-bac4-29db51800758.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-combobox",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-components-5b15aaa9-20f7-44b3-a369-8096b4cdf7eb.json b/change/@fluentui-react-components-5b15aaa9-20f7-44b3-a369-8096b4cdf7eb.json
deleted file mode 100644
index 187195fcdf05c..0000000000000
--- a/change/@fluentui-react-components-5b15aaa9-20f7-44b3-a369-8096b4cdf7eb.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: Export useRestoreFocusTarget and useRestoreFocusSource",
-  "packageName": "@fluentui/react-components",
-  "email": "lingfan.gao@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-components-5df66655-eef3-48d3-96da-4d8feb59acb5.json b/change/@fluentui-react-components-5df66655-eef3-48d3-96da-4d8feb59acb5.json
deleted file mode 100644
index 03e75c0038d20..0000000000000
--- a/change/@fluentui-react-components-5df66655-eef3-48d3-96da-4d8feb59acb5.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "feat: exports FlatTree",
-  "packageName": "@fluentui/react-components",
-  "email": "bernardo.sunderhus@gmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-datepicker-compat-2338b82c-710e-45b2-99b7-00235ab0daf5.json b/change/@fluentui-react-datepicker-compat-2338b82c-710e-45b2-99b7-00235ab0daf5.json
deleted file mode 100644
index bf999d68105fa..0000000000000
--- a/change/@fluentui-react-datepicker-compat-2338b82c-710e-45b2-99b7-00235ab0daf5.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-datepicker-compat",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-dialog-44506427-c898-415d-bad3-bb01892aa9bd.json b/change/@fluentui-react-dialog-44506427-c898-415d-bad3-bb01892aa9bd.json
deleted file mode 100644
index 24af5a87aa909..0000000000000
--- a/change/@fluentui-react-dialog-44506427-c898-415d-bad3-bb01892aa9bd.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-dialog",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-dialog-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json b/change/@fluentui-react-dialog-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json
deleted file mode 100644
index 0c0bf453cac7b..0000000000000
--- a/change/@fluentui-react-dialog-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: Focus should restore to a DialogTrigger outside of a Dialog",
-  "packageName": "@fluentui/react-dialog",
-  "email": "lingfan.gao@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-field-a559711e-e7a0-4299-902f-72f7e782c95b.json b/change/@fluentui-react-field-a559711e-e7a0-4299-902f-72f7e782c95b.json
deleted file mode 100644
index 060109f69eeca..0000000000000
--- a/change/@fluentui-react-field-a559711e-e7a0-4299-902f-72f7e782c95b.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-field",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-infobutton-abdebcd1-5ce1-49cc-8a81-2b637c8354b8.json b/change/@fluentui-react-infobutton-abdebcd1-5ce1-49cc-8a81-2b637c8354b8.json
deleted file mode 100644
index 5af8186eff2cc..0000000000000
--- a/change/@fluentui-react-infobutton-abdebcd1-5ce1-49cc-8a81-2b637c8354b8.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-infobutton",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-menu-5c7f36f1-a86f-471d-bdca-bd32b5bcaf61.json b/change/@fluentui-react-menu-5c7f36f1-a86f-471d-bdca-bd32b5bcaf61.json
deleted file mode 100644
index dc2b12c080ea5..0000000000000
--- a/change/@fluentui-react-menu-5c7f36f1-a86f-471d-bdca-bd32b5bcaf61.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-menu",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-menu-fdccbc10-8c41-442c-bac0-f034e5e3c266.json b/change/@fluentui-react-menu-fdccbc10-8c41-442c-bac0-f034e5e3c266.json
deleted file mode 100644
index f58d41be215d6..0000000000000
--- a/change/@fluentui-react-menu-fdccbc10-8c41-442c-bac0-f034e5e3c266.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "refactor: Remove custom focus code in favour of useRestoreFocus hooks",
-  "packageName": "@fluentui/react-menu",
-  "email": "lingfan.gao@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-migration-v0-v9-dd89211e-49c1-4b93-bed5-45248e0fbce6.json b/change/@fluentui-react-migration-v0-v9-dd89211e-49c1-4b93-bed5-45248e0fbce6.json
deleted file mode 100644
index 41dd0603a1220..0000000000000
--- a/change/@fluentui-react-migration-v0-v9-dd89211e-49c1-4b93-bed5-45248e0fbce6.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-migration-v0-v9",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-migration-v8-v9-7b9c084f-1f6c-4255-a9b0-7a2266a4c630.json b/change/@fluentui-react-migration-v8-v9-7b9c084f-1f6c-4255-a9b0-7a2266a4c630.json
deleted file mode 100644
index 3c7572e260e6e..0000000000000
--- a/change/@fluentui-react-migration-v8-v9-7b9c084f-1f6c-4255-a9b0-7a2266a4c630.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-migration-v8-v9",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-overflow-87d68562-a91a-45c0-bdd9-133e3a7d2616.json b/change/@fluentui-react-overflow-87d68562-a91a-45c0-bdd9-133e3a7d2616.json
deleted file mode 100644
index 5bfd0c7455d35..0000000000000
--- a/change/@fluentui-react-overflow-87d68562-a91a-45c0-bdd9-133e3a7d2616.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: Overflow update should run show/hide steps twice",
-  "packageName": "@fluentui/react-overflow",
-  "email": "lingfan.gao@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-radio-1d78057c-9d11-4af8-99d9-78ebee41661e.json b/change/@fluentui-react-radio-1d78057c-9d11-4af8-99d9-78ebee41661e.json
deleted file mode 100644
index aed765eed5279..0000000000000
--- a/change/@fluentui-react-radio-1d78057c-9d11-4af8-99d9-78ebee41661e.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-radio",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-search-preview-aa5e86a1-a186-4ce7-b5d3-5cfed4369a47.json b/change/@fluentui-react-search-preview-aa5e86a1-a186-4ce7-b5d3-5cfed4369a47.json
deleted file mode 100644
index 1229d2a4f6706..0000000000000
--- a/change/@fluentui-react-search-preview-aa5e86a1-a186-4ce7-b5d3-5cfed4369a47.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-search-preview",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-select-0543ec0f-24d5-434b-82d7-01457133a053.json b/change/@fluentui-react-select-0543ec0f-24d5-434b-82d7-01457133a053.json
deleted file mode 100644
index c77300ace8d4b..0000000000000
--- a/change/@fluentui-react-select-0543ec0f-24d5-434b-82d7-01457133a053.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-select",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-spinbutton-503f7b00-0281-4c09-a2ef-2eeaabf38aee.json b/change/@fluentui-react-spinbutton-503f7b00-0281-4c09-a2ef-2eeaabf38aee.json
deleted file mode 100644
index ae838739e455b..0000000000000
--- a/change/@fluentui-react-spinbutton-503f7b00-0281-4c09-a2ef-2eeaabf38aee.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-spinbutton",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-switch-0321fb21-dac7-4362-9cb4-2457a2fce203.json b/change/@fluentui-react-switch-0321fb21-dac7-4362-9cb4-2457a2fce203.json
deleted file mode 100644
index 62a420d06a36e..0000000000000
--- a/change/@fluentui-react-switch-0321fb21-dac7-4362-9cb4-2457a2fce203.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-switch",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-table-94e2effa-fa5b-4373-bad4-d0e624254f22.json b/change/@fluentui-react-table-94e2effa-fa5b-4373-bad4-d0e624254f22.json
deleted file mode 100644
index 6f49efbdb8626..0000000000000
--- a/change/@fluentui-react-table-94e2effa-fa5b-4373-bad4-d0e624254f22.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "Table/DataGrid: Improve keyboard column resizing experience",
-  "packageName": "@fluentui/react-table",
-  "email": "jirivyhnalek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-table-9bafa4eb-c107-4426-b422-56d0113f018b.json b/change/@fluentui-react-table-9bafa4eb-c107-4426-b422-56d0113f018b.json
deleted file mode 100644
index 42bbd5b511f14..0000000000000
--- a/change/@fluentui-react-table-9bafa4eb-c107-4426-b422-56d0113f018b.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "28456",
-  "packageName": "@fluentui/react-table",
-  "email": "lingfan.gao@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-table-eab8f7dd-f7b8-4b8d-895a-012ad4eb3d68.json b/change/@fluentui-react-table-eab8f7dd-f7b8-4b8d-895a-012ad4eb3d68.json
deleted file mode 100644
index 63af935e48c48..0000000000000
--- a/change/@fluentui-react-table-eab8f7dd-f7b8-4b8d-895a-012ad4eb3d68.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-table",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-tabster-c0ff6814-1ae9-4231-a304-d985128bdc9b.json b/change/@fluentui-react-tabster-c0ff6814-1ae9-4231-a304-d985128bdc9b.json
deleted file mode 100644
index 5571d5c3038b0..0000000000000
--- a/change/@fluentui-react-tabster-c0ff6814-1ae9-4231-a304-d985128bdc9b.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: Implement useRestoreFocusSource and useRestoreFocusTarget based on the tabster restorer API",
-  "packageName": "@fluentui/react-tabster",
-  "email": "lingfan.gao@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-toast-07ad44b7-68e5-4ab7-a567-fb993047256b.json b/change/@fluentui-react-toast-07ad44b7-68e5-4ab7-a567-fb993047256b.json
deleted file mode 100644
index d49f0da38a8b5..0000000000000
--- a/change/@fluentui-react-toast-07ad44b7-68e5-4ab7-a567-fb993047256b.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-toast",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-tree-3c6e628a-eeac-4b6e-ba1f-ef2f57a58c9a.json b/change/@fluentui-react-tree-3c6e628a-eeac-4b6e-ba1f-ef2f57a58c9a.json
deleted file mode 100644
index 161096b18a5cc..0000000000000
--- a/change/@fluentui-react-tree-3c6e628a-eeac-4b6e-ba1f-ef2f57a58c9a.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "chore: Update react-icons version to pick up fowardref change.",
-  "packageName": "@fluentui/react-tree",
-  "email": "ololubek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-tree-977289b7-1256-4054-948b-aa984f37e4c2.json b/change/@fluentui-react-tree-977289b7-1256-4054-948b-aa984f37e4c2.json
deleted file mode 100644
index 45ec9c69ada1f..0000000000000
--- a/change/@fluentui-react-tree-977289b7-1256-4054-948b-aa984f37e4c2.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "chore: moves slots from TreeItem to TreeItemLayout",
-  "packageName": "@fluentui/react-tree",
-  "email": "bernardo.sunderhus@gmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-tree-ddf7694e-548f-4a39-bec8-ab7f30b1c301.json b/change/@fluentui-react-tree-ddf7694e-548f-4a39-bec8-ab7f30b1c301.json
deleted file mode 100644
index 62d32603c749f..0000000000000
--- a/change/@fluentui-react-tree-ddf7694e-548f-4a39-bec8-ab7f30b1c301.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "feat: creates FlatTree component",
-  "packageName": "@fluentui/react-tree",
-  "email": "bernardo.sunderhus@gmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/react-components/priority-overflow/CHANGELOG.json b/packages/react-components/priority-overflow/CHANGELOG.json
index 070685712243c..2bb78da2f8d79 100644
--- a/packages/react-components/priority-overflow/CHANGELOG.json
+++ b/packages/react-components/priority-overflow/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/priority-overflow",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:15 GMT",
+      "tag": "@fluentui/priority-overflow_v9.1.2",
+      "version": "9.1.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/priority-overflow",
+            "commit": "d8493a92520cacac29e9fe341a17d3595bc48343",
+            "comment": "fix: Overflow update should run show/hide steps twice"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:25 GMT",
       "tag": "@fluentui/priority-overflow_v9.1.1",
diff --git a/packages/react-components/priority-overflow/CHANGELOG.md b/packages/react-components/priority-overflow/CHANGELOG.md
index 02094e8ff5ec4..82f751ca37014 100644
--- a/packages/react-components/priority-overflow/CHANGELOG.md
+++ b/packages/react-components/priority-overflow/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/priority-overflow
 
-This log was last generated on Mon, 26 Jun 2023 09:53:53 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/priority-overflow_v9.1.2)
+
+Tue, 25 Jul 2023 13:29:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/priority-overflow_v9.1.1..@fluentui/priority-overflow_v9.1.2)
+
+### Patches
+
+- fix: Overflow update should run show/hide steps twice ([PR #28628](https://github.com/microsoft/fluentui/pull/28628) by lingfan.gao@microsoft.com)
+
 ## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/priority-overflow_v9.1.1)
 
 Mon, 26 Jun 2023 09:53:53 GMT 
diff --git a/packages/react-components/priority-overflow/package.json b/packages/react-components/priority-overflow/package.json
index 53bf447b5086d..e90ad82889382 100644
--- a/packages/react-components/priority-overflow/package.json
+++ b/packages/react-components/priority-overflow/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/priority-overflow",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "description": "Vanilla JS utilities to implement overflow menus",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-components/react-accordion/CHANGELOG.json b/packages/react-components/react-accordion/CHANGELOG.json
index 333e5132ffd70..88cd01a27157f 100644
--- a/packages/react-components/react-accordion/CHANGELOG.json
+++ b/packages/react-components/react-accordion/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-accordion",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:16 GMT",
+      "tag": "@fluentui/react-accordion_v9.1.25",
+      "version": "9.1.25",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-accordion",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-accordion",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:25 GMT",
       "tag": "@fluentui/react-accordion_v9.1.24",
diff --git a/packages/react-components/react-accordion/CHANGELOG.md b/packages/react-components/react-accordion/CHANGELOG.md
index 9419cacc7e2cc..6582b1e8c5feb 100644
--- a/packages/react-components/react-accordion/CHANGELOG.md
+++ b/packages/react-components/react-accordion/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-accordion
 
-This log was last generated on Thu, 20 Jul 2023 18:27:25 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.1.25)
+
+Tue, 25 Jul 2023 13:29:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.1.24..@fluentui/react-accordion_v9.1.25)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.1.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.1.24)
 
 Thu, 20 Jul 2023 18:27:25 GMT 
diff --git a/packages/react-components/react-accordion/package.json b/packages/react-components/react-accordion/package.json
index cd6b81fa5af83..5eee0ad2d7c24 100644
--- a/packages/react-components/react-accordion/package.json
+++ b/packages/react-components/react-accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-accordion",
-  "version": "9.1.24",
+  "version": "9.1.25",
   "description": "Fluent UI accordion component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,7 +38,7 @@
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-alert/CHANGELOG.json b/packages/react-components/react-alert/CHANGELOG.json
index 46307a4f4d9b5..ffafc2accb294 100644
--- a/packages/react-components/react-alert/CHANGELOG.json
+++ b/packages/react-components/react-alert/CHANGELOG.json
@@ -1,6 +1,39 @@
 {
   "name": "@fluentui/react-alert",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:16 GMT",
+      "tag": "@fluentui/react-alert_v9.0.0-beta.60",
+      "version": "9.0.0-beta.60",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-alert",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-alert",
+            "comment": "Bump @fluentui/react-avatar to v9.5.14",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-alert",
+            "comment": "Bump @fluentui/react-button to v9.3.25",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-alert",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:25 GMT",
       "tag": "@fluentui/react-alert_v9.0.0-beta.59",
diff --git a/packages/react-components/react-alert/CHANGELOG.md b/packages/react-components/react-alert/CHANGELOG.md
index 55ff7637313cf..5834b1fdfdda6 100644
--- a/packages/react-components/react-alert/CHANGELOG.md
+++ b/packages/react-components/react-alert/CHANGELOG.md
@@ -1,9 +1,21 @@
 # Change Log - @fluentui/react-alert
 
-This log was last generated on Thu, 20 Jul 2023 18:27:25 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.60](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.60)
+
+Tue, 25 Jul 2023 13:29:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.59..@fluentui/react-alert_v9.0.0-beta.60)
+
+### Changes
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-avatar to v9.5.14 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-button to v9.3.25 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.0-beta.59](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.59)
 
 Thu, 20 Jul 2023 18:27:25 GMT 
diff --git a/packages/react-components/react-alert/package.json b/packages/react-components/react-alert/package.json
index 49a2206e8c26c..4923911a51b95 100644
--- a/packages/react-components/react-alert/package.json
+++ b/packages/react-components/react-alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-alert",
-  "version": "9.0.0-beta.59",
+  "version": "9.0.0-beta.60",
   "description": "An alert component to display brief messages",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,10 +33,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.5.13",
-    "@fluentui/react-button": "^9.3.24",
+    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-button": "^9.3.25",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-avatar/CHANGELOG.json b/packages/react-components/react-avatar/CHANGELOG.json
index 55368d986cd00..1dcd22eb4b6ac 100644
--- a/packages/react-components/react-avatar/CHANGELOG.json
+++ b/packages/react-components/react-avatar/CHANGELOG.json
@@ -1,6 +1,45 @@
 {
   "name": "@fluentui/react-avatar",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:16 GMT",
+      "tag": "@fluentui/react-avatar_v9.5.14",
+      "version": "9.5.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.1.22",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.7.8",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.2.25",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:25 GMT",
       "tag": "@fluentui/react-avatar_v9.5.13",
diff --git a/packages/react-components/react-avatar/CHANGELOG.md b/packages/react-components/react-avatar/CHANGELOG.md
index 87d3e5f0e65e4..c3a738b5f8fe8 100644
--- a/packages/react-components/react-avatar/CHANGELOG.md
+++ b/packages/react-components/react-avatar/CHANGELOG.md
@@ -1,9 +1,22 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Thu, 20 Jul 2023 18:27:25 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.5.14)
+
+Tue, 25 Jul 2023 13:29:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.5.13..@fluentui/react-avatar_v9.5.14)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-badge to v9.1.22 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-popover to v9.7.8 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tooltip to v9.2.25 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.5.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.5.13)
 
 Thu, 20 Jul 2023 18:27:25 GMT 
diff --git a/packages/react-components/react-avatar/package.json b/packages/react-components/react-avatar/package.json
index 09909d7a8c2fb..67063e2f11072 100644
--- a/packages/react-components/react-avatar/package.json
+++ b/packages/react-components/react-avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.5.13",
+  "version": "9.5.14",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,14 +37,14 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-badge": "^9.1.21",
+    "@fluentui/react-badge": "^9.1.22",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-popover": "^9.7.7",
+    "@fluentui/react-popover": "^9.7.8",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-tooltip": "^9.2.24",
+    "@fluentui/react-tooltip": "^9.2.25",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-badge/CHANGELOG.json b/packages/react-components/react-badge/CHANGELOG.json
index f3242990246d1..93d1be3dd68c0 100644
--- a/packages/react-components/react-badge/CHANGELOG.json
+++ b/packages/react-components/react-badge/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-badge",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:16 GMT",
+      "tag": "@fluentui/react-badge_v9.1.22",
+      "version": "9.1.22",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:26 GMT",
       "tag": "@fluentui/react-badge_v9.1.21",
diff --git a/packages/react-components/react-badge/CHANGELOG.md b/packages/react-components/react-badge/CHANGELOG.md
index c522e28cc533a..d85e6a2cb2344 100644
--- a/packages/react-components/react-badge/CHANGELOG.md
+++ b/packages/react-components/react-badge/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-badge
 
-This log was last generated on Thu, 20 Jul 2023 18:27:26 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.22)
+
+Tue, 25 Jul 2023 13:29:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.1.21..@fluentui/react-badge_v9.1.22)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+
 ## [9.1.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.21)
 
 Thu, 20 Jul 2023 18:27:26 GMT 
diff --git a/packages/react-components/react-badge/package.json b/packages/react-components/react-badge/package.json
index 24fb2cc08d1f8..966bf84fb2ccf 100644
--- a/packages/react-components/react-badge/package.json
+++ b/packages/react-components/react-badge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-badge",
-  "version": "9.1.21",
+  "version": "9.1.22",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-components/react-breadcrumb-preview/CHANGELOG.json b/packages/react-components/react-breadcrumb-preview/CHANGELOG.json
index acfcb65517844..3d5e93b75f2c7 100644
--- a/packages/react-components/react-breadcrumb-preview/CHANGELOG.json
+++ b/packages/react-components/react-breadcrumb-preview/CHANGELOG.json
@@ -1,6 +1,51 @@
 {
   "name": "@fluentui/react-breadcrumb-preview",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:16 GMT",
+      "tag": "@fluentui/react-breadcrumb-preview_v0.1.2",
+      "version": "0.1.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "vkozlova@microsoft.com",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "commit": "e7e522f452c4090c7f4426082efac571e8141a8e",
+            "comment": "fix: updated readme, replaced MenuItem with MenuItemLink"
+          },
+          {
+            "author": "vkozlova@microsoft.com",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "commit": "312d1b36e432de1850ad94e454959a342a12b19c",
+            "comment": "fix: spacing in BreadcrumbButton and Link, added more examples to the stories"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "comment": "Bump @fluentui/react-button to v9.3.25",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "comment": "Bump @fluentui/react-link to v9.1.4",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:36 GMT",
       "tag": "@fluentui/react-breadcrumb-preview_v0.1.1",
diff --git a/packages/react-components/react-breadcrumb-preview/CHANGELOG.md b/packages/react-components/react-breadcrumb-preview/CHANGELOG.md
index c3b4094924dbf..9ce706f9fbae4 100644
--- a/packages/react-components/react-breadcrumb-preview/CHANGELOG.md
+++ b/packages/react-components/react-breadcrumb-preview/CHANGELOG.md
@@ -1,9 +1,23 @@
 # Change Log - @fluentui/react-breadcrumb-preview
 
-This log was last generated on Thu, 20 Jul 2023 18:27:36 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-breadcrumb-preview_v0.1.2)
+
+Tue, 25 Jul 2023 13:29:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-breadcrumb-preview_v0.1.1..@fluentui/react-breadcrumb-preview_v0.1.2)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- fix: updated readme, replaced MenuItem with MenuItemLink ([PR #28626](https://github.com/microsoft/fluentui/pull/28626) by vkozlova@microsoft.com)
+- fix: spacing in BreadcrumbButton and Link, added more examples to the stories ([PR #28578](https://github.com/microsoft/fluentui/pull/28578) by vkozlova@microsoft.com)
+- Bump @fluentui/react-button to v9.3.25 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-link to v9.1.4 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-breadcrumb-preview_v0.1.1)
 
 Thu, 20 Jul 2023 18:27:36 GMT 
diff --git a/packages/react-components/react-breadcrumb-preview/package.json b/packages/react-components/react-breadcrumb-preview/package.json
index 7f681dd89a869..442847fffc4d2 100644
--- a/packages/react-components/react-breadcrumb-preview/package.json
+++ b/packages/react-components/react-breadcrumb-preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-breadcrumb-preview",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Breadcrumb component for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,11 +35,11 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.3.24",
+    "@fluentui/react-button": "^9.3.25",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-link": "^9.1.3",
+    "@fluentui/react-link": "^9.1.4",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-button/CHANGELOG.json b/packages/react-components/react-button/CHANGELOG.json
index 14bcac6029062..705ca3827bbad 100644
--- a/packages/react-components/react-button/CHANGELOG.json
+++ b/packages/react-components/react-button/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-button",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:17 GMT",
+      "tag": "@fluentui/react-button_v9.3.25",
+      "version": "9.3.25",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:26 GMT",
       "tag": "@fluentui/react-button_v9.3.24",
diff --git a/packages/react-components/react-button/CHANGELOG.md b/packages/react-components/react-button/CHANGELOG.md
index cfc162b8e0792..85e75b2882a6d 100644
--- a/packages/react-components/react-button/CHANGELOG.md
+++ b/packages/react-components/react-button/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Thu, 20 Jul 2023 18:27:26 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:17 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.25)
+
+Tue, 25 Jul 2023 13:29:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.24..@fluentui/react-button_v9.3.25)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.3.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.24)
 
 Thu, 20 Jul 2023 18:27:26 GMT 
diff --git a/packages/react-components/react-button/package.json b/packages/react-components/react-button/package.json
index e5a82f432782d..e738e1327770c 100644
--- a/packages/react-components/react-button/package.json
+++ b/packages/react-components/react-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "9.3.24",
+  "version": "9.3.25",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,7 +39,7 @@
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-card/CHANGELOG.json b/packages/react-components/react-card/CHANGELOG.json
index 5c79de7471fb8..aa03b01656c04 100644
--- a/packages/react-components/react-card/CHANGELOG.json
+++ b/packages/react-components/react-card/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-card",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-card_v9.0.24",
+      "version": "9.0.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:27 GMT",
       "tag": "@fluentui/react-card_v9.0.23",
diff --git a/packages/react-components/react-card/CHANGELOG.md b/packages/react-components/react-card/CHANGELOG.md
index 3fa53ecd6af39..4338de6adae8c 100644
--- a/packages/react-components/react-card/CHANGELOG.md
+++ b/packages/react-components/react-card/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Thu, 20 Jul 2023 18:27:27 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.24)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.23..@fluentui/react-card_v9.0.24)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.23)
 
 Thu, 20 Jul 2023 18:27:27 GMT 
diff --git a/packages/react-components/react-card/package.json b/packages/react-components/react-card/package.json
index 01952b93730b3..6a2f24617ce0d 100644
--- a/packages/react-components/react-card/package.json
+++ b/packages/react-components/react-card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-card",
-  "version": "9.0.23",
+  "version": "9.0.24",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-checkbox/CHANGELOG.json b/packages/react-components/react-checkbox/CHANGELOG.json
index 654c86e55dce2..60ab7080a8e93 100644
--- a/packages/react-components/react-checkbox/CHANGELOG.json
+++ b/packages/react-components/react-checkbox/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-checkbox",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:17 GMT",
+      "tag": "@fluentui/react-checkbox_v9.1.26",
+      "version": "9.1.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:27 GMT",
       "tag": "@fluentui/react-checkbox_v9.1.25",
diff --git a/packages/react-components/react-checkbox/CHANGELOG.md b/packages/react-components/react-checkbox/CHANGELOG.md
index 63b243edb6f8a..8b1edca75f38a 100644
--- a/packages/react-components/react-checkbox/CHANGELOG.md
+++ b/packages/react-components/react-checkbox/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-checkbox
 
-This log was last generated on Thu, 20 Jul 2023 18:27:27 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:17 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.26)
+
+Tue, 25 Jul 2023 13:29:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.25..@fluentui/react-checkbox_v9.1.26)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.1.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.25)
 
 Thu, 20 Jul 2023 18:27:27 GMT 
diff --git a/packages/react-components/react-checkbox/package.json b/packages/react-components/react-checkbox/package.json
index 3c2a4a69cb0c8..f85bb4fe9e069 100644
--- a/packages/react-components/react-checkbox/package.json
+++ b/packages/react-components/react-checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.1.25",
+  "version": "9.1.26",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,12 +33,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-label": "^9.1.21",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-combobox/CHANGELOG.json b/packages/react-components/react-combobox/CHANGELOG.json
index aee1b3abfef56..68b249729934e 100644
--- a/packages/react-components/react-combobox/CHANGELOG.json
+++ b/packages/react-components/react-combobox/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-combobox",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:18 GMT",
+      "tag": "@fluentui/react-combobox_v9.4.9",
+      "version": "9.4.9",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.3.3",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:27 GMT",
       "tag": "@fluentui/react-combobox_v9.4.8",
diff --git a/packages/react-components/react-combobox/CHANGELOG.md b/packages/react-components/react-combobox/CHANGELOG.md
index 8f35f8d2651d0..b17e4203ea195 100644
--- a/packages/react-components/react-combobox/CHANGELOG.md
+++ b/packages/react-components/react-combobox/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Thu, 20 Jul 2023 18:27:27 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.4.9)
+
+Tue, 25 Jul 2023 13:29:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.4.8..@fluentui/react-combobox_v9.4.9)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.4.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.4.8)
 
 Thu, 20 Jul 2023 18:27:27 GMT 
diff --git a/packages/react-components/react-combobox/package.json b/packages/react-components/react-combobox/package.json
index 46859c0ddf6df..8c26e474dc100 100644
--- a/packages/react-components/react-combobox/package.json
+++ b/packages/react-components/react-combobox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.4.8",
+  "version": "9.4.9",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,10 +35,10 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-context-selector": "^9.1.26",
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-portal": "^9.3.2",
+    "@fluentui/react-portal": "^9.3.3",
     "@fluentui/react-positioning": "^9.8.0",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-components/CHANGELOG.json b/packages/react-components/react-components/CHANGELOG.json
index 8218a21929a8c..c6cea6a141a31 100644
--- a/packages/react-components/react-components/CHANGELOG.json
+++ b/packages/react-components/react-components/CHANGELOG.json
@@ -1,6 +1,235 @@
 {
   "name": "@fluentui/react-components",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:15 GMT",
+      "tag": "@fluentui/react-components_v9.27.0",
+      "version": "9.27.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/priority-overflow",
+            "commit": "d8493a92520cacac29e9fe341a17d3595bc48343",
+            "comment": "fix: Overflow update should run show/hide steps twice"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-accordion",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "vkozlova@microsoft.com",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "commit": "e7e522f452c4090c7f4426082efac571e8141a8e",
+            "comment": "fix: updated readme, replaced MenuItem with MenuItemLink"
+          },
+          {
+            "author": "vkozlova@microsoft.com",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "commit": "312d1b36e432de1850ad94e454959a342a12b19c",
+            "comment": "fix: spacing in BreadcrumbButton and Link, added more examples to the stories"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-components",
+            "commit": "c017e880f238c1f113ff7ff6e28560d77e7ea46b",
+            "comment": "feat: exports FlatTree"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-datepicker-compat",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2",
+            "comment": "fix: Focus should restore to a DialogTrigger outside of a Dialog"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-field",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2",
+            "comment": "refactor: Remove custom focus code in favour of useRestoreFocus hooks"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-migration-v0-v9",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-migration-v8-v9",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "d8493a92520cacac29e9fe341a17d3595bc48343",
+            "comment": "fix: Overflow update should run show/hide steps twice"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-search-preview",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-select",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-switch",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "038d8f703f43ea290412001c94179ee5d1dac4d2",
+            "comment": "28456"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-toast",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-alert",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-infobutton",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "0d4d0ef8daebaf5b6ebbcce17e64e35488864e0e",
+            "comment": "chore: moves slots from TreeItem to TreeItemLayout"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "c017e880f238c1f113ff7ff6e28560d77e7ea46b",
+            "comment": "feat: creates FlatTree component"
+          }
+        ],
+        "minor": [
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-components",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2",
+            "comment": "feat: Export useRestoreFocusTarget and useRestoreFocusSource"
+          },
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "39cf021c60171b8e56a64637ef046478c686d625",
+            "comment": "Table/DataGrid: Improve keyboard column resizing experience"
+          },
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2",
+            "comment": "feat: Implement useRestoreFocusSource and useRestoreFocusTarget based on the tabster restorer API"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:24 GMT",
       "tag": "@fluentui/react-components_v9.26.2",
diff --git a/packages/react-components/react-components/CHANGELOG.md b/packages/react-components/react-components/CHANGELOG.md
index 1fba1092f3a0a..514d078478cd8 100644
--- a/packages/react-components/react-components/CHANGELOG.md
+++ b/packages/react-components/react-components/CHANGELOG.md
@@ -1,9 +1,88 @@
 # Change Log - @fluentui/react-components
 
-This log was last generated on Thu, 20 Jul 2023 18:27:24 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.27.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.27.0)
+
+Tue, 25 Jul 2023 13:29:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.26.2..@fluentui/react-components_v9.27.0)
+
+### Minor changes
+
+- `@fluentui/react-components`
+  - feat: Export useRestoreFocusTarget and useRestoreFocusSource ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by lingfan.gao@microsoft.com)
+- `@fluentui/react-table`
+  - Table/DataGrid: Improve keyboard column resizing experience ([PR #28493](https://github.com/microsoft/fluentui/pull/28493) by jirivyhnalek@microsoft.com)
+- `@fluentui/react-tabster`
+  - feat: Implement useRestoreFocusSource and useRestoreFocusTarget based on the tabster restorer API ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by lingfan.gao@microsoft.com)
+
+### Patches
+
+- `@fluentui/priority-overflow`
+  - fix: Overflow update should run show/hide steps twice ([PR #28628](https://github.com/microsoft/fluentui/pull/28628) by lingfan.gao@microsoft.com)
+- `@fluentui/react-accordion`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-avatar`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-badge`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-breadcrumb-preview`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+  - fix: updated readme, replaced MenuItem with MenuItemLink ([PR #28626](https://github.com/microsoft/fluentui/pull/28626) by vkozlova@microsoft.com)
+  - fix: spacing in BreadcrumbButton and Link, added more examples to the stories ([PR #28578](https://github.com/microsoft/fluentui/pull/28578) by vkozlova@microsoft.com)
+- `@fluentui/react-button`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-checkbox`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-combobox`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-components`
+  - feat: exports FlatTree ([PR #28620](https://github.com/microsoft/fluentui/pull/28620) by bernardo.sunderhus@gmail.com)
+- `@fluentui/react-datepicker-compat`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-dialog`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+  - fix: Focus should restore to a DialogTrigger outside of a Dialog ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by lingfan.gao@microsoft.com)
+- `@fluentui/react-field`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-menu`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+  - refactor: Remove custom focus code in favour of useRestoreFocus hooks ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by lingfan.gao@microsoft.com)
+- `@fluentui/react-migration-v0-v9`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-migration-v8-v9`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-overflow`
+  - fix: Overflow update should run show/hide steps twice ([PR #28628](https://github.com/microsoft/fluentui/pull/28628) by lingfan.gao@microsoft.com)
+- `@fluentui/react-radio`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-search-preview`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-select`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-spinbutton`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-switch`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-table`
+  - 28456 ([PR #28577](https://github.com/microsoft/fluentui/pull/28577) by lingfan.gao@microsoft.com)
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-toast`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+
+### Changes
+
+- `@fluentui/react-alert`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-infobutton`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- `@fluentui/react-tree`
+  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+  - chore: moves slots from TreeItem to TreeItemLayout ([PR #28621](https://github.com/microsoft/fluentui/pull/28621) by bernardo.sunderhus@gmail.com)
+  - feat: creates FlatTree component ([PR #28620](https://github.com/microsoft/fluentui/pull/28620) by bernardo.sunderhus@gmail.com)
+
 ## [9.26.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.26.2)
 
 Thu, 20 Jul 2023 18:27:24 GMT 
diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json
index 4002530ea809f..8262ca53b88fd 100644
--- a/packages/react-components/react-components/package.json
+++ b/packages/react-components/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-components",
-  "version": "9.26.2",
+  "version": "9.27.0",
   "description": "Suite package for converged React components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,51 +31,51 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-accordion": "^9.1.24",
-    "@fluentui/react-alert": "9.0.0-beta.59",
-    "@fluentui/react-avatar": "^9.5.13",
-    "@fluentui/react-badge": "^9.1.21",
-    "@fluentui/react-button": "^9.3.24",
-    "@fluentui/react-card": "^9.0.23",
-    "@fluentui/react-checkbox": "^9.1.25",
-    "@fluentui/react-combobox": "^9.4.8",
-    "@fluentui/react-dialog": "^9.5.17",
+    "@fluentui/react-accordion": "^9.1.25",
+    "@fluentui/react-alert": "9.0.0-beta.60",
+    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-badge": "^9.1.22",
+    "@fluentui/react-button": "^9.3.25",
+    "@fluentui/react-card": "^9.0.24",
+    "@fluentui/react-checkbox": "^9.1.26",
+    "@fluentui/react-combobox": "^9.4.9",
+    "@fluentui/react-dialog": "^9.5.18",
     "@fluentui/react-divider": "^9.2.21",
-    "@fluentui/react-drawer": "9.0.0-beta.9",
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-drawer": "9.0.0-beta.10",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-image": "^9.1.18",
-    "@fluentui/react-infobutton": "9.0.0-beta.43",
-    "@fluentui/react-input": "^9.4.22",
+    "@fluentui/react-infobutton": "9.0.0-beta.44",
+    "@fluentui/react-input": "^9.4.23",
     "@fluentui/react-label": "^9.1.21",
-    "@fluentui/react-link": "^9.1.3",
-    "@fluentui/react-menu": "^9.11.0",
-    "@fluentui/react-overflow": "^9.0.23",
-    "@fluentui/react-persona": "^9.2.23",
-    "@fluentui/react-portal": "^9.3.2",
-    "@fluentui/react-popover": "^9.7.7",
+    "@fluentui/react-link": "^9.1.4",
+    "@fluentui/react-menu": "^9.11.1",
+    "@fluentui/react-overflow": "^9.0.24",
+    "@fluentui/react-persona": "^9.2.24",
+    "@fluentui/react-portal": "^9.3.3",
+    "@fluentui/react-popover": "^9.7.8",
     "@fluentui/react-positioning": "^9.8.0",
-    "@fluentui/react-progress": "^9.1.22",
-    "@fluentui/react-provider": "^9.7.10",
-    "@fluentui/react-radio": "^9.1.25",
-    "@fluentui/react-select": "^9.1.22",
+    "@fluentui/react-progress": "^9.1.23",
+    "@fluentui/react-provider": "^9.7.11",
+    "@fluentui/react-radio": "^9.1.26",
+    "@fluentui/react-select": "^9.1.23",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-skeleton": "^9.0.10",
-    "@fluentui/react-slider": "^9.1.25",
-    "@fluentui/react-spinbutton": "^9.2.22",
+    "@fluentui/react-skeleton": "^9.0.11",
+    "@fluentui/react-slider": "^9.1.26",
+    "@fluentui/react-spinbutton": "^9.2.23",
     "@fluentui/react-spinner": "^9.3.1",
-    "@fluentui/react-switch": "^9.1.25",
-    "@fluentui/react-table": "^9.6.1",
-    "@fluentui/react-tabs": "^9.3.25",
-    "@fluentui/react-tabster": "^9.10.0",
-    "@fluentui/react-textarea": "^9.3.22",
+    "@fluentui/react-switch": "^9.1.26",
+    "@fluentui/react-table": "^9.7.0",
+    "@fluentui/react-tabs": "^9.3.26",
+    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-textarea": "^9.3.23",
     "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-toast": "^9.0.4",
-    "@fluentui/react-toolbar": "^9.1.25",
-    "@fluentui/react-tooltip": "^9.2.24",
+    "@fluentui/react-toast": "^9.0.5",
+    "@fluentui/react-toolbar": "^9.1.26",
+    "@fluentui/react-tooltip": "^9.2.25",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-text": "^9.3.18",
     "@fluentui/react-virtualizer": "9.0.0-alpha.29",
-    "@fluentui/react-tree": "9.0.0-beta.26",
+    "@fluentui/react-tree": "9.0.0-beta.27",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
   },
diff --git a/packages/react-components/react-data-grid-react-window/CHANGELOG.json b/packages/react-components/react-data-grid-react-window/CHANGELOG.json
index dfe50d0d82ff7..d4f3d784ae7c0 100644
--- a/packages/react-components/react-data-grid-react-window/CHANGELOG.json
+++ b/packages/react-components/react-data-grid-react-window/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-data-grid-react-window",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.40",
+      "version": "9.0.0-beta.40",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-data-grid-react-window",
+            "comment": "Bump @fluentui/react-table to v9.7.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-data-grid-react-window",
+            "comment": "Bump @fluentui/react-components to v9.27.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:36 GMT",
       "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.39",
diff --git a/packages/react-components/react-data-grid-react-window/CHANGELOG.md b/packages/react-components/react-data-grid-react-window/CHANGELOG.md
index 30d560a7f9454..cca69279589a4 100644
--- a/packages/react-components/react-data-grid-react-window/CHANGELOG.md
+++ b/packages/react-components/react-data-grid-react-window/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-data-grid-react-window
 
-This log was last generated on Thu, 20 Jul 2023 18:27:36 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.40](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.40)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.39..@fluentui/react-data-grid-react-window_v9.0.0-beta.40)
+
+### Changes
+
+- Bump @fluentui/react-table to v9.7.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-components to v9.27.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.0-beta.39](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.39)
 
 Thu, 20 Jul 2023 18:27:36 GMT 
diff --git a/packages/react-components/react-data-grid-react-window/package.json b/packages/react-components/react-data-grid-react-window/package.json
index 9845586273400..4b4d42437a647 100644
--- a/packages/react-components/react-data-grid-react-window/package.json
+++ b/packages/react-components/react-data-grid-react-window/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-data-grid-react-window",
-  "version": "9.0.0-beta.39",
+  "version": "9.0.0-beta.40",
   "description": "Virtualized DataGrid components and utilities powered by react-window",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,14 +30,14 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-table": "^9.6.1",
+    "@fluentui/react-table": "^9.7.0",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@swc/helpers": "^0.4.14",
     "react-window": "^1.8.6"
   },
   "peerDependencies": {
-    "@fluentui/react-components": "^9.26.2",
+    "@fluentui/react-components": "^9.27.0",
     "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0",
diff --git a/packages/react-components/react-datepicker-compat/CHANGELOG.json b/packages/react-components/react-datepicker-compat/CHANGELOG.json
index c30c590a9a144..0384196ebcc9e 100644
--- a/packages/react-components/react-datepicker-compat/CHANGELOG.json
+++ b/packages/react-components/react-datepicker-compat/CHANGELOG.json
@@ -1,6 +1,51 @@
 {
   "name": "@fluentui/react-datepicker-compat",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:18 GMT",
+      "tag": "@fluentui/react-datepicker-compat_v0.2.2",
+      "version": "0.2.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-datepicker-compat",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-input to v9.4.23",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-popover to v9.7.8",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-portal to v9.3.3",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:28 GMT",
       "tag": "@fluentui/react-datepicker-compat_v0.2.1",
diff --git a/packages/react-components/react-datepicker-compat/CHANGELOG.md b/packages/react-components/react-datepicker-compat/CHANGELOG.md
index 7724fc1e8f976..eab8afaac0ca4 100644
--- a/packages/react-components/react-datepicker-compat/CHANGELOG.md
+++ b/packages/react-components/react-datepicker-compat/CHANGELOG.md
@@ -1,9 +1,23 @@
 # Change Log - @fluentui/react-datepicker-compat
 
-This log was last generated on Thu, 20 Jul 2023 18:27:28 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.2.2)
+
+Tue, 25 Jul 2023 13:29:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-datepicker-compat_v0.2.1..@fluentui/react-datepicker-compat_v0.2.2)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-input to v9.4.23 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-popover to v9.7.8 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.2.1)
 
 Thu, 20 Jul 2023 18:27:28 GMT 
diff --git a/packages/react-components/react-datepicker-compat/package.json b/packages/react-components/react-datepicker-compat/package.json
index 6075977ecca48..c04f042c8afee 100644
--- a/packages/react-components/react-datepicker-compat/package.json
+++ b/packages/react-components/react-datepicker-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-datepicker-compat",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-input": "^9.4.22",
+    "@fluentui/react-input": "^9.4.23",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-popover": "^9.7.7",
-    "@fluentui/react-portal": "^9.3.2",
+    "@fluentui/react-popover": "^9.7.8",
+    "@fluentui/react-portal": "^9.3.3",
     "@fluentui/react-positioning": "^9.8.0",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-dialog/CHANGELOG.json b/packages/react-components/react-dialog/CHANGELOG.json
index d5a9055df81ca..43ba56deea2e3 100644
--- a/packages/react-components/react-dialog/CHANGELOG.json
+++ b/packages/react-components/react-dialog/CHANGELOG.json
@@ -1,6 +1,39 @@
 {
   "name": "@fluentui/react-dialog",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:18 GMT",
+      "tag": "@fluentui/react-dialog_v9.5.18",
+      "version": "9.5.18",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2",
+            "comment": "fix: Focus should restore to a DialogTrigger outside of a Dialog"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.3.3",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:28 GMT",
       "tag": "@fluentui/react-dialog_v9.5.17",
diff --git a/packages/react-components/react-dialog/CHANGELOG.md b/packages/react-components/react-dialog/CHANGELOG.md
index 848a10f995bb8..e583b61bf6934 100644
--- a/packages/react-components/react-dialog/CHANGELOG.md
+++ b/packages/react-components/react-dialog/CHANGELOG.md
@@ -1,9 +1,21 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Thu, 20 Jul 2023 18:27:28 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.18)
+
+Tue, 25 Jul 2023 13:29:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.17..@fluentui/react-dialog_v9.5.18)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- fix: Focus should restore to a DialogTrigger outside of a Dialog ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.5.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.17)
 
 Thu, 20 Jul 2023 18:27:28 GMT 
diff --git a/packages/react-components/react-dialog/package.json b/packages/react-components/react-dialog/package.json
index 3f99e35871117..637386805b934 100644
--- a/packages/react-components/react-dialog/package.json
+++ b/packages/react-components/react-dialog/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-dialog",
-  "version": "9.5.17",
+  "version": "9.5.18",
   "description": "Dialog component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -43,9 +43,9 @@
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-aria": "^9.3.27",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-portal": "^9.3.2",
+    "@fluentui/react-portal": "^9.3.3",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
   },
diff --git a/packages/react-components/react-drawer/CHANGELOG.json b/packages/react-components/react-drawer/CHANGELOG.json
index 965a85d63adf1..e3fd1b6b5cfd9 100644
--- a/packages/react-components/react-drawer/CHANGELOG.json
+++ b/packages/react-components/react-drawer/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-drawer",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-drawer_v9.0.0-beta.10",
+      "version": "9.0.0-beta.10",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-dialog to v9.5.18",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:36 GMT",
       "tag": "@fluentui/react-drawer_v9.0.0-beta.9",
diff --git a/packages/react-components/react-drawer/CHANGELOG.md b/packages/react-components/react-drawer/CHANGELOG.md
index 9ccc85424c300..a2e4e6eed5267 100644
--- a/packages/react-components/react-drawer/CHANGELOG.md
+++ b/packages/react-components/react-drawer/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Thu, 20 Jul 2023 18:27:36 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.10)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.9..@fluentui/react-drawer_v9.0.0-beta.10)
+
+### Changes
+
+- Bump @fluentui/react-dialog to v9.5.18 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.9)
 
 Thu, 20 Jul 2023 18:27:36 GMT 
diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json
index 268d22560f962..7e367b33194db 100644
--- a/packages/react-components/react-drawer/package.json
+++ b/packages/react-components/react-drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-beta.10",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,7 +35,7 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.5.17",
+    "@fluentui/react-dialog": "^9.5.18",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-field/CHANGELOG.json b/packages/react-components/react-field/CHANGELOG.json
index b9a450d1def27..b59f1eb5278b5 100644
--- a/packages/react-components/react-field/CHANGELOG.json
+++ b/packages/react-components/react-field/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-field",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:19 GMT",
+      "tag": "@fluentui/react-field_v9.1.13",
+      "version": "9.1.13",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-field",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:29 GMT",
       "tag": "@fluentui/react-field_v9.1.12",
diff --git a/packages/react-components/react-field/CHANGELOG.md b/packages/react-components/react-field/CHANGELOG.md
index 85b19ba3772ea..95131edeaa08a 100644
--- a/packages/react-components/react-field/CHANGELOG.md
+++ b/packages/react-components/react-field/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-field
 
-This log was last generated on Thu, 20 Jul 2023 18:27:29 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.13)
+
+Tue, 25 Jul 2023 13:29:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.12..@fluentui/react-field_v9.1.13)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+
 ## [9.1.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.12)
 
 Thu, 20 Jul 2023 18:27:29 GMT 
diff --git a/packages/react-components/react-field/package.json b/packages/react-components/react-field/package.json
index 288a62677083b..41bba1efc218a 100644
--- a/packages/react-components/react-field/package.json
+++ b/packages/react-components/react-field/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.1.12",
+  "version": "9.1.13",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-components/react-infobutton/CHANGELOG.json b/packages/react-components/react-infobutton/CHANGELOG.json
index bf8c9ad6827b5..8b15af98cc28a 100644
--- a/packages/react-components/react-infobutton/CHANGELOG.json
+++ b/packages/react-components/react-infobutton/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-infobutton",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:19 GMT",
+      "tag": "@fluentui/react-infobutton_v9.0.0-beta.44",
+      "version": "9.0.0-beta.44",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-infobutton",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-popover to v9.7.8",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:29 GMT",
       "tag": "@fluentui/react-infobutton_v9.0.0-beta.43",
diff --git a/packages/react-components/react-infobutton/CHANGELOG.md b/packages/react-components/react-infobutton/CHANGELOG.md
index 31eb5c455ec67..054bbd63cf4d7 100644
--- a/packages/react-components/react-infobutton/CHANGELOG.md
+++ b/packages/react-components/react-infobutton/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-infobutton
 
-This log was last generated on Thu, 20 Jul 2023 18:27:29 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.44)
+
+Tue, 25 Jul 2023 13:29:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.43..@fluentui/react-infobutton_v9.0.0-beta.44)
+
+### Changes
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-popover to v9.7.8 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.0-beta.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.43)
 
 Thu, 20 Jul 2023 18:27:29 GMT 
diff --git a/packages/react-components/react-infobutton/package.json b/packages/react-components/react-infobutton/package.json
index 6107def038f26..20dc63f36b491 100644
--- a/packages/react-components/react-infobutton/package.json
+++ b/packages/react-components/react-infobutton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-infobutton",
-  "version": "9.0.0-beta.43",
+  "version": "9.0.0-beta.44",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,8 +35,8 @@
   "dependencies": {
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-label": "^9.1.21",
-    "@fluentui/react-popover": "^9.7.7",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-popover": "^9.7.8",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-input/CHANGELOG.json b/packages/react-components/react-input/CHANGELOG.json
index 83ff21ae27fb3..834a9a0c7bb54 100644
--- a/packages/react-components/react-input/CHANGELOG.json
+++ b/packages/react-components/react-input/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-input",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-input_v9.4.23",
+      "version": "9.4.23",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:29 GMT",
       "tag": "@fluentui/react-input_v9.4.22",
diff --git a/packages/react-components/react-input/CHANGELOG.md b/packages/react-components/react-input/CHANGELOG.md
index 7e61521b26310..925ff1b2196b7 100644
--- a/packages/react-components/react-input/CHANGELOG.md
+++ b/packages/react-components/react-input/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-input
 
-This log was last generated on Thu, 20 Jul 2023 18:27:29 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.23)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.4.22..@fluentui/react-input_v9.4.23)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.4.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.22)
 
 Thu, 20 Jul 2023 18:27:29 GMT 
diff --git a/packages/react-components/react-input/package.json b/packages/react-components/react-input/package.json
index 04d413ce3fca7..eaf5de04679c1 100644
--- a/packages/react-components/react-input/package.json
+++ b/packages/react-components/react-input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.4.22",
+  "version": "9.4.23",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-link/CHANGELOG.json b/packages/react-components/react-link/CHANGELOG.json
index 8920d60a1c783..ddd0b718a958d 100644
--- a/packages/react-components/react-link/CHANGELOG.json
+++ b/packages/react-components/react-link/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-link",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-link_v9.1.4",
+      "version": "9.1.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-link",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:30 GMT",
       "tag": "@fluentui/react-link_v9.1.3",
diff --git a/packages/react-components/react-link/CHANGELOG.md b/packages/react-components/react-link/CHANGELOG.md
index ba2293152cc9f..06100a469683e 100644
--- a/packages/react-components/react-link/CHANGELOG.md
+++ b/packages/react-components/react-link/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-link
 
-This log was last generated on Thu, 20 Jul 2023 18:27:30 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.1.4)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.1.3..@fluentui/react-link_v9.1.4)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.1.3)
 
 Thu, 20 Jul 2023 18:27:30 GMT 
diff --git a/packages/react-components/react-link/package.json b/packages/react-components/react-link/package.json
index eebd52531f38f..e52a49b0ed4c1 100644
--- a/packages/react-components/react-link/package.json
+++ b/packages/react-components/react-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-link",
-  "version": "9.1.3",
+  "version": "9.1.4",
   "description": "Fluent UI React Link component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,7 +37,7 @@
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-menu/CHANGELOG.json b/packages/react-components/react-menu/CHANGELOG.json
index 4b78919e8fa82..6b79c54f688aa 100644
--- a/packages/react-components/react-menu/CHANGELOG.json
+++ b/packages/react-components/react-menu/CHANGELOG.json
@@ -1,6 +1,39 @@
 {
   "name": "@fluentui/react-menu",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:19 GMT",
+      "tag": "@fluentui/react-menu_v9.11.1",
+      "version": "9.11.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2",
+            "comment": "refactor: Remove custom focus code in favour of useRestoreFocus hooks"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-portal to v9.3.3",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:30 GMT",
       "tag": "@fluentui/react-menu_v9.11.0",
diff --git a/packages/react-components/react-menu/CHANGELOG.md b/packages/react-components/react-menu/CHANGELOG.md
index 5105335624a73..ebd4d12b7aae4 100644
--- a/packages/react-components/react-menu/CHANGELOG.md
+++ b/packages/react-components/react-menu/CHANGELOG.md
@@ -1,9 +1,21 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Thu, 20 Jul 2023 18:27:30 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.11.1)
+
+Tue, 25 Jul 2023 13:29:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.11.0..@fluentui/react-menu_v9.11.1)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- refactor: Remove custom focus code in favour of useRestoreFocus hooks ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.11.0)
 
 Thu, 20 Jul 2023 18:27:30 GMT 
diff --git a/packages/react-components/react-menu/package.json b/packages/react-components/react-menu/package.json
index f55f885c6b880..d216e49834678 100644
--- a/packages/react-components/react-menu/package.json
+++ b/packages/react-components/react-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.11.0",
+  "version": "9.11.1",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,10 +40,10 @@
     "@fluentui/react-aria": "^9.3.27",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-portal": "^9.3.2",
+    "@fluentui/react-portal": "^9.3.3",
     "@fluentui/react-positioning": "^9.8.0",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-migration-v0-v9/CHANGELOG.json b/packages/react-components/react-migration-v0-v9/CHANGELOG.json
index 59c8f0f696293..3111b36919b49 100644
--- a/packages/react-components/react-migration-v0-v9/CHANGELOG.json
+++ b/packages/react-components/react-migration-v0-v9/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-migration-v0-v9",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:20 GMT",
+      "tag": "@fluentui/react-migration-v0-v9_v9.0.13",
+      "version": "9.0.13",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-migration-v0-v9",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-components to v9.27.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:36 GMT",
       "tag": "@fluentui/react-migration-v0-v9_v9.0.12",
diff --git a/packages/react-components/react-migration-v0-v9/CHANGELOG.md b/packages/react-components/react-migration-v0-v9/CHANGELOG.md
index 594ff392b0d0c..60bde3df1967a 100644
--- a/packages/react-components/react-migration-v0-v9/CHANGELOG.md
+++ b/packages/react-components/react-migration-v0-v9/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-migration-v0-v9
 
-This log was last generated on Thu, 20 Jul 2023 18:27:36 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.13)
+
+Tue, 25 Jul 2023 13:29:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.0.12..@fluentui/react-migration-v0-v9_v9.0.13)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-components to v9.27.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.12)
 
 Thu, 20 Jul 2023 18:27:36 GMT 
diff --git a/packages/react-components/react-migration-v0-v9/package.json b/packages/react-components/react-migration-v0-v9/package.json
index b0fe468d981ce..4e31efc072724 100644
--- a/packages/react-components/react-migration-v0-v9/package.json
+++ b/packages/react-components/react-migration-v0-v9/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v0-v9",
-  "version": "9.0.12",
+  "version": "9.0.13",
   "description": "Migration shim components and methods for hybrid v0/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,7 +37,7 @@
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-components": "^9.26.2",
+    "@fluentui/react-components": "^9.27.0",
     "@fluentui/react-northstar": "^0.66.4",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
diff --git a/packages/react-components/react-migration-v8-v9/CHANGELOG.json b/packages/react-components/react-migration-v8-v9/CHANGELOG.json
index 6fadf0f9bb40e..04dd6bbd1359c 100644
--- a/packages/react-components/react-migration-v8-v9/CHANGELOG.json
+++ b/packages/react-components/react-migration-v8-v9/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-migration-v8-v9",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:20 GMT",
+      "tag": "@fluentui/react-migration-v8-v9_v9.3.10",
+      "version": "9.3.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-migration-v8-v9",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v8-v9",
+            "comment": "Bump @fluentui/react-components to v9.27.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:36 GMT",
       "tag": "@fluentui/react-migration-v8-v9_v9.3.9",
diff --git a/packages/react-components/react-migration-v8-v9/CHANGELOG.md b/packages/react-components/react-migration-v8-v9/CHANGELOG.md
index d203f6f57f367..648911cbf56e5 100644
--- a/packages/react-components/react-migration-v8-v9/CHANGELOG.md
+++ b/packages/react-components/react-migration-v8-v9/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-migration-v8-v9
 
-This log was last generated on Thu, 20 Jul 2023 18:27:36 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.3.10)
+
+Tue, 25 Jul 2023 13:29:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.3.9..@fluentui/react-migration-v8-v9_v9.3.10)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-components to v9.27.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.3.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.3.9)
 
 Thu, 20 Jul 2023 18:27:36 GMT 
diff --git a/packages/react-components/react-migration-v8-v9/package.json b/packages/react-components/react-migration-v8-v9/package.json
index ff6c2fe050f47..3b496302d145a 100644
--- a/packages/react-components/react-migration-v8-v9/package.json
+++ b/packages/react-components/react-migration-v8-v9/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v8-v9",
-  "version": "9.3.9",
+  "version": "9.3.10",
   "description": "Migration shim components and methods for hybrid v8/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "@ctrl/tinycolor": "3.3.4",
     "@fluentui/fluent2-theme": "^8.107.31",
     "@fluentui/react": "^8.110.11",
-    "@fluentui/react-components": "^9.26.2",
+    "@fluentui/react-components": "^9.27.0",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-overflow/CHANGELOG.json b/packages/react-components/react-overflow/CHANGELOG.json
index 8bbac4a32bf88..a1325aeb6a091 100644
--- a/packages/react-components/react-overflow/CHANGELOG.json
+++ b/packages/react-components/react-overflow/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-overflow",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:20 GMT",
+      "tag": "@fluentui/react-overflow_v9.0.24",
+      "version": "9.0.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "d8493a92520cacac29e9fe341a17d3595bc48343",
+            "comment": "fix: Overflow update should run show/hide steps twice"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/priority-overflow to v9.1.2",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:31 GMT",
       "tag": "@fluentui/react-overflow_v9.0.23",
diff --git a/packages/react-components/react-overflow/CHANGELOG.md b/packages/react-components/react-overflow/CHANGELOG.md
index f60111269b453..51d821168b67b 100644
--- a/packages/react-components/react-overflow/CHANGELOG.md
+++ b/packages/react-components/react-overflow/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-overflow
 
-This log was last generated on Mon, 03 Jul 2023 11:57:14 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.24)
+
+Tue, 25 Jul 2023 13:29:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.23..@fluentui/react-overflow_v9.0.24)
+
+### Patches
+
+- fix: Overflow update should run show/hide steps twice ([PR #28628](https://github.com/microsoft/fluentui/pull/28628) by lingfan.gao@microsoft.com)
+- Bump @fluentui/priority-overflow to v9.1.2 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.23)
 
 Mon, 03 Jul 2023 11:57:14 GMT 
diff --git a/packages/react-components/react-overflow/package.json b/packages/react-components/react-overflow/package.json
index e33dab7bd85a5..0194c1926415e 100644
--- a/packages/react-components/react-overflow/package.json
+++ b/packages/react-components/react-overflow/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-overflow",
-  "version": "9.0.23",
+  "version": "9.0.24",
   "description": "React bindings for @fluentui/priority-overflow",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/priority-overflow": "^9.1.1",
+    "@fluentui/priority-overflow": "^9.1.2",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-persona/CHANGELOG.json b/packages/react-components/react-persona/CHANGELOG.json
index 83a6c12ca4240..00630568903c9 100644
--- a/packages/react-components/react-persona/CHANGELOG.json
+++ b/packages/react-components/react-persona/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-persona",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-persona_v9.2.24",
+      "version": "9.2.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.5.14",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.1.22",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:31 GMT",
       "tag": "@fluentui/react-persona_v9.2.23",
diff --git a/packages/react-components/react-persona/CHANGELOG.md b/packages/react-components/react-persona/CHANGELOG.md
index dc222b1856e73..cc533fec6d1b2 100644
--- a/packages/react-components/react-persona/CHANGELOG.md
+++ b/packages/react-components/react-persona/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Thu, 20 Jul 2023 18:27:31 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.24)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.23..@fluentui/react-persona_v9.2.24)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.5.14 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-badge to v9.1.22 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.2.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.23)
 
 Thu, 20 Jul 2023 18:27:31 GMT 
diff --git a/packages/react-components/react-persona/package.json b/packages/react-components/react-persona/package.json
index b46d8bad099ea..5bfa8aefb82bc 100644
--- a/packages/react-components/react-persona/package.json
+++ b/packages/react-components/react-persona/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-persona",
-  "version": "9.2.23",
+  "version": "9.2.24",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,8 +33,8 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.5.13",
-    "@fluentui/react-badge": "^9.1.21",
+    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-badge": "^9.1.22",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-popover/CHANGELOG.json b/packages/react-components/react-popover/CHANGELOG.json
index be229ea0f3b17..9ba4fd5d56285 100644
--- a/packages/react-components/react-popover/CHANGELOG.json
+++ b/packages/react-components/react-popover/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-popover",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-popover_v9.7.8",
+      "version": "9.7.8",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-portal to v9.3.3",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:31 GMT",
       "tag": "@fluentui/react-popover_v9.7.7",
diff --git a/packages/react-components/react-popover/CHANGELOG.md b/packages/react-components/react-popover/CHANGELOG.md
index d4a4e61d8e40c..667c76fcfe3bb 100644
--- a/packages/react-components/react-popover/CHANGELOG.md
+++ b/packages/react-components/react-popover/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-popover
 
-This log was last generated on Thu, 20 Jul 2023 18:27:31 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.7.8)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.7.7..@fluentui/react-popover_v9.7.8)
+
+### Patches
+
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.7.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.7.7)
 
 Thu, 20 Jul 2023 18:27:31 GMT 
diff --git a/packages/react-components/react-popover/package.json b/packages/react-components/react-popover/package.json
index c63afc258ae0a..0026016b8198d 100644
--- a/packages/react-components/react-popover/package.json
+++ b/packages/react-components/react-popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-popover",
-  "version": "9.7.7",
+  "version": "9.7.8",
   "description": "Popover component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,10 +39,10 @@
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
     "@fluentui/react-context-selector": "^9.1.26",
-    "@fluentui/react-portal": "^9.3.2",
+    "@fluentui/react-portal": "^9.3.3",
     "@fluentui/react-positioning": "^9.8.0",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-portal-compat/CHANGELOG.json b/packages/react-components/react-portal-compat/CHANGELOG.json
index f454dc8b906c5..a99ba9da66a49 100644
--- a/packages/react-components/react-portal-compat/CHANGELOG.json
+++ b/packages/react-components/react-portal-compat/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-portal-compat",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-portal-compat_v9.0.71",
+      "version": "9.0.71",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-portal-compat",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-portal-compat",
+            "comment": "Bump @fluentui/react-components to v9.27.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:32 GMT",
       "tag": "@fluentui/react-portal-compat_v9.0.70",
diff --git a/packages/react-components/react-portal-compat/CHANGELOG.md b/packages/react-components/react-portal-compat/CHANGELOG.md
index 7f02194bafe3c..8f16dc4761286 100644
--- a/packages/react-components/react-portal-compat/CHANGELOG.md
+++ b/packages/react-components/react-portal-compat/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-portal-compat
 
-This log was last generated on Thu, 20 Jul 2023 18:27:32 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.71](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.71)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal-compat_v9.0.70..@fluentui/react-portal-compat_v9.0.71)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-components to v9.27.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.70](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.70)
 
 Thu, 20 Jul 2023 18:27:32 GMT 
diff --git a/packages/react-components/react-portal-compat/package.json b/packages/react-components/react-portal-compat/package.json
index d76ec8e0b7368..928ffe4b4eaec 100644
--- a/packages/react-components/react-portal-compat/package.json
+++ b/packages/react-components/react-portal-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-portal-compat",
-  "version": "9.0.70",
+  "version": "9.0.71",
   "description": "A package that contains compatibility layer for React Portals",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,11 +35,11 @@
   },
   "dependencies": {
     "@fluentui/react-portal-compat-context": "^9.0.6",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
-    "@fluentui/react-components": "^9.26.2",
+    "@fluentui/react-components": "^9.27.0",
     "@types/react": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0"
   },
diff --git a/packages/react-components/react-portal/CHANGELOG.json b/packages/react-components/react-portal/CHANGELOG.json
index e8228ceb04748..a8579bf90b280 100644
--- a/packages/react-components/react-portal/CHANGELOG.json
+++ b/packages/react-components/react-portal/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-portal",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-portal_v9.3.3",
+      "version": "9.3.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-portal",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:31 GMT",
       "tag": "@fluentui/react-portal_v9.3.2",
diff --git a/packages/react-components/react-portal/CHANGELOG.md b/packages/react-components/react-portal/CHANGELOG.md
index 651e7461c9955..83505943397d4 100644
--- a/packages/react-components/react-portal/CHANGELOG.md
+++ b/packages/react-components/react-portal/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-portal
 
-This log was last generated on Mon, 03 Jul 2023 13:34:28 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.3.3)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.3.2..@fluentui/react-portal_v9.3.3)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.3.1)
 
 Mon, 03 Jul 2023 13:34:28 GMT 
diff --git a/packages/react-components/react-portal/package.json b/packages/react-components/react-portal/package.json
index 0647c2831ca38..fdd959536fbd5 100644
--- a/packages/react-components/react-portal/package.json
+++ b/packages/react-components/react-portal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-portal",
-  "version": "9.3.2",
+  "version": "9.3.3",
   "description": "A utility component that creates portals compatible with Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14",
diff --git a/packages/react-components/react-progress/CHANGELOG.json b/packages/react-components/react-progress/CHANGELOG.json
index 9d4a30ebd52ed..b3eb8eb37ef6e 100644
--- a/packages/react-components/react-progress/CHANGELOG.json
+++ b/packages/react-components/react-progress/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-progress",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-progress_v9.1.23",
+      "version": "9.1.23",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-progress",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:32 GMT",
       "tag": "@fluentui/react-progress_v9.1.22",
diff --git a/packages/react-components/react-progress/CHANGELOG.md b/packages/react-components/react-progress/CHANGELOG.md
index 165b422b7ebaa..def978f3d5487 100644
--- a/packages/react-components/react-progress/CHANGELOG.md
+++ b/packages/react-components/react-progress/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-progress
 
-This log was last generated on Thu, 20 Jul 2023 18:27:32 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.1.23)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.1.22..@fluentui/react-progress_v9.1.23)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.1.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.1.22)
 
 Thu, 20 Jul 2023 18:27:32 GMT 
diff --git a/packages/react-components/react-progress/package.json b/packages/react-components/react-progress/package.json
index 4a7e3e9928d4d..5d383667042aa 100644
--- a/packages/react-components/react-progress/package.json
+++ b/packages/react-components/react-progress/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-progress",
-  "version": "9.1.22",
+  "version": "9.1.23",
   "description": "Progress component for FluentUI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-provider/CHANGELOG.json b/packages/react-components/react-provider/CHANGELOG.json
index 7e6a8b9eb5ed9..2fc958756dc8f 100644
--- a/packages/react-components/react-provider/CHANGELOG.json
+++ b/packages/react-components/react-provider/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-provider",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-provider_v9.7.11",
+      "version": "9.7.11",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:32 GMT",
       "tag": "@fluentui/react-provider_v9.7.10",
diff --git a/packages/react-components/react-provider/CHANGELOG.md b/packages/react-components/react-provider/CHANGELOG.md
index 79bd0bb8709a1..adbee108969c0 100644
--- a/packages/react-components/react-provider/CHANGELOG.md
+++ b/packages/react-components/react-provider/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-provider
 
-This log was last generated on Thu, 20 Jul 2023 18:27:32 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.7.11)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.7.10..@fluentui/react-provider_v9.7.11)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.7.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.7.10)
 
 Thu, 20 Jul 2023 18:27:32 GMT 
diff --git a/packages/react-components/react-provider/package.json b/packages/react-components/react-provider/package.json
index 5385f4e4bf9df..e244eca57dc21 100644
--- a/packages/react-components/react-provider/package.json
+++ b/packages/react-components/react-provider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.7.10",
+  "version": "9.7.11",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-radio/CHANGELOG.json b/packages/react-components/react-radio/CHANGELOG.json
index 0ba76c7dc92dd..211793a91121a 100644
--- a/packages/react-components/react-radio/CHANGELOG.json
+++ b/packages/react-components/react-radio/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-radio",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:20 GMT",
+      "tag": "@fluentui/react-radio_v9.1.26",
+      "version": "9.1.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:33 GMT",
       "tag": "@fluentui/react-radio_v9.1.25",
diff --git a/packages/react-components/react-radio/CHANGELOG.md b/packages/react-components/react-radio/CHANGELOG.md
index 6eaffd5ff7720..03120761c83e7 100644
--- a/packages/react-components/react-radio/CHANGELOG.md
+++ b/packages/react-components/react-radio/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-radio
 
-This log was last generated on Thu, 20 Jul 2023 18:27:33 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.26)
+
+Tue, 25 Jul 2023 13:29:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.25..@fluentui/react-radio_v9.1.26)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.1.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.25)
 
 Thu, 20 Jul 2023 18:27:33 GMT 
diff --git a/packages/react-components/react-radio/package.json b/packages/react-components/react-radio/package.json
index 1b8befc2d5f3d..a9defa55e0e66 100644
--- a/packages/react-components/react-radio/package.json
+++ b/packages/react-components/react-radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-radio",
-  "version": "9.1.25",
+  "version": "9.1.26",
   "description": "Fluent UI Radio component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,12 +33,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-label": "^9.1.21",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-search-preview/CHANGELOG.json b/packages/react-components/react-search-preview/CHANGELOG.json
index 1d80171dac44d..9c7a938e57349 100644
--- a/packages/react-components/react-search-preview/CHANGELOG.json
+++ b/packages/react-components/react-search-preview/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-search-preview",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:21 GMT",
+      "tag": "@fluentui/react-search-preview_v0.1.2",
+      "version": "0.1.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-search-preview",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-search-preview",
+            "comment": "Bump @fluentui/react-input to v9.4.23",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:36 GMT",
       "tag": "@fluentui/react-search-preview_v0.1.1",
diff --git a/packages/react-components/react-search-preview/CHANGELOG.md b/packages/react-components/react-search-preview/CHANGELOG.md
index 31c53381e1094..9102f0e62b4c4 100644
--- a/packages/react-components/react-search-preview/CHANGELOG.md
+++ b/packages/react-components/react-search-preview/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-search-preview
 
-This log was last generated on Thu, 20 Jul 2023 18:27:36 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-search-preview_v0.1.2)
+
+Tue, 25 Jul 2023 13:29:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search-preview_v0.1.1..@fluentui/react-search-preview_v0.1.2)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-input to v9.4.23 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search-preview_v0.1.1)
 
 Thu, 20 Jul 2023 18:27:36 GMT 
diff --git a/packages/react-components/react-search-preview/package.json b/packages/react-components/react-search-preview/package.json
index 5ac5e76b8731e..2822d27d3986f 100644
--- a/packages/react-components/react-search-preview/package.json
+++ b/packages/react-components/react-search-preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-search-preview",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Search input for Fluent UI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-input": "^9.4.22",
+    "@fluentui/react-input": "^9.4.23",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-select/CHANGELOG.json b/packages/react-components/react-select/CHANGELOG.json
index 6094324578a23..f87a96bcaa059 100644
--- a/packages/react-components/react-select/CHANGELOG.json
+++ b/packages/react-components/react-select/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-select",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:21 GMT",
+      "tag": "@fluentui/react-select_v9.1.23",
+      "version": "9.1.23",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-select",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:33 GMT",
       "tag": "@fluentui/react-select_v9.1.22",
diff --git a/packages/react-components/react-select/CHANGELOG.md b/packages/react-components/react-select/CHANGELOG.md
index 29668b8b5f607..0697108cb700a 100644
--- a/packages/react-components/react-select/CHANGELOG.md
+++ b/packages/react-components/react-select/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-select
 
-This log was last generated on Thu, 20 Jul 2023 18:27:33 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.1.23)
+
+Tue, 25 Jul 2023 13:29:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.1.22..@fluentui/react-select_v9.1.23)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.1.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.1.22)
 
 Thu, 20 Jul 2023 18:27:33 GMT 
diff --git a/packages/react-components/react-select/package.json b/packages/react-components/react-select/package.json
index bb2c074a977c2..35871124d4d0b 100644
--- a/packages/react-components/react-select/package.json
+++ b/packages/react-components/react-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-select",
-  "version": "9.1.22",
+  "version": "9.1.23",
   "description": "Fluent UI React Select component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
diff --git a/packages/react-components/react-skeleton/CHANGELOG.json b/packages/react-components/react-skeleton/CHANGELOG.json
index 5afe37726de13..e3316285afc88 100644
--- a/packages/react-components/react-skeleton/CHANGELOG.json
+++ b/packages/react-components/react-skeleton/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-skeleton",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-skeleton_v9.0.11",
+      "version": "9.0.11",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:36 GMT",
       "tag": "@fluentui/react-skeleton_v9.0.10",
diff --git a/packages/react-components/react-skeleton/CHANGELOG.md b/packages/react-components/react-skeleton/CHANGELOG.md
index 0a838b005b905..7ce3cfcf1ec49 100644
--- a/packages/react-components/react-skeleton/CHANGELOG.md
+++ b/packages/react-components/react-skeleton/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-skeleton
 
-This log was last generated on Thu, 20 Jul 2023 18:27:36 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.11)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.10..@fluentui/react-skeleton_v9.0.11)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.10)
 
 Thu, 20 Jul 2023 18:27:36 GMT 
diff --git a/packages/react-components/react-skeleton/package.json b/packages/react-components/react-skeleton/package.json
index 9f036c9591ab1..ef1929bc06688 100644
--- a/packages/react-components/react-skeleton/package.json
+++ b/packages/react-components/react-skeleton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-skeleton",
-  "version": "9.0.10",
+  "version": "9.0.11",
   "description": "Converged v9 Skeleton Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,7 +32,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-slider/CHANGELOG.json b/packages/react-components/react-slider/CHANGELOG.json
index d4a89471d7508..d4515fac835ee 100644
--- a/packages/react-components/react-slider/CHANGELOG.json
+++ b/packages/react-components/react-slider/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-slider",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-slider_v9.1.26",
+      "version": "9.1.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:33 GMT",
       "tag": "@fluentui/react-slider_v9.1.25",
diff --git a/packages/react-components/react-slider/CHANGELOG.md b/packages/react-components/react-slider/CHANGELOG.md
index c11e227956dee..61b472df6eaa9 100644
--- a/packages/react-components/react-slider/CHANGELOG.md
+++ b/packages/react-components/react-slider/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-slider
 
-This log was last generated on Thu, 20 Jul 2023 18:27:33 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.26)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.25..@fluentui/react-slider_v9.1.26)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.1.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.25)
 
 Thu, 20 Jul 2023 18:27:33 GMT 
diff --git a/packages/react-components/react-slider/package.json b/packages/react-components/react-slider/package.json
index 8eba0f2f956f2..e6c80c814fd43 100644
--- a/packages/react-components/react-slider/package.json
+++ b/packages/react-components/react-slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-slider",
-  "version": "9.1.25",
+  "version": "9.1.26",
   "description": "Fluent UI React Slider component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,10 +34,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-spinbutton/CHANGELOG.json b/packages/react-components/react-spinbutton/CHANGELOG.json
index 73e2644affba7..9d7f82460718d 100644
--- a/packages/react-components/react-spinbutton/CHANGELOG.json
+++ b/packages/react-components/react-spinbutton/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-spinbutton",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:21 GMT",
+      "tag": "@fluentui/react-spinbutton_v9.2.23",
+      "version": "9.2.23",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:33 GMT",
       "tag": "@fluentui/react-spinbutton_v9.2.22",
diff --git a/packages/react-components/react-spinbutton/CHANGELOG.md b/packages/react-components/react-spinbutton/CHANGELOG.md
index 2a436bf309920..4211e31ad0eff 100644
--- a/packages/react-components/react-spinbutton/CHANGELOG.md
+++ b/packages/react-components/react-spinbutton/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Thu, 20 Jul 2023 18:27:33 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.23)
+
+Tue, 25 Jul 2023 13:29:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.22..@fluentui/react-spinbutton_v9.2.23)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.2.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.22)
 
 Thu, 20 Jul 2023 18:27:33 GMT 
diff --git a/packages/react-components/react-spinbutton/package.json b/packages/react-components/react-spinbutton/package.json
index dfb4c615d17d6..7e160a52d23a6 100644
--- a/packages/react-components/react-spinbutton/package.json
+++ b/packages/react-components/react-spinbutton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinbutton",
-  "version": "9.2.22",
+  "version": "9.2.23",
   "description": "Fluent UI React SpinButton component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
diff --git a/packages/react-components/react-storybook-addon/package.json b/packages/react-components/react-storybook-addon/package.json
index 8291ae047467b..b4e19bf2228e4 100644
--- a/packages/react-components/react-storybook-addon/package.json
+++ b/packages/react-components/react-storybook-addon/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-provider": "^9.7.10",
+    "@fluentui/react-provider": "^9.7.11",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
diff --git a/packages/react-components/react-switch/CHANGELOG.json b/packages/react-components/react-switch/CHANGELOG.json
index 4ff8c3ca8d205..139edf2b7b249 100644
--- a/packages/react-components/react-switch/CHANGELOG.json
+++ b/packages/react-components/react-switch/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-switch",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:21 GMT",
+      "tag": "@fluentui/react-switch_v9.1.26",
+      "version": "9.1.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-switch",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:34 GMT",
       "tag": "@fluentui/react-switch_v9.1.25",
diff --git a/packages/react-components/react-switch/CHANGELOG.md b/packages/react-components/react-switch/CHANGELOG.md
index af997845240a1..cb0339df2c613 100644
--- a/packages/react-components/react-switch/CHANGELOG.md
+++ b/packages/react-components/react-switch/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-switch
 
-This log was last generated on Thu, 20 Jul 2023 18:27:34 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.26)
+
+Tue, 25 Jul 2023 13:29:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.25..@fluentui/react-switch_v9.1.26)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.1.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.25)
 
 Thu, 20 Jul 2023 18:27:34 GMT 
diff --git a/packages/react-components/react-switch/package.json b/packages/react-components/react-switch/package.json
index 1a9f936b828c9..cd2a14b4dfd17 100644
--- a/packages/react-components/react-switch/package.json
+++ b/packages/react-components/react-switch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "9.1.25",
+  "version": "9.1.26",
   "description": "Fluent UI React Switch component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,12 +33,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-label": "^9.1.21",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-table/CHANGELOG.json b/packages/react-components/react-table/CHANGELOG.json
index 382ce9f630a30..3fa5026185eae 100644
--- a/packages/react-components/react-table/CHANGELOG.json
+++ b/packages/react-components/react-table/CHANGELOG.json
@@ -1,6 +1,59 @@
 {
   "name": "@fluentui/react-table",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:22 GMT",
+      "tag": "@fluentui/react-table_v9.7.0",
+      "version": "9.7.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "39cf021c60171b8e56a64637ef046478c686d625",
+            "comment": "Table/DataGrid: Improve keyboard column resizing experience"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.5.14",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.26",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.1.26",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ],
+        "patch": [
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "038d8f703f43ea290412001c94179ee5d1dac4d2",
+            "comment": "28456"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:34 GMT",
       "tag": "@fluentui/react-table_v9.6.1",
diff --git a/packages/react-components/react-table/CHANGELOG.md b/packages/react-components/react-table/CHANGELOG.md
index d1d255abb1180..b05ca1288deaa 100644
--- a/packages/react-components/react-table/CHANGELOG.md
+++ b/packages/react-components/react-table/CHANGELOG.md
@@ -1,9 +1,27 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Thu, 20 Jul 2023 18:27:34 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.7.0)
+
+Tue, 25 Jul 2023 13:29:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.6.1..@fluentui/react-table_v9.7.0)
+
+### Minor changes
+
+- Table/DataGrid: Improve keyboard column resizing experience ([PR #28493](https://github.com/microsoft/fluentui/pull/28493) by jirivyhnalek@microsoft.com)
+- Bump @fluentui/react-avatar to v9.5.14 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.26 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-radio to v9.1.26 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
+### Patches
+
+- 28456 ([PR #28577](https://github.com/microsoft/fluentui/pull/28577) by lingfan.gao@microsoft.com)
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+
 ## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.6.1)
 
 Thu, 20 Jul 2023 18:27:34 GMT 
diff --git a/packages/react-components/react-table/package.json b/packages/react-components/react-table/package.json
index a1749d10c155c..c5ca65395b3e7 100644
--- a/packages/react-components/react-table/package.json
+++ b/packages/react-components/react-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.6.1",
+  "version": "9.7.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,13 +37,13 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
-    "@fluentui/react-avatar": "^9.5.13",
-    "@fluentui/react-checkbox": "^9.1.25",
+    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-checkbox": "^9.1.26",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-radio": "^9.1.25",
+    "@fluentui/react-radio": "^9.1.26",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-tabs/CHANGELOG.json b/packages/react-components/react-tabs/CHANGELOG.json
index c531ca8a14400..a0a70ce1c1cba 100644
--- a/packages/react-components/react-tabs/CHANGELOG.json
+++ b/packages/react-components/react-tabs/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-tabs",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-tabs_v9.3.26",
+      "version": "9.3.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:36 GMT",
       "tag": "@fluentui/react-tabs_v9.3.25",
diff --git a/packages/react-components/react-tabs/CHANGELOG.md b/packages/react-components/react-tabs/CHANGELOG.md
index a197f2d4a7252..452c6557733ad 100644
--- a/packages/react-components/react-tabs/CHANGELOG.md
+++ b/packages/react-components/react-tabs/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Thu, 20 Jul 2023 18:27:36 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.26)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.25..@fluentui/react-tabs_v9.3.26)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.3.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.25)
 
 Thu, 20 Jul 2023 18:27:36 GMT 
diff --git a/packages/react-components/react-tabs/package.json b/packages/react-components/react-tabs/package.json
index b949e7dd4b775..ddffa0061cff7 100644
--- a/packages/react-components/react-tabs/package.json
+++ b/packages/react-components/react-tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.3.25",
+  "version": "9.3.26",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,7 +35,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-tabster/CHANGELOG.json b/packages/react-components/react-tabster/CHANGELOG.json
index 7525dbbe8aff8..89e487382c720 100644
--- a/packages/react-components/react-tabster/CHANGELOG.json
+++ b/packages/react-components/react-tabster/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-tabster",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:22 GMT",
+      "tag": "@fluentui/react-tabster_v9.11.0",
+      "version": "9.11.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2",
+            "comment": "feat: Implement useRestoreFocusSource and useRestoreFocusTarget based on the tabster restorer API"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 03 Jul 2023 13:34:27 GMT",
       "tag": "@fluentui/react-tabster_v9.10.0",
diff --git a/packages/react-components/react-tabster/CHANGELOG.md b/packages/react-components/react-tabster/CHANGELOG.md
index b6790bfad024f..213f849cb2335 100644
--- a/packages/react-components/react-tabster/CHANGELOG.md
+++ b/packages/react-components/react-tabster/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Mon, 03 Jul 2023 13:34:27 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.11.0)
+
+Tue, 25 Jul 2023 13:29:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.10.0..@fluentui/react-tabster_v9.11.0)
+
+### Minor changes
+
+- feat: Implement useRestoreFocusSource and useRestoreFocusTarget based on the tabster restorer API ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by lingfan.gao@microsoft.com)
+
 ## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.10.0)
 
 Mon, 03 Jul 2023 13:34:27 GMT 
diff --git a/packages/react-components/react-tabster/package.json b/packages/react-components/react-tabster/package.json
index f3c89010a7492..749efb1dc0265 100644
--- a/packages/react-components/react-tabster/package.json
+++ b/packages/react-components/react-tabster/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.10.0",
+  "version": "9.11.0",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-components/react-tags-preview/package.json b/packages/react-components/react-tags-preview/package.json
index f17aa1e9e1e00..60777819d591d 100644
--- a/packages/react-components/react-tags-preview/package.json
+++ b/packages/react-components/react-tags-preview/package.json
@@ -36,11 +36,11 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
-    "@fluentui/react-avatar": "^9.5.13",
+    "@fluentui/react-avatar": "^9.5.14",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-textarea/CHANGELOG.json b/packages/react-components/react-textarea/CHANGELOG.json
index 62e25691bf16f..109204a6763af 100644
--- a/packages/react-components/react-textarea/CHANGELOG.json
+++ b/packages/react-components/react-textarea/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-textarea",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-textarea_v9.3.23",
+      "version": "9.3.23",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-field to v9.1.13",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:35 GMT",
       "tag": "@fluentui/react-textarea_v9.3.22",
diff --git a/packages/react-components/react-textarea/CHANGELOG.md b/packages/react-components/react-textarea/CHANGELOG.md
index 0815ae259f8f8..9c68ea654cc24 100644
--- a/packages/react-components/react-textarea/CHANGELOG.md
+++ b/packages/react-components/react-textarea/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-textarea
 
-This log was last generated on Thu, 20 Jul 2023 18:27:35 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.3.23)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.3.22..@fluentui/react-textarea_v9.3.23)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.13 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.3.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.3.22)
 
 Thu, 20 Jul 2023 18:27:35 GMT 
diff --git a/packages/react-components/react-textarea/package.json b/packages/react-components/react-textarea/package.json
index c6cb4ce817d89..a173a97fe7e89 100644
--- a/packages/react-components/react-textarea/package.json
+++ b/packages/react-components/react-textarea/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-textarea",
-  "version": "9.3.22",
+  "version": "9.3.23",
   "description": "Fluent UI TextArea component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.12",
+    "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-toast/CHANGELOG.json b/packages/react-components/react-toast/CHANGELOG.json
index 55e27f864def6..d6be49f8538b5 100644
--- a/packages/react-components/react-toast/CHANGELOG.json
+++ b/packages/react-components/react-toast/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-toast",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:22 GMT",
+      "tag": "@fluentui/react-toast_v9.0.5",
+      "version": "9.0.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-toast",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-portal to v9.3.3",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:35 GMT",
       "tag": "@fluentui/react-toast_v9.0.4",
diff --git a/packages/react-components/react-toast/CHANGELOG.md b/packages/react-components/react-toast/CHANGELOG.md
index 59c67edf1ee55..281ebd71fbda8 100644
--- a/packages/react-components/react-toast/CHANGELOG.md
+++ b/packages/react-components/react-toast/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-toast
 
-This log was last generated on Thu, 20 Jul 2023 18:27:35 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.0.5)
+
+Tue, 25 Jul 2023 13:29:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.0.4..@fluentui/react-toast_v9.0.5)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.0.4)
 
 Thu, 20 Jul 2023 18:27:35 GMT 
diff --git a/packages/react-components/react-toast/package.json b/packages/react-components/react-toast/package.json
index b6995320fcd69..d71203f0e8d8a 100644
--- a/packages/react-components/react-toast/package.json
+++ b/packages/react-components/react-toast/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toast",
-  "version": "9.0.4",
+  "version": "9.0.5",
   "description": "Toast component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,9 +39,9 @@
     "@fluentui/react-aria": "^9.3.27",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-portal": "^9.3.2",
+    "@fluentui/react-portal": "^9.3.3",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-toolbar/CHANGELOG.json b/packages/react-components/react-toolbar/CHANGELOG.json
index 037284ec1a7b4..b0ac707324385 100644
--- a/packages/react-components/react-toolbar/CHANGELOG.json
+++ b/packages/react-components/react-toolbar/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-toolbar",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-toolbar_v9.1.26",
+      "version": "9.1.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.3.25",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.1.26",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:35 GMT",
       "tag": "@fluentui/react-toolbar_v9.1.25",
diff --git a/packages/react-components/react-toolbar/CHANGELOG.md b/packages/react-components/react-toolbar/CHANGELOG.md
index 080ee8474c491..ae42646c3626a 100644
--- a/packages/react-components/react-toolbar/CHANGELOG.md
+++ b/packages/react-components/react-toolbar/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-toolbar
 
-This log was last generated on Thu, 20 Jul 2023 18:27:35 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.26)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.25..@fluentui/react-toolbar_v9.1.26)
+
+### Patches
+
+- Bump @fluentui/react-button to v9.3.25 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-radio to v9.1.26 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.1.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.25)
 
 Thu, 20 Jul 2023 18:27:35 GMT 
diff --git a/packages/react-components/react-toolbar/package.json b/packages/react-components/react-toolbar/package.json
index c42811fef8191..b40d942bb0271 100644
--- a/packages/react-components/react-toolbar/package.json
+++ b/packages/react-components/react-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toolbar",
-  "version": "9.1.25",
+  "version": "9.1.26",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,15 +35,15 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.3.24",
+    "@fluentui/react-button": "^9.3.25",
     "@fluentui/react-divider": "^9.2.21",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-context-selector": "^9.1.26",
-    "@fluentui/react-radio": "^9.1.25",
+    "@fluentui/react-radio": "^9.1.26",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
   },
diff --git a/packages/react-components/react-tooltip/CHANGELOG.json b/packages/react-components/react-tooltip/CHANGELOG.json
index cf17be69275cd..0494c4c24552c 100644
--- a/packages/react-components/react-tooltip/CHANGELOG.json
+++ b/packages/react-components/react-tooltip/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-tooltip",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-tooltip_v9.2.25",
+      "version": "9.2.25",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-portal to v9.3.3",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:35 GMT",
       "tag": "@fluentui/react-tooltip_v9.2.24",
diff --git a/packages/react-components/react-tooltip/CHANGELOG.md b/packages/react-components/react-tooltip/CHANGELOG.md
index 38a27ecc19299..c81c2cdb5353d 100644
--- a/packages/react-components/react-tooltip/CHANGELOG.md
+++ b/packages/react-components/react-tooltip/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-tooltip
 
-This log was last generated on Thu, 20 Jul 2023 18:27:35 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.2.25)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.2.24..@fluentui/react-tooltip_v9.2.25)
+
+### Patches
+
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.2.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.2.24)
 
 Thu, 20 Jul 2023 18:27:35 GMT 
diff --git a/packages/react-components/react-tooltip/package.json b/packages/react-components/react-tooltip/package.json
index 16d62ce14a13a..2212172c6c4ed 100644
--- a/packages/react-components/react-tooltip/package.json
+++ b/packages/react-components/react-tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tooltip",
-  "version": "9.2.24",
+  "version": "9.2.25",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-portal": "^9.3.2",
+    "@fluentui/react-portal": "^9.3.3",
     "@fluentui/react-positioning": "^9.8.0",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-tree/CHANGELOG.json b/packages/react-components/react-tree/CHANGELOG.json
index 14b5d4706b4f2..8ae87e8bf04f5 100644
--- a/packages/react-components/react-tree/CHANGELOG.json
+++ b/packages/react-components/react-tree/CHANGELOG.json
@@ -1,6 +1,69 @@
 {
   "name": "@fluentui/react-tree",
   "entries": [
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.27",
+      "version": "9.0.0-beta.27",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "0d4d0ef8daebaf5b6ebbcce17e64e35488864e0e",
+            "comment": "chore: moves slots from TreeItem to TreeItemLayout"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "c017e880f238c1f113ff7ff6e28560d77e7ea46b",
+            "comment": "feat: creates FlatTree component"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.14",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.25",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.26",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.3",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.26",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:36 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.26",
diff --git a/packages/react-components/react-tree/CHANGELOG.md b/packages/react-components/react-tree/CHANGELOG.md
index 2e1bf2aff8a1b..27795e07633fc 100644
--- a/packages/react-components/react-tree/CHANGELOG.md
+++ b/packages/react-components/react-tree/CHANGELOG.md
@@ -1,9 +1,26 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Thu, 20 Jul 2023 18:27:36 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.27)
+
+Tue, 25 Jul 2023 13:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.26..@fluentui/react-tree_v9.0.0-beta.27)
+
+### Changes
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- chore: moves slots from TreeItem to TreeItemLayout ([PR #28621](https://github.com/microsoft/fluentui/pull/28621) by bernardo.sunderhus@gmail.com)
+- feat: creates FlatTree component ([PR #28620](https://github.com/microsoft/fluentui/pull/28620) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.5.14 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-button to v9.3.25 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.26 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-radio to v9.1.26 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+
 ## [9.0.0-beta.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.26)
 
 Thu, 20 Jul 2023 18:27:36 GMT 
diff --git a/packages/react-components/react-tree/package.json b/packages/react-components/react-tree/package.json
index 4e28b3d31e160..ef53a46f45ad9 100644
--- a/packages/react-components/react-tree/package.json
+++ b/packages/react-components/react-tree/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.0.0-beta.26",
+  "version": "9.0.0-beta.27",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,15 +38,15 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
-    "@fluentui/react-avatar": "^9.5.13",
-    "@fluentui/react-button": "^9.3.24",
-    "@fluentui/react-checkbox": "^9.1.25",
+    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-button": "^9.3.25",
+    "@fluentui/react-checkbox": "^9.1.26",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-portal": "^9.3.2",
-    "@fluentui/react-radio": "^9.1.25",
+    "@fluentui/react-portal": "^9.3.3",
+    "@fluentui/react-radio": "^9.1.26",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/theme-designer/package.json b/packages/react-components/theme-designer/package.json
index 402d49e381aa6..b73d4bc55b15f 100644
--- a/packages/react-components/theme-designer/package.json
+++ b/packages/react-components/theme-designer/package.json
@@ -32,8 +32,8 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-alert": "9.0.0-beta.59",
-    "@fluentui/react-components": "^9.26.2",
+    "@fluentui/react-alert": "9.0.0-beta.60",
+    "@fluentui/react-components": "^9.27.0",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-storybook-addon-codesandbox": "^0.1.0",

From cf90788397d9e58b00ddbaebe22efbf9c66989f0 Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Tue, 25 Jul 2023 13:38:03 -0700
Subject: [PATCH 13/37] fix: StackShim story styles allow content reflow
 (#28593)

---
 .../stories/Stack/index.stories.tsx                  | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/react-migration-v8-v9/stories/Stack/index.stories.tsx b/packages/react-components/react-migration-v8-v9/stories/Stack/index.stories.tsx
index ca35e49322b9a..31010d6669aa1 100644
--- a/packages/react-components/react-migration-v8-v9/stories/Stack/index.stories.tsx
+++ b/packages/react-components/react-migration-v8-v9/stories/Stack/index.stories.tsx
@@ -45,10 +45,12 @@ const styles = {
 };
 
 const useCustomStyles = makeStyles({
+  stackWrapper: {
+    width: '100%',
+  },
   stack: {
     backgroundColor: 'pink',
-    height: '200px',
-    width: '450px',
+    minHeight: '200px',
   },
   stackItem: {
     backgroundColor: 'lightblue',
@@ -95,7 +97,7 @@ export const Playground = () => {
   const shimStyles = useCustomStyles();
   const stackShimStyles = shimStyles.stack;
   const stackStyles = {
-    root: { backgroundColor: 'pink', height: '200px', width: '450px' },
+    root: { backgroundColor: 'pink', minHeight: '200px' },
   };
   const stackItemStyles = { root: { backgroundColor: 'lightblue' } };
   const stackItemShimStyles = shimStyles.stackItem;
@@ -145,7 +147,7 @@ export const Playground = () => {
         </Stack>
       </Stack>
       <Stack horizontal horizontalAlign={'space-evenly'}>
-        <div>
+        <div className={shimStyles.stackWrapper}>
           <h2>v8</h2>
           <Stack
             as={'span'}
@@ -175,7 +177,7 @@ export const Playground = () => {
             <Checkbox label="checkbox 2" styles={stackItemStyles} />
           </Stack>
         </div>
-        <div>
+        <div className={shimStyles.stackWrapper}>
           <h2>StackShim</h2>
           <StackShim
             as={'span'}

From dab84e1d92c9ed5c2f60a82873b180eca069b792 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 25 Jul 2023 23:25:54 +0200
Subject: [PATCH 14/37] chore: remove @fluentui/react-data-grid-react-window
 (#28637)

---
 .github/CODEOWNERS                            |    1 -
 .../.babelrc.json                             |    3 -
 .../.eslintrc.json                            |    4 -
 .../react-data-grid-react-window/.npmignore   |   38 -
 .../.storybook/main.js                        |   14 -
 .../.storybook/preview.js                     |    7 -
 .../.storybook/tsconfig.json                  |   10 -
 .../react-data-grid-react-window/.swcrc       |   30 -
 .../CHANGELOG.json                            | 1126 -----------------
 .../react-data-grid-react-window/CHANGELOG.md |  443 -------
 .../react-data-grid-react-window/LICENSE      |   15 -
 .../react-data-grid-react-window/README.md    |    3 -
 .../config/api-extractor.json                 |    4 -
 .../config/tests.js                           |    1 -
 .../react-data-grid-react-window/docs/Spec.md |   63 -
 .../etc/react-data-grid-react-window.api.md   |   67 -
 .../jest.config.js                            |   21 -
 .../just.config.ts                            |    5 -
 .../react-data-grid-react-window/package.json |   62 -
 .../react-data-grid-react-window/project.json |    8 -
 .../src/DataGrid.ts                           |    1 -
 .../src/DataGridBody.ts                       |    1 -
 .../src/DataGridRow.ts                        |    1 -
 .../src/components/DataGrid/DataGrid.tsx      |   22 -
 .../src/components/DataGrid/index.ts          |    2 -
 .../src/components/DataGrid/useDataGrid.ts    |   27 -
 .../components/DataGridBody/DataGridBody.tsx  |   20 -
 .../DataGridBody/DataGridBody.types.ts        |   48 -
 .../src/components/DataGridBody/index.ts      |    4 -
 .../DataGridBody/renderDataGridBody.tsx       |   28 -
 .../DataGridBody/useDataGridBody.tsx          |   47 -
 .../useDataGridBodyStyles.styles.ts           |   10 -
 .../components/DataGridRow/DataGridRow.tsx    |   19 -
 .../src/components/DataGridRow/index.ts       |    2 -
 .../DataGridRow/useDataGridRow.styles.ts      |   18 -
 .../src/contexts/rowIndexContext.ts           |    9 -
 .../react-data-grid-react-window/src/index.ts |   19 -
 .../src/testing/isConformant.ts               |   15 -
 .../tsconfig.json                             |   25 -
 .../tsconfig.lib.json                         |   22 -
 .../tsconfig.spec.json                        |   17 -
 tsconfig.base.all.json                        |    1 -
 tsconfig.base.json                            |    1 -
 43 files changed, 2284 deletions(-)
 delete mode 100644 packages/react-components/react-data-grid-react-window/.babelrc.json
 delete mode 100644 packages/react-components/react-data-grid-react-window/.eslintrc.json
 delete mode 100644 packages/react-components/react-data-grid-react-window/.npmignore
 delete mode 100644 packages/react-components/react-data-grid-react-window/.storybook/main.js
 delete mode 100644 packages/react-components/react-data-grid-react-window/.storybook/preview.js
 delete mode 100644 packages/react-components/react-data-grid-react-window/.storybook/tsconfig.json
 delete mode 100644 packages/react-components/react-data-grid-react-window/.swcrc
 delete mode 100644 packages/react-components/react-data-grid-react-window/CHANGELOG.json
 delete mode 100644 packages/react-components/react-data-grid-react-window/CHANGELOG.md
 delete mode 100644 packages/react-components/react-data-grid-react-window/LICENSE
 delete mode 100644 packages/react-components/react-data-grid-react-window/README.md
 delete mode 100644 packages/react-components/react-data-grid-react-window/config/api-extractor.json
 delete mode 100644 packages/react-components/react-data-grid-react-window/config/tests.js
 delete mode 100644 packages/react-components/react-data-grid-react-window/docs/Spec.md
 delete mode 100644 packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md
 delete mode 100644 packages/react-components/react-data-grid-react-window/jest.config.js
 delete mode 100644 packages/react-components/react-data-grid-react-window/just.config.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/package.json
 delete mode 100644 packages/react-components/react-data-grid-react-window/project.json
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/DataGrid.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/DataGridBody.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/DataGridRow.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridBody/index.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.tsx
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.styles.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.styles.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/contexts/rowIndexContext.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/index.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts
 delete mode 100644 packages/react-components/react-data-grid-react-window/tsconfig.json
 delete mode 100644 packages/react-components/react-data-grid-react-window/tsconfig.lib.json
 delete mode 100644 packages/react-components/react-data-grid-react-window/tsconfig.spec.json

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 89f403268d51b..d57e42c26af7e 100644
--- a/.github/CODEOWNERS
+++ b/.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
diff --git a/packages/react-components/react-data-grid-react-window/.babelrc.json b/packages/react-components/react-data-grid-react-window/.babelrc.json
deleted file mode 100644
index 38bf1f7a945cf..0000000000000
--- a/packages/react-components/react-data-grid-react-window/.babelrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"]
-}
diff --git a/packages/react-components/react-data-grid-react-window/.eslintrc.json b/packages/react-components/react-data-grid-react-window/.eslintrc.json
deleted file mode 100644
index ceea884c70dcc..0000000000000
--- a/packages/react-components/react-data-grid-react-window/.eslintrc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": ["plugin:@fluentui/eslint-plugin/react"],
-  "root": true
-}
diff --git a/packages/react-components/react-data-grid-react-window/.npmignore b/packages/react-components/react-data-grid-react-window/.npmignore
deleted file mode 100644
index a5817be2414de..0000000000000
--- a/packages/react-components/react-data-grid-react-window/.npmignore
+++ /dev/null
@@ -1,38 +0,0 @@
-.storybook/
-.vscode/
-bundle-size/
-config/
-coverage/
-docs/
-etc/
-node_modules/
-src/
-stories/
-dist/types/
-temp/
-__fixtures__
-__mocks__
-__tests__
-
-*.api.json
-*.log
-*.spec.*
-*.cy.*
-*.test.*
-*.yml
-
-# config files
-*config.*
-*rc.*
-.editorconfig
-.eslint*
-.git*
-.prettierignore
-.swcrc
-project.json
-
-# exclude gitignore patterns explicitly
-!lib
-!lib-commonjs
-!lib-amd
-!dist/*.d.ts
diff --git a/packages/react-components/react-data-grid-react-window/.storybook/main.js b/packages/react-components/react-data-grid-react-window/.storybook/main.js
deleted file mode 100644
index 26536b61b387f..0000000000000
--- a/packages/react-components/react-data-grid-react-window/.storybook/main.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const rootMain = require('../../../../.storybook/main');
-
-module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
-  ...rootMain,
-  stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'],
-  addons: [...rootMain.addons],
-  webpackFinal: (config, options) => {
-    const localConfig = { ...rootMain.webpackFinal(config, options) };
-
-    // add your own webpack tweaks if needed
-
-    return localConfig;
-  },
-});
diff --git a/packages/react-components/react-data-grid-react-window/.storybook/preview.js b/packages/react-components/react-data-grid-react-window/.storybook/preview.js
deleted file mode 100644
index 1939500a3d18c..0000000000000
--- a/packages/react-components/react-data-grid-react-window/.storybook/preview.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as rootPreview from '../../../../.storybook/preview';
-
-/** @type {typeof rootPreview.decorators} */
-export const decorators = [...rootPreview.decorators];
-
-/** @type {typeof rootPreview.parameters} */
-export const parameters = { ...rootPreview.parameters };
diff --git a/packages/react-components/react-data-grid-react-window/.storybook/tsconfig.json b/packages/react-components/react-data-grid-react-window/.storybook/tsconfig.json
deleted file mode 100644
index ea89218a3d916..0000000000000
--- a/packages/react-components/react-data-grid-react-window/.storybook/tsconfig.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "",
-    "allowJs": true,
-    "checkJs": true,
-    "types": ["static-assets", "environment", "storybook__addons"]
-  },
-  "include": ["../stories/**/*.stories.ts", "../stories/**/*.stories.tsx", "*.js"]
-}
diff --git a/packages/react-components/react-data-grid-react-window/.swcrc b/packages/react-components/react-data-grid-react-window/.swcrc
deleted file mode 100644
index b4ffa86dee306..0000000000000
--- a/packages/react-components/react-data-grid-react-window/.swcrc
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "exclude": [
-    "/testing",
-    "/**/*.cy.ts",
-    "/**/*.cy.tsx",
-    "/**/*.spec.ts",
-    "/**/*.spec.tsx",
-    "/**/*.test.ts",
-    "/**/*.test.tsx"
-  ],
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true,
-      "decorators": false,
-      "dynamicImport": false
-    },
-    "externalHelpers": true,
-    "transform": {
-      "react": {
-        "runtime": "classic",
-        "useSpread": true
-      }
-    },
-    "target": "es2019"
-  },
-  "minify": false,
-  "sourceMaps": true
-}
diff --git a/packages/react-components/react-data-grid-react-window/CHANGELOG.json b/packages/react-components/react-data-grid-react-window/CHANGELOG.json
deleted file mode 100644
index d4f3d784ae7c0..0000000000000
--- a/packages/react-components/react-data-grid-react-window/CHANGELOG.json
+++ /dev/null
@@ -1,1126 +0,0 @@
-{
-  "name": "@fluentui/react-data-grid-react-window",
-  "entries": [
-    {
-      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.40",
-      "version": "9.0.0-beta.40",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.7.0",
-            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.27.0",
-            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 20 Jul 2023 18:27:36 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.39",
-      "version": "9.0.0-beta.39",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.6.1",
-            "commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.12",
-            "commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.26.2",
-            "commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 17 Jul 2023 21:27:36 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.38",
-      "version": "9.0.0-beta.38",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.26.1",
-            "commit": "df56ccd0c070c01191acc1af2ddf61f458228c0b"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 13 Jul 2023 21:25:40 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.37",
-      "version": "9.0.0-beta.37",
-      "comments": {
-        "none": [
-          {
-            "author": "martinhochel@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "8a9e1018f2abb2c7608c49d32acf44e93c43cba6",
-            "comment": "chore: update devDependencies to use * for inner workspace dependencies"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Tue, 11 Jul 2023 18:46:34 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.37",
-      "version": "9.0.0-beta.37",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "lingfan.gao@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "f9c4ec8d19658d9314d57f890de1a0d886edc116",
-            "comment": "feat: Deprecates package in favour of @fluentui-contrib/react-data-grid-react-window"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.6.0",
-            "commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.11",
-            "commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0",
-            "commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.26.0",
-            "commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 03 Jul 2023 20:43:09 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.36",
-      "version": "9.0.0-beta.36",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.25.1",
-            "commit": "7b6bd85a2edbc0b9257fe300062d657a4c256844"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 03 Jul 2023 13:34:28 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.35",
-      "version": "9.0.0-beta.35",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.5.0",
-            "commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.25.0",
-            "commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 03 Jul 2023 11:57:12 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.34",
-      "version": "9.0.0-beta.34",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "lingfan.gao@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "1745a0bfdb5ad5a0757fe57e2c698bc170a34cfe",
-            "comment": "fix: Memoize virtualized renderer"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.4.4",
-            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.10.1",
-            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10",
-            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.24.0",
-            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 28 Jun 2023 11:12:25 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.33",
-      "version": "9.0.0-beta.33",
-      "comments": {
-        "none": [
-          {
-            "author": "martinhochel@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "fbe878e9c9785588197481f172c42c2c0a230292",
-            "comment": "fix: update .npmignore to unify v8 packages and exclude project.json"
-          }
-        ],
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.4.3",
-            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.10.0",
-            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.9",
-            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.23.1",
-            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Tue, 27 Jun 2023 11:21:23 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.32",
-      "version": "9.0.0-beta.32",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.4.2",
-            "commit": "1c7e6451a11fb9c59e344df616394a320e8031c4"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.23.0",
-            "commit": "1c7e6451a11fb9c59e344df616394a320e8031c4"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 26 Jun 2023 09:53:55 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.31",
-      "version": "9.0.0-beta.31",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.4.1",
-            "commit": "3e47257676ace0598b9ed336a54befd4d063c332"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.9.4",
-            "commit": "3e47257676ace0598b9ed336a54befd4d063c332"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.8",
-            "commit": "3e47257676ace0598b9ed336a54befd4d063c332"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.22.1",
-            "commit": "3e47257676ace0598b9ed336a54befd4d063c332"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Tue, 20 Jun 2023 12:38:57 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.30",
-      "version": "9.0.0-beta.30",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "jirivyhnalek@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "54316f1ded96bffa3505140ec68031afd0cebdb6",
-            "comment": "Fixed an issue where columns would overflow when resizableColumns is on"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.4.0",
-            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.9.3",
-            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7",
-            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23",
-            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.22.0",
-            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 31 May 2023 06:46:23 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.29",
-      "version": "9.0.0-beta.29",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.3.0",
-            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.9.2",
-            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6",
-            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22",
-            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.21.0",
-            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 25 May 2023 10:00:48 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.28",
-      "version": "9.0.0-beta.28",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.12",
-            "commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.9.1",
-            "commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.5",
-            "commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.20.4",
-            "commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 24 May 2023 20:45:25 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.27",
-      "version": "9.0.0-beta.27",
-      "comments": {
-        "none": [
-          {
-            "author": "olfedias@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "69e0617a93cb44ef42f3bd19284b7dc5fe27fed3",
-            "comment": "chore: update test-ssr script"
-          }
-        ],
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.11",
-            "commit": "3f088b7b09988e7c05af1c953021acc94c273026"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.20.3",
-            "commit": "3f088b7b09988e7c05af1c953021acc94c273026"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 18 May 2023 13:11:08 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.26",
-      "version": "9.0.0-beta.26",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.10",
-            "commit": "1e6f5c8eec4b67c051fb3aa429e303115570ae4d"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.20.2",
-            "commit": "1e6f5c8eec4b67c051fb3aa429e303115570ae4d"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 18 May 2023 00:39:05 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.25",
-      "version": "9.0.0-beta.25",
-      "comments": {
-        "none": [
-          {
-            "author": "olfedias@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "06cd515eda59a3078bfe32f9cc7c1f281cd20208",
-            "comment": "chore: add test-ssr script to v9 packages"
-          }
-        ],
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.9",
-            "commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.9.0",
-            "commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.4",
-            "commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.20.1",
-            "commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 12 May 2023 20:28:25 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.24",
-      "version": "9.0.0-beta.24",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "olfedias@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "9d6394b6c751092fd1d4e26ccc618b5ba05086ec",
-            "comment": "chore: move makeStyles() calls to .styles.ts files"
-          },
-          {
-            "author": "olfedias@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "c28decb23d191a0daaaf6d5d1832429715102129",
-            "comment": "chore: exclude .swcrc from being published"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.8",
-            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.8.1",
-            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3",
-            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21",
-            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.20.0",
-            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
-          }
-        ],
-        "none": [
-          {
-            "author": "martinhochel@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "dbda7fa69e3000aaf8dd4a061e254ebd35198b8e",
-            "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 24 Apr 2023 08:12:33 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.23",
-      "version": "9.0.0-beta.23",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "bernardo.sunderhus@gmail.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11",
-            "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.7",
-            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2",
-            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.19.1",
-            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 17 Apr 2023 17:53:49 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.22",
-      "version": "9.0.0-beta.22",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "bernardo.sunderhus@gmail.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "aed714a47395773c966829e284e4ba9d1926b59c",
-            "comment": "chore: adopt custom JSX pragma"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.6",
-            "commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.8.0",
-            "commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.1",
-            "commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.19.0",
-            "commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 12 Apr 2023 09:31:45 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.21",
-      "version": "9.0.0-beta.21",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.5",
-            "commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.7.4",
-            "commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.18.9",
-            "commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 07 Apr 2023 00:01:45 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.20",
-      "version": "9.0.0-beta.20",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.4",
-            "commit": "7a46cab3d31a233b89b7188e994b24712af5393c"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.18.8",
-            "commit": "7a46cab3d31a233b89b7188e994b24712af5393c"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Tue, 04 Apr 2023 18:44:50 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.19",
-      "version": "9.0.0-beta.19",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.3",
-            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.7.3",
-            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.18.7",
-            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 24 Mar 2023 17:36:41 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.18",
-      "version": "9.0.0-beta.18",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.18.6",
-            "commit": "899de68739acdff9e641a1baedec097a6bc07309"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 24 Mar 2023 14:58:55 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.17",
-      "version": "9.0.0-beta.17",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.18.5",
-            "commit": "0f198d87130e4f9fcacdaa187b850e507e0b1ec8"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 24 Mar 2023 10:15:28 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.16",
-      "version": "9.0.0-beta.16",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.18.4",
-            "commit": "8253bc378281d56e6b4e3a454c185e2ef3672d1d"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Tue, 21 Mar 2023 21:23:31 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.15",
-      "version": "9.0.0-beta.15",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "tristan.watanabe@gmail.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
-            "comment": "fix: add node field to package.json exports map."
-          },
-          {
-            "author": "tristan.watanabe@gmail.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
-            "comment": "chore: migrate to swc transpilation approach."
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.2",
-            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.7.2",
-            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
-            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.18.3",
-            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 16 Mar 2023 14:36:59 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.14",
-      "version": "9.0.0-beta.14",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.1",
-            "commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.7.1",
-            "commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.18.2",
-            "commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 15 Mar 2023 10:19:53 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.13",
-      "version": "9.0.0-beta.13",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.2.0",
-            "commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.18.1",
-            "commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 13 Mar 2023 08:58:26 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.12",
-      "version": "9.0.0-beta.12",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.1.2",
-            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.7.0",
-            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.18.0",
-            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 10 Mar 2023 13:28:40 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.11",
-      "version": "9.0.0-beta.11",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.17.1",
-            "commit": "4e092355bfa9457409d7fc3b4e617681bc9d3c85"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 10 Mar 2023 07:14:01 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.10",
-      "version": "9.0.0-beta.10",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.1.1",
-            "commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.6.2",
-            "commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.17.0",
-            "commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 08 Mar 2023 17:42:51 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.9",
-      "version": "9.0.0-beta.9",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.1.0",
-            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.6.1",
-            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.16.0",
-            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 22 Feb 2023 23:06:07 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.8",
-      "version": "9.0.0-beta.8",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.0.4",
-            "commit": "9ee6caa17f745e014ecba467a4528181ae49be30"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.15.6",
-            "commit": "9ee6caa17f745e014ecba467a4528181ae49be30"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 16 Feb 2023 19:18:47 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.7",
-      "version": "9.0.0-beta.7",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "mgodbolt@microsoft.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "c6f47613e95f8e43ef00792ea673d673881e14fb",
-            "comment": "fixing build issues"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.15.5",
-            "commit": "ca757212da6f77eb0bfe18cf7bfcc8bbab2a5da5"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 16 Feb 2023 16:18:01 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.6",
-      "version": "9.0.0-beta.6",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.15.4",
-            "commit": "4af9156bc869948b12610689f15b2a778aa690ca"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 15 Feb 2023 11:44:52 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.5",
-      "version": "9.0.0-beta.5",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.0.3",
-            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.6.0",
-            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.15.3",
-            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 13 Feb 2023 23:43:14 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.4",
-      "version": "9.0.0-beta.4",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.0.2",
-            "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.5.3",
-            "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.15.2",
-            "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 13 Feb 2023 09:35:48 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.3",
-      "version": "9.0.0-beta.3",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.0.1",
-            "commit": "b24aed22677cb12a74f185feee89edefd1601b9a"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.15.1",
-            "commit": "b24aed22677cb12a74f185feee89edefd1601b9a"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 10 Feb 2023 08:50:02 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.2",
-      "version": "9.0.0-beta.2",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.0.0",
-            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-utilities to v9.5.2",
-            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.15.0",
-            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Tue, 07 Feb 2023 14:13:05 GMT",
-      "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.1",
-      "version": "9.0.0-beta.1",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "lingfangao@hotmail.com",
-            "package": "@fluentui/react-data-grid-react-window",
-            "commit": "787d758ce8a3cf9eef16692969877163af8538f9",
-            "comment": "feat: Initial release react-data-grid-react-window"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-table to v9.0.0-rc.5",
-            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-data-grid-react-window",
-            "comment": "Bump @fluentui/react-components to v9.14.0",
-            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
-          }
-        ]
-      }
-    }
-  ]
-}
diff --git a/packages/react-components/react-data-grid-react-window/CHANGELOG.md b/packages/react-components/react-data-grid-react-window/CHANGELOG.md
deleted file mode 100644
index cca69279589a4..0000000000000
--- a/packages/react-components/react-data-grid-react-window/CHANGELOG.md
+++ /dev/null
@@ -1,443 +0,0 @@
-# Change Log - @fluentui/react-data-grid-react-window
-
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
-
-<!-- Start content -->
-
-## [9.0.0-beta.40](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.40)
-
-Tue, 25 Jul 2023 13:29:23 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.39..@fluentui/react-data-grid-react-window_v9.0.0-beta.40)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.7.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
-- Bump @fluentui/react-components to v9.27.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
-
-## [9.0.0-beta.39](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.39)
-
-Thu, 20 Jul 2023 18:27:36 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.38..@fluentui/react-data-grid-react-window_v9.0.0-beta.39)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.6.1 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.12 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
-- Bump @fluentui/react-components to v9.26.2 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
-
-## [9.0.0-beta.38](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.38)
-
-Mon, 17 Jul 2023 21:27:36 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.37..@fluentui/react-data-grid-react-window_v9.0.0-beta.38)
-
-### Changes
-
-- Bump @fluentui/react-components to v9.26.1 ([PR #28512](https://github.com/microsoft/fluentui/pull/28512) by beachball)
-
-## [9.0.0-beta.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.37)
-
-Tue, 11 Jul 2023 18:46:34 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.36..@fluentui/react-data-grid-react-window_v9.0.0-beta.37)
-
-### Changes
-
-- feat: Deprecates package in favour of @fluentui-contrib/react-data-grid-react-window ([PR #28476](https://github.com/microsoft/fluentui/pull/28476) by lingfan.gao@microsoft.com)
-- Bump @fluentui/react-table to v9.6.0 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.11 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
-- Bump @fluentui/react-conformance-griffel to v9.0.0 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
-- Bump @fluentui/react-components to v9.26.0 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
-
-## [9.0.0-beta.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.36)
-
-Mon, 03 Jul 2023 20:43:09 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.35..@fluentui/react-data-grid-react-window_v9.0.0-beta.36)
-
-### Changes
-
-- Bump @fluentui/react-components to v9.25.1 ([PR #28420](https://github.com/microsoft/fluentui/pull/28420) by beachball)
-
-## [9.0.0-beta.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.35)
-
-Mon, 03 Jul 2023 13:34:28 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.34..@fluentui/react-data-grid-react-window_v9.0.0-beta.35)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.5.0 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
-- Bump @fluentui/react-components to v9.25.0 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
-
-## [9.0.0-beta.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.34)
-
-Mon, 03 Jul 2023 11:57:12 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.33..@fluentui/react-data-grid-react-window_v9.0.0-beta.34)
-
-### Changes
-
-- fix: Memoize virtualized renderer ([PR #28372](https://github.com/microsoft/fluentui/pull/28372) by lingfan.gao@microsoft.com)
-- Bump @fluentui/react-table to v9.4.4 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
-- Bump @fluentui/react-utilities to v9.10.1 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
-- Bump @fluentui/react-components to v9.24.0 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
-
-## [9.0.0-beta.33](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.33)
-
-Wed, 28 Jun 2023 11:12:25 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.32..@fluentui/react-data-grid-react-window_v9.0.0-beta.33)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.4.3 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
-- Bump @fluentui/react-utilities to v9.10.0 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.9 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
-- Bump @fluentui/react-components to v9.23.1 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
-
-## [9.0.0-beta.32](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.32)
-
-Tue, 27 Jun 2023 11:21:23 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.31..@fluentui/react-data-grid-react-window_v9.0.0-beta.32)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.4.2 ([PR #28291](https://github.com/microsoft/fluentui/pull/28291) by beachball)
-- Bump @fluentui/react-components to v9.23.0 ([PR #28291](https://github.com/microsoft/fluentui/pull/28291) by beachball)
-
-## [9.0.0-beta.31](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.31)
-
-Mon, 26 Jun 2023 09:53:55 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.30..@fluentui/react-data-grid-react-window_v9.0.0-beta.31)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.4.1 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
-- Bump @fluentui/react-utilities to v9.9.4 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.8 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
-- Bump @fluentui/react-components to v9.22.1 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
-
-## [9.0.0-beta.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.30)
-
-Tue, 20 Jun 2023 12:38:57 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.29..@fluentui/react-data-grid-react-window_v9.0.0-beta.30)
-
-### Changes
-
-- Fixed an issue where columns would overflow when resizableColumns is on ([PR #27983](https://github.com/microsoft/fluentui/pull/27983) by jirivyhnalek@microsoft.com)
-- Bump @fluentui/react-table to v9.4.0 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
-- Bump @fluentui/react-utilities to v9.9.3 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
-- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
-- Bump @fluentui/react-components to v9.22.0 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
-
-## [9.0.0-beta.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.29)
-
-Wed, 31 May 2023 06:46:23 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.28..@fluentui/react-data-grid-react-window_v9.0.0-beta.29)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.3.0 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
-- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
-- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
-- Bump @fluentui/react-components to v9.21.0 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
-
-## [9.0.0-beta.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.28)
-
-Thu, 25 May 2023 10:00:48 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.27..@fluentui/react-data-grid-react-window_v9.0.0-beta.28)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.2.12 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
-- Bump @fluentui/react-utilities to v9.9.1 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.5 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
-- Bump @fluentui/react-components to v9.20.4 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
-
-## [9.0.0-beta.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.27)
-
-Wed, 24 May 2023 20:45:25 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.26..@fluentui/react-data-grid-react-window_v9.0.0-beta.27)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.2.11 ([PR #27989](https://github.com/microsoft/fluentui/pull/27989) by beachball)
-- Bump @fluentui/react-components to v9.20.3 ([PR #27989](https://github.com/microsoft/fluentui/pull/27989) by beachball)
-
-## [9.0.0-beta.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.26)
-
-Thu, 18 May 2023 13:11:08 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.25..@fluentui/react-data-grid-react-window_v9.0.0-beta.26)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.2.10 ([PR #27540](https://github.com/microsoft/fluentui/pull/27540) by beachball)
-- Bump @fluentui/react-components to v9.20.2 ([PR #27540](https://github.com/microsoft/fluentui/pull/27540) by beachball)
-
-## [9.0.0-beta.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.25)
-
-Thu, 18 May 2023 00:39:05 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.24..@fluentui/react-data-grid-react-window_v9.0.0-beta.25)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.2.9 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
-- Bump @fluentui/react-utilities to v9.9.0 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.4 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
-- Bump @fluentui/react-components to v9.20.1 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
-
-## [9.0.0-beta.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.24)
-
-Fri, 12 May 2023 20:28:25 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.23..@fluentui/react-data-grid-react-window_v9.0.0-beta.24)
-
-### Changes
-
-- chore: move makeStyles() calls to .styles.ts files ([PR #27698](https://github.com/microsoft/fluentui/pull/27698) by olfedias@microsoft.com)
-- chore: exclude .swcrc from being published ([PR #27740](https://github.com/microsoft/fluentui/pull/27740) by olfedias@microsoft.com)
-- Bump @fluentui/react-table to v9.2.8 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
-- Bump @fluentui/react-utilities to v9.8.1 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
-- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
-- Bump @fluentui/react-components to v9.20.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
-
-## [9.0.0-beta.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.23)
-
-Mon, 24 Apr 2023 08:12:33 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.22..@fluentui/react-data-grid-react-window_v9.0.0-beta.23)
-
-### Changes
-
-- bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-table to v9.2.7 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
-- Bump @fluentui/react-components to v9.19.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
-
-## [9.0.0-beta.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.22)
-
-Mon, 17 Apr 2023 17:53:49 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.21..@fluentui/react-data-grid-react-window_v9.0.0-beta.22)
-
-### Changes
-
-- chore: adopt custom JSX pragma ([PR #27552](https://github.com/microsoft/fluentui/pull/27552) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-table to v9.2.6 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
-- Bump @fluentui/react-utilities to v9.8.0 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.1 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
-- Bump @fluentui/react-components to v9.19.0 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
-
-## [9.0.0-beta.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.21)
-
-Wed, 12 Apr 2023 09:31:45 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.20..@fluentui/react-data-grid-react-window_v9.0.0-beta.21)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.2.5 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
-- Bump @fluentui/react-utilities to v9.7.4 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
-- Bump @fluentui/react-components to v9.18.9 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
-
-## [9.0.0-beta.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.20)
-
-Fri, 07 Apr 2023 00:01:45 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.19..@fluentui/react-data-grid-react-window_v9.0.0-beta.20)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.2.4 ([PR #27420](https://github.com/microsoft/fluentui/pull/27420) by beachball)
-- Bump @fluentui/react-components to v9.18.8 ([PR #27420](https://github.com/microsoft/fluentui/pull/27420) by beachball)
-
-## [9.0.0-beta.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.19)
-
-Tue, 04 Apr 2023 18:44:50 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.18..@fluentui/react-data-grid-react-window_v9.0.0-beta.19)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.2.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
-- Bump @fluentui/react-utilities to v9.7.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
-- Bump @fluentui/react-components to v9.18.7 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
-
-## [9.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.18)
-
-Fri, 24 Mar 2023 17:36:41 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.17..@fluentui/react-data-grid-react-window_v9.0.0-beta.18)
-
-### Changes
-
-- Bump @fluentui/react-components to v9.18.6 ([PR #27321](https://github.com/microsoft/fluentui/pull/27321) by beachball)
-
-## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.17)
-
-Fri, 24 Mar 2023 14:58:55 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.16..@fluentui/react-data-grid-react-window_v9.0.0-beta.17)
-
-### Changes
-
-- Bump @fluentui/react-components to v9.18.5 ([PR #27319](https://github.com/microsoft/fluentui/pull/27319) by beachball)
-
-## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.16)
-
-Fri, 24 Mar 2023 10:15:28 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.15..@fluentui/react-data-grid-react-window_v9.0.0-beta.16)
-
-### Changes
-
-- Bump @fluentui/react-components to v9.18.4 ([PR #27317](https://github.com/microsoft/fluentui/pull/27317) by beachball)
-
-## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.15)
-
-Tue, 21 Mar 2023 21:23:31 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.14..@fluentui/react-data-grid-react-window_v9.0.0-beta.15)
-
-### Changes
-
-- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
-- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
-- Bump @fluentui/react-table to v9.2.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
-- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
-- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
-- Bump @fluentui/react-components to v9.18.3 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
-
-## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.14)
-
-Thu, 16 Mar 2023 14:36:59 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.13..@fluentui/react-data-grid-react-window_v9.0.0-beta.14)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.2.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
-- Bump @fluentui/react-utilities to v9.7.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
-- Bump @fluentui/react-components to v9.18.2 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
-
-## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.13)
-
-Wed, 15 Mar 2023 10:19:53 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.12..@fluentui/react-data-grid-react-window_v9.0.0-beta.13)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.2.0 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
-- Bump @fluentui/react-components to v9.18.1 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
-
-## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.12)
-
-Mon, 13 Mar 2023 08:58:26 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.11..@fluentui/react-data-grid-react-window_v9.0.0-beta.12)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.1.2 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
-- Bump @fluentui/react-utilities to v9.7.0 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
-- Bump @fluentui/react-components to v9.18.0 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
-
-## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.11)
-
-Fri, 10 Mar 2023 13:28:40 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.10..@fluentui/react-data-grid-react-window_v9.0.0-beta.11)
-
-### Changes
-
-- Bump @fluentui/react-components to v9.17.1 ([PR #27146](https://github.com/microsoft/fluentui/pull/27146) by beachball)
-
-## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.10)
-
-Fri, 10 Mar 2023 07:14:01 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.9..@fluentui/react-data-grid-react-window_v9.0.0-beta.10)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.1.1 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
-- Bump @fluentui/react-utilities to v9.6.2 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
-- Bump @fluentui/react-components to v9.17.0 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
-
-## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.9)
-
-Wed, 08 Mar 2023 17:42:51 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.8..@fluentui/react-data-grid-react-window_v9.0.0-beta.9)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.1.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
-- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
-- Bump @fluentui/react-components to v9.16.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
-
-## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.8)
-
-Wed, 22 Feb 2023 23:06:07 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.7..@fluentui/react-data-grid-react-window_v9.0.0-beta.8)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.0.4 ([PR #26616](https://github.com/microsoft/fluentui/pull/26616) by beachball)
-- Bump @fluentui/react-components to v9.15.6 ([PR #26616](https://github.com/microsoft/fluentui/pull/26616) by beachball)
-
-## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.7)
-
-Thu, 16 Feb 2023 19:18:47 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.6..@fluentui/react-data-grid-react-window_v9.0.0-beta.7)
-
-### Changes
-
-- fixing build issues ([PR #26877](https://github.com/microsoft/fluentui/pull/26877) by mgodbolt@microsoft.com)
-- Bump @fluentui/react-components to v9.15.5 ([PR #26842](https://github.com/microsoft/fluentui/pull/26842) by beachball)
-
-## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.6)
-
-Thu, 16 Feb 2023 16:18:01 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.5..@fluentui/react-data-grid-react-window_v9.0.0-beta.6)
-
-### Changes
-
-- Bump @fluentui/react-components to v9.15.4 ([PR #26866](https://github.com/microsoft/fluentui/pull/26866) by beachball)
-
-## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.5)
-
-Wed, 15 Feb 2023 11:44:52 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.4..@fluentui/react-data-grid-react-window_v9.0.0-beta.5)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.0.3 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
-- Bump @fluentui/react-utilities to v9.6.0 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
-- Bump @fluentui/react-components to v9.15.3 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
-
-## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.4)
-
-Mon, 13 Feb 2023 23:43:14 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.3..@fluentui/react-data-grid-react-window_v9.0.0-beta.4)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.0.2 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
-- Bump @fluentui/react-utilities to v9.5.3 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
-- Bump @fluentui/react-components to v9.15.2 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
-
-## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.3)
-
-Mon, 13 Feb 2023 09:35:48 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.2..@fluentui/react-data-grid-react-window_v9.0.0-beta.3)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.0.1 ([PR #26800](https://github.com/microsoft/fluentui/pull/26800) by beachball)
-- Bump @fluentui/react-components to v9.15.1 ([PR #26800](https://github.com/microsoft/fluentui/pull/26800) by beachball)
-
-## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.2)
-
-Fri, 10 Feb 2023 08:50:02 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.1..@fluentui/react-data-grid-react-window_v9.0.0-beta.2)
-
-### Changes
-
-- Bump @fluentui/react-table to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
-- Bump @fluentui/react-utilities to v9.5.2 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
-- Bump @fluentui/react-components to v9.15.0 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
-
-## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.1)
-
-Tue, 07 Feb 2023 14:13:05 GMT
-
-### Changes
-
-- feat: Initial release react-data-grid-react-window ([PR #26731](https://github.com/microsoft/fluentui/pull/26731) by lingfangao@hotmail.com)
-- Bump @fluentui/react-table to v9.0.0-rc.5 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
-- Bump @fluentui/react-components to v9.14.0 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
diff --git a/packages/react-components/react-data-grid-react-window/LICENSE b/packages/react-components/react-data-grid-react-window/LICENSE
deleted file mode 100644
index 5c08b03968f53..0000000000000
--- a/packages/react-components/react-data-grid-react-window/LICENSE
+++ /dev/null
@@ -1,15 +0,0 @@
-@fluentui/react-data-grid-react-window
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
diff --git a/packages/react-components/react-data-grid-react-window/README.md b/packages/react-components/react-data-grid-react-window/README.md
deleted file mode 100644
index 08636ff1577ca..0000000000000
--- a/packages/react-components/react-data-grid-react-window/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @fluentui/react-data-grid-react-window
-
-**This package is deprecated - please use [@fluentui-contrib/react-data-grid-react-window](https://www.npmjs.com/package/@fluentui-contrib/react-data-grid-react-window) instead**
diff --git a/packages/react-components/react-data-grid-react-window/config/api-extractor.json b/packages/react-components/react-data-grid-react-window/config/api-extractor.json
deleted file mode 100644
index e533bf30b48a2..0000000000000
--- a/packages/react-components/react-data-grid-react-window/config/api-extractor.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-  "extends": "@fluentui/scripts-api-extractor/api-extractor.common.v-next.json"
-}
diff --git a/packages/react-components/react-data-grid-react-window/config/tests.js b/packages/react-components/react-data-grid-react-window/config/tests.js
deleted file mode 100644
index 2e211ae9e2142..0000000000000
--- a/packages/react-components/react-data-grid-react-window/config/tests.js
+++ /dev/null
@@ -1 +0,0 @@
-/** Jest test setup file. */
diff --git a/packages/react-components/react-data-grid-react-window/docs/Spec.md b/packages/react-components/react-data-grid-react-window/docs/Spec.md
deleted file mode 100644
index 2e50fd1992698..0000000000000
--- a/packages/react-components/react-data-grid-react-window/docs/Spec.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# @fluentui/react-data-grid-react-window Spec
-
-## Background
-
-_Description and use cases of this component_
-
-## Prior Art
-
-_Include background research done for this component_
-
-- _Link to Open UI research_
-- _Link to comparison of v7 and v0_
-- _Link to GitHub epic issue for the converged component_
-
-## Sample Code
-
-_Provide some representative example code that uses the proposed API for the component_
-
-## Variants
-
-_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._
-
-## API
-
-_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_
-
-## Structure
-
-- _**Public**_
-- _**Internal**_
-- _**DOM** - how the component will be rendered as HTML elements_
-
-## Migration
-
-_Describe what will need to be done to upgrade from the existing implementations:_
-
-- _Migration from v8_
-- _Migration from v0_
-
-## Behaviors
-
-_Explain how the component will behave in use, including:_
-
-- _Component States_
-- _Interaction_
-  - _Keyboard_
-  - _Cursor_
-  - _Touch_
-  - _Screen readers_
-
-## Accessibility
-
-Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document.
-
-- Decide whether to use **native element** or folow **ARIA** and provide reasons
-- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible.
-- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props.
-- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used
-- Specify texts for **state change announcements** - [ARIA live regions
-  ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...)
-- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them
-- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation)
-- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases)
diff --git a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md
deleted file mode 100644
index 9442501584777..0000000000000
--- a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md
+++ /dev/null
@@ -1,67 +0,0 @@
-## API Report File for "@fluentui/react-data-grid-react-window"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import type { DataGridBodyProps as DataGridBodyProps_2 } from '@fluentui/react-table';
-import { DataGridCell } from '@fluentui/react-table';
-import { DataGridCellProps } from '@fluentui/react-table';
-import { DataGridHeader } from '@fluentui/react-table';
-import { DataGridHeaderCell } from '@fluentui/react-table';
-import { DataGridHeaderCellProps } from '@fluentui/react-table';
-import { DataGridHeaderProps } from '@fluentui/react-table';
-import { DataGridProps } from '@fluentui/react-table';
-import { DataGridRowProps } from '@fluentui/react-table';
-import { DataGridSelectionCell } from '@fluentui/react-table';
-import { DataGridSelectionCellProps } from '@fluentui/react-table';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
-import type { TableRowData } from '@fluentui/react-table';
-
-// @public @deprecated (undocumented)
-export const DataGrid: ForwardRefComponent<DataGridProps>;
-
-// @public @deprecated (undocumented)
-export const DataGridBody: ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
-
-// @public (undocumented)
-export type DataGridBodyProps<TItem = unknown> = Omit<DataGridBodyProps_2, 'children'> & {
-    itemSize: number;
-    height: number;
-    width?: string | number;
-    children: RowRenderer<TItem>;
-    ariaRowIndexStart?: number;
-};
-
-export { DataGridCell }
-
-export { DataGridCellProps }
-
-export { DataGridHeader }
-
-export { DataGridHeaderCell }
-
-export { DataGridHeaderCellProps }
-
-export { DataGridHeaderProps }
-
-export { DataGridProps }
-
-// @public @deprecated (undocumented)
-export const DataGridRow: ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
-
-export { DataGridRowProps }
-
-export { DataGridSelectionCell }
-
-export { DataGridSelectionCellProps }
-
-// @public (undocumented)
-export type RowRenderer<TItem = unknown> = (row: TableRowData<TItem>, style: React_2.CSSProperties) => React_2.ReactNode;
-
-// (No @packageDocumentation comment for this package)
-
-```
diff --git a/packages/react-components/react-data-grid-react-window/jest.config.js b/packages/react-components/react-data-grid-react-window/jest.config.js
deleted file mode 100644
index 96dffdf59b0cc..0000000000000
--- a/packages/react-components/react-data-grid-react-window/jest.config.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-check
-
-/**
- * @type {import('@jest/types').Config.InitialOptions}
- */
-module.exports = {
-  displayName: 'react-data-grid-react-window',
-  preset: '../../../jest.preset.js',
-  transform: {
-    '^.+\\.tsx?$': [
-      'ts-jest',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-        isolatedModules: true,
-      },
-    ],
-  },
-  coverageDirectory: './coverage',
-  setupFilesAfterEnv: ['./config/tests.js'],
-  snapshotSerializers: ['@griffel/jest-serializer'],
-};
diff --git a/packages/react-components/react-data-grid-react-window/just.config.ts b/packages/react-components/react-data-grid-react-window/just.config.ts
deleted file mode 100644
index b7b2c9a33bf43..0000000000000
--- a/packages/react-components/react-data-grid-react-window/just.config.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { preset, task } from '@fluentui/scripts-tasks';
-
-preset();
-
-task('build', 'build:react-components').cached?.();
diff --git a/packages/react-components/react-data-grid-react-window/package.json b/packages/react-components/react-data-grid-react-window/package.json
deleted file mode 100644
index 4b4d42437a647..0000000000000
--- a/packages/react-components/react-data-grid-react-window/package.json
+++ /dev/null
@@ -1,62 +0,0 @@
-{
-  "name": "@fluentui/react-data-grid-react-window",
-  "version": "9.0.0-beta.40",
-  "description": "Virtualized DataGrid components and utilities powered by react-window",
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "typings": "./dist/index.d.ts",
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/microsoft/fluentui"
-  },
-  "license": "MIT",
-  "scripts": {
-    "build": "just-scripts build",
-    "clean": "just-scripts clean",
-    "code-style": "just-scripts code-style",
-    "just": "just-scripts",
-    "lint": "just-scripts lint",
-    "test": "jest --passWithNoTests",
-    "type-check": "tsc -b tsconfig.json",
-    "generate-api": "just-scripts generate-api",
-    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
-  },
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "*",
-    "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-tasks": "*"
-  },
-  "dependencies": {
-    "@fluentui/react-table": "^9.7.0",
-    "@fluentui/react-utilities": "^9.10.1",
-    "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@swc/helpers": "^0.4.14",
-    "react-window": "^1.8.6"
-  },
-  "peerDependencies": {
-    "@fluentui/react-components": "^9.27.0",
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
-  },
-  "beachball": {
-    "disallowedChangeTypes": [
-      "major",
-      "minor",
-      "patch"
-    ]
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "node": "./lib-commonjs/index.js",
-      "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js"
-    },
-    "./package.json": "./package.json"
-  }
-}
diff --git a/packages/react-components/react-data-grid-react-window/project.json b/packages/react-components/react-data-grid-react-window/project.json
deleted file mode 100644
index acdf6009abf3f..0000000000000
--- a/packages/react-components/react-data-grid-react-window/project.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "name": "@fluentui/react-data-grid-react-window",
-  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "implicitDependencies": [],
-  "sourceRoot": "packages/react-components/react-data-grid-react-window/src",
-  "tags": ["vNext", "platform:web"]
-}
diff --git a/packages/react-components/react-data-grid-react-window/src/DataGrid.ts b/packages/react-components/react-data-grid-react-window/src/DataGrid.ts
deleted file mode 100644
index f0274f9b91596..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/DataGrid.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/DataGrid/index';
diff --git a/packages/react-components/react-data-grid-react-window/src/DataGridBody.ts b/packages/react-components/react-data-grid-react-window/src/DataGridBody.ts
deleted file mode 100644
index 67d8574eceebc..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/DataGridBody.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/DataGridBody/index';
diff --git a/packages/react-components/react-data-grid-react-window/src/DataGridRow.ts b/packages/react-components/react-data-grid-react-window/src/DataGridRow.ts
deleted file mode 100644
index dff1abb3f73e2..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/DataGridRow.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/DataGridRow';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx
deleted file mode 100644
index 4f5b532823113..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { useDataGrid_unstable } from './useDataGrid';
-import {
-  renderDataGrid_unstable,
-  useDataGridStyles_unstable,
-  useDataGridContextValues_unstable,
-} from '@fluentui/react-table';
-import type { DataGridProps } from '@fluentui/react-table';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-
-/**
- * @deprecated - please use [\@fluentui-contrib/react-data-grid-react-window](https://www.npmjs.com/package/\@fluentui-contrib/react-data-grid-react-window) instead
- */
-export const DataGrid: ForwardRefComponent<DataGridProps> = React.forwardRef((props, ref) => {
-  const state = useDataGrid_unstable(props, ref);
-
-  useDataGridStyles_unstable(state);
-  return renderDataGrid_unstable(state, useDataGridContextValues_unstable(state));
-});
-
-// eslint-disable-next-line deprecation/deprecation
-DataGrid.displayName = 'DataGrid';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts
deleted file mode 100644
index 0b3589e2b3bc1..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './DataGrid';
-export * from './useDataGrid';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts
deleted file mode 100644
index fab0d21d7ea5a..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { DataGridProps, DataGridState, TABLE_SELECTION_CELL_WIDTH } from '@fluentui/react-table';
-import { useDataGrid_unstable as useBaseState } from '@fluentui/react-table';
-import { useFluent, useScrollbarWidth } from '@fluentui/react-components';
-
-/**
- * Create the state required to render DataGrid.
- *
- * The returned state can be modified with hooks such as useDataGridStyles_unstable,
- * before being passed to renderDataGrid_unstable.
- *
- * @param props - props from this instance of DataGrid
- * @param ref - reference to root HTMLElement of DataGrid
- */
-export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {
-  const { targetDocument } = useFluent();
-  const scrollbarWidth = useScrollbarWidth({ targetDocument });
-
-  let containerWidthOffset = props.containerWidthOffset;
-
-  if (containerWidthOffset === undefined) {
-    containerWidthOffset = props.selectionMode ? -TABLE_SELECTION_CELL_WIDTH : 0;
-    containerWidthOffset -= scrollbarWidth || 0;
-  }
-
-  return useBaseState({ ...props, 'aria-rowcount': props.items.length, containerWidthOffset }, ref);
-};
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx
deleted file mode 100644
index eb58a4b6761ea..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles';
-import { useDataGridBody_unstable } from './useDataGridBody';
-import { renderDataGridBody_unstable } from './renderDataGridBody';
-import type { DataGridBodyProps } from './DataGridBody.types';
-
-/**
- * @deprecated - please use [\@fluentui-contrib/react-data-grid-react-window](https://www.npmjs.com/package/\@fluentui-contrib/react-data-grid-react-window) instead
- */
-export const DataGridBody: ForwardRefComponent<DataGridBodyProps> &
-  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
-  const state = useDataGridBody_unstable(props, ref);
-
-  useDataGridBodyStyles_unstable(state);
-  return renderDataGridBody_unstable(state);
-}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
-
-// eslint-disable-next-line deprecation/deprecation
-DataGridBody.displayName = 'DataGridBody';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts
deleted file mode 100644
index 4adf507d034ae..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import type {
-  TableRowData,
-  DataGridBodyProps as DataGridBodyPropsBase,
-  DataGridBodySlots as DataGridBodySlotsBase,
-  DataGridBodyState as DataGridBodyStateBase,
-} from '@fluentui/react-table';
-import { ListChildComponentProps } from 'react-window';
-
-export type DataGridBodySlots = DataGridBodySlotsBase;
-
-export type RowRenderer<TItem = unknown> = (row: TableRowData<TItem>, style: React.CSSProperties) => React.ReactNode;
-
-export type DataGridBodyProps<TItem = unknown> = Omit<DataGridBodyPropsBase, 'children'> & {
-  /**
-   * The size of each row
-   */
-  itemSize: number;
-  /**
-   * The height of the virtualized container
-   */
-  height: number;
-  /**
-   * The width of the virtualized container
-   * @default 100%
-   */
-  width?: string | number;
-  /**
-   * Children render function for rows
-   */
-  children: RowRenderer<TItem>;
-  /**
-   * All virtualized rows must have the [aria-rowindex](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex)
-   * attribute for correct screen reader navigation. The default start index is 2 since we assume that there is only
-   * one row in the header. If this is not the case, the start index can be reconfigured through this prop.
-   * @default 2
-   */
-  ariaRowIndexStart?: number;
-};
-
-/**
- * State used in rendering DataGridBody
- */
-export type DataGridBodyState = Omit<DataGridBodyStateBase, 'renderRow'> &
-  Pick<DataGridBodyProps, 'itemSize' | 'height'> &
-  Pick<Required<DataGridBodyProps>, 'width' | 'ariaRowIndexStart'> & {
-    virtualizedRow: (props: ListChildComponentProps) => React.ReactElement;
-  };
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/index.ts
deleted file mode 100644
index 5c9c471c5141a..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './DataGridBody';
-export * from './DataGridBody.types';
-export * from './renderDataGridBody';
-export * from './useDataGridBody';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx
deleted file mode 100644
index b12f3c93a93cb..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx createElement */
-
-import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
-import type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types';
-import { FixedSizeList as List } from 'react-window';
-
-/**
- * Render the final JSX of DataGridVirtualizedBody
- */
-export const renderDataGridBody_unstable = (state: DataGridBodyState) => {
-  const { slots, slotProps } = getSlotsNext<DataGridBodySlots>(state);
-
-  return (
-    <slots.root {...slotProps.root}>
-      <List
-        itemSize={state.itemSize}
-        width={state.width}
-        itemData={state.rows}
-        height={state.height}
-        itemCount={state.rows.length}
-      >
-        {state.virtualizedRow}
-      </List>
-    </slots.root>
-  );
-};
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.tsx
deleted file mode 100644
index 3f56082c60d28..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types';
-import {
-  useDataGridBody_unstable as useDataGridBodyBase_unstable,
-  RowRenderFunction,
-  TableRowData,
-  TableRowIdContextProvider,
-} from '@fluentui/react-table';
-import { TableRowIndexContextProvider } from '../../contexts/rowIndexContext';
-
-/**
- * Create the state required to render DataGridBody.
- *
- * The returned state can be modified with hooks such as useDataGridBodyStyles_unstable,
- * before being passed to renderDataGridBody_unstable.
- *
- * @param props - props from this instance of DataGridBody
- * @param ref - reference to root HTMLElement of DataGridBody
- */
-export const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref<HTMLElement>): DataGridBodyState => {
-  const { height, itemSize, width = '100%', ariaRowIndexStart = 2, children } = props;
-
-  // cast the row render function to work with unknown args
-  const renderRowWithUnknown = children as RowRenderFunction;
-  const baseState = useDataGridBodyBase_unstable({ ...props, children: renderRowWithUnknown }, ref);
-
-  const virtualizedRow: DataGridBodyState['virtualizedRow'] = React.useCallback(
-    ({ data, index, style }) => {
-      const row: TableRowData<unknown> = data[index];
-      return (
-        <TableRowIndexContextProvider value={ariaRowIndexStart + index}>
-          <TableRowIdContextProvider value={row.rowId}>{children(row, style)}</TableRowIdContextProvider>
-        </TableRowIndexContextProvider>
-      );
-    },
-    [ariaRowIndexStart, children],
-  );
-
-  return {
-    ...baseState,
-    itemSize,
-    height,
-    virtualizedRow,
-    width,
-    ariaRowIndexStart,
-  };
-};
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.styles.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.styles.ts
deleted file mode 100644
index 3624babfbb5c8..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.styles.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { DataGridBodyState } from './DataGridBody.types';
-import { useDataGridBodyStyles_unstable as useDataGridBodyStylesBase_unstable } from '@fluentui/react-table';
-
-/**
- * Apply styling to the DataGridBody slots based on the state
- */
-export const useDataGridBodyStyles_unstable = (state: DataGridBodyState): DataGridBodyState => {
-  useDataGridBodyStylesBase_unstable({ ...state, renderRow: () => null });
-  return state;
-};
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx
deleted file mode 100644
index 021a4935fe9dc..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { useDataGridRowStyles_unstable, renderDataGridRow_unstable } from '@fluentui/react-table';
-import { useDataGridRow_unstable } from './useDataGridRow.styles';
-import type { DataGridRowProps } from '@fluentui/react-table';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-
-/**
- * @deprecated - please use [\@fluentui-contrib/react-data-grid-react-window](https://www.npmjs.com/package/\@fluentui-contrib/react-data-grid-react-window) instead
- */
-export const DataGridRow: ForwardRefComponent<DataGridRowProps> &
-  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
-  const state = useDataGridRow_unstable(props, ref);
-
-  useDataGridRowStyles_unstable(state);
-  return renderDataGridRow_unstable(state);
-}) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
-
-// eslint-disable-next-line deprecation/deprecation
-DataGridRow.displayName = 'DataGridRow';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts
deleted file mode 100644
index a5ab3d0a834cd..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './DataGridRow';
-export * from './useDataGridRow.styles';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.styles.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.styles.ts
deleted file mode 100644
index b7e73da01d1b7..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.styles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import type { DataGridRowProps, DataGridRowState } from '@fluentui/react-table';
-import { useDataGridRow_unstable as useBaseState } from '@fluentui/react-table';
-import { useTableRowIndexContext } from '../../contexts/rowIndexContext';
-
-/**
- * Create the state required to render DataGridRow.
- *
- * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,
- * before being passed to renderDataGridRow_unstable.
- *
- * @param props - props from this instance of DataGridRow
- * @param ref - reference to root HTMLElement of DataGridRow
- */
-export const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {
-  const rowIndex = useTableRowIndexContext();
-  return useBaseState({ ...props, 'aria-rowindex': rowIndex }, ref);
-};
diff --git a/packages/react-components/react-data-grid-react-window/src/contexts/rowIndexContext.ts b/packages/react-components/react-data-grid-react-window/src/contexts/rowIndexContext.ts
deleted file mode 100644
index 6ff39e8372cba..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/contexts/rowIndexContext.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-const rowIndexContext = React.createContext<number | undefined>(undefined);
-
-export const tableRowIndexContextDefaultValue = undefined;
-
-export const useTableRowIndexContext = () => React.useContext(rowIndexContext) ?? tableRowIndexContextDefaultValue;
-
-export const TableRowIndexContextProvider = rowIndexContext.Provider;
diff --git a/packages/react-components/react-data-grid-react-window/src/index.ts b/packages/react-components/react-data-grid-react-window/src/index.ts
deleted file mode 100644
index 7f29fe93f0449..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// eslint-disable-next-line deprecation/deprecation
-export { DataGridBody } from './DataGridBody';
-// eslint-disable-next-line deprecation/deprecation
-export { DataGrid } from './DataGrid';
-// eslint-disable-next-line deprecation/deprecation
-export { DataGridRow } from './DataGridRow';
-
-export { DataGridCell, DataGridHeader, DataGridHeaderCell, DataGridSelectionCell } from '@fluentui/react-table';
-
-export type {
-  DataGridCellProps,
-  DataGridHeaderCellProps,
-  DataGridHeaderProps,
-  DataGridSelectionCellProps,
-  DataGridRowProps,
-  DataGridProps,
-} from '@fluentui/react-table';
-
-export type { DataGridBodyProps, RowRenderer } from './DataGridBody';
diff --git a/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts b/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts
deleted file mode 100644
index a3d988f29a172..0000000000000
--- a/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
-import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';
-import griffelTests from '@fluentui/react-conformance-griffel';
-
-export function isConformant<TProps = {}>(
-  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
-) {
-  const defaultOptions: Partial<IsConformantOptions<TProps>> = {
-    tsConfig: { configName: 'tsconfig.spec.json' },
-    componentPath: require.main?.filename.replace('.test', ''),
-    extraTests: griffelTests as TestObject<TProps>,
-  };
-
-  baseIsConformant(defaultOptions, testInfo);
-}
diff --git a/packages/react-components/react-data-grid-react-window/tsconfig.json b/packages/react-components/react-data-grid-react-window/tsconfig.json
deleted file mode 100644
index 1941a041d46c1..0000000000000
--- a/packages/react-components/react-data-grid-react-window/tsconfig.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "target": "ES2019",
-    "noEmit": true,
-    "isolatedModules": true,
-    "importHelpers": true,
-    "jsx": "react",
-    "noUnusedLocals": true,
-    "preserveConstEnums": true
-  },
-  "include": [],
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    },
-    {
-      "path": "./.storybook/tsconfig.json"
-    }
-  ]
-}
diff --git a/packages/react-components/react-data-grid-react-window/tsconfig.lib.json b/packages/react-components/react-data-grid-react-window/tsconfig.lib.json
deleted file mode 100644
index 6f90cf95c005b..0000000000000
--- a/packages/react-components/react-data-grid-react-window/tsconfig.lib.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": false,
-    "lib": ["ES2019", "dom"],
-    "declaration": true,
-    "declarationDir": "../../../dist/out-tsc/types",
-    "outDir": "../../../dist/out-tsc",
-    "inlineSources": true,
-    "types": ["static-assets", "environment"]
-  },
-  "exclude": [
-    "./src/testing/**",
-    "**/*.spec.ts",
-    "**/*.spec.tsx",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "**/*.stories.ts",
-    "**/*.stories.tsx"
-  ],
-  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
-}
diff --git a/packages/react-components/react-data-grid-react-window/tsconfig.spec.json b/packages/react-components/react-data-grid-react-window/tsconfig.spec.json
deleted file mode 100644
index 911456fe4b4d9..0000000000000
--- a/packages/react-components/react-data-grid-react-window/tsconfig.spec.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "CommonJS",
-    "outDir": "dist",
-    "types": ["jest", "node"]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.spec.tsx",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "**/*.d.ts",
-    "./src/testing/**/*.ts",
-    "./src/testing/**/*.tsx"
-  ]
-}
diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json
index 393b0e11afd31..09bf88da9e6be 100644
--- a/tsconfig.base.all.json
+++ b/tsconfig.base.all.json
@@ -104,7 +104,6 @@
       "@fluentui/react-conformance": ["packages/react-conformance/src/index.ts"],
       "@fluentui/react-conformance-griffel": ["packages/react-components/react-conformance-griffel/src/index.ts"],
       "@fluentui/react-context-selector": ["packages/react-components/react-context-selector/src/index.ts"],
-      "@fluentui/react-data-grid-react-window": ["packages/react-components/react-data-grid-react-window/src/index.ts"],
       "@fluentui/react-datepicker-compat": ["packages/react-components/react-datepicker-compat/src/index.ts"],
       "@fluentui/react-dialog": ["packages/react-components/react-dialog/src/index.ts"],
       "@fluentui/react-divider": ["packages/react-components/react-divider/src/index.ts"],
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 50f5eed7d2277..c1fe5483f49a4 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -37,7 +37,6 @@
       "@fluentui/react-conformance": ["packages/react-conformance/src/index.ts"],
       "@fluentui/react-conformance-griffel": ["packages/react-components/react-conformance-griffel/src/index.ts"],
       "@fluentui/react-context-selector": ["packages/react-components/react-context-selector/src/index.ts"],
-      "@fluentui/react-data-grid-react-window": ["packages/react-components/react-data-grid-react-window/src/index.ts"],
       "@fluentui/react-datepicker-compat": ["packages/react-components/react-datepicker-compat/src/index.ts"],
       "@fluentui/react-dialog": ["packages/react-components/react-dialog/src/index.ts"],
       "@fluentui/react-divider": ["packages/react-components/react-divider/src/index.ts"],

From 0e9c438b78e58f346f61b15224c7b0020e4fe73e Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Wed, 26 Jul 2023 12:32:07 +0200
Subject: [PATCH 15/37] bugfix: selector slot required when selection mode is
 defined (#28648)

---
 ...ui-react-tree-3b5f955f-0166-4e3b-85dc-82dddef56b0c.json | 7 +++++++
 .../src/components/TreeItemLayout/useTreeItemLayout.tsx    | 1 +
 2 files changed, 8 insertions(+)
 create mode 100644 change/@fluentui-react-tree-3b5f955f-0166-4e3b-85dc-82dddef56b0c.json

diff --git a/change/@fluentui-react-tree-3b5f955f-0166-4e3b-85dc-82dddef56b0c.json b/change/@fluentui-react-tree-3b5f955f-0166-4e3b-85dc-82dddef56b0c.json
new file mode 100644
index 0000000000000..556aa23d8b80c
--- /dev/null
+++ b/change/@fluentui-react-tree-3b5f955f-0166-4e3b-85dc-82dddef56b0c.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "bugfix: makes selector slot required when selection mode is defined",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
index 8e195e14ca2fe..5687ddb7bf22e 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
@@ -80,6 +80,7 @@ export const useTreeItemLayout_unstable = (
     actions,
     expandIcon,
     selector: resolveShorthand(props.selector, {
+      required: selectionMode !== 'none',
       defaultProps: {
         checked,
         tabIndex: -1,

From 118a4e29ea9a097ce35a8c5a1da79962730d3a3b Mon Sep 17 00:00:00 2001
From: Yush singla <70366079+yush-singla@users.noreply.github.com>
Date: Thu, 27 Jul 2023 14:37:06 +0530
Subject: [PATCH 16/37] Area chart keyboard Accessibility Bug (#28641)

* fixed the keyboard accessibiilty bug in area chart on legend click

* added yarn change

* fixed accessibility bug in area chart

* updated snapshots

* fixed area chart bug and color of line chart vertical line

* area chart accessibility issue fixed

* updated snaphsots

* area chart focus on hover fixed

* email added in changelog

---------

Co-authored-by: Yush Singla <yushsingla@microsoft.com>
---
 ...-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json |  7 +++
 .../components/AreaChart/AreaChart.base.tsx   |  4 +-
 .../__snapshots__/AreaChart.test.tsx.snap     | 48 +++++++++----------
 3 files changed, 33 insertions(+), 26 deletions(-)
 create mode 100644 change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json

diff --git a/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json b/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json
new file mode 100644
index 0000000000000..0efe2ea4a7300
--- /dev/null
+++ b/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fixed the keyboard accessibility issue in area chart when legend is clicked",
+  "packageName": "@fluentui/react-charting",
+  "email": "yushsingla@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
index dcccd12ae9fdf..02babbaee3754 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -695,7 +695,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
               onMouseOut={this._onRectMouseOut}
               onMouseOver={this._onRectMouseMove}
               {...(this.props.optimizeLargeData && {
-                'data-is-focusable': points[index]!.legend === this.state.selectedLegend,
+                'data-is-focusable': this._legendHighlighted(points[index]!.legend) || this._noLegendHighlighted(),
                 role: 'img',
                 'aria-label': `${points[index].legend}, series ${index + 1} of ${points.length} with ${
                   points[index].data.length
@@ -726,7 +726,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
                 <circle
                   key={circleId}
                   id={circleId}
-                  data-is-focusable={points[index]!.legend === this.state.selectedLegend}
+                  data-is-focusable={this._legendHighlighted(points[index]!.legend) || this._noLegendHighlighted()}
                   cx={xScale(singlePoint.xVal)}
                   cy={yScale(singlePoint.values[1])}
                   stroke={lineColor}
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
index 655ad28a31884..adc1d00ad35b3 100644
--- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
@@ -143,7 +143,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -161,7 +161,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="#ffffff"
             id="circle2_1"
             key="circle2_1"
@@ -685,7 +685,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -703,7 +703,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="#ffffff"
             id="circle2_1"
             key="circle2_1"
@@ -1124,7 +1124,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -1142,7 +1142,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="#ffffff"
             id="circle2_1"
             key="circle2_1"
@@ -1547,7 +1547,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
         <path
           aria-label="metaData1, series 1 of 1 with 2 data points."
           d="M40,115.625L-20,20L-20,275L40,275Z"
-          data-is-focusable={false}
+          data-is-focusable={true}
           fill="red"
           fillOpacity={0.7}
           id="0-graph-areaChart_0"
@@ -1882,7 +1882,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="#637cef"
             id="circle2_0"
             key="circle2_0"
@@ -1900,7 +1900,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="#637cef"
             id="circle2_1"
             key="circle2_1"
@@ -2241,7 +2241,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -2259,7 +2259,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -2604,7 +2604,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
             aria-label="20. metaData1, 50."
             cx={10}
             cy={29.8076923076923}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -2945,7 +2945,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -2963,7 +2963,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -3284,7 +3284,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
             aria-label="20. metaData1, 50."
             cx={40}
             cy={130.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -3302,7 +3302,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -3482,7 +3482,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -3500,7 +3500,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -3841,7 +3841,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -3859,7 +3859,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -4200,7 +4200,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -4218,7 +4218,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_1"
             key="circle2_1"
@@ -4559,7 +4559,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             aria-label="20. metaData1, 50."
             cx={40}
             cy={115.625}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_0"
             key="circle2_0"
@@ -4577,7 +4577,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             aria-label="40. metaData1, 80."
             cx={-20}
             cy={20}
-            data-is-focusable={false}
+            data-is-focusable={true}
             fill="red"
             id="circle2_1"
             key="circle2_1"

From d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9 Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Thu, 27 Jul 2023 11:12:47 +0200
Subject: [PATCH 17/37] feat(react-positioning): simplify maxSize options
 (#28649)

* wip

* comments

* try to make it better

* chg

* use middleware

* update flag

* test inline overflow

* comment

* use clip to test overflow

* normalize autosize once

* nit fix in test

* rename autoSize to rawAutoSize, and normalizeAutoSize to autoSize

* apply suggestions

* fix test
---
 .../src/stories/Positioning.stories.tsx       | 116 ++++++++++++++++++
 ...-bc570315-c0a5-4a0f-a762-5fb18e58b4e8.json |   7 ++
 .../src/middleware/maxSize.ts                 |  79 ++++++++----
 .../react-positioning/src/types.ts            |  11 +-
 .../react-positioning/src/usePositioning.ts   |   7 +-
 .../react-positioning/src/utils/index.ts      |   1 +
 .../src/utils/normalizeAutoSize.test.ts       |  53 ++++++++
 .../src/utils/normalizeAutoSize.ts            |  34 +++++
 8 files changed, 275 insertions(+), 33 deletions(-)
 create mode 100644 change/@fluentui-react-positioning-bc570315-c0a5-4a0f-a762-5fb18e58b4e8.json
 create mode 100644 packages/react-components/react-positioning/src/utils/normalizeAutoSize.test.ts
 create mode 100644 packages/react-components/react-positioning/src/utils/normalizeAutoSize.ts

diff --git a/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx b/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
index 46fb0e07605fd..37034935a7d59 100644
--- a/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
@@ -477,6 +477,99 @@ const AutoSize = () => {
   );
 };
 
+const AutoSizeAsyncContent = () => {
+  const styles = useStyles();
+  const [overflowBoundary, setOverflowBoundary] = React.useState<HTMLDivElement | null>(null);
+  const { containerRef, targetRef } = usePositioning({
+    position: 'below',
+    autoSize: true,
+    overflowBoundary,
+  });
+
+  return (
+    <div
+      ref={setOverflowBoundary}
+      className={styles.boundary}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: 200,
+        padding: '10px 50px',
+        position: 'relative',
+      }}
+    >
+      <button ref={targetRef}>Target</button>
+      <Box ref={containerRef} style={{ overflow: 'auto', border: '3px solid green' }}>
+        <AsyncFloatingContent />
+      </Box>
+    </div>
+  );
+};
+const AsyncFloatingContent = () => {
+  const [isLoaded, setLoaded] = React.useState(false);
+  const onLoaded = () => setLoaded(true);
+  return isLoaded ? (
+    <span id="full-content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. In fermentum et sollicitudin ac orci phasellus egestas. Facilisi cras fermentum odio eu feugiat
+      pretium nibh ipsum consequat.
+    </span>
+  ) : (
+    <button id="load-content" onClick={onLoaded}>
+      load
+    </button>
+  );
+};
+
+const AutoSizeUpdatePosition = () => {
+  const styles = useStyles();
+  const [overflowBoundary, setOverflowBoundary] = React.useState<HTMLDivElement | null>(null);
+  const positioningRef = React.useRef<PositioningImperativeRef>(null);
+  const { containerRef, targetRef } = usePositioning({
+    position: 'below',
+    align: 'start',
+    autoSize: true,
+    overflowBoundary,
+    positioningRef,
+  });
+
+  const [isLoaded, setLoaded] = React.useState(false);
+  const onLoaded = () => setLoaded(true);
+
+  React.useEffect(() => {
+    if (isLoaded) {
+      positioningRef.current?.updatePosition();
+    }
+  }, [isLoaded]);
+
+  return (
+    <div
+      ref={setOverflowBoundary}
+      className={styles.boundary}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: 200,
+        width: 250,
+        position: 'relative',
+      }}
+    >
+      <button ref={targetRef} style={{ width: 'fit-content', marginLeft: 100, marginTop: 10 }}>
+        Target
+      </button>
+      <Box ref={containerRef} style={{ overflow: 'clip', overflowClipMargin: 10, border: '3px solid green' }}>
+        {isLoaded ? (
+          <div id="full-content" style={{ backgroundColor: 'cornflowerblue', width: 300, height: 100 }} />
+        ) : (
+          <button id="load-content" onClick={onLoaded}>
+            load + update position
+          </button>
+        )}
+      </Box>
+    </div>
+  );
+};
+
 const DisableTether = () => {
   const styles = useStyles();
   const { containerRef, targetRef } = usePositioning({
@@ -1019,6 +1112,29 @@ storiesOf('Positioning', module)
   .addStory('horizontal overflow', () => <HorizontalOverflow />, { includeRtl: true })
   .addStory('pinned', () => <Pinned />)
   .addStory('auto size', () => <AutoSize />)
+  .addStory('auto size with async content', () => (
+    <StoryWright
+      steps={new Steps()
+        .click('#load-content')
+        .wait('#full-content')
+        .snapshot('floating element is within the boundary')
+        .end()}
+    >
+      <AutoSizeAsyncContent />
+    </StoryWright>
+  ))
+  .addStory('auto size with async content reset styles on updatePosition', () => (
+    <StoryWright
+      steps={new Steps()
+        .click('#load-content')
+        .wait('#full-content')
+        .wait(250) // let updatePosition finish
+        .snapshot('floating element width fills boundary and overflows 10px because of overflow:clip')
+        .end()}
+    >
+      <AutoSizeUpdatePosition />
+    </StoryWright>
+  ))
   .addStory('disable tether', () => <DisableTether />)
   .addStory('position fixed', () => <PositionAndAlignProps positionFixed />, { includeRtl: true })
   .addStory('virtual element', () => <VirtualElement />)
diff --git a/change/@fluentui-react-positioning-bc570315-c0a5-4a0f-a762-5fb18e58b4e8.json b/change/@fluentui-react-positioning-bc570315-c0a5-4a0f-a762-5fb18e58b4e8.json
new file mode 100644
index 0000000000000..d3bfd9c2f1b81
--- /dev/null
+++ b/change/@fluentui-react-positioning-bc570315-c0a5-4a0f-a762-5fb18e58b4e8.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: simplify autoSize options to make 'always'/'height-always'/'width-always' equivalent to true/'height'/'width'.",
+  "packageName": "@fluentui/react-positioning",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.ts b/packages/react-components/react-positioning/src/middleware/maxSize.ts
index 3c3d4ed20143d..760668c41700f 100644
--- a/packages/react-components/react-positioning/src/middleware/maxSize.ts
+++ b/packages/react-components/react-positioning/src/middleware/maxSize.ts
@@ -1,41 +1,68 @@
 import { size } from '@floating-ui/dom';
 import type { Middleware } from '@floating-ui/dom';
-import type { PositioningOptions } from '../types';
+import type { NormalizedAutoSize, PositioningOptions } from '../types';
 import { getBoundary } from '../utils/getBoundary';
 export interface MaxSizeMiddlewareOptions extends Pick<PositioningOptions, 'overflowBoundary'> {
   container: HTMLElement | null;
 }
 
-export function maxSize(autoSize: PositioningOptions['autoSize'], options: MaxSizeMiddlewareOptions): Middleware {
+/**
+ * floating-ui `size` middleware uses floating element's height/width to calculate available height/width.
+ * This middleware only runs once per lifecycle, resetting styles applied by maxSize from previous lifecycle.
+ * Then floating element's original size is restored and `size` middleware can calculate available height/width correctly.
+ */
+export const resetMaxSize = (autoSize: NormalizedAutoSize): Middleware => ({
+  name: 'resetMaxSize',
+  fn({ middlewareData: { maxSizeAlreadyReset }, elements }) {
+    if (maxSizeAlreadyReset) {
+      return {};
+    }
+
+    const { applyMaxWidth, applyMaxHeight } = autoSize;
+    if (applyMaxWidth) {
+      elements.floating.style.removeProperty('box-sizing');
+      elements.floating.style.removeProperty('max-width');
+      elements.floating.style.removeProperty('width');
+    }
+    if (applyMaxHeight) {
+      elements.floating.style.removeProperty('box-sizing');
+      elements.floating.style.removeProperty('max-height');
+      elements.floating.style.removeProperty('height');
+    }
+
+    return {
+      data: { maxSizeAlreadyReset: true },
+      reset: { rects: true },
+    };
+  },
+});
+
+export function maxSize(autoSize: NormalizedAutoSize, options: MaxSizeMiddlewareOptions): Middleware {
   const { container, overflowBoundary } = options;
   return size({
     ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),
     apply({ availableHeight, availableWidth, elements, rects }) {
-      if (autoSize) {
+      const applyMaxSizeStyles = (apply: boolean, dimension: 'width' | 'height', availableSize: number) => {
+        if (!apply) {
+          return;
+        }
+
         elements.floating.style.setProperty('box-sizing', 'border-box');
-      }
-
-      const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always';
-      const widthOverflow = rects.floating.width > availableWidth && (autoSize === true || autoSize === 'width');
-
-      const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always';
-      const heightOverflow = rects.floating.height > availableHeight && (autoSize === true || autoSize === 'height');
-
-      if (applyMaxHeight || heightOverflow) {
-        elements.floating.style.setProperty('max-height', `${availableHeight}px`);
-      }
-      if (heightOverflow) {
-        elements.floating.style.setProperty('height', `${availableHeight}px`);
-        elements.floating.style.setProperty('overflow-y', 'auto');
-      }
-
-      if (applyMaxWidth || widthOverflow) {
-        elements.floating.style.setProperty('max-width', `${availableWidth}px`);
-      }
-      if (widthOverflow) {
-        elements.floating.style.setProperty('width', `${availableWidth}px`);
-        elements.floating.style.setProperty('overflow-x', 'auto');
-      }
+        elements.floating.style.setProperty(`max-${dimension}`, `${availableSize}px`);
+
+        if (rects.floating[dimension] > availableSize) {
+          elements.floating.style.setProperty(dimension, `${availableSize}px`);
+
+          const axis = dimension === 'width' ? 'x' : 'y';
+          if (!elements.floating.style.getPropertyValue(`overflow-${axis}`)) {
+            elements.floating.style.setProperty(`overflow-${axis}`, 'auto');
+          }
+        }
+      };
+
+      const { applyMaxWidth, applyMaxHeight } = autoSize;
+      applyMaxSizeStyles(applyMaxWidth, 'width', availableWidth);
+      applyMaxSizeStyles(applyMaxHeight, 'height', availableHeight);
     },
   });
 }
diff --git a/packages/react-components/react-positioning/src/types.ts b/packages/react-components/react-positioning/src/types.ts
index 11297197926f2..5ec16065604f8 100644
--- a/packages/react-components/react-positioning/src/types.ts
+++ b/packages/react-components/react-positioning/src/types.ts
@@ -49,6 +49,7 @@ export type Position = 'above' | 'below' | 'before' | 'after';
 export type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
 
 export type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
+export type NormalizedAutoSize = { applyMaxWidth: boolean; applyMaxHeight: boolean };
 
 export type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';
 
@@ -136,11 +137,11 @@ export interface PositioningOptions {
   arrowPadding?: number;
 
   /**
-   * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.
-   * true enables this for both width and height when overflow happens.
-   * 'always' applies `max-height`/`max-width` regardless of overflow.
-   * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
-   * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
+   * Applies styles on the positioned element to fit it within the available space in viewport.
+   * - true: set styles for max height/width.
+   * - 'height': set styles for max height.
+   * - 'width'': set styles for max width.
+   * Note that options 'always'/'height-always'/'width-always' are now obsolete, and equivalent to true/'height'/'width'.
    */
   autoSize?: AutoSize;
 
diff --git a/packages/react-components/react-positioning/src/usePositioning.ts b/packages/react-components/react-positioning/src/usePositioning.ts
index ce5bcbd0a3464..9a678097adaaf 100644
--- a/packages/react-components/react-positioning/src/usePositioning.ts
+++ b/packages/react-components/react-positioning/src/usePositioning.ts
@@ -10,12 +10,13 @@ import type {
   TargetElement,
   UsePositioningReturn,
 } from './types';
-import { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';
+import { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent, normalizeAutoSize } from './utils';
 import {
   shift as shiftMiddleware,
   flip as flipMiddleware,
   coverTarget as coverTargetMiddleware,
   maxSize as maxSizeMiddleware,
+  resetMaxSize as resetMaxSizeMiddleware,
   offset as offsetMiddleware,
   intersecting as intersectingMiddleware,
 } from './middleware';
@@ -154,7 +155,7 @@ function usePositioningOptions(options: PositioningOptions) {
   const {
     align,
     arrowPadding,
-    autoSize,
+    autoSize: rawAutoSize,
     coverTarget,
     flipBoundary,
     offset,
@@ -173,12 +174,14 @@ function usePositioningOptions(options: PositioningOptions) {
   const { dir } = useFluent();
   const isRtl = dir === 'rtl';
   const positionStrategy: Strategy = strategy ?? positionFixed ? 'fixed' : 'absolute';
+  const autoSize = normalizeAutoSize(rawAutoSize);
 
   return React.useCallback(
     (container: HTMLElement | null, arrow: HTMLElement | null) => {
       const hasScrollableElement = hasScrollParent(container);
 
       const middleware = [
+        autoSize && resetMaxSizeMiddleware(autoSize),
         offset && offsetMiddleware(offset),
         coverTarget && coverTargetMiddleware(),
         !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement, isRtl, fallbackPositions }),
diff --git a/packages/react-components/react-positioning/src/utils/index.ts b/packages/react-components/react-positioning/src/utils/index.ts
index 188c70969cdab..e538bdfaee66a 100644
--- a/packages/react-components/react-positioning/src/utils/index.ts
+++ b/packages/react-components/react-positioning/src/utils/index.ts
@@ -13,3 +13,4 @@ export * from './toggleScrollListener';
 export * from './hasAutoFocusFilter';
 export * from './writeArrowUpdates';
 export * from './writeContainerupdates';
+export * from './normalizeAutoSize';
diff --git a/packages/react-components/react-positioning/src/utils/normalizeAutoSize.test.ts b/packages/react-components/react-positioning/src/utils/normalizeAutoSize.test.ts
new file mode 100644
index 0000000000000..9a826ad95c909
--- /dev/null
+++ b/packages/react-components/react-positioning/src/utils/normalizeAutoSize.test.ts
@@ -0,0 +1,53 @@
+import { normalizeAutoSize } from './normalizeAutoSize';
+
+describe('normalizeAutoSize', () => {
+  const cases = [
+    [
+      'always',
+      {
+        applyMaxWidth: true,
+        applyMaxHeight: true,
+      },
+    ],
+    [
+      true,
+      {
+        applyMaxWidth: true,
+        applyMaxHeight: true,
+      },
+    ],
+    [
+      'width-always',
+      {
+        applyMaxWidth: true,
+        applyMaxHeight: false,
+      },
+    ],
+    [
+      'width',
+      {
+        applyMaxWidth: true,
+        applyMaxHeight: false,
+      },
+    ],
+    [
+      'height-always',
+      {
+        applyMaxWidth: false,
+        applyMaxHeight: true,
+      },
+    ],
+    [
+      'height',
+      {
+        applyMaxWidth: false,
+        applyMaxHeight: true,
+      },
+    ],
+    [false, false],
+  ] as const;
+
+  it.each(cases)('should normalize autoSize', (rawAutoSize, normalizedAutoSize) => {
+    expect(normalizeAutoSize(rawAutoSize)).toEqual(normalizedAutoSize);
+  });
+});
diff --git a/packages/react-components/react-positioning/src/utils/normalizeAutoSize.ts b/packages/react-components/react-positioning/src/utils/normalizeAutoSize.ts
new file mode 100644
index 0000000000000..49701999ccd6c
--- /dev/null
+++ b/packages/react-components/react-positioning/src/utils/normalizeAutoSize.ts
@@ -0,0 +1,34 @@
+import type { NormalizedAutoSize, PositioningOptions } from '../types';
+
+/**
+ * AutoSizes contains many options from historic implementation.
+ * Now options 'always'/'height-always'/'width-always' are obsolete.
+ * This function maps them to true/'height'/'width'
+ */
+export const normalizeAutoSize = (autoSize?: PositioningOptions['autoSize']): NormalizedAutoSize | false => {
+  switch (autoSize) {
+    case 'always':
+    case true:
+      return {
+        applyMaxWidth: true,
+        applyMaxHeight: true,
+      };
+
+    case 'width-always':
+    case 'width':
+      return {
+        applyMaxWidth: true,
+        applyMaxHeight: false,
+      };
+
+    case 'height-always':
+    case 'height':
+      return {
+        applyMaxWidth: false,
+        applyMaxHeight: true,
+      };
+
+    default:
+      return false;
+  }
+};

From 6320eca143cfe0741e35ada6a84408036332d176 Mon Sep 17 00:00:00 2001
From: Fluent UI Build <fluentui-internal@service.microsoft.com>
Date: Thu, 27 Jul 2023 10:34:23 +0000
Subject: [PATCH 18/37] applying package updates

---
 ...-03f8268f-d187-4f13-ac82-48548dfa3c97.json |  7 ----
 ...-bc570315-c0a5-4a0f-a762-5fb18e58b4e8.json |  7 ----
 ...-f6515d84-5f8b-4649-90dc-7d0cf179d176.json |  7 ----
 ...-3b5f955f-0166-4e3b-85dc-82dddef56b0c.json |  7 ----
 .../react-alert/CHANGELOG.json                | 15 ++++++++
 .../react-components/react-alert/CHANGELOG.md | 11 +++++-
 .../react-components/react-alert/package.json |  4 +--
 .../react-avatar/CHANGELOG.json               | 21 +++++++++++
 .../react-avatar/CHANGELOG.md                 | 12 ++++++-
 .../react-avatar/package.json                 |  6 ++--
 .../react-combobox/CHANGELOG.json             | 15 ++++++++
 .../react-combobox/CHANGELOG.md               | 11 +++++-
 .../react-combobox/package.json               |  4 +--
 .../react-components/CHANGELOG.json           | 35 +++++++++++++++++++
 .../react-components/CHANGELOG.md             | 20 ++++++++++-
 .../react-components/package.json             | 24 ++++++-------
 .../react-datepicker-compat/CHANGELOG.json    | 21 +++++++++++
 .../react-datepicker-compat/CHANGELOG.md      | 12 ++++++-
 .../react-datepicker-compat/package.json      |  6 ++--
 .../react-infobutton/CHANGELOG.json           | 15 ++++++++
 .../react-infobutton/CHANGELOG.md             | 11 +++++-
 .../react-infobutton/package.json             |  4 +--
 .../react-menu/CHANGELOG.json                 | 21 +++++++++++
 .../react-components/react-menu/CHANGELOG.md  | 12 ++++++-
 .../react-components/react-menu/package.json  |  4 +--
 .../react-migration-v0-v9/CHANGELOG.json      | 15 ++++++++
 .../react-migration-v0-v9/CHANGELOG.md        | 11 +++++-
 .../react-migration-v0-v9/package.json        |  4 +--
 .../react-migration-v8-v9/CHANGELOG.json      | 15 ++++++++
 .../react-migration-v8-v9/CHANGELOG.md        | 11 +++++-
 .../react-migration-v8-v9/package.json        |  4 +--
 .../react-persona/CHANGELOG.json              | 15 ++++++++
 .../react-persona/CHANGELOG.md                | 11 +++++-
 .../react-persona/package.json                |  4 +--
 .../react-popover/CHANGELOG.json              | 15 ++++++++
 .../react-popover/CHANGELOG.md                | 11 +++++-
 .../react-popover/package.json                |  4 +--
 .../react-portal-compat/CHANGELOG.json        | 15 ++++++++
 .../react-portal-compat/CHANGELOG.md          | 11 +++++-
 .../react-portal-compat/package.json          |  4 +--
 .../react-positioning/CHANGELOG.json          | 21 +++++++++++
 .../react-positioning/CHANGELOG.md            | 12 ++++++-
 .../react-positioning/package.json            |  2 +-
 .../react-table/CHANGELOG.json                | 15 ++++++++
 .../react-components/react-table/CHANGELOG.md | 11 +++++-
 .../react-components/react-table/package.json |  4 +--
 .../react-tags-preview/package.json           |  2 +-
 .../react-tooltip/CHANGELOG.json              | 15 ++++++++
 .../react-tooltip/CHANGELOG.md                | 11 +++++-
 .../react-tooltip/package.json                |  4 +--
 .../react-tree/CHANGELOG.json                 | 21 +++++++++++
 .../react-components/react-tree/CHANGELOG.md  | 12 ++++++-
 .../react-components/react-tree/package.json  |  4 +--
 .../theme-designer/package.json               |  4 +--
 54 files changed, 510 insertions(+), 90 deletions(-)
 delete mode 100644 change/@fluentui-react-menu-03f8268f-d187-4f13-ac82-48548dfa3c97.json
 delete mode 100644 change/@fluentui-react-positioning-bc570315-c0a5-4a0f-a762-5fb18e58b4e8.json
 delete mode 100644 change/@fluentui-react-positioning-f6515d84-5f8b-4649-90dc-7d0cf179d176.json
 delete mode 100644 change/@fluentui-react-tree-3b5f955f-0166-4e3b-85dc-82dddef56b0c.json

diff --git a/change/@fluentui-react-menu-03f8268f-d187-4f13-ac82-48548dfa3c97.json b/change/@fluentui-react-menu-03f8268f-d187-4f13-ac82-48548dfa3c97.json
deleted file mode 100644
index 1bf40f9e08652..0000000000000
--- a/change/@fluentui-react-menu-03f8268f-d187-4f13-ac82-48548dfa3c97.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: update style to prevent double scrollbar",
-  "packageName": "@fluentui/react-menu",
-  "email": "yuanboxue@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-positioning-bc570315-c0a5-4a0f-a762-5fb18e58b4e8.json b/change/@fluentui-react-positioning-bc570315-c0a5-4a0f-a762-5fb18e58b4e8.json
deleted file mode 100644
index d3bfd9c2f1b81..0000000000000
--- a/change/@fluentui-react-positioning-bc570315-c0a5-4a0f-a762-5fb18e58b4e8.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: simplify autoSize options to make 'always'/'height-always'/'width-always' equivalent to true/'height'/'width'.",
-  "packageName": "@fluentui/react-positioning",
-  "email": "yuanboxue@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-positioning-f6515d84-5f8b-4649-90dc-7d0cf179d176.json b/change/@fluentui-react-positioning-f6515d84-5f8b-4649-90dc-7d0cf179d176.json
deleted file mode 100644
index 72324923c9039..0000000000000
--- a/change/@fluentui-react-positioning-f6515d84-5f8b-4649-90dc-7d0cf179d176.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: update maxSize middleware to apply height/width when overflow",
-  "packageName": "@fluentui/react-positioning",
-  "email": "yuanboxue@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-tree-3b5f955f-0166-4e3b-85dc-82dddef56b0c.json b/change/@fluentui-react-tree-3b5f955f-0166-4e3b-85dc-82dddef56b0c.json
deleted file mode 100644
index 556aa23d8b80c..0000000000000
--- a/change/@fluentui-react-tree-3b5f955f-0166-4e3b-85dc-82dddef56b0c.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "bugfix: makes selector slot required when selection mode is defined",
-  "packageName": "@fluentui/react-tree",
-  "email": "bernardo.sunderhus@gmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/react-components/react-alert/CHANGELOG.json b/packages/react-components/react-alert/CHANGELOG.json
index ffafc2accb294..013e8999b1fcb 100644
--- a/packages/react-components/react-alert/CHANGELOG.json
+++ b/packages/react-components/react-alert/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-alert",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-alert_v9.0.0-beta.61",
+      "version": "9.0.0-beta.61",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-alert",
+            "comment": "Bump @fluentui/react-avatar to v9.5.15",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:16 GMT",
       "tag": "@fluentui/react-alert_v9.0.0-beta.60",
diff --git a/packages/react-components/react-alert/CHANGELOG.md b/packages/react-components/react-alert/CHANGELOG.md
index 5834b1fdfdda6..d0abc5d2917e2 100644
--- a/packages/react-components/react-alert/CHANGELOG.md
+++ b/packages/react-components/react-alert/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-alert
 
-This log was last generated on Tue, 25 Jul 2023 13:29:16 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.61](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.61)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.60..@fluentui/react-alert_v9.0.0-beta.61)
+
+### Changes
+
+- Bump @fluentui/react-avatar to v9.5.15 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.0.0-beta.60](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.60)
 
 Tue, 25 Jul 2023 13:29:16 GMT 
diff --git a/packages/react-components/react-alert/package.json b/packages/react-components/react-alert/package.json
index 4923911a51b95..08cf329d7a74d 100644
--- a/packages/react-components/react-alert/package.json
+++ b/packages/react-components/react-alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-alert",
-  "version": "9.0.0-beta.60",
+  "version": "9.0.0-beta.61",
   "description": "An alert component to display brief messages",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-avatar": "^9.5.15",
     "@fluentui/react-button": "^9.3.25",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-tabster": "^9.11.0",
diff --git a/packages/react-components/react-avatar/CHANGELOG.json b/packages/react-components/react-avatar/CHANGELOG.json
index 1dcd22eb4b6ac..83c964e2c0fb7 100644
--- a/packages/react-components/react-avatar/CHANGELOG.json
+++ b/packages/react-components/react-avatar/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-avatar",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-avatar_v9.5.15",
+      "version": "9.5.15",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.7.9",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.2.26",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:16 GMT",
       "tag": "@fluentui/react-avatar_v9.5.14",
diff --git a/packages/react-components/react-avatar/CHANGELOG.md b/packages/react-components/react-avatar/CHANGELOG.md
index c3a738b5f8fe8..bb97b55072646 100644
--- a/packages/react-components/react-avatar/CHANGELOG.md
+++ b/packages/react-components/react-avatar/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Tue, 25 Jul 2023 13:29:16 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.5.15)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.5.14..@fluentui/react-avatar_v9.5.15)
+
+### Patches
+
+- Bump @fluentui/react-popover to v9.7.9 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+- Bump @fluentui/react-tooltip to v9.2.26 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.5.14)
 
 Tue, 25 Jul 2023 13:29:16 GMT 
diff --git a/packages/react-components/react-avatar/package.json b/packages/react-components/react-avatar/package.json
index 67063e2f11072..d424e877f295f 100644
--- a/packages/react-components/react-avatar/package.json
+++ b/packages/react-components/react-avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.5.14",
+  "version": "9.5.15",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,11 +40,11 @@
     "@fluentui/react-badge": "^9.1.22",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-popover": "^9.7.8",
+    "@fluentui/react-popover": "^9.7.9",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-tooltip": "^9.2.25",
+    "@fluentui/react-tooltip": "^9.2.26",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-combobox/CHANGELOG.json b/packages/react-components/react-combobox/CHANGELOG.json
index 68b249729934e..7ff13151086b2 100644
--- a/packages/react-components/react-combobox/CHANGELOG.json
+++ b/packages/react-components/react-combobox/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-combobox",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-combobox_v9.4.10",
+      "version": "9.4.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.9.0",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:18 GMT",
       "tag": "@fluentui/react-combobox_v9.4.9",
diff --git a/packages/react-components/react-combobox/CHANGELOG.md b/packages/react-components/react-combobox/CHANGELOG.md
index b17e4203ea195..0888aa2ef1721 100644
--- a/packages/react-components/react-combobox/CHANGELOG.md
+++ b/packages/react-components/react-combobox/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Tue, 25 Jul 2023 13:29:18 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.4.10)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.4.9..@fluentui/react-combobox_v9.4.10)
+
+### Patches
+
+- Bump @fluentui/react-positioning to v9.9.0 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.4.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.4.9)
 
 Tue, 25 Jul 2023 13:29:18 GMT 
diff --git a/packages/react-components/react-combobox/package.json b/packages/react-components/react-combobox/package.json
index 8c26e474dc100..b02c96f7b6e2f 100644
--- a/packages/react-components/react-combobox/package.json
+++ b/packages/react-components/react-combobox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.4.9",
+  "version": "9.4.10",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,7 +39,7 @@
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-positioning": "^9.8.0",
+    "@fluentui/react-positioning": "^9.9.0",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-components/CHANGELOG.json b/packages/react-components/react-components/CHANGELOG.json
index c6cea6a141a31..1ff6f955e13a0 100644
--- a/packages/react-components/react-components/CHANGELOG.json
+++ b/packages/react-components/react-components/CHANGELOG.json
@@ -1,6 +1,41 @@
 {
   "name": "@fluentui/react-components",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:13 GMT",
+      "tag": "@fluentui/react-components_v9.27.1",
+      "version": "9.27.1",
+      "comments": {
+        "minor": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43",
+            "comment": "feat: update style to prevent double scrollbar"
+          },
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9",
+            "comment": "feat: simplify autoSize options to make 'always'/'height-always'/'width-always' equivalent to true/'height'/'width'."
+          },
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43",
+            "comment": "feat: update maxSize middleware to apply height/width when overflow"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "0e9c438b78e58f346f61b15224c7b0020e4fe73e",
+            "comment": "bugfix: makes selector slot required when selection mode is defined"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:15 GMT",
       "tag": "@fluentui/react-components_v9.27.0",
diff --git a/packages/react-components/react-components/CHANGELOG.md b/packages/react-components/react-components/CHANGELOG.md
index 514d078478cd8..0d7f138ef3a1e 100644
--- a/packages/react-components/react-components/CHANGELOG.md
+++ b/packages/react-components/react-components/CHANGELOG.md
@@ -1,9 +1,27 @@
 # Change Log - @fluentui/react-components
 
-This log was last generated on Tue, 25 Jul 2023 13:29:15 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:13 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.27.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.27.1)
+
+Thu, 27 Jul 2023 10:34:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.27.0..@fluentui/react-components_v9.27.1)
+
+### Minor changes
+
+- `@fluentui/react-menu`
+  - feat: update style to prevent double scrollbar ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by yuanboxue@microsoft.com)
+- `@fluentui/react-positioning`
+  - feat: simplify autoSize options to make 'always'/'height-always'/'width-always' equivalent to true/'height'/'width'. ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by yuanboxue@microsoft.com)
+  - feat: update maxSize middleware to apply height/width when overflow ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by yuanboxue@microsoft.com)
+
+### Changes
+
+- `@fluentui/react-tree`
+  - bugfix: makes selector slot required when selection mode is defined ([PR #28648](https://github.com/microsoft/fluentui/pull/28648) by bernardo.sunderhus@gmail.com)
+
 ## [9.27.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.27.0)
 
 Tue, 25 Jul 2023 13:29:15 GMT 
diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json
index 8262ca53b88fd..dbd8650ca3cac 100644
--- a/packages/react-components/react-components/package.json
+++ b/packages/react-components/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-components",
-  "version": "9.27.0",
+  "version": "9.27.1",
   "description": "Suite package for converged React components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,28 +32,28 @@
   },
   "dependencies": {
     "@fluentui/react-accordion": "^9.1.25",
-    "@fluentui/react-alert": "9.0.0-beta.60",
-    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-alert": "9.0.0-beta.61",
+    "@fluentui/react-avatar": "^9.5.15",
     "@fluentui/react-badge": "^9.1.22",
     "@fluentui/react-button": "^9.3.25",
     "@fluentui/react-card": "^9.0.24",
     "@fluentui/react-checkbox": "^9.1.26",
-    "@fluentui/react-combobox": "^9.4.9",
+    "@fluentui/react-combobox": "^9.4.10",
     "@fluentui/react-dialog": "^9.5.18",
     "@fluentui/react-divider": "^9.2.21",
     "@fluentui/react-drawer": "9.0.0-beta.10",
     "@fluentui/react-field": "^9.1.13",
     "@fluentui/react-image": "^9.1.18",
-    "@fluentui/react-infobutton": "9.0.0-beta.44",
+    "@fluentui/react-infobutton": "9.0.0-beta.45",
     "@fluentui/react-input": "^9.4.23",
     "@fluentui/react-label": "^9.1.21",
     "@fluentui/react-link": "^9.1.4",
-    "@fluentui/react-menu": "^9.11.1",
+    "@fluentui/react-menu": "^9.12.0",
     "@fluentui/react-overflow": "^9.0.24",
-    "@fluentui/react-persona": "^9.2.24",
+    "@fluentui/react-persona": "^9.2.25",
     "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-popover": "^9.7.8",
-    "@fluentui/react-positioning": "^9.8.0",
+    "@fluentui/react-popover": "^9.7.9",
+    "@fluentui/react-positioning": "^9.9.0",
     "@fluentui/react-progress": "^9.1.23",
     "@fluentui/react-provider": "^9.7.11",
     "@fluentui/react-radio": "^9.1.26",
@@ -64,18 +64,18 @@
     "@fluentui/react-spinbutton": "^9.2.23",
     "@fluentui/react-spinner": "^9.3.1",
     "@fluentui/react-switch": "^9.1.26",
-    "@fluentui/react-table": "^9.7.0",
+    "@fluentui/react-table": "^9.7.1",
     "@fluentui/react-tabs": "^9.3.26",
     "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-textarea": "^9.3.23",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-toast": "^9.0.5",
     "@fluentui/react-toolbar": "^9.1.26",
-    "@fluentui/react-tooltip": "^9.2.25",
+    "@fluentui/react-tooltip": "^9.2.26",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-text": "^9.3.18",
     "@fluentui/react-virtualizer": "9.0.0-alpha.29",
-    "@fluentui/react-tree": "9.0.0-beta.27",
+    "@fluentui/react-tree": "9.0.0-beta.28",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
   },
diff --git a/packages/react-components/react-datepicker-compat/CHANGELOG.json b/packages/react-components/react-datepicker-compat/CHANGELOG.json
index 0384196ebcc9e..7a89bc828cb76 100644
--- a/packages/react-components/react-datepicker-compat/CHANGELOG.json
+++ b/packages/react-components/react-datepicker-compat/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-datepicker-compat",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-datepicker-compat_v0.2.3",
+      "version": "0.2.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-popover to v9.7.9",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-positioning to v9.9.0",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:18 GMT",
       "tag": "@fluentui/react-datepicker-compat_v0.2.2",
diff --git a/packages/react-components/react-datepicker-compat/CHANGELOG.md b/packages/react-components/react-datepicker-compat/CHANGELOG.md
index eab8afaac0ca4..5c95fdc322117 100644
--- a/packages/react-components/react-datepicker-compat/CHANGELOG.md
+++ b/packages/react-components/react-datepicker-compat/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-datepicker-compat
 
-This log was last generated on Tue, 25 Jul 2023 13:29:18 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.2.3)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-datepicker-compat_v0.2.2..@fluentui/react-datepicker-compat_v0.2.3)
+
+### Patches
+
+- Bump @fluentui/react-popover to v9.7.9 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+- Bump @fluentui/react-positioning to v9.9.0 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [0.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.2.2)
 
 Tue, 25 Jul 2023 13:29:18 GMT 
diff --git a/packages/react-components/react-datepicker-compat/package.json b/packages/react-components/react-datepicker-compat/package.json
index c04f042c8afee..c6ce279b26519 100644
--- a/packages/react-components/react-datepicker-compat/package.json
+++ b/packages/react-components/react-datepicker-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-datepicker-compat",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,9 +40,9 @@
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-input": "^9.4.23",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-popover": "^9.7.8",
+    "@fluentui/react-popover": "^9.7.9",
     "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-positioning": "^9.8.0",
+    "@fluentui/react-positioning": "^9.9.0",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-infobutton/CHANGELOG.json b/packages/react-components/react-infobutton/CHANGELOG.json
index 8b15af98cc28a..ee75dad385ca2 100644
--- a/packages/react-components/react-infobutton/CHANGELOG.json
+++ b/packages/react-components/react-infobutton/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-infobutton",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-infobutton_v9.0.0-beta.45",
+      "version": "9.0.0-beta.45",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-popover to v9.7.9",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:19 GMT",
       "tag": "@fluentui/react-infobutton_v9.0.0-beta.44",
diff --git a/packages/react-components/react-infobutton/CHANGELOG.md b/packages/react-components/react-infobutton/CHANGELOG.md
index 054bbd63cf4d7..32e0e9eeb2f41 100644
--- a/packages/react-components/react-infobutton/CHANGELOG.md
+++ b/packages/react-components/react-infobutton/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-infobutton
 
-This log was last generated on Tue, 25 Jul 2023 13:29:19 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.45](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.45)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.44..@fluentui/react-infobutton_v9.0.0-beta.45)
+
+### Changes
+
+- Bump @fluentui/react-popover to v9.7.9 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.0.0-beta.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.44)
 
 Tue, 25 Jul 2023 13:29:19 GMT 
diff --git a/packages/react-components/react-infobutton/package.json b/packages/react-components/react-infobutton/package.json
index 20dc63f36b491..0358d3e8dc087 100644
--- a/packages/react-components/react-infobutton/package.json
+++ b/packages/react-components/react-infobutton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-infobutton",
-  "version": "9.0.0-beta.44",
+  "version": "9.0.0-beta.45",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-label": "^9.1.21",
-    "@fluentui/react-popover": "^9.7.8",
+    "@fluentui/react-popover": "^9.7.9",
     "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-menu/CHANGELOG.json b/packages/react-components/react-menu/CHANGELOG.json
index 6b79c54f688aa..94c556b1cd6fc 100644
--- a/packages/react-components/react-menu/CHANGELOG.json
+++ b/packages/react-components/react-menu/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-menu",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:13 GMT",
+      "tag": "@fluentui/react-menu_v9.12.0",
+      "version": "9.12.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43",
+            "comment": "feat: update style to prevent double scrollbar"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-positioning to v9.9.0",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:19 GMT",
       "tag": "@fluentui/react-menu_v9.11.1",
diff --git a/packages/react-components/react-menu/CHANGELOG.md b/packages/react-components/react-menu/CHANGELOG.md
index ebd4d12b7aae4..985da8bffee4f 100644
--- a/packages/react-components/react-menu/CHANGELOG.md
+++ b/packages/react-components/react-menu/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Tue, 25 Jul 2023 13:29:19 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:13 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.0)
+
+Thu, 27 Jul 2023 10:34:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.11.1..@fluentui/react-menu_v9.12.0)
+
+### Minor changes
+
+- feat: update style to prevent double scrollbar ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by yuanboxue@microsoft.com)
+- Bump @fluentui/react-positioning to v9.9.0 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.11.1)
 
 Tue, 25 Jul 2023 13:29:19 GMT 
diff --git a/packages/react-components/react-menu/package.json b/packages/react-components/react-menu/package.json
index d216e49834678..fa82ac7cd37da 100644
--- a/packages/react-components/react-menu/package.json
+++ b/packages/react-components/react-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.11.1",
+  "version": "9.12.0",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -41,7 +41,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-positioning": "^9.8.0",
+    "@fluentui/react-positioning": "^9.9.0",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-migration-v0-v9/CHANGELOG.json b/packages/react-components/react-migration-v0-v9/CHANGELOG.json
index 3111b36919b49..64e9cca6bf1bc 100644
--- a/packages/react-components/react-migration-v0-v9/CHANGELOG.json
+++ b/packages/react-components/react-migration-v0-v9/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-migration-v0-v9",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-migration-v0-v9_v9.0.14",
+      "version": "9.0.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-components to v9.27.1",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:20 GMT",
       "tag": "@fluentui/react-migration-v0-v9_v9.0.13",
diff --git a/packages/react-components/react-migration-v0-v9/CHANGELOG.md b/packages/react-components/react-migration-v0-v9/CHANGELOG.md
index 60bde3df1967a..9070351ff71e0 100644
--- a/packages/react-components/react-migration-v0-v9/CHANGELOG.md
+++ b/packages/react-components/react-migration-v0-v9/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-migration-v0-v9
 
-This log was last generated on Tue, 25 Jul 2023 13:29:20 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.14)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.0.13..@fluentui/react-migration-v0-v9_v9.0.14)
+
+### Patches
+
+- Bump @fluentui/react-components to v9.27.1 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.13)
 
 Tue, 25 Jul 2023 13:29:20 GMT 
diff --git a/packages/react-components/react-migration-v0-v9/package.json b/packages/react-components/react-migration-v0-v9/package.json
index 4e31efc072724..c311a1a006c86 100644
--- a/packages/react-components/react-migration-v0-v9/package.json
+++ b/packages/react-components/react-migration-v0-v9/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v0-v9",
-  "version": "9.0.13",
+  "version": "9.0.14",
   "description": "Migration shim components and methods for hybrid v0/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,7 +37,7 @@
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-components": "^9.27.0",
+    "@fluentui/react-components": "^9.27.1",
     "@fluentui/react-northstar": "^0.66.4",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
diff --git a/packages/react-components/react-migration-v8-v9/CHANGELOG.json b/packages/react-components/react-migration-v8-v9/CHANGELOG.json
index 04dd6bbd1359c..75c71e9d87800 100644
--- a/packages/react-components/react-migration-v8-v9/CHANGELOG.json
+++ b/packages/react-components/react-migration-v8-v9/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-migration-v8-v9",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-migration-v8-v9_v9.3.11",
+      "version": "9.3.11",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v8-v9",
+            "comment": "Bump @fluentui/react-components to v9.27.1",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:20 GMT",
       "tag": "@fluentui/react-migration-v8-v9_v9.3.10",
diff --git a/packages/react-components/react-migration-v8-v9/CHANGELOG.md b/packages/react-components/react-migration-v8-v9/CHANGELOG.md
index 648911cbf56e5..94285c0f04aa1 100644
--- a/packages/react-components/react-migration-v8-v9/CHANGELOG.md
+++ b/packages/react-components/react-migration-v8-v9/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-migration-v8-v9
 
-This log was last generated on Tue, 25 Jul 2023 13:29:20 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.3.11)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.3.10..@fluentui/react-migration-v8-v9_v9.3.11)
+
+### Patches
+
+- Bump @fluentui/react-components to v9.27.1 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.3.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.3.10)
 
 Tue, 25 Jul 2023 13:29:20 GMT 
diff --git a/packages/react-components/react-migration-v8-v9/package.json b/packages/react-components/react-migration-v8-v9/package.json
index 3b496302d145a..1c80da9ecb7da 100644
--- a/packages/react-components/react-migration-v8-v9/package.json
+++ b/packages/react-components/react-migration-v8-v9/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v8-v9",
-  "version": "9.3.10",
+  "version": "9.3.11",
   "description": "Migration shim components and methods for hybrid v8/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "@ctrl/tinycolor": "3.3.4",
     "@fluentui/fluent2-theme": "^8.107.31",
     "@fluentui/react": "^8.110.11",
-    "@fluentui/react-components": "^9.27.0",
+    "@fluentui/react-components": "^9.27.1",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-persona/CHANGELOG.json b/packages/react-components/react-persona/CHANGELOG.json
index 00630568903c9..082a25e6397b1 100644
--- a/packages/react-components/react-persona/CHANGELOG.json
+++ b/packages/react-components/react-persona/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-persona",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-persona_v9.2.25",
+      "version": "9.2.25",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.5.15",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-persona_v9.2.24",
diff --git a/packages/react-components/react-persona/CHANGELOG.md b/packages/react-components/react-persona/CHANGELOG.md
index cc533fec6d1b2..75db73c8084f8 100644
--- a/packages/react-components/react-persona/CHANGELOG.md
+++ b/packages/react-components/react-persona/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.25)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.24..@fluentui/react-persona_v9.2.25)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.5.15 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.2.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.24)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-persona/package.json b/packages/react-components/react-persona/package.json
index 5bfa8aefb82bc..50ded50f1ec6c 100644
--- a/packages/react-components/react-persona/package.json
+++ b/packages/react-components/react-persona/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-persona",
-  "version": "9.2.24",
+  "version": "9.2.25",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-avatar": "^9.5.15",
     "@fluentui/react-badge": "^9.1.22",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-popover/CHANGELOG.json b/packages/react-components/react-popover/CHANGELOG.json
index 9ba4fd5d56285..34c1fd5398ced 100644
--- a/packages/react-components/react-popover/CHANGELOG.json
+++ b/packages/react-components/react-popover/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-popover",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-popover_v9.7.9",
+      "version": "9.7.9",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-positioning to v9.9.0",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-popover_v9.7.8",
diff --git a/packages/react-components/react-popover/CHANGELOG.md b/packages/react-components/react-popover/CHANGELOG.md
index 667c76fcfe3bb..5bc6fd69bb9df 100644
--- a/packages/react-components/react-popover/CHANGELOG.md
+++ b/packages/react-components/react-popover/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-popover
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.7.9)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.7.8..@fluentui/react-popover_v9.7.9)
+
+### Patches
+
+- Bump @fluentui/react-positioning to v9.9.0 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.7.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.7.8)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-popover/package.json b/packages/react-components/react-popover/package.json
index 0026016b8198d..23b088663f58f 100644
--- a/packages/react-components/react-popover/package.json
+++ b/packages/react-components/react-popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-popover",
-  "version": "9.7.8",
+  "version": "9.7.9",
   "description": "Popover component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,7 +40,7 @@
     "@fluentui/react-aria": "^9.3.27",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-positioning": "^9.8.0",
+    "@fluentui/react-positioning": "^9.9.0",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-portal-compat/CHANGELOG.json b/packages/react-components/react-portal-compat/CHANGELOG.json
index a99ba9da66a49..20c6cc6d32dc8 100644
--- a/packages/react-components/react-portal-compat/CHANGELOG.json
+++ b/packages/react-components/react-portal-compat/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-portal-compat",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-portal-compat_v9.0.72",
+      "version": "9.0.72",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-portal-compat",
+            "comment": "Bump @fluentui/react-components to v9.27.1",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-portal-compat_v9.0.71",
diff --git a/packages/react-components/react-portal-compat/CHANGELOG.md b/packages/react-components/react-portal-compat/CHANGELOG.md
index 8f16dc4761286..663fca0bfebed 100644
--- a/packages/react-components/react-portal-compat/CHANGELOG.md
+++ b/packages/react-components/react-portal-compat/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-portal-compat
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.72](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.72)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal-compat_v9.0.71..@fluentui/react-portal-compat_v9.0.72)
+
+### Patches
+
+- Bump @fluentui/react-components to v9.27.1 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.0.71](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.71)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-portal-compat/package.json b/packages/react-components/react-portal-compat/package.json
index 928ffe4b4eaec..d6d0a35c5e70e 100644
--- a/packages/react-components/react-portal-compat/package.json
+++ b/packages/react-components/react-portal-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-portal-compat",
-  "version": "9.0.71",
+  "version": "9.0.72",
   "description": "A package that contains compatibility layer for React Portals",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,7 +39,7 @@
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
-    "@fluentui/react-components": "^9.27.0",
+    "@fluentui/react-components": "^9.27.1",
     "@types/react": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0"
   },
diff --git a/packages/react-components/react-positioning/CHANGELOG.json b/packages/react-components/react-positioning/CHANGELOG.json
index af307f07adadc..256f972f86dd6 100644
--- a/packages/react-components/react-positioning/CHANGELOG.json
+++ b/packages/react-components/react-positioning/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-positioning",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:13 GMT",
+      "tag": "@fluentui/react-positioning_v9.9.0",
+      "version": "9.9.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9",
+            "comment": "feat: simplify autoSize options to make 'always'/'height-always'/'width-always' equivalent to true/'height'/'width'."
+          },
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43",
+            "comment": "feat: update maxSize middleware to apply height/width when overflow"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:32 GMT",
       "tag": "@fluentui/react-positioning_v9.8.0",
diff --git a/packages/react-components/react-positioning/CHANGELOG.md b/packages/react-components/react-positioning/CHANGELOG.md
index 43b150a9ad822..43cf3c7949c06 100644
--- a/packages/react-components/react-positioning/CHANGELOG.md
+++ b/packages/react-components/react-positioning/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Tue, 11 Jul 2023 18:46:35 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:13 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.9.0)
+
+Thu, 27 Jul 2023 10:34:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.8.0..@fluentui/react-positioning_v9.9.0)
+
+### Minor changes
+
+- feat: simplify autoSize options to make 'always'/'height-always'/'width-always' equivalent to true/'height'/'width'. ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by yuanboxue@microsoft.com)
+- feat: update maxSize middleware to apply height/width when overflow ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by yuanboxue@microsoft.com)
+
 ## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.8.0)
 
 Tue, 11 Jul 2023 18:46:35 GMT 
diff --git a/packages/react-components/react-positioning/package.json b/packages/react-components/react-positioning/package.json
index 42781f593d499..1c1127267c1aa 100644
--- a/packages/react-components/react-positioning/package.json
+++ b/packages/react-components/react-positioning/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-positioning",
-  "version": "9.8.0",
+  "version": "9.9.0",
   "description": "A react wrapper around Popper.js for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-components/react-table/CHANGELOG.json b/packages/react-components/react-table/CHANGELOG.json
index 3fa5026185eae..3e638b233de89 100644
--- a/packages/react-components/react-table/CHANGELOG.json
+++ b/packages/react-components/react-table/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-table",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-table_v9.7.1",
+      "version": "9.7.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.5.15",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:22 GMT",
       "tag": "@fluentui/react-table_v9.7.0",
diff --git a/packages/react-components/react-table/CHANGELOG.md b/packages/react-components/react-table/CHANGELOG.md
index b05ca1288deaa..45140961d4254 100644
--- a/packages/react-components/react-table/CHANGELOG.md
+++ b/packages/react-components/react-table/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Tue, 25 Jul 2023 13:29:22 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.7.1)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.7.0..@fluentui/react-table_v9.7.1)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.5.15 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.7.0)
 
 Tue, 25 Jul 2023 13:29:22 GMT 
diff --git a/packages/react-components/react-table/package.json b/packages/react-components/react-table/package.json
index c5ca65395b3e7..b32ee16292d39 100644
--- a/packages/react-components/react-table/package.json
+++ b/packages/react-components/react-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.7.0",
+  "version": "9.7.1",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
-    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-avatar": "^9.5.15",
     "@fluentui/react-checkbox": "^9.1.26",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
diff --git a/packages/react-components/react-tags-preview/package.json b/packages/react-components/react-tags-preview/package.json
index 60777819d591d..d1774534b775d 100644
--- a/packages/react-components/react-tags-preview/package.json
+++ b/packages/react-components/react-tags-preview/package.json
@@ -36,7 +36,7 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
-    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-avatar": "^9.5.15",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-shared-contexts": "^9.6.0",
diff --git a/packages/react-components/react-tooltip/CHANGELOG.json b/packages/react-components/react-tooltip/CHANGELOG.json
index 0494c4c24552c..c0761f9f252c3 100644
--- a/packages/react-components/react-tooltip/CHANGELOG.json
+++ b/packages/react-components/react-tooltip/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-tooltip",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-tooltip_v9.2.26",
+      "version": "9.2.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-positioning to v9.9.0",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-tooltip_v9.2.25",
diff --git a/packages/react-components/react-tooltip/CHANGELOG.md b/packages/react-components/react-tooltip/CHANGELOG.md
index c81c2cdb5353d..5e2a6715b869c 100644
--- a/packages/react-components/react-tooltip/CHANGELOG.md
+++ b/packages/react-components/react-tooltip/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-tooltip
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.2.26)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.2.25..@fluentui/react-tooltip_v9.2.26)
+
+### Patches
+
+- Bump @fluentui/react-positioning to v9.9.0 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.2.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.2.25)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-tooltip/package.json b/packages/react-components/react-tooltip/package.json
index 2212172c6c4ed..c1e80bd9ee2b3 100644
--- a/packages/react-components/react-tooltip/package.json
+++ b/packages/react-components/react-tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tooltip",
-  "version": "9.2.25",
+  "version": "9.2.26",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,7 +36,7 @@
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-positioning": "^9.8.0",
+    "@fluentui/react-positioning": "^9.9.0",
     "@fluentui/react-shared-contexts": "^9.6.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-tree/CHANGELOG.json b/packages/react-components/react-tree/CHANGELOG.json
index 8ae87e8bf04f5..218d1f85a0d6f 100644
--- a/packages/react-components/react-tree/CHANGELOG.json
+++ b/packages/react-components/react-tree/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-tree",
   "entries": [
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.28",
+      "version": "9.0.0-beta.28",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "0e9c438b78e58f346f61b15224c7b0020e4fe73e",
+            "comment": "bugfix: makes selector slot required when selection mode is defined"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.15",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.27",
diff --git a/packages/react-components/react-tree/CHANGELOG.md b/packages/react-components/react-tree/CHANGELOG.md
index 27795e07633fc..3c609fbc51150 100644
--- a/packages/react-components/react-tree/CHANGELOG.md
+++ b/packages/react-components/react-tree/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.28)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.27..@fluentui/react-tree_v9.0.0-beta.28)
+
+### Changes
+
+- bugfix: makes selector slot required when selection mode is defined ([PR #28648](https://github.com/microsoft/fluentui/pull/28648) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.5.15 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.0.0-beta.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.27)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-tree/package.json b/packages/react-components/react-tree/package.json
index ef53a46f45ad9..6166d7e3de1af 100644
--- a/packages/react-components/react-tree/package.json
+++ b/packages/react-components/react-tree/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.0.0-beta.27",
+  "version": "9.0.0-beta.28",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
-    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-avatar": "^9.5.15",
     "@fluentui/react-button": "^9.3.25",
     "@fluentui/react-checkbox": "^9.1.26",
     "@fluentui/react-context-selector": "^9.1.26",
diff --git a/packages/react-components/theme-designer/package.json b/packages/react-components/theme-designer/package.json
index b73d4bc55b15f..91813205dda5e 100644
--- a/packages/react-components/theme-designer/package.json
+++ b/packages/react-components/theme-designer/package.json
@@ -32,8 +32,8 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-alert": "9.0.0-beta.60",
-    "@fluentui/react-components": "^9.27.0",
+    "@fluentui/react-alert": "9.0.0-beta.61",
+    "@fluentui/react-components": "^9.27.1",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-storybook-addon-codesandbox": "^0.1.0",

From c6d2ace26c19b4c8102c77baf8f66ffeb36149f8 Mon Sep 17 00:00:00 2001
From: chajun <86579954+chpalac@users.noreply.github.com>
Date: Thu, 27 Jul 2023 13:38:09 -0300
Subject: [PATCH 19/37] fix: remove margin from icon when ToolbarButton is
 vertical (#28658)

* fix: remove margin from icon when ToolbarButton is vertical

* chore: add changes
---
 ...react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json | 7 +++++++
 .../ToolbarButton/useToolbarButtonStyles.styles.ts         | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json

diff --git a/change/@fluentui-react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json b/change/@fluentui-react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json
new file mode 100644
index 0000000000000..9c0e1418bfe27
--- /dev/null
+++ b/change/@fluentui-react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove margin from Icon in ToolbarButton when vertical prop is passed",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "chassunc@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts b/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
index 1163e0a32b042..421490806dbab 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { useButtonStyles_unstable } from '@fluentui/react-button';
 import { ToolbarButtonState } from './ToolbarButton.types';
 
@@ -8,6 +8,7 @@ const useBaseStyles = makeStyles({
   },
   verticalIcon: {
     fontSize: '24px',
+    ...shorthands.margin('0'),
   },
 });
 

From 2f795af17bf0cf844e0cc59c5d2f2418a00c9594 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Fri, 28 Jul 2023 09:21:50 +0200
Subject: [PATCH 20/37] chore: improves internal headless signature (#28651)

---
 ...-b70a6941-a063-49d6-a196-4dbd7abfd90c.json |   7 +
 .../react-tree/etc/react-tree.api.md          |   2 +-
 .../FlatTree/useHeadlessFlatTree.ts           |  16 +-
 .../src/contexts/treeItemContext.ts           |   3 +-
 .../src/hooks/useRovingTabIndexes.ts          |   4 -
 .../src/utils/createHeadlessTree.ts           | 224 ++++++++++++------
 6 files changed, 167 insertions(+), 89 deletions(-)
 create mode 100644 change/@fluentui-react-tree-b70a6941-a063-49d6-a196-4dbd7abfd90c.json

diff --git a/change/@fluentui-react-tree-b70a6941-a063-49d6-a196-4dbd7abfd90c.json b/change/@fluentui-react-tree-b70a6941-a063-49d6-a196-4dbd7abfd90c.json
new file mode 100644
index 0000000000000..2cf95314afd33
--- /dev/null
+++ b/change/@fluentui-react-tree-b70a6941-a063-49d6-a196-4dbd7abfd90c.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: improves internal headless signature",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md
index 5ad74baae6fc0..9d65dc26c4a87 100644
--- a/packages/react-components/react-tree/etc/react-tree.api.md
+++ b/packages/react-components/react-tree/etc/react-tree.api.md
@@ -332,7 +332,7 @@ export const useFlatTree_unstable: (props: FlatTreeProps, ref: React_2.Ref<HTMLE
 export const useFlatTreeStyles_unstable: (state: TreeState) => TreeState;
 
 // @public
-export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(flatTreeItemProps: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTree<Props>;
+export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(props: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTree<Props>;
 
 // @public (undocumented)
 export const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
diff --git a/packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts b/packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts
index d646efeae8ae7..1cd0f2bbae210 100644
--- a/packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts
+++ b/packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts
@@ -104,17 +104,17 @@ export type HeadlessFlatTreeOptions = Pick<
  * It should be used on cases where more complex interactions with a Tree is required.
  * On simple scenarios it is advised to simply use a nested structure instead.
  *
- * @param flatTreeItemProps - a list of tree items
+ * @param props - a list of tree items
  * @param options - in case control over the internal openItems is required
  */
 export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(
-  flatTreeItemProps: Props[],
+  props: Props[],
   options: HeadlessFlatTreeOptions = {},
 ): HeadlessFlatTree<Props> {
-  const flatTreeItems = React.useMemo(() => createHeadlessTree(flatTreeItemProps), [flatTreeItemProps]);
+  const headlessTree = React.useMemo(() => createHeadlessTree(props), [props]);
   const [openItems, setOpenItems] = useControllableOpenItems(options);
   const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options);
-  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
+  const [navigate, navigationRef] = useFlatTreeNavigation(headlessTree);
   const treeRef = React.useRef<HTMLDivElement>(null);
   const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
     options.onOpenChange?.(event, data);
@@ -123,7 +123,7 @@ export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps
 
   const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {
     options.onCheckedChange?.(event, data);
-    setCheckedItems(createNextFlatCheckedItems(data, checkedItems, flatTreeItems));
+    setCheckedItems(createNextFlatCheckedItems(data, checkedItems, headlessTree));
   });
 
   const handleNavigation = useEventCallback(
@@ -135,13 +135,13 @@ export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps
 
   const getNextNavigableItem = useEventCallback(
     (visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable) => {
-      const item = flatTreeItems.get(data.value);
+      const item = headlessTree.get(data.value);
       if (item) {
         switch (data.type) {
           case treeDataTypes.TypeAhead:
             return item;
           case treeDataTypes.ArrowLeft:
-            return flatTreeItems.get(item.parentValue!);
+            return headlessTree.get(item.parentValue!);
           case treeDataTypes.ArrowRight:
             return visibleItems[item.index + 1];
           case treeDataTypes.End:
@@ -178,7 +178,7 @@ export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps
     [openItems, checkedItems],
   );
 
-  const items = React.useCallback(() => flatTreeItems.visibleItems(openItems), [openItems, flatTreeItems]);
+  const items = React.useCallback(() => headlessTree.visibleItems(openItems), [openItems, headlessTree]);
 
   return React.useMemo<HeadlessFlatTree<Props>>(
     () => ({ navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items }),
diff --git a/packages/react-components/react-tree/src/contexts/treeItemContext.ts b/packages/react-components/react-tree/src/contexts/treeItemContext.ts
index f1ca331d24d7e..9e9aa07143a9e 100644
--- a/packages/react-components/react-tree/src/contexts/treeItemContext.ts
+++ b/packages/react-components/react-tree/src/contexts/treeItemContext.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';
 import type { TreeItemType, TreeItemValue } from '../TreeItem';
+import { virtualTreeRootId } from '../utils/createHeadlessTree';
 
 export type TreeItemContextValue = {
   isActionsVisible: boolean;
@@ -16,7 +17,7 @@ export type TreeItemContextValue = {
 };
 
 const defaultContextValue: TreeItemContextValue = {
-  value: '',
+  value: virtualTreeRootId,
   selectionRef: React.createRef(),
   layoutRef: React.createRef(),
   subtreeRef: React.createRef(),
diff --git a/packages/react-components/react-tree/src/hooks/useRovingTabIndexes.ts b/packages/react-components/react-tree/src/hooks/useRovingTabIndexes.ts
index fb8c6aee930f0..dfa3b4f295f9b 100644
--- a/packages/react-components/react-tree/src/hooks/useRovingTabIndexes.ts
+++ b/packages/react-components/react-tree/src/hooks/useRovingTabIndexes.ts
@@ -28,10 +28,6 @@ export function useRovingTabIndex(filter?: HTMLElementFilter) {
     walker.currentElement = walker.root;
     tabbableChild ??= walker.firstChild();
     if (!tabbableChild) {
-      if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.warn('useRovingTabIndexes: internal error, no tabbable element was found');
-      }
       return;
     }
     tabbableChild.tabIndex = 0;
diff --git a/packages/react-components/react-tree/src/utils/createHeadlessTree.ts b/packages/react-components/react-tree/src/utils/createHeadlessTree.ts
index f84654ccc56b9..e18ad358357f1 100644
--- a/packages/react-components/react-tree/src/utils/createHeadlessTree.ts
+++ b/packages/react-components/react-tree/src/utils/createHeadlessTree.ts
@@ -12,11 +12,13 @@ export type HeadlessTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> &
  * `createHeadlessTree` but with extra information that might be useful on virtual tree scenarios
  */
 export type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {
-  index: number;
   level: number;
+  index: number;
+  position: number;
   childrenValues: TreeItemValue[];
   value: TreeItemValue;
   parentValue: TreeItemValue | undefined;
+  itemType: TreeItemType;
   getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> &
     Omit<Props, 'parentValue'>;
 };
@@ -25,15 +27,62 @@ export type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {
  * @internal
  */
 export type HeadlessTree<Props extends HeadlessTreeItemProps> = {
-  size: number;
+  /**
+   * the number of items in the virtual tree
+   */
+  readonly size: number;
+  /**
+   * the root item of the virtual tree
+   */
   root: HeadlessTreeItem<HeadlessTreeItemProps>;
-  get(key: TreeItemValue): HeadlessTreeItem<Props> | undefined;
-  getParent(key: TreeItemValue): HeadlessTreeItem<Props>;
-  getByIndex(index: number): HeadlessTreeItem<Props>;
-  subtree(key: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;
-  children(key: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;
+  /**
+   * method to get a virtual tree item by its value
+   * @param key the key of the item to get
+   */
+  get(value: TreeItemValue): HeadlessTreeItem<Props> | undefined;
+  /**
+   * method to check if a virtual tree item exists by its value
+   * @param value the value of the item to check if exists
+   */
+  has(value: TreeItemValue): boolean;
+  /**
+   * method to add a new virtual tree item to the virtual tree
+   * @param props the props of the item to add
+   */
+  add(props: Props): void;
+  /**
+   * method to remove a virtual tree item from the virtual tree.
+   * When an item is removed:
+   * 1. all its children are also removed
+   * 2. all its siblings are repositioned
+   * @param value the value of the item to remove
+   */
+  // remove(value: TreeItemValue): void;
+  /**
+   * method to get the parent of a virtual tree item by its value
+   * @param value the value of the item to get the parent from
+   */
+  getParent(value: TreeItemValue): HeadlessTreeItem<Props>;
+  /**
+   * method to get the subtree of a virtual tree item by its value
+   * @param value the value of the item to get the subtree from
+   */
+  subtree(value: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;
+  /**
+   * method to get the children of a virtual tree item by its value
+   * @param value the value of the item to get the children from
+   */
+  children(value: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;
+  /**
+   * method to get the visible items of a virtual tree
+   * @param openItems the open items of the tree
+   */
   visibleItems(openItems: ImmutableSet<TreeItemValue>): IterableIterator<HeadlessTreeItem<Props>>;
-  ancestors(key: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;
+  /**
+   * method to get the ancestors of a virtual tree item by its value
+   * @param value the value of the item to get the ancestors from
+   */
+  ancestors(value: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;
 };
 
 /**
@@ -41,63 +90,83 @@ export type HeadlessTree<Props extends HeadlessTreeItemProps> = {
  * and provides a map to access each item by id
  */
 export function createHeadlessTree<Props extends HeadlessTreeItemProps>(
-  virtualTreeItemProps: Props[],
+  initialProps: Props[] = [],
 ): HeadlessTree<Props> {
   const root = createHeadlessTreeRootItem();
   const itemsPerValue = new Map<TreeItemValue, HeadlessTreeItem<HeadlessTreeItemProps>>([[root.value, root]]);
-  const items: HeadlessTreeItem<HeadlessTreeItemProps>[] = [];
-
-  for (let index = 0; index < virtualTreeItemProps.length; index++) {
-    const { parentValue = virtualTreeRootId, ...treeItemProps } = virtualTreeItemProps[index];
-
-    const nextItemProps: Props | undefined = virtualTreeItemProps[index + 1];
-    const currentParent = itemsPerValue.get(parentValue);
-    if (!currentParent) {
-      if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.error(
-          `useHeadlessTree: item ${virtualTreeItemProps[index].value} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`,
-        );
-      }
-      break;
-    }
-    const itemType =
-      treeItemProps.itemType ??
-      (treeItemProps.value === undefined || nextItemProps?.parentValue !== treeItemProps.value ? 'leaf' : 'branch');
-    const currentLevel = (currentParent.level ?? 0) + 1;
 
-    const virtualTreeItem: HeadlessTreeItem<HeadlessTreeItemProps> = {
-      value: treeItemProps.value,
-      getTreeItemProps: () => ({
-        ...treeItemProps,
-        'aria-level': currentLevel,
-        'aria-posinset': currentChildrenSize,
-        'aria-setsize': currentParent.childrenValues.length,
-        itemType,
-      }),
-      level: currentLevel,
-      parentValue,
-      childrenValues: [],
-      index: -1,
-    };
-    const currentChildrenSize = currentParent.childrenValues.push(virtualTreeItem.value);
-    itemsPerValue.set(virtualTreeItem.value, virtualTreeItem);
-    items.push(virtualTreeItem);
-  }
-
-  const virtualTreeItems: HeadlessTree<HeadlessTreeItemProps> = {
+  const headlessTree: HeadlessTree<HeadlessTreeItemProps> = {
     root,
-    size: items.length,
-    getByIndex: index => items[index],
+    get size() {
+      return itemsPerValue.size;
+    },
     getParent: key => itemsPerValue.get(itemsPerValue.get(key)?.parentValue ?? root.value) ?? root,
     get: key => itemsPerValue.get(key),
-    subtree: key => HeadlessTreeSubtreeGenerator(key, virtualTreeItems),
-    children: key => HeadlessTreeChildrenGenerator(key, virtualTreeItems),
-    ancestors: key => HeadlessTreeAncestorsGenerator(key, virtualTreeItems),
-    visibleItems: openItems => HeadlessTreeVisibleItemsGenerator(openItems, virtualTreeItems),
+    has: key => itemsPerValue.has(key),
+    add(props) {
+      const { parentValue = virtualTreeRootId, ...propsWithoutParentValue } = props;
+      const parentItem = itemsPerValue.get(parentValue);
+      if (!parentItem) {
+        if (process.env.NODE_ENV === 'development') {
+          // eslint-disable-next-line no-console
+          console.error(
+            `HeadlessTree: item ${props.value} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized, parents should come before children`,
+          );
+        }
+        return;
+      }
+      parentItem.itemType = 'branch';
+
+      const item: HeadlessTreeItem<HeadlessTreeItemProps> = {
+        value: props.value,
+        getTreeItemProps: () => ({
+          ...propsWithoutParentValue,
+          'aria-level': item.level,
+          'aria-posinset': item.position,
+          'aria-setsize': parentItem.childrenValues.length,
+          itemType: item.itemType,
+        }),
+        itemType: 'leaf',
+        level: parentItem.level + 1,
+        parentValue,
+        childrenValues: [],
+        index: -1,
+        position: parentItem.childrenValues.push(props.value),
+      };
+      itemsPerValue.set(item.value, item);
+    },
+    // TODO: eventually it would be nice to have this method exported for the user to modify
+    // the internal state of the virtual tree
+    // remove(value) {
+    //   const itemToBeRemoved = itemsPerValue.get(value);
+    //   if (!itemToBeRemoved) {
+    //     return;
+    //   }
+    //   const parentItem = headlessTree.getParent(value);
+    //   parentItem.childrenValues.splice(itemToBeRemoved.position, 1);
+    //   itemsPerValue.delete(value);
+    //   if (parentItem.childrenValues.length === 0) {
+    //     parentItem.itemType = 'leaf';
+    //   }
+    //   for (let index = itemToBeRemoved.position; index < parentItem.childrenValues.length; index++) {
+    //     const child = itemsPerValue.get(parentItem.childrenValues[index]);
+    //     if (child) {
+    //       child.position = index + 1;
+    //     }
+    //   }
+    //   for (const descendant of HeadlessTreeSubtreeGenerator(value, headlessTree)) {
+    //     itemsPerValue.delete(descendant.value);
+    //   }
+    // },
+    subtree: key => HeadlessTreeSubtreeGenerator(key, headlessTree),
+    children: key => HeadlessTreeChildrenGenerator(key, headlessTree),
+    ancestors: key => HeadlessTreeAncestorsGenerator(key, headlessTree),
+    visibleItems: openItems => HeadlessTreeVisibleItemsGenerator(openItems, headlessTree),
   };
 
-  return virtualTreeItems as HeadlessTree<Props>;
+  initialProps.forEach(headlessTree.add);
+
+  return headlessTree as HeadlessTree<Props>;
 }
 
 export const virtualTreeRootId = '__fuiHeadlessTreeRoot';
@@ -106,10 +175,11 @@ function createHeadlessTreeRootItem(): HeadlessTreeItem<HeadlessTreeItemProps> {
   return {
     parentValue: undefined,
     value: virtualTreeRootId,
+    itemType: 'branch',
     getTreeItemProps: () => {
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error('useHeadlessTree: internal error, trying to access treeitem props from invalid root element');
+        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');
       }
       return {
         id: virtualTreeRootId,
@@ -124,7 +194,14 @@ function createHeadlessTreeRootItem(): HeadlessTreeItem<HeadlessTreeItemProps> {
     get index() {
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error('useHeadlessTree: internal error, trying to access treeitem props from invalid root element');
+        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');
+      }
+      return -1;
+    },
+    get position() {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');
       }
       return -1;
     },
@@ -140,17 +217,17 @@ function createHeadlessTreeRootItem(): HeadlessTreeItem<HeadlessTreeItemProps> {
 function* HeadlessTreeSubtreeGenerator<Props extends HeadlessTreeItemProps>(
   key: TreeItemValue,
   virtualTreeItems: HeadlessTree<Props>,
-) {
+): Generator<HeadlessTreeItem<Props>, void, void> {
   const item = virtualTreeItems.get(key);
   if (!item || item.childrenValues.length === 0) {
-    return [];
+    return;
   }
-  let counter = item.childrenValues.length;
-  let index = item.index;
-  while (counter > 0) {
-    const children = virtualTreeItems.getByIndex(++index);
-    yield children;
-    counter += children.childrenValues.length - 1;
+  for (const childValue of item.childrenValues) {
+    const child = virtualTreeItems.get(childValue)!;
+    yield child;
+    if (child.childrenValues.length > 0) {
+      yield* HeadlessTreeSubtreeGenerator(childValue, virtualTreeItems);
+    }
   }
 }
 
@@ -162,7 +239,7 @@ function* HeadlessTreeSubtreeGenerator<Props extends HeadlessTreeItemProps>(
 function* HeadlessTreeChildrenGenerator<Props extends HeadlessTreeItemProps>(
   key: TreeItemValue,
   virtualTreeItems: HeadlessTree<Props>,
-) {
+): Generator<HeadlessTreeItem<Props>, void, void> {
   const item = virtualTreeItems.get(key);
   if (!item || item.childrenValues.length === 0) {
     return;
@@ -180,7 +257,7 @@ function* HeadlessTreeChildrenGenerator<Props extends HeadlessTreeItemProps>(
 function* HeadlessTreeAncestorsGenerator<Props extends HeadlessTreeItemProps>(
   key: TreeItemValue,
   virtualTreeItems: HeadlessTree<Props>,
-) {
+): Generator<HeadlessTreeItem<Props>, void, void> {
   let parent = virtualTreeItems.getParent(key);
   while (parent !== virtualTreeItems.root) {
     yield parent;
@@ -196,15 +273,12 @@ function* HeadlessTreeAncestorsGenerator<Props extends HeadlessTreeItemProps>(
 function* HeadlessTreeVisibleItemsGenerator<Props extends HeadlessTreeItemProps>(
   openItems: ImmutableSet<TreeItemValue>,
   virtualTreeItems: HeadlessTree<Props>,
-) {
-  for (let index = 0, visibleIndex = 0; index < virtualTreeItems.size; index++) {
-    const item = virtualTreeItems.getByIndex(index) as HeadlessTreeItem<Props>;
+): Generator<HeadlessTreeItem<Props>, void, void> {
+  let index = 0;
+  for (const item of HeadlessTreeSubtreeGenerator(virtualTreeItems.root.value, virtualTreeItems)) {
     if (isItemVisible(item, openItems, virtualTreeItems)) {
-      item.index = visibleIndex++;
+      item.index = index++;
       yield item;
-    } else {
-      // Jump the amount of children the current item has, since those items will also be hidden
-      index += item.childrenValues.length;
     }
   }
 }

From 9958feece96105b4dcc4c5965fb8fdd3987eae44 Mon Sep 17 00:00:00 2001
From: Fluent UI Build <fluentui-internal@service.microsoft.com>
Date: Fri, 28 Jul 2023 07:35:06 +0000
Subject: [PATCH 21/37] applying package updates

---
 ...ting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json |  7 -------
 packages/react-charting/CHANGELOG.json            | 15 +++++++++++++++
 packages/react-charting/CHANGELOG.md              | 11 ++++++++++-
 packages/react-charting/package.json              |  2 +-
 packages/react-docsite-components/CHANGELOG.json  | 15 +++++++++++++++
 packages/react-docsite-components/CHANGELOG.md    | 11 ++++++++++-
 packages/react-docsite-components/package.json    |  4 ++--
 packages/react-examples/package.json              |  4 ++--
 packages/react-monaco-editor/CHANGELOG.json       | 15 +++++++++++++++
 packages/react-monaco-editor/CHANGELOG.md         | 11 ++++++++++-
 packages/react-monaco-editor/package.json         |  4 ++--
 11 files changed, 82 insertions(+), 17 deletions(-)
 delete mode 100644 change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json

diff --git a/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json b/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json
deleted file mode 100644
index 0efe2ea4a7300..0000000000000
--- a/change/@fluentui-react-charting-3d67e251-87ae-44ec-a533-cbc4bfeffa97.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fixed the keyboard accessibility issue in area chart when legend is clicked",
-  "packageName": "@fluentui/react-charting",
-  "email": "yushsingla@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/react-charting/CHANGELOG.json b/packages/react-charting/CHANGELOG.json
index 70804cb12570c..1c63ccf393a2d 100644
--- a/packages/react-charting/CHANGELOG.json
+++ b/packages/react-charting/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Fri, 28 Jul 2023 07:34:57 GMT",
+      "tag": "@fluentui/react-charting_v5.16.56",
+      "version": "5.16.56",
+      "comments": {
+        "patch": [
+          {
+            "author": "yushsingla@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "086cd4c549d2cfabefdb3dcb7965082dc3baf846",
+            "comment": "fixed the keyboard accessibility issue in area chart when legend is clicked"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 07:44:54 GMT",
       "tag": "@fluentui/react-charting_v5.16.55",
diff --git a/packages/react-charting/CHANGELOG.md b/packages/react-charting/CHANGELOG.md
index e3eafd883f56e..804378aae46c3 100644
--- a/packages/react-charting/CHANGELOG.md
+++ b/packages/react-charting/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
+This log was last generated on Fri, 28 Jul 2023 07:34:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.16.56](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.56)
+
+Fri, 28 Jul 2023 07:34:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.55..@fluentui/react-charting_v5.16.56)
+
+### Patches
+
+- fixed the keyboard accessibility issue in area chart when legend is clicked ([PR #28515](https://github.com/microsoft/fluentui/pull/28515) by yushsingla@microsoft.com)
+
 ## [5.16.55](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.55)
 
 Tue, 25 Jul 2023 07:44:54 GMT 
diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json
index 743c584b3d436..6d70646d88cfb 100644
--- a/packages/react-charting/package.json
+++ b/packages/react-charting/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.16.55",
+  "version": "5.16.56",
   "description": "Experimental React charting components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json
index c2ab5667ae695..58f8f5fe60092 100644
--- a/packages/react-docsite-components/CHANGELOG.json
+++ b/packages/react-docsite-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-docsite-components",
   "entries": [
+    {
+      "date": "Fri, 28 Jul 2023 07:34:57 GMT",
+      "tag": "@fluentui/react-docsite-components_v8.12.36",
+      "version": "8.12.36",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-docsite-components",
+            "comment": "Bump @fluentui/react-monaco-editor to v1.7.113",
+            "commit": "2f795af17bf0cf844e0cc59c5d2f2418a00c9594"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 07:44:54 GMT",
       "tag": "@fluentui/react-docsite-components_v8.12.35",
diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md
index 08ba7bbe0b0c7..e4661603ec377 100644
--- a/packages/react-docsite-components/CHANGELOG.md
+++ b/packages/react-docsite-components/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-docsite-components
 
-This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
+This log was last generated on Fri, 28 Jul 2023 07:34:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.12.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.12.36)
+
+Fri, 28 Jul 2023 07:34:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.12.35..@fluentui/react-docsite-components_v8.12.36)
+
+### Patches
+
+- Bump @fluentui/react-monaco-editor to v1.7.113 ([PR #28651](https://github.com/microsoft/fluentui/pull/28651) by beachball)
+
 ## [8.12.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.12.35)
 
 Tue, 25 Jul 2023 07:44:54 GMT 
diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json
index 19a8b2a3cba81..2140cb933370c 100644
--- a/packages/react-docsite-components/package.json
+++ b/packages/react-docsite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-docsite-components",
-  "version": "8.12.35",
+  "version": "8.12.36",
   "description": "Fluent UI React components for building documentation sites.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -42,7 +42,7 @@
     "@fluentui/public-docsite-setup": "^0.3.21",
     "@fluentui/react-hooks": "^8.6.29",
     "@fluentui/set-version": "^8.2.11",
-    "@fluentui/react-monaco-editor": "^1.7.112",
+    "@fluentui/react-monaco-editor": "^1.7.113",
     "color-check": "0.0.2",
     "markdown-to-jsx": "^7.0.0",
     "office-ui-fabric-core": "^11.0.0",
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index 560f9cc8bd688..20c66e45cde18 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -34,8 +34,8 @@
     "@fluentui/merge-styles": "^8.5.12",
     "@fluentui/react": "^8.110.11",
     "@fluentui/react-cards": "^0.205.104",
-    "@fluentui/react-charting": "^5.16.55",
-    "@fluentui/react-docsite-components": "^8.12.35",
+    "@fluentui/react-charting": "^5.16.56",
+    "@fluentui/react-docsite-components": "^8.12.36",
     "@fluentui/react-experiments": "^8.14.99",
     "@fluentui/react-file-type-icons": "^8.10.0",
     "@fluentui/react-focus": "^8.8.30",
diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json
index a2fa20f9c00c1..6042676ed8b7b 100644
--- a/packages/react-monaco-editor/CHANGELOG.json
+++ b/packages/react-monaco-editor/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-monaco-editor",
   "entries": [
+    {
+      "date": "Fri, 28 Jul 2023 07:34:57 GMT",
+      "tag": "@fluentui/react-monaco-editor_v1.7.113",
+      "version": "1.7.113",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-monaco-editor",
+            "comment": "Bump @fluentui/react-charting to v5.16.56",
+            "commit": "2f795af17bf0cf844e0cc59c5d2f2418a00c9594"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 07:44:54 GMT",
       "tag": "@fluentui/react-monaco-editor_v1.7.112",
diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md
index 1af0dbf16af9b..21226b994d1bf 100644
--- a/packages/react-monaco-editor/CHANGELOG.md
+++ b/packages/react-monaco-editor/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-monaco-editor
 
-This log was last generated on Tue, 25 Jul 2023 07:44:54 GMT and should not be manually modified.
+This log was last generated on Fri, 28 Jul 2023 07:34:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.7.113](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.113)
+
+Fri, 28 Jul 2023 07:34:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.112..@fluentui/react-monaco-editor_v1.7.113)
+
+### Patches
+
+- Bump @fluentui/react-charting to v5.16.56 ([PR #28651](https://github.com/microsoft/fluentui/pull/28651) by beachball)
+
 ## [1.7.112](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.112)
 
 Tue, 25 Jul 2023 07:44:54 GMT 
diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json
index 149727030a06a..25a92993c4737 100644
--- a/packages/react-monaco-editor/package.json
+++ b/packages/react-monaco-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-monaco-editor",
-  "version": "1.7.112",
+  "version": "1.7.113",
   "description": "Live React example editing using monaco",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,7 +35,7 @@
     "@fluentui/example-data": "^8.4.11",
     "@fluentui/monaco-editor": "^1.3.11",
     "@fluentui/react-hooks": "^8.6.29",
-    "@fluentui/react-charting": "^5.16.55",
+    "@fluentui/react-charting": "^5.16.56",
     "raw-loader": "4.0.2",
     "react-syntax-highlighter": "^10.1.3",
     "tslib": "^2.1.0"

From d39f715d564b0b9ad2f0e18fecf006ce2103cc8c Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Fri, 28 Jul 2023 13:04:20 +0200
Subject: [PATCH 22/37] chore: migrate to nx 16.1.4 (#28583)

* chore: nx 16.0 migration

* chore: exec migrations from @nrwl to @nx packages

* chore: exec migration which converts tools/ to tools/workspace-plugin nx plugin

* generate change file

* chore: nx 16.1 migration

* chore: bump swc/core to 1.3.45 which resolves issues with swc-node/register to make nx no-build DX work, without need to bump swc helpers to 0.5.x which increases v9 bundle size

* chore: dedup deps

* test(workspace-plugin): nx 16 changed transpilation which broke some of our generator test

* fix: rollback to swc/core 1.3.44 which is the latest version to support swc/helpers@0.4.x and remove swc-node in order to use ts-node within nx(nx uses swc/helpers 0.5 if swc-node is used/installed)
---
 .eslintrc.json                                |    8 +-
 .vscode/settings.json                         |    1 +
 azure-pipelines.release-vnext-nightly.yml     |    2 +-
 azure-pipelines.yml                           |    6 +-
 ...-09407c84-dd7b-4550-b467-fef7d9945fda.json |    7 +
 jest.config.ts                                |    2 +-
 lerna.json                                    |    2 +-
 migrations.json                               |   98 +-
 nx.json                                       |    2 +-
 package.json                                  |   27 +-
 .../eslint-plugin/src/utils/configHelpers.js  |    8 +-
 .../tasks/fluentPerfRegressions.ts            |    2 +-
 .../fluentui/react-northstar/jest.config.js   |    2 +-
 .../src/index.dev.js                          |    2 +-
 scripts/babel/preset-v9.js                    |    2 +-
 scripts/beachball/shared.config.ts            |    2 +-
 scripts/bundle-size-auditor/src/cli.spec.ts   |    2 +-
 scripts/generators/create-package/index.ts    |    2 +-
 .../generators/generate-version-files.spec.ts |    2 +-
 scripts/generators/generate-version-files.ts  |    2 +-
 scripts/jest/src/jest.preset.v0.spec.ts       |    2 +-
 scripts/jest/src/jest.preset.v8.spec.ts       |    2 +-
 scripts/monorepo/src/tree.js                  |    2 +-
 scripts/monorepo/src/utils.js                 |    4 +-
 scripts/projects-test/src/utils.ts            |    8 +-
 scripts/storybook/src/utils.js                |    2 +-
 scripts/storybook/src/utils.spec.js           |    2 +-
 scripts/tasks/src/api-extractor.ts            |    2 +-
 scripts/tasks/src/perf-task/perf-test.ts      |    2 +-
 scripts/tasks/src/utils.spec.ts               |    2 +-
 scripts/tasks/src/utils.ts                    |    2 +-
 tools/.eslintrc.json                          |    8 -
 tools/generators/react-library/lib/.gitkeep   |    0
 tools/jest.config.ts                          |   21 -
 tools/package.json                            |   11 -
 tools/project.json                            |   36 -
 tools/tsconfig.lib.json                       |   11 -
 tools/tsconfig.spec.json                      |   20 -
 tools/tsconfig.tools.json                     |   14 -
 tools/workspace-plugin/.eslintrc.json         |   35 +
 tools/workspace-plugin/README.md              |   14 +
 tools/{ => workspace-plugin}/STYLE-GUIDE.md   |    2 +-
 tools/workspace-plugin/generators.json        |   84 +
 tools/workspace-plugin/jest.config.ts         |   18 +
 tools/workspace-plugin/package.json           |   12 +
 tools/workspace-plugin/project.json           |   74 +
 .../scripts}/check-dep-graph.js               |   10 +-
 .../src}/generators/add-codeowners.spec.ts    |    4 +-
 .../src}/generators/add-codeowners.ts         |    4 +-
 .../cypress-component-configuration/README.md |    6 +-
 .../files/cypress.config.ts__tmpl__           |    0
 .../files/tsconfig.cy.json__tmpl__            |    0
 .../index.spec.ts                             |    4 +-
 .../cypress-component-configuration/index.ts  |    2 +-
 .../lib/add-files.ts                          |   19 +-
 .../lib/utils.spec.ts                         |    0
 .../lib/utils.ts                              |    0
 .../schema.json                               |    0
 .../cypress-component-configuration/schema.ts |    0
 .../generators/dependency-mismatch/README.md  |    6 +-
 .../dependency-mismatch/index.spec.ts         |    4 +-
 .../generators/dependency-mismatch/index.ts   |    0
 .../dependency-mismatch/schema.json           |    0
 .../generators/dependency-mismatch/schema.ts  |    0
 .../src}/generators/epic-generator/README.md  |    4 +-
 .../generators/epic-generator/index.spec.ts   |    4 +-
 .../src}/generators/epic-generator/index.ts   |    2 +-
 .../generators/epic-generator/schema.json     |    0
 .../src}/generators/epic-generator/schema.ts  |    0
 .../generators/generate-change-file.spec.ts   |    2 +-
 .../src}/generators/generate-change-files.ts  |    2 +-
 .../migrate-converged-pkg/README.md           |   12 +-
 .../__fixtures__/conformance-setup.ts__tmpl__ |    0
 .../__fixtures__/just-config.ts__tmpl__       |    0
 .../__fixtures__/old-jest-config.js__tmpl__   |    0
 .../__fixtures__/ts-ignore-story.ts__tmpl__   |    0
 .../__snapshots__/index.spec.ts.snap          |    0
 .../migrate-converged-pkg/files}/.gitkeep     |    0
 .../files/just-config.ts__tmpl__              |    0
 .../migrate-converged-pkg/index.spec.ts       |   30 +-
 .../generators/migrate-converged-pkg/index.ts |   12 +-
 .../utils-hello-substitute.ts__tmpl__         |    0
 .../lib/__fixtures__/utils-hello.ts__tmpl__   |    0
 .../migrate-converged-pkg/lib/utils.spec.ts   |    2 +-
 .../migrate-converged-pkg/lib/utils.ts        |    4 +-
 .../migrate-converged-pkg/schema.json         |    0
 .../migrate-converged-pkg/schema.ts           |    0
 .../migrate-fixed-versions/README.md          |    8 +-
 .../migrate-fixed-versions/index.spec.ts      |    4 +-
 .../migrate-fixed-versions/index.ts           |    2 +-
 .../migrate-fixed-versions/schema.json        |    0
 .../migrate-fixed-versions/schema.ts          |    0
 .../src}/generators/migrate-v8-pkg/README.md  |    6 +-
 .../generators/migrate-v8-pkg/index.spec.ts   |    6 +-
 .../src}/generators/migrate-v8-pkg/index.ts   |    2 +-
 .../migrate-v8-pkg/lib/utils.spec.ts          |    2 +-
 .../generators/migrate-v8-pkg/lib/utils.ts    |    2 +-
 .../generators/migrate-v8-pkg/schema.json     |    0
 .../src}/generators/migrate-v8-pkg/schema.ts  |    0
 .../src}/generators/move-packages/README.md   |    8 +-
 .../generators/move-packages/index.spec.ts    |   16 +-
 .../src}/generators/move-packages/index.ts    |    4 +-
 .../src}/generators/move-packages/schema.json |    0
 .../src}/generators/move-packages/schema.ts   |    0
 .../normalize-package-dependencies/README.md  |    6 +-
 .../index.spec.ts                             |   10 +-
 .../normalize-package-dependencies/index.ts   |    4 +-
 .../lib}/.gitkeep                             |    0
 .../schema.json                               |    0
 .../normalize-package-dependencies/schema.ts  |    0
 .../prepare-initial-release/README.md         |    6 +-
 .../prepare-initial-release/index.spec.ts     |   29 +-
 .../prepare-initial-release/index.ts          |    0
 .../prepare-initial-release}/lib/.gitkeep     |    0
 .../prepare-initial-release/schema.json       |    0
 .../prepare-initial-release/schema.ts         |    0
 .../src}/generators/print-stats.spec.ts       |    4 +-
 .../src}/generators/print-stats.ts            |    2 +-
 .../src}/generators/rc-caret/README.md        |    8 +-
 .../src}/generators/rc-caret/index.spec.ts    |    4 +-
 .../src}/generators/rc-caret/index.ts         |    2 +-
 .../src}/generators/rc-caret/schema.json      |    0
 .../src}/generators/rc-caret/schema.ts        |    0
 .../src}/generators/react-component/README.md |    6 +-
 .../__componentName__.test.tsx__tmpl__        |    0
 .../component/__componentName__.tsx__tmpl__   |    0
 .../__componentName__.types.ts__tmpl__        |    0
 .../files/component/index.ts__tmpl__          |    0
 .../render__componentName__.tsx__tmpl__       |    0
 .../component/use__componentName__.ts__tmpl__ |    0
 ...e__componentName__Styles.styles.ts__tmpl__ |    0
 .../__componentName__BestPractices.md__tmpl__ |    0
 ...componentName__Default.stories.tsx__tmpl__ |    0
 .../__componentName__Description.md__tmpl__   |    0
 .../files/story/index.stories.tsx__tmpl__     |    0
 .../generators/react-component/index.spec.ts  |    4 +-
 .../src}/generators/react-component/index.ts  |    2 +-
 .../generators/react-component}/lib/.gitkeep  |    0
 .../generators/react-component/schema.json    |    0
 .../src}/generators/react-component/schema.ts |    0
 .../src}/generators/react-library/README.md   |    6 +-
 .../react-library/files/.babelrc.json__tmpl__ |    0
 .../files/.eslintrc.json__tmpl__              |    0
 .../react-library/files/.npmignore__tmpl__    |    0
 .../files/.storybook/main.js__tmpl__          |    0
 .../files/.storybook/preview.js__tmpl__       |    0
 .../files/.storybook/tsconfig.json__tmpl__    |    0
 .../react-library/files/.swcrc__tmpl__        |    0
 .../react-library/files/LICENSE__tmpl__       |    0
 .../react-library/files/README.md__tmpl__     |    0
 .../files/config/api-extractor.json__tmpl__   |    0
 .../files/config/tests.js__tmpl__             |    0
 .../react-library/files/docs/Spec.md__tmpl__  |    0
 .../files/etc/__packageName__.api.md          |    0
 .../files/jest.config.js__tmpl__              |    0
 .../files/just.config.ts__tmpl__              |    0
 .../react-library/files/package.json__tmpl__  |    0
 .../react-library/files/src/index.ts__tmpl__  |    0
 .../files/src/testing/isConformant.ts__tmpl__ |    0
 .../react-library/files/stories}/.gitkeep     |    0
 .../react-library/files/tsconfig.json__tmpl__ |    0
 .../files/tsconfig.lib.json__tmpl__           |    0
 .../files/tsconfig.spec.json__tmpl__          |    0
 .../generators/react-library/index.spec.ts    |    4 +-
 .../src}/generators/react-library/index.ts    |    2 +-
 .../generators/react-library/lib}/.gitkeep    |    0
 .../src}/generators/react-library/schema.json |    0
 .../src}/generators/react-library/schema.ts   |    0
 .../generators/recipe-generator/README.md     |    8 +-
 .../__snapshots__/index.spec.ts.snap          |    0
 .../__fileName__.stories.mdx__tmpl__          |    0
 .../code-snippets/__fileName__.tsx__tmpl__    |    0
 .../code-snippets/index.ts__tmpl__            |    0
 .../generators/recipe-generator/index.spec.ts |    4 +-
 .../src}/generators/recipe-generator/index.ts |    2 +-
 .../generators/recipe-generator/schema.json   |    0
 .../generators/recipe-generator/schema.ts     |    0
 .../generators/tsconfig-base-all/README.md    |    8 +-
 .../tsconfig-base-all/index.spec.ts           |    6 +-
 .../generators/tsconfig-base-all/index.ts     |    4 +-
 .../generators/tsconfig-base-all/lib/utils.ts |    2 +-
 .../generators/tsconfig-base-all/schema.json  |    0
 .../generators/tsconfig-base-all/schema.ts    |    0
 .../src}/generators/version-bump/README.md    |   12 +-
 .../generators/version-bump/index.spec.ts     |    4 +-
 .../src}/generators/version-bump/index.ts     |    2 +-
 .../src}/generators/version-bump/schema.json  |    0
 .../src}/generators/version-bump/schema.ts    |    0
 .../files/README.md__tmpl__                   |    6 +-
 .../files/index.spec.ts__tmpl__               |    4 +-
 .../files/index.ts__tmpl__                    |    4 +-
 .../files/lib/utils.spec.ts__tmpl__           |    0
 .../files/lib/utils.ts__tmpl__                |    0
 .../files/schema.json__tmpl__                 |    0
 .../files/schema.ts__tmpl__                   |    0
 .../workspace-generator/index.spec.ts         |   18 +-
 .../generators/workspace-generator/index.ts   |    2 +-
 .../workspace-generator/schema.json           |    0
 .../generators/workspace-generator/schema.ts  |    0
 tools/workspace-plugin/src/index.ts           |    1 +
 .../{ => workspace-plugin/src}/types.spec.ts  |    0
 tools/{ => workspace-plugin/src}/types.ts     |    0
 .../src}/utils-testing.ts                     |    2 +-
 .../{ => workspace-plugin/src}/utils.spec.ts  |    2 +-
 tools/{ => workspace-plugin/src}/utils.ts     |    6 +-
 tools/{ => workspace-plugin}/tsconfig.json    |    9 +-
 tools/workspace-plugin/tsconfig.lib.json      |   10 +
 tools/workspace-plugin/tsconfig.spec.json     |    9 +
 tsconfig.base.all.json                        |    5 +-
 tsconfig.base.json                            |    3 +-
 yarn.lock                                     | 1617 +++++++----------
 211 files changed, 1204 insertions(+), 1409 deletions(-)
 create mode 100644 change/@fluentui-eslint-plugin-09407c84-dd7b-4550-b467-fef7d9945fda.json
 delete mode 100644 tools/.eslintrc.json
 delete mode 100644 tools/generators/react-library/lib/.gitkeep
 delete mode 100644 tools/jest.config.ts
 delete mode 100644 tools/package.json
 delete mode 100644 tools/project.json
 delete mode 100644 tools/tsconfig.lib.json
 delete mode 100644 tools/tsconfig.spec.json
 delete mode 100644 tools/tsconfig.tools.json
 create mode 100644 tools/workspace-plugin/.eslintrc.json
 create mode 100644 tools/workspace-plugin/README.md
 rename tools/{ => workspace-plugin}/STYLE-GUIDE.md (98%)
 create mode 100644 tools/workspace-plugin/generators.json
 create mode 100644 tools/workspace-plugin/jest.config.ts
 create mode 100644 tools/workspace-plugin/package.json
 create mode 100644 tools/workspace-plugin/project.json
 rename tools/{ => workspace-plugin/scripts}/check-dep-graph.js (65%)
 rename tools/{ => workspace-plugin/src}/generators/add-codeowners.spec.ts (95%)
 rename tools/{ => workspace-plugin/src}/generators/add-codeowners.ts (91%)
 rename tools/{ => workspace-plugin/src}/generators/cypress-component-configuration/README.md (67%)
 rename tools/{ => workspace-plugin/src}/generators/cypress-component-configuration/files/cypress.config.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/cypress-component-configuration/files/tsconfig.cy.json__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/cypress-component-configuration/index.spec.ts (97%)
 rename tools/{ => workspace-plugin/src}/generators/cypress-component-configuration/index.ts (94%)
 rename tools/{ => workspace-plugin/src}/generators/cypress-component-configuration/lib/add-files.ts (68%)
 rename tools/{ => workspace-plugin/src}/generators/cypress-component-configuration/lib/utils.spec.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/cypress-component-configuration/lib/utils.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/cypress-component-configuration/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/cypress-component-configuration/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/dependency-mismatch/README.md (85%)
 rename tools/{ => workspace-plugin/src}/generators/dependency-mismatch/index.spec.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/dependency-mismatch/index.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/dependency-mismatch/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/dependency-mismatch/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/epic-generator/README.md (81%)
 rename tools/{ => workspace-plugin/src}/generators/epic-generator/index.spec.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/epic-generator/index.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/epic-generator/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/epic-generator/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/generate-change-file.spec.ts (96%)
 rename tools/{ => workspace-plugin/src}/generators/generate-change-files.ts (97%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/README.md (73%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/__fixtures__/conformance-setup.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/__fixtures__/just-config.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/__fixtures__/old-jest-config.js__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/__fixtures__/ts-ignore-story.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/__snapshots__/index.spec.ts.snap (100%)
 rename tools/{generators => workspace-plugin/src/generators/migrate-converged-pkg/files}/.gitkeep (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/files/just-config.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/index.spec.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/index.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/lib/__fixtures__/utils-hello-substitute.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/lib/__fixtures__/utils-hello.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/lib/utils.spec.ts (94%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/lib/utils.ts (86%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-converged-pkg/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-fixed-versions/README.md (75%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-fixed-versions/index.spec.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-fixed-versions/index.ts (99%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-fixed-versions/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-fixed-versions/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-v8-pkg/README.md (65%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-v8-pkg/index.spec.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-v8-pkg/index.ts (99%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-v8-pkg/lib/utils.spec.ts (95%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-v8-pkg/lib/utils.ts (97%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-v8-pkg/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/migrate-v8-pkg/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/move-packages/README.md (76%)
 rename tools/{ => workspace-plugin/src}/generators/move-packages/index.spec.ts (96%)
 rename tools/{ => workspace-plugin/src}/generators/move-packages/index.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/move-packages/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/move-packages/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/normalize-package-dependencies/README.md (76%)
 rename tools/{ => workspace-plugin/src}/generators/normalize-package-dependencies/index.spec.ts (97%)
 rename tools/{ => workspace-plugin/src}/generators/normalize-package-dependencies/index.ts (97%)
 rename tools/{generators/migrate-converged-pkg/files => workspace-plugin/src/generators/normalize-package-dependencies/lib}/.gitkeep (100%)
 rename tools/{ => workspace-plugin/src}/generators/normalize-package-dependencies/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/normalize-package-dependencies/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/prepare-initial-release/README.md (87%)
 rename tools/{ => workspace-plugin/src}/generators/prepare-initial-release/index.spec.ts (96%)
 rename tools/{ => workspace-plugin/src}/generators/prepare-initial-release/index.ts (100%)
 rename tools/{generators/normalize-package-dependencies => workspace-plugin/src/generators/prepare-initial-release}/lib/.gitkeep (100%)
 rename tools/{ => workspace-plugin/src}/generators/prepare-initial-release/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/prepare-initial-release/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/print-stats.spec.ts (97%)
 rename tools/{ => workspace-plugin/src}/generators/print-stats.ts (97%)
 rename tools/{ => workspace-plugin/src}/generators/rc-caret/README.md (83%)
 rename tools/{ => workspace-plugin/src}/generators/rc-caret/index.spec.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/rc-caret/index.ts (97%)
 rename tools/{ => workspace-plugin/src}/generators/rc-caret/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/rc-caret/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/README.md (74%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/component/__componentName__.test.tsx__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/component/__componentName__.tsx__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/component/__componentName__.types.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/component/index.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/component/render__componentName__.tsx__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/component/use__componentName__.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/component/use__componentName__Styles.styles.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/story/__componentName__BestPractices.md__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/story/__componentName__Default.stories.tsx__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/story/__componentName__Description.md__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/files/story/index.stories.tsx__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/index.spec.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/index.ts (98%)
 rename tools/{generators/prepare-initial-release => workspace-plugin/src/generators/react-component}/lib/.gitkeep (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-component/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/README.md (80%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/.babelrc.json__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/.eslintrc.json__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/.npmignore__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/.storybook/main.js__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/.storybook/preview.js__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/.storybook/tsconfig.json__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/.swcrc__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/LICENSE__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/README.md__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/config/api-extractor.json__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/config/tests.js__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/docs/Spec.md__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/etc/__packageName__.api.md (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/jest.config.js__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/just.config.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/package.json__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/src/index.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/src/testing/isConformant.ts__tmpl__ (100%)
 rename tools/{generators/react-component/lib => workspace-plugin/src/generators/react-library/files/stories}/.gitkeep (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/tsconfig.json__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/tsconfig.lib.json__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/files/tsconfig.spec.json__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/index.spec.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/index.ts (99%)
 rename tools/{generators/react-library/files/stories => workspace-plugin/src/generators/react-library/lib}/.gitkeep (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/react-library/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/recipe-generator/README.md (65%)
 rename tools/{ => workspace-plugin/src}/generators/recipe-generator/__snapshots__/index.spec.ts.snap (100%)
 rename tools/{ => workspace-plugin/src}/generators/recipe-generator/files/__packageName__/__fileName__.stories.mdx__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/recipe-generator/files/__packageName__/code-snippets/__fileName__.tsx__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/recipe-generator/files/__packageName__/code-snippets/index.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/recipe-generator/index.spec.ts (94%)
 rename tools/{ => workspace-plugin/src}/generators/recipe-generator/index.ts (97%)
 rename tools/{ => workspace-plugin/src}/generators/recipe-generator/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/recipe-generator/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/tsconfig-base-all/README.md (74%)
 rename tools/{ => workspace-plugin/src}/generators/tsconfig-base-all/index.spec.ts (93%)
 rename tools/{ => workspace-plugin/src}/generators/tsconfig-base-all/index.ts (86%)
 rename tools/{ => workspace-plugin/src}/generators/tsconfig-base-all/lib/utils.ts (96%)
 rename tools/{ => workspace-plugin/src}/generators/tsconfig-base-all/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/tsconfig-base-all/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/version-bump/README.md (79%)
 rename tools/{ => workspace-plugin/src}/generators/version-bump/index.spec.ts (99%)
 rename tools/{ => workspace-plugin/src}/generators/version-bump/index.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/version-bump/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/version-bump/schema.ts (100%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/files/README.md__tmpl__ (66%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/files/index.spec.ts__tmpl__ (78%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/files/index.ts__tmpl__ (92%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/files/lib/utils.spec.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/files/lib/utils.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/files/schema.json__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/files/schema.ts__tmpl__ (100%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/index.spec.ts (90%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/index.ts (98%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/schema.json (100%)
 rename tools/{ => workspace-plugin/src}/generators/workspace-generator/schema.ts (100%)
 create mode 100644 tools/workspace-plugin/src/index.ts
 rename tools/{ => workspace-plugin/src}/types.spec.ts (100%)
 rename tools/{ => workspace-plugin/src}/types.ts (100%)
 rename tools/{ => workspace-plugin/src}/utils-testing.ts (92%)
 rename tools/{ => workspace-plugin/src}/utils.spec.ts (97%)
 rename tools/{ => workspace-plugin/src}/utils.ts (97%)
 rename tools/{ => workspace-plugin}/tsconfig.json (63%)
 create mode 100644 tools/workspace-plugin/tsconfig.lib.json
 create mode 100644 tools/workspace-plugin/tsconfig.spec.json

diff --git a/.eslintrc.json b/.eslintrc.json
index ec2adcf854d35..fb0078681dba9 100644
--- a/.eslintrc.json
+++ b/.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": {}
+    }
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index abe6440061113..94bec1ca23c80 100644
--- a/.vscode/settings.json
+++ b/.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",
diff --git a/azure-pipelines.release-vnext-nightly.yml b/azure-pipelines.release-vnext-nightly.yml
index cdb35c0438745..580b676bc983c 100644
--- a/azure-pipelines.release-vnext-nightly.yml
+++ b/azure-pipelines.release-vnext-nightly.yml
@@ -56,7 +56,7 @@ jobs:
       - script: |
           date=$(date +"%Y%m%d-%H%M")
           #release version name will follow a 0.0.0-nightly-{year}{month}{day}-{hour}{minute} format.
-          yarn nx workspace-generator version-bump --all --bumpType nightly --prereleaseTag "nightly-${date}"
+          yarn nx g @fluentui/workspace-plugin:version-bump --all --bumpType nightly --prereleaseTag "nightly-${date}"
           git add .
           git commit -m "bump nightly versions"
           yarn change --type prerelease --message "Release nightly v9" --dependent-change-type "prerelease"
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 8bb8ccee6b7af..6b02abf6c9bfa 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -30,9 +30,9 @@ jobs:
 
       - script: |
           yarn nx workspace-lint
-          yarn nx run @fluentui/nx-workspace-tools:check-graph
-          yarn nx workspace-generator tsconfig-base-all --verify
-          yarn nx workspace-generator normalize-package-dependencies --verify
+          yarn nx run @fluentui/workspace-plugin:check-graph
+          yarn nx g @fluentui/workspace-plugin:tsconfig-base-all --verify
+          yarn nx g @fluentui/workspace-plugin:normalize-package-dependencies --verify
 
         displayName: Workspace lint
 
diff --git a/change/@fluentui-eslint-plugin-09407c84-dd7b-4550-b467-fef7d9945fda.json b/change/@fluentui-eslint-plugin-09407c84-dd7b-4550-b467-fef7d9945fda.json
new file mode 100644
index 0000000000000..4a5ac005f65f1
--- /dev/null
+++ b/change/@fluentui-eslint-plugin-09407c84-dd7b-4550-b467-fef7d9945fda.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: exec migrations from @nrwl to @nx packages",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/jest.config.ts b/jest.config.ts
index c28af4986b129..90b8b012d9018 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -1,4 +1,4 @@
-const { getJestProjects } = require('@nrwl/jest');
+const { getJestProjects } = require('@nx/jest');
 
 export default {
   projects: [...getJestProjects()],
diff --git a/lerna.json b/lerna.json
index 6ffde71379156..a6915169f8f1a 100644
--- a/lerna.json
+++ b/lerna.json
@@ -5,7 +5,7 @@
     "packages/react-components/*",
     "scripts/*",
     "packages/fluentui/*",
-    "tools",
+    "tools/*",
     "typings"
   ],
   "npmClient": "yarn",
diff --git a/migrations.json b/migrations.json
index bf9e7e1a365fb..be8ee72691cee 100644
--- a/migrations.json
+++ b/migrations.json
@@ -1,52 +1,92 @@
 {
   "migrations": [
     {
-      "version": "15.7.0-beta.0",
-      "description": "Split global configuration files into individual project.json files. This migration has been added automatically to the beginning of your migration set to retroactively make them work with the new version of Nx.",
       "cli": "nx",
-      "implementation": "./src/migrations/update-15-7-0/split-configuration-into-project-json-files",
-      "package": "@nrwl/workspace",
-      "name": "15-7-0-split-configuration-into-project-json-files"
+      "version": "16.0.0-beta.0",
+      "description": "Remove @nrwl/cli.",
+      "implementation": "./src/migrations/update-16-0-0/remove-nrwl-cli",
+      "package": "nx",
+      "name": "16.0.0-remove-nrwl-cli"
+    },
+    {
+      "cli": "nx",
+      "version": "16.0.0-beta.9",
+      "description": "Replace `dependsOn.projects` and `inputs` definitions with new configuration format.",
+      "implementation": "./src/migrations/update-16-0-0/update-depends-on-to-tokens",
+      "package": "nx",
+      "name": "16.0.0-tokens-for-depends-on"
     },
     {
       "cli": "nx",
-      "version": "15.8.2-beta.0",
-      "description": "Updates the nx wrapper.",
-      "implementation": "./src/migrations/update-15-8-2/update-nxw",
+      "version": "16.0.0-beta.0",
+      "description": "Replace @nrwl/nx-cloud with nx-cloud",
+      "implementation": "./src/migrations/update-16-0-0/update-nx-cloud-runner",
       "package": "nx",
-      "name": "15.8.2-update-nx-wrapper"
+      "name": "16.0.0-update-nx-cloud-runner"
+    },
+    {
+      "cli": "nx",
+      "version": "16.0.0-beta.1",
+      "description": "Replace @nx/devkit with @nx/devkit",
+      "implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages",
+      "package": "@nx/devkit",
+      "name": "update-16-0-0-add-nx-packages"
+    },
+    {
+      "cli": "nx",
+      "version": "16.0.0-beta.1",
+      "description": "Replace @nx/workspace with @nx/workspace",
+      "implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages",
+      "package": "@nx/workspace",
+      "name": "update-16-0-0-add-nx-packages"
+    },
+    {
+      "cli": "nx",
+      "version": "16.0.0-beta.1",
+      "description": "Replace @nx/js with @nx/js",
+      "implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages",
+      "package": "@nx/js",
+      "name": "update-16-0-0-add-nx-packages"
+    },
+    {
+      "cli": "nx",
+      "version": "16.0.0-beta.1",
+      "description": "Replace @nx/jest with @nx/jest",
+      "implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages",
+      "package": "@nx/jest",
+      "name": "update-16-0-0-add-nx-packages"
     },
     {
       "cli": "nx",
-      "version": "15.8.0-beta.0",
-      "description": "Rename .lib.swcrc to .swcrc for better SWC support throughout the workspace",
-      "factory": "./src/migrations/update-15-8-0/rename-swcrc-config",
-      "package": "@nrwl/js",
-      "name": "rename-swcrc-config"
+      "version": "16.0.0-beta.1",
+      "description": "Replace @nx/node with @nx/node",
+      "implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages",
+      "package": "@nx/node",
+      "name": "update-16-0-0-add-nx-packages"
     },
     {
-      "version": "15.7.0-beta.0",
-      "description": "Split global configuration files (e.g., workspace.json) into individual project.json files.",
       "cli": "nx",
-      "implementation": "./src/migrations/update-15-7-0/split-configuration-into-project-json-files",
-      "package": "@nrwl/workspace",
-      "name": "15-7-0-split-configuration-into-project-json-files"
+      "version": "16.0.0-beta.5",
+      "description": "Replace @nx/node:webpack with @nx/node:webpack",
+      "implementation": "./src/migrations/update-16-0-0/update-webpack-executor",
+      "package": "@nx/node",
+      "name": "update-16-0-0-update-executor"
     },
     {
-      "version": "15.8.0-beta.0",
+      "version": "16.0.0-beta.9",
+      "description": "Fix .babelrc presets if it contains an invalid entry for @nx/web/babel.",
       "cli": "nx",
-      "description": "Update jest configs to support jest 29 changes (https://jestjs.io/docs/upgrading-to-jest29)",
-      "factory": "./src/migrations/update-15-8-0/update-configs-jest-29",
-      "package": "@nrwl/jest",
-      "name": "update-configs-jest-29"
+      "implementation": "./src/migrations/update-16-0-0/fix-invalid-babelrc",
+      "package": "@nx/workspace",
+      "name": "16-0-0-fix-invalid-babelrc"
     },
     {
-      "version": "15.8.0-beta.0",
+      "version": "16.0.0-beta.4",
+      "description": "Generates a plugin called 'workspace-plugin' containing your workspace generators.",
       "cli": "nx",
-      "description": "Update jest test files to support jest 29 changes (https://jestjs.io/docs/upgrading-to-jest29)",
-      "factory": "./src/migrations/update-15-8-0/update-tests-jest-29",
-      "package": "@nrwl/jest",
-      "name": "update-tests-jest-29"
+      "implementation": "./src/migrations/update-16-0-0/move-workspace-generators-to-local-plugin",
+      "package": "@nx/workspace",
+      "name": "16-0-0-move-workspace-generators-into-local-plugin"
     }
   ]
 }
diff --git a/nx.json b/nx.json
index 2468b28063718..78f773db2755a 100644
--- a/nx.json
+++ b/nx.json
@@ -19,7 +19,7 @@
     "defaultBase": "master"
   },
   "pluginsConfig": {
-    "@nrwl/js": {
+    "@nx/js": {
       "analyzeSourceFiles": true
     }
   },
diff --git a/package.json b/package.json
index b9925dc60b18f..8c40e42abf01f 100644
--- a/package.json
+++ b/package.json
@@ -28,8 +28,8 @@
     "code-style": "lage code-style --verbose",
     "codepen": "cd packages/react && node ../../scripts/executors/local-codepen.js",
     "copy-notices": "node scripts/generators/copy-notices.js",
-    "create-component": "yarn nx workspace-generator react-component",
-    "create-package": "yarn nx workspace-generator react-library",
+    "create-component": "yarn nx g @fluentui/workspace-plugin:react-component",
+    "create-package": "yarn nx g @fluentui/workspace-plugin:react-library",
     "e2e": "lage e2e --verbose --concurrency=1",
     "format": "node scripts/executors/format.js",
     "generate-version-files": "node -r ./scripts/ts-node/register ./scripts/generators/generate-version-files",
@@ -101,12 +101,12 @@
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",
     "@microsoft/tsdoc": "0.14.1",
-    "@nrwl/cli": "15.9.4",
-    "@nrwl/devkit": "15.9.4",
-    "@nrwl/jest": "15.9.4",
-    "@nrwl/js": "15.9.4",
-    "@nrwl/node": "15.9.4",
-    "@nrwl/workspace": "15.9.4",
+    "@nx/devkit": "16.1.4",
+    "@nx/jest": "16.1.4",
+    "@nx/js": "16.1.4",
+    "@nx/node": "16.1.4",
+    "@nx/plugin": "16.1.4",
+    "@nx/workspace": "16.1.4",
     "@octokit/rest": "18.12.0",
     "@phenomnomnominal/tsquery": "6.1.2",
     "@storybook/addon-a11y": "6.5.15",
@@ -126,8 +126,8 @@
     "@storybook/manager-webpack5": "6.5.15",
     "@storybook/react": "6.5.15",
     "@storybook/theming": "6.5.15",
-    "@swc-node/register": "1.6.1",
-    "@swc/core": "1.3.30",
+    "@swc/cli": "0.1.62",
+    "@swc/core": "1.3.44",
     "@swc/helpers": "0.4.14",
     "@testing-library/dom": "8.11.3",
     "@testing-library/jest-dom": "5.16.5",
@@ -269,6 +269,7 @@
     "jju": "1.4.0",
     "json-schema": "0.4.0",
     "json-stable-stringify-without-jsonify": "1.0.1",
+    "jsonc-eslint-parser": "2.3.0",
     "just-scripts": "1.8.2",
     "lage": "1.8.8",
     "lerna": "5.5.2",
@@ -284,7 +285,7 @@
     "monosize-storage-azure": "0.0.3",
     "node-plop": "0.25.0",
     "node-polyfill-webpack-plugin": "1.0.2",
-    "nx": "15.9.4",
+    "nx": "16.1.4",
     "p-queue": "6.6.2",
     "parallel-webpack": "2.6.0",
     "parse-diff": "0.7.1",
@@ -338,7 +339,7 @@
     "terser-webpack-plugin": "5.3.9",
     "through2": "4.0.2",
     "tmp": "0.2.1",
-    "ts-jest": "29.1.0",
+    "ts-jest": "29.1.1",
     "ts-loader": "9.3.1",
     "ts-node": "10.9.1",
     "tsconfig-paths": "4.1.0",
@@ -370,7 +371,7 @@
       "packages/fluentui/*",
       "packages/react-components/*",
       "scripts/*",
-      "tools",
+      "tools/*",
       "typings"
     ],
     "nohoist": [
diff --git a/packages/eslint-plugin/src/utils/configHelpers.js b/packages/eslint-plugin/src/utils/configHelpers.js
index be50373c29943..496ef038a2dc5 100644
--- a/packages/eslint-plugin/src/utils/configHelpers.js
+++ b/packages/eslint-plugin/src/utils/configHelpers.js
@@ -7,23 +7,23 @@ const jju = require('jju');
 // eslint-disable-next-line import/no-extraneous-dependencies
 const { FsTree } = require('nx/src/generators/tree');
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { readProjectConfiguration } = require('@nrwl/devkit');
+const { readProjectConfiguration } = require('@nx/devkit');
 
 /**
  *  @typedef {{root: string, name: string}} Options
  *  @typedef {{name: string, version: string, dependencies: {[key: string]: string}}} PackageJson
- *  @typedef {import("@nrwl/devkit").WorkspaceJsonConfiguration} WorkspaceJsonConfiguration
+ *  @typedef {import("@nx/devkit").WorkspaceJsonConfiguration} WorkspaceJsonConfiguration
  */
 
 // FIXME: this is not ok (to depend on nx packages within this plugin - redo)
 /**
  * Gets project metadata from monorepo source of truth which is `project.json` per project
  * @param {Options} options
- * @returns {import('@nrwl/devkit').ProjectConfiguration}
+ * @returns {import('@nx/devkit').ProjectConfiguration}
  */
 function getProjectMetadata(options) {
   /**
-   * @type {import('@nrwl/devkit').Tree}
+   * @type {import('@nx/devkit').Tree}
    */
   const tree = new FsTree(options.root, false);
 
diff --git a/packages/fluentui/perf-test-northstar/tasks/fluentPerfRegressions.ts b/packages/fluentui/perf-test-northstar/tasks/fluentPerfRegressions.ts
index e86a7a6d30cd8..24b91cad0baf9 100644
--- a/packages/fluentui/perf-test-northstar/tasks/fluentPerfRegressions.ts
+++ b/packages/fluentui/perf-test-northstar/tasks/fluentPerfRegressions.ts
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import * as path from 'path';
-import { workspaceRoot } from '@nrwl/devkit';
+import { workspaceRoot } from '@nx/devkit';
 import { perfTestEnv } from '@fluentui/scripts-tasks';
 
 import { config } from './perf-test.config';
diff --git a/packages/fluentui/react-northstar/jest.config.js b/packages/fluentui/react-northstar/jest.config.js
index 58083ac69d28b..5cdf12e0e8ac3 100644
--- a/packages/fluentui/react-northstar/jest.config.js
+++ b/packages/fluentui/react-northstar/jest.config.js
@@ -1,6 +1,6 @@
 const path = require('path');
 const fs = require('fs');
-const { workspaceRoot } = require('@nrwl/devkit');
+const { workspaceRoot } = require('@nx/devkit');
 const { pathsToModuleNameMapper } = require('ts-jest');
 const { createV0Config: commonConfig } = require('@fluentui/scripts-jest');
 
diff --git a/packages/react-components/babel-preset-storybook-full-source/src/index.dev.js b/packages/react-components/babel-preset-storybook-full-source/src/index.dev.js
index ffab4869e8d48..62c09df0331a0 100644
--- a/packages/react-components/babel-preset-storybook-full-source/src/index.dev.js
+++ b/packages/react-components/babel-preset-storybook-full-source/src/index.dev.js
@@ -3,7 +3,7 @@
 const { registerTsProject } = require('nx/src/utils/register');
 
 // This is internal code and should be a dev dependency
-const { joinPathFragments } = require('@nrwl/devkit');
+const { joinPathFragments } = require('@nx/devkit');
 /* eslint-enable import/no-extraneous-dependencies */
 
 registerTsProject(joinPathFragments(__dirname, '..'), 'tsconfig.lib.json');
diff --git a/scripts/babel/preset-v9.js b/scripts/babel/preset-v9.js
index 6652270ece2b4..fbdd9e130ad9b 100644
--- a/scripts/babel/preset-v9.js
+++ b/scripts/babel/preset-v9.js
@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const { workspaceRoot } = require('@nrwl/devkit');
+const { workspaceRoot } = require('@nx/devkit');
 
 const cwd = process.cwd();
 const rootOffset = path.relative(cwd, workspaceRoot);
diff --git a/scripts/beachball/shared.config.ts b/scripts/beachball/shared.config.ts
index 6363ff741d725..5df8edb9c271d 100644
--- a/scripts/beachball/shared.config.ts
+++ b/scripts/beachball/shared.config.ts
@@ -29,7 +29,7 @@ export const config: typeof baseConfig & Required<Pick<BeachballConfig, 'changel
         ];
 
         generators.forEach(generator => {
-          const cmd = `yarn nx workspace-generator ${generator}`;
+          const cmd = `yarn nx g @fluentui/workspace-plugin:${generator}`;
           const out = execSync(cmd);
           console.log(out.toString());
         });
diff --git a/scripts/bundle-size-auditor/src/cli.spec.ts b/scripts/bundle-size-auditor/src/cli.spec.ts
index 57d84ff9ee783..f1e51912b15ce 100644
--- a/scripts/bundle-size-auditor/src/cli.spec.ts
+++ b/scripts/bundle-size-auditor/src/cli.spec.ts
@@ -1,7 +1,7 @@
 import * as path from 'path';
 import * as fs from 'fs';
 
-import { stripIndents } from '@nrwl/devkit';
+import { stripIndents } from '@nx/devkit';
 
 import { bundleSizeAuditor } from './cli';
 
diff --git a/scripts/generators/create-package/index.ts b/scripts/generators/create-package/index.ts
index 782cac0ff8c90..27612069cafc6 100644
--- a/scripts/generators/create-package/index.ts
+++ b/scripts/generators/create-package/index.ts
@@ -2,7 +2,7 @@ import { spawnSync } from 'child_process';
 import * as path from 'path';
 
 import { PackageJson, findGitRoot, flushTreeChanges, getProjectMetadata, tree } from '@fluentui/scripts-monorepo';
-import { addProjectConfiguration } from '@nrwl/devkit';
+import { addProjectConfiguration } from '@nx/devkit';
 import chalk from 'chalk';
 import * as fs from 'fs-extra';
 import _ from 'lodash';
diff --git a/scripts/generators/generate-version-files.spec.ts b/scripts/generators/generate-version-files.spec.ts
index 15cb3f73b6626..190bc89f61b49 100644
--- a/scripts/generators/generate-version-files.spec.ts
+++ b/scripts/generators/generate-version-files.spec.ts
@@ -2,7 +2,7 @@ import childProcess from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
 
-import { stripIndents } from '@nrwl/devkit';
+import { stripIndents } from '@nx/devkit';
 import * as tmp from 'tmp';
 
 import { generateVersionFiles } from './generate-version-files';
diff --git a/scripts/generators/generate-version-files.ts b/scripts/generators/generate-version-files.ts
index 7a4d7c6d8e151..ca240d8d59ba4 100644
--- a/scripts/generators/generate-version-files.ts
+++ b/scripts/generators/generate-version-files.ts
@@ -2,7 +2,7 @@ import { spawnSync } from 'child_process';
 import * as path from 'path';
 
 import { findGitRoot } from '@fluentui/scripts-monorepo';
-import { stripIndents } from '@nrwl/devkit';
+import { stripIndents } from '@nx/devkit';
 import * as fs from 'fs-extra';
 import * as glob from 'glob';
 
diff --git a/scripts/jest/src/jest.preset.v0.spec.ts b/scripts/jest/src/jest.preset.v0.spec.ts
index e0217356efcc4..ebe3057d530a5 100644
--- a/scripts/jest/src/jest.preset.v0.spec.ts
+++ b/scripts/jest/src/jest.preset.v0.spec.ts
@@ -1,4 +1,4 @@
-import { workspaceRoot } from '@nrwl/devkit';
+import { workspaceRoot } from '@nx/devkit';
 
 import preset from './jest.preset.v0';
 
diff --git a/scripts/jest/src/jest.preset.v8.spec.ts b/scripts/jest/src/jest.preset.v8.spec.ts
index 872fe2e413357..b70d446dba1bd 100644
--- a/scripts/jest/src/jest.preset.v8.spec.ts
+++ b/scripts/jest/src/jest.preset.v8.spec.ts
@@ -1,4 +1,4 @@
-import { workspaceRoot } from '@nrwl/devkit';
+import { workspaceRoot } from '@nx/devkit';
 
 import preset from './jest.preset.v8';
 
diff --git a/scripts/monorepo/src/tree.js b/scripts/monorepo/src/tree.js
index 5b8d0f9ab399c..6479df0a01dce 100644
--- a/scripts/monorepo/src/tree.js
+++ b/scripts/monorepo/src/tree.js
@@ -1,4 +1,4 @@
-const { workspaceRoot } = require('@nrwl/devkit');
+const { workspaceRoot } = require('@nx/devkit');
 const { FsTree, flushChanges } = require('nx/src/generators/tree');
 
 const tree = new FsTree(workspaceRoot, false);
diff --git a/scripts/monorepo/src/utils.js b/scripts/monorepo/src/utils.js
index 0c24a88e8d869..591814148916d 100644
--- a/scripts/monorepo/src/utils.js
+++ b/scripts/monorepo/src/utils.js
@@ -1,6 +1,6 @@
 const { execSync } = require('child_process');
 
-const { workspaceRoot, readProjectConfiguration } = require('@nrwl/devkit');
+const { workspaceRoot, readProjectConfiguration } = require('@nx/devkit');
 
 const { tree } = require('./tree');
 
@@ -9,7 +9,7 @@ const TEN_MEGABYTES = 1024 * 10000;
 /**
  * Gets nx project metadata
  * @param {string} projectName - package name
- * @returns {import('@nrwl/devkit').ProjectConfiguration}
+ * @returns {import('@nx/devkit').ProjectConfiguration}
  */
 function getProjectMetadata(projectName) {
   return readProjectConfiguration(tree, projectName);
diff --git a/scripts/projects-test/src/utils.ts b/scripts/projects-test/src/utils.ts
index c14d7c4824e0c..2405a9f8f9f19 100644
--- a/scripts/projects-test/src/utils.ts
+++ b/scripts/projects-test/src/utils.ts
@@ -1,10 +1,10 @@
 import fs from 'fs';
-import fsExtra from 'fs-extra';
 import path from 'path';
-import tmp from 'tmp';
 
-import { sh } from '@fluentui/scripts-utils';
 import { workspaceRoot } from '@fluentui/scripts-monorepo';
+import { sh } from '@fluentui/scripts-utils';
+import fsExtra from 'fs-extra';
+import tmp from 'tmp';
 
 // Clean up created files/folders on exit, even after exceptions
 // (will not catch SIGINT on windows)
@@ -61,7 +61,7 @@ export async function shEcho(cmd: string, cwd?: string) {
 
 /**
  * Generates a folder of files based on provided templates.
- * This is similar to nx `@nrwl/devkit#generateFiles` without templating and ability to run on virtual FS
+ * This is similar to nx `@nx/devkit#generateFiles` without templating and ability to run on virtual FS
  *
  * @example
  * ```typescript
diff --git a/scripts/storybook/src/utils.js b/scripts/storybook/src/utils.js
index 87e3372c2a971..c2616e724cff0 100644
--- a/scripts/storybook/src/utils.js
+++ b/scripts/storybook/src/utils.js
@@ -3,7 +3,7 @@ const path = require('path');
 
 const { fullSourcePlugin: babelPlugin } = require('@fluentui/babel-preset-storybook-full-source');
 const { getAllPackageInfo } = require('@fluentui/scripts-monorepo');
-const { stripIndents, offsetFromRoot, workspaceRoot, readProjectConfiguration } = require('@nrwl/devkit');
+const { stripIndents, offsetFromRoot, workspaceRoot, readProjectConfiguration } = require('@nx/devkit');
 const { FsTree } = require('nx/src/generators/tree');
 const semver = require('semver');
 const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
diff --git a/scripts/storybook/src/utils.spec.js b/scripts/storybook/src/utils.spec.js
index 4eb469327d2cf..f91a544bb7544 100644
--- a/scripts/storybook/src/utils.spec.js
+++ b/scripts/storybook/src/utils.spec.js
@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const { stripIndents } = require('@nrwl/devkit');
+const { stripIndents } = require('@nx/devkit');
 const tmp = require('tmp');
 
 const { loadWorkspaceAddon, getPackageStoriesGlob } = require('./utils');
diff --git a/scripts/tasks/src/api-extractor.ts b/scripts/tasks/src/api-extractor.ts
index 96c8cc8b6cf38..dd11a1d3c2925 100644
--- a/scripts/tasks/src/api-extractor.ts
+++ b/scripts/tasks/src/api-extractor.ts
@@ -1,7 +1,7 @@
 import * as path from 'path';
 
 import type { ExtractorMessageCategory, ExtractorResult } from '@microsoft/api-extractor';
-import { workspaceRoot } from '@nrwl/devkit';
+import { workspaceRoot } from '@nx/devkit';
 import chalk from 'chalk';
 import { isCI } from 'ci-info';
 import * as glob from 'glob';
diff --git a/scripts/tasks/src/perf-task/perf-test.ts b/scripts/tasks/src/perf-task/perf-test.ts
index 6fa725fbbcd48..1c6b05a79327f 100644
--- a/scripts/tasks/src/perf-task/perf-test.ts
+++ b/scripts/tasks/src/perf-task/perf-test.ts
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 
-import { workspaceRoot } from '@nrwl/devkit';
+import { workspaceRoot } from '@nx/devkit';
 import flamegrill, { CookResult, CookResults, ScenarioConfig, Scenarios } from 'flamegrill';
 
 import { getJustArgv as argv } from '../argv';
diff --git a/scripts/tasks/src/utils.spec.ts b/scripts/tasks/src/utils.spec.ts
index 84489ea9a4f4b..3f73775547e83 100644
--- a/scripts/tasks/src/utils.spec.ts
+++ b/scripts/tasks/src/utils.spec.ts
@@ -1,6 +1,6 @@
 import * as path from 'path';
 
-import { workspaceRoot } from '@nrwl/devkit';
+import { workspaceRoot } from '@nx/devkit';
 
 import { getTsPathAliasesApiExtractorConfig } from './utils';
 
diff --git a/scripts/tasks/src/utils.ts b/scripts/tasks/src/utils.ts
index c1af3d56e6b29..922683631a4cf 100644
--- a/scripts/tasks/src/utils.ts
+++ b/scripts/tasks/src/utils.ts
@@ -2,7 +2,7 @@ import { execSync } from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
 
-import { parseJson, stripJsonComments } from '@nrwl/devkit';
+import { parseJson, stripJsonComments } from '@nx/devkit';
 import type { TscTaskOptions } from 'just-scripts';
 
 /**
diff --git a/tools/.eslintrc.json b/tools/.eslintrc.json
deleted file mode 100644
index d02e703a7ca86..0000000000000
--- a/tools/.eslintrc.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": ["plugin:@fluentui/eslint-plugin/node"],
-  "root": true,
-  "rules": {
-    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../"] }],
-    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_", "argsIgnorePattern": "^_" }]
-  }
-}
diff --git a/tools/generators/react-library/lib/.gitkeep b/tools/generators/react-library/lib/.gitkeep
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/tools/jest.config.ts b/tools/jest.config.ts
deleted file mode 100644
index 3759017a3b81b..0000000000000
--- a/tools/jest.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-check
-
-/**
- * @type {import('@jest/types').Config.InitialOptions}
- */
-export default {
-  displayName: 'tools',
-  preset: '../jest.preset.js',
-  testPathIgnorePatterns: ['/node_modules/'],
-  transform: {
-    '^.+\\.tsx?$': [
-      'ts-jest',
-      {
-        diagnostics: false,
-        isolatedModules: true,
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-      },
-    ],
-  },
-  coverageDirectory: './coverage',
-};
diff --git a/tools/package.json b/tools/package.json
deleted file mode 100644
index 76c06188bc729..0000000000000
--- a/tools/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "@fluentui/nx-workspace-tools",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "test": "nx run @fluentui/nx-workspace-tools:test",
-    "lint": "nx run @fluentui/nx-workspace-tools:lint",
-    "type-check": "nx run @fluentui/nx-workspace-tools:type-check",
-    "check-graph": "nx run @fluentui/nx-workspace-tools:check-graph"
-  }
-}
diff --git a/tools/project.json b/tools/project.json
deleted file mode 100644
index e907b9fca65db..0000000000000
--- a/tools/project.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "name": "@fluentui/nx-workspace-tools",
-  "$schema": "../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "tools",
-  "projectType": "library",
-  "targets": {
-    "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/tools"],
-      "options": {
-        "jestConfig": "tools/jest.config.ts",
-        "passWithNoTests": true
-      }
-    },
-    "lint": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "eslint **/*.ts",
-        "cwd": "tools"
-      }
-    },
-    "type-check": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "tsc -b tools/tsconfig.json"
-      }
-    },
-    "check-graph": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "node ./tools/check-dep-graph.js"
-      }
-    }
-  },
-  "tags": []
-}
diff --git a/tools/tsconfig.lib.json b/tools/tsconfig.lib.json
deleted file mode 100644
index 9666fc29f9034..0000000000000
--- a/tools/tsconfig.lib.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "ES2015",
-    "outDir": "../dist/out-tsc",
-    "types": ["node"]
-  },
-  "exclude": ["**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
-  "include": ["**/*.ts"]
-}
diff --git a/tools/tsconfig.spec.json b/tools/tsconfig.spec.json
deleted file mode 100644
index 6e605fc25fc53..0000000000000
--- a/tools/tsconfig.spec.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "**/*.spec.js",
-    "**/*.test.js",
-    "**/*.spec.jsx",
-    "**/*.test.jsx",
-    "**/*.d.ts",
-    "jest.config.ts"
-  ]
-}
diff --git a/tools/tsconfig.tools.json b/tools/tsconfig.tools.json
deleted file mode 100644
index bd2e9b5c1364f..0000000000000
--- a/tools/tsconfig.tools.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "../dist/out-tsc/tools",
-    "rootDir": ".",
-    "module": "CommonJS",
-    "target": "ES2015",
-    "types": ["node"],
-    "importHelpers": false,
-    "downlevelIteration": true
-  },
-  "exclude": ["**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
-  "include": ["**/*.ts"]
-}
diff --git a/tools/workspace-plugin/.eslintrc.json b/tools/workspace-plugin/.eslintrc.json
new file mode 100644
index 0000000000000..96f0f958fca84
--- /dev/null
+++ b/tools/workspace-plugin/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+  "extends": ["plugin:@fluentui/eslint-plugin/node"],
+  "root": true,
+  "ignorePatterns": ["!**/*"],
+  "rules": {
+    "import/no-extraneous-dependencies": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_", "argsIgnorePattern": "^_" }]
+  },
+  "overrides": [
+    {
+      "files": "*.json",
+      "parser": "jsonc-eslint-parser",
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["./package.json", "./generators.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/nx-plugin-checks": "error"
+      }
+    }
+  ]
+}
diff --git a/tools/workspace-plugin/README.md b/tools/workspace-plugin/README.md
new file mode 100644
index 0000000000000..0b80962f9850c
--- /dev/null
+++ b/tools/workspace-plugin/README.md
@@ -0,0 +1,14 @@
+# @fluentui/workspace-plugin
+
+nx private monorepo plugin which contains:
+
+- generators
+- executors
+- migrations
+- other things...
+
+## Usage
+
+Run following to get all plugin functionality:
+
+`yarn nx list @fluentui/workspace-plugin`
diff --git a/tools/STYLE-GUIDE.md b/tools/workspace-plugin/STYLE-GUIDE.md
similarity index 98%
rename from tools/STYLE-GUIDE.md
rename to tools/workspace-plugin/STYLE-GUIDE.md
index 277c1c6e5fba9..8598c72ee3bf9 100644
--- a/tools/STYLE-GUIDE.md
+++ b/tools/workspace-plugin/STYLE-GUIDE.md
@@ -75,7 +75,7 @@ npx markdown-toc --bullets "-"  -i tools/generators/<generator-name>/README.md
 #### CLI:
 
 ```sh
-yarn nx workspace-generator workspace-generator
+yarn nx g @fluentui/workspace-plugin:workspace-generator
 ```
 
 #### Nx Console:
diff --git a/tools/workspace-plugin/generators.json b/tools/workspace-plugin/generators.json
new file mode 100644
index 0000000000000..96f5312e361db
--- /dev/null
+++ b/tools/workspace-plugin/generators.json
@@ -0,0 +1,84 @@
+{
+  "generators": {
+    "cypress-component-configuration": {
+      "implementation": "./src/generators/cypress-component-configuration/index.ts",
+      "schema": "./src/generators/cypress-component-configuration/schema.json",
+      "description": "Set up Cypress component test for a project."
+    },
+    "dependency-mismatch": {
+      "implementation": "./src/generators/dependency-mismatch/index.ts",
+      "schema": "./src/generators/dependency-mismatch/schema.json",
+      "description": "Generator dependency-mismatch"
+    },
+    "epic-generator": {
+      "implementation": "./src/generators/epic-generator/index.ts",
+      "schema": "./src/generators/epic-generator/schema.json",
+      "description": "Generator epic-generator"
+    },
+    "migrate-converged-pkg": {
+      "implementation": "./src/generators/migrate-converged-pkg/index.ts",
+      "schema": "./src/generators/migrate-converged-pkg/schema.json",
+      "description": "Generator migrate-converged-pkg"
+    },
+    "migrate-fixed-versions": {
+      "implementation": "./src/generators/migrate-fixed-versions/index.ts",
+      "schema": "./src/generators/migrate-fixed-versions/schema.json",
+      "description": "Generator migrate-fixed-versions"
+    },
+    "migrate-v8-pkg": {
+      "implementation": "./src/generators/migrate-v8-pkg/index.ts",
+      "schema": "./src/generators/migrate-v8-pkg/schema.json",
+      "description": "Generator migrate-v8-pkg"
+    },
+    "move-packages": {
+      "implementation": "./src/generators/move-packages/index.ts",
+      "schema": "./src/generators/move-packages/schema.json",
+      "description": "Generator move-packages"
+    },
+    "normalize-package-dependencies": {
+      "implementation": "./src/generators/normalize-package-dependencies/index.ts",
+      "schema": "./src/generators/normalize-package-dependencies/schema.json",
+      "description": "Generator normalize-package-dependencies"
+    },
+    "prepare-initial-release": {
+      "implementation": "./src/generators/prepare-initial-release/index.ts",
+      "schema": "./src/generators/prepare-initial-release/schema.json",
+      "description": "Generator prepare-initial-release"
+    },
+    "rc-caret": {
+      "implementation": "./src/generators/rc-caret/index.ts",
+      "schema": "./src/generators/rc-caret/schema.json",
+      "description": "Generator rc-caret"
+    },
+    "react-component": {
+      "implementation": "./src/generators/react-component/index.ts",
+      "schema": "./src/generators/react-component/schema.json",
+      "description": "Create React Component within v9 package"
+    },
+    "react-library": {
+      "implementation": "./src/generators/react-library/index.ts",
+      "schema": "./src/generators/react-library/schema.json",
+      "description": "Generator react-library"
+    },
+    "recipe-generator": {
+      "implementation": "./src/generators/recipe-generator/index.ts",
+      "schema": "./src/generators/recipe-generator/schema.json",
+      "description": "Generator recipe-generator"
+    },
+    "tsconfig-base-all": {
+      "implementation": "./src/generators/tsconfig-base-all/index.ts",
+      "schema": "./src/generators/tsconfig-base-all/schema.json",
+      "description": "Create tsconfig.json with merged 'compilerOptions.paths' from v0,v8,v9 tsconfigs"
+    },
+    "version-bump": {
+      "implementation": "./src/generators/version-bump/index.ts",
+      "schema": "./src/generators/version-bump/schema.json",
+      "description": "Generator version-bump"
+    },
+    "workspace-generator": {
+      "implementation": "./src/generators/workspace-generator/index.ts",
+      "schema": "./src/generators/workspace-generator/schema.json",
+      "description": "Generator workspace-generator"
+    }
+  }
+}
diff --git a/tools/workspace-plugin/jest.config.ts b/tools/workspace-plugin/jest.config.ts
new file mode 100644
index 0000000000000..cc41d6f58b725
--- /dev/null
+++ b/tools/workspace-plugin/jest.config.ts
@@ -0,0 +1,18 @@
+// @ts-check
+
+export default {
+  displayName: 'workspace-plugin',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': [
+      'ts-jest',
+      {
+        diagnostics: false,
+        isolatedModules: true,
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+      },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/tools/workspace-plugin',
+} as import('@jest/types').Config.InitialOptions;
diff --git a/tools/workspace-plugin/package.json b/tools/workspace-plugin/package.json
new file mode 100644
index 0000000000000..0ebcc845bda51
--- /dev/null
+++ b/tools/workspace-plugin/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@fluentui/workspace-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "commonjs",
+  "generators": "./generators.json",
+  "scripts": {
+    "test": "nx run @fluentui/workspace-plugin:test",
+    "type-check": "nx run @fluentui/workspace-plugin:type-check",
+    "lint": "nx run @fluentui/workspace-plugin:lint-old"
+  }
+}
diff --git a/tools/workspace-plugin/project.json b/tools/workspace-plugin/project.json
new file mode 100644
index 0000000000000..bf1831e6326ec
--- /dev/null
+++ b/tools/workspace-plugin/project.json
@@ -0,0 +1,74 @@
+{
+  "name": "@fluentui/workspace-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "tools/workspace-plugin/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/tools/workspace-plugin",
+        "main": "tools/workspace-plugin/src/index.ts",
+        "tsConfig": "tools/workspace-plugin/tsconfig.lib.json",
+        "assets": [
+          {
+            "input": "./tools/workspace-plugin/src",
+            "glob": "**/!(*.ts)",
+            "output": "./src"
+          },
+          {
+            "input": "./tools/workspace-plugin/src",
+            "glob": "**/*.d.ts",
+            "output": "./src"
+          },
+          {
+            "input": "./tools/workspace-plugin",
+            "glob": "generators.json",
+            "output": "."
+          },
+          {
+            "input": "./tools/workspace-plugin",
+            "glob": "executors.json",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "tools/workspace-plugin/**/*.ts",
+          "tools/workspace-plugin/package.json",
+          "tools/workspace-plugin/generators.json"
+        ]
+      }
+    },
+    "lint-old": {
+      "command": "eslint tools/workspace-plugin/**/*.ts"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "tools/workspace-plugin/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "type-check": {
+      "command": "tsc -b tools/workspace-plugin/tsconfig.json"
+    },
+    "check-graph": {
+      "command": "node ./tools/workspace-plugin/scripts/check-dep-graph.js"
+    }
+  },
+  "tags": ["platform:any", "tools"]
+}
diff --git a/tools/check-dep-graph.js b/tools/workspace-plugin/scripts/check-dep-graph.js
similarity index 65%
rename from tools/check-dep-graph.js
rename to tools/workspace-plugin/scripts/check-dep-graph.js
index 353f31ad8138f..1d67f301449e9 100644
--- a/tools/check-dep-graph.js
+++ b/tools/workspace-plugin/scripts/check-dep-graph.js
@@ -1,7 +1,8 @@
 // @ts-check
 
-const { stripIndents, logger } = require('@nrwl/devkit');
-const { createProjectGraphAsync } = require('@nrwl/workspace/src/core/project-graph');
+const fs = require('fs');
+const path = require('path');
+const { createProjectGraphAsync, stripIndents, logger } = require('@nx/devkit');
 
 main().catch(err => {
   logger.error(err);
@@ -14,8 +15,9 @@ main().catch(err => {
  */
 async function main() {
   const graph = await createProjectGraphAsync();
+  const workspacePluginConfig = JSON.parse(fs.readFileSync(path.join(__dirname, '../project.json'), 'utf-8'));
 
-  const toolsDeps = graph.dependencies['@fluentui/nx-workspace-tools'].reduce(
+  const toolsDeps = graph.dependencies[workspacePluginConfig.name].reduce(
     (acc, current) => {
       if (current.target.startsWith('npm:')) {
         acc.npm.push(current.target);
@@ -31,7 +33,7 @@ async function main() {
     throw new Error(
       stripIndents`🚨 Somethings wrong with dependency graph!
 
-       @fluentui/nx-workspace-tools should not rely on any libraries within monorepo, but it depends on:
+       ${workspacePluginConfig.name} should not rely on any libraries within monorepo, but it depends on:
         ${toolsDeps.own.map(depName => `- ${depName}`).join('\n')}`,
     );
   }
diff --git a/tools/generators/add-codeowners.spec.ts b/tools/workspace-plugin/src/generators/add-codeowners.spec.ts
similarity index 95%
rename from tools/generators/add-codeowners.spec.ts
rename to tools/workspace-plugin/src/generators/add-codeowners.spec.ts
index 2fa224a3c0c09..ba434c174c6ff 100644
--- a/tools/generators/add-codeowners.spec.ts
+++ b/tools/workspace-plugin/src/generators/add-codeowners.spec.ts
@@ -1,5 +1,5 @@
-import { Tree, addProjectConfiguration, stripIndents } from '@nrwl/devkit';
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { Tree, addProjectConfiguration, stripIndents } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { addCodeowner } from './add-codeowners';
 import { setupCodeowners } from '../utils-testing';
 import { workspacePaths } from '../utils';
diff --git a/tools/generators/add-codeowners.ts b/tools/workspace-plugin/src/generators/add-codeowners.ts
similarity index 91%
rename from tools/generators/add-codeowners.ts
rename to tools/workspace-plugin/src/generators/add-codeowners.ts
index dd148d7126b56..23357654e6a08 100644
--- a/tools/generators/add-codeowners.ts
+++ b/tools/workspace-plugin/src/generators/add-codeowners.ts
@@ -1,5 +1,5 @@
-import { applyChangesToString, Tree } from '@nrwl/devkit';
-import { joinPathFragments, StringChange, ChangeType } from '@nrwl/devkit';
+import { applyChangesToString, Tree } from '@nx/devkit';
+import { joinPathFragments, StringChange, ChangeType } from '@nx/devkit';
 
 import { getProjectConfig } from '../utils';
 
diff --git a/tools/generators/cypress-component-configuration/README.md b/tools/workspace-plugin/src/generators/cypress-component-configuration/README.md
similarity index 67%
rename from tools/generators/cypress-component-configuration/README.md
rename to tools/workspace-plugin/src/generators/cypress-component-configuration/README.md
index ebcbdfdbc4b6e..bbff023b3a0ef 100644
--- a/tools/generators/cypress-component-configuration/README.md
+++ b/tools/workspace-plugin/src/generators/cypress-component-configuration/README.md
@@ -14,19 +14,19 @@ Workspace Generator for setting up Cypress component testing for a project
 ## Usage
 
 ```sh
-yarn nx workspace-generator cypress-component-configuration ...
+yarn nx g @fluentui/workspace-plugin:cypress-component-configuration ...
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator cypress-component-configuration --dry-run
+yarn nx g @fluentui/workspace-plugin:cypress-component-configuration --dry-run
 ```
 
 ### Examples
 
 ```sh
-yarn nx workspace-generator cypress-component-configuration
+yarn nx g @fluentui/workspace-plugin:cypress-component-configuration
 ```
 
 ## Options
diff --git a/tools/generators/cypress-component-configuration/files/cypress.config.ts__tmpl__ b/tools/workspace-plugin/src/generators/cypress-component-configuration/files/cypress.config.ts__tmpl__
similarity index 100%
rename from tools/generators/cypress-component-configuration/files/cypress.config.ts__tmpl__
rename to tools/workspace-plugin/src/generators/cypress-component-configuration/files/cypress.config.ts__tmpl__
diff --git a/tools/generators/cypress-component-configuration/files/tsconfig.cy.json__tmpl__ b/tools/workspace-plugin/src/generators/cypress-component-configuration/files/tsconfig.cy.json__tmpl__
similarity index 100%
rename from tools/generators/cypress-component-configuration/files/tsconfig.cy.json__tmpl__
rename to tools/workspace-plugin/src/generators/cypress-component-configuration/files/tsconfig.cy.json__tmpl__
diff --git a/tools/generators/cypress-component-configuration/index.spec.ts b/tools/workspace-plugin/src/generators/cypress-component-configuration/index.spec.ts
similarity index 97%
rename from tools/generators/cypress-component-configuration/index.spec.ts
rename to tools/workspace-plugin/src/generators/cypress-component-configuration/index.spec.ts
index 8dc7b07043db3..3b3df304167b3 100644
--- a/tools/generators/cypress-component-configuration/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/cypress-component-configuration/index.spec.ts
@@ -6,8 +6,8 @@ import {
   readNxJson,
   serializeJson,
   Tree,
-} from '@nrwl/devkit';
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+} from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 
 import generator from './index';
 
diff --git a/tools/generators/cypress-component-configuration/index.ts b/tools/workspace-plugin/src/generators/cypress-component-configuration/index.ts
similarity index 94%
rename from tools/generators/cypress-component-configuration/index.ts
rename to tools/workspace-plugin/src/generators/cypress-component-configuration/index.ts
index a417f05307c1b..b07eb3622a98d 100644
--- a/tools/generators/cypress-component-configuration/index.ts
+++ b/tools/workspace-plugin/src/generators/cypress-component-configuration/index.ts
@@ -1,4 +1,4 @@
-import { Tree, formatFiles, names } from '@nrwl/devkit';
+import { Tree, formatFiles, names } from '@nx/devkit';
 
 import { getProjectConfig, printUserLogs, UserLog } from '../../utils';
 
diff --git a/tools/generators/cypress-component-configuration/lib/add-files.ts b/tools/workspace-plugin/src/generators/cypress-component-configuration/lib/add-files.ts
similarity index 68%
rename from tools/generators/cypress-component-configuration/lib/add-files.ts
rename to tools/workspace-plugin/src/generators/cypress-component-configuration/lib/add-files.ts
index 8eca64ec75745..eb02223b566a4 100644
--- a/tools/generators/cypress-component-configuration/lib/add-files.ts
+++ b/tools/workspace-plugin/src/generators/cypress-component-configuration/lib/add-files.ts
@@ -1,27 +1,10 @@
-import { stripIndents, Tree, updateJson, generateFiles, joinPathFragments } from '@nrwl/devkit';
+import { Tree, updateJson, generateFiles, joinPathFragments } from '@nx/devkit';
 import * as path from 'path';
 
 import { PackageJson, TsConfig } from '../../../types';
 import { getProjectConfig } from '../../../utils';
 import { uniqueArray } from './utils';
 
-const templates = {
-  config: stripIndents`
-    import { baseConfig } from '@fluentui/scripts-cypress';
-
-    export default baseConfig;
-  `,
-  tsconfig: {
-    extends: './tsconfig.json',
-    compilerOptions: {
-      isolatedModules: false,
-      types: ['node', 'cypress', 'cypress-storybook/cypress', 'cypress-real-events'],
-      lib: ['ES2019', 'dom'],
-    },
-    include: ['**/*.cy.ts', '**/*.cy.tsx'],
-  },
-};
-
 type Options = ReturnType<typeof getProjectConfig>;
 
 export function addFiles(tree: Tree, options: Options) {
diff --git a/tools/generators/cypress-component-configuration/lib/utils.spec.ts b/tools/workspace-plugin/src/generators/cypress-component-configuration/lib/utils.spec.ts
similarity index 100%
rename from tools/generators/cypress-component-configuration/lib/utils.spec.ts
rename to tools/workspace-plugin/src/generators/cypress-component-configuration/lib/utils.spec.ts
diff --git a/tools/generators/cypress-component-configuration/lib/utils.ts b/tools/workspace-plugin/src/generators/cypress-component-configuration/lib/utils.ts
similarity index 100%
rename from tools/generators/cypress-component-configuration/lib/utils.ts
rename to tools/workspace-plugin/src/generators/cypress-component-configuration/lib/utils.ts
diff --git a/tools/generators/cypress-component-configuration/schema.json b/tools/workspace-plugin/src/generators/cypress-component-configuration/schema.json
similarity index 100%
rename from tools/generators/cypress-component-configuration/schema.json
rename to tools/workspace-plugin/src/generators/cypress-component-configuration/schema.json
diff --git a/tools/generators/cypress-component-configuration/schema.ts b/tools/workspace-plugin/src/generators/cypress-component-configuration/schema.ts
similarity index 100%
rename from tools/generators/cypress-component-configuration/schema.ts
rename to tools/workspace-plugin/src/generators/cypress-component-configuration/schema.ts
diff --git a/tools/generators/dependency-mismatch/README.md b/tools/workspace-plugin/src/generators/dependency-mismatch/README.md
similarity index 85%
rename from tools/generators/dependency-mismatch/README.md
rename to tools/workspace-plugin/src/generators/dependency-mismatch/README.md
index c5b90fdc01188..9c7354aacffd2 100644
--- a/tools/generators/dependency-mismatch/README.md
+++ b/tools/workspace-plugin/src/generators/dependency-mismatch/README.md
@@ -61,17 +61,17 @@ After running generator:
 ## Usage
 
 ```sh
-yarn nx workspace-generator dependency-mismatch
+yarn nx g @fluentui/workspace-plugin:dependency-mismatch
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator dependency-mismatch --dry-run
+yarn nx g @fluentui/workspace-plugin:dependency-mismatch --dry-run
 ```
 
 ### Examples
 
 ```sh
-yarn nx workspace-generator dependency-mismatch
+yarn nx g @fluentui/workspace-plugin:dependency-mismatch
 ```
diff --git a/tools/generators/dependency-mismatch/index.spec.ts b/tools/workspace-plugin/src/generators/dependency-mismatch/index.spec.ts
similarity index 98%
rename from tools/generators/dependency-mismatch/index.spec.ts
rename to tools/workspace-plugin/src/generators/dependency-mismatch/index.spec.ts
index 77e4ee9c763bd..80a58af939987 100644
--- a/tools/generators/dependency-mismatch/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/dependency-mismatch/index.spec.ts
@@ -1,5 +1,5 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-import { Tree, addProjectConfiguration, readNxJson, readJson, writeJson } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { Tree, addProjectConfiguration, readNxJson, readJson, writeJson } from '@nx/devkit';
 
 import generator from './index';
 import { PackageJson } from '../../types';
diff --git a/tools/generators/dependency-mismatch/index.ts b/tools/workspace-plugin/src/generators/dependency-mismatch/index.ts
similarity index 100%
rename from tools/generators/dependency-mismatch/index.ts
rename to tools/workspace-plugin/src/generators/dependency-mismatch/index.ts
diff --git a/tools/generators/dependency-mismatch/schema.json b/tools/workspace-plugin/src/generators/dependency-mismatch/schema.json
similarity index 100%
rename from tools/generators/dependency-mismatch/schema.json
rename to tools/workspace-plugin/src/generators/dependency-mismatch/schema.json
diff --git a/tools/generators/dependency-mismatch/schema.ts b/tools/workspace-plugin/src/generators/dependency-mismatch/schema.ts
similarity index 100%
rename from tools/generators/dependency-mismatch/schema.ts
rename to tools/workspace-plugin/src/generators/dependency-mismatch/schema.ts
diff --git a/tools/generators/epic-generator/README.md b/tools/workspace-plugin/src/generators/epic-generator/README.md
similarity index 81%
rename from tools/generators/epic-generator/README.md
rename to tools/workspace-plugin/src/generators/epic-generator/README.md
index df793a938b92c..eee461425f7c1 100644
--- a/tools/generators/epic-generator/README.md
+++ b/tools/workspace-plugin/src/generators/epic-generator/README.md
@@ -16,7 +16,7 @@ Workspace Generator for creating a migration tracker issue epic and subsequent t
 ## Usage
 
 ```sh
-yarn nx workspace-generator epic-generator ...
+yarn nx g @fluentui/workspace-plugin:epic-generator ...
 ```
 
 ### Examples
@@ -24,7 +24,7 @@ yarn nx workspace-generator epic-generator ...
 Create an epic and sub-issues on the `microsoft/fluentui` repository with the title `Migrate vNext packages`.
 
 ```sh
-yarn nx workspace-generator epic-generator --repository="microsoft/fluentui" --title="Migrate vNext packages"
+yarn nx g @fluentui/workspace-plugin:epic-generator --repository="microsoft/fluentui" --title="Migrate vNext packages"
 ```
 
 ## Options
diff --git a/tools/generators/epic-generator/index.spec.ts b/tools/workspace-plugin/src/generators/epic-generator/index.spec.ts
similarity index 98%
rename from tools/generators/epic-generator/index.spec.ts
rename to tools/workspace-plugin/src/generators/epic-generator/index.spec.ts
index 338b737321f8e..f4ab26a32488b 100644
--- a/tools/generators/epic-generator/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/epic-generator/index.spec.ts
@@ -1,5 +1,5 @@
-import { addProjectConfiguration, ProjectType, stripIndents, writeJson } from '@nrwl/devkit';
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { addProjectConfiguration, ProjectType, stripIndents, writeJson } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { execSync, spawnSync, SpawnSyncReturns } from 'child_process';
 import { workspacePaths } from '../../utils';
 import epicGenerator from './index';
diff --git a/tools/generators/epic-generator/index.ts b/tools/workspace-plugin/src/generators/epic-generator/index.ts
similarity index 98%
rename from tools/generators/epic-generator/index.ts
rename to tools/workspace-plugin/src/generators/epic-generator/index.ts
index 9bc8ebf87bc23..f689f17f0c552 100644
--- a/tools/generators/epic-generator/index.ts
+++ b/tools/workspace-plugin/src/generators/epic-generator/index.ts
@@ -1,4 +1,4 @@
-import { getProjects, stripIndents, Tree } from '@nrwl/devkit';
+import { getProjects, stripIndents, Tree } from '@nx/devkit';
 import { execSync, spawnSync } from 'child_process';
 import { EpicGenerator } from './schema';
 import { isPackageConverged, workspacePaths } from '../../utils';
diff --git a/tools/generators/epic-generator/schema.json b/tools/workspace-plugin/src/generators/epic-generator/schema.json
similarity index 100%
rename from tools/generators/epic-generator/schema.json
rename to tools/workspace-plugin/src/generators/epic-generator/schema.json
diff --git a/tools/generators/epic-generator/schema.ts b/tools/workspace-plugin/src/generators/epic-generator/schema.ts
similarity index 100%
rename from tools/generators/epic-generator/schema.ts
rename to tools/workspace-plugin/src/generators/epic-generator/schema.ts
diff --git a/tools/generators/generate-change-file.spec.ts b/tools/workspace-plugin/src/generators/generate-change-file.spec.ts
similarity index 96%
rename from tools/generators/generate-change-file.spec.ts
rename to tools/workspace-plugin/src/generators/generate-change-file.spec.ts
index 49f640254c105..6ab248957567a 100644
--- a/tools/generators/generate-change-file.spec.ts
+++ b/tools/workspace-plugin/src/generators/generate-change-file.spec.ts
@@ -1,4 +1,4 @@
-import { logger } from '@nrwl/devkit';
+import { logger } from '@nx/devkit';
 import * as chalk from 'chalk';
 
 import { disableChalk, formatMockedCalls } from '../utils-testing';
diff --git a/tools/generators/generate-change-files.ts b/tools/workspace-plugin/src/generators/generate-change-files.ts
similarity index 97%
rename from tools/generators/generate-change-files.ts
rename to tools/workspace-plugin/src/generators/generate-change-files.ts
index 84b8a621735bc..b61a45e381ed9 100644
--- a/tools/generators/generate-change-files.ts
+++ b/tools/workspace-plugin/src/generators/generate-change-files.ts
@@ -1,4 +1,4 @@
-import { Tree, logger } from '@nrwl/devkit';
+import { Tree, logger } from '@nx/devkit';
 import * as path from 'path';
 import * as childProcess from 'child_process';
 import * as chalk from 'chalk';
diff --git a/tools/generators/migrate-converged-pkg/README.md b/tools/workspace-plugin/src/generators/migrate-converged-pkg/README.md
similarity index 73%
rename from tools/generators/migrate-converged-pkg/README.md
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/README.md
index bc860c20fd6c1..e27b6405d24ec 100644
--- a/tools/generators/migrate-converged-pkg/README.md
+++ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/README.md
@@ -17,13 +17,13 @@ Workspace Generator for migrating converged packages to new DX (stage 1)[https:/
 ## Usage
 
 ```sh
-yarn nx workspace-generator migrate-converged-pkg ...
+yarn nx g @fluentui/workspace-plugin:migrate-converged-pkg ...
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator migrate-converged-pkg --dry-run
+yarn nx g @fluentui/workspace-plugin:migrate-converged-pkg --dry-run
 ```
 
 ### Examples
@@ -31,13 +31,13 @@ yarn nx workspace-generator migrate-converged-pkg --dry-run
 Run migration on package named `@fluentui/example`
 
 ```sh
-yarn nx workspace-generator migrate-converged-pkg --name='@fluentui/example'
+yarn nx g @fluentui/workspace-plugin:migrate-converged-pkg --name='@fluentui/example'
 ```
 
 Run migration on all vNext packages
 
 ```sh
-yarn nx workspace-generator migrate-converged-pkg --all
+yarn nx g @fluentui/workspace-plugin:migrate-converged-pkg --all
 ```
 
 Get migration stats for how many packages have been migrated yet.
@@ -45,7 +45,7 @@ Get migration stats for how many packages have been migrated yet.
 > No actual migration will happen.
 
 ```sh
-yarn nx workspace-generator migrate-converged-pkg --stats
+yarn nx g @fluentui/workspace-plugin:migrate-converged-pkg --stats
 ```
 
 ## Options
@@ -67,7 +67,7 @@ To run migration on multiple packages you can specify a comma separated list of
 # - @fluentui/lib-zero
 # - @fluentui/lib-one
 # - @fluentui/lib-two
-yarn nx workspace-generator migrate-converged-pkg --name='@fluentui/lib-zero,@fluentui/lib-one,@fluentui/lib-two'
+yarn nx g @fluentui/workspace-plugin:migrate-converged-pkg --name='@fluentui/lib-zero,@fluentui/lib-one,@fluentui/lib-two'
 ```
 
 #### `owner`
diff --git a/tools/generators/migrate-converged-pkg/__fixtures__/conformance-setup.ts__tmpl__ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/__fixtures__/conformance-setup.ts__tmpl__
similarity index 100%
rename from tools/generators/migrate-converged-pkg/__fixtures__/conformance-setup.ts__tmpl__
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/__fixtures__/conformance-setup.ts__tmpl__
diff --git a/tools/generators/migrate-converged-pkg/__fixtures__/just-config.ts__tmpl__ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/__fixtures__/just-config.ts__tmpl__
similarity index 100%
rename from tools/generators/migrate-converged-pkg/__fixtures__/just-config.ts__tmpl__
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/__fixtures__/just-config.ts__tmpl__
diff --git a/tools/generators/migrate-converged-pkg/__fixtures__/old-jest-config.js__tmpl__ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/__fixtures__/old-jest-config.js__tmpl__
similarity index 100%
rename from tools/generators/migrate-converged-pkg/__fixtures__/old-jest-config.js__tmpl__
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/__fixtures__/old-jest-config.js__tmpl__
diff --git a/tools/generators/migrate-converged-pkg/__fixtures__/ts-ignore-story.ts__tmpl__ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/__fixtures__/ts-ignore-story.ts__tmpl__
similarity index 100%
rename from tools/generators/migrate-converged-pkg/__fixtures__/ts-ignore-story.ts__tmpl__
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/__fixtures__/ts-ignore-story.ts__tmpl__
diff --git a/tools/generators/migrate-converged-pkg/__snapshots__/index.spec.ts.snap b/tools/workspace-plugin/src/generators/migrate-converged-pkg/__snapshots__/index.spec.ts.snap
similarity index 100%
rename from tools/generators/migrate-converged-pkg/__snapshots__/index.spec.ts.snap
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/__snapshots__/index.spec.ts.snap
diff --git a/tools/generators/.gitkeep b/tools/workspace-plugin/src/generators/migrate-converged-pkg/files/.gitkeep
similarity index 100%
rename from tools/generators/.gitkeep
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/files/.gitkeep
diff --git a/tools/generators/migrate-converged-pkg/files/just-config.ts__tmpl__ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/files/just-config.ts__tmpl__
similarity index 100%
rename from tools/generators/migrate-converged-pkg/files/just-config.ts__tmpl__
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/files/just-config.ts__tmpl__
diff --git a/tools/generators/migrate-converged-pkg/index.spec.ts b/tools/workspace-plugin/src/generators/migrate-converged-pkg/index.spec.ts
similarity index 98%
rename from tools/generators/migrate-converged-pkg/index.spec.ts
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/index.spec.ts
index f59aa004c3102..2b94ab0ed4c11 100644
--- a/tools/generators/migrate-converged-pkg/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/index.spec.ts
@@ -2,7 +2,7 @@ import * as Enquirer from 'enquirer';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as chalk from 'chalk';
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import {
   Tree,
   readProjectConfiguration,
@@ -20,7 +20,7 @@ import {
   WorkspaceConfiguration,
   ProjectConfiguration,
   joinPathFragments,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 
 import { PackageJson, TsConfig } from '../../types';
 import { disableChalk, formatMockedCalls, setupCodeowners } from '../../utils-testing';
@@ -76,7 +76,7 @@ describe('migrate-converged-pkg generator', () => {
       dependencies: {
         '@proj/make-styles': '^9.0.0-alpha.1',
       },
-      tsConfig: { extends: '../../tsconfig.base.json', compilerOptions: {}, include: ['src'] },
+      tsConfig: { extends: '../../../../tsconfig.base.json', compilerOptions: {}, include: ['src'] },
       projectConfiguration: { tags: ['vNext', 'platform:node'], sourceRoot: 'packages/babel-make-styles/src' },
     });
   });
@@ -230,7 +230,7 @@ describe('migrate-converged-pkg generator', () => {
       expect(tsConfigMain).toEqual({
         compilerOptions: {
           baseUrl: '.',
-          typeRoots: ['../../node_modules/@types', '../../typings'],
+          typeRoots: ['../../../../node_modules/@types', '../../../../typings'],
         },
       });
       expect(tree.exists(paths.lib)).toBeFalsy();
@@ -243,7 +243,7 @@ describe('migrate-converged-pkg generator', () => {
       const tsConfigTest = getTsConfig.test();
 
       expect(tsConfigMain).toEqual({
-        extends: '../../../tsconfig.base.json',
+        extends: '../../../../../tsconfig.base.json',
         compilerOptions: {
           importHelpers: true,
           isolatedModules: true,
@@ -439,7 +439,7 @@ describe('migrate-converged-pkg generator', () => {
          */
         module.exports = {
           displayName: 'react-dummy',
-          preset: '../../../jest.preset.js',
+          preset: '../../../../../jest.preset.js',
           transform: {
             '^.+\\\\\\\\.tsx?$': [
               'ts-jest',
@@ -585,10 +585,10 @@ describe('migrate-converged-pkg generator', () => {
       );
 
       expect(tree.read(`${projectStorybookConfigPath}/main.js`)?.toString('utf-8')).toMatchInlineSnapshot(`
-        "const rootMain = require('../../../../.storybook/main');
+        "const rootMain = require('../../../../../../.storybook/main');
 
         module.exports =
-          /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+          /** @type {Omit<import('../../../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
             ...rootMain,
             stories: [
               ...rootMain.stories,
@@ -608,7 +608,7 @@ describe('migrate-converged-pkg generator', () => {
       `);
 
       expect(tree.read(`${projectStorybookConfigPath}/preview.js`)?.toString('utf-8')).toMatchInlineSnapshot(`
-        "import * as rootPreview from '../../../../.storybook/preview';
+        "import * as rootPreview from '../../../../../../.storybook/preview';
 
         /** @type {typeof rootPreview.decorators} */
         export const decorators = [...rootPreview.decorators];
@@ -737,7 +737,7 @@ describe('migrate-converged-pkg generator', () => {
 
       function createCypressSetup() {
         writeJson<TsConfig>(tree, paths.tsconfig.cypress, {
-          extends: '../../tsconfig.base.json',
+          extends: '../../../../tsconfig.base.json',
           compilerOptions: {},
         });
         tree.write(
@@ -1176,7 +1176,7 @@ describe('migrate-converged-pkg generator', () => {
       let babelConfig = getBabelConfig(projectConfig);
 
       expect(babelConfig).toEqual({
-        extends: '../../.babelrc-v9.json',
+        extends: '../../../../.babelrc-v9.json',
         plugins: ['annotate-pure-calls', '@babel/transform-react-pure-annotations'],
       });
 
@@ -1561,10 +1561,12 @@ function setupDummyPackage(
       someThirdPartyDep: '^11.1.2',
     },
     babelConfig: {
-      extends: '../../.babelrc-v9.json',
+      extends: '../../../../.babelrc-v9.json',
       plugins: ['annotate-pure-calls', '@babel/transform-react-pure-annotations'],
     },
-    tsConfig: { compilerOptions: { baseUrl: '.', typeRoots: ['../../node_modules/@types', '../../typings'] } },
+    tsConfig: {
+      compilerOptions: { baseUrl: '.', typeRoots: ['../../../../node_modules/@types', '../../../../typings'] },
+    },
   };
 
   const normalizedOptions = { ...defaults, ...options };
@@ -1692,7 +1694,7 @@ function addUnstableSetup(tree: Tree, projectConfig: ReadProjectConfiguration) {
     sideEffects: false,
     license: 'MIT',
   });
-  writeJson(tree, `${unstableRootPath}/tsconfig.json`, { extends: '../../tsconfig.json', include: ['index.ts'] });
+  writeJson(tree, `${unstableRootPath}/tsconfig.json`, { extends: '../../../../tsconfig.json', include: ['index.ts'] });
 
   tree.write(
     `${unstableRootPath}/index.ts`,
diff --git a/tools/generators/migrate-converged-pkg/index.ts b/tools/workspace-plugin/src/generators/migrate-converged-pkg/index.ts
similarity index 98%
rename from tools/generators/migrate-converged-pkg/index.ts
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/index.ts
index bb8993c049ea7..978052b4b934d 100644
--- a/tools/generators/migrate-converged-pkg/index.ts
+++ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/index.ts
@@ -15,7 +15,7 @@ import {
   applyChangesToString,
   ChangeType,
   readNxJson,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 import * as path from 'path';
 import * as os from 'os';
 import * as ts from 'typescript';
@@ -187,7 +187,7 @@ const templates = {
     return {
       main: () => {
         const tsConfig = {
-          extends: '../../../tsconfig.base.json',
+          extends: '../../../../../tsconfig.base.json',
           compilerOptions: {
             target: 'ES2019',
             // by default we gonna use tsc for type checking only
@@ -303,7 +303,7 @@ const templates = {
       */
       module.exports = {
         displayName: '${options.pkgName}',
-        preset: '../../../jest.preset.js',
+        preset: '../../../../../jest.preset.js',
         transform: {
           '^.+\\.tsx?$': [
             'ts-jest',
@@ -320,9 +320,9 @@ const templates = {
   `,
   storybook: {
     main: stripIndents`
-      const rootMain = require('../../../../.storybook/main');
+      const rootMain = require('../../../../../../.storybook/main');
 
-      module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+      module.exports = /** @type {Omit<import('../../../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
         ...rootMain,
         stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'],
         addons: [...rootMain.addons],
@@ -336,7 +336,7 @@ const templates = {
       });
     `,
     preview: stripIndents`
-      import * as rootPreview from '../../../../.storybook/preview';
+      import * as rootPreview from '../../../../../../.storybook/preview';
 
       /** @type {typeof rootPreview.decorators} */
       export const decorators = [...rootPreview.decorators];
diff --git a/tools/generators/migrate-converged-pkg/lib/__fixtures__/utils-hello-substitute.ts__tmpl__ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/lib/__fixtures__/utils-hello-substitute.ts__tmpl__
similarity index 100%
rename from tools/generators/migrate-converged-pkg/lib/__fixtures__/utils-hello-substitute.ts__tmpl__
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/lib/__fixtures__/utils-hello-substitute.ts__tmpl__
diff --git a/tools/generators/migrate-converged-pkg/lib/__fixtures__/utils-hello.ts__tmpl__ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/lib/__fixtures__/utils-hello.ts__tmpl__
similarity index 100%
rename from tools/generators/migrate-converged-pkg/lib/__fixtures__/utils-hello.ts__tmpl__
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/lib/__fixtures__/utils-hello.ts__tmpl__
diff --git a/tools/generators/migrate-converged-pkg/lib/utils.spec.ts b/tools/workspace-plugin/src/generators/migrate-converged-pkg/lib/utils.spec.ts
similarity index 94%
rename from tools/generators/migrate-converged-pkg/lib/utils.spec.ts
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/lib/utils.spec.ts
index af24708302c56..ed99c650de987 100644
--- a/tools/generators/migrate-converged-pkg/lib/utils.spec.ts
+++ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/lib/utils.spec.ts
@@ -1,4 +1,4 @@
-import { stripIndents } from '@nrwl/devkit';
+import { stripIndents } from '@nx/devkit';
 import path = require('path/posix');
 import { getTemplate } from './utils';
 describe(`utils`, () => {
diff --git a/tools/generators/migrate-converged-pkg/lib/utils.ts b/tools/workspace-plugin/src/generators/migrate-converged-pkg/lib/utils.ts
similarity index 86%
rename from tools/generators/migrate-converged-pkg/lib/utils.ts
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/lib/utils.ts
index d3d6bb27d6810..387fdebe5e2cc 100644
--- a/tools/generators/migrate-converged-pkg/lib/utils.ts
+++ b/tools/workspace-plugin/src/generators/migrate-converged-pkg/lib/utils.ts
@@ -1,8 +1,8 @@
-import { logger } from '@nrwl/devkit';
+import { logger } from '@nx/devkit';
 import * as ejs from 'ejs';
 import * as fs from 'fs';
 /**
- * Similar to @nrwl/devkit#generateFiles function but for getting content only
+ * Similar to @nx/devkit#generateFiles function but for getting content only
  *
  * @param src - the source folder of files (absolute path)
  * @param substitutions - an object of key-value pairs
diff --git a/tools/generators/migrate-converged-pkg/schema.json b/tools/workspace-plugin/src/generators/migrate-converged-pkg/schema.json
similarity index 100%
rename from tools/generators/migrate-converged-pkg/schema.json
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/schema.json
diff --git a/tools/generators/migrate-converged-pkg/schema.ts b/tools/workspace-plugin/src/generators/migrate-converged-pkg/schema.ts
similarity index 100%
rename from tools/generators/migrate-converged-pkg/schema.ts
rename to tools/workspace-plugin/src/generators/migrate-converged-pkg/schema.ts
diff --git a/tools/generators/migrate-fixed-versions/README.md b/tools/workspace-plugin/src/generators/migrate-fixed-versions/README.md
similarity index 75%
rename from tools/generators/migrate-fixed-versions/README.md
rename to tools/workspace-plugin/src/generators/migrate-fixed-versions/README.md
index 431241a644b24..7c51d65217d5c 100644
--- a/tools/generators/migrate-fixed-versions/README.md
+++ b/tools/workspace-plugin/src/generators/migrate-fixed-versions/README.md
@@ -21,13 +21,13 @@ Workspace Generator for migrating converged package dependencies from carets to
 ## Usage
 
 ```sh
-yarn nx workspace-generator migrate-fixed-versions ...
+yarn nx g @fluentui/workspace-plugin:migrate-fixed-versions ...
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator migrate-fixed-versions --dry-run
+yarn nx g @fluentui/workspace-plugin:migrate-fixed-versions --dry-run
 ```
 
 ### Examples
@@ -35,13 +35,13 @@ yarn nx workspace-generator migrate-fixed-versions --dry-run
 Run migration on package named `@fluentui/example`
 
 ```sh
-yarn nx workspace-generator migrate-fixed-versions --name='@fluentui/example'
+yarn nx g @fluentui/workspace-plugin:migrate-fixed-versions --name='@fluentui/example'
 ```
 
 Run migration on all vNext web packages
 
 ```sh
-yarn nx workspace-generator migrate-fixed-versions --all
+yarn nx g @fluentui/workspace-plugin:migrate-fixed-versions --all
 ```
 
 ## Options
diff --git a/tools/generators/migrate-fixed-versions/index.spec.ts b/tools/workspace-plugin/src/generators/migrate-fixed-versions/index.spec.ts
similarity index 98%
rename from tools/generators/migrate-fixed-versions/index.spec.ts
rename to tools/workspace-plugin/src/generators/migrate-fixed-versions/index.spec.ts
index 2385472957f06..bce07bf39b959 100644
--- a/tools/generators/migrate-fixed-versions/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/migrate-fixed-versions/index.spec.ts
@@ -1,4 +1,4 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import {
   Tree,
   readProjectConfiguration,
@@ -6,7 +6,7 @@ import {
   serializeJson,
   addProjectConfiguration,
   readJson,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 
 import generator from './index';
 import { MigrateFixedVersionsGeneratorSchema } from './schema';
diff --git a/tools/generators/migrate-fixed-versions/index.ts b/tools/workspace-plugin/src/generators/migrate-fixed-versions/index.ts
similarity index 99%
rename from tools/generators/migrate-fixed-versions/index.ts
rename to tools/workspace-plugin/src/generators/migrate-fixed-versions/index.ts
index a951eda9e1a2b..7c12f2a76964e 100644
--- a/tools/generators/migrate-fixed-versions/index.ts
+++ b/tools/workspace-plugin/src/generators/migrate-fixed-versions/index.ts
@@ -1,4 +1,4 @@
-import { Tree, updateJson, getProjects, formatFiles, readJson } from '@nrwl/devkit';
+import { Tree, updateJson, getProjects, formatFiles, readJson } from '@nx/devkit';
 import { MigrateFixedVersionsGeneratorSchema } from './schema';
 import { getProjectConfig, printUserLogs, UserLog } from '../../utils';
 import { PackageJson } from '../../types';
diff --git a/tools/generators/migrate-fixed-versions/schema.json b/tools/workspace-plugin/src/generators/migrate-fixed-versions/schema.json
similarity index 100%
rename from tools/generators/migrate-fixed-versions/schema.json
rename to tools/workspace-plugin/src/generators/migrate-fixed-versions/schema.json
diff --git a/tools/generators/migrate-fixed-versions/schema.ts b/tools/workspace-plugin/src/generators/migrate-fixed-versions/schema.ts
similarity index 100%
rename from tools/generators/migrate-fixed-versions/schema.ts
rename to tools/workspace-plugin/src/generators/migrate-fixed-versions/schema.ts
diff --git a/tools/generators/migrate-v8-pkg/README.md b/tools/workspace-plugin/src/generators/migrate-v8-pkg/README.md
similarity index 65%
rename from tools/generators/migrate-v8-pkg/README.md
rename to tools/workspace-plugin/src/generators/migrate-v8-pkg/README.md
index e1b786b8a2628..cf6a7ae8f0365 100644
--- a/tools/generators/migrate-v8-pkg/README.md
+++ b/tools/workspace-plugin/src/generators/migrate-v8-pkg/README.md
@@ -14,19 +14,19 @@ Workspace Generator ...TODO...
 ## Usage
 
 ```sh
-yarn nx workspace-generator migrate-v8-pkg ...
+yarn nx g @fluentui/workspace-plugin:migrate-v8-pkg ...
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator migrate-v8-pkg --dry-run
+yarn nx g @fluentui/workspace-plugin:migrate-v8-pkg --dry-run
 ```
 
 ### Examples
 
 ```sh
-yarn nx workspace-generator migrate-v8-pkg
+yarn nx g @fluentui/workspace-plugin:migrate-v8-pkg
 ```
 
 ## Options
diff --git a/tools/generators/migrate-v8-pkg/index.spec.ts b/tools/workspace-plugin/src/generators/migrate-v8-pkg/index.spec.ts
similarity index 98%
rename from tools/generators/migrate-v8-pkg/index.spec.ts
rename to tools/workspace-plugin/src/generators/migrate-v8-pkg/index.spec.ts
index 717e722151696..8fd0790d490b7 100644
--- a/tools/generators/migrate-v8-pkg/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/migrate-v8-pkg/index.spec.ts
@@ -1,4 +1,4 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import {
   Tree,
   readProjectConfiguration,
@@ -9,7 +9,7 @@ import {
   logger,
   readNxJson,
   NxJsonConfiguration,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 import type { Linter } from 'eslint';
 
 import type { TsConfig } from '../../types';
@@ -178,7 +178,7 @@ function setupDummyPackage(
         declaration: true,
         sourceMap: true,
         lib: ['es5', 'dom', 'es2015.promise'],
-        typeRoots: ['../../node_modules/@types', '../../typings'],
+        typeRoots: ['../../../../node_modules/@types', '../../../../typings'],
         types: ['jest', 'custom-global'],
       },
       include: ['src'],
diff --git a/tools/generators/migrate-v8-pkg/index.ts b/tools/workspace-plugin/src/generators/migrate-v8-pkg/index.ts
similarity index 99%
rename from tools/generators/migrate-v8-pkg/index.ts
rename to tools/workspace-plugin/src/generators/migrate-v8-pkg/index.ts
index 5882a56b39b6b..652c4008fcac6 100644
--- a/tools/generators/migrate-v8-pkg/index.ts
+++ b/tools/workspace-plugin/src/generators/migrate-v8-pkg/index.ts
@@ -10,7 +10,7 @@ import {
   ProjectConfiguration,
   stripIndents,
   updateProjectConfiguration,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 
 import { printStats } from '../print-stats';
 
diff --git a/tools/generators/migrate-v8-pkg/lib/utils.spec.ts b/tools/workspace-plugin/src/generators/migrate-v8-pkg/lib/utils.spec.ts
similarity index 95%
rename from tools/generators/migrate-v8-pkg/lib/utils.spec.ts
rename to tools/workspace-plugin/src/generators/migrate-v8-pkg/lib/utils.spec.ts
index d3c9d3ac17cb8..e1bb07a1660ed 100644
--- a/tools/generators/migrate-v8-pkg/lib/utils.spec.ts
+++ b/tools/workspace-plugin/src/generators/migrate-v8-pkg/lib/utils.spec.ts
@@ -1,4 +1,4 @@
-import { stripIndents } from '@nrwl/devkit';
+import { stripIndents } from '@nx/devkit';
 import { getCjsConfigObjectAst, getASTconfigObjectProp } from './utils';
 
 describe(`utils`, () => {
diff --git a/tools/generators/migrate-v8-pkg/lib/utils.ts b/tools/workspace-plugin/src/generators/migrate-v8-pkg/lib/utils.ts
similarity index 97%
rename from tools/generators/migrate-v8-pkg/lib/utils.ts
rename to tools/workspace-plugin/src/generators/migrate-v8-pkg/lib/utils.ts
index b6c631165941d..72bc9420a1840 100644
--- a/tools/generators/migrate-v8-pkg/lib/utils.ts
+++ b/tools/workspace-plugin/src/generators/migrate-v8-pkg/lib/utils.ts
@@ -1,4 +1,4 @@
-import { stripIndents } from '@nrwl/devkit';
+import { stripIndents } from '@nx/devkit';
 import * as ts from 'typescript';
 
 /**
diff --git a/tools/generators/migrate-v8-pkg/schema.json b/tools/workspace-plugin/src/generators/migrate-v8-pkg/schema.json
similarity index 100%
rename from tools/generators/migrate-v8-pkg/schema.json
rename to tools/workspace-plugin/src/generators/migrate-v8-pkg/schema.json
diff --git a/tools/generators/migrate-v8-pkg/schema.ts b/tools/workspace-plugin/src/generators/migrate-v8-pkg/schema.ts
similarity index 100%
rename from tools/generators/migrate-v8-pkg/schema.ts
rename to tools/workspace-plugin/src/generators/migrate-v8-pkg/schema.ts
diff --git a/tools/generators/move-packages/README.md b/tools/workspace-plugin/src/generators/move-packages/README.md
similarity index 76%
rename from tools/generators/move-packages/README.md
rename to tools/workspace-plugin/src/generators/move-packages/README.md
index a015a198ced9e..9463b2a2d9509 100644
--- a/tools/generators/move-packages/README.md
+++ b/tools/workspace-plugin/src/generators/move-packages/README.md
@@ -21,13 +21,13 @@ Workspace Generator for moving a package to another folder.
 ## Usage
 
 ```sh
-yarn nx workspace-generator move-packages ...
+yarn nx g @fluentui/workspace-plugin:move-packages ...
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator move-packages --dry-run
+yarn nx g @fluentui/workspace-plugin:move-packages --dry-run
 ```
 
 ### Examples
@@ -35,13 +35,13 @@ yarn nx workspace-generator move-packages --dry-run
 Run generator on package named `@fluentui/react-menu` and have it moved to a subfolder called `test`
 
 ```sh
-yarn nx workspace-generator move-packages --name='@fluentui/react-menu' --destination="testFolder/react-menu"
+yarn nx g @fluentui/workspace-plugin:move-packages --name='@fluentui/react-menu' --destination="testFolder/react-menu"
 ```
 
 Run generator on all converged packages
 
 ```sh
-yarn nx workspace-generator move-packages --allConverged --destination="testFolder"
+yarn nx g @fluentui/workspace-plugin:move-packages --allConverged --destination="testFolder"
 ```
 
 ## Options
diff --git a/tools/generators/move-packages/index.spec.ts b/tools/workspace-plugin/src/generators/move-packages/index.spec.ts
similarity index 96%
rename from tools/generators/move-packages/index.spec.ts
rename to tools/workspace-plugin/src/generators/move-packages/index.spec.ts
index fb0af37c39d48..41ded844a9f2f 100644
--- a/tools/generators/move-packages/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/move-packages/index.spec.ts
@@ -1,4 +1,4 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import {
   Tree,
   readProjectConfiguration,
@@ -14,7 +14,7 @@ import {
   readJson,
   updateJson,
   NxJsonConfiguration,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 
 import generator from './index';
 import { TsConfig } from '../../types';
@@ -54,7 +54,7 @@ describe('move-packages generator', () => {
       dependencies: {
         '@proj/make-styles': '^9.0.0-alpha.1',
       },
-      tsConfig: { extends: '../../tsconfig.base.json', compilerOptions: {}, include: ['src'] },
+      tsConfig: { extends: '../../../../tsconfig.base.json', compilerOptions: {}, include: ['src'] },
       projectConfiguration: { tags: ['vNext', 'platform:node'], sourceRoot: 'packages/test' },
     });
   });
@@ -121,7 +121,7 @@ describe('move-packages generator', () => {
       expect(tree.exists(`packages/${options.name}/config/tests.js`)).toBeFalsy();
     });
     it('should update storybook main.js module.exports type to the new relative path', async () => {
-      const newPath = '../../../../.storybook/main';
+      const newPath = '../../../../../../.storybook/main';
       let project = getProjects(tree).get(options.name) as ProjectConfiguration;
       let storybookMainJsPath = joinPathFragments(project.root, '/.storybook/main.js');
 
@@ -287,7 +287,9 @@ function setupDummyPackage(
       presets: ['@griffel'],
       plugins: ['annotate-pure-calls', '@babel/transform-react-pure-annotations'],
     },
-    tsConfig: { compilerOptions: { baseUrl: '.', typeRoots: ['../../node_modules/@types', '../../typings'] } },
+    tsConfig: {
+      compilerOptions: { baseUrl: '.', typeRoots: ['../../../../node_modules/@types', '../../../../typings'] },
+    },
   };
 
   const normalizedOptions = { ...defaults, ...options };
@@ -356,9 +358,9 @@ function setupDummyPackage(
   );
   tree.write(
     `${paths.root}/.storybook/main.js`,
-    `const rootMain = require('../../../.storybook/main');
+    `const rootMain = require('../../../../../.storybook/main');
 
-      module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+      module.exports = /** @type {Omit<import('../../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
         ...rootMain,
         stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
         addons: [...rootMain.addons],
diff --git a/tools/generators/move-packages/index.ts b/tools/workspace-plugin/src/generators/move-packages/index.ts
similarity index 98%
rename from tools/generators/move-packages/index.ts
rename to tools/workspace-plugin/src/generators/move-packages/index.ts
index 4ea8f36733659..d964811134231 100644
--- a/tools/generators/move-packages/index.ts
+++ b/tools/workspace-plugin/src/generators/move-packages/index.ts
@@ -9,8 +9,8 @@ import {
   logger,
   updateProjectConfiguration,
   readProjectConfiguration,
-} from '@nrwl/devkit';
-import { moveGenerator } from '@nrwl/workspace/generators';
+} from '@nx/devkit';
+import { moveGenerator } from '@nx/workspace/generators';
 import { getProjectConfig, getProjects, hasSchemaFlag, isPackageConverged, isV8Package } from '../../utils';
 
 import { MovePackagesGeneratorSchema } from './schema';
diff --git a/tools/generators/move-packages/schema.json b/tools/workspace-plugin/src/generators/move-packages/schema.json
similarity index 100%
rename from tools/generators/move-packages/schema.json
rename to tools/workspace-plugin/src/generators/move-packages/schema.json
diff --git a/tools/generators/move-packages/schema.ts b/tools/workspace-plugin/src/generators/move-packages/schema.ts
similarity index 100%
rename from tools/generators/move-packages/schema.ts
rename to tools/workspace-plugin/src/generators/move-packages/schema.ts
diff --git a/tools/generators/normalize-package-dependencies/README.md b/tools/workspace-plugin/src/generators/normalize-package-dependencies/README.md
similarity index 76%
rename from tools/generators/normalize-package-dependencies/README.md
rename to tools/workspace-plugin/src/generators/normalize-package-dependencies/README.md
index 6bd0387079e04..b9eea914a66c3 100644
--- a/tools/generators/normalize-package-dependencies/README.md
+++ b/tools/workspace-plugin/src/generators/normalize-package-dependencies/README.md
@@ -19,19 +19,19 @@ Workspace Generator for package.json dependencies normalization.
 ## Usage
 
 ```sh
-yarn nx workspace-generator normalize-package-dependencies ...
+yarn nx g @fluentui/workspace-plugin:normalize-package-dependencies ...
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator normalize-package-dependencies --dry-run
+yarn nx g @fluentui/workspace-plugin:normalize-package-dependencies --dry-run
 ```
 
 ### Examples
 
 ```sh
-yarn nx workspace-generator normalize-package-dependencies
+yarn nx g @fluentui/workspace-plugin:normalize-package-dependencies
 ```
 
 ## Options
diff --git a/tools/generators/normalize-package-dependencies/index.spec.ts b/tools/workspace-plugin/src/generators/normalize-package-dependencies/index.spec.ts
similarity index 97%
rename from tools/generators/normalize-package-dependencies/index.spec.ts
rename to tools/workspace-plugin/src/generators/normalize-package-dependencies/index.spec.ts
index 4c068874fc4de..f902b4a712643 100644
--- a/tools/generators/normalize-package-dependencies/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/normalize-package-dependencies/index.spec.ts
@@ -1,4 +1,4 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import {
   Tree,
   addProjectConfiguration,
@@ -9,7 +9,7 @@ import {
   ProjectGraph,
   readProjectConfiguration,
   updateJson,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 import * as chalk from 'chalk';
 
 import generator from './index';
@@ -22,13 +22,13 @@ const graphMock: ProjectGraph = {
   externalNodes: {},
 };
 
-jest.mock('@nrwl/devkit', () => {
+jest.mock('@nx/devkit', () => {
   async function createProjectGraphAsyncMock(): Promise<ProjectGraph> {
     return graphMock;
   }
 
   return {
-    ...jest.requireActual('@nrwl/devkit'),
+    ...jest.requireActual('@nx/devkit'),
     createProjectGraphAsync: createProjectGraphAsyncMock,
   };
 });
@@ -151,7 +151,7 @@ describe('normalize-package-dependencies generator', () => {
       expect(infoLogSpy.mock.calls.flat()).toMatchInlineSnapshot(`
         Array [
           "All these dependencies version should be specified as '*' or '>=9.0.0-alpha' ",
-          "Fix this by running 'nx workspace-generator normalize-package-dependencies'",
+          "Fix this by running 'nx g @fluentui/workspace-plugin:normalize-package-dependencies'",
         ]
       `);
     });
diff --git a/tools/generators/normalize-package-dependencies/index.ts b/tools/workspace-plugin/src/generators/normalize-package-dependencies/index.ts
similarity index 97%
rename from tools/generators/normalize-package-dependencies/index.ts
rename to tools/workspace-plugin/src/generators/normalize-package-dependencies/index.ts
index 25f1331c96599..237f2f454b0bc 100644
--- a/tools/generators/normalize-package-dependencies/index.ts
+++ b/tools/workspace-plugin/src/generators/normalize-package-dependencies/index.ts
@@ -10,7 +10,7 @@ import {
   createProjectGraphAsync,
   ProjectGraph,
   readProjectConfiguration,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 import * as semver from 'semver';
 
 import { NormalizePackageDependenciesGeneratorSchema } from './schema';
@@ -100,7 +100,7 @@ function reportPackageJsonDependenciesIssues(issues: ProjectIssues) {
   logger.info(
     `All these dependencies version should be specified as '${NORMALIZED_INNER_WORKSPACE_VERSION}' or '${NORMALIZED_PRERELEASE_RANGE_VERSION}' `,
   );
-  logger.info(`Fix this by running 'nx workspace-generator normalize-package-dependencies'`);
+  logger.info(`Fix this by running 'nx g @fluentui/workspace-plugin:normalize-package-dependencies'`);
 
   throw new Error('package dependency violations found');
 }
diff --git a/tools/generators/migrate-converged-pkg/files/.gitkeep b/tools/workspace-plugin/src/generators/normalize-package-dependencies/lib/.gitkeep
similarity index 100%
rename from tools/generators/migrate-converged-pkg/files/.gitkeep
rename to tools/workspace-plugin/src/generators/normalize-package-dependencies/lib/.gitkeep
diff --git a/tools/generators/normalize-package-dependencies/schema.json b/tools/workspace-plugin/src/generators/normalize-package-dependencies/schema.json
similarity index 100%
rename from tools/generators/normalize-package-dependencies/schema.json
rename to tools/workspace-plugin/src/generators/normalize-package-dependencies/schema.json
diff --git a/tools/generators/normalize-package-dependencies/schema.ts b/tools/workspace-plugin/src/generators/normalize-package-dependencies/schema.ts
similarity index 100%
rename from tools/generators/normalize-package-dependencies/schema.ts
rename to tools/workspace-plugin/src/generators/normalize-package-dependencies/schema.ts
diff --git a/tools/generators/prepare-initial-release/README.md b/tools/workspace-plugin/src/generators/prepare-initial-release/README.md
similarity index 87%
rename from tools/generators/prepare-initial-release/README.md
rename to tools/workspace-plugin/src/generators/prepare-initial-release/README.md
index d79d8bdcc6559..c91685bc05557 100644
--- a/tools/generators/prepare-initial-release/README.md
+++ b/tools/workspace-plugin/src/generators/prepare-initial-release/README.md
@@ -55,19 +55,19 @@ KP-.->IRP-.->PP-.->IRS-.->SP
 ## Usage
 
 ```sh
-yarn nx workspace-generator prepare-initial-release ...
+yarn nx g @fluentui/workspace-plugin:prepare-initial-release ...
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator prepare-initial-release --dry-run
+yarn nx g @fluentui/workspace-plugin:prepare-initial-release --dry-run
 ```
 
 ### Examples
 
 ```sh
-yarn nx workspace-generator prepare-initial-release
+yarn nx g @fluentui/workspace-plugin:prepare-initial-release
 ```
 
 ## Options
diff --git a/tools/generators/prepare-initial-release/index.spec.ts b/tools/workspace-plugin/src/generators/prepare-initial-release/index.spec.ts
similarity index 96%
rename from tools/generators/prepare-initial-release/index.spec.ts
rename to tools/workspace-plugin/src/generators/prepare-initial-release/index.spec.ts
index d8c5b1ee08251..8c2bc0d9135bd 100644
--- a/tools/generators/prepare-initial-release/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/prepare-initial-release/index.spec.ts
@@ -1,16 +1,16 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import {
-  Tree,
+  type Tree,
+  type ProjectGraph,
   addProjectConfiguration,
   writeJson,
   joinPathFragments,
   stripIndents,
   readJson,
   updateJson,
-  ProjectGraph,
   workspaceRoot,
+  installPackagesTask,
 } from '@nrwl/devkit';
-import * as devkit from '@nrwl/devkit';
 import * as childProcess from 'child_process';
 
 import generator from './index';
@@ -24,24 +24,24 @@ const blankGraphMock = {
 let graphMock: ProjectGraph;
 const codeownersPath = joinPathFragments('.github', 'CODEOWNERS');
 
-jest.mock('@nrwl/devkit', () => {
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+jest.mock('@nx/devkit', () => {
   async function createProjectGraphAsyncMock(): Promise<ProjectGraph> {
     return graphMock;
   }
 
   return {
-    ...jest.requireActual('@nrwl/devkit'),
+    ...jest.requireActual('@nx/devkit'),
+    installPackagesTask: jest.fn(),
     createProjectGraphAsync: createProjectGraphAsyncMock,
   };
 });
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
-let execSyncSpy: jest.SpyInstance;
-let installPackagesTaskSpy: jest.SpyInstance;
-
 describe('prepare-initial-release generator', () => {
+  const installPackagesTaskSpy = installPackagesTask as unknown as jest.SpyInstance;
+  let execSyncSpy: jest.SpyInstance;
   let tree: Tree;
 
   beforeEach(() => {
@@ -49,7 +49,7 @@ describe('prepare-initial-release generator', () => {
       // @ts-expect-error - no need to mock whole execSync API
       noop,
     );
-    installPackagesTaskSpy = jest.spyOn(devkit, 'installPackagesTask').mockImplementation(noop);
+    // installPackagesTaskSpy = jest.spyOn(devkit, 'installPackagesTask').mockImplementation(noop);
     graphMock = {
       ...blankGraphMock,
     };
@@ -59,6 +59,9 @@ describe('prepare-initial-release generator', () => {
     writeJson<TsConfig>(tree, 'tsconfig.base.v0.json', { compilerOptions: { paths: {} } });
     writeJson<TsConfig>(tree, 'tsconfig.base.all.json', { compilerOptions: { paths: {} } });
   });
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
 
   it(`should throw error if executed on invalid project`, async () => {
     createProject(tree, 'react-one-stable', {
diff --git a/tools/generators/prepare-initial-release/index.ts b/tools/workspace-plugin/src/generators/prepare-initial-release/index.ts
similarity index 100%
rename from tools/generators/prepare-initial-release/index.ts
rename to tools/workspace-plugin/src/generators/prepare-initial-release/index.ts
diff --git a/tools/generators/normalize-package-dependencies/lib/.gitkeep b/tools/workspace-plugin/src/generators/prepare-initial-release/lib/.gitkeep
similarity index 100%
rename from tools/generators/normalize-package-dependencies/lib/.gitkeep
rename to tools/workspace-plugin/src/generators/prepare-initial-release/lib/.gitkeep
diff --git a/tools/generators/prepare-initial-release/schema.json b/tools/workspace-plugin/src/generators/prepare-initial-release/schema.json
similarity index 100%
rename from tools/generators/prepare-initial-release/schema.json
rename to tools/workspace-plugin/src/generators/prepare-initial-release/schema.json
diff --git a/tools/generators/prepare-initial-release/schema.ts b/tools/workspace-plugin/src/generators/prepare-initial-release/schema.ts
similarity index 100%
rename from tools/generators/prepare-initial-release/schema.ts
rename to tools/workspace-plugin/src/generators/prepare-initial-release/schema.ts
diff --git a/tools/generators/print-stats.spec.ts b/tools/workspace-plugin/src/generators/print-stats.spec.ts
similarity index 97%
rename from tools/generators/print-stats.spec.ts
rename to tools/workspace-plugin/src/generators/print-stats.spec.ts
index fbe65c3c065d4..cc18159b7280c 100644
--- a/tools/generators/print-stats.spec.ts
+++ b/tools/workspace-plugin/src/generators/print-stats.spec.ts
@@ -1,5 +1,5 @@
-import { addProjectConfiguration, getProjects, logger, Tree } from '@nrwl/devkit';
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { addProjectConfiguration, getProjects, logger, Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import * as chalk from 'chalk';
 import { disableChalk, formatMockedCalls } from '../utils-testing';
 
diff --git a/tools/generators/print-stats.ts b/tools/workspace-plugin/src/generators/print-stats.ts
similarity index 97%
rename from tools/generators/print-stats.ts
rename to tools/workspace-plugin/src/generators/print-stats.ts
index bfdde1c13d7ab..25a27f6392e8f 100644
--- a/tools/generators/print-stats.ts
+++ b/tools/workspace-plugin/src/generators/print-stats.ts
@@ -1,5 +1,5 @@
 import * as chalk from 'chalk';
-import { Tree, ProjectConfiguration, logger } from '@nrwl/devkit';
+import { Tree, ProjectConfiguration, logger } from '@nx/devkit';
 
 interface Options<T extends ProjectConfiguration> {
   title: string;
diff --git a/tools/generators/rc-caret/README.md b/tools/workspace-plugin/src/generators/rc-caret/README.md
similarity index 83%
rename from tools/generators/rc-caret/README.md
rename to tools/workspace-plugin/src/generators/rc-caret/README.md
index 9c3b7701b3d7d..2ed1e37caf4af 100644
--- a/tools/generators/rc-caret/README.md
+++ b/tools/workspace-plugin/src/generators/rc-caret/README.md
@@ -41,13 +41,13 @@ After:
 ## Usage
 
 ```sh
-yarn nx workspace-generator rc-caret
+yarn nx g @fluentui/workspace-plugin:rc-caret
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator rc-caret --dry-run
+yarn nx g @fluentui/workspace-plugin:rc-caret --dry-run
 ```
 
 ### Examples
@@ -55,13 +55,13 @@ yarn nx workspace-generator rc-caret --dry-run
 Check `@fluentui/react-components` for pinned rc deps and convert them to carets
 
 ```sh
-yarn nx workspace-generator rc-caret --name='@fluentui/react-components'
+yarn nx g @fluentui/workspace-plugin:rc-caret --name='@fluentui/react-components'
 ```
 
 Check all packages for pinned rc deps and convert them to carets
 
 ```sh
-yarn nx workspace-generator rc-caret --all
+yarn nx g @fluentui/workspace-plugin:rc-caret --all
 ```
 
 ## Options
diff --git a/tools/generators/rc-caret/index.spec.ts b/tools/workspace-plugin/src/generators/rc-caret/index.spec.ts
similarity index 98%
rename from tools/generators/rc-caret/index.spec.ts
rename to tools/workspace-plugin/src/generators/rc-caret/index.spec.ts
index 6ff0d3af9206d..c2dec2d2fbe22 100644
--- a/tools/generators/rc-caret/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/rc-caret/index.spec.ts
@@ -1,4 +1,4 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import {
   Tree,
   readProjectConfiguration,
@@ -6,7 +6,7 @@ import {
   serializeJson,
   addProjectConfiguration,
   readJson,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 
 import generator from './index';
 import { VersionBumpGeneratorSchema } from './schema';
diff --git a/tools/generators/rc-caret/index.ts b/tools/workspace-plugin/src/generators/rc-caret/index.ts
similarity index 97%
rename from tools/generators/rc-caret/index.ts
rename to tools/workspace-plugin/src/generators/rc-caret/index.ts
index e0f0c05826f77..0a93d5e79bafb 100644
--- a/tools/generators/rc-caret/index.ts
+++ b/tools/workspace-plugin/src/generators/rc-caret/index.ts
@@ -1,4 +1,4 @@
-import { Tree, updateJson, getProjects, formatFiles } from '@nrwl/devkit';
+import { Tree, updateJson, getProjects, formatFiles } from '@nx/devkit';
 import * as semver from 'semver';
 import { VersionBumpGeneratorSchema } from './schema';
 import { getProjectConfig, isPackageVersionConverged, printUserLogs, UserLog } from '../../utils';
diff --git a/tools/generators/rc-caret/schema.json b/tools/workspace-plugin/src/generators/rc-caret/schema.json
similarity index 100%
rename from tools/generators/rc-caret/schema.json
rename to tools/workspace-plugin/src/generators/rc-caret/schema.json
diff --git a/tools/generators/rc-caret/schema.ts b/tools/workspace-plugin/src/generators/rc-caret/schema.ts
similarity index 100%
rename from tools/generators/rc-caret/schema.ts
rename to tools/workspace-plugin/src/generators/rc-caret/schema.ts
diff --git a/tools/generators/react-component/README.md b/tools/workspace-plugin/src/generators/react-component/README.md
similarity index 74%
rename from tools/generators/react-component/README.md
rename to tools/workspace-plugin/src/generators/react-component/README.md
index 162cc609c3834..b6d455f44568b 100644
--- a/tools/generators/react-component/README.md
+++ b/tools/workspace-plugin/src/generators/react-component/README.md
@@ -15,19 +15,19 @@ Workspace Generator for creating React Component within v9 package.
 ## Usage
 
 ```sh
-yarn nx workspace-generator react-component --help
+yarn nx g @fluentui/workspace-plugin:react-component --help
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator react-component --dry-run
+yarn nx g @fluentui/workspace-plugin:react-component --dry-run
 ```
 
 ### Examples
 
 ```sh
-yarn nx workspace-generator react-component
+yarn nx g @fluentui/workspace-plugin:react-component
 ```
 
 ## Options
diff --git a/tools/generators/react-component/files/component/__componentName__.test.tsx__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.test.tsx__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/component/__componentName__.test.tsx__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.test.tsx__tmpl__
diff --git a/tools/generators/react-component/files/component/__componentName__.tsx__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.tsx__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/component/__componentName__.tsx__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.tsx__tmpl__
diff --git a/tools/generators/react-component/files/component/__componentName__.types.ts__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.types.ts__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/component/__componentName__.types.ts__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.types.ts__tmpl__
diff --git a/tools/generators/react-component/files/component/index.ts__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/index.ts__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/component/index.ts__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/component/index.ts__tmpl__
diff --git a/tools/generators/react-component/files/component/render__componentName__.tsx__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/render__componentName__.tsx__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/component/render__componentName__.tsx__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/component/render__componentName__.tsx__tmpl__
diff --git a/tools/generators/react-component/files/component/use__componentName__.ts__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/use__componentName__.ts__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/component/use__componentName__.ts__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/component/use__componentName__.ts__tmpl__
diff --git a/tools/generators/react-component/files/component/use__componentName__Styles.styles.ts__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/use__componentName__Styles.styles.ts__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/component/use__componentName__Styles.styles.ts__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/component/use__componentName__Styles.styles.ts__tmpl__
diff --git a/tools/generators/react-component/files/story/__componentName__BestPractices.md__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/story/__componentName__BestPractices.md__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/story/__componentName__BestPractices.md__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/story/__componentName__BestPractices.md__tmpl__
diff --git a/tools/generators/react-component/files/story/__componentName__Default.stories.tsx__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/story/__componentName__Default.stories.tsx__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/story/__componentName__Default.stories.tsx__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/story/__componentName__Default.stories.tsx__tmpl__
diff --git a/tools/generators/react-component/files/story/__componentName__Description.md__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/story/__componentName__Description.md__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/story/__componentName__Description.md__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/story/__componentName__Description.md__tmpl__
diff --git a/tools/generators/react-component/files/story/index.stories.tsx__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/story/index.stories.tsx__tmpl__
similarity index 100%
rename from tools/generators/react-component/files/story/index.stories.tsx__tmpl__
rename to tools/workspace-plugin/src/generators/react-component/files/story/index.stories.tsx__tmpl__
diff --git a/tools/generators/react-component/index.spec.ts b/tools/workspace-plugin/src/generators/react-component/index.spec.ts
similarity index 98%
rename from tools/generators/react-component/index.spec.ts
rename to tools/workspace-plugin/src/generators/react-component/index.spec.ts
index 1233ba9d8725d..ef5efe5649f9f 100644
--- a/tools/generators/react-component/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/react-component/index.spec.ts
@@ -1,5 +1,5 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-import { Tree, addProjectConfiguration, writeJson, joinPathFragments } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { Tree, addProjectConfiguration, writeJson, joinPathFragments } from '@nx/devkit';
 
 import generator from './index';
 
diff --git a/tools/generators/react-component/index.ts b/tools/workspace-plugin/src/generators/react-component/index.ts
similarity index 98%
rename from tools/generators/react-component/index.ts
rename to tools/workspace-plugin/src/generators/react-component/index.ts
index 4d5e00ed371d7..27cf47f17a668 100644
--- a/tools/generators/react-component/index.ts
+++ b/tools/workspace-plugin/src/generators/react-component/index.ts
@@ -1,5 +1,5 @@
 import * as path from 'path';
-import { Tree, formatFiles, names, generateFiles, joinPathFragments, workspaceRoot } from '@nrwl/devkit';
+import { Tree, formatFiles, names, generateFiles, joinPathFragments, workspaceRoot } from '@nx/devkit';
 
 import { getProjectConfig, isPackageConverged } from '../../utils';
 
diff --git a/tools/generators/prepare-initial-release/lib/.gitkeep b/tools/workspace-plugin/src/generators/react-component/lib/.gitkeep
similarity index 100%
rename from tools/generators/prepare-initial-release/lib/.gitkeep
rename to tools/workspace-plugin/src/generators/react-component/lib/.gitkeep
diff --git a/tools/generators/react-component/schema.json b/tools/workspace-plugin/src/generators/react-component/schema.json
similarity index 100%
rename from tools/generators/react-component/schema.json
rename to tools/workspace-plugin/src/generators/react-component/schema.json
diff --git a/tools/generators/react-component/schema.ts b/tools/workspace-plugin/src/generators/react-component/schema.ts
similarity index 100%
rename from tools/generators/react-component/schema.ts
rename to tools/workspace-plugin/src/generators/react-component/schema.ts
diff --git a/tools/generators/react-library/README.md b/tools/workspace-plugin/src/generators/react-library/README.md
similarity index 80%
rename from tools/generators/react-library/README.md
rename to tools/workspace-plugin/src/generators/react-library/README.md
index 6ea896a14ffd1..7e6eb4f14e926 100644
--- a/tools/generators/react-library/README.md
+++ b/tools/workspace-plugin/src/generators/react-library/README.md
@@ -16,19 +16,19 @@ Workspace Generator for bootstrapping a new react library (fluentui v9)
 ## Usage
 
 ```sh
-yarn nx workspace-generator react-library --help
+yarn nx g @fluentui/workspace-plugin:react-library --help
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator react-library --dry-run
+yarn nx g @fluentui/workspace-plugin:react-library --dry-run
 ```
 
 ### Examples
 
 ```sh
-yarn nx workspace-generator react-library
+yarn nx g @fluentui/workspace-plugin:react-library
 ```
 
 ## Options
diff --git a/tools/generators/react-library/files/.babelrc.json__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/.babelrc.json__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/.babelrc.json__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/.babelrc.json__tmpl__
diff --git a/tools/generators/react-library/files/.eslintrc.json__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/.eslintrc.json__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/.eslintrc.json__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/.eslintrc.json__tmpl__
diff --git a/tools/generators/react-library/files/.npmignore__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/.npmignore__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/.npmignore__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/.npmignore__tmpl__
diff --git a/tools/generators/react-library/files/.storybook/main.js__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/.storybook/main.js__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/.storybook/main.js__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/.storybook/main.js__tmpl__
diff --git a/tools/generators/react-library/files/.storybook/preview.js__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/.storybook/preview.js__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/.storybook/preview.js__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/.storybook/preview.js__tmpl__
diff --git a/tools/generators/react-library/files/.storybook/tsconfig.json__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/.storybook/tsconfig.json__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/.storybook/tsconfig.json__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/.storybook/tsconfig.json__tmpl__
diff --git a/tools/generators/react-library/files/.swcrc__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/.swcrc__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/.swcrc__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/.swcrc__tmpl__
diff --git a/tools/generators/react-library/files/LICENSE__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/LICENSE__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/LICENSE__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/LICENSE__tmpl__
diff --git a/tools/generators/react-library/files/README.md__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/README.md__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/README.md__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/README.md__tmpl__
diff --git a/tools/generators/react-library/files/config/api-extractor.json__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/config/api-extractor.json__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/config/api-extractor.json__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/config/api-extractor.json__tmpl__
diff --git a/tools/generators/react-library/files/config/tests.js__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/config/tests.js__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/config/tests.js__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/config/tests.js__tmpl__
diff --git a/tools/generators/react-library/files/docs/Spec.md__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/docs/Spec.md__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/docs/Spec.md__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/docs/Spec.md__tmpl__
diff --git a/tools/generators/react-library/files/etc/__packageName__.api.md b/tools/workspace-plugin/src/generators/react-library/files/etc/__packageName__.api.md
similarity index 100%
rename from tools/generators/react-library/files/etc/__packageName__.api.md
rename to tools/workspace-plugin/src/generators/react-library/files/etc/__packageName__.api.md
diff --git a/tools/generators/react-library/files/jest.config.js__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/jest.config.js__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/jest.config.js__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/jest.config.js__tmpl__
diff --git a/tools/generators/react-library/files/just.config.ts__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/just.config.ts__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/just.config.ts__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/just.config.ts__tmpl__
diff --git a/tools/generators/react-library/files/package.json__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/package.json__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/package.json__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/package.json__tmpl__
diff --git a/tools/generators/react-library/files/src/index.ts__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/src/index.ts__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/src/index.ts__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/src/index.ts__tmpl__
diff --git a/tools/generators/react-library/files/src/testing/isConformant.ts__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/src/testing/isConformant.ts__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/src/testing/isConformant.ts__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/src/testing/isConformant.ts__tmpl__
diff --git a/tools/generators/react-component/lib/.gitkeep b/tools/workspace-plugin/src/generators/react-library/files/stories/.gitkeep
similarity index 100%
rename from tools/generators/react-component/lib/.gitkeep
rename to tools/workspace-plugin/src/generators/react-library/files/stories/.gitkeep
diff --git a/tools/generators/react-library/files/tsconfig.json__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/tsconfig.json__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/tsconfig.json__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/tsconfig.json__tmpl__
diff --git a/tools/generators/react-library/files/tsconfig.lib.json__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/tsconfig.lib.json__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/tsconfig.lib.json__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/tsconfig.lib.json__tmpl__
diff --git a/tools/generators/react-library/files/tsconfig.spec.json__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/tsconfig.spec.json__tmpl__
similarity index 100%
rename from tools/generators/react-library/files/tsconfig.spec.json__tmpl__
rename to tools/workspace-plugin/src/generators/react-library/files/tsconfig.spec.json__tmpl__
diff --git a/tools/generators/react-library/index.spec.ts b/tools/workspace-plugin/src/generators/react-library/index.spec.ts
similarity index 98%
rename from tools/generators/react-library/index.spec.ts
rename to tools/workspace-plugin/src/generators/react-library/index.spec.ts
index 69c1baf35b18c..1201159d7ff89 100644
--- a/tools/generators/react-library/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/react-library/index.spec.ts
@@ -1,4 +1,4 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import {
   Tree,
   readProjectConfiguration,
@@ -8,7 +8,7 @@ import {
   joinPathFragments,
   readJson,
   stripIndents,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 
 import generator from './index';
 import { PackageJson } from '../../types';
diff --git a/tools/generators/react-library/index.ts b/tools/workspace-plugin/src/generators/react-library/index.ts
similarity index 99%
rename from tools/generators/react-library/index.ts
rename to tools/workspace-plugin/src/generators/react-library/index.ts
index 820671050151e..6114fb9480d94 100644
--- a/tools/generators/react-library/index.ts
+++ b/tools/workspace-plugin/src/generators/react-library/index.ts
@@ -11,7 +11,7 @@ import {
   joinPathFragments,
   updateJson,
   readJson,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 
 import { getProjectConfig } from '../../utils';
 
diff --git a/tools/generators/react-library/files/stories/.gitkeep b/tools/workspace-plugin/src/generators/react-library/lib/.gitkeep
similarity index 100%
rename from tools/generators/react-library/files/stories/.gitkeep
rename to tools/workspace-plugin/src/generators/react-library/lib/.gitkeep
diff --git a/tools/generators/react-library/schema.json b/tools/workspace-plugin/src/generators/react-library/schema.json
similarity index 100%
rename from tools/generators/react-library/schema.json
rename to tools/workspace-plugin/src/generators/react-library/schema.json
diff --git a/tools/generators/react-library/schema.ts b/tools/workspace-plugin/src/generators/react-library/schema.ts
similarity index 100%
rename from tools/generators/react-library/schema.ts
rename to tools/workspace-plugin/src/generators/react-library/schema.ts
diff --git a/tools/generators/recipe-generator/README.md b/tools/workspace-plugin/src/generators/recipe-generator/README.md
similarity index 65%
rename from tools/generators/recipe-generator/README.md
rename to tools/workspace-plugin/src/generators/recipe-generator/README.md
index 274dee3c8fbdb..29411253deedf 100644
--- a/tools/generators/recipe-generator/README.md
+++ b/tools/workspace-plugin/src/generators/recipe-generator/README.md
@@ -14,13 +14,13 @@ Workspace Generator to create a recipe.
 ## Usage
 
 ```sh
-yarn nx workspace-generator recipe-generator
+yarn nx g @fluentui/workspace-plugin:recipe-generator
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator recipe-generator --dry-run
+yarn nx g @fluentui/workspace-plugin:recipe-generator --dry-run
 ```
 
 ### Examples
@@ -28,13 +28,13 @@ yarn nx workspace-generator recipe-generator --dry-run
 Guided CLI prompt:
 
 ```sh
-yarn nx workspace-generator recipe-generator
+yarn nx g @fluentui/workspace-plugin:recipe-generator
 ```
 
 Single command:
 
 ```sh
-yarn nx workspace-generator recipe-generator --recipeName 'My Recipe'
+yarn nx g @fluentui/workspace-plugin:recipe-generator --recipeName 'My Recipe'
 ```
 
 ## Options
diff --git a/tools/generators/recipe-generator/__snapshots__/index.spec.ts.snap b/tools/workspace-plugin/src/generators/recipe-generator/__snapshots__/index.spec.ts.snap
similarity index 100%
rename from tools/generators/recipe-generator/__snapshots__/index.spec.ts.snap
rename to tools/workspace-plugin/src/generators/recipe-generator/__snapshots__/index.spec.ts.snap
diff --git a/tools/generators/recipe-generator/files/__packageName__/__fileName__.stories.mdx__tmpl__ b/tools/workspace-plugin/src/generators/recipe-generator/files/__packageName__/__fileName__.stories.mdx__tmpl__
similarity index 100%
rename from tools/generators/recipe-generator/files/__packageName__/__fileName__.stories.mdx__tmpl__
rename to tools/workspace-plugin/src/generators/recipe-generator/files/__packageName__/__fileName__.stories.mdx__tmpl__
diff --git a/tools/generators/recipe-generator/files/__packageName__/code-snippets/__fileName__.tsx__tmpl__ b/tools/workspace-plugin/src/generators/recipe-generator/files/__packageName__/code-snippets/__fileName__.tsx__tmpl__
similarity index 100%
rename from tools/generators/recipe-generator/files/__packageName__/code-snippets/__fileName__.tsx__tmpl__
rename to tools/workspace-plugin/src/generators/recipe-generator/files/__packageName__/code-snippets/__fileName__.tsx__tmpl__
diff --git a/tools/generators/recipe-generator/files/__packageName__/code-snippets/index.ts__tmpl__ b/tools/workspace-plugin/src/generators/recipe-generator/files/__packageName__/code-snippets/index.ts__tmpl__
similarity index 100%
rename from tools/generators/recipe-generator/files/__packageName__/code-snippets/index.ts__tmpl__
rename to tools/workspace-plugin/src/generators/recipe-generator/files/__packageName__/code-snippets/index.ts__tmpl__
diff --git a/tools/generators/recipe-generator/index.spec.ts b/tools/workspace-plugin/src/generators/recipe-generator/index.spec.ts
similarity index 94%
rename from tools/generators/recipe-generator/index.spec.ts
rename to tools/workspace-plugin/src/generators/recipe-generator/index.spec.ts
index 10b66b74662ef..baf4307a62be6 100644
--- a/tools/generators/recipe-generator/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/recipe-generator/index.spec.ts
@@ -1,5 +1,5 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-import { addProjectConfiguration, Tree, writeJson } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { addProjectConfiguration, Tree, writeJson } from '@nx/devkit';
 import * as path from 'path';
 
 import generator from './index';
diff --git a/tools/generators/recipe-generator/index.ts b/tools/workspace-plugin/src/generators/recipe-generator/index.ts
similarity index 97%
rename from tools/generators/recipe-generator/index.ts
rename to tools/workspace-plugin/src/generators/recipe-generator/index.ts
index 67d6dc1b921cc..d9304d8f8edf7 100644
--- a/tools/generators/recipe-generator/index.ts
+++ b/tools/workspace-plugin/src/generators/recipe-generator/index.ts
@@ -1,4 +1,4 @@
-import { Tree, formatFiles, generateFiles, readWorkspaceConfiguration, joinPathFragments } from '@nrwl/devkit';
+import { Tree, formatFiles, generateFiles, readWorkspaceConfiguration, joinPathFragments } from '@nx/devkit';
 import { RecipeGeneratorGeneratorSchema } from './schema';
 import { getProjectConfig } from '../../utils';
 
diff --git a/tools/generators/recipe-generator/schema.json b/tools/workspace-plugin/src/generators/recipe-generator/schema.json
similarity index 100%
rename from tools/generators/recipe-generator/schema.json
rename to tools/workspace-plugin/src/generators/recipe-generator/schema.json
diff --git a/tools/generators/recipe-generator/schema.ts b/tools/workspace-plugin/src/generators/recipe-generator/schema.ts
similarity index 100%
rename from tools/generators/recipe-generator/schema.ts
rename to tools/workspace-plugin/src/generators/recipe-generator/schema.ts
diff --git a/tools/generators/tsconfig-base-all/README.md b/tools/workspace-plugin/src/generators/tsconfig-base-all/README.md
similarity index 74%
rename from tools/generators/tsconfig-base-all/README.md
rename to tools/workspace-plugin/src/generators/tsconfig-base-all/README.md
index bf5861795bcb7..cb91e6b92479a 100644
--- a/tools/generators/tsconfig-base-all/README.md
+++ b/tools/workspace-plugin/src/generators/tsconfig-base-all/README.md
@@ -16,19 +16,19 @@ Workspace Generator for generating/updating `/tsconfig.base.all.json`.
 ## Usage
 
 ```sh
-yarn nx workspace-generator tsconfig-base-all
+yarn nx g @fluentui/workspace-plugin:tsconfig-base-all
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator tsconfig-base-all --dry-run
+yarn nx g @fluentui/workspace-plugin:tsconfig-base-all --dry-run
 ```
 
 ### Examples
 
 ```sh
-yarn nx workspace-generator tsconfig-base-all
+yarn nx g @fluentui/workspace-plugin:tsconfig-base-all
 ```
 
 ## Options
@@ -42,5 +42,5 @@ use this option on CI to check if base.all.json is up to date and in sync with a
 Following will throw an error if `tsconfig.base.all.json` is out of date
 
 ```sh
-yarn nx workspace-generator tsconfig-base-all --verify
+yarn nx g @fluentui/workspace-plugin:tsconfig-base-all --verify
 ```
diff --git a/tools/generators/tsconfig-base-all/index.spec.ts b/tools/workspace-plugin/src/generators/tsconfig-base-all/index.spec.ts
similarity index 93%
rename from tools/generators/tsconfig-base-all/index.spec.ts
rename to tools/workspace-plugin/src/generators/tsconfig-base-all/index.spec.ts
index 956d08ad247a0..fd0a285e16742 100644
--- a/tools/generators/tsconfig-base-all/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/tsconfig-base-all/index.spec.ts
@@ -1,5 +1,5 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-import { Tree, writeJson, readJson, updateJson } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { Tree, writeJson, readJson, updateJson } from '@nx/devkit';
 
 import generator from './index';
 import { TsconfigBaseAllGeneratorSchema } from './schema';
@@ -112,7 +112,7 @@ describe('tsconfig-base-all generator', () => {
           "
                 🚨 /tsconfig.base.all.json is out of date.
 
-                Please update it by running  'yarn nx workspace-generator tsconfig-base-all'.
+                Please update it by running  'yarn nx g @fluentui/workspace-plugin:tsconfig-base-all'.
               "
         `);
       }
diff --git a/tools/generators/tsconfig-base-all/index.ts b/tools/workspace-plugin/src/generators/tsconfig-base-all/index.ts
similarity index 86%
rename from tools/generators/tsconfig-base-all/index.ts
rename to tools/workspace-plugin/src/generators/tsconfig-base-all/index.ts
index fdad039a5f875..85b34ffdbe963 100644
--- a/tools/generators/tsconfig-base-all/index.ts
+++ b/tools/workspace-plugin/src/generators/tsconfig-base-all/index.ts
@@ -1,4 +1,4 @@
-import { Tree, formatFiles, writeJson } from '@nrwl/devkit';
+import { Tree, formatFiles, writeJson } from '@nx/devkit';
 import { isEqual } from 'lodash';
 
 import { TsconfigBaseAllGeneratorSchema } from './schema';
@@ -16,7 +16,7 @@ export default async function (tree: Tree, schema: TsconfigBaseAllGeneratorSchem
     throw new Error(`
       🚨 ${tsConfigAllPath} is out of date.
 
-      Please update it by running  'yarn nx workspace-generator tsconfig-base-all'.
+      Please update it by running  'yarn nx g @fluentui/workspace-plugin:tsconfig-base-all'.
     `);
   }
 
diff --git a/tools/generators/tsconfig-base-all/lib/utils.ts b/tools/workspace-plugin/src/generators/tsconfig-base-all/lib/utils.ts
similarity index 96%
rename from tools/generators/tsconfig-base-all/lib/utils.ts
rename to tools/workspace-plugin/src/generators/tsconfig-base-all/lib/utils.ts
index f9a246d4f26da..eefe4259be48f 100644
--- a/tools/generators/tsconfig-base-all/lib/utils.ts
+++ b/tools/workspace-plugin/src/generators/tsconfig-base-all/lib/utils.ts
@@ -1,6 +1,6 @@
 // use this module to define any kind of generic utilities that are used in more than 1 place within the generator implementation
 import * as path from 'path';
-import { readJson, Tree } from '@nrwl/devkit';
+import { readJson, Tree } from '@nx/devkit';
 
 /**
  *
diff --git a/tools/generators/tsconfig-base-all/schema.json b/tools/workspace-plugin/src/generators/tsconfig-base-all/schema.json
similarity index 100%
rename from tools/generators/tsconfig-base-all/schema.json
rename to tools/workspace-plugin/src/generators/tsconfig-base-all/schema.json
diff --git a/tools/generators/tsconfig-base-all/schema.ts b/tools/workspace-plugin/src/generators/tsconfig-base-all/schema.ts
similarity index 100%
rename from tools/generators/tsconfig-base-all/schema.ts
rename to tools/workspace-plugin/src/generators/tsconfig-base-all/schema.ts
diff --git a/tools/generators/version-bump/README.md b/tools/workspace-plugin/src/generators/version-bump/README.md
similarity index 79%
rename from tools/generators/version-bump/README.md
rename to tools/workspace-plugin/src/generators/version-bump/README.md
index 566a57bba082b..79b4b0c654490 100644
--- a/tools/generators/version-bump/README.md
+++ b/tools/workspace-plugin/src/generators/version-bump/README.md
@@ -38,13 +38,13 @@ The generator also bumps the versions in any dependent packages.
 ## Usage
 
 ```sh
-yarn nx workspace-generator version-bump ...
+yarn nx g @fluentui/workspace-plugin:version-bump ...
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator version-bump --dry-run
+yarn nx g @fluentui/workspace-plugin:version-bump --dry-run
 ```
 
 ### Examples
@@ -52,25 +52,25 @@ yarn nx workspace-generator version-bump --dry-run
 Bump `@fluentui/example@9.0.0-alpha.1` to beta
 
 ```sh
-yarn nx workspace-generator version-bump --name='@fluentui/example' --bumpType prerelease --prereleaseTag beta
+yarn nx g @fluentui/workspace-plugin:version-bump --name='@fluentui/example' --bumpType prerelease --prereleaseTag beta
 ```
 
 Bump all vNext packages from alpha to beta
 
 ```sh
-yarn nx workspace-generator version-bump --all --bumpType prerelease --prereleaseTag beta
+yarn nx g @fluentui/workspace-plugin:version-bump --all --bumpType prerelease --prereleaseTag beta
 ```
 
 Bump all vNext packages from beta (9.0.0-beta) to full release. The actual bumptype is irrelevant.
 
 ```sh
-yarn nx workspace-generator version-bump --all --bumpType minor
+yarn nx g @fluentui/workspace-plugin:version-bump --all --bumpType minor
 ```
 
 Bump all vNext packages for a nightly release (0.0.0-nightly).
 
 ```sh
-yarn nx workspace-generator version-bump --all --bumpType nightly --prereleaseTag nightly
+yarn nx g @fluentui/workspace-plugin:version-bump --all --bumpType nightly --prereleaseTag nightly
 ```
 
 ## Options
diff --git a/tools/generators/version-bump/index.spec.ts b/tools/workspace-plugin/src/generators/version-bump/index.spec.ts
similarity index 99%
rename from tools/generators/version-bump/index.spec.ts
rename to tools/workspace-plugin/src/generators/version-bump/index.spec.ts
index 9df3ac5383f86..6aa862f274405 100644
--- a/tools/generators/version-bump/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/version-bump/index.spec.ts
@@ -1,4 +1,4 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import {
   Tree,
   readProjectConfiguration,
@@ -6,7 +6,7 @@ import {
   serializeJson,
   addProjectConfiguration,
   readJson,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 
 import generator from './index';
 import { VersionBumpGeneratorSchema } from './schema';
diff --git a/tools/generators/version-bump/index.ts b/tools/workspace-plugin/src/generators/version-bump/index.ts
similarity index 98%
rename from tools/generators/version-bump/index.ts
rename to tools/workspace-plugin/src/generators/version-bump/index.ts
index 6b6e483297807..5bc785d53ae00 100644
--- a/tools/generators/version-bump/index.ts
+++ b/tools/workspace-plugin/src/generators/version-bump/index.ts
@@ -1,4 +1,4 @@
-import { Tree, updateJson, getProjects, formatFiles } from '@nrwl/devkit';
+import { Tree, updateJson, getProjects, formatFiles } from '@nx/devkit';
 import * as semver from 'semver';
 import { VersionBumpGeneratorSchema } from './schema';
 import {
diff --git a/tools/generators/version-bump/schema.json b/tools/workspace-plugin/src/generators/version-bump/schema.json
similarity index 100%
rename from tools/generators/version-bump/schema.json
rename to tools/workspace-plugin/src/generators/version-bump/schema.json
diff --git a/tools/generators/version-bump/schema.ts b/tools/workspace-plugin/src/generators/version-bump/schema.ts
similarity index 100%
rename from tools/generators/version-bump/schema.ts
rename to tools/workspace-plugin/src/generators/version-bump/schema.ts
diff --git a/tools/generators/workspace-generator/files/README.md__tmpl__ b/tools/workspace-plugin/src/generators/workspace-generator/files/README.md__tmpl__
similarity index 66%
rename from tools/generators/workspace-generator/files/README.md__tmpl__
rename to tools/workspace-plugin/src/generators/workspace-generator/files/README.md__tmpl__
index bc178a0a4791b..c8c43fea0f3ad 100644
--- a/tools/generators/workspace-generator/files/README.md__tmpl__
+++ b/tools/workspace-plugin/src/generators/workspace-generator/files/README.md__tmpl__
@@ -14,19 +14,19 @@ Workspace Generator ...TODO...
 ## Usage
 
 ```sh
-yarn nx workspace-generator <%= name %> ...
+yarn nx g @fluentui/workspace-plugin:<%= name %> ...
 ```
 
 Show what will be generated without writing to disk:
 
 ```sh
-yarn nx workspace-generator <%= name %> --dry-run
+yarn nx g @fluentui/workspace-plugin:<%= name %> --dry-run
 ```
 
 ### Examples
 
 ```sh
-yarn nx workspace-generator <%= name %>
+yarn nx g @fluentui/workspace-plugin:<%= name %>
 ```
 
 ## Options
diff --git a/tools/generators/workspace-generator/files/index.spec.ts__tmpl__ b/tools/workspace-plugin/src/generators/workspace-generator/files/index.spec.ts__tmpl__
similarity index 78%
rename from tools/generators/workspace-generator/files/index.spec.ts__tmpl__
rename to tools/workspace-plugin/src/generators/workspace-generator/files/index.spec.ts__tmpl__
index 29644b41f0f8d..1735505e90fd0 100644
--- a/tools/generators/workspace-generator/files/index.spec.ts__tmpl__
+++ b/tools/workspace-plugin/src/generators/workspace-generator/files/index.spec.ts__tmpl__
@@ -1,5 +1,5 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-import { Tree, readProjectConfiguration } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { Tree, readProjectConfiguration } from '@nx/devkit';
 
 import generator from './index';
 import { <%= className %>GeneratorSchema } from './schema';
diff --git a/tools/generators/workspace-generator/files/index.ts__tmpl__ b/tools/workspace-plugin/src/generators/workspace-generator/files/index.ts__tmpl__
similarity index 92%
rename from tools/generators/workspace-generator/files/index.ts__tmpl__
rename to tools/workspace-plugin/src/generators/workspace-generator/files/index.ts__tmpl__
index e51f8d042804b..98e37daed0388 100644
--- a/tools/generators/workspace-generator/files/index.ts__tmpl__
+++ b/tools/workspace-plugin/src/generators/workspace-generator/files/index.ts__tmpl__
@@ -1,6 +1,6 @@
 import * as path from 'path';
-import { Tree, formatFiles, installPackagesTask, names, generateFiles } from '@nrwl/devkit';
-import { libraryGenerator } from '@nrwl/workspace/generators';
+import { Tree, formatFiles, installPackagesTask, names, generateFiles } from '@nx/devkit';
+import { libraryGenerator } from '@nx/workspace/generators';
 
 import { getProjectConfig } from '../../utils';
 
diff --git a/tools/generators/workspace-generator/files/lib/utils.spec.ts__tmpl__ b/tools/workspace-plugin/src/generators/workspace-generator/files/lib/utils.spec.ts__tmpl__
similarity index 100%
rename from tools/generators/workspace-generator/files/lib/utils.spec.ts__tmpl__
rename to tools/workspace-plugin/src/generators/workspace-generator/files/lib/utils.spec.ts__tmpl__
diff --git a/tools/generators/workspace-generator/files/lib/utils.ts__tmpl__ b/tools/workspace-plugin/src/generators/workspace-generator/files/lib/utils.ts__tmpl__
similarity index 100%
rename from tools/generators/workspace-generator/files/lib/utils.ts__tmpl__
rename to tools/workspace-plugin/src/generators/workspace-generator/files/lib/utils.ts__tmpl__
diff --git a/tools/generators/workspace-generator/files/schema.json__tmpl__ b/tools/workspace-plugin/src/generators/workspace-generator/files/schema.json__tmpl__
similarity index 100%
rename from tools/generators/workspace-generator/files/schema.json__tmpl__
rename to tools/workspace-plugin/src/generators/workspace-generator/files/schema.json__tmpl__
diff --git a/tools/generators/workspace-generator/files/schema.ts__tmpl__ b/tools/workspace-plugin/src/generators/workspace-generator/files/schema.ts__tmpl__
similarity index 100%
rename from tools/generators/workspace-generator/files/schema.ts__tmpl__
rename to tools/workspace-plugin/src/generators/workspace-generator/files/schema.ts__tmpl__
diff --git a/tools/generators/workspace-generator/index.spec.ts b/tools/workspace-plugin/src/generators/workspace-generator/index.spec.ts
similarity index 90%
rename from tools/generators/workspace-generator/index.spec.ts
rename to tools/workspace-plugin/src/generators/workspace-generator/index.spec.ts
index b62715be811d0..3ae0404d0b8d7 100644
--- a/tools/generators/workspace-generator/index.spec.ts
+++ b/tools/workspace-plugin/src/generators/workspace-generator/index.spec.ts
@@ -1,5 +1,5 @@
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-import { Tree, readJson } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { Tree, readJson } from '@nx/devkit';
 
 import generator from './index';
 import { WorkspaceGeneratorGeneratorSchema } from './schema';
@@ -62,8 +62,8 @@ describe('workspace-generator generator', () => {
         installPackagesTask,
         names,
         generateFiles,
-      } from '@nrwl/devkit';
-      import { libraryGenerator } from '@nrwl/workspace/generators';
+      } from '@nx/devkit';
+      import { libraryGenerator } from '@nx/workspace/generators';
 
       import { getProjectConfig } from '../../utils';
 
@@ -121,8 +121,8 @@ describe('workspace-generator generator', () => {
     const content = tree.read('/tools/generators/custom/index.spec.ts')?.toString();
 
     expect(content).toMatchInlineSnapshot(`
-      "import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-      import { Tree, readProjectConfiguration } from '@nrwl/devkit';
+      "import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+      import { Tree, readProjectConfiguration } from '@nx/devkit';
 
       import generator from './index';
       import { CustomGeneratorSchema } from './schema';
@@ -167,19 +167,19 @@ describe('workspace-generator generator', () => {
       ## Usage
 
       \`\`\`sh
-      yarn nx workspace-generator custom ...
+      yarn nx g @fluentui/workspace-plugin:custom ...
       \`\`\`
 
       Show what will be generated without writing to disk:
 
       \`\`\`sh
-      yarn nx workspace-generator custom --dry-run
+      yarn nx g @fluentui/workspace-plugin:custom --dry-run
       \`\`\`
 
       ### Examples
 
       \`\`\`sh
-      yarn nx workspace-generator custom
+      yarn nx g @fluentui/workspace-plugin:custom
       \`\`\`
 
       ## Options
diff --git a/tools/generators/workspace-generator/index.ts b/tools/workspace-plugin/src/generators/workspace-generator/index.ts
similarity index 98%
rename from tools/generators/workspace-generator/index.ts
rename to tools/workspace-plugin/src/generators/workspace-generator/index.ts
index 47d61cd42aeb1..ee3f332a9a6db 100644
--- a/tools/generators/workspace-generator/index.ts
+++ b/tools/workspace-plugin/src/generators/workspace-generator/index.ts
@@ -1,5 +1,5 @@
 import * as path from 'path';
-import { Tree, formatFiles, generateFiles, names, offsetFromRoot } from '@nrwl/devkit';
+import { Tree, formatFiles, generateFiles, names, offsetFromRoot } from '@nx/devkit';
 
 import { WorkspaceGeneratorGeneratorSchema } from './schema';
 
diff --git a/tools/generators/workspace-generator/schema.json b/tools/workspace-plugin/src/generators/workspace-generator/schema.json
similarity index 100%
rename from tools/generators/workspace-generator/schema.json
rename to tools/workspace-plugin/src/generators/workspace-generator/schema.json
diff --git a/tools/generators/workspace-generator/schema.ts b/tools/workspace-plugin/src/generators/workspace-generator/schema.ts
similarity index 100%
rename from tools/generators/workspace-generator/schema.ts
rename to tools/workspace-plugin/src/generators/workspace-generator/schema.ts
diff --git a/tools/workspace-plugin/src/index.ts b/tools/workspace-plugin/src/index.ts
new file mode 100644
index 0000000000000..cb0ff5c3b541f
--- /dev/null
+++ b/tools/workspace-plugin/src/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/tools/types.spec.ts b/tools/workspace-plugin/src/types.spec.ts
similarity index 100%
rename from tools/types.spec.ts
rename to tools/workspace-plugin/src/types.spec.ts
diff --git a/tools/types.ts b/tools/workspace-plugin/src/types.ts
similarity index 100%
rename from tools/types.ts
rename to tools/workspace-plugin/src/types.ts
diff --git a/tools/utils-testing.ts b/tools/workspace-plugin/src/utils-testing.ts
similarity index 92%
rename from tools/utils-testing.ts
rename to tools/workspace-plugin/src/utils-testing.ts
index 33f9b00f34879..dc0aab9b6a255 100644
--- a/tools/utils-testing.ts
+++ b/tools/workspace-plugin/src/utils-testing.ts
@@ -1,4 +1,4 @@
-import { stripIndents, Tree } from '@nrwl/devkit';
+import { stripIndents, Tree } from '@nx/devkit';
 import type { Chalk } from 'chalk';
 
 import { workspacePaths } from './utils';
diff --git a/tools/utils.spec.ts b/tools/workspace-plugin/src/utils.spec.ts
similarity index 97%
rename from tools/utils.spec.ts
rename to tools/workspace-plugin/src/utils.spec.ts
index 9f0d30e1fb734..5e30b169649b8 100644
--- a/tools/utils.spec.ts
+++ b/tools/workspace-plugin/src/utils.spec.ts
@@ -1,4 +1,4 @@
-import { logger } from '@nrwl/devkit';
+import { logger } from '@nx/devkit';
 import { printUserLogs } from './utils';
 
 describe(`utils`, () => {
diff --git a/tools/utils.ts b/tools/workspace-plugin/src/utils.ts
similarity index 97%
rename from tools/utils.ts
rename to tools/workspace-plugin/src/utils.ts
index d2b6a48720c56..b3794830e720a 100644
--- a/tools/utils.ts
+++ b/tools/workspace-plugin/src/utils.ts
@@ -9,7 +9,7 @@ import {
   ProjectConfiguration,
   readJson,
   readNxJson,
-} from '@nrwl/devkit';
+} from '@nx/devkit';
 import { PackageJson, PackageJsonWithBeachball } from './types';
 import * as semver from 'semver';
 
@@ -80,7 +80,7 @@ export function parseArgs<T extends Record<string, any>>(args: string[]) {
   return parsedArguments;
 }
 
-export { updateJestConfig } from '@nrwl/jest/src/generators/jest-project/lib/update-jestconfig';
+export { updateJestConfig } from '@nx/jest/src/generators/jest-project/lib/update-jestconfig';
 
 export function getProjectConfig(tree: Tree, options: { packageName: string }) {
   const projectConfig = readProjectConfiguration(tree, options.packageName);
@@ -165,7 +165,7 @@ export function printUserLogs(logs: UserLog) {
 }
 
 /**
- * Overridden `@nrwl/devkit#getProjects` function
+ * Overridden `@nx/devkit#getProjects` function
  * Get all workspace projects or only subset, if projectNames array is specified
  *
  * @param tree
diff --git a/tools/tsconfig.json b/tools/workspace-plugin/tsconfig.json
similarity index 63%
rename from tools/tsconfig.json
rename to tools/workspace-plugin/tsconfig.json
index adc4274b4103c..19b9eece4df14 100644
--- a/tools/tsconfig.json
+++ b/tools/workspace-plugin/tsconfig.json
@@ -1,19 +1,16 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "noEmit": true
+    "module": "commonjs"
   },
-  "include": [],
   "files": [],
+  "include": [],
   "references": [
     {
       "path": "./tsconfig.lib.json"
     },
     {
       "path": "./tsconfig.spec.json"
-    },
-    {
-      "path": "./tsconfig.tools.json"
     }
   ]
 }
diff --git a/tools/workspace-plugin/tsconfig.lib.json b/tools/workspace-plugin/tsconfig.lib.json
new file mode 100644
index 0000000000000..33eca2c2cdf8c
--- /dev/null
+++ b/tools/workspace-plugin/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/tools/workspace-plugin/tsconfig.spec.json b/tools/workspace-plugin/tsconfig.spec.json
new file mode 100644
index 0000000000000..f6d8ffcc9fb9b
--- /dev/null
+++ b/tools/workspace-plugin/tsconfig.spec.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"]
+}
diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json
index 09bf88da9e6be..d885a03a78aaa 100644
--- a/tsconfig.base.all.json
+++ b/tsconfig.base.all.json
@@ -99,7 +99,6 @@
       "@fluentui/react-colorpicker-compat": ["packages/react-components/react-colorpicker-compat/src/index.ts"],
       "@fluentui/react-combobox": ["packages/react-components/react-combobox/src/index.ts"],
       "@fluentui/react-components": ["packages/react-components/react-components/src/index.ts"],
-      "@fluentui/react-tags-preview": ["packages/react-components/react-tags-preview/src/index.ts"],
       "@fluentui/react-components/unstable": ["packages/react-components/react-components/src/unstable/index.ts"],
       "@fluentui/react-conformance": ["packages/react-conformance/src/index.ts"],
       "@fluentui/react-conformance-griffel": ["packages/react-components/react-conformance-griffel/src/index.ts"],
@@ -143,6 +142,7 @@
       "@fluentui/react-table": ["packages/react-components/react-table/src/index.ts"],
       "@fluentui/react-tabs": ["packages/react-components/react-tabs/src/index.ts"],
       "@fluentui/react-tabster": ["packages/react-components/react-tabster/src/index.ts"],
+      "@fluentui/react-tags-preview": ["packages/react-components/react-tags-preview/src/index.ts"],
       "@fluentui/react-text": ["packages/react-components/react-text/src/index.ts"],
       "@fluentui/react-textarea": ["packages/react-components/react-textarea/src/index.ts"],
       "@fluentui/react-theme": ["packages/react-components/react-theme/src/index.ts"],
@@ -154,7 +154,8 @@
       "@fluentui/react-utilities": ["packages/react-components/react-utilities/src/index.ts"],
       "@fluentui/react-virtualizer": ["packages/react-components/react-virtualizer/src/index.ts"],
       "@fluentui/theme-designer": ["packages/react-components/theme-designer/src/index.ts"],
-      "@fluentui/tokens": ["packages/tokens/src/index.ts"]
+      "@fluentui/tokens": ["packages/tokens/src/index.ts"],
+      "@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"]
     }
   }
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index c1fe5483f49a4..4819b7aea1418 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -89,7 +89,8 @@
       "@fluentui/react-utilities": ["packages/react-components/react-utilities/src/index.ts"],
       "@fluentui/react-virtualizer": ["packages/react-components/react-virtualizer/src/index.ts"],
       "@fluentui/theme-designer": ["packages/react-components/theme-designer/src/index.ts"],
-      "@fluentui/tokens": ["packages/tokens/src/index.ts"]
+      "@fluentui/tokens": ["packages/tokens/src/index.ts"],
+      "@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"]
     }
   },
   "exclude": ["node_modules"]
diff --git a/yarn.lock b/yarn.lock
index 2b03112f72437..7d8bf8fec08ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -203,7 +203,7 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.21.4", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.21.4", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
   integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
@@ -2128,11 +2128,6 @@
   resolved "https://registry.yarnpkg.com/@lage-run/logger/-/logger-1.1.1.tgz#250b3e237b100d48f95ead2fb95fb07f9297b947"
   integrity sha512-8ZWHKCnnOYdLlLS2sSrMRZ4PM3oY5uqc2JN1RptSaKg8tR8g6ITMRmJ04/J4OqqiXiWVv2vozGt9pgxJLI2i7A==
 
-"@leichtgewicht/ip-codec@^2.0.1":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
-  integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
-
 "@lerna/add@5.5.2":
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-5.5.2.tgz#d5970f408f7f8fa2eaa139e7d3c6a67bdd5fedb2"
@@ -3020,6 +3015,20 @@
   resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz#c3ec604a0b54b9a9b87e9735dfc59e1a5da6a5fb"
   integrity sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==
 
+"@mole-inc/bin-wrapper@^8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@mole-inc/bin-wrapper/-/bin-wrapper-8.0.1.tgz#d7fd0ceb1cfa8a855293a3ed9d7d135f4d442f0e"
+  integrity sha512-sTGoeZnjI8N4KS+sW2AN95gDBErhAguvkw/tWdCjeM8bvxpz5lqrnd0vOJABA1A+Ic3zED7PYoLP/RANLgVotA==
+  dependencies:
+    bin-check "^4.1.0"
+    bin-version-check "^5.0.0"
+    content-disposition "^0.5.4"
+    ext-name "^5.0.0"
+    file-type "^17.1.6"
+    filenamify "^5.0.2"
+    got "^11.8.5"
+    os-filter-obj "^2.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -3239,87 +3248,40 @@
   dependencies:
     nx "15.9.4"
 
-"@nrwl/devkit@15.9.4":
-  version "15.9.4"
-  resolved "https://registry.yarnpkg.com/@nrwl/devkit/-/devkit-15.9.4.tgz#3f0a43a9637fcd0a46c06df2a9c36012b27f006b"
-  integrity sha512-mUX1kXTuPMdTzFxIzH+MsSNvdppOmstPDOEtiGFZJTuJ625ki0HhNJILO3N2mJ7MeMrLqIlAiNdvelQaObxYsQ==
+"@nrwl/devkit@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nrwl/devkit/-/devkit-16.1.4.tgz#3c39dc0dbca2e8c526c6c5ae35f834a748308900"
+  integrity sha512-ojFu+fmOja+Kt7TZ7T+GmLkPw9z/sIAbmMx1V6ePIsS2XdB68Tc4UyXiQpx18hCwIpOxFf2BatoeLIgledWsXw==
   dependencies:
-    ejs "^3.1.7"
-    ignore "^5.0.4"
-    semver "7.3.4"
-    tmp "~0.2.1"
-    tslib "^2.3.0"
+    "@nx/devkit" "16.1.4"
 
-"@nrwl/jest@15.9.4":
-  version "15.9.4"
-  resolved "https://registry.yarnpkg.com/@nrwl/jest/-/jest-15.9.4.tgz#65daa9c321f4703eb3e4ab51945b018959bb6b7f"
-  integrity sha512-NI/ERsoqL5E5rHFkW1reLx0lgKtu3pKi8esFaIvBR/bQpygK2FTYTu41WBjwk0GfyFaI1tVxOYeV436UXSBDrQ==
+"@nrwl/jest@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nrwl/jest/-/jest-16.1.4.tgz#bc97b0d363e59bd55e6019bf0d25717ed016ad7f"
+  integrity sha512-ZmXb7FPHktbAaIWsNDopPm5fo2NFXXlOE41nTtuISW9/r+RW2sEg81afJr/WT+jmaQwwTAqEfNYnv+VtorKMmg==
   dependencies:
-    "@jest/reporters" "^29.4.1"
-    "@jest/test-result" "^29.4.1"
-    "@nrwl/devkit" "15.9.4"
-    "@nrwl/js" "15.9.4"
-    "@phenomnomnominal/tsquery" "4.1.1"
-    chalk "^4.1.0"
-    dotenv "~10.0.0"
-    identity-obj-proxy "3.0.0"
-    jest-config "^29.4.1"
-    jest-resolve "^29.4.1"
-    jest-util "^29.4.1"
-    resolve.exports "1.1.0"
-    tslib "^2.3.0"
+    "@nx/jest" "16.1.4"
 
-"@nrwl/js@15.9.4":
-  version "15.9.4"
-  resolved "https://registry.yarnpkg.com/@nrwl/js/-/js-15.9.4.tgz#3256955e3fe21b999b4f5ae8ba722579fc9b4386"
-  integrity sha512-DMJ7qFf/nN5w1WZyxm9JaAPsdfAD+bjLJ8MKA6rtoHcMB3t/BtCZ8lsnsYRUJXFGwuY6aj71bQXQ6F+QQOJY4Q==
+"@nrwl/js@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nrwl/js/-/js-16.1.4.tgz#56ce4b21961ee85763bcc9e2918023ab2b1cc35d"
+  integrity sha512-U5R61b4CBo65xt2pOGYz0POZ4Xqq5vifdKzzrD/vYycak28tTHlhAkZLexXhzLJiUJh94Dack0Osb+FuZmbYWQ==
   dependencies:
-    "@babel/core" "^7.15.0"
-    "@babel/plugin-proposal-class-properties" "^7.14.5"
-    "@babel/plugin-proposal-decorators" "^7.14.5"
-    "@babel/plugin-transform-runtime" "^7.15.0"
-    "@babel/preset-env" "^7.15.0"
-    "@babel/preset-typescript" "^7.15.0"
-    "@babel/runtime" "^7.14.8"
-    "@nrwl/devkit" "15.9.4"
-    "@nrwl/workspace" "15.9.4"
-    "@phenomnomnominal/tsquery" "4.1.1"
-    babel-plugin-const-enum "^1.0.1"
-    babel-plugin-macros "^2.8.0"
-    babel-plugin-transform-typescript-metadata "^0.3.1"
-    chalk "^4.1.0"
-    fast-glob "3.2.7"
-    fs-extra "^11.1.0"
-    ignore "^5.0.4"
-    js-tokens "^4.0.0"
-    minimatch "3.0.5"
-    source-map-support "0.5.19"
-    tree-kill "1.2.2"
-    tslib "^2.3.0"
+    "@nx/js" "16.1.4"
 
-"@nrwl/linter@15.9.4":
-  version "15.9.4"
-  resolved "https://registry.yarnpkg.com/@nrwl/linter/-/linter-15.9.4.tgz#784804387a3e04f4fb8ab2eb4396f2c2711e3c82"
-  integrity sha512-J8CoccCNhIwzf02/oTpjo8VzrGuzKgOwD4mEnC48doi1FV9/uXT04da671uNHZjO5QRm3ptTzaqwo0sPRDPyuw==
+"@nrwl/linter@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nrwl/linter/-/linter-16.1.4.tgz#1181a1014749174ca57ad66c7c9cebf8bc6ae191"
+  integrity sha512-r0nKnC4EsGFVZO9caYDJ6y8wJLhZMj3TRi+Arf/1ALKEPYTAv8rrqgqf8t+4IiBzxY8DDausIwHfa3e4T3JH4g==
   dependencies:
-    "@nrwl/devkit" "15.9.4"
-    "@nrwl/js" "15.9.4"
-    "@phenomnomnominal/tsquery" "4.1.1"
-    tmp "~0.2.1"
-    tslib "^2.3.0"
+    "@nx/linter" "16.1.4"
 
-"@nrwl/node@15.9.4":
-  version "15.9.4"
-  resolved "https://registry.yarnpkg.com/@nrwl/node/-/node-15.9.4.tgz#d2765afa717ba06c69d97b9239ed347d29b8d51e"
-  integrity sha512-cpxG+EL9ajUJmHBrtjxBEX3Xgq7oD3GBYbeIYcP/0qJoKroBjiXb1FZbodBrcMQ0NayQ9+Y2RR4jpAwq4korvQ==
-  dependencies:
-    "@nrwl/devkit" "15.9.4"
-    "@nrwl/jest" "15.9.4"
-    "@nrwl/js" "15.9.4"
-    "@nrwl/linter" "15.9.4"
-    "@nrwl/webpack" "15.9.4"
-    "@nrwl/workspace" "15.9.4"
-    tslib "^2.3.0"
+"@nrwl/node@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nrwl/node/-/node-16.1.4.tgz#bd96ace18a73fe987e69a623e97ab2c8433dd6d2"
+  integrity sha512-5RbdXSdCDiinIpnwSCtad0i19Cicw/mu6gTgalkltbSULDn1J2AOBEzscdaxCzNso8xX0NfE85S+fi0xR9l4uA==
+  dependencies:
+    "@nx/node" "16.1.4"
 
 "@nrwl/nx-darwin-arm64@15.9.4":
   version "15.9.4"
@@ -3356,6 +3318,13 @@
   resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-x64-musl/-/nx-linux-x64-musl-15.9.4.tgz#29cd644736f643566d9c0e1a1171c49a62a08c09"
   integrity sha512-67+/XNMR1CgLPyeGX8jqSG6l8yYD0iiwUgcu1Vaxq6N05WwnqVisIW8XzLSRUtKt4WyVQgOWk3aspImpMVOG3Q==
 
+"@nrwl/nx-plugin@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nrwl/nx-plugin/-/nx-plugin-16.1.4.tgz#97ce355362b23c6f2bdf1e6c1b16217bcea096fa"
+  integrity sha512-LaP4EYFc38VMqGmkPsOqg9rNHdf1Pf4WZBr8eUL8h94zlYA6F5uZB2HS3RrTRQAcuA8dZ1+b9o9noUlB2GBdtw==
+  dependencies:
+    "@nx/plugin" "16.1.4"
+
 "@nrwl/nx-win32-arm64-msvc@15.9.4":
   version "15.9.4"
   resolved "https://registry.yarnpkg.com/@nrwl/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-15.9.4.tgz#55a38bf5dc201e9088729fb03e505dc63caf8b3a"
@@ -3373,59 +3342,173 @@
   dependencies:
     nx "15.9.4"
 
-"@nrwl/webpack@15.9.4":
-  version "15.9.4"
-  resolved "https://registry.yarnpkg.com/@nrwl/webpack/-/webpack-15.9.4.tgz#95624c3da4e86ff96839189b16e29771758a9151"
-  integrity sha512-zZuegYgdFPCD2HxKND6YxELLJ3g+kMmOFEa6gIkMqY+2hsW31GR1Wx4CRzbjbDxZrVfPuLvKlDucqGVG6nCDJA==
+"@nrwl/tao@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nrwl/tao/-/tao-16.1.4.tgz#695dba647e20661ff48700f8bc2d56e128584968"
+  integrity sha512-aArX3E7j+foUUzutsrgOc1lh9Rj5LDCAncHlszu0XGgHRO2EHE4qxZHvmgogGEpRf1ojTNAfN72xhVCSjtca/Q==
   dependencies:
-    "@babel/core" "^7.15.0"
-    "@nrwl/devkit" "15.9.4"
-    "@nrwl/js" "15.9.4"
-    "@nrwl/workspace" "15.9.4"
-    autoprefixer "^10.4.9"
-    babel-loader "^9.1.2"
+    nx "16.1.4"
+
+"@nrwl/workspace@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nrwl/workspace/-/workspace-16.1.4.tgz#f434278da2ceec9d603740fccfba50475944989a"
+  integrity sha512-B2qyR2tYykZ5rNeA9klNiEQ7y9rNMGQdnxyp+f6w7nMu8Qtpa1tMtqCyTORhShupRgcwON3oEVn5TznC9T2ZDA==
+  dependencies:
+    "@nx/workspace" "16.1.4"
+
+"@nx/devkit@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/devkit/-/devkit-16.1.4.tgz#0d425daf79e0daf772a5a456a053db750af14c19"
+  integrity sha512-tyAnpQShhKhR6FwmT7hJTaT/8B8YxFWhgBW0mLi9PhXYS9xRdgZ+ag8/T3EtJudIGMIdn4JhA1YL2zSuziHABQ==
+  dependencies:
+    "@nrwl/devkit" "16.1.4"
+    ejs "^3.1.7"
+    ignore "^5.0.4"
+    semver "7.3.4"
+    tmp "~0.2.1"
+    tslib "^2.3.0"
+
+"@nx/jest@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/jest/-/jest-16.1.4.tgz#879b1ac58f6d8ffb6f82aa99ae0a04c46f8b509e"
+  integrity sha512-lHuREK0luQMBbpp2jYNsE/VFsoy0tqW94QifT5EgsFTjL2L+yw1I7WbRTfemiBijgqmNsyWAXMsItSSr2tlrcA==
+  dependencies:
+    "@jest/reporters" "^29.4.1"
+    "@jest/test-result" "^29.4.1"
+    "@nrwl/jest" "16.1.4"
+    "@nx/devkit" "16.1.4"
+    "@nx/js" "16.1.4"
+    "@phenomnomnominal/tsquery" "~5.0.1"
     chalk "^4.1.0"
-    chokidar "^3.5.1"
-    copy-webpack-plugin "^10.2.4"
-    css-loader "^6.4.0"
-    css-minimizer-webpack-plugin "^3.4.1"
     dotenv "~10.0.0"
-    file-loader "^6.2.0"
-    fork-ts-checker-webpack-plugin "7.2.13"
+    identity-obj-proxy "3.0.0"
+    jest-config "^29.4.1"
+    jest-resolve "^29.4.1"
+    jest-util "^29.4.1"
+    resolve.exports "1.1.0"
+    tslib "^2.3.0"
+
+"@nx/js@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/js/-/js-16.1.4.tgz#3d85f549fceeaf9148edbc82abeec46d34731c80"
+  integrity sha512-LYPKvV7AjYvj25p7SVKny22DKVpGVfZ1y+EkmmqWEMvFSEmf7miOCjZEyZGv30CcxFRVDoZ7JZ16TB3S+Zy/gQ==
+  dependencies:
+    "@babel/core" "^7.15.0"
+    "@babel/plugin-proposal-class-properties" "^7.14.5"
+    "@babel/plugin-proposal-decorators" "^7.14.5"
+    "@babel/plugin-transform-runtime" "^7.15.0"
+    "@babel/preset-env" "^7.15.0"
+    "@babel/preset-typescript" "^7.15.0"
+    "@babel/runtime" "^7.14.8"
+    "@nrwl/js" "16.1.4"
+    "@nx/devkit" "16.1.4"
+    "@nx/workspace" "16.1.4"
+    "@phenomnomnominal/tsquery" "~5.0.1"
+    babel-plugin-const-enum "^1.0.1"
+    babel-plugin-macros "^2.8.0"
+    babel-plugin-transform-typescript-metadata "^0.3.1"
+    chalk "^4.1.0"
+    fast-glob "3.2.7"
+    fs-extra "^11.1.0"
     ignore "^5.0.4"
-    less "4.1.3"
-    less-loader "11.1.0"
-    license-webpack-plugin "^4.0.2"
-    loader-utils "^2.0.3"
-    mini-css-extract-plugin "~2.4.7"
-    parse5 "4.0.0"
-    postcss "^8.4.14"
-    postcss-import "~14.1.0"
-    postcss-loader "^6.1.1"
-    rxjs "^6.5.4"
-    sass "^1.42.1"
-    sass-loader "^12.2.0"
-    source-map-loader "^3.0.0"
-    style-loader "^3.3.0"
-    stylus "^0.55.0"
-    stylus-loader "^7.1.0"
-    terser-webpack-plugin "^5.3.3"
-    ts-loader "^9.3.1"
-    ts-node "10.9.1"
-    tsconfig-paths "^4.1.2"
-    tsconfig-paths-webpack-plugin "4.0.0"
+    js-tokens "^4.0.0"
+    minimatch "3.0.5"
+    source-map-support "0.5.19"
+    tree-kill "1.2.2"
     tslib "^2.3.0"
-    webpack "^5.75.0"
-    webpack-dev-server "^4.9.3"
-    webpack-node-externals "^3.0.0"
-    webpack-subresource-integrity "^5.1.0"
 
-"@nrwl/workspace@15.9.4":
-  version "15.9.4"
-  resolved "https://registry.yarnpkg.com/@nrwl/workspace/-/workspace-15.9.4.tgz#38ebabb56c6af0adfa70b593631f87335c5eb644"
-  integrity sha512-CvF6Bv0WetYD4eurTiLKyGz3LOLoEVur81RMvpijPeM2tKOhG3DrgX+x55a5NVbXimTU2hJcxk7GSGEtZmJvZg==
+"@nx/linter@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/linter/-/linter-16.1.4.tgz#5cfdcac3f5e9b5ef48e400ed6dbbfd2c0b9301d5"
+  integrity sha512-wxgyOvQJuBUCU0n6YY7QSgCFGUPTqoGp/zXfrcpDYOZZPYEygENw3Y7NPDrffXvJOcNh2Wb5z0ZaVH5sp2LYNw==
+  dependencies:
+    "@nrwl/linter" "16.1.4"
+    "@nx/devkit" "16.1.4"
+    "@nx/js" "16.1.4"
+    "@phenomnomnominal/tsquery" "~5.0.1"
+    tmp "~0.2.1"
+    tslib "^2.3.0"
+
+"@nx/node@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/node/-/node-16.1.4.tgz#c34a699d451d1754beb5dbfc71c9d5f0281eb4bf"
+  integrity sha512-wmKfFsJSoXnjOJCclwhVwdp6MLwlUdWRohsKy99iMkDX1kRSI50w68lPyVmawGwL4+XivT89dkFm0bJsy0GdyQ==
+  dependencies:
+    "@nrwl/node" "16.1.4"
+    "@nx/devkit" "16.1.4"
+    "@nx/jest" "16.1.4"
+    "@nx/js" "16.1.4"
+    "@nx/linter" "16.1.4"
+    "@nx/workspace" "16.1.4"
+    tslib "^2.3.0"
+
+"@nx/nx-darwin-arm64@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/nx-darwin-arm64/-/nx-darwin-arm64-16.1.4.tgz#4bc8db556dedd820084f0aead7c3551894e0de53"
+  integrity sha512-0eITl+18xLtdiAVlv+LRukCHBLSLk8L8OkMnfLoK286sIblK31p2pzr1jL68ILUWPGGbdgo+nDEaaDTwh4tYRA==
+
+"@nx/nx-darwin-x64@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/nx-darwin-x64/-/nx-darwin-x64-16.1.4.tgz#d18a3e4b8f7489464ae95c884cc66cb68026bbf4"
+  integrity sha512-owgIq/KsCU/QBK6Y7FsblnPPI0oSccJXaISKbPcCWnkD38rtUkaR99Eh2LvoUpcnvvpL0yldkkdMBzVvDwOSZg==
+
+"@nx/nx-linux-arm-gnueabihf@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-16.1.4.tgz#5abe9c94ebf4ea1265cf38b0f6aea3afe93e2892"
+  integrity sha512-TqphSqAvQcgu83hE/XvJfGALq6EFqfRROct92whj+K5sz/AH67jnFPW+cHnXDwqIlgRB3lj/DFVqlNED8pBHfg==
+
+"@nx/nx-linux-arm64-gnu@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-16.1.4.tgz#47d4e6ba6f5540a4dd955af6c4cabda8285d455a"
+  integrity sha512-0AmO57zf5+ZrIa9XIkmRSbPF/gMqDNlMtMj8q1S+uYRU+WOAW+k1RbcFKdN0voH5eBDVQ03sqkgj9wTNS/m/vQ==
+
+"@nx/nx-linux-arm64-musl@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-16.1.4.tgz#67a76291b348c58aabcfd2830daffcd9277bee9c"
+  integrity sha512-10zAgZP+xh7HwyfDJyiyjAQD2gjvb4ZfCDAOE2Boe5yYcD27SqwAIzgrCc4DjRbUWSdufA4rclyXXp2tSb3uyA==
+
+"@nx/nx-linux-x64-gnu@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-16.1.4.tgz#d9703193faf2b8487072302b86f3dcba582b7e83"
+  integrity sha512-vVea3E6uHvrVieaOHIXKziN/vMbn9g2caiE4N7WiuAPrp2t4jbhtYqcQoNeNVjl92trQu/l2Ma3knmbn75J7jA==
+
+"@nx/nx-linux-x64-musl@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-16.1.4.tgz#09b79bdb28205008f615f7ecb9d848bdc30ebded"
+  integrity sha512-HhJPPU0rBzGeqTrylEjOu190rnMvA0HK7nghyEtTGhdCcTRs1ulfgl6swjAjXtXtGA/rXXkk0IKI7luGBcH6zg==
+
+"@nx/nx-win32-arm64-msvc@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-16.1.4.tgz#6da2004760fbb71cd9dfdfa4b884c97fa20dad3d"
+  integrity sha512-+iaU0yXkgF0Y5fvWFPP2cziDvd+QjQDnhk7/+i9Nk1C8vOaNHkMjx6qL2dNO2qoT49qMhjnI/hzL7+FBVPh11w==
+
+"@nx/nx-win32-x64-msvc@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-16.1.4.tgz#4aa82ecb3bb24aa40e18818c7d7d3764b800445c"
+  integrity sha512-s+H59UBB/dtdvZ+KWCe2PrVWZyoxsl6Vx+hzdUvCwI8f+cZmLRblTThLhUaBgdWLVqzFPemTkWIUasiRx/+3PQ==
+
+"@nx/plugin@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/plugin/-/plugin-16.1.4.tgz#695b472d63e4d859f0c93f6973b480abe9f610bc"
+  integrity sha512-wJXwtIv566XFhSKgdRRitT/jPrCnmZKGEPQISzJJKpQ3PO+eZU3dmE9WrQ5LJabkZaC0MHfBBFbRvjrmCH/LNA==
+  dependencies:
+    "@nrwl/nx-plugin" "16.1.4"
+    "@nx/devkit" "16.1.4"
+    "@nx/jest" "16.1.4"
+    "@nx/js" "16.1.4"
+    "@nx/linter" "16.1.4"
+    "@phenomnomnominal/tsquery" "~5.0.1"
+    dotenv "~10.0.0"
+    fs-extra "^11.1.0"
+    tslib "^2.3.0"
+
+"@nx/workspace@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/@nx/workspace/-/workspace-16.1.4.tgz#771c90ae8f158620d6c8b0b6e73c9b8d834592bd"
+  integrity sha512-FjzCmbitepS1pH8fqK2I2W3pbJ20+om8rFAQhMUkdJEtio+AXgHdyRfrkjlmNWXME1E0qZc7R0GzD6tILFb0Ew==
   dependencies:
-    "@nrwl/devkit" "15.9.4"
+    "@nrwl/workspace" "16.1.4"
+    "@nx/devkit" "16.1.4"
     "@parcel/watcher" "2.0.4"
     chalk "^4.1.0"
     chokidar "^3.5.1"
@@ -3434,13 +3517,12 @@
     dotenv "~10.0.0"
     figures "3.2.0"
     flat "^5.0.2"
-    glob "7.1.4"
     ignore "^5.0.4"
     minimatch "3.0.5"
     npm-run-path "^4.0.1"
-    nx "15.9.4"
+    nx "16.1.4"
     open "^8.4.0"
-    rxjs "^6.5.4"
+    rxjs "^7.8.0"
     tmp "~0.2.1"
     tslib "^2.3.0"
     yargs "^17.6.2"
@@ -3683,13 +3765,6 @@
     node-addon-api "^3.2.1"
     node-gyp-build "^4.3.0"
 
-"@phenomnomnominal/tsquery@4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@phenomnomnominal/tsquery/-/tsquery-4.1.1.tgz#42971b83590e9d853d024ddb04a18085a36518df"
-  integrity sha512-jjMmK1tnZbm1Jq5a7fBliM4gQwjxMU7TFoRNwIyzwlO+eHPRCFv/Nv+H/Gi1jc3WR7QURG8D5d0Tn12YGrUqBQ==
-  dependencies:
-    esquery "^1.0.1"
-
 "@phenomnomnominal/tsquery@6.1.2":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@phenomnomnominal/tsquery/-/tsquery-6.1.2.tgz#37ec13373ec144f524958770ebc294d0b5e2909e"
@@ -3698,6 +3773,13 @@
     "@types/esquery" "^1.5.0"
     esquery "^1.5.0"
 
+"@phenomnomnominal/tsquery@~5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@phenomnomnominal/tsquery/-/tsquery-5.0.1.tgz#a2a5abc89f92c01562a32806655817516653a388"
+  integrity sha512-3nVv+e2FQwsW8Aw6qTU6f+1rfcJ3hrcnvH/mu9i8YhxO+9sqbOfpL8m6PbET5+xKOlz/VSbp0RoYWYCtIsnmuA==
+  dependencies:
+    esquery "^1.4.0"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz#58f8217ba70069cc6a73f5d7e05e85b458c150e2"
@@ -4789,96 +4871,83 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@swc-node/core@^1.10.0":
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/@swc-node/core/-/core-1.10.3.tgz#dbc37c6d8d28ce59bd1bc55b300fb92bd3876152"
-  integrity sha512-8rpv1DXzsQjN/C8ZXuaTSmJ4M/lRr6geUlbOQ861DLC+sKWcEEvxRjK9cXQ28GserHuEcFDA3wlF9rD1YD0x+Q==
-
-"@swc-node/register@1.6.1":
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/@swc-node/register/-/register-1.6.1.tgz#e2e6172aeebb9e34a7a5c154958420c8e4dc98ff"
-  integrity sha512-4/vx+bE8tG+gDhvMpaoqiaTXuTMSK+e4ohujn8rj9IW3SSCK4/dYIJKwxW0Mn2sOPMIdylhxu70WWuSRCUG38g==
+"@swc/cli@0.1.62":
+  version "0.1.62"
+  resolved "https://registry.yarnpkg.com/@swc/cli/-/cli-0.1.62.tgz#6442fde2fcf75175a300fb4fcf30f8c60bbb3ab3"
+  integrity sha512-kOFLjKY3XH1DWLfXL1/B5MizeNorHR8wHKEi92S/Zi9Md/AK17KSqR8MgyRJ6C1fhKHvbBCl8wboyKAFXStkYw==
   dependencies:
-    "@swc-node/core" "^1.10.0"
-    "@swc-node/sourcemap-support" "^0.3.0"
-    colorette "^2.0.19"
-    debug "^4.3.4"
-    pirates "^4.0.5"
-    tslib "^2.5.0"
+    "@mole-inc/bin-wrapper" "^8.0.1"
+    commander "^7.1.0"
+    fast-glob "^3.2.5"
+    semver "^7.3.8"
+    slash "3.0.0"
+    source-map "^0.7.3"
 
-"@swc-node/sourcemap-support@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@swc-node/sourcemap-support/-/sourcemap-support-0.3.0.tgz#e8a0d139bd3e8db39635f63fde43dbe6c39237cc"
-  integrity sha512-gqBJSmJMWomZFxlppaKea7NeAqFrDrrS0RMt24No92M3nJWcyI9YKGEQKl+EyJqZ5gh6w1s0cTklMHMzRwA1NA==
-  dependencies:
-    source-map-support "^0.5.21"
-    tslib "^2.5.0"
-
-"@swc/core-darwin-arm64@1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.30.tgz#fb9b20a46455f49597e760e4dfe829196e0fe12e"
-  integrity sha512-GZ4mZZbH77N8renK34A3Lkhl6x8z+c97SCbl43pn5E0Z0sifohA8WNhrtucKrUdid0svYibwotJzeFNpDtg7gQ==
-
-"@swc/core-darwin-x64@1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.3.30.tgz#2fd86123d697c024f7fe45995a3ef5a4e5e4eef0"
-  integrity sha512-ppGrAJmKpT3vFr2vGaxXFL8JqHsb6kSAj0dVYTNYicl3c6XOjnMiNSfu6HRbdmXt0VpFHhC5L/a7Ta89mQ1sJA==
-
-"@swc/core-linux-arm-gnueabihf@1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.30.tgz#a67ffdc80a63b68471bc176206237bd68576be40"
-  integrity sha512-XQYY/VNRnM0/779ehfMgh2poO3reOANvfzOprF8xmGK20+DxFqbMWjHhJutscQuEjLtdwk/LfgCkwmTaB1hhwg==
-
-"@swc/core-linux-arm64-gnu@1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.30.tgz#7f9b2f860b8abac6636b6ffb46004da4589b513f"
-  integrity sha512-ME4BjMYSXana0Lfswa3aQW0rTdmR9wa1NGQ3t6MYLdBVm+76Xwe29JKlOfnI1iCCtcbRBoWy4dlhyuxW8DN7cw==
-
-"@swc/core-linux-arm64-musl@1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.30.tgz#b917db1f71b8382e033b8bcbeccd8a326747c41b"
-  integrity sha512-h3X9Pn1m5kuFSW8lJyDiMB4ELNZFJ+QxLva5GCxZDArQttkNeY4tMNWFcaG44xUXeywffrgjpXO7Yj2JGzmG4g==
-
-"@swc/core-linux-x64-gnu@1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.30.tgz#fc63a70a34d444b0a9460caeb239c630e8cf905b"
-  integrity sha512-vfPR8cakx5IZQSpNuXPrpkRprBdVxXsvN5JWN3fpuNVIgFFo3q8njihaItujKvePIHQwov4achfBZlm4JRitWQ==
-
-"@swc/core-linux-x64-musl@1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.30.tgz#07003373a8813c3b82bd8ad2c2ea500a8cd6c9cd"
-  integrity sha512-jtfv8N+00E2RMTVjwfTfimeqzo0B9FmbbSkzlnLvkmV8xDAPyLmX7v/xL5YiVJRLeSrlJ7DmkCSxLzpJao73dw==
-
-"@swc/core-win32-arm64-msvc@1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.30.tgz#473eb708d2a162dd91bca2327e540ad3be57051d"
-  integrity sha512-fX3T6JzS5F8JJ/UZQWrZfdml8nLuSzgA0EFKetTNa5AHh1x9ltShmlFOJ3OPpD9BKI/QcQSLxyoAjxt7NtAnaQ==
-
-"@swc/core-win32-ia32-msvc@1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.30.tgz#7ea1b9b9d68d91050d25baf300a119f699ccb5a7"
-  integrity sha512-m88NjTcVFHFAciWRWTW7NbeQPrzjKKBzSoSPukhjvKSWQNk5v6BBbTAKpymNGQssPn5WLarC2QlQzCwjyh1QLA==
-
-"@swc/core-win32-x64-msvc@1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.30.tgz#43bd3cd1d48a0b7659a8834e0a3e5a3322cea8ca"
-  integrity sha512-HsePRjbdD5XsnS8NkN+MmhtUyjF16cU3COd92DjRYKsB1rMDE51itfacBvOeZPHFV6VkrLsakubAZCMc+3d/Ag==
-
-"@swc/core@1.3.30", "@swc/core@^1.2.152":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.3.30.tgz#f4b3b55d37f766d6246829528b123bc4c8068866"
-  integrity sha512-pg6GWw615EwCh4vJ5k7xll1E4WJSPeINrRvF/EPyBvNNhlXR3s6+KZevJTx3PpA5PXjprDR0aqwi0/aigSCAPA==
+"@swc/core-darwin-arm64@1.3.44":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.44.tgz#e0f5eb9d962c4e6192531c2e3b8c11f55faf1b89"
+  integrity sha512-Y+oVsCjXUPvr3D9YLuB1gjP84TseM/CRkbPNrf+3JXQhsPEkgxdIdFP1cl/obeqMQrRgPpvSfK+TOvGuOuV22g==
+
+"@swc/core-darwin-x64@1.3.44":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.3.44.tgz#a8de4c176a9b12f201fc754a56331113a53ec69c"
+  integrity sha512-bM0IKBjlSD0yHJbd7bE3il5fTu3oUjUO2zjLkzfIx6tiqbmDyvOX8adaSqse9N+d8Ip9p26b5Vo7pMHq0POGkg==
+
+"@swc/core-linux-arm-gnueabihf@1.3.44":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.44.tgz#300731367c88bf02b8ae20264d4d402362e444df"
+  integrity sha512-D4lfVwCbkWscDTb6btb89+bN0kgvjGBPfOmcvih7nY5hxaorwvp+PefkYAhFw8vKmL92lrnWUFNiTemVFN4bxg==
+
+"@swc/core-linux-arm64-gnu@1.3.44":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.44.tgz#8b52d1cd28f277d47bb45c6791f44da568a62bc4"
+  integrity sha512-muExPTrN26MFmtO+5uffkH5v4lmd8GdmyWvlC2tL95h7o9genTIQyr7kcSepGZrDe4fM9G6++5YfENhUpXHo+g==
+
+"@swc/core-linux-arm64-musl@1.3.44":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.44.tgz#7b0e62255ae13c397f09ca5da8bf2266482a28c2"
+  integrity sha512-MY1wY3kSIosjJKKCfFGniJFFVkt3oPvJLN4Dlj+bMgAt3O7anm8lGbyLqUpJ1Ep4rTsJj7ObO06DQiSWp4Fhcw==
+
+"@swc/core-linux-x64-gnu@1.3.44":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.44.tgz#0b8b2544c312f247aa5c5f31671a175ad6488309"
+  integrity sha512-xV4pDxJM06g0yUDTA22ZHgonzGqf/poIlgADRmEkx9cWWm5qLRhmWrrkVX1xZVvdlcXj1ERnia/UkvrDux96lg==
+
+"@swc/core-linux-x64-musl@1.3.44":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.44.tgz#5b1f76fc1dc75875df59d8c0ff37e99e030f9552"
+  integrity sha512-NJnnlE8vCkKHoo/wIaoywNN/01vNsvhKUjBgUx865sUM/XWAIanpbV41yfdEkC+Iwd+/zB3ZZnOYql3b+Nn8aQ==
+
+"@swc/core-win32-arm64-msvc@1.3.44":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.44.tgz#bd4aefcd7734229f780c9bec0502935884935f0f"
+  integrity sha512-/xOtjZhX25GEOPLN55icjj9E061DDH7G0A9HfUAEilURgBbvm6bIlqK+t8mOKK0tOsDoHftdTBRkYhTAqUtakQ==
+
+"@swc/core-win32-ia32-msvc@1.3.44":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.44.tgz#0c2ba768f33acb580422e17d4ae816ebfd3dcfe0"
+  integrity sha512-uKTAWQuMEW1gJnl8F3eiz3kdk8CiaR5dMWWlGbHIq6dRbur2hoKaEnINR4UqkvvAhhY1YB0Xr5DV1H986Xu2EA==
+
+"@swc/core-win32-x64-msvc@1.3.44":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.44.tgz#b137abefbeb3b73a47cc398bc5603ea6bf6a3a7b"
+  integrity sha512-D9fBRhr44cK4YIKFikpktyUDLkZgVj0ISaSl8IjiTvjqTrE/9+E+dzTNHULn5tc3lHVLLxyVwMjJRr2G0D4O6w==
+
+"@swc/core@1.3.44", "@swc/core@^1.2.152":
+  version "1.3.44"
+  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.3.44.tgz#2886bdd647942f9670b65c02b6d5484ff3070ddd"
+  integrity sha512-RC25C8nxOCdfGS//F9Q8aHKx4XoCsxvgO+sSUhvt7zDz1Y2ruVUTu2UOH0VeE0WkA8j6oEZH+xH2SUfDUkxXdA==
   optionalDependencies:
-    "@swc/core-darwin-arm64" "1.3.30"
-    "@swc/core-darwin-x64" "1.3.30"
-    "@swc/core-linux-arm-gnueabihf" "1.3.30"
-    "@swc/core-linux-arm64-gnu" "1.3.30"
-    "@swc/core-linux-arm64-musl" "1.3.30"
-    "@swc/core-linux-x64-gnu" "1.3.30"
-    "@swc/core-linux-x64-musl" "1.3.30"
-    "@swc/core-win32-arm64-msvc" "1.3.30"
-    "@swc/core-win32-ia32-msvc" "1.3.30"
-    "@swc/core-win32-x64-msvc" "1.3.30"
+    "@swc/core-darwin-arm64" "1.3.44"
+    "@swc/core-darwin-x64" "1.3.44"
+    "@swc/core-linux-arm-gnueabihf" "1.3.44"
+    "@swc/core-linux-arm64-gnu" "1.3.44"
+    "@swc/core-linux-arm64-musl" "1.3.44"
+    "@swc/core-linux-x64-gnu" "1.3.44"
+    "@swc/core-linux-x64-musl" "1.3.44"
+    "@swc/core-win32-arm64-msvc" "1.3.44"
+    "@swc/core-win32-ia32-msvc" "1.3.44"
+    "@swc/core-win32-x64-msvc" "1.3.44"
 
 "@swc/helpers@0.4.14", "@swc/helpers@^0.4.14":
   version "0.4.14"
@@ -4985,6 +5054,11 @@
     traverse "^0.6.6"
     unified "^6.1.6"
 
+"@tokenizer/token@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz#fe98a93fe789247e998c75e74e9c7c63217aa276"
+  integrity sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -4995,11 +5069,6 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
-"@trysound/sax@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
-  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
-
 "@ts-morph/common@~0.8.0":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@ts-morph/common/-/common-0.8.1.tgz#7be0a0048eb906cb3ddf6506bef06c3cd1a1e3ba"
@@ -6007,7 +6076,7 @@
   dependencies:
     "@types/express" "*"
 
-"@types/serve-static@*", "@types/serve-static@^1.13.10":
+"@types/serve-static@*":
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.1.tgz#86b1753f0be4f9a1bee68d459fcda5be4ea52b5d"
   integrity sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==
@@ -6188,7 +6257,7 @@
     anymatch "^3.0.0"
     source-map "^0.6.0"
 
-"@types/ws@^8.2.2", "@types/ws@^8.5.1":
+"@types/ws@^8.2.2":
   version "8.5.4"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5"
   integrity sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==
@@ -6719,7 +6788,7 @@ JSONStream@^1.0.4:
     jsonparse "^1.2.0"
     through ">=2.2.7 <3"
 
-abab@^2.0.5, abab@^2.0.6:
+abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
@@ -6778,10 +6847,10 @@ acorn-import-assertions@^1.7.6:
   resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz#ba2b5939ce62c238db6d93d81c9b111b29b855e9"
   integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==
 
-acorn-jsx@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
-  integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
+acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
 acorn-walk@^7.2.0:
   version "7.2.0"
@@ -6808,10 +6877,10 @@ acorn@^7.4.0, acorn@^7.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.0.4, acorn@^8.1.0, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.1:
-  version "8.8.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
-  integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
+acorn@^8.0.4, acorn@^8.1.0, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.1, acorn@^8.9.0:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
+  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
 
 adal-node@^0.2.3:
   version "0.2.3"
@@ -7180,7 +7249,7 @@ aproba@^2.0.0:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
   integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
 
-arch@^2.2.0:
+arch@^2.1.0, arch@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
   integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
@@ -7331,7 +7400,7 @@ array-flatten@1.1.1:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
 
-array-flatten@^2.1.0, array-flatten@^2.1.2:
+array-flatten@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
   integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
@@ -7398,11 +7467,6 @@ array-union@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-array-union@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-3.0.1.tgz#da52630d327f8b88cfbfb57728e2af5cd9b6b975"
-  integrity sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==
-
 array-uniq@^1.0.1, array-uniq@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
@@ -7590,18 +7654,6 @@ autoprefixer@10.2.1:
     normalize-range "^0.1.2"
     postcss-value-parser "^4.1.0"
 
-autoprefixer@^10.4.9:
-  version "10.4.14"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
-  integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
-  dependencies:
-    browserslist "^4.21.5"
-    caniuse-lite "^1.0.30001464"
-    fraction.js "^4.2.0"
-    normalize-range "^0.1.2"
-    picocolors "^1.0.0"
-    postcss-value-parser "^4.2.0"
-
 autoprefixer@^9.8.6:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -7739,14 +7791,6 @@ babel-loader@8.2.2, babel-loader@^8.0.0:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
-babel-loader@^9.1.2:
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
-  integrity sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==
-  dependencies:
-    find-cache-dir "^3.3.2"
-    schema-utils "^4.0.0"
-
 babel-messages@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
@@ -8223,6 +8267,14 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+bin-check@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bin-check/-/bin-check-4.1.0.tgz#fc495970bdc88bb1d5a35fc17e65c4a149fc4a49"
+  integrity sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==
+  dependencies:
+    execa "^0.7.0"
+    executable "^4.1.0"
+
 bin-links@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/bin-links/-/bin-links-3.0.3.tgz#3842711ef3db2cd9f16a5f404a996a12db355a6e"
@@ -8235,6 +8287,23 @@ bin-links@^3.0.0:
     rimraf "^3.0.0"
     write-file-atomic "^4.0.0"
 
+bin-version-check@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/bin-version-check/-/bin-version-check-5.1.0.tgz#788e80e036a87313f8be7908bc20e5abe43f0837"
+  integrity sha512-bYsvMqJ8yNGILLz1KP9zKLzQ6YpljV3ln1gqhuLkUtyfGi3qXKGuK2p+U4NAvjVFzDFiBBtOpCOSFNuYYEGZ5g==
+  dependencies:
+    bin-version "^6.0.0"
+    semver "^7.5.3"
+    semver-truncate "^3.0.0"
+
+bin-version@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/bin-version/-/bin-version-6.0.0.tgz#08ecbe5fc87898b441425e145f9e105064d00315"
+  integrity sha512-nk5wEsP4RiKjG+vF+uG8lFsEn4d7Y6FVDamzzftSunXOoOcOOkzcWdKVlGgFFwlUQCj63SgnUkLLGF8v7lufhw==
+  dependencies:
+    execa "^5.0.0"
+    find-versions "^5.0.0"
+
 binary-extensions@^1.0.0:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
@@ -8308,16 +8377,6 @@ body-scroll-lock@^3.1.5:
   resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
   integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
 
-bonjour-service@^1.0.11:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.1.1.tgz#960948fa0e0153f5d26743ab15baf8e33752c135"
-  integrity sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==
-  dependencies:
-    array-flatten "^2.1.2"
-    dns-equal "^1.0.0"
-    fast-deep-equal "^3.1.3"
-    multicast-dns "^7.2.5"
-
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
@@ -8517,15 +8576,15 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.1, browserslist@^4.21.3, browserslist@^4.21.4, browserslist@^4.21.5:
-  version "4.21.9"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.9.tgz#e11bdd3c313d7e2a9e87e8b4b0c7872b13897635"
-  integrity sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==
+browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.1, browserslist@^4.21.3, browserslist@^4.21.5:
+  version "4.21.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
+  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
   dependencies:
-    caniuse-lite "^1.0.30001503"
-    electron-to-chromium "^1.4.431"
-    node-releases "^2.0.12"
-    update-browserslist-db "^1.0.11"
+    caniuse-lite "^1.0.30001449"
+    electron-to-chromium "^1.4.284"
+    node-releases "^2.0.8"
+    update-browserslist-db "^1.0.10"
 
 bs-logger@0.x:
   version "0.2.6"
@@ -8877,20 +8936,10 @@ camelize@^1.0.0:
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
   integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
 
-caniuse-api@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
-  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-lite "^1.0.0"
-    lodash.memoize "^4.1.2"
-    lodash.uniq "^4.5.0"
-
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001503:
-  version "1.0.30001516"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001516.tgz#621b1be7d85a8843ee7d210fd9d87b52e3daab3a"
-  integrity sha512-Wmec9pCBY8CWbmI4HsjBeQLqDTqV91nFVR83DnZpYyRnPI1wePDsTg0bGLPC5VU/3OIZV1fmxEea1b+tFKe86g==
+caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001449:
+  version "1.0.30001517"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz#90fabae294215c3495807eb24fc809e11dc2f0a8"
+  integrity sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -8960,7 +9009,7 @@ chalk@4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@4.1.2, chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
+chalk@4.1.2, chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -9526,17 +9575,12 @@ color@^3.1.0:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
-colord@^2.9.1:
-  version "2.9.3"
-  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
-  integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
-
 colorette@^1.2.1, colorette@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
-colorette@^2.0.10, colorette@^2.0.14, colorette@^2.0.16, colorette@^2.0.19:
+colorette@^2.0.10, colorette@^2.0.14, colorette@^2.0.16:
   version "2.0.20"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
@@ -9606,7 +9650,7 @@ commander@2.11.x:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
   integrity sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==
 
-commander@7, commander@^7.0.0, commander@^7.2.0:
+commander@7, commander@^7.0.0, commander@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
@@ -9749,11 +9793,6 @@ connect-history-api-fallback@1.6.0, connect-history-api-fallback@^1.6.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
   integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
-connect-history-api-fallback@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz#647264845251a0daf25b97ce87834cace0f5f1c8"
-  integrity sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==
-
 connect@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
@@ -9787,7 +9826,7 @@ constants-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
-content-disposition@0.5.4, content-disposition@~0.5.2:
+content-disposition@0.5.4, content-disposition@^0.5.4, content-disposition@~0.5.2:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
   integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
@@ -9911,13 +9950,6 @@ cookies@~0.8.0:
     depd "~2.0.0"
     keygrip "~1.1.0"
 
-copy-anything@^2.0.1:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
-  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
-  dependencies:
-    is-what "^3.14.1"
-
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -9968,18 +10000,6 @@ copy-webpack-plugin@8.1.0:
     schema-utils "^3.0.0"
     serialize-javascript "^5.0.1"
 
-copy-webpack-plugin@^10.2.4:
-  version "10.2.4"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz#6c854be3fdaae22025da34b9112ccf81c63308fe"
-  integrity sha512-xFVltahqlsRcyyJqQbDY6EYTtyQZF9rf+JPjwHObLdPFMEISqkFkr7mFoVOC6BfYS/dNThyoQKvziugm+OnwBg==
-  dependencies:
-    fast-glob "^3.2.7"
-    glob-parent "^6.0.1"
-    globby "^12.0.2"
-    normalize-path "^3.0.0"
-    schema-utils "^4.0.0"
-    serialize-javascript "^6.0.0"
-
 core-js-compat@^3.25.1, core-js-compat@^3.8.1:
   version "3.28.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.28.0.tgz#c08456d854608a7264530a2afa281fadf20ecee6"
@@ -10056,7 +10076,7 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
+cosmiconfig@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
   integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
@@ -10210,11 +10230,6 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
 
-css-declaration-sorter@^6.3.1:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz#630618adc21724484b3e9505bce812def44000ad"
-  integrity sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==
-
 css-in-js-utils@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.0.0.tgz#4379185f5cc79f9eba39b4e795c317f253ffaa40"
@@ -10259,32 +10274,6 @@ css-loader@^3.6.0:
     schema-utils "^2.7.0"
     semver "^6.3.0"
 
-css-loader@^6.4.0:
-  version "6.7.3"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.3.tgz#1e8799f3ccc5874fdd55461af51137fcc5befbcd"
-  integrity sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==
-  dependencies:
-    icss-utils "^5.1.0"
-    postcss "^8.4.19"
-    postcss-modules-extract-imports "^3.0.0"
-    postcss-modules-local-by-default "^4.0.0"
-    postcss-modules-scope "^3.0.0"
-    postcss-modules-values "^4.0.0"
-    postcss-value-parser "^4.2.0"
-    semver "^7.3.8"
-
-css-minimizer-webpack-plugin@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz#ab78f781ced9181992fe7b6e4f3422e76429878f"
-  integrity sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==
-  dependencies:
-    cssnano "^5.0.6"
-    jest-worker "^27.0.2"
-    postcss "^8.3.5"
-    schema-utils "^4.0.0"
-    serialize-javascript "^6.0.0"
-    source-map "^0.6.1"
-
 css-select@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067"
@@ -10315,14 +10304,6 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
-css-tree@^1.1.2, css-tree@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
-  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
-  dependencies:
-    mdn-data "2.0.14"
-    source-map "^0.6.1"
-
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -10348,15 +10329,6 @@ css@2.X, css@^2.2.1:
     source-map-resolve "^0.5.2"
     urix "^0.1.0"
 
-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
-  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
-  dependencies:
-    inherits "^2.0.4"
-    source-map "^0.6.1"
-    source-map-resolve "^0.6.0"
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -10372,62 +10344,6 @@ cssjanus@^2.0.1:
   resolved "https://registry.yarnpkg.com/cssjanus/-/cssjanus-2.1.0.tgz#6f99070e0b7cc79f826ea48c63c03cb250713af1"
   integrity sha512-kAijbny3GmdOi9k+QT6DGIXqFvL96aksNlGr4Rhk9qXDZYWUojU4bRc3IHWxdaLNOqgEZHuXoe5Wl2l7dxLW5g==
 
-cssnano-preset-default@^5.2.14:
-  version "5.2.14"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz#309def4f7b7e16d71ab2438052093330d9ab45d8"
-  integrity sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==
-  dependencies:
-    css-declaration-sorter "^6.3.1"
-    cssnano-utils "^3.1.0"
-    postcss-calc "^8.2.3"
-    postcss-colormin "^5.3.1"
-    postcss-convert-values "^5.1.3"
-    postcss-discard-comments "^5.1.2"
-    postcss-discard-duplicates "^5.1.0"
-    postcss-discard-empty "^5.1.1"
-    postcss-discard-overridden "^5.1.0"
-    postcss-merge-longhand "^5.1.7"
-    postcss-merge-rules "^5.1.4"
-    postcss-minify-font-values "^5.1.0"
-    postcss-minify-gradients "^5.1.1"
-    postcss-minify-params "^5.1.4"
-    postcss-minify-selectors "^5.2.1"
-    postcss-normalize-charset "^5.1.0"
-    postcss-normalize-display-values "^5.1.0"
-    postcss-normalize-positions "^5.1.1"
-    postcss-normalize-repeat-style "^5.1.1"
-    postcss-normalize-string "^5.1.0"
-    postcss-normalize-timing-functions "^5.1.0"
-    postcss-normalize-unicode "^5.1.1"
-    postcss-normalize-url "^5.1.0"
-    postcss-normalize-whitespace "^5.1.1"
-    postcss-ordered-values "^5.1.3"
-    postcss-reduce-initial "^5.1.2"
-    postcss-reduce-transforms "^5.1.0"
-    postcss-svgo "^5.1.0"
-    postcss-unique-selectors "^5.1.1"
-
-cssnano-utils@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz#95684d08c91511edfc70d2636338ca37ef3a6861"
-  integrity sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==
-
-cssnano@^5.0.6:
-  version "5.1.15"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.15.tgz#ded66b5480d5127fcb44dac12ea5a983755136bf"
-  integrity sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==
-  dependencies:
-    cssnano-preset-default "^5.2.14"
-    lilconfig "^2.0.3"
-    yaml "^1.10.2"
-
-csso@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
-  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
-  dependencies:
-    css-tree "^1.1.2"
-
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
@@ -10835,7 +10751,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.
   dependencies:
     ms "2.0.0"
 
-debug@3.1.0, debug@~3.1.0:
+debug@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
@@ -11284,13 +11200,6 @@ dns-packet@^1.3.1:
     ip "^1.1.0"
     safe-buffer "^5.0.1"
 
-dns-packet@^5.2.2:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.6.0.tgz#2202c947845c7a63c23ece58f2f70ff6ab4c2f7d"
-  integrity sha512-rza3UH1LwdHh9qyPXp8lkwpjSNk/AMD3dPytUoRoqnypDUhY0xvbdmVhWOfxO68frEfV9BU8V12Ez7ZsHGZpCQ==
-  dependencies:
-    "@leichtgewicht/ip-codec" "^2.0.1"
-
 dns-txt@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
@@ -11603,10 +11512,10 @@ ejs@3.1.9, ejs@^3.1.7:
   dependencies:
     jake "^10.8.5"
 
-electron-to-chromium@^1.4.431:
-  version "1.4.461"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.461.tgz#6b14af66042732bf883ab63a4d82cac8f35eb252"
-  integrity sha512-1JkvV2sgEGTDXjdsaQCeSwYYuhLRphRpc+g6EHTFELJXEiznLt3/0pZ9JuAOQ5p2rI3YxKTbivtvajirIfhrEQ==
+electron-to-chromium@^1.4.284:
+  version "1.4.471"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.471.tgz#14cb056d0ce4bfa99df57946d57fe46c2330dac3"
+  integrity sha512-GpmGRC1vTl60w/k6YpQ18pSiqnmr0j3un//5TV1idPi6aheNfkT1Ye71tMEabWyNDO6sBMgAR+95Eb0eUUr1tA==
 
 element-resize-detector@^1.2.2:
   version "1.2.3"
@@ -11820,7 +11729,7 @@ errlop@^2.0.0:
   resolved "https://registry.yarnpkg.com/errlop/-/errlop-2.2.0.tgz#1ff383f8f917ae328bebb802d6ca69666a42d21b"
   integrity sha512-e64Qj9+4aZzjzzFpZC7p5kmm/ccCrbLhAJplhsDXQFs87XTsXwOpH4s1Io2s90Tau/8r2j9f4l/thhDevRjzxw==
 
-errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
+errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
   integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
@@ -12097,7 +12006,7 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-escape-string-regexp@5.0.0:
+escape-string-regexp@5.0.0, escape-string-regexp@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
@@ -12366,10 +12275,10 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
   integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
 
-eslint-visitor-keys@^3.3.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz#c7f0f956124ce677047ddbc192a68f999454dedc"
-  integrity sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==
+eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz#c22c48f48942d08ca824cc526211ae400478a994"
+  integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==
 
 eslint@7.25.0:
   version "7.25.0"
@@ -12428,6 +12337,15 @@ espree@^7.3.0, espree@^7.3.1:
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^1.3.0"
 
+espree@^9.0.0:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
 esprima-extract-comments@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/esprima-extract-comments/-/esprima-extract-comments-1.1.0.tgz#0dacab567a5900240de6d344cf18c33617becbc9"
@@ -12445,7 +12363,7 @@ esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.0.1, esquery@^1.4.0, esquery@^1.5.0:
+esquery@^1.4.0, esquery@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
   integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
@@ -12596,7 +12514,7 @@ execa@^5.0.0, execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-executable@^4.1.1:
+executable@^4.1.0, executable@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
   integrity sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==
@@ -12644,7 +12562,7 @@ expect@^29.0.0, expect@^29.5.0:
     jest-message-util "^29.5.0"
     jest-util "^29.5.0"
 
-express@4.17.3, express@^4.17.1, express@^4.17.3:
+express@4.17.3, express@^4.17.1:
   version "4.17.3"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.3.tgz#f6c7302194a4fb54271b73a1fe7a06478c8f85a1"
   integrity sha512-yuSQpz5I+Ch7gFrPCk4/c+dIBKlQUxtgwqzph132bsT6qhuzss6I8cLJQz7B3rFblzd6wtcI0ZbGltH/C4LjUg==
@@ -12680,6 +12598,21 @@ express@4.17.3, express@^4.17.1, express@^4.17.3:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+ext-list@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/ext-list/-/ext-list-2.2.2.tgz#0b98e64ed82f5acf0f2931babf69212ef52ddd37"
+  integrity sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==
+  dependencies:
+    mime-db "^1.28.0"
+
+ext-name@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ext-name/-/ext-name-5.0.0.tgz#70781981d183ee15d13993c8822045c506c8f0a6"
+  integrity sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==
+  dependencies:
+    ext-list "^2.0.0"
+    sort-keys-length "^1.0.0"
+
 ext@^1.1.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ext/-/ext-1.4.0.tgz#89ae7a07158f79d35517882904324077e4379244"
@@ -12816,7 +12749,7 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.0.3, fast-glob@^3.2.12, fast-glob@^3.2.2, fast-glob@^3.2.5, fast-glob@^3.2.7, fast-glob@^3.2.9, fast-glob@^3.3.0:
+fast-glob@^3.0.3, fast-glob@^3.2.2, fast-glob@^3.2.5, fast-glob@^3.2.9, fast-glob@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.0.tgz#7c40cb491e1e2ed5664749e87bfb516dbe8727c0"
   integrity sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==
@@ -13066,6 +12999,15 @@ file-system-cache@^1.0.5:
     fs-extra "^0.30.0"
     ramda "^0.21.0"
 
+file-type@^17.1.6:
+  version "17.1.6"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-17.1.6.tgz#18669e0577a4849ef6e73a41f8bdf1ab5ae21023"
+  integrity sha512-hlDw5Ev+9e883s0pwUsuuYNu4tD7GgpUnOvykjv1Gya0ZIjuKumthDRua90VUn6/nlRKAjcxLUnHNTIUWwWIiw==
+  dependencies:
+    readable-web-to-node-stream "^3.0.2"
+    strtok3 "^7.0.0-alpha.9"
+    token-types "^5.0.0-alpha.2"
+
 filelist@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.3.tgz#448607750376484932f67ef1b9ff07386b036c83"
@@ -13078,6 +13020,11 @@ filename-reserved-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz#abf73dfab735d045440abfea2d91f389ebbfa229"
   integrity sha1-q/c9+rc10EVECr/qLZHzieu/oik=
 
+filename-reserved-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-3.0.0.tgz#3d5dd6d4e2d73a3fed2ebc4cd0b3448869a081f7"
+  integrity sha512-hn4cQfU6GOT/7cFHXBqeBg2TbrMBgdD0kcjLhvSQYYwm3s4B6cjvBfb7nBALJLAXqmU5xajSa7X2NnUud/VCdw==
+
 filenamify@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-4.1.0.tgz#54d110810ae74eebfe115c1b995bd07e03cf2184"
@@ -13087,6 +13034,15 @@ filenamify@^4.1.0:
     strip-outer "^1.0.1"
     trim-repeated "^1.0.0"
 
+filenamify@^5.0.2:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-5.1.1.tgz#a1ccc5ae678a5e34f578afcb9b72898264d166d2"
+  integrity sha512-M45CbrJLGACfrPOkrTp3j2EcO9OBkKUYME0eiqOCa7i2poaklU0jhlIaMlr8ijLorT0uLAzrn3qXOp5684CkfA==
+  dependencies:
+    filename-reserved-regex "^3.0.0"
+    strip-outer "^2.0.0"
+    trim-repeated "^2.0.0"
+
 filesize@^3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
@@ -13149,7 +13105,7 @@ find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.3.1, find-cache-dir@^3.3.2:
+find-cache-dir@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
   integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
@@ -13221,6 +13177,13 @@ find-up@^6.2.0, find-up@^6.3.0:
     locate-path "^7.1.0"
     path-exists "^5.0.0"
 
+find-versions@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-5.1.0.tgz#973f6739ce20f5e439a27eba8542a4b236c8e685"
+  integrity sha512-+iwzCJ7C5v5KgcBuueqVoNiHVoQpwiUK5XFLjf0affFTep+Wcw93tPvmb8tqujDNmzhBDPddnWV/qgWSXgq+Hg==
+  dependencies:
+    semver-regex "^4.0.5"
+
 find-webpack@2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/find-webpack/-/find-webpack-2.2.1.tgz#96e7b701a2d37c3500cae30d4dc59e14923ba460"
@@ -13378,24 +13341,6 @@ fork-ts-checker-webpack-plugin@6.1.0, fork-ts-checker-webpack-plugin@^6.0.4:
     semver "^7.3.2"
     tapable "^1.0.0"
 
-fork-ts-checker-webpack-plugin@7.2.13:
-  version "7.2.13"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-7.2.13.tgz#51ffd6a2f96f03ab64b92f8aedf305dbf3dee0f1"
-  integrity sha512-fR3WRkOb4bQdWB/y7ssDUlVdrclvwtyCUIHCfivAoYxq9dF7XfrDKbMdZIfwJ7hxIAqkYSGeU7lLJE6xrxIBdg==
-  dependencies:
-    "@babel/code-frame" "^7.16.7"
-    chalk "^4.1.2"
-    chokidar "^3.5.3"
-    cosmiconfig "^7.0.1"
-    deepmerge "^4.2.2"
-    fs-extra "^10.0.0"
-    memfs "^3.4.1"
-    minimatch "^3.0.4"
-    node-abort-controller "^3.0.1"
-    schema-utils "^3.1.1"
-    semver "^7.3.5"
-    tapable "^2.2.1"
-
 fork-ts-checker-webpack-plugin@^4.1.6:
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz#5055c703febcf37fa06405d400c122b905167fc5"
@@ -13480,7 +13425,7 @@ forwarded@0.2.0:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-fraction.js@^4.0.13, fraction.js@^4.2.0:
+fraction.js@^4.0.13:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
@@ -13946,13 +13891,6 @@ glob-parent@^5.0.0, glob-parent@^5.1.1, glob-parent@^5.1.2, glob-parent@~5.1.0,
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
-  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
-  dependencies:
-    is-glob "^4.0.3"
-
 glob-promise@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-3.4.0.tgz#b6b8f084504216f702dc2ce8c9bc9ac8866fdb20"
@@ -14150,18 +14088,6 @@ globby@^10.0.1:
     merge2 "^1.2.3"
     slash "^3.0.0"
 
-globby@^12.0.2:
-  version "12.2.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-12.2.0.tgz#2ab8046b4fba4ff6eede835b29f678f90e3d3c22"
-  integrity sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==
-  dependencies:
-    array-union "^3.0.1"
-    dir-glob "^3.0.1"
-    fast-glob "^3.2.7"
-    ignore "^5.1.9"
-    merge2 "^1.4.1"
-    slash "^4.0.0"
-
 globby@^13.1.2:
   version "13.2.2"
   resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.2.tgz#63b90b1bf68619c2135475cbd4e71e66aa090592"
@@ -14212,7 +14138,7 @@ good-listener@^1.2.2:
   dependencies:
     delegate "^3.1.2"
 
-got@11.8.5:
+got@11.8.5, got@^11.8.5:
   version "11.8.5"
   resolved "https://registry.yarnpkg.com/got/-/got-11.8.5.tgz#ce77d045136de56e8f024bebb82ea349bc730046"
   integrity sha512-o0Je4NvQObAuZPHLFoRSkdG2lTgtcynqymzg2Vupdx6PorhaT5MCbIyXG6d4D94kk8ZG57QeosgdiqfJWhEhlQ==
@@ -14961,7 +14887,7 @@ http-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
-http-proxy-middleware@^2.0.0, http-proxy-middleware@^2.0.3:
+http-proxy-middleware@^2.0.0:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
   integrity sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==
@@ -15102,7 +15028,7 @@ icss-utils@^4.0.0, icss-utils@^4.1.1:
   dependencies:
     postcss "^7.0.14"
 
-icss-utils@^5.0.0, icss-utils@^5.1.0:
+icss-utils@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
@@ -15153,16 +15079,11 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.0.4, ignore@^5.1.1, ignore@^5.1.9, ignore@^5.2.0, ignore@^5.2.4:
+ignore@^5.0.4, ignore@^5.1.1, ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
-image-size@~0.5.0:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
-  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
-
 immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
@@ -15983,11 +15904,6 @@ is-weakref@^1.0.1:
   dependencies:
     call-bind "^1.0.0"
 
-is-what@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
-  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
-
 is-whitespace-character@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -16684,7 +16600,7 @@ jest-worker@^26.5.0, jest-worker@^26.6.2:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jest-worker@^27.0.2, jest-worker@^27.4.5:
+jest-worker@^27.4.5:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
   integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
@@ -16918,6 +16834,16 @@ json5@^2.1.0, json5@^2.1.2, json5@^2.1.3, json5@^2.2.0, json5@^2.2.1, json5@^2.2
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+jsonc-eslint-parser@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/jsonc-eslint-parser/-/jsonc-eslint-parser-2.3.0.tgz#7c2de97d01bff7227cbef2f25d1025d42a36198b"
+  integrity sha512-9xZPKVYp9DxnM3sd1yAsh/d59iIaswDkai8oTxbursfKYbg/ibjX0IzFt35+VZ8iEW453TVTXztnRvYUQlAfUQ==
+  dependencies:
+    acorn "^8.5.0"
+    eslint-visitor-keys "^3.0.0"
+    espree "^9.0.0"
+    semver "^7.3.5"
+
 jsonc-parser@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
@@ -17290,7 +17216,7 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
-klona@^2.0.4, klona@^2.0.5:
+klona@^2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
   integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
@@ -17447,14 +17373,6 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
-launch-editor@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.6.0.tgz#4c0c1a6ac126c572bd9ff9a30da1d2cae66defd7"
-  integrity sha512-JpDCcQnyAAzZZaZ7vEiSqL690w7dAEyLao+KC96zBplnYbJS7TYNjvM3M7y3dGz+v7aIsJk3hllWuc0kWAjyRQ==
-  dependencies:
-    picocolors "^1.0.0"
-    shell-quote "^1.7.3"
-
 lazy-ass@1.6.0, lazy-ass@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
@@ -17525,30 +17443,6 @@ lerna@5.5.2:
     nx ">=14.6.1 < 16"
     typescript "^3 || ^4"
 
-less-loader@11.1.0:
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-11.1.0.tgz#a452384259bdf8e4f6d5fdcc39543609e6313f82"
-  integrity sha512-C+uDBV7kS7W5fJlUjq5mPBeBVhYpTIm5gB09APT9o3n/ILeaXVsiSFTbZpTJCJwQ/Crczfn3DmfQFwxYusWFug==
-  dependencies:
-    klona "^2.0.4"
-
-less@4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/less/-/less-4.1.3.tgz#175be9ddcbf9b250173e0a00b4d6920a5b770246"
-  integrity sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==
-  dependencies:
-    copy-anything "^2.0.1"
-    parse-node-version "^1.0.1"
-    tslib "^2.3.0"
-  optionalDependencies:
-    errno "^0.1.1"
-    graceful-fs "^4.1.2"
-    image-size "~0.5.0"
-    make-dir "^2.1.0"
-    mime "^1.4.1"
-    needle "^3.1.0"
-    source-map "~0.6.0"
-
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -17604,13 +17498,6 @@ license-webpack-plugin@2.3.10:
     "@types/webpack-sources" "^0.1.5"
     webpack-sources "^1.2.0"
 
-license-webpack-plugin@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-4.0.2.tgz#1e18442ed20b754b82f1adeff42249b81d11aec6"
-  integrity sha512-771TFWFD70G1wLTC4oU2Cw4qvtmNrIw+wRvBtn+okgHl7slJVi7zfNcdmqDL72BojM30VNJ2UHylr1o77U37Jw==
-  dependencies:
-    webpack-sources "^3.0.0"
-
 lie@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
@@ -17646,11 +17533,6 @@ liftoff@^3.1.0:
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
-lilconfig@^2.0.3:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
-  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
-
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -17765,7 +17647,7 @@ loader-utils@1.4.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-loader-utils@2.0.0, loader-utils@2.0.4, loader-utils@^2.0.0, loader-utils@^2.0.3, loader-utils@^2.0.4, loader-utils@~2.0.4:
+loader-utils@2.0.0, loader-utils@2.0.4, loader-utils@^2.0.0, loader-utils@^2.0.4, loader-utils@~2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
   integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
@@ -18055,7 +17937,7 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
 
-lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
+lodash.uniq@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
@@ -18436,11 +18318,6 @@ mdast-util-to-string@^1.0.0:
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
   integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
 
-mdn-data@2.0.14:
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
-  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
-
 mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -18615,7 +18492,7 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-mime-db@1.52.0, "mime-db@>= 1.40.0 < 2":
+mime-db@1.52.0, "mime-db@>= 1.40.0 < 2", mime-db@^1.28.0:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
@@ -18627,7 +18504,7 @@ mime-types@^2.1.12, mime-types@^2.1.18, mime-types@^2.1.27, mime-types@^2.1.30,
   dependencies:
     mime-db "1.52.0"
 
-mime@1.6.0, mime@^1.4.1:
+mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -18689,13 +18566,6 @@ mini-css-extract-plugin@2.6.1:
   dependencies:
     schema-utils "^4.0.0"
 
-mini-css-extract-plugin@~2.4.7:
-  version "2.4.7"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.7.tgz#b9f4c4f4d727c7a3cd52a11773bb739f00177fac"
-  integrity sha512-euWmddf0sk9Nv1O0gfeeUAvAkoSlWncNLF77C0TP2+WoPvy8mAHKOzMajcCz2dzvyt3CNgxb1obIEVFIRxaipg==
-  dependencies:
-    schema-utils "^4.0.0"
-
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -18881,7 +18751,7 @@ mkdirp@0.5.5, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@^0.5.3, mkdi
   dependencies:
     minimist "^1.2.5"
 
-mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.4:
+mkdirp@^1.0.3, mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
@@ -19031,14 +18901,6 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
-multicast-dns@^7.2.5:
-  version "7.2.5"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
-  integrity sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==
-  dependencies:
-    dns-packet "^5.2.2"
-    thunky "^1.0.2"
-
 multimatch@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-5.0.0.tgz#932b800963cea7a31a033328fa1e0c3a1874dbe6"
@@ -19077,7 +18939,7 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
-nanoid@^3.1.23, nanoid@^3.3.1, nanoid@^3.3.6:
+nanoid@^3.1.23, nanoid@^3.3.1:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
@@ -19124,15 +18986,6 @@ needle@^2.2.1:
     iconv-lite "^0.4.4"
     sax "^1.2.4"
 
-needle@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-3.2.0.tgz#07d240ebcabfd65c76c03afae7f6defe6469df44"
-  integrity sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.6.3"
-    sax "^1.2.4"
-
 negotiator@0.6.3, negotiator@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
@@ -19173,11 +19026,6 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
-node-abort-controller@^3.0.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/node-abort-controller/-/node-abort-controller-3.1.1.tgz#a94377e964a9a37ac3976d848cb5c765833b8548"
-  integrity sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==
-
 node-addon-api@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.2.1.tgz#81325e0a2117789c0128dab65e7e38f07ceba161"
@@ -19380,7 +19228,7 @@ node-pre-gyp@^0.12.0:
     semver "^5.3.0"
     tar "^4"
 
-node-releases@^2.0.12:
+node-releases@^2.0.8:
   version "2.0.13"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
   integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
@@ -19722,6 +19570,56 @@ nx@15.9.4, "nx@>=14.6.1 < 16":
     "@nrwl/nx-win32-arm64-msvc" "15.9.4"
     "@nrwl/nx-win32-x64-msvc" "15.9.4"
 
+nx@16.1.4:
+  version "16.1.4"
+  resolved "https://registry.yarnpkg.com/nx/-/nx-16.1.4.tgz#cbdc4896e4cf4fd25d0ec52fab2dc3307984f329"
+  integrity sha512-fSkgC8wXLdW6QMaBHDXeEUJINgxBa0Vsut6Hq2SxEhtxmnx+lx++7NlhYVNZixTMRmI4a5vK0jdfPpe9hknsRA==
+  dependencies:
+    "@nrwl/tao" "16.1.4"
+    "@parcel/watcher" "2.0.4"
+    "@yarnpkg/lockfile" "^1.1.0"
+    "@yarnpkg/parsers" "^3.0.0-rc.18"
+    "@zkochan/js-yaml" "0.0.6"
+    axios "^1.0.0"
+    chalk "^4.1.0"
+    cli-cursor "3.1.0"
+    cli-spinners "2.6.1"
+    cliui "^7.0.2"
+    dotenv "~10.0.0"
+    enquirer "~2.3.6"
+    fast-glob "3.2.7"
+    figures "3.2.0"
+    flat "^5.0.2"
+    fs-extra "^11.1.0"
+    glob "7.1.4"
+    ignore "^5.0.4"
+    js-yaml "4.1.0"
+    jsonc-parser "3.2.0"
+    lines-and-columns "~2.0.3"
+    minimatch "3.0.5"
+    npm-run-path "^4.0.1"
+    open "^8.4.0"
+    semver "7.3.4"
+    string-width "^4.2.3"
+    strong-log-transformer "^2.1.0"
+    tar-stream "~2.2.0"
+    tmp "~0.2.1"
+    tsconfig-paths "^4.1.2"
+    tslib "^2.3.0"
+    v8-compile-cache "2.3.0"
+    yargs "^17.6.2"
+    yargs-parser "21.1.1"
+  optionalDependencies:
+    "@nx/nx-darwin-arm64" "16.1.4"
+    "@nx/nx-darwin-x64" "16.1.4"
+    "@nx/nx-linux-arm-gnueabihf" "16.1.4"
+    "@nx/nx-linux-arm64-gnu" "16.1.4"
+    "@nx/nx-linux-arm64-musl" "16.1.4"
+    "@nx/nx-linux-x64-gnu" "16.1.4"
+    "@nx/nx-linux-x64-musl" "16.1.4"
+    "@nx/nx-win32-arm64-msvc" "16.1.4"
+    "@nx/nx-win32-x64-msvc" "16.1.4"
+
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
@@ -20012,6 +19910,13 @@ os-browserify@^0.3.0:
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
   integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
+os-filter-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/os-filter-obj/-/os-filter-obj-2.0.0.tgz#1c0b62d5f3a2442749a2d139e6dddee6e81d8d16"
+  integrity sha512-uksVLsqG3pVdzzPvmAHpBK0wKxYItuzZr7SziusRPoz67tGV8rL1szZ6IdeUrbqLjGDwApBtN29eEE3IqGHOjg==
+  dependencies:
+    arch "^2.1.0"
+
 os-homedir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
@@ -20473,7 +20378,7 @@ parse-link-header@^2.0.0:
   dependencies:
     xtend "~4.0.1"
 
-parse-node-version@^1.0.0, parse-node-version@^1.0.1:
+parse-node-version@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
   integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
@@ -20497,11 +20402,6 @@ parse-url@^8.1.0:
   dependencies:
     parse-path "^7.0.0"
 
-parse5@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
-  integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
-
 parse5@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
@@ -20682,6 +20582,11 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+peek-readable@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/peek-readable/-/peek-readable-5.0.0.tgz#7ead2aff25dc40458c60347ea76cfdfd63efdfec"
+  integrity sha512-YtCKvLUOvwtMGmrniQPdO7MwPjgkFBtFIrmfSbYmYuq3tKDV/mcfAhBth1+C3ru7uXIZasc/pHnb+YDYNkkj4A==
+
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -20893,52 +20798,6 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-calc@^8.2.3:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"
-  integrity sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==
-  dependencies:
-    postcss-selector-parser "^6.0.9"
-    postcss-value-parser "^4.2.0"
-
-postcss-colormin@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.3.1.tgz#86c27c26ed6ba00d96c79e08f3ffb418d1d1988f"
-  integrity sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==
-  dependencies:
-    browserslist "^4.21.4"
-    caniuse-api "^3.0.0"
-    colord "^2.9.1"
-    postcss-value-parser "^4.2.0"
-
-postcss-convert-values@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz#04998bb9ba6b65aa31035d669a6af342c5f9d393"
-  integrity sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==
-  dependencies:
-    browserslist "^4.21.4"
-    postcss-value-parser "^4.2.0"
-
-postcss-discard-comments@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz#8df5e81d2925af2780075840c1526f0660e53696"
-  integrity sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==
-
-postcss-discard-duplicates@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz#9eb4fe8456706a4eebd6d3b7b777d07bad03e848"
-  integrity sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==
-
-postcss-discard-empty@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz#e57762343ff7f503fe53fca553d18d7f0c369c6c"
-  integrity sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==
-
-postcss-discard-overridden@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz#7e8c5b53325747e9d90131bb88635282fb4a276e"
-  integrity sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==
-
 postcss-flexbugs-fixes@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690"
@@ -20946,15 +20805,6 @@ postcss-flexbugs-fixes@^4.2.1:
   dependencies:
     postcss "^7.0.26"
 
-postcss-import@~14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
-  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
-  dependencies:
-    postcss-value-parser "^4.0.0"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
 postcss-loader@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.1.0.tgz#4647a6c8dad3cb6b253fbfaa21d62201086f6e39"
@@ -20977,65 +20827,6 @@ postcss-loader@^4.2.0:
     schema-utils "^3.0.0"
     semver "^7.3.4"
 
-postcss-loader@^6.1.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
-  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
-  dependencies:
-    cosmiconfig "^7.0.0"
-    klona "^2.0.5"
-    semver "^7.3.5"
-
-postcss-merge-longhand@^5.1.7:
-  version "5.1.7"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz#24a1bdf402d9ef0e70f568f39bdc0344d568fb16"
-  integrity sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-    stylehacks "^5.1.1"
-
-postcss-merge-rules@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz#2f26fa5cacb75b1402e213789f6766ae5e40313c"
-  integrity sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==
-  dependencies:
-    browserslist "^4.21.4"
-    caniuse-api "^3.0.0"
-    cssnano-utils "^3.1.0"
-    postcss-selector-parser "^6.0.5"
-
-postcss-minify-font-values@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz#f1df0014a726083d260d3bd85d7385fb89d1f01b"
-  integrity sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-minify-gradients@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz#f1fe1b4f498134a5068240c2f25d46fcd236ba2c"
-  integrity sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==
-  dependencies:
-    colord "^2.9.1"
-    cssnano-utils "^3.1.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-minify-params@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz#c06a6c787128b3208b38c9364cfc40c8aa5d7352"
-  integrity sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==
-  dependencies:
-    browserslist "^4.21.4"
-    cssnano-utils "^3.1.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-minify-selectors@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz#d4e7e6b46147b8117ea9325a915a801d5fe656c6"
-  integrity sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==
-  dependencies:
-    postcss-selector-parser "^6.0.5"
-
 postcss-modules-extract-imports@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
@@ -21111,93 +20902,7 @@ postcss-modules@4.1.3:
     postcss-modules-values "^4.0.0"
     string-hash "^1.1.1"
 
-postcss-normalize-charset@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz#9302de0b29094b52c259e9b2cf8dc0879879f0ed"
-  integrity sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==
-
-postcss-normalize-display-values@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz#72abbae58081960e9edd7200fcf21ab8325c3da8"
-  integrity sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-positions@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz#ef97279d894087b59325b45c47f1e863daefbb92"
-  integrity sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-repeat-style@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz#e9eb96805204f4766df66fd09ed2e13545420fb2"
-  integrity sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-string@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz#411961169e07308c82c1f8c55f3e8a337757e228"
-  integrity sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-timing-functions@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz#d5614410f8f0b2388e9f240aa6011ba6f52dafbb"
-  integrity sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-unicode@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz#f67297fca3fea7f17e0d2caa40769afc487aa030"
-  integrity sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==
-  dependencies:
-    browserslist "^4.21.4"
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-url@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz#ed9d88ca82e21abef99f743457d3729a042adcdc"
-  integrity sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==
-  dependencies:
-    normalize-url "^6.0.1"
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-whitespace@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz#08a1a0d1ffa17a7cc6efe1e6c9da969cc4493cfa"
-  integrity sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-ordered-values@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz#b6fd2bd10f937b23d86bc829c69e7732ce76ea38"
-  integrity sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==
-  dependencies:
-    cssnano-utils "^3.1.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-reduce-initial@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz#798cd77b3e033eae7105c18c9d371d989e1382d6"
-  integrity sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==
-  dependencies:
-    browserslist "^4.21.4"
-    caniuse-api "^3.0.0"
-
-postcss-reduce-transforms@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz#333b70e7758b802f3dd0ddfe98bb1ccfef96b6e9"
-  integrity sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
   version "6.0.13"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
   integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
@@ -21205,27 +20910,12 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-svgo@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
-  integrity sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-    svgo "^2.7.0"
-
-postcss-unique-selectors@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz#a9f273d1eacd09e9aa6088f4b0507b18b1b541b6"
-  integrity sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==
-  dependencies:
-    postcss-selector-parser "^6.0.5"
-
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.3.5:
+postcss@8.3.5, postcss@^8.1.4:
   version "8.3.5"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
   integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
@@ -21243,15 +20933,6 @@ postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^8.1.4, postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.19:
-  version "8.4.23"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.23.tgz#df0aee9ac7c5e53e1075c24a3613496f9e6552ab"
-  integrity sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 prefix-style@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
@@ -22153,13 +21834,6 @@ react@18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
-  dependencies:
-    pify "^2.3.0"
-
 read-cmd-shim@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-3.0.1.tgz#868c235ec59d1de2db69e11aec885bc095aea087"
@@ -22301,6 +21975,13 @@ readable-stream@~1.1.9:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readable-web-to-node-stream@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz#5d52bb5df7b54861fd48d015e93a2cb87b3ee0bb"
+  integrity sha512-ePeK6cc1EcKLEhJFt/AebMCLL+GgSKhuygrZ/GLaKZYEecIgIECf4UaUuaByiGtzckwR4ain9VzUh95T1exYGw==
+  dependencies:
+    readable-stream "^3.6.0"
+
 readdir-scoped-modules@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
@@ -23076,20 +22757,20 @@ rw@1:
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
   integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
 
-rxjs@>=6.4.0, rxjs@^6.5.4, rxjs@^6.5.5, rxjs@^6.6.0:
+rxjs@>=6.4.0, rxjs@^7.5.1, rxjs@^7.5.5, rxjs@^7.8.0:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
+rxjs@^6.5.5, rxjs@^6.6.0:
   version "6.6.7"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
   integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
   dependencies:
     tslib "^1.9.0"
 
-rxjs@^7.5.1, rxjs@^7.5.5:
-  version "7.5.6"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
-  integrity sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==
-  dependencies:
-    tslib "^2.1.0"
-
 safe-buffer@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -23112,7 +22793,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -23139,7 +22820,7 @@ sanitize-filename@^1.6.3:
   dependencies:
     truncate-utf8-bytes "^1.0.0"
 
-sass-loader@12.4.0, sass-loader@^12.2.0:
+sass-loader@12.4.0:
   version "12.4.0"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.4.0.tgz#260b0d51a8a373bb8e88efc11f6ba5583fea0bcf"
   integrity sha512-7xN+8khDIzym1oL9XyS6zP6Ges+Bo2B2xbPrjdMHEYyV3AQYhd/wXeru++3ODHF0zMjYmVadblSKrPrjEkL8mg==
@@ -23147,7 +22828,7 @@ sass-loader@12.4.0, sass-loader@^12.2.0:
     klona "^2.0.4"
     neo-async "^2.6.2"
 
-sass@1.49.11, sass@^1.42.1:
+sass@1.49.11:
   version "1.49.11"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.11.tgz#1ffeb77faeed8b806a2a1e021d7c9fd3fc322cb7"
   integrity sha512-wvS/geXgHUGs6A/4ud5BFIWKO1nKd7wYIGimDk4q4GFkJicILActpv9ueMT4eRGSsp1BdKHuw1WwAHXbhsJELQ==
@@ -23173,7 +22854,7 @@ sax@0.5.x:
   resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
   integrity sha512-c0YL9VcSfcdH3F1Qij9qpYJFpKFKMXNOkLWFssBL3RuF7ZS8oZhllR2rWlCRjDTJsfq3R6wbSsaRU6o0rkEdNw==
 
-sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
+sax@>=0.6.0, sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -23280,7 +22961,7 @@ selenium-webdriver@^4.0.0-alpha.8:
     tmp "^0.2.1"
     ws ">=8.7.0"
 
-selfsigned@^2.0.0, selfsigned@^2.1.1:
+selfsigned@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.1.1.tgz#18a7613d714c0cd3385c48af0075abf3f266af61"
   integrity sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==
@@ -23306,6 +22987,18 @@ semver-greatest-satisfied-range@^1.1.0:
   dependencies:
     sver-compat "^1.5.0"
 
+semver-regex@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-4.0.5.tgz#fbfa36c7ba70461311f5debcb3928821eb4f9180"
+  integrity sha512-hunMQrEy1T6Jr2uEVjrAIqjwWcQTgOAcIM52C8MY1EZSD3DDNft04XzvYKPqjED65bNVVko0YI38nYeEHCX3yw==
+
+semver-truncate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/semver-truncate/-/semver-truncate-3.0.0.tgz#0e3b4825d4a4225d8ae6e7c72231182b42edba40"
+  integrity sha512-LJWA9kSvMolR51oDE6PN3kALBNaUdkxzAGcexw8gjMA8xr5zUqK0JiR3CgARSqanYF3Z1YHvsErb1KDgh+v7Rg==
+  dependencies:
+    semver "^7.3.5"
+
 "semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -23318,7 +23011,7 @@ semver@7.3.4:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@7.5.2, semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8:
+semver@7.5.2:
   version "7.5.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.2.tgz#5b851e66d1be07c1cdaf37dfc856f543325a2beb"
   integrity sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==
@@ -23330,6 +23023,13 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semve
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
+semver@^7.0.0, semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
 semver@~7.3.0:
   version "7.3.8"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
@@ -23378,7 +23078,7 @@ serialize-javascript@^5.0.1:
   dependencies:
     randombytes "^2.1.0"
 
-serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
+serialize-javascript@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
   integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
@@ -23498,11 +23198,6 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@^1.7.3:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
-  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
-
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -23543,16 +23238,16 @@ sisteransi@^1.0.5:
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
   integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
 
+slash@3.0.0, slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
 slash@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
   integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
 
-slash@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
-  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
-
 slash@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
@@ -23649,7 +23344,7 @@ socket.io@^4.4.1:
     socket.io-adapter "~2.4.0"
     socket.io-parser "~4.0.4"
 
-sockjs@^0.3.21, sockjs@^0.3.24:
+sockjs@^0.3.21:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
   integrity sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==
@@ -23689,6 +23384,20 @@ sort-css-media-queries@^1.4.3:
   resolved "https://registry.yarnpkg.com/sort-css-media-queries/-/sort-css-media-queries-1.5.4.tgz#24182b12002a13d01ba943ddf74f5098d7c244ce"
   integrity sha512-YP5W/h4Sid/YP7Lp87ejJ5jP13/Mtqt2vx33XyhO+IAugKlufRPbOrPlIiEUuxmpNBSBd3EeeQpFhdu3RfI2Ag==
 
+sort-keys-length@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sort-keys-length/-/sort-keys-length-1.0.1.tgz#9cb6f4f4e9e48155a6aa0671edd336ff1479a188"
+  integrity sha512-GRbEOUqCxemTAk/b32F2xa8wDTs+Z1QHOkbhJDQTvv/6G3ZkbJ+frYWsTcc7cBB3Fu4wy4XlLCuNtJuMn7Gsvw==
+  dependencies:
+    sort-keys "^1.0.0"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  integrity sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg==
+  dependencies:
+    is-plain-obj "^1.0.0"
+
 sort-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
@@ -23708,7 +23417,7 @@ source-list-map@^2.0.0, source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -23727,15 +23436,6 @@ source-map-loader@4.0.0:
     iconv-lite "^0.6.3"
     source-map-js "^1.0.2"
 
-source-map-loader@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-3.0.2.tgz#af23192f9b344daa729f6772933194cc5fa54fee"
-  integrity sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==
-  dependencies:
-    abab "^2.0.5"
-    iconv-lite "^0.6.3"
-    source-map-js "^1.0.1"
-
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -23747,14 +23447,6 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-resolve@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
-  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-
 source-map-support@0.5.13:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
@@ -23771,7 +23463,7 @@ source-map-support@0.5.19:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@^0.5.16, source-map-support@^0.5.21, source-map-support@^0.5.5, source-map-support@~0.5.12, source-map-support@~0.5.20:
+source-map-support@^0.5.16, source-map-support@^0.5.5, source-map-support@~0.5.12, source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
@@ -24350,6 +24042,11 @@ strip-outer@^1.0.1:
   dependencies:
     escape-string-regexp "^1.0.2"
 
+strip-outer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-2.0.0.tgz#c45c724ed9b1ff6be5f660503791404f4714084b"
+  integrity sha512-A21Xsm1XzUkK0qK1ZrytDUvqsQWict2Cykhvi0fBQntGG5JSprESasEyV1EZ/4CiR5WB5KjzLTrP/bO37B0wPg==
+
 strong-log-transformer@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz#0f5ed78d325e0421ac6f90f7f10e691d6ae3ae10"
@@ -24359,6 +24056,14 @@ strong-log-transformer@^2.1.0:
     minimist "^1.2.0"
     through "^2.3.4"
 
+strtok3@^7.0.0-alpha.9:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/strtok3/-/strtok3-7.0.0.tgz#868c428b4ade64a8fd8fee7364256001c1a4cbe5"
+  integrity sha512-pQ+V+nYQdC5H3Q7qBZAz/MO6lwGhoC2gOAjuouGf/VO0m7vQRh8QNMl2Uf6SwAtzZ9bOw3UIeBukEGNJl5dtXQ==
+  dependencies:
+    "@tokenizer/token" "^0.3.0"
+    peek-readable "^5.0.0"
+
 structured-source@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/structured-source/-/structured-source-3.0.2.tgz#dd802425e0f53dc4a6e7aca3752901a1ccda7af5"
@@ -24382,11 +24087,6 @@ style-loader@^1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
-style-loader@^3.3.0:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.2.tgz#eaebca714d9e462c19aa1e3599057bc363924899"
-  integrity sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==
-
 style-to-object@0.3.0, style-to-object@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
@@ -24410,14 +24110,6 @@ styled-components@^5.1.1:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
-stylehacks@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
-  integrity sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==
-  dependencies:
-    browserslist "^4.21.4"
-    postcss-selector-parser "^6.0.4"
-
 stylis-plugin-rtl@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/stylis-plugin-rtl/-/stylis-plugin-rtl-2.1.0.tgz#e20ad640949b0e62fa214dabc839d2d7c83a2182"
@@ -24435,29 +24127,6 @@ stylis@^4.0.13, stylis@^4.0.3, stylis@^4.0.6, stylis@^4.2.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
   integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
 
-stylus-loader@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-7.1.0.tgz#19e09a98b19075c246e6e3f65e38b8cb89d2d6fb"
-  integrity sha512-gNUEjjozR+oZ8cuC/Fx4LVXqZOgDKvpW9t2hpXHcxjfPYqSjQftaGwZUK+wL9B0QJ26uS6p1EmoWHmvld1dF7g==
-  dependencies:
-    fast-glob "^3.2.12"
-    klona "^2.0.5"
-    normalize-path "^3.0.0"
-
-stylus@^0.55.0:
-  version "0.55.0"
-  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.55.0.tgz#bd404a36dd93fa87744a9dd2d2b1b8450345e5fc"
-  integrity sha512-MuzIIVRSbc8XxHH7FjkvWqkIcr1BvoMZoR/oFuAJDlh7VSaNJzrB4uJ38GRQa+mWjLXODAMzeDe0xi9GYbGwnw==
-  dependencies:
-    css "^3.0.0"
-    debug "~3.1.0"
-    glob "^7.1.6"
-    mkdirp "~1.0.4"
-    safer-buffer "^2.1.2"
-    sax "~1.2.4"
-    semver "^6.3.0"
-    source-map "^0.7.3"
-
 supports-color@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.0.0.tgz#76cfe742cf1f41bb9b1c29ad03068c05b4c0e40a"
@@ -24534,19 +24203,6 @@ sver-compat@^1.5.0:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
-svgo@^2.7.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
-  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
-  dependencies:
-    "@trysound/sax" "0.2.0"
-    commander "^7.2.0"
-    css-select "^4.1.3"
-    css-tree "^1.1.3"
-    csso "^4.2.0"
-    picocolors "^1.0.0"
-    stable "^0.1.8"
-
 swap-case@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/swap-case/-/swap-case-1.1.2.tgz#c39203a4587385fad3c850a0bd1bcafa081974e3"
@@ -24674,7 +24330,7 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
+tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
@@ -24761,7 +24417,7 @@ term-size@^2.1.0:
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.1.1.tgz#f81ec25854af91a480d2f9d0c77ffcb26594ed1a"
   integrity sha512-UqvQSch04R+69g4RDhrslmGvGL3ucDRX/U+snYW0Mab4uCAyKSndUksaoqlJ81QKSpRnIsuOYQCbC2ZWx2896A==
 
-terser-webpack-plugin@5.3.9, terser-webpack-plugin@^5.0.3, terser-webpack-plugin@^5.3.3, terser-webpack-plugin@^5.3.7:
+terser-webpack-plugin@5.3.9, terser-webpack-plugin@^5.0.3, terser-webpack-plugin@^5.3.7:
   version "5.3.9"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"
   integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
@@ -25071,6 +24727,14 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+token-types@^5.0.0-alpha.2:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/token-types/-/token-types-5.0.1.tgz#aa9d9e6b23c420a675e55413b180635b86a093b4"
+  integrity sha512-Y2fmSnZjQdDb9W4w4r1tswlMHylzWIeOKpx0aZH9BgGtACHhrk3OkT52AzwcuqTRBZtvvnTjDBh8eynMulu8Vg==
+  dependencies:
+    "@tokenizer/token" "^0.3.0"
+    ieee754 "^1.2.1"
+
 toposort@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
@@ -25155,6 +24819,13 @@ trim-repeated@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.2"
 
+trim-repeated@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-2.0.0.tgz#5d60556d6d40d9461b7c7e06c3ac20b6b1d50090"
+  integrity sha512-QUHBFTJGdOwmp0tbOG505xAgOp/YliZP/6UgafFXYZ26WT1bvQmSMJUvkeVSASuJJHbqsFbynTvkd5W8RBTipg==
+  dependencies:
+    escape-string-regexp "^5.0.0"
+
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
@@ -25194,10 +24865,10 @@ ts-invariant@^0.10.3:
   dependencies:
     tslib "^2.1.0"
 
-ts-jest@29.1.0:
-  version "29.1.0"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.1.0.tgz#4a9db4104a49b76d2b368ea775b6c9535c603891"
-  integrity sha512-ZhNr7Z4PcYa+JjMl62ir+zPiNJfXJN6E8hSLnaUKhOgqcn8vb3e537cpkd0FuAfRK3sR1LSqM1MOhliXNgOFPA==
+ts-jest@29.1.1:
+  version "29.1.1"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.1.1.tgz#f58fe62c63caf7bfcc5cc6472082f79180f0815b"
+  integrity sha512-D6xjnnbP17cC85nliwGiL+tpoKN0StpgE0TeOjXQTU6MVCfsB4v7aW05CgQ/1OywGb0x/oy9hHFnN+sczTiRaA==
   dependencies:
     bs-logger "0.x"
     fast-json-stable-stringify "2.x"
@@ -25205,10 +24876,10 @@ ts-jest@29.1.0:
     json5 "^2.2.3"
     lodash.memoize "4.x"
     make-error "1.x"
-    semver "7.x"
+    semver "^7.5.3"
     yargs-parser "^21.0.1"
 
-ts-loader@9.3.1, ts-loader@^9.3.1:
+ts-loader@9.3.1:
   version "9.3.1"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.1.tgz#fe25cca56e3e71c1087fe48dc67f4df8c59b22d4"
   integrity sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==
@@ -25298,7 +24969,7 @@ tslib@1.11.2:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.2.tgz#9c79d83272c9a7aaf166f73915c9667ecdde3cc9"
   integrity sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg==
 
-tslib@2.5.0, tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.4.1, tslib@^2.5.0:
+tslib@2.5.0, tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
@@ -25419,11 +25090,6 @@ type@^2.0.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
   integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
 
-typed-assert@^1.0.8:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/typed-assert/-/typed-assert-1.0.9.tgz#8af9d4f93432c4970ec717e3006f33f135b06213"
-  integrity sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==
-
 typed-rest-client@^1.8.4:
   version "1.8.9"
   resolved "https://registry.yarnpkg.com/typed-rest-client/-/typed-rest-client-1.8.9.tgz#e560226bcadfe71b0fb5c416b587f8da3b8f92d8"
@@ -25825,7 +25491,7 @@ upath@^2.0.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
   integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
 
-update-browserslist-db@^1.0.11:
+update-browserslist-db@^1.0.10:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
   integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
@@ -26422,42 +26088,6 @@ webpack-dev-server@4.7.4:
     webpack-dev-middleware "^5.3.1"
     ws "^8.4.2"
 
-webpack-dev-server@^4.9.3:
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.15.0.tgz#87ba9006eca53c551607ea0d663f4ae88be7af21"
-  integrity sha512-HmNB5QeSl1KpulTBQ8UT4FPrByYyaLxpJoQ0+s7EvUrMc16m0ZS1sgb1XGqzmgCPk0c9y+aaXxn11tbLzuM7NQ==
-  dependencies:
-    "@types/bonjour" "^3.5.9"
-    "@types/connect-history-api-fallback" "^1.3.5"
-    "@types/express" "^4.17.13"
-    "@types/serve-index" "^1.9.1"
-    "@types/serve-static" "^1.13.10"
-    "@types/sockjs" "^0.3.33"
-    "@types/ws" "^8.5.1"
-    ansi-html-community "^0.0.8"
-    bonjour-service "^1.0.11"
-    chokidar "^3.5.3"
-    colorette "^2.0.10"
-    compression "^1.7.4"
-    connect-history-api-fallback "^2.0.0"
-    default-gateway "^6.0.3"
-    express "^4.17.3"
-    graceful-fs "^4.2.6"
-    html-entities "^2.3.2"
-    http-proxy-middleware "^2.0.3"
-    ipaddr.js "^2.0.1"
-    launch-editor "^2.6.0"
-    open "^8.0.9"
-    p-retry "^4.5.0"
-    rimraf "^3.0.2"
-    schema-utils "^4.0.0"
-    selfsigned "^2.1.1"
-    serve-index "^1.9.1"
-    sockjs "^0.3.24"
-    spdy "^4.0.2"
-    webpack-dev-middleware "^5.3.1"
-    ws "^8.13.0"
-
 webpack-filter-warnings-plugin@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz#dc61521cf4f9b4a336fbc89108a75ae1da951cdb"
@@ -26496,11 +26126,6 @@ webpack-merge@^4.1.5:
   dependencies:
     lodash "^4.17.15"
 
-webpack-node-externals@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz#1a3407c158d547a9feb4229a9e3385b7b60c9917"
-  integrity sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==
-
 webpack-sources@^1.2.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
@@ -26517,18 +26142,11 @@ webpack-sources@^2.2.0:
     source-list-map "^2.0.1"
     source-map "^0.6.1"
 
-webpack-sources@^3.0.0, webpack-sources@^3.2.3:
+webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack-subresource-integrity@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/webpack-subresource-integrity/-/webpack-subresource-integrity-5.1.0.tgz#8b7606b033c6ccac14e684267cb7fb1f5c2a132a"
-  integrity sha512-sacXoX+xd8r4WKsy9MvH/q/vBtEHr86cpImXwyg74pFIpERKt6FmB8cXpeuh0ZLgclOlHI4Wcll7+R5L02xk9Q==
-  dependencies:
-    typed-assert "^1.0.8"
-
 webpack-virtual-modules@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz#20863dc3cb6bb2104729fff951fbe14b18bd0299"
@@ -26911,16 +26529,11 @@ write-pkg@^4.0.0:
     type-fest "^0.4.1"
     write-json-file "^3.2.0"
 
-ws@8.11.0:
+ws@8.11.0, ws@>=8.7.0, ws@^8.11.0, ws@^8.2.3, ws@^8.4.2:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
 
-ws@>=8.7.0, ws@^8.11.0, ws@^8.13.0, ws@^8.2.3, ws@^8.4.2:
-  version "8.13.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
-  integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
-
 ws@^7.2.0, ws@^7.3.1:
   version "7.5.6"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"
@@ -27033,7 +26646,7 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.7.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==

From bdbf3ae799e368080db7af64f385f5c35c4c8fdf Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Fri, 28 Jul 2023 14:38:41 +0200
Subject: [PATCH 23/37] react-tags-preview: add more vr test (#28582)

* vr

* vr

* pkg.json

* update import to preview

* hover for both content and dimiss

* split

* remove some stories

* Revert "remove some stories"

This reverts commit 5ee61e25c95ed09ef2a2c2e98a0f9000fc8bf7b7.

* delete other tests

* remove id from non-focusable-tag

* fix crud

* add attribute for focus
---
 .../Tag/InteractionTagAppearances.stories.tsx | 70 ++++++++++++++++
 .../Tag/InteractionTagShape.stories.tsx       | 83 +++++++++++++++++++
 .../stories/Tag/TagAppearances.stories.tsx    | 49 +++++++++++
 .../src/stories/Tag/TagShape.stories.tsx      | 56 +++++++++++++
 4 files changed, 258 insertions(+)
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx

diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
new file mode 100644
index 0000000000000..a3966eba20a4c
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { InteractionTag } from '@fluentui/react-tags-preview';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+import { Steps } from 'storywright';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const contentId = 'content-id';
+const dismissButtonId = 'dismiss-button-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${contentId}`)
+  .snapshot('hover content', { cropTo: '.testWrapper' })
+  .mouseDown(`#${contentId}`)
+  .snapshot('pressed content', { cropTo: '.testWrapper' })
+  .hover(`#${dismissButtonId}`)
+  .snapshot('hover dismiss', { cropTo: '.testWrapper' })
+  .mouseDown(`#${dismissButtonId}`)
+  .snapshot('pressed dismiss', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'InteractionTag Converged',
+  Component: InteractionTag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof InteractionTag>;
+
+export const Filled = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="filled"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
+export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
+
+export const Outline = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="outline"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+
+export const Brand = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="brand"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
new file mode 100644
index 0000000000000..a3faddf5f55bb
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { InteractionTag } from '@fluentui/react-tags-preview';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
+
+const contentId = 'content-id';
+const dismissButtonId = 'dismiss-button-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+
+  // This needs to be added so that the focus outline is shown correctly
+  .executeScript(`document.querySelector('#${contentId}').setAttribute('data-fui-focus-visible', '')`)
+  .focus(`#${contentId}`)
+  .snapshot('focus content', { cropTo: '.testWrapper' })
+  .executeScript(`document.querySelector('#${contentId}').removeAttribute('data-fui-focus-visible')`)
+
+  // This needs to be added so that the focus outline is shown correctly
+  .executeScript(`document.querySelector('#${dismissButtonId}').setAttribute('data-fui-focus-visible', '')`)
+  .focus(`#${dismissButtonId}`)
+  .snapshot('focus dismiss', { cropTo: '.testWrapper' })
+  .executeScript(`document.querySelector('#${dismissButtonId}').removeAttribute('data-fui-focus-visible')`)
+
+  .end();
+
+export default {
+  title: 'InteractionTag Converged',
+  Component: InteractionTag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof InteractionTag>;
+
+export const Rounded = () => <InteractionTag content={{ id: contentId }}>Primary Text</InteractionTag>;
+
+export const RoundedWithSecondaryText = () => (
+  <InteractionTag content={{ id: contentId }} secondaryText="Secondary Text">
+    Primary Text
+  </InteractionTag>
+);
+
+export const RoundedWithMedia = () => (
+  <InteractionTag content={{ id: contentId }} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </InteractionTag>
+);
+export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);
+
+export const RoundedDismissible = () => (
+  <InteractionTag content={{ id: contentId }} dismissible dismissButton={{ id: dismissButtonId }}>
+    Primary Text
+  </InteractionTag>
+);
+export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);
+
+export const Circular = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular">
+    Primary Text
+  </InteractionTag>
+);
+
+export const CircularWithSecondaryText = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular" secondaryText="Secondary Text">
+    Primary Text
+  </InteractionTag>
+);
+
+export const CircularWithMedia = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    shape="circular"
+    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);
+
+export const CircularDismissible = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular" dismissible dismissButton={{ id: dismissButtonId }}>
+    Primary Text
+  </InteractionTag>
+);
+export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
new file mode 100644
index 0000000000000..66c2b110c1b63
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Tag } from '@fluentui/react-tags-preview';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+import { Steps } from 'storywright';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const tagId = 'tag-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${tagId}}`)
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  .mouseDown(`#${tagId}}`)
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'Tag Converged',
+  Component: Tag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Tag>;
+
+export const Filled = () => (
+  <Tag id={tagId} appearance="filled" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+
+export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
+export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
+
+export const Outline = () => (
+  <Tag id={tagId} appearance="outline" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+
+export const Brand = () => (
+  <Tag id={tagId} appearance="brand" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
new file mode 100644
index 0000000000000..18aec55709af9
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Tag } from '@fluentui/react-tags-preview';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
+
+const tagId = 'tag-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  // This needs to be added so that the focus outline is shown correctly
+  .executeScript(`document.querySelector('#${tagId}').setAttribute('data-fui-focus-visible', '')`)
+  .focus(`#${tagId}`)
+  .snapshot('focused', { cropTo: '.testWrapper' })
+  .executeScript(`document.querySelector('#${tagId}').removeAttribute('data-fui-focus-visible')`)
+  .end();
+
+export default {
+  title: 'Tag Converged',
+  Component: Tag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Tag>;
+
+export const Rounded = () => <Tag>Primary Text</Tag>;
+
+export const RoundedWithSecondaryText = () => <Tag secondaryText="Secondary Text">Primary Text</Tag>;
+
+export const RoundedWithMedia = () => (
+  <Tag media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>Primary Text</Tag>
+);
+export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);
+
+export const RoundedDismissible = () => (
+  <Tag id={tagId} dismissible>
+    Primary Text
+  </Tag>
+);
+export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);
+
+export const Circular = () => <Tag shape="circular">Primary Text</Tag>;
+
+export const CircularWithSecondaryText = () => <Tag secondaryText="Secondary Text">Primary Text</Tag>;
+
+export const CircularWithMedia = () => (
+  <Tag shape="circular" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
+export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);
+
+export const CircularDismissible = () => (
+  <Tag id={tagId} shape="circular" dismissible>
+    Primary Text
+  </Tag>
+);
+export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);

From 50392ee3cdec1975dff5e496da6241d37acb11b2 Mon Sep 17 00:00:00 2001
From: "Geoff Cox (Microsoft)" <gcox@microsoft.com>
Date: Fri, 28 Jul 2023 13:44:13 -0700
Subject: [PATCH 24/37] Add mountNode prop to combos (#28661)

* Added portal slot to combo and dropdown

* yarn change

* PR updates

* PR updates
---
 ...-b28f719f-a080-42c6-acee-872d683f562f.json |   7 +
 .../react-combobox/etc/react-combobox.api.md  |   1 +
 .../components/Combobox/renderCombobox.tsx    |   3 +-
 .../components/Dropdown/renderDropdown.tsx    |   2 +-
 .../src/utils/ComboboxBase.types.ts           | 120 +++++++++---------
 .../src/utils/useComboboxBaseState.ts         |   2 +
 6 files changed, 73 insertions(+), 62 deletions(-)
 create mode 100644 change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json

diff --git a/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json b/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json
new file mode 100644
index 0000000000000..ad979f55c5a38
--- /dev/null
+++ b/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added portal slot to Combobox and Dropdown",
+  "packageName": "@fluentui/react-combobox",
+  "email": "gcox@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-combobox/etc/react-combobox.api.md b/packages/react-components/react-combobox/etc/react-combobox.api.md
index 359a21b2dd24e..d2d98d67ef736 100644
--- a/packages/react-components/react-combobox/etc/react-combobox.api.md
+++ b/packages/react-components/react-combobox/etc/react-combobox.api.md
@@ -10,6 +10,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
diff --git a/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx
index d52f0b32ab2b2..099f51bf56259 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx
+++ b/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx
@@ -1,6 +1,5 @@
 /** @jsxRuntime classic */
 /** @jsx createElement */
-
 import { Portal } from '@fluentui/react-portal';
 
 import { createElement } from '@fluentui/react-jsx-runtime';
@@ -24,7 +23,7 @@ export const renderCombobox_unstable = (state: ComboboxState, contextValues: Com
           (state.inlinePopup ? (
             <slots.listbox {...slotProps.listbox} />
           ) : (
-            <Portal>
+            <Portal mountNode={state.mountNode}>
               <slots.listbox {...slotProps.listbox} />
             </Portal>
           ))}
diff --git a/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx
index 5a01a3706f128..b6239512d18b5 100644
--- a/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx
+++ b/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx
@@ -26,7 +26,7 @@ export const renderDropdown_unstable = (state: DropdownState, contextValues: Dro
           (state.inlinePopup ? (
             <slots.listbox {...slotProps.listbox} />
           ) : (
-            <Portal>
+            <Portal mountNode={state.mountNode}>
               <slots.listbox {...slotProps.listbox} />
             </Portal>
           ))}
diff --git a/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts b/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts
index fb1e599a3a9dc..033cffe22a8cc 100644
--- a/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts
+++ b/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts
@@ -3,75 +3,77 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
 import type { ComboboxContextValue } from '../contexts/ComboboxContext';
 import type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';
 import { SelectionProps, SelectionState } from '../utils/Selection.types';
+import { PortalProps } from '@fluentui/react-portal';
 
 /**
  * ComboboxBase Props
  * Shared types between Combobox and Dropdown components
  */
-export type ComboboxBaseProps = SelectionProps & {
-  /**
-   * Controls the colors and borders of the combobox trigger.
-   * @default 'outline'
-   */
-  appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';
-
-  /**
-   * The default open state when open is uncontrolled
-   */
-  defaultOpen?: boolean;
-
-  /**
-   * The default value displayed in the trigger input or button when the combobox's value is uncontrolled
-   */
-  defaultValue?: string;
-
-  /**
-   * Render the combobox's popup inline in the DOM.
-   * This has accessibility benefits, particularly for touch screen readers.
-   */
-  inlinePopup?: boolean;
-
-  /**
-   * Callback when the open/closed state of the dropdown changes
-   */
-  onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;
-
-  /**
-   * Sets the open/closed state of the dropdown.
-   * Use together with onOpenChange to fully control the dropdown's visibility
-   */
-  open?: boolean;
-
-  /**
-   * If set, the placeholder will show when no value is selected
-   */
-  placeholder?: string;
-
-  /**
-   * Configure the positioning of the combobox dropdown
-   *
-   * @defaultvalue below
-   */
-  positioning?: PositioningShorthand;
-
-  /**
-   * Controls the size of the combobox faceplate
-   * @default 'medium'
-   */
-  size?: 'small' | 'medium' | 'large';
-
-  /**
-   * The value displayed by the Combobox.
-   * Use this with `onOptionSelect` to directly control the displayed value string
-   */
-  value?: string;
-};
+export type ComboboxBaseProps = SelectionProps &
+  Pick<PortalProps, 'mountNode'> & {
+    /**
+     * Controls the colors and borders of the combobox trigger.
+     * @default 'outline'
+     */
+    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';
+
+    /**
+     * The default open state when open is uncontrolled
+     */
+    defaultOpen?: boolean;
+
+    /**
+     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled
+     */
+    defaultValue?: string;
+
+    /**
+     * Render the combobox's popup inline in the DOM.
+     * This has accessibility benefits, particularly for touch screen readers.
+     */
+    inlinePopup?: boolean;
+
+    /**
+     * Callback when the open/closed state of the dropdown changes
+     */
+    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;
+
+    /**
+     * Sets the open/closed state of the dropdown.
+     * Use together with onOpenChange to fully control the dropdown's visibility
+     */
+    open?: boolean;
+
+    /**
+     * If set, the placeholder will show when no value is selected
+     */
+    placeholder?: string;
+
+    /**
+     * Configure the positioning of the combobox dropdown
+     *
+     * @defaultvalue below
+     */
+    positioning?: PositioningShorthand;
+
+    /**
+     * Controls the size of the combobox faceplate
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+
+    /**
+     * The value displayed by the Combobox.
+     * Use this with `onOptionSelect` to directly control the displayed value string
+     */
+    value?: string;
+  };
 
 /**
  * State used in rendering Combobox
  */
 export type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &
-  Pick<ComboboxBaseProps, 'placeholder' | 'value' | 'multiselect'> &
+  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &
   OptionCollectionState &
   SelectionState & {
     /* Option data for the currently highlighted option (not the selected option) */
diff --git a/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts b/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts
index 4646284e05765..e9fa2e802b656 100644
--- a/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts
+++ b/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts
@@ -16,6 +16,7 @@ export const useComboboxBaseState = (
     children,
     editable = false,
     inlinePopup = false,
+    mountNode = undefined,
     multiselect,
     onOpenChange,
     size = 'medium',
@@ -117,6 +118,7 @@ export const useComboboxBaseState = (
     hasFocus,
     ignoreNextBlur,
     inlinePopup,
+    mountNode,
     open,
     setActiveOption,
     setFocusVisible,

From 08842860e5eef4755a2c0eee7b360d91b92593dc Mon Sep 17 00:00:00 2001
From: Fluent UI Build <fluentui-internal@service.microsoft.com>
Date: Mon, 31 Jul 2023 07:33:24 +0000
Subject: [PATCH 25/37] applying package updates

---
 ...ugin-09407c84-dd7b-4550-b467-fef7d9945fda.json |  7 -------
 packages/eslint-plugin/CHANGELOG.json             | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 7 deletions(-)
 delete mode 100644 change/@fluentui-eslint-plugin-09407c84-dd7b-4550-b467-fef7d9945fda.json

diff --git a/change/@fluentui-eslint-plugin-09407c84-dd7b-4550-b467-fef7d9945fda.json b/change/@fluentui-eslint-plugin-09407c84-dd7b-4550-b467-fef7d9945fda.json
deleted file mode 100644
index 4a5ac005f65f1..0000000000000
--- a/change/@fluentui-eslint-plugin-09407c84-dd7b-4550-b467-fef7d9945fda.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "chore: exec migrations from @nrwl to @nx packages",
-  "packageName": "@fluentui/eslint-plugin",
-  "email": "martinhochel@microsoft.com",
-  "dependentChangeType": "none"
-}
diff --git a/packages/eslint-plugin/CHANGELOG.json b/packages/eslint-plugin/CHANGELOG.json
index 815985498f11f..f86bd852e8bf7 100644
--- a/packages/eslint-plugin/CHANGELOG.json
+++ b/packages/eslint-plugin/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/eslint-plugin",
   "entries": [
+    {
+      "date": "Mon, 31 Jul 2023 07:33:19 GMT",
+      "tag": "@fluentui/eslint-plugin_v1.17.1",
+      "version": "1.17.1",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/eslint-plugin",
+            "commit": "d39f715d564b0b9ad2f0e18fecf006ce2103cc8c",
+            "comment": "chore: exec migrations from @nrwl to @nx packages"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 28 Jun 2023 07:37:32 GMT",
       "tag": "@fluentui/eslint-plugin_v1.17.1",

From f9e014b3919f00068940b0dd94980f6d542eff68 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Mon, 31 Jul 2023 11:53:09 +0200
Subject: [PATCH 26/37] feaTt(react-tree): adds openItems and checkedItems to
 tree callback data (#28669)

---
 ...-b474b0cc-81a2-48d4-b63b-268445c11d76.json |  7 +++
 .../react-tree/etc/react-tree.api.md          |  3 ++
 .../__snapshots__/FlatTree.test.tsx.snap      |  2 +-
 .../FlatTree/useFlatTreeNavigation.ts         | 44 +++++++++----------
 .../FlatTree/useHeadlessFlatTree.ts           | 33 ++++++++++++--
 .../src/components/Tree/Tree.types.ts         |  2 +
 .../Tree/__snapshots__/Tree.test.tsx.snap     |  2 +-
 .../react-tree/src/components/Tree/useTree.ts | 20 +++++++--
 .../src/components/Tree/useTreeNavigation.ts  | 18 +++-----
 .../src/components/TreeItem/useTreeItem.tsx   | 23 ++++++++--
 .../TreeItem/useTreeItemContextValues.ts      |  2 +
 .../TreeItemLayout/useTreeItemLayout.tsx      |  3 +-
 .../react-tree/src/contexts/treeContext.ts    |  4 +-
 .../src/contexts/treeItemContext.ts           |  7 ++-
 .../react-tree/src/hooks/useRootTree.ts       | 40 ++++++++++++-----
 .../src/hooks/useRovingTabIndexes.ts          | 34 ++++----------
 .../react-tree/src/hooks/useSubtree.ts        |  6 +--
 .../createHTMLElementWalker.ts}               | 14 ------
 .../src/utils/createHeadlessTree.ts           | 17 +++----
 .../src/utils/nextTypeAheadElement.ts         |  2 +-
 20 files changed, 164 insertions(+), 119 deletions(-)
 create mode 100644 change/@fluentui-react-tree-b474b0cc-81a2-48d4-b63b-268445c11d76.json
 rename packages/react-components/react-tree/src/{hooks/useHTMLElementWalker.ts => utils/createHTMLElementWalker.ts} (85%)

diff --git a/change/@fluentui-react-tree-b474b0cc-81a2-48d4-b63b-268445c11d76.json b/change/@fluentui-react-tree-b474b0cc-81a2-48d4-b63b-268445c11d76.json
new file mode 100644
index 0000000000000..4dff240a00eb6
--- /dev/null
+++ b/change/@fluentui-react-tree-b474b0cc-81a2-48d4-b63b-268445c11d76.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: adds openItems and checkedItems to tree callback data",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md
index 9d65dc26c4a87..312b199f75054 100644
--- a/packages/react-components/react-tree/etc/react-tree.api.md
+++ b/packages/react-components/react-tree/etc/react-tree.api.md
@@ -101,6 +101,7 @@ export const Tree: ForwardRefComponent<TreeProps>;
 // @public (undocumented)
 export type TreeCheckedChangeData = {
     value: TreeItemValue;
+    checkedItems: Map<TreeItemValue, TreeSelectionValue>;
     target: HTMLElement;
     event: React_2.ChangeEvent<HTMLElement>;
     type: 'Change';
@@ -152,6 +153,7 @@ export type TreeItemContextValue = {
     itemType: TreeItemType;
     value: TreeItemValue;
     open: boolean;
+    checked?: TreeSelectionValue;
 };
 
 // @public
@@ -269,6 +271,7 @@ export type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];
 // @public (undocumented)
 export type TreeOpenChangeData = {
     open: boolean;
+    openItems: Set<TreeItemValue>;
     value: TreeItemValue;
     target: HTMLElement;
 } & ({
diff --git a/packages/react-components/react-tree/src/components/FlatTree/__snapshots__/FlatTree.test.tsx.snap b/packages/react-components/react-tree/src/components/FlatTree/__snapshots__/FlatTree.test.tsx.snap
index 3c359b50b261a..0121eef37e9f1 100644
--- a/packages/react-components/react-tree/src/components/FlatTree/__snapshots__/FlatTree.test.tsx.snap
+++ b/packages/react-components/react-tree/src/components/FlatTree/__snapshots__/FlatTree.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`FlatTree renders a default state 1`] = `
 <div>
   <div
     class="fui-FlatTree"
-    role="baseTree"
+    role="tree"
   >
     Default FlatTree
   </div>
diff --git a/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeNavigation.ts b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeNavigation.ts
index 79e655c0f78b8..3c7b7133cba63 100644
--- a/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeNavigation.ts
+++ b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeNavigation.ts
@@ -1,56 +1,54 @@
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useEventCallback } from '@fluentui/react-utilities';
 import { TreeNavigationData_unstable } from '../../Tree';
 import { HeadlessTree, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';
 import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
 import { treeDataTypes } from '../../utils/tokens';
 import { treeItemFilter } from '../../utils/treeItemFilter';
-import { HTMLElementWalker, useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
 import { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../../utils/getTreeItemValueFromElement';
+import { HTMLElementWalker } from '../../utils/createHTMLElementWalker';
 
 export function useFlatTreeNavigation<Props extends HeadlessTreeItemProps>(virtualTree: HeadlessTree<Props>) {
   const { targetDocument } = useFluent_unstable();
-  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);
-  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
+  const { rove, initialize } = useRovingTabIndex(treeItemFilter);
 
-  function getNextElement(data: TreeNavigationData_unstable) {
-    if (!targetDocument || !treeItemWalkerRef.current) {
+  function getNextElement(data: TreeNavigationData_unstable, walker: HTMLElementWalker) {
+    if (!targetDocument) {
       return null;
     }
-    const treeItemWalker = treeItemWalkerRef.current;
     switch (data.type) {
       case treeDataTypes.Click:
         return data.target;
       case treeDataTypes.TypeAhead:
-        treeItemWalker.currentElement = data.target;
-        return nextTypeAheadElement(treeItemWalker, data.event.key);
+        walker.currentElement = data.target;
+        return nextTypeAheadElement(walker, data.event.key);
       case treeDataTypes.ArrowLeft:
-        return parentElement(virtualTree, data.target, treeItemWalker);
+        return parentElement(virtualTree, data.target, walker);
       case treeDataTypes.ArrowRight:
-        treeItemWalker.currentElement = data.target;
-        return firstChild(data.target, treeItemWalker);
+        walker.currentElement = data.target;
+        return firstChild(data.target, walker);
       case treeDataTypes.End:
-        treeItemWalker.currentElement = treeItemWalker.root;
-        return treeItemWalker.lastChild();
+        walker.currentElement = walker.root;
+        return walker.lastChild();
       case treeDataTypes.Home:
-        treeItemWalker.currentElement = treeItemWalker.root;
-        return treeItemWalker.firstChild();
+        walker.currentElement = walker.root;
+        return walker.firstChild();
       case treeDataTypes.ArrowDown:
-        treeItemWalker.currentElement = data.target;
-        return treeItemWalker.nextElement();
+        walker.currentElement = data.target;
+        return walker.nextElement();
       case treeDataTypes.ArrowUp:
-        treeItemWalker.currentElement = data.target;
-        return treeItemWalker.previousElement();
+        walker.currentElement = data.target;
+        return walker.previousElement();
     }
   }
-  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {
-    const nextElement = getNextElement(data);
+  const navigate = useEventCallback((data: TreeNavigationData_unstable, walker: HTMLElementWalker) => {
+    const nextElement = getNextElement(data, walker);
     if (nextElement) {
       rove(nextElement);
     }
   });
-  return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)] as const;
+  return { navigate, initialize } as const;
 }
 
 function firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {
diff --git a/packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts b/packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts
index 1cd0f2bbae210..51b3fdecf9b99 100644
--- a/packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts
+++ b/packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts
@@ -18,6 +18,8 @@ import {
   TreeOpenChangeEvent,
   TreeProps,
 } from '../Tree/Tree.types';
+import { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
+import { treeItemFilter } from '../../utils/treeItemFilter';
 
 export type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;
 export type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;
@@ -114,7 +116,18 @@ export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps
   const headlessTree = React.useMemo(() => createHeadlessTree(props), [props]);
   const [openItems, setOpenItems] = useControllableOpenItems(options);
   const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options);
-  const [navigate, navigationRef] = useFlatTreeNavigation(headlessTree);
+  const { initialize, navigate } = useFlatTreeNavigation(headlessTree);
+  const walkerRef = React.useRef<HTMLElementWalker>();
+  const initializeWalker = React.useCallback(
+    (root: HTMLElement | null) => {
+      if (root) {
+        walkerRef.current = createHTMLElementWalker(root, treeItemFilter);
+        initialize(walkerRef.current);
+      }
+    },
+    [initialize],
+  );
+
   const treeRef = React.useRef<HTMLDivElement>(null);
   const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
     options.onOpenChange?.(event, data);
@@ -129,7 +142,9 @@ export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps
   const handleNavigation = useEventCallback(
     (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {
       options.onNavigation_unstable?.(event, data);
-      navigate(data);
+      if (walkerRef.current) {
+        navigate(data, walkerRef.current);
+      }
     },
   );
 
@@ -161,7 +176,7 @@ export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps
     return treeRef.current?.querySelector(`[${dataTreeItemValueAttrName}="${item.value}"]`) as HTMLElement | null;
   }, []);
 
-  const ref = useMergedRefs<HTMLDivElement>(treeRef, navigationRef as React.Ref<HTMLDivElement>);
+  const ref = useMergedRefs<HTMLDivElement>(treeRef, initializeWalker);
 
   const getTreeProps = React.useCallback(
     () => ({
@@ -181,7 +196,17 @@ export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps
   const items = React.useCallback(() => headlessTree.visibleItems(openItems), [openItems, headlessTree]);
 
   return React.useMemo<HeadlessFlatTree<Props>>(
-    () => ({ navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items }),
+    () => ({
+      navigate: data => {
+        if (walkerRef.current) {
+          navigate(data, walkerRef.current);
+        }
+      },
+      getTreeProps,
+      getNextNavigableItem,
+      getElementFromItem,
+      items,
+    }),
     [navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items],
   );
 }
diff --git a/packages/react-components/react-tree/src/components/Tree/Tree.types.ts b/packages/react-components/react-tree/src/components/Tree/Tree.types.ts
index 19ca60bab2cd8..8783a4bdeb6b4 100644
--- a/packages/react-components/react-tree/src/components/Tree/Tree.types.ts
+++ b/packages/react-components/react-tree/src/components/Tree/Tree.types.ts
@@ -31,6 +31,7 @@ export type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];
 
 export type TreeOpenChangeData = {
   open: boolean;
+  openItems: Set<TreeItemValue>;
   value: TreeItemValue;
   target: HTMLElement;
 } & (
@@ -45,6 +46,7 @@ export type TreeOpenChangeEvent = TreeOpenChangeData['event'];
 
 export type TreeCheckedChangeData = {
   value: TreeItemValue;
+  checkedItems: Map<TreeItemValue, TreeSelectionValue>;
   target: HTMLElement;
   event: React.ChangeEvent<HTMLElement>;
   type: 'Change';
diff --git a/packages/react-components/react-tree/src/components/Tree/__snapshots__/Tree.test.tsx.snap b/packages/react-components/react-tree/src/components/Tree/__snapshots__/Tree.test.tsx.snap
index 0a325e6d2f376..09d301c571754 100644
--- a/packages/react-components/react-tree/src/components/Tree/__snapshots__/Tree.test.tsx.snap
+++ b/packages/react-components/react-tree/src/components/Tree/__snapshots__/Tree.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Tree renders a default state 1`] = `
 <div>
   <div
     class="fui-Tree"
-    role="baseTree"
+    role="tree"
   >
     Default Tree
   </div>
diff --git a/packages/react-components/react-tree/src/components/Tree/useTree.ts b/packages/react-components/react-tree/src/components/Tree/useTree.ts
index be62cac02e678..6c9906331e7e9 100644
--- a/packages/react-components/react-tree/src/components/Tree/useTree.ts
+++ b/packages/react-components/react-tree/src/components/Tree/useTree.ts
@@ -16,11 +16,23 @@ import { useControllableCheckedItems } from './useControllableCheckedItems';
 import { useTreeContext_unstable } from '../../contexts/treeContext';
 import { useRootTree } from '../../hooks/useRootTree';
 import { useSubtree } from '../../hooks/useSubtree';
+import { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
+import { treeItemFilter } from '../../utils/treeItemFilter';
 
 export const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {
   const [openItems, setOpenItems] = useControllableOpenItems(props);
   const [checkedItems] = useControllableCheckedItems(props);
-  const [navigate, navigationRef] = useTreeNavigation();
+  const { navigate, initialize } = useTreeNavigation();
+  const walkerRef = React.useRef<HTMLElementWalker>();
+  const initializeWalker = React.useCallback(
+    (root: HTMLElement | null) => {
+      if (root) {
+        walkerRef.current = createHTMLElementWalker(root, treeItemFilter);
+        initialize(walkerRef.current);
+      }
+    },
+    [initialize],
+  );
 
   const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
     props.onOpenChange?.(event, data);
@@ -33,7 +45,9 @@ export const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>):
   const handleNavigation = useEventCallback(
     (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {
       props.onNavigation_unstable?.(event, data);
-      navigate(data);
+      if (walkerRef.current) {
+        navigate(data, walkerRef.current);
+      }
     },
   );
 
@@ -47,7 +61,7 @@ export const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>):
     onCheckedChange: handleCheckedChange,
   };
 
-  const baseRef = useMergedRefs(ref, navigationRef);
+  const baseRef = useMergedRefs(ref, initializeWalker);
 
   const isSubtree = useTreeContext_unstable(ctx => ctx.level > 0);
   // as isSubTree is static, this doesn't break rule of hooks
diff --git a/packages/react-components/react-tree/src/components/Tree/useTreeNavigation.ts b/packages/react-components/react-tree/src/components/Tree/useTreeNavigation.ts
index 317755ea6cac4..6436e2a4d668a 100644
--- a/packages/react-components/react-tree/src/components/Tree/useTreeNavigation.ts
+++ b/packages/react-components/react-tree/src/components/Tree/useTreeNavigation.ts
@@ -1,20 +1,14 @@
-import { useMergedRefs } from '@fluentui/react-utilities';
 import { TreeNavigationData_unstable } from './Tree.types';
 import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
 import { treeDataTypes } from '../../utils/tokens';
 import { treeItemFilter } from '../../utils/treeItemFilter';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
-import { HTMLElementWalker, useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';
+import { HTMLElementWalker } from '../../utils/createHTMLElementWalker';
 
 export function useTreeNavigation() {
-  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
-  const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);
+  const { rove, initialize } = useRovingTabIndex(treeItemFilter);
 
-  const getNextElement = (data: TreeNavigationData_unstable) => {
-    if (!walkerRef.current) {
-      return;
-    }
-    const treeItemWalker = walkerRef.current;
+  const getNextElement = (data: TreeNavigationData_unstable, treeItemWalker: HTMLElementWalker) => {
     switch (data.type) {
       case treeDataTypes.Click:
         return data.target;
@@ -41,13 +35,13 @@ export function useTreeNavigation() {
         return treeItemWalker.previousElement();
     }
   };
-  function navigate(data: TreeNavigationData_unstable) {
-    const nextElement = getNextElement(data);
+  function navigate(data: TreeNavigationData_unstable, walker: HTMLElementWalker) {
+    const nextElement = getNextElement(data, walker);
     if (nextElement) {
       rove(nextElement);
     }
   }
-  return [navigate, useMergedRefs(rootRef, rovingRootRef)] as const;
+  return { navigate, initialize } as const;
 }
 
 function lastChildRecursive(walker: HTMLElementWalker) {
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
index 8eff75465b65a..af3b56d89a714 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
@@ -3,7 +3,7 @@ import { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-uti
 import { useEventCallback } from '@fluentui/react-utilities';
 import { elementContains } from '@fluentui/react-portal';
 import type { TreeItemProps, TreeItemState } from './TreeItem.types';
-import { useTreeContext_unstable } from '../../contexts/index';
+import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts/index';
 import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
 import { Space } from '@fluentui/keyboard-keys';
 import { treeDataTypes } from '../../utils/tokens';
@@ -42,8 +42,14 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
   const selectionRef = React.useRef<HTMLInputElement>(null);
 
   const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));
-  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);
   const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);
+  const parentChecked = useTreeItemContext_unstable(ctx => ctx.checked);
+  const checked = useTreeContext_unstable(ctx => {
+    if (selectionMode === 'multiselect' && typeof parentChecked === 'boolean') {
+      return parentChecked;
+    }
+    return ctx.checkedItems.get(value);
+  });
 
   const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
     onClick?.(event);
@@ -133,13 +139,21 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
     if (isEventFromSubtree) {
       return;
     }
-    requestTreeResponse({ event, value, itemType, type: 'Change', target: event.currentTarget });
+    requestTreeResponse({
+      event,
+      value,
+      itemType,
+      type: 'Change',
+      target: event.currentTarget,
+      checked: checked === 'mixed' ? true : !checked,
+    });
   });
 
   const isBranch = itemType === 'branch';
   return {
     value,
     open,
+    checked,
     subtreeRef,
     layoutRef,
     selectionRef,
@@ -159,7 +173,8 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
       role: 'treeitem',
       'aria-level': level,
       [dataTreeItemValueAttrName]: value,
-      'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
+      'aria-checked':
+        selectionMode === 'multiselect' ? (checked === 'mixed' ? undefined : checked ?? false) : undefined,
       'aria-selected': selectionMode === 'single' ? checked : undefined,
       'aria-expanded': isBranch ? open : undefined,
       onClick: handleClick,
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts
index 4bb493b9ed74d..e5cf0a17f8983 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts
@@ -13,6 +13,7 @@ export function useTreeItemContextValues_unstable(state: TreeItemState): TreeIte
     isActionsVisible,
     isAsideVisible,
     selectionRef,
+    checked,
   } = state;
 
   /**
@@ -21,6 +22,7 @@ export function useTreeItemContextValues_unstable(state: TreeItemState): TreeIte
    */
   const treeItem: TreeItemContextValue = {
     value,
+    checked,
     itemType,
     layoutRef,
     subtreeRef,
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
index 5687ddb7bf22e..6c81bdc5165a0 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
@@ -35,8 +35,7 @@ export const useTreeItemLayout_unstable = (
   const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);
   const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);
   const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);
-  const value = useTreeItemContext_unstable(ctx => ctx.value);
-  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);
+  const checked = useTreeItemContext_unstable(ctx => ctx.checked ?? false);
   const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');
 
   const expandIcon = resolveShorthand(props.expandIcon, {
diff --git a/packages/react-components/react-tree/src/contexts/treeContext.ts b/packages/react-components/react-tree/src/contexts/treeContext.ts
index d8a3bca4b35fd..923a603210beb 100644
--- a/packages/react-components/react-tree/src/contexts/treeContext.ts
+++ b/packages/react-components/react-tree/src/contexts/treeContext.ts
@@ -19,9 +19,9 @@ export type TreeContextValue = {
 };
 
 export type TreeItemRequest = { itemType: TreeItemType } & (
-  | OmitWithoutExpanding<TreeOpenChangeData, 'open'>
+  | OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'>
   | TreeNavigationData_unstable
-  | OmitWithoutExpanding<TreeCheckedChangeData, 'checked' | 'selectionMode'>
+  | OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'>
 );
 
 // helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit
diff --git a/packages/react-components/react-tree/src/contexts/treeItemContext.ts b/packages/react-components/react-tree/src/contexts/treeItemContext.ts
index 9e9aa07143a9e..8dc467e07980c 100644
--- a/packages/react-components/react-tree/src/contexts/treeItemContext.ts
+++ b/packages/react-components/react-tree/src/contexts/treeItemContext.ts
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';
 import type { TreeItemType, TreeItemValue } from '../TreeItem';
-import { virtualTreeRootId } from '../utils/createHeadlessTree';
+import { headlessTreeRootId } from '../utils/createHeadlessTree';
+import { TreeSelectionValue } from '../Tree';
 
 export type TreeItemContextValue = {
   isActionsVisible: boolean;
@@ -14,10 +15,11 @@ export type TreeItemContextValue = {
   itemType: TreeItemType;
   value: TreeItemValue;
   open: boolean;
+  checked?: TreeSelectionValue;
 };
 
 const defaultContextValue: TreeItemContextValue = {
-  value: virtualTreeRootId,
+  value: headlessTreeRootId,
   selectionRef: React.createRef(),
   layoutRef: React.createRef(),
   subtreeRef: React.createRef(),
@@ -27,6 +29,7 @@ const defaultContextValue: TreeItemContextValue = {
   isAsideVisible: false,
   itemType: 'leaf',
   open: false,
+  checked: undefined,
 };
 
 export const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<
diff --git a/packages/react-components/react-tree/src/hooks/useRootTree.ts b/packages/react-components/react-tree/src/hooks/useRootTree.ts
index d3ec2bfb4c28a..a813e4f8c26b0 100644
--- a/packages/react-components/react-tree/src/hooks/useRootTree.ts
+++ b/packages/react-components/react-tree/src/hooks/useRootTree.ts
@@ -14,10 +14,10 @@ import { createCheckedItems } from '../utils/createCheckedItems';
 import { treeDataTypes } from '../utils/tokens';
 
 /**
- * Create the state required to render the root level BaseTree.
+ * Create the state required to render the root level tree.
  *
- * @param props - props from this instance of BaseTree
- * @param ref - reference to root HTMLElement of BaseTree
+ * @param props - props from this instance of tree
+ * @param ref - reference to root HTMLElement of tree
  */
 export function useRootTree(
   props: Pick<
@@ -56,7 +56,11 @@ export function useRootTree(
       case treeDataTypes.Click:
       case treeDataTypes.ExpandIconClick: {
         return ReactDOM.unstable_batchedUpdates(() => {
-          requestOpenChange({ ...request, open: request.itemType === 'branch' && !openItems.has(request.value) });
+          requestOpenChange({
+            ...request,
+            open: request.itemType === 'branch' && !openItems.has(request.value),
+            openItems: openItems.dangerouslyGetInternalSet_unstable(),
+          });
           requestNavigation({ ...request, type: treeDataTypes.Click });
         });
       }
@@ -66,18 +70,31 @@ export function useRootTree(
         }
         const open = openItems.has(request.value);
         if (!open) {
-          return requestOpenChange({ ...request, open: true });
+          return requestOpenChange({
+            ...request,
+            open: true,
+            openItems: openItems.dangerouslyGetInternalSet_unstable(),
+          });
         }
         return requestNavigation(request);
       }
       case treeDataTypes.Enter: {
         const open = openItems.has(request.value);
-        return requestOpenChange({ ...request, open: request.itemType === 'branch' && !open });
+        return requestOpenChange({
+          ...request,
+          open: request.itemType === 'branch' && !open,
+          openItems: openItems.dangerouslyGetInternalSet_unstable(),
+        });
       }
       case treeDataTypes.ArrowLeft: {
         const open = openItems.has(request.value);
         if (open && request.itemType === 'branch') {
-          return requestOpenChange({ ...request, open: false, type: treeDataTypes.ArrowLeft });
+          return requestOpenChange({
+            ...request,
+            open: false,
+            type: treeDataTypes.ArrowLeft,
+            openItems: openItems.dangerouslyGetInternalSet_unstable(),
+          });
         }
         return requestNavigation({ ...request, type: treeDataTypes.ArrowLeft });
       }
@@ -88,12 +105,11 @@ export function useRootTree(
       case treeDataTypes.TypeAhead:
         return requestNavigation({ ...request, target: request.event.currentTarget });
       case treeDataTypes.Change: {
-        const previousCheckedValue = checkedItems.get(request.value);
         return requestCheckedChange({
           ...request,
           selectionMode: selectionMode as SelectionMode,
-          checked: previousCheckedValue === 'mixed' ? true : !previousCheckedValue,
-        });
+          checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),
+        } as TreeCheckedChangeData);
       }
     }
   });
@@ -112,7 +128,7 @@ export function useRootTree(
     requestTreeResponse,
     root: getNativeElementProps('div', {
       ref,
-      role: 'baseTree',
+      role: 'tree',
       'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
       ...props,
     }),
@@ -123,7 +139,7 @@ function warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria
   if (process.env.NODE_ENV === 'development') {
     if (!props['aria-label'] && !props['aria-labelledby']) {
       // eslint-disable-next-line no-console
-      console.warn('BaseTree must have either a `aria-label` or `aria-labelledby` property defined');
+      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');
     }
   }
 }
diff --git a/packages/react-components/react-tree/src/hooks/useRovingTabIndexes.ts b/packages/react-components/react-tree/src/hooks/useRovingTabIndexes.ts
index dfa3b4f295f9b..7ec8278616e28 100644
--- a/packages/react-components/react-tree/src/hooks/useRovingTabIndexes.ts
+++ b/packages/react-components/react-tree/src/hooks/useRovingTabIndexes.ts
@@ -1,26 +1,13 @@
-import { useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { HTMLElementFilter, useHTMLElementWalkerRef } from './useHTMLElementWalker';
+import { HTMLElementFilter, HTMLElementWalker } from '../utils/createHTMLElementWalker';
 
 /**
  * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
  */
 export function useRovingTabIndex(filter?: HTMLElementFilter) {
   const currentElementRef = React.useRef<HTMLElement>();
-  const [walkerRef, rootRef] = useHTMLElementWalkerRef(filter);
 
-  const rootRefCallback = (element?: HTMLElement) => {
-    if (!element) {
-      return;
-    }
-    reset();
-  };
-
-  function reset() {
-    if (!walkerRef.current) {
-      return;
-    }
-    const walker = walkerRef.current;
+  const initialize = React.useCallback((walker: HTMLElementWalker) => {
     walker.currentElement = walker.root;
     let tabbableChild = walker.firstChild(element =>
       element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
@@ -36,8 +23,8 @@ export function useRovingTabIndex(filter?: HTMLElementFilter) {
     while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {
       nextElement.tabIndex = -1;
     }
-  }
-  function rove(nextElement: HTMLElement) {
+  }, []);
+  const rove = React.useCallback((nextElement: HTMLElement) => {
     if (!currentElementRef.current) {
       return;
     }
@@ -45,13 +32,10 @@ export function useRovingTabIndex(filter?: HTMLElementFilter) {
     nextElement.tabIndex = 0;
     nextElement.focus();
     currentElementRef.current = nextElement;
-  }
+  }, []);
 
-  return [
-    {
-      rove,
-      reset,
-    },
-    useMergedRefs(rootRef, rootRefCallback) as React.Ref<HTMLElement>,
-  ] as const;
+  return {
+    rove,
+    initialize,
+  };
 }
diff --git a/packages/react-components/react-tree/src/hooks/useSubtree.ts b/packages/react-components/react-tree/src/hooks/useSubtree.ts
index e6a947703d058..3bda2ff516301 100644
--- a/packages/react-components/react-tree/src/hooks/useSubtree.ts
+++ b/packages/react-components/react-tree/src/hooks/useSubtree.ts
@@ -4,10 +4,10 @@ import { useTreeContext_unstable, useTreeItemContext_unstable } from '../context
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
 
 /**
- * Create the state required to render a sub-level BaseTree.
+ * Create the state required to render a sub-level tree.
  *
- * @param props - props from this instance of BaseTree
- * @param ref - reference to root HTMLElement of BaseTree
+ * @param props - props from this instance of tree
+ * @param ref - reference to root HTMLElement of tree
  */
 export function useSubtree(props: Pick<TreeProps, 'appearance' | 'size'>, ref: React.Ref<HTMLElement>): TreeState {
   const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);
diff --git a/packages/react-components/react-tree/src/hooks/useHTMLElementWalker.ts b/packages/react-components/react-tree/src/utils/createHTMLElementWalker.ts
similarity index 85%
rename from packages/react-components/react-tree/src/hooks/useHTMLElementWalker.ts
rename to packages/react-components/react-tree/src/utils/createHTMLElementWalker.ts
index 8f42ea477a4f7..bbd3a2ff35b19 100644
--- a/packages/react-components/react-tree/src/hooks/useHTMLElementWalker.ts
+++ b/packages/react-components/react-tree/src/utils/createHTMLElementWalker.ts
@@ -1,5 +1,4 @@
 import { isHTMLElement } from '@fluentui/react-utilities';
-import * as React from 'react';
 
 export interface HTMLElementWalker {
   readonly root: HTMLElement;
@@ -83,16 +82,3 @@ export function createHTMLElementWalker(
     },
   };
 }
-
-export const useHTMLElementWalkerRef = (filter?: HTMLElementFilter) => {
-  const walkerRef = React.useRef<HTMLElementWalker>();
-
-  const rootRefCallback = (element?: HTMLElement) => {
-    if (!element) {
-      walkerRef.current = undefined;
-      return;
-    }
-    walkerRef.current = createHTMLElementWalker(element, filter);
-  };
-  return [walkerRef as React.RefObject<HTMLElementWalker>, rootRefCallback as React.Ref<HTMLElement>] as const;
-};
diff --git a/packages/react-components/react-tree/src/utils/createHeadlessTree.ts b/packages/react-components/react-tree/src/utils/createHeadlessTree.ts
index e18ad358357f1..bcf6405ee51f9 100644
--- a/packages/react-components/react-tree/src/utils/createHeadlessTree.ts
+++ b/packages/react-components/react-tree/src/utils/createHeadlessTree.ts
@@ -104,7 +104,7 @@ export function createHeadlessTree<Props extends HeadlessTreeItemProps>(
     get: key => itemsPerValue.get(key),
     has: key => itemsPerValue.has(key),
     add(props) {
-      const { parentValue = virtualTreeRootId, ...propsWithoutParentValue } = props;
+      const { parentValue = headlessTreeRootId, ...propsWithoutParentValue } = props;
       const parentItem = itemsPerValue.get(parentValue);
       if (!parentItem) {
         if (process.env.NODE_ENV === 'development') {
@@ -169,12 +169,12 @@ export function createHeadlessTree<Props extends HeadlessTreeItemProps>(
   return headlessTree as HeadlessTree<Props>;
 }
 
-export const virtualTreeRootId = '__fuiHeadlessTreeRoot';
+export const headlessTreeRootId = '__fuiHeadlessTreeRoot';
 
 function createHeadlessTreeRootItem(): HeadlessTreeItem<HeadlessTreeItemProps> {
   return {
     parentValue: undefined,
-    value: virtualTreeRootId,
+    value: headlessTreeRootId,
     itemType: 'branch',
     getTreeItemProps: () => {
       if (process.env.NODE_ENV !== 'production') {
@@ -182,8 +182,8 @@ function createHeadlessTreeRootItem(): HeadlessTreeItem<HeadlessTreeItemProps> {
         console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');
       }
       return {
-        id: virtualTreeRootId,
-        value: virtualTreeRootId,
+        id: headlessTreeRootId,
+        value: headlessTreeRootId,
         'aria-setsize': -1,
         'aria-level': -1,
         'aria-posinset': -1,
@@ -223,11 +223,8 @@ function* HeadlessTreeSubtreeGenerator<Props extends HeadlessTreeItemProps>(
     return;
   }
   for (const childValue of item.childrenValues) {
-    const child = virtualTreeItems.get(childValue)!;
-    yield child;
-    if (child.childrenValues.length > 0) {
-      yield* HeadlessTreeSubtreeGenerator(childValue, virtualTreeItems);
-    }
+    yield virtualTreeItems.get(childValue)!;
+    yield* HeadlessTreeSubtreeGenerator(childValue, virtualTreeItems);
   }
 }
 
diff --git a/packages/react-components/react-tree/src/utils/nextTypeAheadElement.ts b/packages/react-components/react-tree/src/utils/nextTypeAheadElement.ts
index 695f5d7107432..03f0b4f61a092 100644
--- a/packages/react-components/react-tree/src/utils/nextTypeAheadElement.ts
+++ b/packages/react-components/react-tree/src/utils/nextTypeAheadElement.ts
@@ -1,4 +1,4 @@
-import { HTMLElementWalker } from '../hooks/useHTMLElementWalker';
+import { HTMLElementWalker } from './createHTMLElementWalker';
 
 export function nextTypeAheadElement(treeWalker: HTMLElementWalker, key: string) {
   const keyToLowerCase = key.toLowerCase();

From d4b3feec354590939a340460bea62f4e39d38a74 Mon Sep 17 00:00:00 2001
From: Petr Duda <peta.duda@gmail.com>
Date: Mon, 31 Jul 2023 15:03:48 +0200
Subject: [PATCH 27/37] [Bug]: Tree, vertical spacing of branches and children
 is inconsistent (#28681)

* paddingtop nested tree

* change

* token

* Update change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json

Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>

* Update packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts

Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>

* remove unused styles

* unused shortcuts

---------

Co-authored-by: petdud <petrduda@microsoft.com>
Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
---
 ...-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json |  7 +++++++
 .../FlatTree/useFlatTreeStyles.styles.ts           | 14 ++------------
 .../src/components/Tree/useTreeStyles.styles.ts    |  8 ++++----
 3 files changed, 13 insertions(+), 16 deletions(-)
 create mode 100644 change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json

diff --git a/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json b/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json
new file mode 100644
index 0000000000000..aab00dedfa227
--- /dev/null
+++ b/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "bugfix: Tree, vertical spacing of branches and children is inconsistent",
+  "packageName": "@fluentui/react-tree",
+  "email": "petrduda@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts
index c096d5bf3ed81..2079cc20cf75a 100644
--- a/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts
+++ b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { FlatTreeSlots, FlatTreeState } from './FlatTree.types';
@@ -13,20 +13,10 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     rowGap: tokens.spacingVerticalXXS,
   },
-  subtree: {
-    ...shorthands.flex(1, 1, '100%'),
-    ...shorthands.gridArea('subtree'),
-  },
 });
 
 export const useFlatTreeStyles_unstable = (state: FlatTreeState): FlatTreeState => {
   const styles = useStyles();
-  const isSubTree = state.level > 0;
-  state.root.className = mergeClasses(
-    flatTreeClassNames.root,
-    styles.root,
-    isSubTree && styles.subtree,
-    state.root.className,
-  );
+  state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts
index e438354319179..780b2b2f50c8a 100644
--- a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts
+++ b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { TreeSlots, TreeState } from './Tree.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
@@ -14,14 +14,14 @@ const useStyles = makeStyles({
     rowGap: tokens.spacingVerticalXXS,
   },
   subtree: {
-    ...shorthands.flex(1, 1, '100%'),
-    ...shorthands.gridArea('subtree'),
+    paddingTop: tokens.spacingVerticalXXS,
   },
 });
 
 export const useTreeStyles_unstable = (state: TreeState): TreeState => {
   const styles = useStyles();
-  const isSubTree = state.level > 0;
+  const isSubTree = state.level > 1;
+
   state.root.className = mergeClasses(
     treeClassNames.root,
     styles.root,

From 9250428d00e7e2909a0e3bae667c6ef0044ea67e Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Mon, 31 Jul 2023 16:38:21 +0200
Subject: [PATCH 28/37] fix(react-menu): use outline for menuItem focus ring
 (#28685)

* use outline

* chg
---
 ...menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json |  7 +++++++
 .../MenuItem/useMenuItemStyles.styles.ts          | 15 +++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json

diff --git a/change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json b/change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json
new file mode 100644
index 0000000000000..b4b1b0193c8e0
--- /dev/null
+++ b/change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use css outline for MenuItem focus ring instead of pseudo element",
+  "packageName": "@fluentui/react-menu",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
index 8e9f4cf354049..09512b27d8d31 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
+++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -1,6 +1,6 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';
@@ -17,7 +17,18 @@ export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
 };
 
 const useStyles = makeStyles({
-  focusIndicator: createFocusOutlineStyle(),
+  focusIndicator: {
+    ':focus': {
+      outlineStyle: 'none',
+    },
+    ':focus-visible': {
+      outlineStyle: 'none',
+    },
+    ...createCustomFocusIndicatorStyle({
+      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    }),
+  },
   // TODO: this should be extracted to another package
   root: {
     ...shorthands.borderRadius(tokens.borderRadiusMedium),

From 58c60bce83efdf5811adb73c4f2f9b1950109fbf Mon Sep 17 00:00:00 2001
From: Valentina <vkozlova@microsoft.com>
Date: Mon, 31 Jul 2023 16:56:04 +0200
Subject: [PATCH 29/37] Added VR tests for Breadcrumb (#28653)

* Added Breadcrumb stories to the folder.
* Added VR tests for the Breadcrumb
---
 apps/vr-tests-react-components/package.json   |  1 +
 .../stories/Breadcrumb/Breadcrumb.stories.tsx | 69 +++++++++++++++++++
 .../src/stories/Breadcrumb/utils.tsx          | 64 +++++++++++++++++
 .../BreadcrumbWithOverflow.stories.tsx        |  2 +-
 .../BreadcrumbButton/index.stories.tsx        |  2 +-
 .../BreadcrumbDivider/index.stories.tsx       |  2 +-
 .../stories/BreadcrumbItem/index.stories.tsx  |  2 +-
 .../BreadcrumbLinkDefault.stories.tsx         |  2 +-
 .../stories/BreadcrumbLink/index.stories.tsx  |  2 +-
 9 files changed, 140 insertions(+), 6 deletions(-)
 create mode 100644 apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx

diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index f1d204a673aa1..dffe851e99b27 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/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": "*",
diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx
new file mode 100644
index 0000000000000..03194095e207f
--- /dev/null
+++ b/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';
diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx
new file mode 100644
index 0000000000000..79a445a82244d
--- /dev/null
+++ b/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>
+);
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
index 77137c8e8145d..1de076ba11c70 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
@@ -130,7 +130,7 @@ const useExampleStyles = makeStyles({
     height: 'fit-content',
     minWidth: '150px',
     resize: 'horizontal',
-    width: '500px',
+    width: '600px',
   },
 });
 
diff --git a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbButton/index.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbButton/index.stories.tsx
index fdfba31dd2249..0cfea8fecaafa 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbButton/index.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbButton/index.stories.tsx
@@ -6,7 +6,7 @@ import bestPracticesMd from './BreadcrumbButtonBestPractices.md';
 export { Default } from './BreadcrumbButtonDefault.stories';
 
 export default {
-  title: 'Preview Components/BreadcrumbButton',
+  title: 'Preview Components/Breadcrumb/BreadcrumbButton',
   component: BreadcrumbButton,
   parameters: {
     docs: {
diff --git a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbDivider/index.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbDivider/index.stories.tsx
index d82f5dc9b358b..265a0d0d60b7b 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbDivider/index.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbDivider/index.stories.tsx
@@ -6,7 +6,7 @@ import bestPracticesMd from './BreadcrumbDividerBestPractices.md';
 export { Default } from './BreadcrumbDividerDefault.stories';
 
 export default {
-  title: 'Preview Components/BreadcrumbDivider',
+  title: 'Preview Components/Breadcrumb/BreadcrumbDivider',
   component: BreadcrumbDivider,
   parameters: {
     docs: {
diff --git a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbItem/index.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbItem/index.stories.tsx
index ba60c08bdda43..821d0f9076823 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbItem/index.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbItem/index.stories.tsx
@@ -6,7 +6,7 @@ import bestPracticesMd from './BreadcrumbItemBestPractices.md';
 export { Default } from './BreadcrumbItemDefault.stories';
 
 export default {
-  title: 'Preview Components/BreadcrumbItem',
+  title: 'Preview Components/Breadcrumb/BreadcrumbItem',
   component: BreadcrumbItem,
   parameters: {
     docs: {
diff --git a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbLink/BreadcrumbLinkDefault.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbLink/BreadcrumbLinkDefault.stories.tsx
index e60a28c448cf3..6b4e395a9134f 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbLink/BreadcrumbLinkDefault.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbLink/BreadcrumbLinkDefault.stories.tsx
@@ -102,7 +102,7 @@ export const Default = () => {
   const [appearance, setAppearance] = React.useState('transparent' as BreadcrumbProps['appearance']);
   return (
     <>
-      <Label>Appearance (see the difference on `hover`)</Label>
+      <Label>Appearance</Label>
       <RadioGroup
         aria-labelledby="breadcrumb-appearance"
         value={appearance}
diff --git a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbLink/index.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbLink/index.stories.tsx
index 7686e7f7c28ff..e83212d06c9de 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbLink/index.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbLink/index.stories.tsx
@@ -6,7 +6,7 @@ import bestPracticesMd from './BreadcrumbLinkBestPractices.md';
 export { Default } from './BreadcrumbLinkDefault.stories';
 
 export default {
-  title: 'Preview Components/BreadcrumbLink',
+  title: 'Preview Components/Breadcrumb/BreadcrumbLink',
   component: BreadcrumbLink,
   parameters: {
     docs: {

From 937b241d624114c181ea1521d0d4ead1068ddfa3 Mon Sep 17 00:00:00 2001
From: Emma Jiang <31319479+emmayjiang@users.noreply.github.com>
Date: Mon, 31 Jul 2023 16:52:16 -0700
Subject: [PATCH 30/37] feat(react-shared-contexts): add AnnounceContext
 (#28654)

* add Announce context

* changefile

* Update packages/react-components/react-shared-contexts/src/AnnounceContext/AnnounceContext.ts

Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>

* options fixes

* updated api

* Update packages/react-components/react-shared-contexts/src/AnnounceContext/AnnounceContext.ts

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* remove generic type

---------

Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
---
 ...-6be5add1-ce81-4471-bd65-d79d627c1a96.json |  7 +++++
 .../etc/react-shared-contexts.api.md          | 13 +++++++++
 .../src/AnnounceContext/AnnounceContext.ts    | 29 +++++++++++++++++++
 .../src/AnnounceContext/index.ts              |  1 +
 .../react-shared-contexts/src/index.ts        |  3 ++
 5 files changed, 53 insertions(+)
 create mode 100644 change/@fluentui-react-shared-contexts-6be5add1-ce81-4471-bd65-d79d627c1a96.json
 create mode 100644 packages/react-components/react-shared-contexts/src/AnnounceContext/AnnounceContext.ts
 create mode 100644 packages/react-components/react-shared-contexts/src/AnnounceContext/index.ts

diff --git a/change/@fluentui-react-shared-contexts-6be5add1-ce81-4471-bd65-d79d627c1a96.json b/change/@fluentui-react-shared-contexts-6be5add1-ce81-4471-bd65-d79d627c1a96.json
new file mode 100644
index 0000000000000..5ba75877d1f68
--- /dev/null
+++ b/change/@fluentui-react-shared-contexts-6be5add1-ce81-4471-bd65-d79d627c1a96.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "adds Announce context",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "eysjiang@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
index 624cd1a5b7f66..99e1ba1000237 100644
--- a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
+++ b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
@@ -7,6 +7,14 @@
 import * as React_2 from 'react';
 import type { Theme } from '@fluentui/react-theme';
 
+// @internal (undocumented)
+export type AnnounceContextValue_unstable = {
+    announce: (message: string, options?: AnnounceOptions) => void;
+};
+
+// @internal (undocumented)
+export const AnnounceProvider_unstable: React_2.Provider<AnnounceContextValue_unstable | undefined>;
+
 // @internal (undocumented)
 export type BackgroundAppearanceContextValue = 'inverted' | undefined;
 
@@ -334,6 +342,11 @@ export type TooltipVisibilityContextValue_unstable = {
 // @internal (undocumented)
 export const TooltipVisibilityProvider_unstable: React_2.Provider<TooltipVisibilityContextValue_unstable>;
 
+// Warning: (ae-incompatible-release-tags) The symbol "useAnnounce" is marked as @public, but its signature references "AnnounceContextValue_unstable" which is marked as @internal
+//
+// @public (undocumented)
+export function useAnnounce_unstable(): AnnounceContextValue_unstable;
+
 // Warning: (ae-incompatible-release-tags) The symbol "useBackgroundAppearance" is marked as @public, but its signature references "BackgroundAppearanceContextValue" which is marked as @internal
 //
 // @public (undocumented)
diff --git a/packages/react-components/react-shared-contexts/src/AnnounceContext/AnnounceContext.ts b/packages/react-components/react-shared-contexts/src/AnnounceContext/AnnounceContext.ts
new file mode 100644
index 0000000000000..b78db49fb9a93
--- /dev/null
+++ b/packages/react-components/react-shared-contexts/src/AnnounceContext/AnnounceContext.ts
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export type AnnounceOptions = {
+  alert?: boolean;
+  batchId?: string;
+  polite?: boolean;
+  priority?: number;
+};
+
+/**
+ * @internal
+ */
+export type AnnounceContextValue = {
+  announce: (message: string, options?: AnnounceOptions) => void;
+};
+
+/**
+ * @internal
+ */
+const AnnounceContext = React.createContext<AnnounceContextValue | undefined>(undefined);
+
+/**
+ * @internal
+ */
+export const AnnounceProvider = AnnounceContext.Provider;
+
+export function useAnnounce(): AnnounceContextValue {
+  return React.useContext(AnnounceContext) ?? { announce: () => undefined };
+}
diff --git a/packages/react-components/react-shared-contexts/src/AnnounceContext/index.ts b/packages/react-components/react-shared-contexts/src/AnnounceContext/index.ts
new file mode 100644
index 0000000000000..010521a097566
--- /dev/null
+++ b/packages/react-components/react-shared-contexts/src/AnnounceContext/index.ts
@@ -0,0 +1 @@
+export * from './AnnounceContext';
diff --git a/packages/react-components/react-shared-contexts/src/index.ts b/packages/react-components/react-shared-contexts/src/index.ts
index b268d85cca929..b4c3bc40d4b6a 100644
--- a/packages/react-components/react-shared-contexts/src/index.ts
+++ b/packages/react-components/react-shared-contexts/src/index.ts
@@ -33,3 +33,6 @@ export { BackgroundAppearanceProvider, useBackgroundAppearance } from './Backgro
 export type { BackgroundAppearanceContextValue } from './BackgroundAppearanceContext';
 
 export { PortalMountNodeProvider, usePortalMountNode } from './PortalMountNodeContext';
+
+export { AnnounceProvider as AnnounceProvider_unstable, useAnnounce as useAnnounce_unstable } from './AnnounceContext';
+export type { AnnounceContextValue as AnnounceContextValue_unstable } from './AnnounceContext';

From 0c693a82d2d6e3c52012d53fdd40af42397fc5cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Vyhn=C3=A1lek?=
 <jirivyhnalek@microsoft.com>
Date: Tue, 1 Aug 2023 10:57:17 +0200
Subject: [PATCH 31/37] Accordion: export AccordionHeaderProvider (#28542)

---
 ...ccordion-d347d71a-89ad-47dd-94e6-e739bbd01e34.json |  7 +++++++
 .../react-accordion/etc/react-accordion.api.md        | 11 +++++++++++
 .../AccordionHeader/AccordionHeaderContext.ts         |  2 ++
 .../src/components/AccordionHeader/index.ts           |  1 +
 .../react-components/react-accordion/src/index.ts     |  2 ++
 5 files changed, 23 insertions(+)
 create mode 100644 change/@fluentui-react-accordion-d347d71a-89ad-47dd-94e6-e739bbd01e34.json

diff --git a/change/@fluentui-react-accordion-d347d71a-89ad-47dd-94e6-e739bbd01e34.json b/change/@fluentui-react-accordion-d347d71a-89ad-47dd-94e6-e739bbd01e34.json
new file mode 100644
index 0000000000000..9cd60a056f347
--- /dev/null
+++ b/change/@fluentui-react-accordion-d347d71a-89ad-47dd-94e6-e739bbd01e34.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Accordion - export AccordionHeaderContextProvider",
+  "packageName": "@fluentui/react-accordion",
+  "email": "jirivyhnalek@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-accordion/etc/react-accordion.api.md b/packages/react-components/react-accordion/etc/react-accordion.api.md
index 32e6a4b5ad3fa..712c9f5a97696 100644
--- a/packages/react-components/react-accordion/etc/react-accordion.api.md
+++ b/packages/react-components/react-accordion/etc/react-accordion.api.md
@@ -41,6 +41,9 @@ export const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
 // @public (undocumented)
 export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
 
+// @public (undocumented)
+export const AccordionHeaderContextProvider: React_2.Provider<AccordionHeaderContextValue | undefined>;
+
 // @public (undocumented)
 export type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {
     disabled: boolean;
@@ -191,6 +194,14 @@ export function useAccordionContextValues_unstable(state: AccordionState): Accor
 // @public
 export const useAccordionHeader_unstable: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
 
+// @public (undocumented)
+export const useAccordionHeaderContext_unstable: () => {
+    open: boolean;
+    disabled: boolean;
+    size: string;
+    expandIconPosition: string;
+};
+
 // @public (undocumented)
 export function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues;
 
diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeaderContext.ts b/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeaderContext.ts
index 4eb92b7a0c814..174b35685eca1 100644
--- a/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeaderContext.ts
+++ b/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeaderContext.ts
@@ -3,6 +3,8 @@ import type { AccordionHeaderContextValue } from './AccordionHeader.types';
 
 export const AccordionHeaderContext = React.createContext<AccordionHeaderContextValue | undefined>(undefined);
 
+export const AccordionHeaderContextProvider = AccordionHeaderContext.Provider;
+
 const accordionHeaderContextDefaultValue = {
   open: false,
   disabled: false,
diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/index.ts b/packages/react-components/react-accordion/src/components/AccordionHeader/index.ts
index ce32bacc27b60..8af099f3da5b2 100644
--- a/packages/react-components/react-accordion/src/components/AccordionHeader/index.ts
+++ b/packages/react-components/react-accordion/src/components/AccordionHeader/index.ts
@@ -4,3 +4,4 @@ export * from './renderAccordionHeader';
 export * from './useAccordionHeader';
 export * from './useAccordionHeaderContextValues';
 export * from './useAccordionHeaderStyles.styles';
+export * from './AccordionHeaderContext';
diff --git a/packages/react-components/react-accordion/src/index.ts b/packages/react-components/react-accordion/src/index.ts
index c796f00033a0c..79973432e04d8 100644
--- a/packages/react-components/react-accordion/src/index.ts
+++ b/packages/react-components/react-accordion/src/index.ts
@@ -40,10 +40,12 @@ export type {
 export {
   AccordionHeader,
   accordionHeaderClassNames,
+  AccordionHeaderContextProvider,
   renderAccordionHeader_unstable,
   useAccordionHeaderContextValues_unstable,
   useAccordionHeaderStyles_unstable,
   useAccordionHeader_unstable,
+  useAccordionHeaderContext as useAccordionHeaderContext_unstable,
 } from './AccordionHeader';
 export type {
   AccordionHeaderContextValue,

From f06508ab5d6caf64a9e892daeaa7cba481482a5a Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Tue, 1 Aug 2023 11:04:44 +0200
Subject: [PATCH 32/37] fix(react-tags-preview): fix InteractionTag hover
 styles (#28686)

* color

* fix
---
 .../useInteractionTagStyles.styles.ts              | 14 ++++++++------
 .../stories/TagGroup/TagGroupOverflow.stories.tsx  | 11 +++++++++--
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts
index 7f0bac3124864..b16b66090f49c 100644
--- a/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts
+++ b/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts
@@ -99,6 +99,7 @@ const useContentButtonStyles = makeStyles({
 
       [`& .${iconFilledClassName}`]: {
         display: 'inline',
+        color: tokens.colorNeutralForeground2BrandHover,
       },
       [`& .${iconRegularClassName}`]: {
         display: 'none',
@@ -110,6 +111,7 @@ const useContentButtonStyles = makeStyles({
 
       [`& .${iconFilledClassName}`]: {
         display: 'inline',
+        color: tokens.colorNeutralForeground2BrandPressed,
       },
       [`& .${iconRegularClassName}`]: {
         display: 'none',
@@ -118,15 +120,15 @@ const useContentButtonStyles = makeStyles({
   },
   brand: {
     backgroundColor: tokens.colorBrandBackground2,
-    color: tokens.colorBrandForeground2,
+    color: tokens.colorBrandForeground1,
     ':hover': {
       cursor: 'pointer',
       backgroundColor: tokens.colorBrandBackground2Hover,
-      color: tokens.colorBrandForeground2Hover,
+      color: tokens.colorCompoundBrandForeground1Hover,
     },
     ':hover:active': {
       backgroundColor: tokens.colorBrandBackground2Pressed,
-      color: tokens.colorBrandForeground2Pressed,
+      color: tokens.colorCompoundBrandForeground1Pressed,
     },
   },
 
@@ -256,16 +258,16 @@ const useDismissButtonStyles = makeStyles({
   },
   brand: {
     backgroundColor: tokens.colorBrandBackground2,
-    color: tokens.colorBrandForeground2,
+    color: tokens.colorBrandForeground1,
     borderLeftColor: tokens.colorBrandStroke2, // divider
     ':hover': {
       cursor: 'pointer',
       backgroundColor: tokens.colorBrandBackground2Hover,
-      color: tokens.colorBrandForeground2Hover,
+      color: tokens.colorCompoundBrandForeground1Hover,
     },
     ':hover:active': {
       backgroundColor: tokens.colorBrandBackground2Pressed,
-      color: tokens.colorBrandForeground2Pressed,
+      color: tokens.colorCompoundBrandForeground1Pressed,
     },
   },
 
diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
index f6aadab05c227..b9d6387ef45d6 100644
--- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TagGroup, Tag, TagProps } from '@fluentui/react-tags-preview';
+import { TagGroup, Tag, TagProps, tagClassNames } from '@fluentui/react-tags-preview';
 import {
   makeStyles,
   shorthands,
@@ -50,7 +50,14 @@ type OverflowMenuItemProps = {
 };
 
 const useMenuItemStyles = makeStyles({
-  menuItem: shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalXS),
+  menuItem: {
+    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalXS),
+    ':hover': {
+      [`& .${tagClassNames.root}`]: {
+        color: tokens.colorNeutralForeground2Hover,
+      },
+    },
+  },
   tag: {
     backgroundColor: 'transparent',
     ...shorthands.borderColor('transparent'),

From 412d815f88863bde8bb16abc8fd9c4140a37f1f5 Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Tue, 1 Aug 2023 11:16:08 +0200
Subject: [PATCH 33/37] fix(react-positioning): autoSize causing position
 update to reach maximum (#28689)

* fix

* f

* test

* clean test

* type test
---
 ...-86dcd6cd-76f3-4f49-b446-04e827493aa7.json |  7 +++++
 .../src/middleware/maxSize.test.ts            | 30 +++++++++++++++++++
 .../src/middleware/maxSize.ts                 |  4 +--
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json
 create mode 100644 packages/react-components/react-positioning/src/middleware/maxSize.test.ts

diff --git a/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json b/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json
new file mode 100644
index 0000000000000..d838c265b9663
--- /dev/null
+++ b/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: autoSize causing maximum positioning update",
+  "packageName": "@fluentui/react-positioning",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.test.ts b/packages/react-components/react-positioning/src/middleware/maxSize.test.ts
new file mode 100644
index 0000000000000..f58d086bcc49b
--- /dev/null
+++ b/packages/react-components/react-positioning/src/middleware/maxSize.test.ts
@@ -0,0 +1,30 @@
+import { Platform, computePosition } from '@floating-ui/dom';
+import { resetMaxSize } from './maxSize';
+
+const referenceRect: Partial<DOMRect> = { x: 0, y: 0, width: 100, height: 100 };
+const floatingRect: Partial<DOMRect> = { x: 0, y: 0, width: 50, height: 50 };
+const mockGetElementRects = jest.fn(() =>
+  Promise.resolve({
+    reference: referenceRect,
+    floating: floatingRect,
+  }),
+);
+const platform = {
+  getElementRects: mockGetElementRects,
+} as Partial<Platform> as Platform;
+
+describe('maxSize', () => {
+  it('resetMaxSize reset once per life cycle', async () => {
+    expect.hasAssertions();
+    const button = document.createElement('div');
+    const tooltip = document.createElement('div');
+    const autoSize = { applyMaxHeight: true, applyMaxWidth: true };
+
+    await computePosition(button, tooltip, {
+      placement: 'right',
+      middleware: [resetMaxSize(autoSize)],
+      platform,
+    });
+    expect(mockGetElementRects).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.ts b/packages/react-components/react-positioning/src/middleware/maxSize.ts
index 760668c41700f..0af9a944b9794 100644
--- a/packages/react-components/react-positioning/src/middleware/maxSize.ts
+++ b/packages/react-components/react-positioning/src/middleware/maxSize.ts
@@ -13,8 +13,8 @@ export interface MaxSizeMiddlewareOptions extends Pick<PositioningOptions, 'over
  */
 export const resetMaxSize = (autoSize: NormalizedAutoSize): Middleware => ({
   name: 'resetMaxSize',
-  fn({ middlewareData: { maxSizeAlreadyReset }, elements }) {
-    if (maxSizeAlreadyReset) {
+  fn({ middlewareData, elements }) {
+    if (middlewareData.resetMaxSize?.maxSizeAlreadyReset) {
       return {};
     }
 

From a95776b230966aca3e10f2ae6291d1eeb2687dc6 Mon Sep 17 00:00:00 2001
From: Fluent UI Build <fluentui-internal@service.microsoft.com>
Date: Tue, 1 Aug 2023 10:17:27 +0000
Subject: [PATCH 34/37] applying package updates

---
 ...-d347d71a-89ad-47dd-94e6-e739bbd01e34.json |  7 --
 ...-b28f719f-a080-42c6-acee-872d683f562f.json |  7 --
 ...-510dece4-88f8-4c7d-9e27-036a1e74d520.json |  7 --
 ...-86dcd6cd-76f3-4f49-b446-04e827493aa7.json |  7 --
 ...-6be5add1-ce81-4471-bd65-d79d627c1a96.json |  7 --
 ...-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json |  7 --
 ...-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json |  7 --
 ...-b474b0cc-81a2-48d4-b63b-268445c11d76.json |  7 --
 ...-b70a6941-a063-49d6-a196-4dbd7abfd90c.json |  7 --
 .../react-accordion/CHANGELOG.json            | 27 ++++++
 .../react-accordion/CHANGELOG.md              | 13 ++-
 .../react-accordion/package.json              |  6 +-
 .../react-alert/CHANGELOG.json                | 27 ++++++
 .../react-components/react-alert/CHANGELOG.md | 13 ++-
 .../react-components/react-alert/package.json |  8 +-
 .../react-avatar/CHANGELOG.json               | 39 +++++++++
 .../react-avatar/CHANGELOG.md                 | 15 +++-
 .../react-avatar/package.json                 | 12 +--
 .../react-badge/CHANGELOG.json                | 15 ++++
 .../react-components/react-badge/CHANGELOG.md | 11 ++-
 .../react-components/react-badge/package.json |  4 +-
 .../react-breadcrumb-preview/CHANGELOG.json   | 33 ++++++++
 .../react-breadcrumb-preview/CHANGELOG.md     | 14 +++-
 .../react-breadcrumb-preview/package.json     | 10 +--
 .../react-button/CHANGELOG.json               | 21 +++++
 .../react-button/CHANGELOG.md                 | 12 ++-
 .../react-button/package.json                 |  6 +-
 .../react-card/CHANGELOG.json                 | 15 ++++
 .../react-components/react-card/CHANGELOG.md  | 11 ++-
 .../react-components/react-card/package.json  |  4 +-
 .../react-checkbox/CHANGELOG.json             | 33 ++++++++
 .../react-checkbox/CHANGELOG.md               | 14 +++-
 .../react-checkbox/package.json               | 10 +--
 .../react-combobox/CHANGELOG.json             | 39 +++++++++
 .../react-combobox/CHANGELOG.md               | 15 +++-
 .../react-combobox/package.json               | 10 +--
 .../react-components/CHANGELOG.json           | 67 +++++++++++++++
 .../react-components/CHANGELOG.md             | 32 ++++++-
 .../react-components/package.json             | 84 +++++++++----------
 .../react-datepicker-compat/CHANGELOG.json    | 51 +++++++++++
 .../react-datepicker-compat/CHANGELOG.md      | 17 +++-
 .../react-datepicker-compat/package.json      | 16 ++--
 .../react-dialog/CHANGELOG.json               | 27 ++++++
 .../react-dialog/CHANGELOG.md                 | 13 ++-
 .../react-dialog/package.json                 |  8 +-
 .../react-divider/CHANGELOG.json              | 15 ++++
 .../react-divider/CHANGELOG.md                | 11 ++-
 .../react-divider/package.json                |  4 +-
 .../react-drawer/CHANGELOG.json               | 21 +++++
 .../react-drawer/CHANGELOG.md                 | 12 ++-
 .../react-drawer/package.json                 |  6 +-
 .../react-field/CHANGELOG.json                | 15 ++++
 .../react-components/react-field/CHANGELOG.md | 11 ++-
 .../react-components/react-field/package.json |  4 +-
 .../react-image/CHANGELOG.json                | 15 ++++
 .../react-components/react-image/CHANGELOG.md | 11 ++-
 .../react-components/react-image/package.json |  4 +-
 .../react-infobutton/CHANGELOG.json           | 27 ++++++
 .../react-infobutton/CHANGELOG.md             | 13 ++-
 .../react-infobutton/package.json             |  8 +-
 .../react-input/CHANGELOG.json                | 21 +++++
 .../react-components/react-input/CHANGELOG.md | 12 ++-
 .../react-components/react-input/package.json |  6 +-
 .../react-label/CHANGELOG.json                | 15 ++++
 .../react-components/react-label/CHANGELOG.md | 11 ++-
 .../react-components/react-label/package.json |  4 +-
 .../react-link/CHANGELOG.json                 | 21 +++++
 .../react-components/react-link/CHANGELOG.md  | 12 ++-
 .../react-components/react-link/package.json  |  6 +-
 .../react-menu/CHANGELOG.json                 | 39 +++++++++
 .../react-components/react-menu/CHANGELOG.md  | 15 +++-
 .../react-components/react-menu/package.json  | 10 +--
 .../react-migration-v0-v9/CHANGELOG.json      | 15 ++++
 .../react-migration-v0-v9/CHANGELOG.md        | 11 ++-
 .../react-migration-v0-v9/package.json        |  4 +-
 .../react-migration-v8-v9/CHANGELOG.json      | 15 ++++
 .../react-migration-v8-v9/CHANGELOG.md        | 11 ++-
 .../react-migration-v8-v9/package.json        |  4 +-
 .../react-persona/CHANGELOG.json              | 27 ++++++
 .../react-persona/CHANGELOG.md                | 13 ++-
 .../react-persona/package.json                |  8 +-
 .../react-popover/CHANGELOG.json              | 33 ++++++++
 .../react-popover/CHANGELOG.md                | 14 +++-
 .../react-popover/package.json                | 10 +--
 .../react-portal-compat/CHANGELOG.json        | 21 +++++
 .../react-portal-compat/CHANGELOG.md          | 12 ++-
 .../react-portal-compat/package.json          |  6 +-
 .../react-portal/CHANGELOG.json               | 21 +++++
 .../react-portal/CHANGELOG.md                 | 12 ++-
 .../react-portal/package.json                 |  6 +-
 .../react-positioning/CHANGELOG.json          | 21 +++++
 .../react-positioning/CHANGELOG.md            | 12 ++-
 .../react-positioning/package.json            |  4 +-
 .../react-progress/CHANGELOG.json             | 21 +++++
 .../react-progress/CHANGELOG.md               | 12 ++-
 .../react-progress/package.json               |  6 +-
 .../react-provider/CHANGELOG.json             | 21 +++++
 .../react-provider/CHANGELOG.md               | 12 ++-
 .../react-provider/package.json               |  6 +-
 .../react-radio/CHANGELOG.json                | 33 ++++++++
 .../react-components/react-radio/CHANGELOG.md | 14 +++-
 .../react-components/react-radio/package.json | 10 +--
 .../react-search-preview/CHANGELOG.json       | 15 ++++
 .../react-search-preview/CHANGELOG.md         | 11 ++-
 .../react-search-preview/package.json         |  4 +-
 .../react-select/CHANGELOG.json               | 21 +++++
 .../react-select/CHANGELOG.md                 | 12 ++-
 .../react-select/package.json                 |  6 +-
 .../react-shared-contexts/CHANGELOG.json      | 15 ++++
 .../react-shared-contexts/CHANGELOG.md        | 11 ++-
 .../react-shared-contexts/package.json        |  2 +-
 .../react-skeleton/CHANGELOG.json             | 21 +++++
 .../react-skeleton/CHANGELOG.md               | 12 ++-
 .../react-skeleton/package.json               |  6 +-
 .../react-slider/CHANGELOG.json               | 27 ++++++
 .../react-slider/CHANGELOG.md                 | 13 ++-
 .../react-slider/package.json                 |  8 +-
 .../react-spinbutton/CHANGELOG.json           | 21 +++++
 .../react-spinbutton/CHANGELOG.md             | 12 ++-
 .../react-spinbutton/package.json             |  6 +-
 .../react-spinner/CHANGELOG.json              | 21 +++++
 .../react-spinner/CHANGELOG.md                | 12 ++-
 .../react-spinner/package.json                |  6 +-
 .../react-storybook-addon/package.json        |  2 +-
 .../react-switch/CHANGELOG.json               | 33 ++++++++
 .../react-switch/CHANGELOG.md                 | 14 +++-
 .../react-switch/package.json                 | 10 +--
 .../react-table/CHANGELOG.json                | 39 +++++++++
 .../react-components/react-table/CHANGELOG.md | 15 +++-
 .../react-components/react-table/package.json | 12 +--
 .../react-tabs/CHANGELOG.json                 | 21 +++++
 .../react-components/react-tabs/CHANGELOG.md  | 12 ++-
 .../react-components/react-tabs/package.json  |  6 +-
 .../react-tabster/CHANGELOG.json              | 15 ++++
 .../react-tabster/CHANGELOG.md                | 11 ++-
 .../react-tabster/package.json                |  4 +-
 .../react-tags-preview/package.json           |  6 +-
 .../react-text/CHANGELOG.json                 | 15 ++++
 .../react-components/react-text/CHANGELOG.md  | 11 ++-
 .../react-components/react-text/package.json  |  4 +-
 .../react-textarea/CHANGELOG.json             | 21 +++++
 .../react-textarea/CHANGELOG.md               | 12 ++-
 .../react-textarea/package.json               |  6 +-
 .../react-toast/CHANGELOG.json                | 27 ++++++
 .../react-components/react-toast/CHANGELOG.md | 13 ++-
 .../react-components/react-toast/package.json |  8 +-
 .../react-toolbar/CHANGELOG.json              | 45 ++++++++++
 .../react-toolbar/CHANGELOG.md                | 16 +++-
 .../react-toolbar/package.json                | 12 +--
 .../react-tooltip/CHANGELOG.json              | 27 ++++++
 .../react-tooltip/CHANGELOG.md                | 13 ++-
 .../react-tooltip/package.json                |  8 +-
 .../react-tree/CHANGELOG.json                 | 69 +++++++++++++++
 .../react-components/react-tree/CHANGELOG.md  | 20 ++++-
 .../react-components/react-tree/package.json  | 16 ++--
 .../theme-designer/package.json               |  4 +-
 156 files changed, 2062 insertions(+), 326 deletions(-)
 delete mode 100644 change/@fluentui-react-accordion-d347d71a-89ad-47dd-94e6-e739bbd01e34.json
 delete mode 100644 change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json
 delete mode 100644 change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json
 delete mode 100644 change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json
 delete mode 100644 change/@fluentui-react-shared-contexts-6be5add1-ce81-4471-bd65-d79d627c1a96.json
 delete mode 100644 change/@fluentui-react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json
 delete mode 100644 change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json
 delete mode 100644 change/@fluentui-react-tree-b474b0cc-81a2-48d4-b63b-268445c11d76.json
 delete mode 100644 change/@fluentui-react-tree-b70a6941-a063-49d6-a196-4dbd7abfd90c.json

diff --git a/change/@fluentui-react-accordion-d347d71a-89ad-47dd-94e6-e739bbd01e34.json b/change/@fluentui-react-accordion-d347d71a-89ad-47dd-94e6-e739bbd01e34.json
deleted file mode 100644
index 9cd60a056f347..0000000000000
--- a/change/@fluentui-react-accordion-d347d71a-89ad-47dd-94e6-e739bbd01e34.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "Accordion - export AccordionHeaderContextProvider",
-  "packageName": "@fluentui/react-accordion",
-  "email": "jirivyhnalek@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json b/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json
deleted file mode 100644
index ad979f55c5a38..0000000000000
--- a/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "Added portal slot to Combobox and Dropdown",
-  "packageName": "@fluentui/react-combobox",
-  "email": "gcox@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json b/change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json
deleted file mode 100644
index b4b1b0193c8e0..0000000000000
--- a/change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: use css outline for MenuItem focus ring instead of pseudo element",
-  "packageName": "@fluentui/react-menu",
-  "email": "yuanboxue@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json b/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json
deleted file mode 100644
index d838c265b9663..0000000000000
--- a/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "fix: autoSize causing maximum positioning update",
-  "packageName": "@fluentui/react-positioning",
-  "email": "yuanboxue@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-shared-contexts-6be5add1-ce81-4471-bd65-d79d627c1a96.json b/change/@fluentui-react-shared-contexts-6be5add1-ce81-4471-bd65-d79d627c1a96.json
deleted file mode 100644
index 5ba75877d1f68..0000000000000
--- a/change/@fluentui-react-shared-contexts-6be5add1-ce81-4471-bd65-d79d627c1a96.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "adds Announce context",
-  "packageName": "@fluentui/react-shared-contexts",
-  "email": "eysjiang@gmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json b/change/@fluentui-react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json
deleted file mode 100644
index 9c0e1418bfe27..0000000000000
--- a/change/@fluentui-react-toolbar-d17fdf5d-7561-468e-b616-f1bbe8f690d5.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Remove margin from Icon in ToolbarButton when vertical prop is passed",
-  "packageName": "@fluentui/react-toolbar",
-  "email": "chassunc@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json b/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json
deleted file mode 100644
index aab00dedfa227..0000000000000
--- a/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "bugfix: Tree, vertical spacing of branches and children is inconsistent",
-  "packageName": "@fluentui/react-tree",
-  "email": "petrduda@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-tree-b474b0cc-81a2-48d4-b63b-268445c11d76.json b/change/@fluentui-react-tree-b474b0cc-81a2-48d4-b63b-268445c11d76.json
deleted file mode 100644
index 4dff240a00eb6..0000000000000
--- a/change/@fluentui-react-tree-b474b0cc-81a2-48d4-b63b-268445c11d76.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "feat: adds openItems and checkedItems to tree callback data",
-  "packageName": "@fluentui/react-tree",
-  "email": "bernardo.sunderhus@gmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-tree-b70a6941-a063-49d6-a196-4dbd7abfd90c.json b/change/@fluentui-react-tree-b70a6941-a063-49d6-a196-4dbd7abfd90c.json
deleted file mode 100644
index 2cf95314afd33..0000000000000
--- a/change/@fluentui-react-tree-b70a6941-a063-49d6-a196-4dbd7abfd90c.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "chore: improves internal headless signature",
-  "packageName": "@fluentui/react-tree",
-  "email": "bernardo.sunderhus@gmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/react-components/react-accordion/CHANGELOG.json b/packages/react-components/react-accordion/CHANGELOG.json
index 88cd01a27157f..3d3d8ffefd3cc 100644
--- a/packages/react-components/react-accordion/CHANGELOG.json
+++ b/packages/react-components/react-accordion/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-accordion",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:19 GMT",
+      "tag": "@fluentui/react-accordion_v9.2.0",
+      "version": "9.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-accordion",
+            "commit": "0c693a82d2d6e3c52012d53fdd40af42397fc5cf",
+            "comment": "Accordion - export AccordionHeaderContextProvider"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-accordion",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-accordion",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:16 GMT",
       "tag": "@fluentui/react-accordion_v9.1.25",
diff --git a/packages/react-components/react-accordion/CHANGELOG.md b/packages/react-components/react-accordion/CHANGELOG.md
index 6582b1e8c5feb..4ca3810147b98 100644
--- a/packages/react-components/react-accordion/CHANGELOG.md
+++ b/packages/react-components/react-accordion/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-accordion
 
-This log was last generated on Tue, 25 Jul 2023 13:29:16 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.2.0)
+
+Tue, 01 Aug 2023 10:17:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.1.25..@fluentui/react-accordion_v9.2.0)
+
+### Minor changes
+
+- Accordion - export AccordionHeaderContextProvider ([PR #28542](https://github.com/microsoft/fluentui/pull/28542) by jirivyhnalek@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.1.25)
 
 Tue, 25 Jul 2023 13:29:16 GMT 
diff --git a/packages/react-components/react-accordion/package.json b/packages/react-components/react-accordion/package.json
index 5eee0ad2d7c24..db3441c80728d 100644
--- a/packages/react-components/react-accordion/package.json
+++ b/packages/react-components/react-accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-accordion",
-  "version": "9.1.25",
+  "version": "9.2.0",
   "description": "Fluent UI accordion component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,8 +37,8 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-alert/CHANGELOG.json b/packages/react-components/react-alert/CHANGELOG.json
index 013e8999b1fcb..679e80f8ad3e2 100644
--- a/packages/react-components/react-alert/CHANGELOG.json
+++ b/packages/react-components/react-alert/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-alert",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-alert_v9.0.0-beta.62",
+      "version": "9.0.0-beta.62",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-alert",
+            "comment": "Bump @fluentui/react-avatar to v9.5.16",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-alert",
+            "comment": "Bump @fluentui/react-button to v9.3.26",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-alert",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-alert_v9.0.0-beta.61",
diff --git a/packages/react-components/react-alert/CHANGELOG.md b/packages/react-components/react-alert/CHANGELOG.md
index d0abc5d2917e2..fc39a7dbe1de5 100644
--- a/packages/react-components/react-alert/CHANGELOG.md
+++ b/packages/react-components/react-alert/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-alert
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.62](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.62)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.61..@fluentui/react-alert_v9.0.0-beta.62)
+
+### Changes
+
+- Bump @fluentui/react-avatar to v9.5.16 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-button to v9.3.26 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.0.0-beta.61](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.61)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-alert/package.json b/packages/react-components/react-alert/package.json
index 08cf329d7a74d..4603d3eb4cf4b 100644
--- a/packages/react-components/react-alert/package.json
+++ b/packages/react-components/react-alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-alert",
-  "version": "9.0.0-beta.61",
+  "version": "9.0.0-beta.62",
   "description": "An alert component to display brief messages",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,10 +33,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.5.15",
-    "@fluentui/react-button": "^9.3.25",
+    "@fluentui/react-avatar": "^9.5.16",
+    "@fluentui/react-button": "^9.3.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-avatar/CHANGELOG.json b/packages/react-components/react-avatar/CHANGELOG.json
index 83c964e2c0fb7..e24773666dcdf 100644
--- a/packages/react-components/react-avatar/CHANGELOG.json
+++ b/packages/react-components/react-avatar/CHANGELOG.json
@@ -1,6 +1,45 @@
 {
   "name": "@fluentui/react-avatar",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-avatar_v9.5.16",
+      "version": "9.5.16",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.1.23",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.7.10",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.2.27",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-avatar_v9.5.15",
diff --git a/packages/react-components/react-avatar/CHANGELOG.md b/packages/react-components/react-avatar/CHANGELOG.md
index bb97b55072646..8a1e54c2f89fc 100644
--- a/packages/react-components/react-avatar/CHANGELOG.md
+++ b/packages/react-components/react-avatar/CHANGELOG.md
@@ -1,9 +1,22 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.5.16)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.5.15..@fluentui/react-avatar_v9.5.16)
+
+### Patches
+
+- Bump @fluentui/react-badge to v9.1.23 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-popover to v9.7.10 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tooltip to v9.2.27 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.5.15)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-avatar/package.json b/packages/react-components/react-avatar/package.json
index d424e877f295f..01071919acf65 100644
--- a/packages/react-components/react-avatar/package.json
+++ b/packages/react-components/react-avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.5.15",
+  "version": "9.5.16",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,14 +37,14 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-badge": "^9.1.22",
+    "@fluentui/react-badge": "^9.1.23",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-popover": "^9.7.9",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-popover": "^9.7.10",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-tooltip": "^9.2.26",
+    "@fluentui/react-tooltip": "^9.2.27",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-badge/CHANGELOG.json b/packages/react-components/react-badge/CHANGELOG.json
index 93d1be3dd68c0..19f3103100299 100644
--- a/packages/react-components/react-badge/CHANGELOG.json
+++ b/packages/react-components/react-badge/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-badge",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-badge_v9.1.23",
+      "version": "9.1.23",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:16 GMT",
       "tag": "@fluentui/react-badge_v9.1.22",
diff --git a/packages/react-components/react-badge/CHANGELOG.md b/packages/react-components/react-badge/CHANGELOG.md
index d85e6a2cb2344..12c3dec36b450 100644
--- a/packages/react-components/react-badge/CHANGELOG.md
+++ b/packages/react-components/react-badge/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-badge
 
-This log was last generated on Tue, 25 Jul 2023 13:29:16 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.23)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.1.22..@fluentui/react-badge_v9.1.23)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.22)
 
 Tue, 25 Jul 2023 13:29:16 GMT 
diff --git a/packages/react-components/react-badge/package.json b/packages/react-components/react-badge/package.json
index 966bf84fb2ccf..e724ed6f1937c 100644
--- a/packages/react-components/react-badge/package.json
+++ b/packages/react-components/react-badge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-badge",
-  "version": "9.1.22",
+  "version": "9.1.23",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-breadcrumb-preview/CHANGELOG.json b/packages/react-components/react-breadcrumb-preview/CHANGELOG.json
index 3d5e93b75f2c7..d886db6536cb2 100644
--- a/packages/react-components/react-breadcrumb-preview/CHANGELOG.json
+++ b/packages/react-components/react-breadcrumb-preview/CHANGELOG.json
@@ -1,6 +1,39 @@
 {
   "name": "@fluentui/react-breadcrumb-preview",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-breadcrumb-preview_v0.1.3",
+      "version": "0.1.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "comment": "Bump @fluentui/react-button to v9.3.26",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "comment": "Bump @fluentui/react-link to v9.1.5",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-breadcrumb-preview",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:16 GMT",
       "tag": "@fluentui/react-breadcrumb-preview_v0.1.2",
diff --git a/packages/react-components/react-breadcrumb-preview/CHANGELOG.md b/packages/react-components/react-breadcrumb-preview/CHANGELOG.md
index 9ce706f9fbae4..65ca5ad5c6b3e 100644
--- a/packages/react-components/react-breadcrumb-preview/CHANGELOG.md
+++ b/packages/react-components/react-breadcrumb-preview/CHANGELOG.md
@@ -1,9 +1,21 @@
 # Change Log - @fluentui/react-breadcrumb-preview
 
-This log was last generated on Tue, 25 Jul 2023 13:29:16 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-breadcrumb-preview_v0.1.3)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-breadcrumb-preview_v0.1.2..@fluentui/react-breadcrumb-preview_v0.1.3)
+
+### Patches
+
+- Bump @fluentui/react-button to v9.3.26 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-link to v9.1.5 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [0.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-breadcrumb-preview_v0.1.2)
 
 Tue, 25 Jul 2023 13:29:16 GMT 
diff --git a/packages/react-components/react-breadcrumb-preview/package.json b/packages/react-components/react-breadcrumb-preview/package.json
index 442847fffc4d2..abcd664441347 100644
--- a/packages/react-components/react-breadcrumb-preview/package.json
+++ b/packages/react-components/react-breadcrumb-preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-breadcrumb-preview",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Breadcrumb component for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,11 +35,11 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.3.25",
+    "@fluentui/react-button": "^9.3.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-link": "^9.1.4",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-link": "^9.1.5",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-button/CHANGELOG.json b/packages/react-components/react-button/CHANGELOG.json
index 705ca3827bbad..1ace5e740bc0e 100644
--- a/packages/react-components/react-button/CHANGELOG.json
+++ b/packages/react-components/react-button/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-button",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-button_v9.3.26",
+      "version": "9.3.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:17 GMT",
       "tag": "@fluentui/react-button_v9.3.25",
diff --git a/packages/react-components/react-button/CHANGELOG.md b/packages/react-components/react-button/CHANGELOG.md
index 85e75b2882a6d..fd3aeb603181e 100644
--- a/packages/react-components/react-button/CHANGELOG.md
+++ b/packages/react-components/react-button/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Tue, 25 Jul 2023 13:29:17 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.26)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.25..@fluentui/react-button_v9.3.26)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.3.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.25)
 
 Tue, 25 Jul 2023 13:29:17 GMT 
diff --git a/packages/react-components/react-button/package.json b/packages/react-components/react-button/package.json
index e738e1327770c..de4d2524f50d6 100644
--- a/packages/react-components/react-button/package.json
+++ b/packages/react-components/react-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "9.3.25",
+  "version": "9.3.26",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,8 +38,8 @@
     "@fluentui/react-aria": "^9.3.27",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-card/CHANGELOG.json b/packages/react-components/react-card/CHANGELOG.json
index aa03b01656c04..ddf050c25abf1 100644
--- a/packages/react-components/react-card/CHANGELOG.json
+++ b/packages/react-components/react-card/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-card",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-card_v9.0.25",
+      "version": "9.0.25",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-card_v9.0.24",
diff --git a/packages/react-components/react-card/CHANGELOG.md b/packages/react-components/react-card/CHANGELOG.md
index 4338de6adae8c..fe5021a2bdfd4 100644
--- a/packages/react-components/react-card/CHANGELOG.md
+++ b/packages/react-components/react-card/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.25)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.24..@fluentui/react-card_v9.0.25)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.0.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.24)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-card/package.json b/packages/react-components/react-card/package.json
index 6a2f24617ce0d..c0aa511eb8dd2 100644
--- a/packages/react-components/react-card/package.json
+++ b/packages/react-components/react-card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-card",
-  "version": "9.0.24",
+  "version": "9.0.25",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-checkbox/CHANGELOG.json b/packages/react-components/react-checkbox/CHANGELOG.json
index 60ab7080a8e93..5d662225f87a0 100644
--- a/packages/react-components/react-checkbox/CHANGELOG.json
+++ b/packages/react-components/react-checkbox/CHANGELOG.json
@@ -1,6 +1,39 @@
 {
   "name": "@fluentui/react-checkbox",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-checkbox_v9.1.27",
+      "version": "9.1.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-label to v9.1.22",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:17 GMT",
       "tag": "@fluentui/react-checkbox_v9.1.26",
diff --git a/packages/react-components/react-checkbox/CHANGELOG.md b/packages/react-components/react-checkbox/CHANGELOG.md
index 8b1edca75f38a..b3d1a56f30b85 100644
--- a/packages/react-components/react-checkbox/CHANGELOG.md
+++ b/packages/react-components/react-checkbox/CHANGELOG.md
@@ -1,9 +1,21 @@
 # Change Log - @fluentui/react-checkbox
 
-This log was last generated on Tue, 25 Jul 2023 13:29:17 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.27)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.26..@fluentui/react-checkbox_v9.1.27)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-label to v9.1.22 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.26)
 
 Tue, 25 Jul 2023 13:29:17 GMT 
diff --git a/packages/react-components/react-checkbox/package.json b/packages/react-components/react-checkbox/package.json
index f85bb4fe9e069..d2652f5f4a36f 100644
--- a/packages/react-components/react-checkbox/package.json
+++ b/packages/react-components/react-checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.1.26",
+  "version": "9.1.27",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,12 +33,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-label": "^9.1.21",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-label": "^9.1.22",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-combobox/CHANGELOG.json b/packages/react-components/react-combobox/CHANGELOG.json
index 7ff13151086b2..a801edc582091 100644
--- a/packages/react-components/react-combobox/CHANGELOG.json
+++ b/packages/react-components/react-combobox/CHANGELOG.json
@@ -1,6 +1,45 @@
 {
   "name": "@fluentui/react-combobox",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:19 GMT",
+      "tag": "@fluentui/react-combobox_v9.5.0",
+      "version": "9.5.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "50392ee3cdec1975dff5e496da6241d37acb11b2",
+            "comment": "Added portal slot to Combobox and Dropdown"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.3.4",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.9.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-combobox_v9.4.10",
diff --git a/packages/react-components/react-combobox/CHANGELOG.md b/packages/react-components/react-combobox/CHANGELOG.md
index 0888aa2ef1721..d11e7896057c1 100644
--- a/packages/react-components/react-combobox/CHANGELOG.md
+++ b/packages/react-components/react-combobox/CHANGELOG.md
@@ -1,9 +1,22 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.0)
+
+Tue, 01 Aug 2023 10:17:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.4.10..@fluentui/react-combobox_v9.5.0)
+
+### Minor changes
+
+- Added portal slot to Combobox and Dropdown ([PR #28661](https://github.com/microsoft/fluentui/pull/28661) by gcox@microsoft.com)
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-positioning to v9.9.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.4.10)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-combobox/package.json b/packages/react-components/react-combobox/package.json
index b02c96f7b6e2f..8a51747213782 100644
--- a/packages/react-components/react-combobox/package.json
+++ b/packages/react-components/react-combobox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.4.10",
+  "version": "9.5.0",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,12 +35,12 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-context-selector": "^9.1.26",
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-positioning": "^9.9.0",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-portal": "^9.3.4",
+    "@fluentui/react-positioning": "^9.9.1",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-components/CHANGELOG.json b/packages/react-components/react-components/CHANGELOG.json
index 1ff6f955e13a0..1084f86b16a77 100644
--- a/packages/react-components/react-components/CHANGELOG.json
+++ b/packages/react-components/react-components/CHANGELOG.json
@@ -1,6 +1,73 @@
 {
   "name": "@fluentui/react-components",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:19 GMT",
+      "tag": "@fluentui/react-components_v9.27.2",
+      "version": "9.27.2",
+      "comments": {
+        "minor": [
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-accordion",
+            "commit": "0c693a82d2d6e3c52012d53fdd40af42397fc5cf",
+            "comment": "Accordion - export AccordionHeaderContextProvider"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "50392ee3cdec1975dff5e496da6241d37acb11b2",
+            "comment": "Added portal slot to Combobox and Dropdown"
+          },
+          {
+            "author": "eysjiang@gmail.com",
+            "package": "@fluentui/react-shared-contexts",
+            "commit": "937b241d624114c181ea1521d0d4ead1068ddfa3",
+            "comment": "adds Announce context"
+          }
+        ],
+        "patch": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "9250428d00e7e2909a0e3bae667c6ef0044ea67e",
+            "comment": "fix: use css outline for MenuItem focus ring instead of pseudo element"
+          },
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5",
+            "comment": "fix: autoSize causing maximum positioning update"
+          },
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "c6d2ace26c19b4c8102c77baf8f66ffeb36149f8",
+            "comment": "Remove margin from Icon in ToolbarButton when vertical prop is passed"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "petrduda@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "d4b3feec354590939a340460bea62f4e39d38a74",
+            "comment": "bugfix: Tree, vertical spacing of branches and children is inconsistent"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "f9e014b3919f00068940b0dd94980f6d542eff68",
+            "comment": "feat: adds openItems and checkedItems to tree callback data"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "2f795af17bf0cf844e0cc59c5d2f2418a00c9594",
+            "comment": "chore: improves internal headless signature"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:13 GMT",
       "tag": "@fluentui/react-components_v9.27.1",
diff --git a/packages/react-components/react-components/CHANGELOG.md b/packages/react-components/react-components/CHANGELOG.md
index 0d7f138ef3a1e..c8df4b4c49323 100644
--- a/packages/react-components/react-components/CHANGELOG.md
+++ b/packages/react-components/react-components/CHANGELOG.md
@@ -1,9 +1,39 @@
 # Change Log - @fluentui/react-components
 
-This log was last generated on Thu, 27 Jul 2023 10:34:13 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.27.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.27.2)
+
+Tue, 01 Aug 2023 10:17:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.27.1..@fluentui/react-components_v9.27.2)
+
+### Minor changes
+
+- `@fluentui/react-accordion`
+  - Accordion - export AccordionHeaderContextProvider ([PR #28542](https://github.com/microsoft/fluentui/pull/28542) by jirivyhnalek@microsoft.com)
+- `@fluentui/react-combobox`
+  - Added portal slot to Combobox and Dropdown ([PR #28661](https://github.com/microsoft/fluentui/pull/28661) by gcox@microsoft.com)
+- `@fluentui/react-shared-contexts`
+  - adds Announce context ([PR #28654](https://github.com/microsoft/fluentui/pull/28654) by eysjiang@gmail.com)
+
+### Patches
+
+- `@fluentui/react-menu`
+  - fix: use css outline for MenuItem focus ring instead of pseudo element ([PR #28685](https://github.com/microsoft/fluentui/pull/28685) by yuanboxue@microsoft.com)
+- `@fluentui/react-positioning`
+  - fix: autoSize causing maximum positioning update ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by yuanboxue@microsoft.com)
+- `@fluentui/react-toolbar`
+  - Remove margin from Icon in ToolbarButton when vertical prop is passed ([PR #28658](https://github.com/microsoft/fluentui/pull/28658) by chassunc@microsoft.com)
+
+### Changes
+
+- `@fluentui/react-tree`
+  - bugfix: Tree, vertical spacing of branches and children is inconsistent ([PR #28681](https://github.com/microsoft/fluentui/pull/28681) by petrduda@microsoft.com)
+  - feat: adds openItems and checkedItems to tree callback data ([PR #28669](https://github.com/microsoft/fluentui/pull/28669) by bernardo.sunderhus@gmail.com)
+  - chore: improves internal headless signature ([PR #28651](https://github.com/microsoft/fluentui/pull/28651) by bernardo.sunderhus@gmail.com)
+
 ## [9.27.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.27.1)
 
 Thu, 27 Jul 2023 10:34:13 GMT 
diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json
index dbd8650ca3cac..9404f359f3704 100644
--- a/packages/react-components/react-components/package.json
+++ b/packages/react-components/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-components",
-  "version": "9.27.1",
+  "version": "9.27.2",
   "description": "Suite package for converged React components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,51 +31,51 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-accordion": "^9.1.25",
-    "@fluentui/react-alert": "9.0.0-beta.61",
-    "@fluentui/react-avatar": "^9.5.15",
-    "@fluentui/react-badge": "^9.1.22",
-    "@fluentui/react-button": "^9.3.25",
-    "@fluentui/react-card": "^9.0.24",
-    "@fluentui/react-checkbox": "^9.1.26",
-    "@fluentui/react-combobox": "^9.4.10",
-    "@fluentui/react-dialog": "^9.5.18",
-    "@fluentui/react-divider": "^9.2.21",
-    "@fluentui/react-drawer": "9.0.0-beta.10",
-    "@fluentui/react-field": "^9.1.13",
-    "@fluentui/react-image": "^9.1.18",
-    "@fluentui/react-infobutton": "9.0.0-beta.45",
-    "@fluentui/react-input": "^9.4.23",
-    "@fluentui/react-label": "^9.1.21",
-    "@fluentui/react-link": "^9.1.4",
-    "@fluentui/react-menu": "^9.12.0",
+    "@fluentui/react-accordion": "^9.2.0",
+    "@fluentui/react-alert": "9.0.0-beta.62",
+    "@fluentui/react-avatar": "^9.5.16",
+    "@fluentui/react-badge": "^9.1.23",
+    "@fluentui/react-button": "^9.3.26",
+    "@fluentui/react-card": "^9.0.25",
+    "@fluentui/react-checkbox": "^9.1.27",
+    "@fluentui/react-combobox": "^9.5.0",
+    "@fluentui/react-dialog": "^9.5.19",
+    "@fluentui/react-divider": "^9.2.22",
+    "@fluentui/react-drawer": "9.0.0-beta.11",
+    "@fluentui/react-field": "^9.1.14",
+    "@fluentui/react-image": "^9.1.19",
+    "@fluentui/react-infobutton": "9.0.0-beta.46",
+    "@fluentui/react-input": "^9.4.24",
+    "@fluentui/react-label": "^9.1.22",
+    "@fluentui/react-link": "^9.1.5",
+    "@fluentui/react-menu": "^9.12.1",
     "@fluentui/react-overflow": "^9.0.24",
-    "@fluentui/react-persona": "^9.2.25",
-    "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-popover": "^9.7.9",
-    "@fluentui/react-positioning": "^9.9.0",
-    "@fluentui/react-progress": "^9.1.23",
-    "@fluentui/react-provider": "^9.7.11",
-    "@fluentui/react-radio": "^9.1.26",
-    "@fluentui/react-select": "^9.1.23",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-skeleton": "^9.0.11",
-    "@fluentui/react-slider": "^9.1.26",
-    "@fluentui/react-spinbutton": "^9.2.23",
-    "@fluentui/react-spinner": "^9.3.1",
-    "@fluentui/react-switch": "^9.1.26",
-    "@fluentui/react-table": "^9.7.1",
-    "@fluentui/react-tabs": "^9.3.26",
-    "@fluentui/react-tabster": "^9.11.0",
-    "@fluentui/react-textarea": "^9.3.23",
+    "@fluentui/react-persona": "^9.2.26",
+    "@fluentui/react-portal": "^9.3.4",
+    "@fluentui/react-popover": "^9.7.10",
+    "@fluentui/react-positioning": "^9.9.1",
+    "@fluentui/react-progress": "^9.1.24",
+    "@fluentui/react-provider": "^9.7.12",
+    "@fluentui/react-radio": "^9.1.27",
+    "@fluentui/react-select": "^9.1.24",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-skeleton": "^9.0.12",
+    "@fluentui/react-slider": "^9.1.27",
+    "@fluentui/react-spinbutton": "^9.2.24",
+    "@fluentui/react-spinner": "^9.3.2",
+    "@fluentui/react-switch": "^9.1.27",
+    "@fluentui/react-table": "^9.7.2",
+    "@fluentui/react-tabs": "^9.3.27",
+    "@fluentui/react-tabster": "^9.11.1",
+    "@fluentui/react-textarea": "^9.3.24",
     "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-toast": "^9.0.5",
-    "@fluentui/react-toolbar": "^9.1.26",
-    "@fluentui/react-tooltip": "^9.2.26",
+    "@fluentui/react-toast": "^9.0.6",
+    "@fluentui/react-toolbar": "^9.1.27",
+    "@fluentui/react-tooltip": "^9.2.27",
     "@fluentui/react-utilities": "^9.10.1",
-    "@fluentui/react-text": "^9.3.18",
+    "@fluentui/react-text": "^9.3.19",
     "@fluentui/react-virtualizer": "9.0.0-alpha.29",
-    "@fluentui/react-tree": "9.0.0-beta.28",
+    "@fluentui/react-tree": "9.0.0-beta.29",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
   },
diff --git a/packages/react-components/react-datepicker-compat/CHANGELOG.json b/packages/react-components/react-datepicker-compat/CHANGELOG.json
index 7a89bc828cb76..fa724d463361a 100644
--- a/packages/react-components/react-datepicker-compat/CHANGELOG.json
+++ b/packages/react-components/react-datepicker-compat/CHANGELOG.json
@@ -1,6 +1,57 @@
 {
   "name": "@fluentui/react-datepicker-compat",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-datepicker-compat_v0.2.4",
+      "version": "0.2.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-input to v9.4.24",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-popover to v9.7.10",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-portal to v9.3.4",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-positioning to v9.9.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-datepicker-compat",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-datepicker-compat_v0.2.3",
diff --git a/packages/react-components/react-datepicker-compat/CHANGELOG.md b/packages/react-components/react-datepicker-compat/CHANGELOG.md
index 5c95fdc322117..582b9f9637b8b 100644
--- a/packages/react-components/react-datepicker-compat/CHANGELOG.md
+++ b/packages/react-components/react-datepicker-compat/CHANGELOG.md
@@ -1,9 +1,24 @@
 # Change Log - @fluentui/react-datepicker-compat
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.2.4)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-datepicker-compat_v0.2.3..@fluentui/react-datepicker-compat_v0.2.4)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-input to v9.4.24 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-popover to v9.7.10 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-positioning to v9.9.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [0.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.2.3)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-datepicker-compat/package.json b/packages/react-components/react-datepicker-compat/package.json
index c6ce279b26519..b06510f0f0382 100644
--- a/packages/react-components/react-datepicker-compat/package.json
+++ b/packages/react-components/react-datepicker-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-datepicker-compat",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-input": "^9.4.23",
+    "@fluentui/react-input": "^9.4.24",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-popover": "^9.7.9",
-    "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-positioning": "^9.9.0",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-popover": "^9.7.10",
+    "@fluentui/react-portal": "^9.3.4",
+    "@fluentui/react-positioning": "^9.9.1",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-dialog/CHANGELOG.json b/packages/react-components/react-dialog/CHANGELOG.json
index 43ba56deea2e3..cc46b497d2613 100644
--- a/packages/react-components/react-dialog/CHANGELOG.json
+++ b/packages/react-components/react-dialog/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-dialog",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-dialog_v9.5.19",
+      "version": "9.5.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.3.4",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:18 GMT",
       "tag": "@fluentui/react-dialog_v9.5.18",
diff --git a/packages/react-components/react-dialog/CHANGELOG.md b/packages/react-components/react-dialog/CHANGELOG.md
index e583b61bf6934..a1b0bb60fc410 100644
--- a/packages/react-components/react-dialog/CHANGELOG.md
+++ b/packages/react-components/react-dialog/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Tue, 25 Jul 2023 13:29:18 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.19)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.18..@fluentui/react-dialog_v9.5.19)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.5.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.18)
 
 Tue, 25 Jul 2023 13:29:18 GMT 
diff --git a/packages/react-components/react-dialog/package.json b/packages/react-components/react-dialog/package.json
index 637386805b934..4898c5bff965c 100644
--- a/packages/react-components/react-dialog/package.json
+++ b/packages/react-components/react-dialog/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-dialog",
-  "version": "9.5.18",
+  "version": "9.5.19",
   "description": "Dialog component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,12 +40,12 @@
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-context-selector": "^9.1.26",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-aria": "^9.3.27",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-portal": "^9.3.3",
+    "@fluentui/react-portal": "^9.3.4",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
   },
diff --git a/packages/react-components/react-divider/CHANGELOG.json b/packages/react-components/react-divider/CHANGELOG.json
index fe6e8dcbd33d7..dc07e81aca2b4 100644
--- a/packages/react-components/react-divider/CHANGELOG.json
+++ b/packages/react-components/react-divider/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-divider",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-divider_v9.2.22",
+      "version": "9.2.22",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-divider",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:28 GMT",
       "tag": "@fluentui/react-divider_v9.2.21",
diff --git a/packages/react-components/react-divider/CHANGELOG.md b/packages/react-components/react-divider/CHANGELOG.md
index 43b9fdab4b815..19e5a12e9e8f1 100644
--- a/packages/react-components/react-divider/CHANGELOG.md
+++ b/packages/react-components/react-divider/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-divider
 
-This log was last generated on Thu, 20 Jul 2023 18:27:28 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.2.22)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.2.21..@fluentui/react-divider_v9.2.22)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.2.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.2.21)
 
 Thu, 20 Jul 2023 18:27:28 GMT 
diff --git a/packages/react-components/react-divider/package.json b/packages/react-components/react-divider/package.json
index 6e614515220ad..885b6a5554c51 100644
--- a/packages/react-components/react-divider/package.json
+++ b/packages/react-components/react-divider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-divider",
-  "version": "9.2.21",
+  "version": "9.2.22",
   "description": "Fluent UI component to visually separate content.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-drawer/CHANGELOG.json b/packages/react-components/react-drawer/CHANGELOG.json
index e3fd1b6b5cfd9..333d528e24849 100644
--- a/packages/react-components/react-drawer/CHANGELOG.json
+++ b/packages/react-components/react-drawer/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-drawer",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-drawer_v9.0.0-beta.11",
+      "version": "9.0.0-beta.11",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-dialog to v9.5.19",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-drawer_v9.0.0-beta.10",
diff --git a/packages/react-components/react-drawer/CHANGELOG.md b/packages/react-components/react-drawer/CHANGELOG.md
index a2e4e6eed5267..66ea04d22fe62 100644
--- a/packages/react-components/react-drawer/CHANGELOG.md
+++ b/packages/react-components/react-drawer/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.11)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.10..@fluentui/react-drawer_v9.0.0-beta.11)
+
+### Changes
+
+- Bump @fluentui/react-dialog to v9.5.19 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.10)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json
index 7e367b33194db..7f569c5018954 100644
--- a/packages/react-components/react-drawer/package.json
+++ b/packages/react-components/react-drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.0.0-beta.10",
+  "version": "9.0.0-beta.11",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,9 +35,9 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.5.18",
+    "@fluentui/react-dialog": "^9.5.19",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-field/CHANGELOG.json b/packages/react-components/react-field/CHANGELOG.json
index b59f1eb5278b5..5f5aa883ff7f6 100644
--- a/packages/react-components/react-field/CHANGELOG.json
+++ b/packages/react-components/react-field/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-field",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-field_v9.1.14",
+      "version": "9.1.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-field",
+            "comment": "Bump @fluentui/react-label to v9.1.22",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:19 GMT",
       "tag": "@fluentui/react-field_v9.1.13",
diff --git a/packages/react-components/react-field/CHANGELOG.md b/packages/react-components/react-field/CHANGELOG.md
index 95131edeaa08a..7a3496cdd1737 100644
--- a/packages/react-components/react-field/CHANGELOG.md
+++ b/packages/react-components/react-field/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-field
 
-This log was last generated on Tue, 25 Jul 2023 13:29:19 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.14)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.13..@fluentui/react-field_v9.1.14)
+
+### Patches
+
+- Bump @fluentui/react-label to v9.1.22 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.13)
 
 Tue, 25 Jul 2023 13:29:19 GMT 
diff --git a/packages/react-components/react-field/package.json b/packages/react-components/react-field/package.json
index 41bba1efc218a..e86d8249a07ee 100644
--- a/packages/react-components/react-field/package.json
+++ b/packages/react-components/react-field/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.1.13",
+  "version": "9.1.14",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,7 +36,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-label": "^9.1.21",
+    "@fluentui/react-label": "^9.1.22",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-image/CHANGELOG.json b/packages/react-components/react-image/CHANGELOG.json
index e4b89f8cf694d..9f900729fc9a4 100644
--- a/packages/react-components/react-image/CHANGELOG.json
+++ b/packages/react-components/react-image/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-image",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-image_v9.1.19",
+      "version": "9.1.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-image",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:29 GMT",
       "tag": "@fluentui/react-image_v9.1.18",
diff --git a/packages/react-components/react-image/CHANGELOG.md b/packages/react-components/react-image/CHANGELOG.md
index fd806f1628431..a80a793c0e1ce 100644
--- a/packages/react-components/react-image/CHANGELOG.md
+++ b/packages/react-components/react-image/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-image
 
-This log was last generated on Thu, 20 Jul 2023 18:27:29 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.1.19)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.1.18..@fluentui/react-image_v9.1.19)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.1.18)
 
 Thu, 20 Jul 2023 18:27:29 GMT 
diff --git a/packages/react-components/react-image/package.json b/packages/react-components/react-image/package.json
index 4900d04bd77ec..af8eb8759d650 100644
--- a/packages/react-components/react-image/package.json
+++ b/packages/react-components/react-image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-image",
-  "version": "9.1.18",
+  "version": "9.1.19",
   "description": "Fluent UI React Image component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-theme": "^9.1.9",
diff --git a/packages/react-components/react-infobutton/CHANGELOG.json b/packages/react-components/react-infobutton/CHANGELOG.json
index ee75dad385ca2..2f0b5045db177 100644
--- a/packages/react-components/react-infobutton/CHANGELOG.json
+++ b/packages/react-components/react-infobutton/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-infobutton",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-infobutton_v9.0.0-beta.46",
+      "version": "9.0.0-beta.46",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-label to v9.1.22",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-popover to v9.7.10",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-infobutton_v9.0.0-beta.45",
diff --git a/packages/react-components/react-infobutton/CHANGELOG.md b/packages/react-components/react-infobutton/CHANGELOG.md
index 32e0e9eeb2f41..eaf5876776d59 100644
--- a/packages/react-components/react-infobutton/CHANGELOG.md
+++ b/packages/react-components/react-infobutton/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-infobutton
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.46](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.46)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.45..@fluentui/react-infobutton_v9.0.0-beta.46)
+
+### Changes
+
+- Bump @fluentui/react-label to v9.1.22 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-popover to v9.7.10 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.0.0-beta.45](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.45)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-infobutton/package.json b/packages/react-components/react-infobutton/package.json
index 0358d3e8dc087..da8f8f122bdb9 100644
--- a/packages/react-components/react-infobutton/package.json
+++ b/packages/react-components/react-infobutton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-infobutton",
-  "version": "9.0.0-beta.45",
+  "version": "9.0.0-beta.46",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,9 +34,9 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-label": "^9.1.21",
-    "@fluentui/react-popover": "^9.7.9",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-label": "^9.1.22",
+    "@fluentui/react-popover": "^9.7.10",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-input/CHANGELOG.json b/packages/react-components/react-input/CHANGELOG.json
index 834a9a0c7bb54..4d2ac9ea02897 100644
--- a/packages/react-components/react-input/CHANGELOG.json
+++ b/packages/react-components/react-input/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-input",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-input_v9.4.24",
+      "version": "9.4.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-input_v9.4.23",
diff --git a/packages/react-components/react-input/CHANGELOG.md b/packages/react-components/react-input/CHANGELOG.md
index 925ff1b2196b7..a0447a6750ff1 100644
--- a/packages/react-components/react-input/CHANGELOG.md
+++ b/packages/react-components/react-input/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-input
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.24)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.4.23..@fluentui/react-input_v9.4.24)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.4.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.23)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-input/package.json b/packages/react-components/react-input/package.json
index eaf5de04679c1..96004401ef52d 100644
--- a/packages/react-components/react-input/package.json
+++ b/packages/react-components/react-input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.4.23",
+  "version": "9.4.24",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,9 +34,9 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-label/CHANGELOG.json b/packages/react-components/react-label/CHANGELOG.json
index ba54a990df2d7..b965e5a22123e 100644
--- a/packages/react-components/react-label/CHANGELOG.json
+++ b/packages/react-components/react-label/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-label",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-label_v9.1.22",
+      "version": "9.1.22",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:29 GMT",
       "tag": "@fluentui/react-label_v9.1.21",
diff --git a/packages/react-components/react-label/CHANGELOG.md b/packages/react-components/react-label/CHANGELOG.md
index 8a96d5af3ff68..2884a6e81301a 100644
--- a/packages/react-components/react-label/CHANGELOG.md
+++ b/packages/react-components/react-label/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-label
 
-This log was last generated on Thu, 20 Jul 2023 18:27:29 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.1.22)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.1.21..@fluentui/react-label_v9.1.22)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.1.21)
 
 Thu, 20 Jul 2023 18:27:29 GMT 
diff --git a/packages/react-components/react-label/package.json b/packages/react-components/react-label/package.json
index 635bf81805755..608d3a505e766 100644
--- a/packages/react-components/react-label/package.json
+++ b/packages/react-components/react-label/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-label",
-  "version": "9.1.21",
+  "version": "9.1.22",
   "description": "Fluent UI React Label component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-link/CHANGELOG.json b/packages/react-components/react-link/CHANGELOG.json
index ddd0b718a958d..d241a2d77b7c9 100644
--- a/packages/react-components/react-link/CHANGELOG.json
+++ b/packages/react-components/react-link/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-link",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-link_v9.1.5",
+      "version": "9.1.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-link",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-link",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-link_v9.1.4",
diff --git a/packages/react-components/react-link/CHANGELOG.md b/packages/react-components/react-link/CHANGELOG.md
index 06100a469683e..0d2118f92b124 100644
--- a/packages/react-components/react-link/CHANGELOG.md
+++ b/packages/react-components/react-link/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-link
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.1.5)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.1.4..@fluentui/react-link_v9.1.5)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.1.4)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-link/package.json b/packages/react-components/react-link/package.json
index e52a49b0ed4c1..2b2297113cc88 100644
--- a/packages/react-components/react-link/package.json
+++ b/packages/react-components/react-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-link",
-  "version": "9.1.4",
+  "version": "9.1.5",
   "description": "Fluent UI React Link component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,8 +36,8 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-menu/CHANGELOG.json b/packages/react-components/react-menu/CHANGELOG.json
index 94c556b1cd6fc..4ec1969c486fe 100644
--- a/packages/react-components/react-menu/CHANGELOG.json
+++ b/packages/react-components/react-menu/CHANGELOG.json
@@ -1,6 +1,45 @@
 {
   "name": "@fluentui/react-menu",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:19 GMT",
+      "tag": "@fluentui/react-menu_v9.12.1",
+      "version": "9.12.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "9250428d00e7e2909a0e3bae667c6ef0044ea67e",
+            "comment": "fix: use css outline for MenuItem focus ring instead of pseudo element"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-portal to v9.3.4",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-positioning to v9.9.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:13 GMT",
       "tag": "@fluentui/react-menu_v9.12.0",
diff --git a/packages/react-components/react-menu/CHANGELOG.md b/packages/react-components/react-menu/CHANGELOG.md
index 985da8bffee4f..4bccc9a02504e 100644
--- a/packages/react-components/react-menu/CHANGELOG.md
+++ b/packages/react-components/react-menu/CHANGELOG.md
@@ -1,9 +1,22 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Thu, 27 Jul 2023 10:34:13 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.12.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.1)
+
+Tue, 01 Aug 2023 10:17:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.12.0..@fluentui/react-menu_v9.12.1)
+
+### Patches
+
+- fix: use css outline for MenuItem focus ring instead of pseudo element ([PR #28685](https://github.com/microsoft/fluentui/pull/28685) by yuanboxue@microsoft.com)
+- Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-positioning to v9.9.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.0)
 
 Thu, 27 Jul 2023 10:34:13 GMT 
diff --git a/packages/react-components/react-menu/package.json b/packages/react-components/react-menu/package.json
index fa82ac7cd37da..677be1e4f2d87 100644
--- a/packages/react-components/react-menu/package.json
+++ b/packages/react-components/react-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.12.0",
+  "version": "9.12.1",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,10 +40,10 @@
     "@fluentui/react-aria": "^9.3.27",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-positioning": "^9.9.0",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-portal": "^9.3.4",
+    "@fluentui/react-positioning": "^9.9.1",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-migration-v0-v9/CHANGELOG.json b/packages/react-components/react-migration-v0-v9/CHANGELOG.json
index 64e9cca6bf1bc..4f312e8ebdfb7 100644
--- a/packages/react-components/react-migration-v0-v9/CHANGELOG.json
+++ b/packages/react-components/react-migration-v0-v9/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-migration-v0-v9",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-migration-v0-v9_v9.0.15",
+      "version": "9.0.15",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-components to v9.27.2",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-migration-v0-v9_v9.0.14",
diff --git a/packages/react-components/react-migration-v0-v9/CHANGELOG.md b/packages/react-components/react-migration-v0-v9/CHANGELOG.md
index 9070351ff71e0..960a825c5d33c 100644
--- a/packages/react-components/react-migration-v0-v9/CHANGELOG.md
+++ b/packages/react-components/react-migration-v0-v9/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-migration-v0-v9
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.15)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.0.14..@fluentui/react-migration-v0-v9_v9.0.15)
+
+### Patches
+
+- Bump @fluentui/react-components to v9.27.2 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.14)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-migration-v0-v9/package.json b/packages/react-components/react-migration-v0-v9/package.json
index c311a1a006c86..0a0972eec38e1 100644
--- a/packages/react-components/react-migration-v0-v9/package.json
+++ b/packages/react-components/react-migration-v0-v9/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v0-v9",
-  "version": "9.0.14",
+  "version": "9.0.15",
   "description": "Migration shim components and methods for hybrid v0/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,7 +37,7 @@
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-components": "^9.27.1",
+    "@fluentui/react-components": "^9.27.2",
     "@fluentui/react-northstar": "^0.66.4",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
diff --git a/packages/react-components/react-migration-v8-v9/CHANGELOG.json b/packages/react-components/react-migration-v8-v9/CHANGELOG.json
index 75c71e9d87800..9c0809f0cff88 100644
--- a/packages/react-components/react-migration-v8-v9/CHANGELOG.json
+++ b/packages/react-components/react-migration-v8-v9/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-migration-v8-v9",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-migration-v8-v9_v9.3.12",
+      "version": "9.3.12",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v8-v9",
+            "comment": "Bump @fluentui/react-components to v9.27.2",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-migration-v8-v9_v9.3.11",
diff --git a/packages/react-components/react-migration-v8-v9/CHANGELOG.md b/packages/react-components/react-migration-v8-v9/CHANGELOG.md
index 94285c0f04aa1..d30d0105ab4ff 100644
--- a/packages/react-components/react-migration-v8-v9/CHANGELOG.md
+++ b/packages/react-components/react-migration-v8-v9/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-migration-v8-v9
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.3.12)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.3.11..@fluentui/react-migration-v8-v9_v9.3.12)
+
+### Patches
+
+- Bump @fluentui/react-components to v9.27.2 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.3.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.3.11)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-migration-v8-v9/package.json b/packages/react-components/react-migration-v8-v9/package.json
index 1c80da9ecb7da..86341bb35712c 100644
--- a/packages/react-components/react-migration-v8-v9/package.json
+++ b/packages/react-components/react-migration-v8-v9/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v8-v9",
-  "version": "9.3.11",
+  "version": "9.3.12",
   "description": "Migration shim components and methods for hybrid v8/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "@ctrl/tinycolor": "3.3.4",
     "@fluentui/fluent2-theme": "^8.107.31",
     "@fluentui/react": "^8.110.11",
-    "@fluentui/react-components": "^9.27.1",
+    "@fluentui/react-components": "^9.27.2",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-persona/CHANGELOG.json b/packages/react-components/react-persona/CHANGELOG.json
index 082a25e6397b1..b4280963f5d4e 100644
--- a/packages/react-components/react-persona/CHANGELOG.json
+++ b/packages/react-components/react-persona/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-persona",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-persona_v9.2.26",
+      "version": "9.2.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.5.16",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.1.23",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-persona_v9.2.25",
diff --git a/packages/react-components/react-persona/CHANGELOG.md b/packages/react-components/react-persona/CHANGELOG.md
index 75db73c8084f8..6c424025d2a65 100644
--- a/packages/react-components/react-persona/CHANGELOG.md
+++ b/packages/react-components/react-persona/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.26)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.25..@fluentui/react-persona_v9.2.26)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.5.16 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-badge to v9.1.23 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.2.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.25)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-persona/package.json b/packages/react-components/react-persona/package.json
index 50ded50f1ec6c..bccd56e1d287c 100644
--- a/packages/react-components/react-persona/package.json
+++ b/packages/react-components/react-persona/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-persona",
-  "version": "9.2.25",
+  "version": "9.2.26",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,9 +33,9 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.5.15",
-    "@fluentui/react-badge": "^9.1.22",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-avatar": "^9.5.16",
+    "@fluentui/react-badge": "^9.1.23",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-popover/CHANGELOG.json b/packages/react-components/react-popover/CHANGELOG.json
index 34c1fd5398ced..c1c18212abcd1 100644
--- a/packages/react-components/react-popover/CHANGELOG.json
+++ b/packages/react-components/react-popover/CHANGELOG.json
@@ -1,6 +1,39 @@
 {
   "name": "@fluentui/react-popover",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-popover_v9.7.10",
+      "version": "9.7.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-portal to v9.3.4",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-positioning to v9.9.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-popover_v9.7.9",
diff --git a/packages/react-components/react-popover/CHANGELOG.md b/packages/react-components/react-popover/CHANGELOG.md
index 5bc6fd69bb9df..1b8824c3aa380 100644
--- a/packages/react-components/react-popover/CHANGELOG.md
+++ b/packages/react-components/react-popover/CHANGELOG.md
@@ -1,9 +1,21 @@
 # Change Log - @fluentui/react-popover
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.7.10)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.7.9..@fluentui/react-popover_v9.7.10)
+
+### Patches
+
+- Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-positioning to v9.9.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.7.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.7.9)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-popover/package.json b/packages/react-components/react-popover/package.json
index 23b088663f58f..c3c5627c16d24 100644
--- a/packages/react-components/react-popover/package.json
+++ b/packages/react-components/react-popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-popover",
-  "version": "9.7.9",
+  "version": "9.7.10",
   "description": "Popover component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,10 +39,10 @@
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
     "@fluentui/react-context-selector": "^9.1.26",
-    "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-positioning": "^9.9.0",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-portal": "^9.3.4",
+    "@fluentui/react-positioning": "^9.9.1",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-portal-compat/CHANGELOG.json b/packages/react-components/react-portal-compat/CHANGELOG.json
index 20c6cc6d32dc8..276e25d424dc6 100644
--- a/packages/react-components/react-portal-compat/CHANGELOG.json
+++ b/packages/react-components/react-portal-compat/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-portal-compat",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-portal-compat_v9.0.73",
+      "version": "9.0.73",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-portal-compat",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-portal-compat",
+            "comment": "Bump @fluentui/react-components to v9.27.2",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-portal-compat_v9.0.72",
diff --git a/packages/react-components/react-portal-compat/CHANGELOG.md b/packages/react-components/react-portal-compat/CHANGELOG.md
index 663fca0bfebed..d1449beb75f8a 100644
--- a/packages/react-components/react-portal-compat/CHANGELOG.md
+++ b/packages/react-components/react-portal-compat/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-portal-compat
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.73](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.73)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal-compat_v9.0.72..@fluentui/react-portal-compat_v9.0.73)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-components to v9.27.2 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.0.72](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.72)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-portal-compat/package.json b/packages/react-components/react-portal-compat/package.json
index d6d0a35c5e70e..763965427182a 100644
--- a/packages/react-components/react-portal-compat/package.json
+++ b/packages/react-components/react-portal-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-portal-compat",
-  "version": "9.0.72",
+  "version": "9.0.73",
   "description": "A package that contains compatibility layer for React Portals",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,11 +35,11 @@
   },
   "dependencies": {
     "@fluentui/react-portal-compat-context": "^9.0.6",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
-    "@fluentui/react-components": "^9.27.1",
+    "@fluentui/react-components": "^9.27.2",
     "@types/react": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0"
   },
diff --git a/packages/react-components/react-portal/CHANGELOG.json b/packages/react-components/react-portal/CHANGELOG.json
index a8579bf90b280..a9bf52effdd84 100644
--- a/packages/react-components/react-portal/CHANGELOG.json
+++ b/packages/react-components/react-portal/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-portal",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-portal_v9.3.4",
+      "version": "9.3.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-portal",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-portal",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-portal_v9.3.3",
diff --git a/packages/react-components/react-portal/CHANGELOG.md b/packages/react-components/react-portal/CHANGELOG.md
index 83505943397d4..e5805a0f42ea8 100644
--- a/packages/react-components/react-portal/CHANGELOG.md
+++ b/packages/react-components/react-portal/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-portal
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.3.4)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.3.3..@fluentui/react-portal_v9.3.4)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.3.3)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-portal/package.json b/packages/react-components/react-portal/package.json
index fdd959536fbd5..723a03ff9a2ca 100644
--- a/packages/react-components/react-portal/package.json
+++ b/packages/react-components/react-portal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-portal",
-  "version": "9.3.3",
+  "version": "9.3.4",
   "description": "A utility component that creates portals compatible with Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,8 +32,8 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14",
diff --git a/packages/react-components/react-positioning/CHANGELOG.json b/packages/react-components/react-positioning/CHANGELOG.json
index 256f972f86dd6..e7e0786a54fba 100644
--- a/packages/react-components/react-positioning/CHANGELOG.json
+++ b/packages/react-components/react-positioning/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-positioning",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:19 GMT",
+      "tag": "@fluentui/react-positioning_v9.9.1",
+      "version": "9.9.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5",
+            "comment": "fix: autoSize causing maximum positioning update"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:13 GMT",
       "tag": "@fluentui/react-positioning_v9.9.0",
diff --git a/packages/react-components/react-positioning/CHANGELOG.md b/packages/react-components/react-positioning/CHANGELOG.md
index 43cf3c7949c06..57e6768b334ac 100644
--- a/packages/react-components/react-positioning/CHANGELOG.md
+++ b/packages/react-components/react-positioning/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Thu, 27 Jul 2023 10:34:13 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.9.1)
+
+Tue, 01 Aug 2023 10:17:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.9.0..@fluentui/react-positioning_v9.9.1)
+
+### Patches
+
+- fix: autoSize causing maximum positioning update ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by yuanboxue@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.9.0)
 
 Thu, 27 Jul 2023 10:34:13 GMT 
diff --git a/packages/react-components/react-positioning/package.json b/packages/react-components/react-positioning/package.json
index 1c1127267c1aa..5e6eaa2a830cb 100644
--- a/packages/react-components/react-positioning/package.json
+++ b/packages/react-components/react-positioning/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-positioning",
-  "version": "9.9.0",
+  "version": "9.9.1",
   "description": "A react wrapper around Popper.js for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.2.0",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-progress/CHANGELOG.json b/packages/react-components/react-progress/CHANGELOG.json
index b3eb8eb37ef6e..1dc8bfacc57ca 100644
--- a/packages/react-components/react-progress/CHANGELOG.json
+++ b/packages/react-components/react-progress/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-progress",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-progress_v9.1.24",
+      "version": "9.1.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-progress",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-progress",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-progress_v9.1.23",
diff --git a/packages/react-components/react-progress/CHANGELOG.md b/packages/react-components/react-progress/CHANGELOG.md
index def978f3d5487..670b6d19c3367 100644
--- a/packages/react-components/react-progress/CHANGELOG.md
+++ b/packages/react-components/react-progress/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-progress
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.1.24)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.1.23..@fluentui/react-progress_v9.1.24)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.1.23)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-progress/package.json b/packages/react-components/react-progress/package.json
index 5d383667042aa..3ceadffbb54dd 100644
--- a/packages/react-components/react-progress/package.json
+++ b/packages/react-components/react-progress/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-progress",
-  "version": "9.1.23",
+  "version": "9.1.24",
   "description": "Progress component for FluentUI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,9 +33,9 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-provider/CHANGELOG.json b/packages/react-components/react-provider/CHANGELOG.json
index 2fc958756dc8f..1049ebaf151d5 100644
--- a/packages/react-components/react-provider/CHANGELOG.json
+++ b/packages/react-components/react-provider/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-provider",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-provider_v9.7.12",
+      "version": "9.7.12",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-provider_v9.7.11",
diff --git a/packages/react-components/react-provider/CHANGELOG.md b/packages/react-components/react-provider/CHANGELOG.md
index adbee108969c0..2fd5999d37552 100644
--- a/packages/react-components/react-provider/CHANGELOG.md
+++ b/packages/react-components/react-provider/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-provider
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.7.12)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.7.11..@fluentui/react-provider_v9.7.12)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.7.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.7.11)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-provider/package.json b/packages/react-components/react-provider/package.json
index e244eca57dc21..025dcb48d376c 100644
--- a/packages/react-components/react-provider/package.json
+++ b/packages/react-components/react-provider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.7.11",
+  "version": "9.7.12",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,8 +33,8 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-radio/CHANGELOG.json b/packages/react-components/react-radio/CHANGELOG.json
index 211793a91121a..f128ecb9d6067 100644
--- a/packages/react-components/react-radio/CHANGELOG.json
+++ b/packages/react-components/react-radio/CHANGELOG.json
@@ -1,6 +1,39 @@
 {
   "name": "@fluentui/react-radio",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-radio_v9.1.27",
+      "version": "9.1.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-label to v9.1.22",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:20 GMT",
       "tag": "@fluentui/react-radio_v9.1.26",
diff --git a/packages/react-components/react-radio/CHANGELOG.md b/packages/react-components/react-radio/CHANGELOG.md
index 03120761c83e7..2b5184cbbb774 100644
--- a/packages/react-components/react-radio/CHANGELOG.md
+++ b/packages/react-components/react-radio/CHANGELOG.md
@@ -1,9 +1,21 @@
 # Change Log - @fluentui/react-radio
 
-This log was last generated on Tue, 25 Jul 2023 13:29:20 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.27)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.26..@fluentui/react-radio_v9.1.27)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-label to v9.1.22 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.26)
 
 Tue, 25 Jul 2023 13:29:20 GMT 
diff --git a/packages/react-components/react-radio/package.json b/packages/react-components/react-radio/package.json
index a9defa55e0e66..982f3bfbd8656 100644
--- a/packages/react-components/react-radio/package.json
+++ b/packages/react-components/react-radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-radio",
-  "version": "9.1.26",
+  "version": "9.1.27",
   "description": "Fluent UI Radio component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,12 +33,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-label": "^9.1.21",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-label": "^9.1.22",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-search-preview/CHANGELOG.json b/packages/react-components/react-search-preview/CHANGELOG.json
index 9c7a938e57349..9198114f066d0 100644
--- a/packages/react-components/react-search-preview/CHANGELOG.json
+++ b/packages/react-components/react-search-preview/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-search-preview",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-search-preview_v0.1.3",
+      "version": "0.1.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-search-preview",
+            "comment": "Bump @fluentui/react-input to v9.4.24",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:21 GMT",
       "tag": "@fluentui/react-search-preview_v0.1.2",
diff --git a/packages/react-components/react-search-preview/CHANGELOG.md b/packages/react-components/react-search-preview/CHANGELOG.md
index 9102f0e62b4c4..14043627fce08 100644
--- a/packages/react-components/react-search-preview/CHANGELOG.md
+++ b/packages/react-components/react-search-preview/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-search-preview
 
-This log was last generated on Tue, 25 Jul 2023 13:29:21 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-search-preview_v0.1.3)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search-preview_v0.1.2..@fluentui/react-search-preview_v0.1.3)
+
+### Patches
+
+- Bump @fluentui/react-input to v9.4.24 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [0.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-search-preview_v0.1.2)
 
 Tue, 25 Jul 2023 13:29:21 GMT 
diff --git a/packages/react-components/react-search-preview/package.json b/packages/react-components/react-search-preview/package.json
index 2822d27d3986f..79d3c57e57e86 100644
--- a/packages/react-components/react-search-preview/package.json
+++ b/packages/react-components/react-search-preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-search-preview",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Search input for Fluent UI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-input": "^9.4.23",
+    "@fluentui/react-input": "^9.4.24",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
diff --git a/packages/react-components/react-select/CHANGELOG.json b/packages/react-components/react-select/CHANGELOG.json
index f87a96bcaa059..21458c8265bf6 100644
--- a/packages/react-components/react-select/CHANGELOG.json
+++ b/packages/react-components/react-select/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-select",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-select_v9.1.24",
+      "version": "9.1.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-select",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:21 GMT",
       "tag": "@fluentui/react-select_v9.1.23",
diff --git a/packages/react-components/react-select/CHANGELOG.md b/packages/react-components/react-select/CHANGELOG.md
index 0697108cb700a..b1a65a65a5f18 100644
--- a/packages/react-components/react-select/CHANGELOG.md
+++ b/packages/react-components/react-select/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-select
 
-This log was last generated on Tue, 25 Jul 2023 13:29:21 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.1.24)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.1.23..@fluentui/react-select_v9.1.24)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.1.23)
 
 Tue, 25 Jul 2023 13:29:21 GMT 
diff --git a/packages/react-components/react-select/package.json b/packages/react-components/react-select/package.json
index 35871124d4d0b..67754f242638a 100644
--- a/packages/react-components/react-select/package.json
+++ b/packages/react-components/react-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-select",
-  "version": "9.1.23",
+  "version": "9.1.24",
   "description": "Fluent UI React Select component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,10 +33,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-shared-contexts/CHANGELOG.json b/packages/react-components/react-shared-contexts/CHANGELOG.json
index 60122701caf31..c1255718c90cf 100644
--- a/packages/react-components/react-shared-contexts/CHANGELOG.json
+++ b/packages/react-components/react-shared-contexts/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-shared-contexts",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:20 GMT",
+      "tag": "@fluentui/react-shared-contexts_v9.7.0",
+      "version": "9.7.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "eysjiang@gmail.com",
+            "package": "@fluentui/react-shared-contexts",
+            "commit": "937b241d624114c181ea1521d0d4ead1068ddfa3",
+            "comment": "adds Announce context"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 03 Jul 2023 11:57:13 GMT",
       "tag": "@fluentui/react-shared-contexts_v9.6.0",
diff --git a/packages/react-components/react-shared-contexts/CHANGELOG.md b/packages/react-components/react-shared-contexts/CHANGELOG.md
index b128e2703d539..46b7eb1716b41 100644
--- a/packages/react-components/react-shared-contexts/CHANGELOG.md
+++ b/packages/react-components/react-shared-contexts/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-shared-contexts
 
-This log was last generated on Mon, 03 Jul 2023 11:57:13 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-shared-contexts_v9.7.0)
+
+Tue, 01 Aug 2023 10:17:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-shared-contexts_v9.6.0..@fluentui/react-shared-contexts_v9.7.0)
+
+### Minor changes
+
+- adds Announce context ([PR #28654](https://github.com/microsoft/fluentui/pull/28654) by eysjiang@gmail.com)
+
 ## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-shared-contexts_v9.6.0)
 
 Mon, 03 Jul 2023 11:57:13 GMT 
diff --git a/packages/react-components/react-shared-contexts/package.json b/packages/react-components/react-shared-contexts/package.json
index a9c0449cb563b..77257ae6bdfb6 100644
--- a/packages/react-components/react-shared-contexts/package.json
+++ b/packages/react-components/react-shared-contexts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-shared-contexts",
-  "version": "9.6.0",
+  "version": "9.7.0",
   "description": "Fluent UI React Contexts shared by multiple components.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-components/react-skeleton/CHANGELOG.json b/packages/react-components/react-skeleton/CHANGELOG.json
index e3316285afc88..65de87584c38b 100644
--- a/packages/react-components/react-skeleton/CHANGELOG.json
+++ b/packages/react-components/react-skeleton/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-skeleton",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-skeleton_v9.0.12",
+      "version": "9.0.12",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-skeleton_v9.0.11",
diff --git a/packages/react-components/react-skeleton/CHANGELOG.md b/packages/react-components/react-skeleton/CHANGELOG.md
index 7ce3cfcf1ec49..48b0daa710c50 100644
--- a/packages/react-components/react-skeleton/CHANGELOG.md
+++ b/packages/react-components/react-skeleton/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-skeleton
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.12)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.11..@fluentui/react-skeleton_v9.0.12)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.0.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.11)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-skeleton/package.json b/packages/react-components/react-skeleton/package.json
index ef1929bc06688..6bcec36bfd3db 100644
--- a/packages/react-components/react-skeleton/package.json
+++ b/packages/react-components/react-skeleton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-skeleton",
-  "version": "9.0.11",
+  "version": "9.0.12",
   "description": "Converged v9 Skeleton Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,9 +32,9 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-slider/CHANGELOG.json b/packages/react-components/react-slider/CHANGELOG.json
index d4515fac835ee..632e9407c2431 100644
--- a/packages/react-components/react-slider/CHANGELOG.json
+++ b/packages/react-components/react-slider/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-slider",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-slider_v9.1.27",
+      "version": "9.1.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-slider_v9.1.26",
diff --git a/packages/react-components/react-slider/CHANGELOG.md b/packages/react-components/react-slider/CHANGELOG.md
index 61b472df6eaa9..618f793de4c10 100644
--- a/packages/react-components/react-slider/CHANGELOG.md
+++ b/packages/react-components/react-slider/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-slider
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.27)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.26..@fluentui/react-slider_v9.1.27)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.26)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-slider/package.json b/packages/react-components/react-slider/package.json
index e6c80c814fd43..ca4747c4562c7 100644
--- a/packages/react-components/react-slider/package.json
+++ b/packages/react-components/react-slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-slider",
-  "version": "9.1.26",
+  "version": "9.1.27",
   "description": "Fluent UI React Slider component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,10 +34,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-spinbutton/CHANGELOG.json b/packages/react-components/react-spinbutton/CHANGELOG.json
index 9d7f82460718d..f8408c59caaeb 100644
--- a/packages/react-components/react-spinbutton/CHANGELOG.json
+++ b/packages/react-components/react-spinbutton/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-spinbutton",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-spinbutton_v9.2.24",
+      "version": "9.2.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:21 GMT",
       "tag": "@fluentui/react-spinbutton_v9.2.23",
diff --git a/packages/react-components/react-spinbutton/CHANGELOG.md b/packages/react-components/react-spinbutton/CHANGELOG.md
index 4211e31ad0eff..0fbec4f901fdf 100644
--- a/packages/react-components/react-spinbutton/CHANGELOG.md
+++ b/packages/react-components/react-spinbutton/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Tue, 25 Jul 2023 13:29:21 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.24)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.23..@fluentui/react-spinbutton_v9.2.24)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.2.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.23)
 
 Tue, 25 Jul 2023 13:29:21 GMT 
diff --git a/packages/react-components/react-spinbutton/package.json b/packages/react-components/react-spinbutton/package.json
index 7e160a52d23a6..4d25a78c11f92 100644
--- a/packages/react-components/react-spinbutton/package.json
+++ b/packages/react-components/react-spinbutton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinbutton",
-  "version": "9.2.23",
+  "version": "9.2.24",
   "description": "Fluent UI React SpinButton component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,10 +35,10 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-spinner/CHANGELOG.json b/packages/react-components/react-spinner/CHANGELOG.json
index d73b669ed6ab9..7d432bd4162c2 100644
--- a/packages/react-components/react-spinner/CHANGELOG.json
+++ b/packages/react-components/react-spinner/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-spinner",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-spinner_v9.3.2",
+      "version": "9.3.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.1.22",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:34 GMT",
       "tag": "@fluentui/react-spinner_v9.3.1",
diff --git a/packages/react-components/react-spinner/CHANGELOG.md b/packages/react-components/react-spinner/CHANGELOG.md
index a73ddbe478548..dafacb278019a 100644
--- a/packages/react-components/react-spinner/CHANGELOG.md
+++ b/packages/react-components/react-spinner/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-spinner
 
-This log was last generated on Thu, 20 Jul 2023 18:27:34 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.3.2)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.3.1..@fluentui/react-spinner_v9.3.2)
+
+### Patches
+
+- Bump @fluentui/react-label to v9.1.22 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.3.1)
 
 Thu, 20 Jul 2023 18:27:34 GMT 
diff --git a/packages/react-components/react-spinner/package.json b/packages/react-components/react-spinner/package.json
index 05ecaa6520c58..24e00c50ba9f5 100644
--- a/packages/react-components/react-spinner/package.json
+++ b/packages/react-components/react-spinner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.3.1",
+  "version": "9.3.2",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,8 +34,8 @@
   },
   "dependencies": {
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-label": "^9.1.21",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-label": "^9.1.22",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-storybook-addon/package.json b/packages/react-components/react-storybook-addon/package.json
index b4e19bf2228e4..a42388a33c716 100644
--- a/packages/react-components/react-storybook-addon/package.json
+++ b/packages/react-components/react-storybook-addon/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-provider": "^9.7.11",
+    "@fluentui/react-provider": "^9.7.12",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
diff --git a/packages/react-components/react-switch/CHANGELOG.json b/packages/react-components/react-switch/CHANGELOG.json
index 139edf2b7b249..3939decdf3cc9 100644
--- a/packages/react-components/react-switch/CHANGELOG.json
+++ b/packages/react-components/react-switch/CHANGELOG.json
@@ -1,6 +1,39 @@
 {
   "name": "@fluentui/react-switch",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-switch_v9.1.27",
+      "version": "9.1.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-label to v9.1.22",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:21 GMT",
       "tag": "@fluentui/react-switch_v9.1.26",
diff --git a/packages/react-components/react-switch/CHANGELOG.md b/packages/react-components/react-switch/CHANGELOG.md
index cb0339df2c613..596ac172c5826 100644
--- a/packages/react-components/react-switch/CHANGELOG.md
+++ b/packages/react-components/react-switch/CHANGELOG.md
@@ -1,9 +1,21 @@
 # Change Log - @fluentui/react-switch
 
-This log was last generated on Tue, 25 Jul 2023 13:29:21 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.27)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.26..@fluentui/react-switch_v9.1.27)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-label to v9.1.22 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.26)
 
 Tue, 25 Jul 2023 13:29:21 GMT 
diff --git a/packages/react-components/react-switch/package.json b/packages/react-components/react-switch/package.json
index cd2a14b4dfd17..5778c86429818 100644
--- a/packages/react-components/react-switch/package.json
+++ b/packages/react-components/react-switch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "9.1.26",
+  "version": "9.1.27",
   "description": "Fluent UI React Switch component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,12 +33,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.13",
+    "@fluentui/react-field": "^9.1.14",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-label": "^9.1.21",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-label": "^9.1.22",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-table/CHANGELOG.json b/packages/react-components/react-table/CHANGELOG.json
index 3e638b233de89..13156e9b4a8c7 100644
--- a/packages/react-components/react-table/CHANGELOG.json
+++ b/packages/react-components/react-table/CHANGELOG.json
@@ -1,6 +1,45 @@
 {
   "name": "@fluentui/react-table",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-table_v9.7.2",
+      "version": "9.7.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.5.16",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.27",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.1.27",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-table_v9.7.1",
diff --git a/packages/react-components/react-table/CHANGELOG.md b/packages/react-components/react-table/CHANGELOG.md
index 45140961d4254..69fdbbbdfb420 100644
--- a/packages/react-components/react-table/CHANGELOG.md
+++ b/packages/react-components/react-table/CHANGELOG.md
@@ -1,9 +1,22 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.7.2)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.7.1..@fluentui/react-table_v9.7.2)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.5.16 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.27 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-radio to v9.1.27 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.7.1)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-table/package.json b/packages/react-components/react-table/package.json
index b32ee16292d39..9d96137e36045 100644
--- a/packages/react-components/react-table/package.json
+++ b/packages/react-components/react-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.7.1",
+  "version": "9.7.2",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,13 +37,13 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
-    "@fluentui/react-avatar": "^9.5.15",
-    "@fluentui/react-checkbox": "^9.1.26",
+    "@fluentui/react-avatar": "^9.5.16",
+    "@fluentui/react-checkbox": "^9.1.27",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-radio": "^9.1.26",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-radio": "^9.1.27",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-tabs/CHANGELOG.json b/packages/react-components/react-tabs/CHANGELOG.json
index a0a70ce1c1cba..ea362b1a71239 100644
--- a/packages/react-components/react-tabs/CHANGELOG.json
+++ b/packages/react-components/react-tabs/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-tabs",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-tabs_v9.3.27",
+      "version": "9.3.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-tabs_v9.3.26",
diff --git a/packages/react-components/react-tabs/CHANGELOG.md b/packages/react-components/react-tabs/CHANGELOG.md
index 452c6557733ad..1323c7bbe14ca 100644
--- a/packages/react-components/react-tabs/CHANGELOG.md
+++ b/packages/react-components/react-tabs/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.27)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.26..@fluentui/react-tabs_v9.3.27)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.3.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.26)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-tabs/package.json b/packages/react-components/react-tabs/package.json
index ddffa0061cff7..9eba5a808c961 100644
--- a/packages/react-components/react-tabs/package.json
+++ b/packages/react-components/react-tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.3.26",
+  "version": "9.3.27",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-tabster/CHANGELOG.json b/packages/react-components/react-tabster/CHANGELOG.json
index 89e487382c720..145983546e1c9 100644
--- a/packages/react-components/react-tabster/CHANGELOG.json
+++ b/packages/react-components/react-tabster/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-tabster",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-tabster_v9.11.1",
+      "version": "9.11.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:22 GMT",
       "tag": "@fluentui/react-tabster_v9.11.0",
diff --git a/packages/react-components/react-tabster/CHANGELOG.md b/packages/react-components/react-tabster/CHANGELOG.md
index 213f849cb2335..a08463558fe2a 100644
--- a/packages/react-components/react-tabster/CHANGELOG.md
+++ b/packages/react-components/react-tabster/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Tue, 25 Jul 2023 13:29:22 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.11.1)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.11.0..@fluentui/react-tabster_v9.11.1)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.11.0)
 
 Tue, 25 Jul 2023 13:29:22 GMT 
diff --git a/packages/react-components/react-tabster/package.json b/packages/react-components/react-tabster/package.json
index 749efb1dc0265..42b5ae5416c1c 100644
--- a/packages/react-components/react-tabster/package.json
+++ b/packages/react-components/react-tabster/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.11.0",
+  "version": "9.11.1",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,7 +31,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-tags-preview/package.json b/packages/react-components/react-tags-preview/package.json
index d1774534b775d..a58fa43cf0f53 100644
--- a/packages/react-components/react-tags-preview/package.json
+++ b/packages/react-components/react-tags-preview/package.json
@@ -36,11 +36,11 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
-    "@fluentui/react-avatar": "^9.5.15",
+    "@fluentui/react-avatar": "^9.5.16",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-text/CHANGELOG.json b/packages/react-components/react-text/CHANGELOG.json
index 337de38995188..c2040f57fc90a 100644
--- a/packages/react-components/react-text/CHANGELOG.json
+++ b/packages/react-components/react-text/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-text",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-text_v9.3.19",
+      "version": "9.3.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-text",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Jul 2023 18:27:34 GMT",
       "tag": "@fluentui/react-text_v9.3.18",
diff --git a/packages/react-components/react-text/CHANGELOG.md b/packages/react-components/react-text/CHANGELOG.md
index 46d535674b472..d93ffde62e35d 100644
--- a/packages/react-components/react-text/CHANGELOG.md
+++ b/packages/react-components/react-text/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-text
 
-This log was last generated on Thu, 20 Jul 2023 18:27:34 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-text_v9.3.19)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-text_v9.3.18..@fluentui/react-text_v9.3.19)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.3.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-text_v9.3.18)
 
 Thu, 20 Jul 2023 18:27:34 GMT 
diff --git a/packages/react-components/react-text/package.json b/packages/react-components/react-text/package.json
index fc5efa352646b..e817aac593695 100644
--- a/packages/react-components/react-text/package.json
+++ b/packages/react-components/react-text/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-text",
-  "version": "9.3.18",
+  "version": "9.3.19",
   "description": "Text is a typography and styling abstraction component that can be used to ensure the consistency of all text across your application.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-textarea/CHANGELOG.json b/packages/react-components/react-textarea/CHANGELOG.json
index 109204a6763af..29de2c7f75c8f 100644
--- a/packages/react-components/react-textarea/CHANGELOG.json
+++ b/packages/react-components/react-textarea/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-textarea",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-textarea_v9.3.24",
+      "version": "9.3.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-field to v9.1.14",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-textarea_v9.3.23",
diff --git a/packages/react-components/react-textarea/CHANGELOG.md b/packages/react-components/react-textarea/CHANGELOG.md
index 9c68ea654cc24..c4d9881807620 100644
--- a/packages/react-components/react-textarea/CHANGELOG.md
+++ b/packages/react-components/react-textarea/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-textarea
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.3.24)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.3.23..@fluentui/react-textarea_v9.3.24)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.14 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.3.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.3.23)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-textarea/package.json b/packages/react-components/react-textarea/package.json
index a173a97fe7e89..872a8a2a552a1 100644
--- a/packages/react-components/react-textarea/package.json
+++ b/packages/react-components/react-textarea/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-textarea",
-  "version": "9.3.23",
+  "version": "9.3.24",
   "description": "Fluent UI TextArea component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,8 +33,8 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.13",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-field": "^9.1.14",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/react-toast/CHANGELOG.json b/packages/react-components/react-toast/CHANGELOG.json
index d6be49f8538b5..d4bd2d03947f1 100644
--- a/packages/react-components/react-toast/CHANGELOG.json
+++ b/packages/react-components/react-toast/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-toast",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-toast_v9.0.6",
+      "version": "9.0.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-portal to v9.3.4",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:22 GMT",
       "tag": "@fluentui/react-toast_v9.0.5",
diff --git a/packages/react-components/react-toast/CHANGELOG.md b/packages/react-components/react-toast/CHANGELOG.md
index 281ebd71fbda8..1e98b282926fe 100644
--- a/packages/react-components/react-toast/CHANGELOG.md
+++ b/packages/react-components/react-toast/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-toast
 
-This log was last generated on Tue, 25 Jul 2023 13:29:22 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.0.6)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.0.5..@fluentui/react-toast_v9.0.6)
+
+### Patches
+
+- Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.0.5)
 
 Tue, 25 Jul 2023 13:29:22 GMT 
diff --git a/packages/react-components/react-toast/package.json b/packages/react-components/react-toast/package.json
index d71203f0e8d8a..9939071e8cf4d 100644
--- a/packages/react-components/react-toast/package.json
+++ b/packages/react-components/react-toast/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toast",
-  "version": "9.0.5",
+  "version": "9.0.6",
   "description": "Toast component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,9 +39,9 @@
     "@fluentui/react-aria": "^9.3.27",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-portal": "^9.3.4",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-toolbar/CHANGELOG.json b/packages/react-components/react-toolbar/CHANGELOG.json
index b0ac707324385..d146a5af54ba6 100644
--- a/packages/react-components/react-toolbar/CHANGELOG.json
+++ b/packages/react-components/react-toolbar/CHANGELOG.json
@@ -1,6 +1,51 @@
 {
   "name": "@fluentui/react-toolbar",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:20 GMT",
+      "tag": "@fluentui/react-toolbar_v9.1.27",
+      "version": "9.1.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "c6d2ace26c19b4c8102c77baf8f66ffeb36149f8",
+            "comment": "Remove margin from Icon in ToolbarButton when vertical prop is passed"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.3.26",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.2.22",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.1.27",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-toolbar_v9.1.26",
diff --git a/packages/react-components/react-toolbar/CHANGELOG.md b/packages/react-components/react-toolbar/CHANGELOG.md
index ae42646c3626a..ebbd557918bea 100644
--- a/packages/react-components/react-toolbar/CHANGELOG.md
+++ b/packages/react-components/react-toolbar/CHANGELOG.md
@@ -1,9 +1,23 @@
 # Change Log - @fluentui/react-toolbar
 
-This log was last generated on Tue, 25 Jul 2023 13:29:23 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.27)
+
+Tue, 01 Aug 2023 10:17:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.26..@fluentui/react-toolbar_v9.1.27)
+
+### Patches
+
+- Remove margin from Icon in ToolbarButton when vertical prop is passed ([PR #28658](https://github.com/microsoft/fluentui/pull/28658) by chassunc@microsoft.com)
+- Bump @fluentui/react-button to v9.3.26 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-divider to v9.2.22 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-radio to v9.1.27 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.26)
 
 Tue, 25 Jul 2023 13:29:23 GMT 
diff --git a/packages/react-components/react-toolbar/package.json b/packages/react-components/react-toolbar/package.json
index b40d942bb0271..7e82907a64312 100644
--- a/packages/react-components/react-toolbar/package.json
+++ b/packages/react-components/react-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toolbar",
-  "version": "9.1.26",
+  "version": "9.1.27",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,15 +35,15 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.3.25",
-    "@fluentui/react-divider": "^9.2.21",
+    "@fluentui/react-button": "^9.3.26",
+    "@fluentui/react-divider": "^9.2.22",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
     "@fluentui/react-context-selector": "^9.1.26",
-    "@fluentui/react-radio": "^9.1.26",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-radio": "^9.1.27",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
   },
diff --git a/packages/react-components/react-tooltip/CHANGELOG.json b/packages/react-components/react-tooltip/CHANGELOG.json
index c0761f9f252c3..910f7e2b48b62 100644
--- a/packages/react-components/react-tooltip/CHANGELOG.json
+++ b/packages/react-components/react-tooltip/CHANGELOG.json
@@ -1,6 +1,33 @@
 {
   "name": "@fluentui/react-tooltip",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
+      "tag": "@fluentui/react-tooltip_v9.2.27",
+      "version": "9.2.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-portal to v9.3.4",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-positioning to v9.9.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-tooltip_v9.2.26",
diff --git a/packages/react-components/react-tooltip/CHANGELOG.md b/packages/react-components/react-tooltip/CHANGELOG.md
index 5e2a6715b869c..259cdd5c4ae8b 100644
--- a/packages/react-components/react-tooltip/CHANGELOG.md
+++ b/packages/react-components/react-tooltip/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Change Log - @fluentui/react-tooltip
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.2.27)
+
+Tue, 01 Aug 2023 10:17:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.2.26..@fluentui/react-tooltip_v9.2.27)
+
+### Patches
+
+- Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-positioning to v9.9.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.2.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.2.26)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-tooltip/package.json b/packages/react-components/react-tooltip/package.json
index c1e80bd9ee2b3..4d857c95d45c2 100644
--- a/packages/react-components/react-tooltip/package.json
+++ b/packages/react-components/react-tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tooltip",
-  "version": "9.2.26",
+  "version": "9.2.27",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-positioning": "^9.9.0",
-    "@fluentui/react-shared-contexts": "^9.6.0",
+    "@fluentui/react-portal": "^9.3.4",
+    "@fluentui/react-positioning": "^9.9.1",
+    "@fluentui/react-shared-contexts": "^9.7.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@griffel/react": "^1.5.7",
diff --git a/packages/react-components/react-tree/CHANGELOG.json b/packages/react-components/react-tree/CHANGELOG.json
index 218d1f85a0d6f..cde120a8b6bec 100644
--- a/packages/react-components/react-tree/CHANGELOG.json
+++ b/packages/react-components/react-tree/CHANGELOG.json
@@ -1,6 +1,75 @@
 {
   "name": "@fluentui/react-tree",
   "entries": [
+    {
+      "date": "Tue, 01 Aug 2023 10:17:20 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.29",
+      "version": "9.0.0-beta.29",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "petrduda@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "d4b3feec354590939a340460bea62f4e39d38a74",
+            "comment": "bugfix: Tree, vertical spacing of branches and children is inconsistent"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "f9e014b3919f00068940b0dd94980f6d542eff68",
+            "comment": "feat: adds openItems and checkedItems to tree callback data"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "2f795af17bf0cf844e0cc59c5d2f2418a00c9594",
+            "comment": "chore: improves internal headless signature"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.16",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.26",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.27",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.4",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.27",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 27 Jul 2023 10:34:14 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.28",
diff --git a/packages/react-components/react-tree/CHANGELOG.md b/packages/react-components/react-tree/CHANGELOG.md
index 3c609fbc51150..7482f15e2bfb0 100644
--- a/packages/react-components/react-tree/CHANGELOG.md
+++ b/packages/react-components/react-tree/CHANGELOG.md
@@ -1,9 +1,27 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Thu, 27 Jul 2023 10:34:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:17:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.29)
+
+Tue, 01 Aug 2023 10:17:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.28..@fluentui/react-tree_v9.0.0-beta.29)
+
+### Changes
+
+- bugfix: Tree, vertical spacing of branches and children is inconsistent ([PR #28681](https://github.com/microsoft/fluentui/pull/28681) by petrduda@microsoft.com)
+- feat: adds openItems and checkedItems to tree callback data ([PR #28669](https://github.com/microsoft/fluentui/pull/28669) by bernardo.sunderhus@gmail.com)
+- chore: improves internal headless signature ([PR #28651](https://github.com/microsoft/fluentui/pull/28651) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.5.16 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-button to v9.3.26 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.27 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-radio to v9.1.27 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
 ## [9.0.0-beta.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.28)
 
 Thu, 27 Jul 2023 10:34:14 GMT 
diff --git a/packages/react-components/react-tree/package.json b/packages/react-components/react-tree/package.json
index 6166d7e3de1af..13efffcff7cda 100644
--- a/packages/react-components/react-tree/package.json
+++ b/packages/react-components/react-tree/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.0.0-beta.28",
+  "version": "9.0.0-beta.29",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,15 +38,15 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
-    "@fluentui/react-avatar": "^9.5.15",
-    "@fluentui/react-button": "^9.3.25",
-    "@fluentui/react-checkbox": "^9.1.26",
+    "@fluentui/react-avatar": "^9.5.16",
+    "@fluentui/react-button": "^9.3.26",
+    "@fluentui/react-checkbox": "^9.1.27",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-portal": "^9.3.3",
-    "@fluentui/react-radio": "^9.1.26",
-    "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.11.0",
+    "@fluentui/react-portal": "^9.3.4",
+    "@fluentui/react-radio": "^9.1.27",
+    "@fluentui/react-shared-contexts": "^9.7.0",
+    "@fluentui/react-tabster": "^9.11.1",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
diff --git a/packages/react-components/theme-designer/package.json b/packages/react-components/theme-designer/package.json
index 91813205dda5e..1ba8b0394e453 100644
--- a/packages/react-components/theme-designer/package.json
+++ b/packages/react-components/theme-designer/package.json
@@ -32,8 +32,8 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-alert": "9.0.0-beta.61",
-    "@fluentui/react-components": "^9.27.1",
+    "@fluentui/react-alert": "9.0.0-beta.62",
+    "@fluentui/react-components": "^9.27.2",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-storybook-addon-codesandbox": "^0.1.0",

From 2ddd2ef27e8f1421d095a2ba600d417af98a7b22 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 1 Aug 2023 12:18:50 +0200
Subject: [PATCH 35/37] feat(FluentProvider): emit errors on duplicate IDs
 (#28670)

* feat(FluentProvider): emit errors on duplicate IDs

* rework to properly work in SSR

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

Co-authored-by: ling1726 <lingfangao@hotmail.com>

---------

Co-authored-by: ling1726 <lingfangao@hotmail.com>
---
 .../AdvancedConfiguration.stories.mdx         | 17 +++++
 ...-c1192c64-622d-40a5-9732-ee38cc84acef.json |  7 ++
 .../FluentProvider-hydrate.test.tsx           | 68 +++++++++++++++++++
 .../FluentProvider/FluentProvider.test.tsx    | 27 +++++++-
 .../FluentProvider/useFluentProvider.test.tsx |  9 ++-
 .../FluentProvider/useFluentProvider.ts       | 35 ++++++----
 .../useFluentProviderThemeStyleTag.ts         | 33 +++++++++
 7 files changed, 177 insertions(+), 19 deletions(-)
 create mode 100644 change/@fluentui-react-provider-c1192c64-622d-40a5-9732-ee38cc84acef.json
 create mode 100644 packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-hydrate.test.tsx

diff --git a/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx b/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx
index 2c4f7a9df02a1..02adae2243804 100644
--- a/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx
+++ b/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
diff --git a/change/@fluentui-react-provider-c1192c64-622d-40a5-9732-ee38cc84acef.json b/change/@fluentui-react-provider-c1192c64-622d-40a5-9732-ee38cc84acef.json
new file mode 100644
index 0000000000000..92e794c142cff
--- /dev/null
+++ b/change/@fluentui-react-provider-c1192c64-622d-40a5-9732-ee38cc84acef.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat(FluentProvider): emit errors on duplicate IDs",
+  "packageName": "@fluentui/react-provider",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-hydrate.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-hydrate.test.tsx
new file mode 100644
index 0000000000000..cf6a9f940d2a7
--- /dev/null
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-hydrate.test.tsx
@@ -0,0 +1,68 @@
+import {
+  canUseDOM as _canUseDOM,
+  resetIdsForTests,
+  useIsomorphicLayoutEffect as _useIsomorphicLayoutEffect,
+} from '@fluentui/react-utilities';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { FluentProvider } from './FluentProvider';
+
+jest.mock('@fluentui/react-utilities', () => {
+  const utilities = jest.requireActual('@fluentui/react-utilities');
+
+  return {
+    ...utilities,
+    canUseDOM: jest.fn().mockImplementation(utilities.canUseDOM),
+    useIsomorphicLayoutEffect: jest.fn().mockImplementation(utilities.useIsomorphicLayoutEffect),
+  };
+});
+
+const canUseDOM = _canUseDOM as jest.MockedFunction<typeof _canUseDOM>;
+const useIsomorphicLayoutEffect = _useIsomorphicLayoutEffect as jest.MockedFunction<typeof _useIsomorphicLayoutEffect>;
+
+// Heads up!
+//
+// Tests in this file are specific to hydration scenarios
+// They have to be run in DOM as otherwise hydration is not possible
+
+const SSR_TARGET_DOCUMENT = null as unknown as undefined;
+
+function renderHTML(element: React.ReactElement) {
+  // Mocking defaults to simulate SSR environment
+  canUseDOM.mockReturnValueOnce(false);
+  useIsomorphicLayoutEffect.mockImplementationOnce(React.useEffect);
+
+  const html = renderToStaticMarkup(element);
+
+  // IDs are reset to avoid conflicts between SSR and hydration
+  resetIdsForTests();
+
+  return html;
+}
+
+describe('FluentProvider (hydration)', () => {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const noop = () => {};
+  let logErrorSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    logErrorSpy = jest.spyOn(console, 'error').mockImplementation(noop);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    resetIdsForTests();
+  });
+
+  it('should not emit an error on hydration', () => {
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+    container.innerHTML = renderHTML(<FluentProvider targetDocument={SSR_TARGET_DOCUMENT} />);
+
+    ReactDOM.hydrate(<FluentProvider />, container);
+    expect(logErrorSpy).toHaveBeenCalledTimes(0);
+  });
+});
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
index edf895890f0d7..e062340a26a2e 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
@@ -1,18 +1,21 @@
+import { teamsLightTheme } from '@fluentui/react-theme';
 import { resetIdsForTests } from '@fluentui/react-utilities';
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import * as reactTestRenderer from 'react-test-renderer';
 
 import { FluentProvider } from './FluentProvider';
+import { fluentProviderClassNames } from './useFluentProviderStyles.styles';
 import { isConformant } from '../../testing/isConformant';
-import { teamsLightTheme } from '@fluentui/react-theme';
 
 describe('FluentProvider', () => {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   const noop = () => {};
+  let logErrorSpy: jest.SpyInstance;
 
   beforeEach(() => {
     jest.spyOn(console, 'warn').mockImplementation(noop);
+    logErrorSpy = jest.spyOn(console, 'error').mockImplementation(noop);
   });
 
   isConformant({
@@ -36,6 +39,28 @@ describe('FluentProvider', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it(`should emit an error on duplicated IDs`, () => {
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    document.body.appendChild(containerA);
+    document.body.appendChild(containerB);
+
+    render(<FluentProvider theme={teamsLightTheme} />, { container: containerA });
+    expect(document.body.querySelectorAll(`.${fluentProviderClassNames.root}`)).toHaveLength(1);
+
+    // This resets IDs, so the next FluentProvider will have the same IDs as the first one
+    resetIdsForTests();
+
+    render(<FluentProvider theme={teamsLightTheme} />, { container: containerB });
+    expect(document.body.querySelectorAll(`.${fluentProviderClassNames.root}`)).toHaveLength(2);
+
+    expect(logErrorSpy).toHaveBeenCalledTimes(1);
+    expect(logErrorSpy).toHaveBeenCalledWith(
+      expect.stringContaining('@fluentui/react-provider: There are conflicting ids in your DOM.'),
+    );
+  });
+
   it('does not render style element when not in SSR', () => {
     const { container } = render(<FluentProvider theme={teamsLightTheme} />);
     expect(container.querySelector('style')).toBeNull();
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx
index 15218eca48b1f..76476bd3ef430 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx
@@ -1,10 +1,10 @@
+import type { PartialTheme } from '@fluentui/react-theme';
+import type { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
 import { renderHook } from '@testing-library/react-hooks';
 import * as React from 'react';
 
 import { FluentProvider } from './FluentProvider';
 import { useFluentProvider_unstable } from './useFluentProvider';
-import type { PartialTheme } from '@fluentui/react-theme';
-import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
 import { FluentProviderCustomStyleHooks } from './FluentProvider.types';
 
 describe('useFluentProvider_unstable', () => {
@@ -24,8 +24,11 @@ describe('useFluentProvider_unstable', () => {
     });
 
     expect(result.current.theme).toBe(undefined);
+
     expect(logWarnSpy).toHaveBeenCalledTimes(2);
-    expect(logWarnSpy).toHaveBeenCalledWith(expect.stringContaining('FluentProvider: your "theme" is not defined !'));
+    expect(logWarnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('@fluentui/react-provider: FluentProvider does not have your "theme" defined.'),
+    );
   });
 
   it('should merge themes', () => {
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index eea3f32a31788..c118d624e0d10 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
@@ -1,3 +1,4 @@
+import { useRenderer_unstable } from '@griffel/react';
 import { useFocusVisible } from '@fluentui/react-tabster';
 import {
   ThemeContext_unstable as ThemeContext,
@@ -9,12 +10,11 @@ import type {
   CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,
   ThemeContextValue_unstable as ThemeContextValue,
 } from '@fluentui/react-shared-contexts';
-
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
+
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
 import type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';
-import { useRenderer_unstable } from '@griffel/react';
 
 /**
  * Create the state required to render FluentProvider.
@@ -48,8 +48,8 @@ export const useFluentProvider_unstable = (
     theme,
     overrides_unstable: overrides = {},
   } = props;
-  const mergedTheme = shallowMerge(parentTheme, theme);
 
+  const mergedTheme = shallowMerge(parentTheme, theme);
   const mergedOverrides = shallowMerge(parentOverrides, overrides);
 
   const mergedCustomStyleHooks = shallowMerge(
@@ -57,24 +57,29 @@ export const useFluentProvider_unstable = (
     customStyleHooks_unstable,
   ) as CustomStyleHooksContextValue;
 
-  React.useEffect(() => {
-    if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
-      // eslint-disable-next-line no-console
-      console.warn(`
-      FluentProvider: your "theme" is not defined !
-      =============================================
-      Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
-      `);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const renderer = useRenderer_unstable();
   const { styleTagId, rule } = useFluentProviderThemeStyleTag({
     theme: mergedTheme,
     targetDocument,
     rendererAttributes: renderer.styleElementAttributes ?? {},
   });
+
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (mergedTheme === undefined) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          [
+            '@fluentui/react-provider: FluentProvider does not have your "theme" defined.',
+            "Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider.",
+          ].join(' '),
+        );
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+  }
+
   return {
     applyStylesToPortals,
     // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index 3751196dcea89..23bf2e3696c10 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -64,6 +64,39 @@ export const useFluentProviderThemeStyleTag = (
 
   const rule = `.${styleTagId} { ${cssVarsAsString} }`;
 
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useMemo(() => {
+      // Heads up!
+      // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,
+      // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because
+      // of double render.
+
+      if (targetDocument) {
+        const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;
+        const providerElements = targetDocument.querySelectorAll(providerSelector);
+
+        // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed
+        const isSSR = targetDocument.querySelector(`${providerSelector} > style[id="${styleTagId}"]`) !== null;
+        const elementsCount = isSSR ? 1 : 0;
+
+        if (providerElements.length > elementsCount) {
+          // eslint-disable-next-line no-console
+          console.error(
+            [
+              '@fluentui/react-provider: There are conflicting ids in your DOM.',
+              'Please make sure that you configured your application properly.',
+              '\n',
+              '\n',
+              'Configuration guide: https://aka.ms/fluentui-conflicting-ids',
+            ].join(' '),
+          );
+        }
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+  }
+
   useHandleSSRStyleElements(targetDocument, styleTagId);
   useInsertionEffect(() => {
     // The style element could already have been created during SSR - no need to recreate it

From ac8385d586881c06a91811791190b393eefd837c Mon Sep 17 00:00:00 2001
From: srmukher <120183316+srmukher@users.noreply.github.com>
Date: Tue, 1 Aug 2023 17:00:58 +0530
Subject: [PATCH 36/37] Fixing re-render issue for all charts when empty
 (#28321)

* Fixing re-render issue for area chart

* Area chart re-render fix

* Fixing re-rendering for GVBC, HBC, Donut and HeatMap

* Fixing the re-render issue for other charts

* Change file

* Updating snapshots

* Resolving build error

* Updating the charts to reduce re-renders

* Fixing build errors

* Merging master and updating snapshots

* Updating snapshots

* Update test

* Fixing build and test errors

* Fixing build and test errors

* Fixing build errors

* Fixing test error

* Removing the test causing error

* Resolving sankey chart test error

* Fixing Sankey chart test failures

* Fixing errors in line chart tests

* Fixing errors

* Fixing test errors

* Removing 2 tests

* Resolving donut test issue

* Removing tests using act in donut chart

* Resetting ids for donut test fix

* Deleting tests causing test errors in PR build

* Updating the charts for empty scenario

* Removing tests that are failing the tests

* Resolving PR comments

* Heatmap test update

* Sparkline test update
---
 ...-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json |    7 +
 .../components/AreaChart/AreaChart.base.tsx   |   32 +-
 .../components/AreaChart/AreaChart.test.tsx   |    4 +-
 .../AreaChart/AreaChartRTL.test.tsx           |   22 +
 .../__snapshots__/AreaChart.test.tsx.snap     |  128 +-
 .../__snapshots__/AreaChartRTL.test.tsx.snap  | 5103 +++++++++++
 .../components/DonutChart/DonutChart.base.tsx |   24 +-
 .../components/DonutChart/DonutChart.test.tsx |    2 +-
 .../DonutChart/DonutChartRTL.test.tsx         |  296 +-
 .../__snapshots__/DonutChart.test.tsx.snap    |   70 +-
 .../__snapshots__/DonutChartRTL.test.tsx.snap | 6672 ++++++--------
 .../GroupedVerticalBarChart.base.tsx          |   32 +-
 .../GroupedVerticalBarChart.test.tsx          |    4 +-
 .../GroupedVerticalBarChartRTL.test.tsx       |   22 +
 .../GroupedVerticalBarChart.test.tsx.snap     |   88 +-
 .../GroupedVerticalBarChartRTL.test.tsx.snap  | 5769 ++++++++++++
 .../HeatMapChart/HeatMapChart.base.tsx        |   23 +-
 .../HeatMapChart/HeatMapChartRTL.test.tsx     |   62 +
 .../__snapshots__/HeatMapChart.test.tsx.snap  |   58 +-
 .../HeatMapChartRTL.test.tsx.snap             |  324 +
 .../HorizontalBarChart.base.tsx               |   24 +-
 .../HorizontalBarChart.test.tsx               |    2 +-
 .../HorizontalBarChart.test.tsx.snap          |   48 +-
 .../components/LineChart/LineChart.base.tsx   |   30 +-
 .../components/LineChart/LineChart.test.tsx   |    4 +-
 .../LineChart/LineChartRTL.test.tsx           |   22 +
 .../__snapshots__/LineChart.test.tsx.snap     |  108 +-
 .../__snapshots__/LineChartRTL.test.tsx.snap  | 4232 +++++++++
 .../src/components/PieChart/PieChart.base.tsx |   29 +-
 .../src/components/PieChart/PieChart.test.tsx |    4 +-
 .../components/PieChart/PieChartRTL.test.tsx  |   22 +
 .../__snapshots__/PieChartRTL.test.tsx.snap   |  288 +
 .../SankeyChart/SankeyChart.base.tsx          |   26 +-
 .../SankeyChart/SankeyChart.test.tsx          |    2 +-
 .../SankeyChart/SankeyChartRTL.test.tsx       |   36 +
 .../__snapshots__/SankeyChart.test.tsx.snap   |  654 +-
 .../SankeyChartRTL.test.tsx.snap              | 8146 +++++++++++++++++
 .../components/Sparkline/Sparkline.base.tsx   |   27 +-
 .../components/Sparkline/Sparkline.test.tsx   |    4 +-
 .../Sparkline/SparklineRTL.test.tsx           |   22 +
 .../__snapshots__/Sparkline.test.tsx.snap     |    4 +-
 .../__snapshots__/SparklineRTL.test.tsx.snap  |  163 +
 .../MultiStackedBarChart.base.tsx             |   32 +-
 .../MultiStackedBarChart.test.tsx             |    4 +-
 .../StackedBarChart/StackedBarChart.base.tsx  |   28 +-
 .../StackedBarChart/StackedBarChart.test.tsx  |    4 +-
 .../MultiStackedBarChart.test.tsx.snap        |  124 +-
 .../StackedBarChart.test.tsx.snap             |   56 +-
 .../VerticalBarChart.base.tsx                 |    4 +-
 .../VerticalBarChart.test.tsx.snap            |  110 +-
 .../VerticalBarChartRTL.test.tsx.snap         |  172 +-
 .../VerticalStackedBarChart.base.tsx          |   33 +-
 .../VerticalStackedBarChart.test.tsx          |    4 +-
 .../VerticalStackedBarChartRTL.test.tsx       |   22 +
 .../VerticalStackedBarChart.test.tsx.snap     |  118 +-
 .../VerticalStackedBarChartRTL.test.tsx.snap  | 5231 +++++++++++
 56 files changed, 33585 insertions(+), 4996 deletions(-)
 create mode 100644 change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json
 create mode 100644 packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx
 create mode 100644 packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap
 create mode 100644 packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx
 create mode 100644 packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
 create mode 100644 packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx
 create mode 100644 packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
 create mode 100644 packages/react-charting/src/components/LineChart/LineChartRTL.test.tsx
 create mode 100644 packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
 create mode 100644 packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx
 create mode 100644 packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap
 create mode 100644 packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx
 create mode 100644 packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap
 create mode 100644 packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx
 create mode 100644 packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap
 create mode 100644 packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
 create mode 100644 packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap

diff --git a/change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json b/change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json
new file mode 100644
index 0000000000000..f6d32fb738f20
--- /dev/null
+++ b/change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixing re-render issue for all charts when empty",
+  "packageName": "@fluentui/react-charting",
+  "email": "srmukher@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
index 02babbaee3754..5a03d7c585b7c 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -70,7 +70,6 @@ export interface IAreaChartState extends IBasestate {
   nearestCircleToHighlight: number | string | Date | null;
   xAxisCalloutAccessibilityData?: IAccessibilityProps;
   isShowCalloutPending: boolean;
-  emptyChart?: boolean;
   /** focused point */
   activePoint: string;
 }
@@ -107,6 +106,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   //from O(n^2) to O(n) using a map.
   private _enableComputationOptimization: boolean;
   private _firstRenderOptimization: boolean;
+  private _emptyChartId: string;
 
   public constructor(props: IAreaChartProps) {
     super(props);
@@ -123,17 +123,6 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
       isCircleClicked: false,
       nearestCircleToHighlight: null,
       isShowCalloutPending: false,
-      emptyChart: !(
-        (
-          this.props.data &&
-          this.props.data.lineChartData &&
-          this.props.data.lineChartData.length > 0 &&
-          this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0
-        )
-        // if all the data sets have no data
-        // filtering all items which have no data and checking if the length of the filtered array is 0
-        // which means chart is not empty
-      ),
       activePoint: '',
     };
     warnDeprecations(COMPONENT_NAME, props, {
@@ -146,6 +135,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     this._tooltipId = getId('AreaChartTooltipID');
     this._enableComputationOptimization = true;
     this._firstRenderOptimization = true;
+    this._emptyChartId = getId('_AreaChart_empty');
   }
 
   public componentDidUpdate() {
@@ -159,7 +149,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   }
 
   public render(): JSX.Element {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       const { lineChartData, chartTitle } = this.props.data;
       const points = this._addDefaultColors(lineChartData);
       const { colors, opacity, stackedInfo, calloutPoints } = this._createSet(points);
@@ -235,7 +225,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     }
     return (
       <div
-        id={getId('_AreaChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -909,4 +899,18 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     const yValue = point.yAxisCalloutData || point.y;
     return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      (
+        this.props.data &&
+        this.props.data.lineChartData &&
+        this.props.data.lineChartData.length > 0 &&
+        this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0
+      )
+      // if all the data sets have no data
+      // filtering all items which have no data and checking if the length of the filtered array is 0
+      // which means chart is not empty
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
index fb0894f66dd8e..48f2256eb6bd5 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
@@ -46,7 +46,7 @@ const points: ILineChartPoints[] = [
     color: 'red',
   },
 ];
-const chartPoints = {
+export const chartPoints = {
   chartTitle: 'AreaChart',
   lineChartData: points,
 };
@@ -70,7 +70,7 @@ const emptyPoint = [
     color: 'red',
   },
 ];
-const emptyChartPoints = {
+export const emptyChartPoints = {
   chartTitle: 'EmptyAreaChart',
   lineChartData: emptyPoint,
 };
diff --git a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx
new file mode 100644
index 0000000000000..69b422bd6cfa8
--- /dev/null
+++ b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { chartPoints, emptyChartPoints } from './AreaChart.test';
+import { AreaChart } from './index';
+
+describe('Area chart rendering', () => {
+  test('Should re-render the Area chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<AreaChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_AreaChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<AreaChart data={chartPoints} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_AreaChart_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
index adc1d00ad35b3..dd51632647b90 100644
--- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -70,7 +70,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -98,7 +98,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -232,7 +232,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -558,7 +558,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -571,7 +571,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -612,7 +612,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -640,7 +640,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -774,7 +774,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -997,7 +997,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1010,7 +1010,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1051,7 +1051,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -1079,7 +1079,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -1213,7 +1213,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1436,7 +1436,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1449,7 +1449,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1490,7 +1490,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -1518,7 +1518,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -1618,7 +1618,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1755,7 +1755,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1768,7 +1768,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1809,7 +1809,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -1837,7 +1837,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -1977,7 +1977,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2114,7 +2114,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2127,7 +2127,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2168,7 +2168,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -2196,7 +2196,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -2336,7 +2336,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2473,7 +2473,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2486,7 +2486,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2527,7 +2527,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -2555,7 +2555,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -2681,7 +2681,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2818,7 +2818,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2831,7 +2831,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2872,7 +2872,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -2900,7 +2900,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -3023,7 +3023,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone7"
+        data-focuszone-id="FocusZone8"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3157,7 +3157,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3170,7 +3170,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3211,7 +3211,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 315)"
       />
       <g
@@ -3239,7 +3239,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -3355,7 +3355,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3368,7 +3368,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3409,7 +3409,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -3437,7 +3437,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -3577,7 +3577,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3714,7 +3714,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3727,7 +3727,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3768,7 +3768,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -3796,7 +3796,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -3936,7 +3936,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4073,7 +4073,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4086,7 +4086,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4127,7 +4127,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -4155,7 +4155,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -4295,7 +4295,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4432,7 +4432,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4445,7 +4445,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4486,7 +4486,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -4514,7 +4514,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -4654,7 +4654,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..8df081a9230a2
--- /dev/null
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap
@@ -0,0 +1,5103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Area chart rendering Should re-render the Area chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_AreaChart_empty11"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Area chart rendering Should re-render the Area chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    id="chart_12"
+    role="presentation"
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+          {
+            overflow: auto;
+          }
+      data-focuszone-id="FocusZone13"
+    >
+      <svg
+        aria-label="AreaChart"
+        focusable="false"
+        height="0"
+        style="display: block;"
+        width="0"
+      >
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+                width: 1px;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+          id="xAxisGElementchart_12"
+          transform="translate(0, -35)"
+        />
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+          id="yAxisGElementchart_12"
+          transform="translate(40, 0)"
+        />
+        <g>
+          <rect
+            fill="transparent"
+            height="-20"
+            id="rectangle9"
+            width="-20"
+          />
+        </g>
+        <g>
+          <path
+            d="M40,-0.625L-20,20"
+            fill="transparent"
+            id="0-line-areaChart_6"
+            opacity="1"
+            stroke="red"
+            stroke-width="3"
+          />
+          <path
+            d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+            fill="red"
+            fill-opacity="0.7"
+            id="0-graph-areaChart_6"
+            opacity="1"
+          />
+          <g
+            clip-path="url(#clip)"
+            d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          >
+            <circle
+              aria-label="20. metaData1, 50."
+              cx="40"
+              cy="-0.625"
+              data-is-focusable="true"
+              fill="red"
+              id="circle8_0"
+              r="0"
+              role="img"
+              stroke="red"
+              stroke-width="3"
+              tabindex="0"
+            />
+            <circle
+              aria-label="40. metaData1, 80."
+              cx="-20"
+              cy="20"
+              data-is-focusable="true"
+              fill="red"
+              id="circle8_1"
+              r="0"
+              role="img"
+              stroke="red"
+              stroke-width="3"
+              tabindex="-1"
+            />
+          </g>
+          <line
+            id="verticalLine_7"
+            opacity="0.5"
+            stroke="red"
+            stroke-dasharray="5.5"
+            stroke-width="1"
+            visibility="hidden"
+            x1="0"
+            x2="0"
+            y1="0"
+            y2="0"
+          />
+        </g>
+      </svg>
+    </div>
+    <div
+      class=
+
+          {
+            margin-left: 20px;
+            margin-top: 8px;
+          }
+    >
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
+            }
+      >
+        <div>
+          <div
+            style="position: relative;"
+          >
+            <div
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
+            >
+              <div
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
+                    }
+                data-focuszone-id="FocusZone14"
+                role="listbox"
+              >
+                <div
+                  class=
+                      ms-OverflowSet
+                      {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: unset;
+                        position: relative;
+                      }
+                  role="group"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="metaData1"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="1"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: red;
+                              border-color: red;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, red, red);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        metaData1
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      class="ms-layer"
+    />
+  </div>
+</div>
+`;
+
+exports[`AreaChart - mouse events Should render callout correctly on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={8}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="visibility"
+          x1={-20}
+          x2={-20}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipundefined"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                display: grid;
+                overflow: hidden;
+                padding-bottom: 10px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 11px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                }
+            style={Object {}}
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #605e5c;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: 0.8;
+                  }
+              data-is-focusable={false}
+              role="text"
+            >
+              40
+            </div>
+          </div>
+          <div
+            style={Object {}}
+          >
+            <div
+              data-is-focusable={false}
+              key="callout-content-0"
+              role="text"
+              style={Object {}}
+            >
+              <div
+                style={Object {}}
+              >
+                <div
+                  className=
+
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        border-left: 4px solid red;
+                        color: #323130;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 16px;
+                        font-weight: 400;
+                        margin-top: 13px;
+                        padding-left: 8px;
+                      }
+                      @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                        forced-color-adjust: none;
+                      }
+                  id="0_80"
+                >
+                  <div>
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #605e5c;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                          }
+                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                            color: rgb(255, 255, 255);
+                          }
+                    >
+                       
+                      metaData1
+                    </div>
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 16px;
+                            font-weight: bold;
+                            line-height: 22px;
+                          }
+                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                            color: rgb(255, 255, 255);
+                          }
+                    >
+                      80
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AreaChart - mouse events Should render customized callout on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={8}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="visibility"
+          x1={-20}
+          x2={-20}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipundefined"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "x": 40,
+  "values": [
+    {
+      "legend": "metaData1",
+      "y": 80,
+      "color": "red"
+    }
+  ]
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AreaChart - mouse events Should render customized callout per stack on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={8}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="visibility"
+          x1={-20}
+          x2={-20}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipundefined"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "x": 40,
+  "values": [
+    {
+      "legend": "metaData1",
+      "y": 80,
+      "color": "red"
+    }
+  ]
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AreaChart snapShot testing Should not render circles when optimizeLargeData is true 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          aria-label="metaData1, series 1 of 1 with 2 data points."
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          data-is-focusable={true}
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          role="img"
+        />
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing Should render with default colors when line color is not provided 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="#637cef"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="#637cef"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="#637cef"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="#637cef"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="#637cef"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="#637cef"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="#637cef"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #637cef;
+                            border-color: #637cef;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #637cef, #637cef);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders Areachart with single point correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={10}
+        />
+      </g>
+      <g>
+        <path
+          d="M10,29.808Z"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <circle
+          cx={10}
+          cy={29.8076923076923}
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          r={6}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M10,29.808L10,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={10}
+            cy={29.8076923076923}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone8"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="metaData1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={1}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: red;
+                      border-color: red;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, red, red);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                metaData1
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={350}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 315)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={330}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,130.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,130.625L-20,20L-20,315L40,315Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,130.625L-20,20L-20,315L40,315Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={130.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={350}
+        />
+      </g>
+    </svg>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx
index b4d07ec0fddd4..71280d92ae296 100644
--- a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx
+++ b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx
@@ -26,7 +26,6 @@ export interface IDonutChartState {
   selectedLegend: string;
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
-  emptyChart?: boolean;
 }
 
 export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {
@@ -42,6 +41,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
   private _currentHoverElement: any;
   private _calloutId: string;
   private _calloutAnchorPoint: IChartDataPoint | null;
+  private _emptyChartId: string | null;
 
   public static getDerivedStateFromProps(
     nextProps: Readonly<IDonutChartProps>,
@@ -74,13 +74,13 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       yCalloutValue: '',
       selectedLegend: '',
       focusedArcId: '',
-      emptyChart: false,
     };
     this._hoverCallback = this._hoverCallback.bind(this);
     this._focusCallback = this._focusCallback.bind(this);
     this._hoverLeave = this._hoverLeave.bind(this);
     this._calloutId = getId('callout');
     this._uniqText = getId('_Pie_');
+    this._emptyChartId = getId('_DonutChart_empty');
   }
   public componentDidMount(): void {
     if (this._rootElem) {
@@ -89,14 +89,6 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
         _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,
       });
     }
-    const isChartEmpty = !(
-      this.props.data &&
-      this.props.data.chartData &&
-      this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
   }
 
   public render(): JSX.Element {
@@ -118,7 +110,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;
     const chartData = data && data.chartData?.filter((d: IChartDataPoint) => d.data! > 0);
     const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <div
         className={this._classNames.root}
         ref={(rootElem: HTMLElement | null) => (this._rootElem = rootElem)}
@@ -184,7 +176,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       </div>
     ) : (
       <div
-        id={getId('_DonutChart_')}
+        id={this._emptyChartId!}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -331,4 +323,12 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
   private _getHighlightedLegend() {
     return this.state.selectedLegend || this.state.activeLegend;
   }
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.chartData &&
+      this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx
index 5561d998e37eb..6a8cf183171a0 100644
--- a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx
+++ b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx
@@ -42,7 +42,7 @@ export const chartPoints: IChartProps = {
   chartData: points,
 };
 
-const emptyChartPoints: IChartProps = {
+export const emptyChartPoints: IChartProps = {
   chartTitle: chartTitle,
   chartData: [],
 };
diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
index d0e65307484d4..78c00c84b2c38 100644
--- a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
+++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
@@ -1,204 +1,180 @@
-import { render, screen, queryAllByAttribute, fireEvent, act } from '@testing-library/react';
+import { render, screen, queryAllByAttribute, fireEvent } from '@testing-library/react';
 import { chartPoints } from './DonutChart.test';
 import { DonutChart } from './index';
 import * as React from 'react';
 import { DarkTheme } from '@fluentui/theme-samples';
 import { ThemeProvider } from '@fluentui/react';
 import * as utils from '../../utilities/utilities';
+import { resetIds } from '../../Utilities';
 
-test('Should hide callout on mouse leave', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />);
+describe('Donut chart interactions', () => {
+  beforeEach(() => {
+    resetIds();
+    jest.spyOn(global.Math, 'random').mockReturnValue(0.1);
+  });
+  afterEach(() => {
+    jest.spyOn(global.Math, 'random').mockRestore();
+  });
+  test('Should hide callout on mouse leave', () => {
+    // Arrange
+    const { container } = render(
+      <DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />,
+    );
 
-  // Act
-  const getById = queryAllByAttribute.bind(null, 'id');
-  fireEvent.mouseOver(getById(container, /Pie/i)[0]);
-  expect(getById(container, /callout/i)[0]).toBeDefined();
-  fireEvent.mouseLeave(getById(container, /Pie/i)[0]);
+    // Act
+    const getById = queryAllByAttribute.bind(null, 'id');
+    fireEvent.mouseOver(getById(container, /Pie/i)[0]);
+    expect(getById(container, /callout/i)[0]).toBeDefined();
+    fireEvent.mouseLeave(getById(container, /Pie/i)[0]);
 
-  // Assert
-  expect(getById(container, /callout/i)[0]).toHaveStyle('opacity: 0');
-  expect(container).toMatchSnapshot();
-});
+    // Assert
+    expect(getById(container, /callout/i)[0]).toHaveStyle('opacity: 0');
+    expect(container).toMatchSnapshot();
+  });
 
-test('Should show callout on focus', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />);
+  test('Should show callout on focus', () => {
+    // Arrange
+    const { container } = render(
+      <DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />,
+    );
 
-  // Act
-  const getById = queryAllByAttribute.bind(null, 'id');
-  fireEvent.focus(getById(container, /Pie/i)[0]);
+    // Act
+    const getById = queryAllByAttribute.bind(null, 'id');
+    fireEvent.focus(getById(container, /Pie/i)[0]);
 
-  // Assert
-  expect(getById(container, /focusRing/i)).toBeDefined();
-});
+    // Assert
+    expect(getById(container, /focusRing/i)).toBeDefined();
+  });
 
-test('Should remove focus on blur', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />);
+  test('Should remove focus on blur', () => {
+    // Arrange
+    const { container } = render(
+      <DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />,
+    );
 
-  // Act
-  const getById = queryAllByAttribute.bind(null, 'id');
-  fireEvent.blur(getById(container, /Pie/i)[0]);
+    // Act
+    const getById = queryAllByAttribute.bind(null, 'id');
+    fireEvent.blur(getById(container, /Pie/i)[0]);
 
-  // Assert
-  const value = getById(container, /Pie/i)[0].getAttribute('id');
-  expect(value).not.toContain('focusRing');
-});
+    // Assert
+    const value = getById(container, /Pie/i)[0].getAttribute('id');
+    expect(value).not.toContain('focusRing');
+  });
 
-test('Should highlight the corresponding Pie on mouse over on legends', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
+  test('Should highlight the corresponding Pie on mouse over on legends', () => {
+    // Arrange
+    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
 
-  // Act
-  const legend = screen.queryByText('first');
-  expect(legend).toBeDefined();
-  fireEvent.mouseOver(legend!);
+    // Act
+    const legend = screen.queryByText('first');
+    expect(legend).toBeDefined();
+    fireEvent.mouseOver(legend!);
 
-  // Assert
-  const getById = queryAllByAttribute.bind(null, 'id');
-  expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
-  expect(getById(container, /Pie.*?third/i)[0]).toHaveAttribute('opacity', '0.1');
-});
+    // Assert
+    const getById = queryAllByAttribute.bind(null, 'id');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    expect(getById(container, /Pie.*?third/i)[0]).toHaveAttribute('opacity', '0.1');
+  });
 
-test('Should select legend on single mouse click on legends', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
-
-  // Act
-  const legend = screen.queryByText('first');
-  expect(legend).toBeDefined();
-  fireEvent.click(legend!);
-
-  // Assert
-  const getById = queryAllByAttribute.bind(null, 'id');
-  expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
-  const firstLegend = screen.queryByText('first')?.closest('button');
-  expect(firstLegend).toHaveAttribute('aria-selected', 'true');
-  expect(firstLegend).toHaveAttribute('tabIndex', '0');
-});
+  test('Should select legend on single mouse click on legends', () => {
+    // Arrange
+    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
 
-test('Should deselect legend on double mouse click on legends', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
-
-  // Act
-  const legend = screen.queryByText('first');
-  expect(legend).toBeDefined();
-
-  //single click on first legend
-  fireEvent.click(legend!);
-  const getById = queryAllByAttribute.bind(null, 'id');
-  expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
-  const firstLegend = screen.queryByText('first')?.closest('button');
-  expect(firstLegend).toHaveAttribute('aria-selected', 'true');
-  expect(firstLegend).toHaveAttribute('tabIndex', '0');
-  // double click on same first legend
-  fireEvent.click(legend!);
-
-  // Assert
-  expect(firstLegend).toHaveAttribute('aria-selected', 'false');
-});
+    // Act
+    const legend = screen.queryByText('first');
+    expect(legend).toBeDefined();
+    fireEvent.click(legend!);
 
-test('Should show Pies with same opacity on mouse out of legends', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
-
-  // Act
-  const legend = screen.queryByText('first');
-  expect(legend).toBeDefined();
-  fireEvent.mouseOver(legend!);
-  const getById = queryAllByAttribute.bind(null, 'id');
-  expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
-  fireEvent.mouseOut(legend!);
-
-  // Assert
-  expect(getById(container, /Pie.*?first/i)[0]).toHaveAttribute('opacity', '1');
-  expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '1');
-});
+    // Assert
+    const getById = queryAllByAttribute.bind(null, 'id');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    const firstLegend = screen.queryByText('first')?.closest('button');
+    expect(firstLegend).toHaveAttribute('aria-selected', 'true');
+    expect(firstLegend).toHaveAttribute('tabIndex', '0');
+  });
 
-test('Should display correct callout data on mouse move', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />);
+  test('Should deselect legend on double mouse click on legends', () => {
+    // Arrange
+    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
 
-  // Act
-  const getById = queryAllByAttribute.bind(null, 'id');
-  fireEvent.mouseOver(getById(container, /Pie/i)[0]);
-  expect(getById(container, /callout/i)[0]).toHaveTextContent('20,000');
-  fireEvent.mouseLeave(getById(container, /Pie/i)[0]);
-  fireEvent.mouseOver(getById(container, /Pie/i)[1]);
+    // Act
+    const legend = screen.queryByText('first');
+    expect(legend).toBeDefined();
+
+    //single click on first legend
+    fireEvent.click(legend!);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    const firstLegend = screen.queryByText('first')?.closest('button');
+    expect(firstLegend).toHaveAttribute('aria-selected', 'true');
+    expect(firstLegend).toHaveAttribute('tabIndex', '0');
+    // double click on same first legend
+    fireEvent.click(legend!);
 
-  // Assert
-  expect(getById(container, /callout/i)[0]).toHaveTextContent('39,000');
-});
+    // Assert
+    expect(firstLegend).toHaveAttribute('aria-selected', 'false');
+  });
 
-test('Should reflect theme change', () => {
-  // Arrange
-  const { container } = render(
-    <ThemeProvider theme={DarkTheme}>
-      <DonutChart culture={window.navigator.language} data={chartPoints} innerRadius={55} />
-    </ThemeProvider>,
-  );
+  test('Should show Pies with same opacity on mouse out of legends', () => {
+    // Arrange
+    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
 
-  // Assert
-  expect(container).toMatchSnapshot();
-});
+    // Act
+    const legend = screen.queryByText('first');
+    expect(legend).toBeDefined();
+    fireEvent.mouseOver(legend!);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    fireEvent.mouseOut(legend!);
 
-describe('Screen resolution', () => {
-  const originalInnerWidth = global.innerWidth;
-  const originalInnerHeight = global.innerHeight;
-  afterEach(() => {
-    global.innerWidth = originalInnerWidth;
-    global.innerHeight = originalInnerHeight;
-    act(() => {
-      global.dispatchEvent(new Event('resize'));
-    });
+    // Assert
+    expect(getById(container, /Pie.*?first/i)[0]).toHaveAttribute('opacity', '1');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '1');
   });
 
-  test('Should remain unchanged on zoom in', () => {
+  test('Should display correct callout data on mouse move', () => {
     // Arrange
-    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} width={300} height={300} />);
+    const { container } = render(
+      <DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />,
+    );
 
     // Act
-    global.innerWidth = window.innerWidth / 2;
-    global.innerHeight = window.innerHeight / 2;
-    act(() => {
-      global.dispatchEvent(new Event('resize'));
-    });
+    const getById = queryAllByAttribute.bind(null, 'id');
+    fireEvent.mouseOver(getById(container, /Pie/i)[0]);
+    expect(getById(container, /callout/i)[0]).toHaveTextContent('20,000');
+    fireEvent.mouseLeave(getById(container, /Pie/i)[0]);
+    fireEvent.mouseOver(getById(container, /Pie/i)[1]);
 
     // Assert
-    expect(container).toMatchSnapshot();
+    expect(getById(container, /callout/i)[0]).toHaveTextContent('39,000');
   });
 
-  test('Should remain unchanged on zoom out', () => {
+  test('Should change value inside donut with the legend value on mouseOver legend ', () => {
+    // Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like
+    // getComputedTextLength() which will otherwise lead to a crash if mounted
+    jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '1000');
     // Arrange
-    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} width={300} height={300} />);
+    const { container } = render(
+      <DonutChart data={chartPoints} innerRadius={55} hideLegend={false} valueInsideDonut={1000} />,
+    );
+    const getByClass = queryAllByAttribute.bind(null, 'class');
 
     // Act
-    global.innerWidth = window.innerWidth * 2;
-    global.innerHeight = window.innerHeight * 2;
-    act(() => {
-      global.dispatchEvent(new Event('resize'));
-    });
+    fireEvent.mouseOver(screen.getByText('first'));
 
     // Assert
-    expect(container).toMatchSnapshot();
+    expect(getByClass(container, /insideDonutString.*?/)[0].textContent).toBe('20,000');
   });
-});
 
-test('Should change value inside donut with the legend value on mouseOver legend ', () => {
-  // Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like
-  // getComputedTextLength() which will otherwise lead to a crash if mounted
-  jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '1000');
-  // Arrange
-  const { container } = render(
-    <DonutChart data={chartPoints} innerRadius={55} hideLegend={false} valueInsideDonut={1000} />,
-  );
-  const getByClass = queryAllByAttribute.bind(null, 'class');
-
-  // Act
-  fireEvent.mouseOver(screen.getByText('first'));
-
-  // Assert
-  expect(getByClass(container, /insideDonutString.*?/)[0].textContent).toBe('20,000');
+  test('Should reflect theme change', () => {
+    // Arrange
+    const { container } = render(
+      <ThemeProvider theme={DarkTheme}>
+        <DonutChart culture={window.navigator.language} data={chartPoints} innerRadius={55} />
+      </ThemeProvider>,
+    );
+
+    // Assert
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
index 13bef1411e049..530573c78d09e 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -336,7 +336,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone3"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -660,7 +660,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -890,7 +890,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone3"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1214,7 +1214,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone21"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1252,7 +1252,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
                   }
               d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
               data-is-focusable={true}
-              id="_Pie_20first20000"
+              id="_Pie_25first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1294,7 +1294,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
                   }
               d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
               data-is-focusable={true}
-              id="_Pie_20second39000"
+              id="_Pie_25second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1336,7 +1336,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
                   }
               d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
               data-is-focusable={true}
-              id="_Pie_20third45000"
+              id="_Pie_25third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1415,7 +1415,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone22"
+              data-focuszone-id="FocusZone28"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1736,7 +1736,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone25"
+    data-focuszone-id="FocusZone32"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1774,7 +1774,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   }
               d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
               data-is-focusable={true}
-              id="_Pie_24first20000"
+              id="_Pie_30first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1816,7 +1816,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   }
               d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
               data-is-focusable={true}
-              id="_Pie_24second39000"
+              id="_Pie_30second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1858,7 +1858,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   }
               d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
               data-is-focusable={true}
-              id="_Pie_24third45000"
+              id="_Pie_30third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1937,7 +1937,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone26"
+              data-focuszone-id="FocusZone33"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2258,7 +2258,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2411,7 +2411,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone3"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2732,7 +2732,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone13"
+    data-focuszone-id="FocusZone17"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2770,7 +2770,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   }
               d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12first20000"
+              id="_Pie_15first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2796,7 +2796,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   }
               d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12second39000"
+              id="_Pie_15second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2822,7 +2822,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   }
               d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12third45000"
+              id="_Pie_15third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2885,7 +2885,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone14"
+              data-focuszone-id="FocusZone18"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3206,7 +3206,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone8"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3244,7 +3244,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
                   }
               d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
               data-is-focusable={true}
-              id="_Pie_5first20000"
+              id="_Pie_6first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3270,7 +3270,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
                   }
               d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
               data-is-focusable={true}
-              id="_Pie_5second39000"
+              id="_Pie_6second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3296,7 +3296,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
                   }
               d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
               data-is-focusable={true}
-              id="_Pie_5third45000"
+              id="_Pie_6third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3340,7 +3340,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone12"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3378,7 +3378,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
                   }
               d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
               data-is-focusable={true}
-              id="_Pie_8first20000"
+              id="_Pie_10first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3404,7 +3404,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
                   }
               d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
               data-is-focusable={true}
-              id="_Pie_8second39000"
+              id="_Pie_10second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3430,7 +3430,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
                   }
               d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
               data-is-focusable={true}
-              id="_Pie_8third45000"
+              id="_Pie_10third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3493,7 +3493,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone13"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3814,7 +3814,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone22"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3852,7 +3852,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   }
               d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
               data-is-focusable={true}
-              id="_Pie_16first20000"
+              id="_Pie_20first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3878,7 +3878,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   }
               d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
               data-is-focusable={true}
-              id="_Pie_16second39000"
+              id="_Pie_20second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3904,7 +3904,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   }
               d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
               data-is-focusable={true}
-              id="_Pie_16third45000"
+              id="_Pie_20third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3985,7 +3985,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone18"
+              data-focuszone-id="FocusZone23"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
index df446ed4c626b..551ad53f5f2a7 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
@@ -1,630 +1,577 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DonutChart - mouse events Should render callout correctly on mouseover 1`] = `
-<div
-  className=
-      ms-DonutChart
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100%;
-        width: 100%;
-      }
-  onMouseLeave={[Function]}
->
-  <div
-    className=
-        ms-FocusZone
-        &:focus {
-          outline: none;
-        }
-    data-focuszone-id="FocusZone2"
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onMouseDownCapture={[Function]}
-  >
-    <div>
-      <svg
-        aria-label="Stacked Bar chart example"
-        className=
-
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: -40px;
-              overflow: visible;
-              width: 0px;
-            }
-      >
-        <g
-          transform="translate(0, -20)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-        </g>
-      </svg>
-    </div>
-  </div>
+exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
+<div>
   <div
-    className=
-        ms-Callout-container
+    class=
+        ms-DonutChart
         {
-          position: relative;
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-items: center;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          width: 100%;
         }
   >
     <div
-      className=
-          ms-Callout
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            border-radius: 2px;
-            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
-            box-sizing: border-box;
-            display: flex;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            outline: transparent;
-            position: absolute;
-            z-index: 1000000;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-            border-color: WindowText;
-            border-style: solid;
-            border-width: 1px;
-          }
-          &::-moz-focus-inner {
-            border: 0px;
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
           }
-      data-is-focusable={false}
-      hidden={false}
-      id="callout0"
-      style={
-        Object {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
-        }
-      }
-      tabIndex={-1}
+      data-focuszone-id="FocusZone3"
     >
-      <div
-        className=
-            ms-Callout-main
-            {
-              background-color: #ffffff;
-              border-radius: 2px;
-              overflow-x: hidden;
-              overflow-y: auto;
-              position: relative;
-              width: 100%;
-            }
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        role="text"
-        style={
-          Object {
-            "maxHeight": "100%",
-            "outline": "none",
-            "overflowY": undefined,
-          }
-        }
-      >
-        <div
-          className=
+      <div>
+        <svg
+          aria-label="Stacked Bar chart example"
+          class=
 
               {
-                background-blend-mode: normal, luminosity;
-                background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
-                padding-left: 16px;
-                padding-right: 16px;
-                padding-top: 11px;
+                alignment-adjust: center;
+                box-sizing: content-box;
+                display: block;
+                height: -40px;
+                overflow: visible;
+                width: 0px;
               }
+          focusable="false"
+          viewBox="0 0 0 0"
         >
-          <div
-            className=
-
-                {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
-                }
+          <g
+            transform="translate(0, -20)"
           >
-            <div
-              className=
+            <g>
+              <path
+                aria-label="2020/04/30, 20000."
+                class=
 
-                  {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 12px;
-                    font-weight: 400;
-                    line-height: 16px;
-                    opacity: 0.8;
-                  }
-            >
-               
-            </div>
-          </div>
+                    {
+                      cursor: default;
+                      fill: #E5E5E5;
+                      outline: transparent;
+                      stroke: #ffffff;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
+                data-is-focusable="true"
+                id="_Pie_1first20000"
+                opacity="1"
+                role="img"
+                tabindex="0"
+              />
+            </g>
+            <g>
+              <path
+                aria-label="2020/04/20, 39000."
+                class=
+
+                    {
+                      cursor: default;
+                      fill: #0078D4;
+                      outline: transparent;
+                      stroke: #ffffff;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
+                data-is-focusable="true"
+                id="_Pie_1second39000"
+                opacity="1"
+                role="img"
+                tabindex="-1"
+              />
+            </g>
+            <g>
+              <path
+                aria-label="2020/04/25, 45000."
+                class=
+
+                    {
+                      cursor: default;
+                      fill: #DADADA;
+                      outline: transparent;
+                      stroke: #ffffff;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
+                data-is-focusable="true"
+                id="_Pie_1third45000"
+                opacity="1"
+                role="img"
+                tabindex="-1"
+              />
+            </g>
+          </g>
+        </svg>
+      </div>
+    </div>
+    <div
+      class=
+          ms-Callout-container
+          {
+            position: relative;
+          }
+      style="visibility: hidden;"
+    >
+      <div
+        class=
+            ms-Callout
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              border-radius: 2px;
+              box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+              box-sizing: border-box;
+              display: flex;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              outline: transparent;
+              position: absolute;
+              z-index: 1000000;
+            }
+            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+              border-color: WindowText;
+              border-style: solid;
+              border-width: 1px;
+            }
+            &::-moz-focus-inner {
+              border: 0px;
+            }
+        data-is-focusable="false"
+        hidden=""
+        id="callout0"
+        style="opacity: 0; filter: opacity(0); pointer-events: none;"
+        tabindex="-1"
+      >
+        <div
+          class=
+              ms-Callout-main
+              {
+                background-color: #ffffff;
+                border-radius: 2px;
+                overflow-x: hidden;
+                overflow-y: auto;
+                position: relative;
+                width: 100%;
+              }
+          role="text"
+          style="outline: none; max-height: 100%;"
+        >
           <div
-            className=""
+            class=
+
+                {
+                  background-blend-mode: normal, luminosity;
+                  background-color: #ffffff;
+                  display: grid;
+                  overflow: hidden;
+                  padding-bottom: 10px;
+                  padding-left: 16px;
+                  padding-right: 16px;
+                  padding-top: 11px;
+                }
           >
             <div
-              className=
+              class=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #E5E5E5;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: unset;
-                    padding-left: 8px;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
                   }
             >
               <div
-                className=
+                class=
 
                     {
                       -moz-osx-font-smoothing: grayscale;
                       -webkit-font-smoothing: antialiased;
-                      color: #323130;
+                      color: #605e5c;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                       font-size: 12px;
                       font-weight: 400;
                       line-height: 16px;
+                      opacity: 0.8;
                     }
               >
-                2020/04/30
+                 
               </div>
+            </div>
+            <div
+              class=""
+            >
               <div
-                className=
+                class=
 
                     {
                       -moz-osx-font-smoothing: grayscale;
                       -webkit-font-smoothing: antialiased;
-                      color: #E5E5E5;
+                      border-left: 4px solid #E5E5E5;
+                      color: #323130;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                       font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      font-weight: 600;
+                      line-height: 22px;
+                      margin-top: unset;
+                      padding-left: 8px;
                     }
               >
-                20,000
+                <div
+                  class=
+
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #323130;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 12px;
+                        font-weight: 400;
+                        line-height: 16px;
+                      }
+                >
+                  2020/04/30
+                </div>
+                <div
+                  class=
+
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #E5E5E5;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 28px;
+                        font-weight: bold;
+                        line-height: 36px;
+                      }
+                >
+                  20,000
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className=
-
-        {
-          padding-top: 16px;
-          width: 0px;
-        }
-  >
     <div
-      className=
+      class=
 
           {
-            align-items: center;
-            margin-bottom: 0;
-            margin-left: -8px;
-            margin-right: 0;
-            margin-top: -8px;
-            white-space: nowrap;
-            width: 100%;
+            padding-top: 16px;
+            width: 0px;
           }
     >
-      <div>
-        <div
-          style={
-            Object {
-              "position": "relative",
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
             }
-          }
-        >
+      >
+        <div>
           <div
-            data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
+            style="position: relative;"
           >
             <div
-              aria-label="Legends"
-              aria-multiselectable={false}
-              className=
-                  ms-FocusZone
-                  &:focus {
-                    outline: none;
-                  }
-              data-focuszone-id="FocusZone3"
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onMouseDownCapture={[Function]}
-              role="listbox"
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
             >
               <div
-                className=
-                    ms-OverflowSet
-                    {
-                      display: flex;
-                      flex-wrap: wrap;
-                      justify-content: center;
-                      position: relative;
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
                     }
-                role="group"
+                data-focuszone-id="FocusZone4"
+                role="listbox"
               >
                 <div
-                  className=
-                      ms-OverflowSet-item
+                  class=
+                      ms-OverflowSet
                       {
-                        display: inherit;
-                        flex-shrink: 0;
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: center;
+                        position: relative;
                       }
-                  key="0"
-                  role="none"
+                  role="group"
                 >
-                  <button
-                    aria-label="first"
-                    aria-posinset={1}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
+                  <div
+                    class=
+                        ms-OverflowSet-item
                         {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
+                          display: inherit;
+                          flex-shrink: 0;
                         }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
+                    role="none"
                   >
-                    <div
-                      className=
+                    <button
+                      aria-label="first"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
 
                           {
-                            background-color: #E5E5E5;
-                            border-color: #E5E5E5;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                            opacity: ;
+                          &::-moz-focus-inner {
+                            border: 0;
                           }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
                           }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
                     >
-                      first
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  key="1"
-                  role="none"
-                >
-                  <button
-                    aria-label="second"
-                    aria-posinset={2}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
+                      <div
+                        class=
 
+                            {
+                              background-color: #E5E5E5;
+                              border-color: #E5E5E5;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        first
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    class=
+                        ms-OverflowSet-item
                         {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
+                          display: inherit;
+                          flex-shrink: 0;
                         }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
+                    role="none"
                   >
-                    <div
-                      className=
+                    <button
+                      aria-label="second"
+                      aria-posinset="2"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
 
                           {
-                            background-color: #0078D4;
-                            border-color: #0078D4;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #0078D4, #0078D4);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
                           }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="-1"
                     >
-                      second
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  key="2"
-                  role="none"
-                >
-                  <button
-                    aria-label="third"
-                    aria-posinset={3}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
+                      <div
+                        class=
+
+                            {
+                              background-color: #0078D4;
+                              border-color: #0078D4;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #0078D4, #0078D4);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
 
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        second
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    class=
+                        ms-OverflowSet-item
                         {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
+                          display: inherit;
+                          flex-shrink: 0;
                         }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
+                    role="none"
                   >
-                    <div
-                      className=
+                    <button
+                      aria-label="third"
+                      aria-posinset="3"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
 
                           {
-                            background-color: #DADADA;
-                            border-color: #DADADA;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #DADADA, #DADADA);
-                            opacity: ;
+                          &::-moz-focus-inner {
+                            border: 0;
                           }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
                           }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="-1"
                     >
-                      third
-                    </div>
-                  </button>
+                      <div
+                        class=
+
+                            {
+                              background-color: #DADADA;
+                              border-color: #DADADA;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #DADADA, #DADADA);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        third
+                      </div>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -636,1071 +583,447 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
 </div>
 `;
 
-exports[`DonutChart - mouse events Should render customized callout on mouseover 1`] = `
-<div
-  className=
-      ms-DonutChart
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100%;
-        width: 100%;
-      }
-  onMouseLeave={[Function]}
->
+exports[`Donut chart interactions Should reflect theme change 1`] = `
+<div>
   <div
-    className=
-        ms-FocusZone
-        &:focus {
-          outline: none;
-        }
-    data-focuszone-id="FocusZone2"
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onMouseDownCapture={[Function]}
-  >
-    <div>
-      <svg
-        aria-label="Stacked Bar chart example"
-        className=
-
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: -40px;
-              overflow: visible;
-              width: 0px;
-            }
-      >
-        <g
-          transform="translate(0, -20)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+    class=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-        </g>
-      </svg>
-    </div>
-  </div>
-  <div
-    className=
-        ms-Callout-container
         {
-          position: relative;
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          background: #1b1a19;
+          color: #f3f2f1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
         }
   >
     <div
-      className=
-          ms-Callout
+      class=
+          ms-DonutChart
           {
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
-            border-radius: 2px;
-            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
-            box-sizing: border-box;
+            align-items: center;
             display: flex;
+            flex-direction: column;
             font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 14px;
             font-weight: 400;
-            outline: transparent;
-            position: absolute;
-            z-index: 1000000;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-            border-color: WindowText;
-            border-style: solid;
-            border-width: 1px;
-          }
-          &::-moz-focus-inner {
-            border: 0px;
+            height: 100%;
+            width: 100%;
           }
-      data-is-focusable={false}
-      hidden={false}
-      id="callout0"
-      style={
-        Object {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
-        }
-      }
-      tabIndex={-1}
     >
       <div
-        className=
-            ms-Callout-main
-            {
-              background-color: #ffffff;
-              border-radius: 2px;
-              overflow-x: hidden;
-              overflow-y: auto;
-              position: relative;
-              width: 100%;
+        class=
+            ms-FocusZone
+            &:focus {
+              outline: none;
             }
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        role="text"
-        style={
-          Object {
-            "maxHeight": "100%",
-            "outline": "none",
-            "overflowY": undefined,
-          }
-        }
+        data-focuszone-id="FocusZone6"
       >
         <div>
-          <pre>
-            {
-  "legend": "first",
-  "data": 20000,
-  "color": "#E5E5E5",
-  "xAxisCalloutData": "2020/04/30"
-}
-          </pre>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-
-        {
-          padding-top: 16px;
-          width: 0px;
-        }
-  >
-    <div
-      className=
+          <svg
+            aria-label="Stacked Bar chart example"
+            class=
 
-          {
-            align-items: center;
-            margin-bottom: 0;
-            margin-left: -8px;
-            margin-right: 0;
-            margin-top: -8px;
-            white-space: nowrap;
-            width: 100%;
-          }
-    >
-      <div>
-        <div
-          style={
-            Object {
-              "position": "relative",
-            }
-          }
-        >
-          <div
-            data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
+                {
+                  alignment-adjust: center;
+                  box-sizing: content-box;
+                  display: block;
+                  height: -40px;
+                  overflow: visible;
+                  width: 0px;
+                }
+            focusable="false"
+            viewBox="0 0 0 0"
           >
-            <div
-              aria-label="Legends"
-              aria-multiselectable={false}
-              className=
-                  ms-FocusZone
-                  &:focus {
-                    outline: none;
-                  }
-              data-focuszone-id="FocusZone3"
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onMouseDownCapture={[Function]}
-              role="listbox"
+            <g
+              transform="translate(0, -20)"
             >
-              <div
-                className=
-                    ms-OverflowSet
-                    {
-                      display: flex;
-                      flex-wrap: wrap;
-                      justify-content: center;
-                      position: relative;
-                    }
-                role="group"
-              >
-                <div
-                  className=
-                      ms-OverflowSet-item
+              <g>
+                <path
+                  aria-label="2020/04/30, 20000."
+                  class=
+
                       {
-                        display: inherit;
-                        flex-shrink: 0;
+                        cursor: default;
+                        fill: #E5E5E5;
+                        outline: transparent;
+                        stroke: #ffffff;
                       }
-                  key="0"
-                  role="none"
-                >
-                  <button
-                    aria-label="first"
-                    aria-posinset={1}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                  d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
+                  data-is-focusable="true"
+                  id="_Pie_4first20000"
+                  opacity="1"
+                  role="img"
+                  tabindex="0"
+                />
+              </g>
+              <g>
+                <path
+                  aria-label="2020/04/20, 39000."
+                  class=
 
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
+                      {
+                        cursor: default;
+                        fill: #0078D4;
+                        outline: transparent;
+                        stroke: #ffffff;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                  d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
+                  data-is-focusable="true"
+                  id="_Pie_4second39000"
+                  opacity="1"
+                  role="img"
+                  tabindex="-1"
+                />
+              </g>
+              <g>
+                <path
+                  aria-label="2020/04/25, 45000."
+                  class=
 
-                          {
-                            background-color: #E5E5E5;
-                            border-color: #E5E5E5;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
+                      {
+                        cursor: default;
+                        fill: #DADADA;
+                        outline: transparent;
+                        stroke: #ffffff;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                  d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
+                  data-is-focusable="true"
+                  id="_Pie_4third45000"
+                  opacity="1"
+                  role="img"
+                  tabindex="-1"
+                />
+              </g>
+            </g>
+          </svg>
+        </div>
+      </div>
+      <span
+        class="ms-layer"
+      />
+      <div
+        class=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      first
-                    </div>
-                  </button>
-                </div>
+            {
+              padding-top: 16px;
+              width: 0px;
+            }
+      >
+        <div
+          class=
+
+              {
+                align-items: center;
+                margin-bottom: 0;
+                margin-left: -8px;
+                margin-right: 0;
+                margin-top: -8px;
+                white-space: nowrap;
+                width: 100%;
+              }
+        >
+          <div>
+            <div
+              style="position: relative;"
+            >
+              <div
+                data-automation-id="visibleContent"
+                style="position: fixed; visibility: hidden;"
+              >
                 <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
+                  aria-label="Legends"
+                  aria-multiselectable="false"
+                  class=
+                      ms-FocusZone
+                      &:focus {
+                        outline: none;
                       }
-                  key="1"
-                  role="none"
+                  data-focuszone-id="FocusZone7"
+                  role="listbox"
                 >
-                  <button
-                    aria-label="second"
-                    aria-posinset={2}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
+                  <div
+                    class=
+                        ms-OverflowSet
                         {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
                           display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
+                          flex-wrap: wrap;
+                          justify-content: center;
                           position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
                         }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
+                    role="group"
                   >
                     <div
-                      className=
-
+                      class=
+                          ms-OverflowSet-item
                           {
-                            background-color: #0078D4;
-                            border-color: #0078D4;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #0078D4, #0078D4);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      second
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  key="2"
-                  role="none"
-                >
-                  <button
-                    aria-label="third"
-                    aria-posinset={3}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
-
-                          {
-                            background-color: #DADADA;
-                            border-color: #DADADA;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #DADADA, #DADADA);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      third
-                    </div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DonutChart snapShot testing Should render arc labels 1`] = `
-<div
-  className=
-      ms-DonutChart
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100%;
-        width: 100%;
-      }
-  onMouseLeave={[Function]}
->
-  <div
-    className=
-        ms-FocusZone
-        &:focus {
-          outline: none;
-        }
-    data-focuszone-id="FocusZone21"
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onMouseDownCapture={[Function]}
-  >
-    <div>
-      <svg
-        aria-label="Stacked Bar chart example"
-        className=
-
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
-      >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_20first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="auto"
-              textAnchor="start"
-              x={35.43557344375781}
-              y={-50.87553571916512}
-            >
-              20.0k
-            </text>
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_20second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="hanging"
-              textAnchor="start"
-              x={42.16983494620299}
-              y={45.45002772947447}
-            >
-              39.0k
-            </text>
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_20third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="auto"
-              textAnchor="end"
-              x={-60.58001193073337}
-              y={-13.19326170710649}
-            >
-              45.0k
-            </text>
-          </g>
-        </g>
-      </svg>
-    </div>
-  </div>
-  <span
-    className="ms-layer"
-  />
-  <div
-    className=
-
-        {
-          padding-top: 16px;
-          width: 200px;
-        }
-  >
-    <div
-      className=
-
-          {
-            align-items: center;
-            margin-bottom: 0;
-            margin-left: -8px;
-            margin-right: 0;
-            margin-top: -8px;
-            white-space: nowrap;
-            width: 100%;
-          }
-    >
-      <div>
-        <div
-          style={
-            Object {
-              "position": "relative",
-            }
-          }
-        >
-          <div
-            data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
-          >
-            <div
-              aria-label="Legends"
-              aria-multiselectable={false}
-              className=
-                  ms-FocusZone
-                  &:focus {
-                    outline: none;
-                  }
-              data-focuszone-id="FocusZone22"
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onMouseDownCapture={[Function]}
-              role="listbox"
-            >
-              <div
-                className=
-                    ms-OverflowSet
-                    {
-                      display: flex;
-                      flex-wrap: wrap;
-                      justify-content: center;
-                      position: relative;
-                    }
-                role="group"
-              >
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  role="none"
-                >
-                  <button
-                    aria-label="first"
-                    aria-posinset={1}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
-
-                          {
-                            background-color: #E5E5E5;
-                            border-color: #E5E5E5;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
+                            display: inherit;
+                            flex-shrink: 0;
                           }
+                      role="none"
                     >
-                      first
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  role="none"
-                >
-                  <button
-                    aria-label="second"
-                    aria-posinset={2}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
+                      <button
+                        aria-label="first"
+                        aria-posinset="1"
+                        aria-selected="false"
+                        aria-setsize="3"
+                        class=
 
-                          {
-                            background-color: #0078D4;
-                            border-color: #0078D4;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #0078D4, #0078D4);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
+                            {
+                              align-items: center;
+                              background: none;
+                              border: none;
+                              cursor: pointer;
+                              display: flex;
+                              outline: transparent;
+                              padding-bottom: 8px;
+                              padding-left: 8px;
+                              padding-right: 8px;
+                              padding-top: 8px;
+                              position: relative;
+                              text-transform: capitalize;
+                            }
+                            &::-moz-focus-inner {
+                              border: 0;
+                            }
+                            .ms-Fabric--isFocusVisible &:focus:after {
+                              border: 1px solid transparent;
+                              bottom: 1px;
+                              content: "";
+                              left: 1px;
+                              outline: 1px solid #a19f9d;
+                              position: absolute;
+                              right: 1px;
+                              top: 1px;
+                              z-index: 1;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                              outline-color: #a19f9d;
+                            }
+                        data-is-focusable="true"
+                        role="option"
+                        tabindex="0"
+                      >
+                        <div
+                          class=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      second
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  role="none"
-                >
-                  <button
-                    aria-label="third"
-                    aria-posinset={3}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
+                              {
+                                background-color: #E5E5E5;
+                                border-color: #E5E5E5;
+                                border: 1px solid;
+                                content: ;
+                                height: 12px;
+                                margin-right: 8px;
+                                width: 12px;
+                              }
+                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                                content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                                opacity: ;
+                              }
+                        />
+                        <div
+                          class=
 
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
+                              {
+                                -moz-osx-font-smoothing: grayscale;
+                                -webkit-font-smoothing: antialiased;
+                                color: #f3f2f1;
+                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                                font-size: 12px;
+                                font-weight: 400;
+                                line-height: 16px;
+                                opacity: ;
+                              }
+                        >
+                          first
+                        </div>
+                      </button>
+                    </div>
                     <div
-                      className=
-
+                      class=
+                          ms-OverflowSet-item
                           {
-                            background-color: #DADADA;
-                            border-color: #DADADA;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #DADADA, #DADADA);
-                            opacity: ;
+                            display: inherit;
+                            flex-shrink: 0;
                           }
-                    />
-                    <div
-                      className=
+                      role="none"
+                    >
+                      <button
+                        aria-label="second"
+                        aria-posinset="2"
+                        aria-selected="false"
+                        aria-setsize="3"
+                        class=
+
+                            {
+                              align-items: center;
+                              background: none;
+                              border: none;
+                              cursor: pointer;
+                              display: flex;
+                              outline: transparent;
+                              padding-bottom: 8px;
+                              padding-left: 8px;
+                              padding-right: 8px;
+                              padding-top: 8px;
+                              position: relative;
+                              text-transform: capitalize;
+                            }
+                            &::-moz-focus-inner {
+                              border: 0;
+                            }
+                            .ms-Fabric--isFocusVisible &:focus:after {
+                              border: 1px solid transparent;
+                              bottom: 1px;
+                              content: "";
+                              left: 1px;
+                              outline: 1px solid #a19f9d;
+                              position: absolute;
+                              right: 1px;
+                              top: 1px;
+                              z-index: 1;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                              outline-color: #a19f9d;
+                            }
+                        data-is-focusable="true"
+                        role="option"
+                        tabindex="-1"
+                      >
+                        <div
+                          class=
+
+                              {
+                                background-color: #0078D4;
+                                border-color: #0078D4;
+                                border: 1px solid;
+                                content: ;
+                                height: 12px;
+                                margin-right: 8px;
+                                width: 12px;
+                              }
+                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                                content: linear-gradient(to right, #0078D4, #0078D4);
+                                opacity: ;
+                              }
+                        />
+                        <div
+                          class=
 
+                              {
+                                -moz-osx-font-smoothing: grayscale;
+                                -webkit-font-smoothing: antialiased;
+                                color: #f3f2f1;
+                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                                font-size: 12px;
+                                font-weight: 400;
+                                line-height: 16px;
+                                opacity: ;
+                              }
+                        >
+                          second
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      class=
+                          ms-OverflowSet-item
                           {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
+                            display: inherit;
+                            flex-shrink: 0;
                           }
+                      role="none"
                     >
-                      third
+                      <button
+                        aria-label="third"
+                        aria-posinset="3"
+                        aria-selected="false"
+                        aria-setsize="3"
+                        class=
+
+                            {
+                              align-items: center;
+                              background: none;
+                              border: none;
+                              cursor: pointer;
+                              display: flex;
+                              outline: transparent;
+                              padding-bottom: 8px;
+                              padding-left: 8px;
+                              padding-right: 8px;
+                              padding-top: 8px;
+                              position: relative;
+                              text-transform: capitalize;
+                            }
+                            &::-moz-focus-inner {
+                              border: 0;
+                            }
+                            .ms-Fabric--isFocusVisible &:focus:after {
+                              border: 1px solid transparent;
+                              bottom: 1px;
+                              content: "";
+                              left: 1px;
+                              outline: 1px solid #a19f9d;
+                              position: absolute;
+                              right: 1px;
+                              top: 1px;
+                              z-index: 1;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                              outline-color: #a19f9d;
+                            }
+                        data-is-focusable="true"
+                        role="option"
+                        tabindex="-1"
+                      >
+                        <div
+                          class=
+
+                              {
+                                background-color: #DADADA;
+                                border-color: #DADADA;
+                                border: 1px solid;
+                                content: ;
+                                height: 12px;
+                                margin-right: 8px;
+                                width: 12px;
+                              }
+                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                                content: linear-gradient(to right, #DADADA, #DADADA);
+                                opacity: ;
+                              }
+                        />
+                        <div
+                          class=
+
+                              {
+                                -moz-osx-font-smoothing: grayscale;
+                                -webkit-font-smoothing: antialiased;
+                                color: #f3f2f1;
+                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                                font-size: 12px;
+                                font-weight: 400;
+                                line-height: 16px;
+                                opacity: ;
+                              }
+                        >
+                          third
+                        </div>
+                      </button>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -1712,7 +1035,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
 </div>
 `;
 
-exports[`DonutChart snapShot testing Should render arc labels in percentage format 1`] = `
+exports[`DonutChart - mouse events Should render callout correctly on mouseover 1`] = `
 <div
   className=
       ms-DonutChart
@@ -1736,7 +1059,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone25"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1750,13 +1073,13 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               alignment-adjust: center;
               box-sizing: content-box;
               display: block;
-              height: 200px;
+              height: -40px;
               overflow: visible;
-              width: 200px;
+              width: 0px;
             }
       >
         <g
-          transform="translate(100, 100)"
+          transform="translate(0, -20)"
         >
           <g>
             <path
@@ -1772,9 +1095,9 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
+              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
               data-is-focusable={true}
-              id="_Pie_24first20000"
+              id="_Pie_1first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1783,22 +1106,6 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               opacity={1}
               role="img"
             />
-            <text
-              aria-hidden={true}
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="auto"
-              textAnchor="start"
-              x={35.43557344375781}
-              y={-50.87553571916512}
-            >
-              19%
-            </text>
           </g>
           <g>
             <path
@@ -1814,33 +1121,17 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
+              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
               data-is-focusable={true}
-              id="_Pie_24second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="hanging"
-              textAnchor="start"
-              x={42.16983494620299}
-              y={45.45002772947447}
-            >
-              38%
-            </text>
+              id="_Pie_1second39000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
           </g>
           <g>
             <path
@@ -1856,9 +1147,9 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
+              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
               data-is-focusable={true}
-              id="_Pie_24third45000"
+              id="_Pie_1third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1867,36 +1158,179 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               opacity={1}
               role="img"
             />
-            <text
-              aria-hidden={true}
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={false}
+      hidden={false}
+      id="callout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                display: grid;
+                overflow: hidden;
+                padding-bottom: 10px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 11px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                }
+          >
+            <div
               className=
 
                   {
-                    fill: #323130;
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #605e5c;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                     font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: 0.8;
+                  }
+            >
+               
+            </div>
+          </div>
+          <div
+            className=""
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    border-left: 4px solid #E5E5E5;
+                    color: #323130;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 28px;
                     font-weight: 600;
+                    line-height: 22px;
+                    margin-top: unset;
+                    padding-left: 8px;
                   }
-              dominantBaseline="auto"
-              textAnchor="end"
-              x={-60.58001193073337}
-              y={-13.19326170710649}
             >
-              43%
-            </text>
-          </g>
-        </g>
-      </svg>
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                    }
+              >
+                2020/04/30
+              </div>
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #E5E5E5;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 28px;
+                      font-weight: bold;
+                      line-height: 36px;
+                    }
+              >
+                20,000
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
-  <span
-    className="ms-layer"
-  />
   <div
     className=
 
         {
           padding-top: 16px;
-          width: 200px;
+          width: 0px;
         }
   >
     <div
@@ -1937,7 +1371,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone26"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1961,6 +1395,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -2051,6 +1486,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="1"
                   role="none"
                 >
                   <button
@@ -2141,6 +1577,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="2"
                   role="none"
                 >
                   <button
@@ -2234,7 +1671,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
 </div>
 `;
 
-exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
+exports[`DonutChart - mouse events Should render customized callout on mouseover 1`] = `
 <div
   className=
       ms-DonutChart
@@ -2258,7 +1695,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2272,13 +1709,13 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
               alignment-adjust: center;
               box-sizing: content-box;
               display: block;
-              height: 200px;
+              height: -40px;
               overflow: visible;
-              width: 200px;
+              width: 0px;
             }
       >
         <g
-          transform="translate(100, 100)"
+          transform="translate(0, -20)"
         >
           <g>
             <path
@@ -2294,7 +1731,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M1.141,-99.993A100,100,0,0,1,93.397,-35.736L51.182,-20.134A55,55,0,0,0,1.141,-54.988Z"
+              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
               data-is-focusable={true}
               id="_Pie_1first20000"
               onBlur={[Function]}
@@ -2320,7 +1757,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M94.188,-33.595A100,100,0,0,1,-40.544,91.412L-21.828,50.483A55,55,0,0,0,51.974,-17.993Z"
+              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
               data-is-focusable={true}
               id="_Pie_1second39000"
               onBlur={[Function]}
@@ -2346,7 +1783,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M-42.619,90.463A100,100,0,0,1,-1.141,-99.993L-1.141,-54.988A55,55,0,0,0,-23.904,49.534Z"
+              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
               data-is-focusable={true}
               id="_Pie_1third45000"
               onBlur={[Function]}
@@ -2362,15 +1799,92 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
       </svg>
     </div>
   </div>
-  <span
-    className="ms-layer"
-  />
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={false}
+      hidden={false}
+      id="callout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "legend": "first",
+  "data": 20000,
+  "color": "#E5E5E5",
+  "xAxisCalloutData": "2020/04/30"
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     className=
 
         {
           padding-top: 16px;
-          width: 200px;
+          width: 0px;
         }
   >
     <div
@@ -2411,7 +1925,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone3"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2435,6 +1949,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -2525,6 +2040,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="1"
                   role="none"
                 >
                   <button
@@ -2615,6 +2131,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="2"
                   role="none"
                 >
                   <button
@@ -2708,7 +2225,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
 </div>
 `;
 
-exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+exports[`DonutChart snapShot testing Should render arc labels 1`] = `
 <div
   className=
       ms-DonutChart
@@ -2732,7 +2249,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone13"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2768,9 +2285,9 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12first20000"
+              id="_Pie_25first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2779,6 +2296,22 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
               opacity={1}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="auto"
+              textAnchor="start"
+              x={35.43557344375781}
+              y={-50.87553571916512}
+            >
+              20.0k
+            </text>
           </g>
           <g>
             <path
@@ -2794,9 +2327,9 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12second39000"
+              id="_Pie_25second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2805,6 +2338,22 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
               opacity={1}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="hanging"
+              textAnchor="start"
+              x={42.16983494620299}
+              y={45.45002772947447}
+            >
+              39.0k
+            </text>
           </g>
           <g>
             <path
@@ -2820,9 +2369,9 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12third45000"
+              id="_Pie_25third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2831,6 +2380,22 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
               opacity={1}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="auto"
+              textAnchor="end"
+              x={-60.58001193073337}
+              y={-13.19326170710649}
+            >
+              45.0k
+            </text>
           </g>
         </g>
       </svg>
@@ -2885,7 +2450,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone14"
+              data-focuszone-id="FocusZone28"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3182,7 +2747,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
 </div>
 `;
 
-exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
+exports[`DonutChart snapShot testing Should render arc labels in percentage format 1`] = `
 <div
   className=
       ms-DonutChart
@@ -3206,7 +2771,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone32"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3242,9 +2807,9 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
               data-is-focusable={true}
-              id="_Pie_5first20000"
+              id="_Pie_30first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3253,50 +2818,40 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
               opacity={1}
               role="img"
             />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
+            <text
+              aria-hidden={true}
               className=
 
                   {
-                    cursor: default;
-                    fill: #0078D4;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
                   }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_5second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
+              dominantBaseline="auto"
+              textAnchor="start"
+              x={35.43557344375781}
+              y={-50.87553571916512}
+            >
+              19%
+            </text>
           </g>
           <g>
             <path
-              aria-label="2020/04/25, 45000."
+              aria-label="2020/04/20, 39000."
               className=
 
                   {
                     cursor: default;
-                    fill: #DADADA;
+                    fill: #0078D4;
                     outline: transparent;
                     stroke: #ffffff;
                   }
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
               data-is-focusable={true}
-              id="_Pie_5third45000"
+              id="_Pie_30second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3305,106 +2860,40 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
               opacity={1}
               role="img"
             />
-          </g>
-        </g>
-      </svg>
-    </div>
-  </div>
-  <span
-    className="ms-layer"
-  />
-</div>
-`;
-
-exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
-<div
-  className=
-      ms-DonutChart
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100%;
-        width: 100%;
-      }
-  onMouseLeave={[Function]}
->
-  <div
-    className=
-        ms-FocusZone
-        &:focus {
-          outline: none;
-        }
-    data-focuszone-id="FocusZone9"
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onMouseDownCapture={[Function]}
-  >
-    <div>
-      <svg
-        aria-label="Stacked Bar chart example"
-        className=
-
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
-      >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
+            <text
+              aria-hidden={true}
               className=
 
                   {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
                   }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_8first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
+              dominantBaseline="hanging"
+              textAnchor="start"
+              x={42.16983494620299}
+              y={45.45002772947447}
+            >
+              38%
+            </text>
           </g>
           <g>
             <path
-              aria-label="2020/04/20, 39000."
+              aria-label="2020/04/25, 45000."
               className=
 
                   {
                     cursor: default;
-                    fill: #0078D4;
+                    fill: #DADADA;
                     outline: transparent;
                     stroke: #ffffff;
                   }
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
               data-is-focusable={true}
-              id="_Pie_8second39000"
+              id="_Pie_30third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3413,32 +2902,22 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity={1}
               role="img"
             />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
+            <text
+              aria-hidden={true}
               className=
 
                   {
-                    cursor: default;
-                    fill: #DADADA;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
                   }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_8third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
+              dominantBaseline="auto"
+              textAnchor="end"
+              x={-60.58001193073337}
+              y={-13.19326170710649}
+            >
+              43%
+            </text>
           </g>
         </g>
       </svg>
@@ -3493,7 +2972,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone33"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3790,7 +3269,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
 </div>
 `;
 
-exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
+exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
 <div
   className=
       ms-DonutChart
@@ -3814,7 +3293,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3850,9 +3329,9 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M1.141,-99.993A100,100,0,0,1,93.397,-35.736L51.182,-20.134A55,55,0,0,0,1.141,-54.988Z"
               data-is-focusable={true}
-              id="_Pie_16first20000"
+              id="_Pie_1first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3876,9 +3355,9 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M94.188,-33.595A100,100,0,0,1,-40.544,91.412L-21.828,50.483A55,55,0,0,0,51.974,-17.993Z"
               data-is-focusable={true}
-              id="_Pie_16second39000"
+              id="_Pie_1second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3902,9 +3381,9 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M-42.619,90.463A100,100,0,0,1,-1.141,-99.993L-1.141,-54.988A55,55,0,0,0,-23.904,49.534Z"
               data-is-focusable={true}
-              id="_Pie_16third45000"
+              id="_Pie_1third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3914,24 +3393,6 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
               role="img"
             />
           </g>
-          <text
-            className=
-
-                {
-                  fill: #323130;
-                  font-size: 24px;
-                  font-weight: 600;
-                }
-                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                  fill: rgb(179, 179, 179);
-                }
-            data-is-focusable={true}
-            dominantBaseline="middle"
-            textAnchor="middle"
-            y={5}
-          >
-            1,000
-          </text>
         </g>
       </svg>
     </div>
@@ -3961,227 +3422,47 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
           }
     >
       <div>
-        <div
-          style={
-            Object {
-              "position": "relative",
-            }
-          }
-        >
-          <div
-            data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
-          >
-            <div
-              aria-label="Legends"
-              aria-multiselectable={false}
-              className=
-                  ms-FocusZone
-                  &:focus {
-                    outline: none;
-                  }
-              data-focuszone-id="FocusZone18"
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onMouseDownCapture={[Function]}
-              role="listbox"
-            >
-              <div
-                className=
-                    ms-OverflowSet
-                    {
-                      display: flex;
-                      flex-wrap: wrap;
-                      justify-content: center;
-                      position: relative;
-                    }
-                role="group"
-              >
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  role="none"
-                >
-                  <button
-                    aria-label="first"
-                    aria-posinset={1}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
-
-                          {
-                            background-color: #E5E5E5;
-                            border-color: #E5E5E5;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      first
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  role="none"
-                >
-                  <button
-                    aria-label="second"
-                    aria-posinset={2}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
-
-                          {
-                            background-color: #0078D4;
-                            border-color: #0078D4;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #0078D4, #0078D4);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      second
-                    </div>
-                  </button>
-                </div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone4"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: center;
+                      position: relative;
+                    }
+                role="group"
+              >
                 <div
                   className=
                       ms-OverflowSet-item
@@ -4192,8 +3473,8 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   role="none"
                 >
                   <button
-                    aria-label="third"
-                    aria-posinset={3}
+                    aria-label="first"
+                    aria-posinset={1}
                     aria-selected={false}
                     aria-setsize={3}
                     className=
@@ -4230,485 +3511,227 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                           outline-color: #605e5c;
                         }
                     data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
-
-                          {
-                            background-color: #DADADA;
-                            border-color: #DADADA;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #DADADA, #DADADA);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      third
-                    </div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
-<div>
-  <div
-    class=
-        ms-DonutChart
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-items: center;
-          display: flex;
-          flex-direction: column;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 100%;
-          width: 100%;
-        }
-  >
-    <div
-      class=
-          ms-FocusZone
-          &:focus {
-            outline: none;
-          }
-      data-focuszone-id="FocusZone46"
-    >
-      <div>
-        <svg
-          aria-label="Stacked Bar chart example"
-          class=
-
-              {
-                alignment-adjust: center;
-                box-sizing: content-box;
-                display: block;
-                height: 260px;
-                overflow: visible;
-                width: 300px;
-              }
-          focusable="false"
-          viewBox="0 0 0 260"
-        >
-          <g
-            transform="translate(150, 130)"
-          >
-            <g>
-              <path
-                aria-label="2020/04/30, 20000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #E5E5E5;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M1.412,-129.992A130,130,0,0,1,121.441,-46.39L51.083,-20.385A55,55,0,0,0,1.412,-54.982Z"
-                data-is-focusable="true"
-                id="_Pie_45first20000"
-                opacity="1"
-                role="img"
-                tabindex="0"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/20, 39000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #0078D4;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M122.42,-43.742A130,130,0,0,1,-52.773,118.807L-21.58,50.59A55,55,0,0,0,52.061,-17.737Z"
-                data-is-focusable="true"
-                id="_Pie_45second39000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/25, 45000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #DADADA;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-55.34,117.633A130,130,0,0,1,-1.412,-129.992L-1.412,-54.982A55,55,0,0,0,-24.147,49.416Z"
-                data-is-focusable="true"
-                id="_Pie_45third45000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-          </g>
-        </svg>
-      </div>
-    </div>
-    <span
-      class="ms-layer"
-    />
-    <div
-      class=
-
-          {
-            padding-top: 16px;
-            width: 300px;
-          }
-    >
-      <div
-        class=
-
-            {
-              align-items: center;
-              margin-bottom: 0;
-              margin-left: -8px;
-              margin-right: 0;
-              margin-top: -8px;
-              white-space: nowrap;
-              width: 100%;
-            }
-      >
-        <div>
-          <div
-            style="position: relative;"
-          >
-            <div
-              data-automation-id="visibleContent"
-              style="position: fixed; visibility: hidden;"
-            >
-              <div
-                aria-label="Legends"
-                aria-multiselectable="false"
-                class=
-                    ms-FocusZone
-                    &:focus {
-                      outline: none;
-                    }
-                data-focuszone-id="FocusZone47"
-                role="listbox"
-              >
-                <div
-                  class=
-                      ms-OverflowSet
-                      {
-                        display: flex;
-                        flex-wrap: wrap;
-                        justify-content: center;
-                        position: relative;
-                      }
-                  role="group"
-                >
-                  <div
-                    class=
-                        ms-OverflowSet-item
-                        {
-                          display: inherit;
-                          flex-shrink: 0;
-                        }
-                    role="none"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="first"
-                      aria-posinset="1"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #E5E5E5;
+                            border-color: #E5E5E5;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="0"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #E5E5E5;
-                              border-color: #E5E5E5;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                      first
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="second"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        first
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="second"
-                      aria-posinset="2"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #0078D4;
+                            border-color: #0078D4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078D4, #0078D4);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #0078D4;
-                              border-color: #0078D4;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #0078D4, #0078D4);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                      second
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="third"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        second
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="third"
-                      aria-posinset="3"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #DADADA;
+                            border-color: #DADADA;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #DADADA, #DADADA);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #DADADA;
-                              border-color: #DADADA;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #DADADA, #DADADA);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
-
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        third
-                      </div>
-                    </button>
-                  </div>
+                      third
+                    </div>
+                  </button>
                 </div>
               </div>
             </div>
@@ -4717,436 +3740,472 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
       </div>
     </div>
   </div>
-</div>
-`;
-
-exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
-<div>
+</div>
+`;
+
+exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+      ms-DonutChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone17"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <div>
+      <svg
+        aria-label="Stacked Bar chart example"
+        className=
+
+            {
+              alignment-adjust: center;
+              box-sizing: content-box;
+              display: block;
+              height: 200px;
+              overflow: visible;
+              width: 200px;
+            }
+      >
+        <g
+          transform="translate(100, 100)"
+        >
+          <g>
+            <path
+              aria-label="2020/04/30, 20000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #E5E5E5;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_15first20000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/20, 39000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #0078D4;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_15second39000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/25, 45000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #DADADA;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_15third45000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
   <div
-    class=
-        ms-DonutChart
+    className=
+
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-items: center;
-          display: flex;
-          flex-direction: column;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 100%;
-          width: 100%;
+          padding-top: 16px;
+          width: 200px;
         }
   >
     <div
-      class=
-          ms-FocusZone
-          &:focus {
-            outline: none;
-          }
-      data-focuszone-id="FocusZone50"
-    >
-      <div>
-        <svg
-          aria-label="Stacked Bar chart example"
-          class=
-
-              {
-                alignment-adjust: center;
-                box-sizing: content-box;
-                display: block;
-                height: 260px;
-                overflow: visible;
-                width: 300px;
-              }
-          focusable="false"
-          viewBox="0 0 0 260"
-        >
-          <g
-            transform="translate(150, 130)"
-          >
-            <g>
-              <path
-                aria-label="2020/04/30, 20000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #E5E5E5;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M1.412,-129.992A130,130,0,0,1,121.441,-46.39L51.083,-20.385A55,55,0,0,0,1.412,-54.982Z"
-                data-is-focusable="true"
-                id="_Pie_49first20000"
-                opacity="1"
-                role="img"
-                tabindex="0"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/20, 39000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #0078D4;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M122.42,-43.742A130,130,0,0,1,-52.773,118.807L-21.58,50.59A55,55,0,0,0,52.061,-17.737Z"
-                data-is-focusable="true"
-                id="_Pie_49second39000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/25, 45000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #DADADA;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-55.34,117.633A130,130,0,0,1,-1.412,-129.992L-1.412,-54.982A55,55,0,0,0,-24.147,49.416Z"
-                data-is-focusable="true"
-                id="_Pie_49third45000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-          </g>
-        </svg>
-      </div>
-    </div>
-    <span
-      class="ms-layer"
-    />
-    <div
-      class=
+      className=
 
           {
-            padding-top: 16px;
-            width: 300px;
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
           }
     >
-      <div
-        class=
-
-            {
-              align-items: center;
-              margin-bottom: 0;
-              margin-left: -8px;
-              margin-right: 0;
-              margin-top: -8px;
-              white-space: nowrap;
-              width: 100%;
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
             }
-      >
-        <div>
+          }
+        >
           <div
-            style="position: relative;"
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
           >
             <div
-              data-automation-id="visibleContent"
-              style="position: fixed; visibility: hidden;"
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone18"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
             >
               <div
-                aria-label="Legends"
-                aria-multiselectable="false"
-                class=
-                    ms-FocusZone
-                    &:focus {
-                      outline: none;
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: center;
+                      position: relative;
                     }
-                data-focuszone-id="FocusZone51"
-                role="listbox"
+                role="group"
               >
                 <div
-                  class=
-                      ms-OverflowSet
+                  className=
+                      ms-OverflowSet-item
                       {
-                        display: flex;
-                        flex-wrap: wrap;
-                        justify-content: center;
-                        position: relative;
+                        display: inherit;
+                        flex-shrink: 0;
                       }
-                  role="group"
+                  role="none"
                 >
-                  <div
-                    class=
-                        ms-OverflowSet-item
+                  <button
+                    aria-label="first"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
                         }
-                    role="none"
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="first"
-                      aria-posinset="1"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #E5E5E5;
+                            border-color: #E5E5E5;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="0"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #E5E5E5;
-                              border-color: #E5E5E5;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                      first
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="second"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        first
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="second"
-                      aria-posinset="2"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #0078D4;
+                            border-color: #0078D4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078D4, #0078D4);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #0078D4;
-                              border-color: #0078D4;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #0078D4, #0078D4);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                      second
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="third"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        second
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="third"
-                      aria-posinset="3"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #DADADA;
+                            border-color: #DADADA;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #DADADA, #DADADA);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #DADADA;
-                              border-color: #DADADA;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #DADADA, #DADADA);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
-
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        third
-                      </div>
-                    </button>
-                  </div>
+                      third
+                    </div>
+                  </button>
                 </div>
               </div>
             </div>
@@ -5158,1030 +4217,1095 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
 </div>
 `;
 
-exports[`Should hide callout on mouse leave 1`] = `
-<div>
+exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
+<div
+  className=
+      ms-DonutChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone8"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <div>
+      <svg
+        aria-label="Stacked Bar chart example"
+        className=
+
+            {
+              alignment-adjust: center;
+              box-sizing: content-box;
+              display: block;
+              height: 200px;
+              overflow: visible;
+              width: 200px;
+            }
+      >
+        <g
+          transform="translate(100, 100)"
+        >
+          <g>
+            <path
+              aria-label="2020/04/30, 20000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #E5E5E5;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_6first20000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/20, 39000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #0078D4;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_6second39000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/25, 45000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #DADADA;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_6third45000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+      ms-DonutChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+>
   <div
-    class=
-        ms-DonutChart
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-items: center;
-          display: flex;
-          flex-direction: column;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 100%;
-          width: 100%;
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
         }
+    data-focuszone-id="FocusZone12"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
   >
-    <div
-      class=
-          ms-FocusZone
-          &:focus {
-            outline: none;
-          }
-      data-focuszone-id="FocusZone7"
-    >
-      <div>
-        <svg
-          aria-label="Stacked Bar chart example"
-          class=
-
-              {
-                alignment-adjust: center;
-                box-sizing: content-box;
-                display: block;
-                height: -40px;
-                overflow: visible;
-                width: 0px;
-              }
-          focusable="false"
-          viewBox="0 0 0 0"
-        >
-          <g
-            transform="translate(0, -20)"
-          >
-            <g>
-              <path
-                aria-label="2020/04/30, 20000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #E5E5E5;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-                data-is-focusable="true"
-                id="_Pie_6first20000"
-                opacity="1"
-                role="img"
-                tabindex="0"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/20, 39000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #0078D4;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-                data-is-focusable="true"
-                id="_Pie_6second39000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/25, 45000."
-                class=
+    <div>
+      <svg
+        aria-label="Stacked Bar chart example"
+        className=
 
-                    {
-                      cursor: default;
-                      fill: #DADADA;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-                data-is-focusable="true"
-                id="_Pie_6third45000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-          </g>
-        </svg>
-      </div>
-    </div>
-    <div
-      class=
-          ms-Callout-container
-          {
-            position: relative;
-          }
-      style="visibility: hidden;"
-    >
-      <div
-        class=
-            ms-Callout
             {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              border-radius: 2px;
-              box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
-              box-sizing: border-box;
-              display: flex;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              outline: transparent;
-              position: absolute;
-              z-index: 1000000;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-              border-color: WindowText;
-              border-style: solid;
-              border-width: 1px;
-            }
-            &::-moz-focus-inner {
-              border: 0px;
+              alignment-adjust: center;
+              box-sizing: content-box;
+              display: block;
+              height: 200px;
+              overflow: visible;
+              width: 200px;
             }
-        data-is-focusable="false"
-        hidden=""
-        id="callout5"
-        style="opacity: 0; filter: opacity(0); pointer-events: none;"
-        tabindex="-1"
       >
-        <div
-          class=
-              ms-Callout-main
-              {
-                background-color: #ffffff;
-                border-radius: 2px;
-                overflow-x: hidden;
-                overflow-y: auto;
-                position: relative;
-                width: 100%;
-              }
-          role="text"
-          style="outline: none; max-height: 100%;"
+        <g
+          transform="translate(100, 100)"
         >
-          <div
-            class=
+          <g>
+            <path
+              aria-label="2020/04/30, 20000."
+              className=
 
-                {
-                  background-blend-mode: normal, luminosity;
-                  background-color: #ffffff;
-                  display: grid;
-                  overflow: hidden;
-                  padding-bottom: 10px;
-                  padding-left: 16px;
-                  padding-right: 16px;
-                  padding-top: 11px;
-                }
-          >
-            <div
-              class=
+                  {
+                    cursor: default;
+                    fill: #E5E5E5;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_10first20000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/20, 39000."
+              className=
 
                   {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-between;
+                    cursor: default;
+                    fill: #0078D4;
+                    outline: transparent;
+                    stroke: #ffffff;
                   }
-            >
-              <div
-                class=
-
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 12px;
-                      font-weight: 400;
-                      line-height: 16px;
-                      opacity: 0.8;
-                    }
-              >
-                 
-              </div>
-            </div>
-            <div
-              class=""
-            >
-              <div
-                class=
-
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      border-left: 4px solid #E5E5E5;
-                      color: #323130;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: 600;
-                      line-height: 22px;
-                      margin-top: unset;
-                      padding-left: 8px;
-                    }
-              >
-                <div
-                  class=
-
-                      {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        color: #323130;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 12px;
-                        font-weight: 400;
-                        line-height: 16px;
-                      }
-                >
-                  2020/04/30
-                </div>
-                <div
-                  class=
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_10second39000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/25, 45000."
+              className=
 
-                      {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        color: #E5E5E5;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 28px;
-                        font-weight: bold;
-                        line-height: 36px;
-                      }
-                >
-                  20,000
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+                  {
+                    cursor: default;
+                    fill: #DADADA;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_10third45000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+        </g>
+      </svg>
     </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+  <div
+    className=
+
+        {
+          padding-top: 16px;
+          width: 200px;
+        }
+  >
     <div
-      class=
+      className=
 
           {
-            padding-top: 16px;
-            width: 0px;
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
           }
     >
-      <div
-        class=
-
-            {
-              align-items: center;
-              margin-bottom: 0;
-              margin-left: -8px;
-              margin-right: 0;
-              margin-top: -8px;
-              white-space: nowrap;
-              width: 100%;
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
             }
-      >
-        <div>
+          }
+        >
           <div
-            style="position: relative;"
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
           >
             <div
-              data-automation-id="visibleContent"
-              style="position: fixed; visibility: hidden;"
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone13"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
             >
               <div
-                aria-label="Legends"
-                aria-multiselectable="false"
-                class=
-                    ms-FocusZone
-                    &:focus {
-                      outline: none;
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: center;
+                      position: relative;
                     }
-                data-focuszone-id="FocusZone8"
-                role="listbox"
+                role="group"
               >
                 <div
-                  class=
-                      ms-OverflowSet
+                  className=
+                      ms-OverflowSet-item
                       {
-                        display: flex;
-                        flex-wrap: wrap;
-                        justify-content: center;
-                        position: relative;
+                        display: inherit;
+                        flex-shrink: 0;
                       }
-                  role="group"
+                  role="none"
                 >
-                  <div
-                    class=
-                        ms-OverflowSet-item
+                  <button
+                    aria-label="first"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
                         }
-                    role="none"
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="first"
-                      aria-posinset="1"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #E5E5E5;
+                            border-color: #E5E5E5;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="0"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #E5E5E5;
-                              border-color: #E5E5E5;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                      first
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="second"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        first
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="second"
-                      aria-posinset="2"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
-                          }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                            background-color: #0078D4;
+                            border-color: #0078D4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078D4, #0078D4);
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
-                    >
-                      <div
-                        class=
+                    />
+                    <div
+                      className=
 
-                            {
-                              background-color: #0078D4;
-                              border-color: #0078D4;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #0078D4, #0078D4);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      second
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="third"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        second
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="third"
-                      aria-posinset="3"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #DADADA;
+                            border-color: #DADADA;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #DADADA, #DADADA);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
                     >
-                      <div
-                        class=
+                      third
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
+<div
+  className=
+      ms-DonutChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone22"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <div>
+      <svg
+        aria-label="Stacked Bar chart example"
+        className=
+
+            {
+              alignment-adjust: center;
+              box-sizing: content-box;
+              display: block;
+              height: 200px;
+              overflow: visible;
+              width: 200px;
+            }
+      >
+        <g
+          transform="translate(100, 100)"
+        >
+          <g>
+            <path
+              aria-label="2020/04/30, 20000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #E5E5E5;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_20first20000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/20, 39000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #0078D4;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_20second39000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/25, 45000."
+              className=
 
-                            {
-                              background-color: #DADADA;
-                              border-color: #DADADA;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #DADADA, #DADADA);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                  {
+                    cursor: default;
+                    fill: #DADADA;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_20third45000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <text
+            className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        third
-                      </div>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+                {
+                  fill: #323130;
+                  font-size: 24px;
+                  font-weight: 600;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                  fill: rgb(179, 179, 179);
+                }
+            data-is-focusable={true}
+            dominantBaseline="middle"
+            textAnchor="middle"
+            y={5}
+          >
+            1,000
+          </text>
+        </g>
+      </svg>
     </div>
   </div>
-</div>
-`;
-
-exports[`Should reflect theme change 1`] = `
-<div>
+  <span
+    className="ms-layer"
+  />
   <div
-    class=
+    className=
 
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          background: #1b1a19;
-          color: #f3f2f1;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
+          padding-top: 16px;
+          width: 200px;
         }
   >
     <div
-      class=
-          ms-DonutChart
+      className=
+
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
             align-items: center;
-            display: flex;
-            flex-direction: column;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 100%;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
             width: 100%;
           }
     >
-      <div
-        class=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone42"
-      >
-        <div>
-          <svg
-            aria-label="Stacked Bar chart example"
-            class=
-
-                {
-                  alignment-adjust: center;
-                  box-sizing: content-box;
-                  display: block;
-                  height: -40px;
-                  overflow: visible;
-                  width: 0px;
-                }
-            focusable="false"
-            viewBox="0 0 0 0"
-          >
-            <g
-              transform="translate(0, -20)"
-            >
-              <g>
-                <path
-                  aria-label="2020/04/30, 20000."
-                  class=
-
-                      {
-                        cursor: default;
-                        fill: #E5E5E5;
-                        outline: transparent;
-                        stroke: #ffffff;
-                      }
-                      &::-moz-focus-inner {
-                        border: 0;
-                      }
-                  d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-                  data-is-focusable="true"
-                  id="_Pie_41first20000"
-                  opacity="1"
-                  role="img"
-                  tabindex="0"
-                />
-              </g>
-              <g>
-                <path
-                  aria-label="2020/04/20, 39000."
-                  class=
-
-                      {
-                        cursor: default;
-                        fill: #0078D4;
-                        outline: transparent;
-                        stroke: #ffffff;
-                      }
-                      &::-moz-focus-inner {
-                        border: 0;
-                      }
-                  d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-                  data-is-focusable="true"
-                  id="_Pie_41second39000"
-                  opacity="1"
-                  role="img"
-                  tabindex="-1"
-                />
-              </g>
-              <g>
-                <path
-                  aria-label="2020/04/25, 45000."
-                  class=
-
-                      {
-                        cursor: default;
-                        fill: #DADADA;
-                        outline: transparent;
-                        stroke: #ffffff;
-                      }
-                      &::-moz-focus-inner {
-                        border: 0;
-                      }
-                  d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-                  data-is-focusable="true"
-                  id="_Pie_41third45000"
-                  opacity="1"
-                  role="img"
-                  tabindex="-1"
-                />
-              </g>
-            </g>
-          </svg>
-        </div>
-      </div>
-      <span
-        class="ms-layer"
-      />
-      <div
-        class=
-
-            {
-              padding-top: 16px;
-              width: 0px;
-            }
-      >
+      <div>
         <div
-          class=
-
-              {
-                align-items: center;
-                margin-bottom: 0;
-                margin-left: -8px;
-                margin-right: 0;
-                margin-top: -8px;
-                white-space: nowrap;
-                width: 100%;
-              }
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
         >
-          <div>
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
             <div
-              style="position: relative;"
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone23"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
             >
               <div
-                data-automation-id="visibleContent"
-                style="position: fixed; visibility: hidden;"
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: center;
+                      position: relative;
+                    }
+                role="group"
               >
                 <div
-                  aria-label="Legends"
-                  aria-multiselectable="false"
-                  class=
-                      ms-FocusZone
-                      &:focus {
-                        outline: none;
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
                       }
-                  data-focuszone-id="FocusZone43"
-                  role="listbox"
+                  role="none"
                 >
-                  <div
-                    class=
-                        ms-OverflowSet
+                  <button
+                    aria-label="first"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
                         {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
                           display: flex;
-                          flex-wrap: wrap;
-                          justify-content: center;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
                           position: relative;
+                          text-transform: capitalize;
                         }
-                    role="group"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
                     <div
-                      class=
-                          ms-OverflowSet-item
+                      className=
+
                           {
-                            display: inherit;
-                            flex-shrink: 0;
+                            background-color: #E5E5E5;
+                            border-color: #E5E5E5;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                      role="none"
-                    >
-                      <button
-                        aria-label="first"
-                        aria-posinset="1"
-                        aria-selected="false"
-                        aria-setsize="3"
-                        class=
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
 
-                            {
-                              align-items: center;
-                              background: none;
-                              border: none;
-                              cursor: pointer;
-                              display: flex;
-                              outline: transparent;
-                              padding-bottom: 8px;
-                              padding-left: 8px;
-                              padding-right: 8px;
-                              padding-top: 8px;
-                              position: relative;
-                              text-transform: capitalize;
-                            }
-                            &::-moz-focus-inner {
-                              border: 0;
-                            }
-                            .ms-Fabric--isFocusVisible &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                        data-is-focusable="true"
-                        role="option"
-                        tabindex="0"
-                      >
-                        <div
-                          class=
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      first
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="second"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                              {
-                                background-color: #E5E5E5;
-                                border-color: #E5E5E5;
-                                border: 1px solid;
-                                content: ;
-                                height: 12px;
-                                margin-right: 8px;
-                                width: 12px;
-                              }
-                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                                content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                                opacity: ;
-                              }
-                        />
-                        <div
-                          class=
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
 
-                              {
-                                -moz-osx-font-smoothing: grayscale;
-                                -webkit-font-smoothing: antialiased;
-                                color: #f3f2f1;
-                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                                font-size: 12px;
-                                font-weight: 400;
-                                line-height: 16px;
-                                opacity: ;
-                              }
-                        >
-                          first
-                        </div>
-                      </button>
-                    </div>
+                          {
+                            background-color: #0078D4;
+                            border-color: #0078D4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078D4, #0078D4);
+                            opacity: ;
+                          }
+                    />
                     <div
-                      class=
-                          ms-OverflowSet-item
+                      className=
+
                           {
-                            display: inherit;
-                            flex-shrink: 0;
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      role="none"
                     >
-                      <button
-                        aria-label="second"
-                        aria-posinset="2"
-                        aria-selected="false"
-                        aria-setsize="3"
-                        class=
-
-                            {
-                              align-items: center;
-                              background: none;
-                              border: none;
-                              cursor: pointer;
-                              display: flex;
-                              outline: transparent;
-                              padding-bottom: 8px;
-                              padding-left: 8px;
-                              padding-right: 8px;
-                              padding-top: 8px;
-                              position: relative;
-                              text-transform: capitalize;
-                            }
-                            &::-moz-focus-inner {
-                              border: 0;
-                            }
-                            .ms-Fabric--isFocusVisible &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                        data-is-focusable="true"
-                        role="option"
-                        tabindex="-1"
-                      >
-                        <div
-                          class=
+                      second
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="third"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                              {
-                                background-color: #0078D4;
-                                border-color: #0078D4;
-                                border: 1px solid;
-                                content: ;
-                                height: 12px;
-                                margin-right: 8px;
-                                width: 12px;
-                              }
-                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                                content: linear-gradient(to right, #0078D4, #0078D4);
-                                opacity: ;
-                              }
-                        />
-                        <div
-                          class=
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
 
-                              {
-                                -moz-osx-font-smoothing: grayscale;
-                                -webkit-font-smoothing: antialiased;
-                                color: #f3f2f1;
-                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                                font-size: 12px;
-                                font-weight: 400;
-                                line-height: 16px;
-                                opacity: ;
-                              }
-                        >
-                          second
-                        </div>
-                      </button>
-                    </div>
+                          {
+                            background-color: #DADADA;
+                            border-color: #DADADA;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #DADADA, #DADADA);
+                            opacity: ;
+                          }
+                    />
                     <div
-                      class=
-                          ms-OverflowSet-item
+                      className=
+
                           {
-                            display: inherit;
-                            flex-shrink: 0;
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      role="none"
                     >
-                      <button
-                        aria-label="third"
-                        aria-posinset="3"
-                        aria-selected="false"
-                        aria-setsize="3"
-                        class=
-
-                            {
-                              align-items: center;
-                              background: none;
-                              border: none;
-                              cursor: pointer;
-                              display: flex;
-                              outline: transparent;
-                              padding-bottom: 8px;
-                              padding-left: 8px;
-                              padding-right: 8px;
-                              padding-top: 8px;
-                              position: relative;
-                              text-transform: capitalize;
-                            }
-                            &::-moz-focus-inner {
-                              border: 0;
-                            }
-                            .ms-Fabric--isFocusVisible &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                        data-is-focusable="true"
-                        role="option"
-                        tabindex="-1"
-                      >
-                        <div
-                          class=
-
-                              {
-                                background-color: #DADADA;
-                                border-color: #DADADA;
-                                border: 1px solid;
-                                content: ;
-                                height: 12px;
-                                margin-right: 8px;
-                                width: 12px;
-                              }
-                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                                content: linear-gradient(to right, #DADADA, #DADADA);
-                                opacity: ;
-                              }
-                        />
-                        <div
-                          class=
-
-                              {
-                                -moz-osx-font-smoothing: grayscale;
-                                -webkit-font-smoothing: antialiased;
-                                color: #f3f2f1;
-                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                                font-size: 12px;
-                                font-weight: 400;
-                                line-height: 16px;
-                                opacity: ;
-                              }
-                        >
-                          third
-                        </div>
-                      </button>
+                      third
                     </div>
-                  </div>
+                  </button>
                 </div>
               </div>
             </div>
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
index 982172e5729a8..5611bc8889648 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
@@ -56,7 +56,6 @@ export interface IGroupedVerticalBarChartState extends IBasestate {
   dataPointCalloutProps?: IGVBarChartSeriesPoint;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
-  emptyChart?: boolean;
 }
 
 export class GroupedVerticalBarChartBase extends React.Component<
@@ -84,6 +83,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
   private _calloutAnchorPoint: IGVBarChartSeriesPoint | null;
   private _barWidth: number;
   private _domainMargin: number;
+  private _emptyChartId: string;
 
   public constructor(props: IGroupedVerticalBarChartProps) {
     super(props);
@@ -100,7 +100,6 @@ export class GroupedVerticalBarChartBase extends React.Component<
       hoverXValue: '',
       calloutLegend: '',
       activeLegend: '',
-      emptyChart: false,
     };
     warnDeprecations(COMPONENT_NAME, props, {
       showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
@@ -113,17 +112,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
     this._calloutId = getId('callout');
     this._tooltipId = getId('GVBCTooltipId_');
     this._domainMargin = MIN_DOMAIN_MARGIN;
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty = !(
-      this.props.data &&
-      this.props.data.length > 0 &&
-      this.props.data.filter((item: IGroupedVerticalBarChartData) => item.series.length).length > 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_GVBC_empty');
   }
 
   public render(): React.ReactNode {
@@ -166,7 +155,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
       tickFormat: this.props.tickFormat!,
     };
 
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <CartesianChart
         {...this.props}
         points={this._datasetForBars}
@@ -196,7 +185,12 @@ export class GroupedVerticalBarChartBase extends React.Component<
         }}
       />
     ) : (
-      <div id={getId('_GVBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
+      <div
+        id={this._emptyChartId}
+        role={'alert'}
+        style={{ opacity: '0' }}
+        aria-label={'Graph has no data to display'}
+      />
     );
   }
 
@@ -595,4 +589,12 @@ export class GroupedVerticalBarChartBase extends React.Component<
       right: this.margins.right! + this._domainMargin,
     };
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.length > 0 &&
+      this.props.data.filter((item: IGroupedVerticalBarChartData) => item.series.length).length > 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
index f47fc308799bb..419bb0fece3e2 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
@@ -38,7 +38,7 @@ function sharedAfterEach() {
   window.requestAnimationFrame = originalRAF;
 }
 
-const chartPoints = [
+export const chartPoints = [
   {
     name: '2000',
     series: [
@@ -87,7 +87,7 @@ const chartPoints = [
   },
 ];
 
-const emptyChartPoints = [
+export const emptyChartPoints = [
   {
     name: 'Empty chart',
     series: [],
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx
new file mode 100644
index 0000000000000..60911e280ad24
--- /dev/null
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { chartPoints, emptyChartPoints } from './GroupedVerticalBarChart.test';
+import { GroupedVerticalBarChart } from './index';
+
+describe('Grouped Vertical Bar chart rendering', () => {
+  test('Should re-render the Grouped Vertical Bar chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<GroupedVerticalBarChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_GVBC_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<GroupedVerticalBarChart data={chartPoints} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_GVBC_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
index 813b0f62f75a7..eccc78c98f254 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -69,7 +69,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -97,7 +97,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -286,7 +286,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -768,7 +768,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -781,7 +781,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -821,7 +821,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -849,7 +849,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -1038,7 +1038,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1440,7 +1440,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1453,7 +1453,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1493,7 +1493,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -1521,7 +1521,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -1716,7 +1716,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2035,7 +2035,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2048,7 +2048,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2088,7 +2088,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -2116,7 +2116,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -2294,7 +2294,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2610,7 +2610,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2623,7 +2623,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2663,7 +2663,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 315)"
       />
       <g
@@ -2691,7 +2691,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -2862,7 +2862,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2875,7 +2875,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2915,7 +2915,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -2943,7 +2943,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -3138,7 +3138,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3457,7 +3457,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3470,7 +3470,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3510,7 +3510,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -3538,7 +3538,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -3733,7 +3733,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4052,7 +4052,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4065,7 +4065,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4105,7 +4105,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -4133,7 +4133,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -4328,7 +4328,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4647,7 +4647,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4660,7 +4660,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4700,7 +4700,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -4728,7 +4728,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -4923,7 +4923,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..3bd8ef6e150d3
--- /dev/null
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
@@ -0,0 +1,5769 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grouped Vertical Bar chart rendering Should re-render the Grouped Vertical Bar chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_GVBC_empty5"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Grouped Vertical Bar chart rendering Should re-render the Grouped Vertical Bar chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    id="chart_6"
+    role="presentation"
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+          {
+            overflow: auto;
+          }
+      data-focuszone-id="FocusZone7"
+    >
+      <svg
+        focusable="false"
+        height="0"
+        style="display: block;"
+        width="0"
+      >
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+                width: 1px;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+          id="xAxisGElementchart_6"
+          transform="translate(0, -35)"
+        />
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+          id="yAxisGElementchart_6"
+          transform="translate(40, 0)"
+        />
+        <g>
+          <g
+            transform="translate(19, 0)"
+          >
+            <rect
+              aria-label="2000. MetaData1, 66."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#0078d4"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="0"
+              width="-9"
+              x="0"
+              y="4.45652173913043"
+            />
+            <rect
+              aria-label="2000. MetaData2, 13."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#00188f"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="-1"
+              width="-9"
+              x="10"
+              y="0"
+            />
+            <rect
+              aria-label="2000. MetaData3, 34."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#00bcf2"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="-1"
+              width="-9"
+              x="20"
+              y="0"
+            />
+          </g>
+          <g
+            transform="translate(-28, 0)"
+          >
+            <rect
+              aria-label="2010. MetaData1, 14."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#0078d4"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="-1"
+              width="-9"
+              x="0"
+              y="0"
+            />
+            <rect
+              aria-label="2010. MetaData2, 90."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#00188f"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="-1"
+              width="-9"
+              x="10"
+              y="18.80434782608696"
+            />
+            <rect
+              aria-label="2010. MetaData3, 33."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#00bcf2"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="-1"
+              width="-9"
+              x="20"
+              y="0"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div
+      class=
+
+          {
+            margin-left: 20px;
+            margin-top: 8px;
+          }
+    >
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
+            }
+      >
+        <div>
+          <div
+            style="position: relative;"
+          >
+            <div
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
+            >
+              <div
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
+                    }
+                data-focuszone-id="FocusZone8"
+                role="listbox"
+              >
+                <div
+                  class=
+                      ms-OverflowSet
+                      {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: unset;
+                        position: relative;
+                      }
+                  role="group"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="MetaData1"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: #0078d4;
+                              border-color: #0078d4;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #0078d4, #0078d4);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        MetaData1
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="MetaData2"
+                      aria-posinset="2"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="-1"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: #00188f;
+                              border-color: #00188f;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #00188f, #00188f);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        MetaData2
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="MetaData3"
+                      aria-posinset="3"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="-1"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: #00bcf2;
+                              border-color: #00bcf2;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #00bcf2, #00bcf2);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        MetaData3
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      class="ms-layer"
+    />
+  </div>
+</div>
+`;
+
+exports[`GroupedVerticalBarChart - mouse events Should render callout correctly on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={false}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                display: grid;
+                overflow: hidden;
+                padding-bottom: 10px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 11px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                }
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #605e5c;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: 0.8;
+                  }
+            >
+               
+            </div>
+          </div>
+          <div
+            className=""
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    border-left: 4px solid #0078d4;
+                    color: #323130;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 28px;
+                    font-weight: 600;
+                    line-height: 22px;
+                    margin-top: unset;
+                    padding-left: 8px;
+                  }
+            >
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #0078d4;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 28px;
+                      font-weight: bold;
+                      line-height: 36px;
+                    }
+              >
+                66
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`GroupedVerticalBarChart - mouse events Should render customized callout on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={false}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "key": "series1",
+  "data": 66,
+  "color": "#0078d4",
+  "legend": "MetaData1"
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChart correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone5"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="MetaData1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                MetaData1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="MetaData2"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                MetaData2
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="2"
+            role="none"
+          >
+            <button
+              aria-label="MetaData3"
+              aria-posinset={3}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00bcf2;
+                      border-color: #00bcf2;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00bcf2, #00bcf2);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                MetaData3
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={350}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 315)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={211.6304347826087}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={103.36956521739131}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={41.68478260869565}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={273.3152173913044}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={109.02173913043478}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={205.97826086956522}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={44.89130434782609}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={270.1086956521739}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={288.5869565217391}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={26.413043478260875}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={105.81521739130434}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={209.18478260869566}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
index 007a2361cafa8..349ecc79b7477 100644
--- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
+++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
@@ -86,11 +86,6 @@ export interface IHeatMapChartState {
    * Accessibility data for callout
    */
   callOutAccessibilityData?: IAccessibilityProps;
-
-  /**
-   * Check for empty chart accessibility
-   */
-  emptyChart?: boolean;
 }
 const getClassNames = classNamesFunction<IHeatMapChartStyleProps, IHeatMapChartStyles>();
 export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatMapChartState> {
@@ -119,6 +114,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
   private _xAxisType: XAxisTypes;
   private _yAxisType: YAxisType;
   private _calloutAnchorPoint: FlattenData | null;
+  private _emptyChartId: string;
   public constructor(props: IHeatMapChartProps) {
     super(props);
     const { x, y } = this._getXandY();
@@ -151,15 +147,8 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       ratio: null,
       descriptionMessage: '',
       calloutId: '',
-      emptyChart: false,
     };
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty: boolean = !(this.props.data && this.props.data.length > 0);
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_HeatMap_empty');
   }
 
   public render(): React.ReactNode {
@@ -199,7 +188,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       }),
       descriptionMessage: this.state.descriptionMessage,
     };
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <CartesianChart
         {...this.props}
         points={data}
@@ -230,7 +219,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       />
     ) : (
       <div
-        id={getId('_HeatMap_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -705,4 +694,8 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       `${xValue}, ${yValue}. ${legend}, ${zValue}.` + (description ? ` ${description}.` : '')
     );
   };
+
+  private _isChartEmpty(): boolean {
+    return !(this.props.data && this.props.data.length > 0);
+  }
 }
diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx
new file mode 100644
index 0000000000000..484a8a314dbd9
--- /dev/null
+++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { HeatMapChart, IHeatMapChartProps } from './index';
+
+const yPoint: string[] = ['p1', 'p2'];
+
+const xPoint: string[] = [new Date('2020-03-03').toISOString(), new Date('2020-03-04').toISOString()];
+export const HeatMapData: IHeatMapChartProps['data'] = [
+  {
+    value: 100,
+    legend: 'Execllent (0-200)',
+    data: [
+      {
+        x: xPoint[0],
+        y: yPoint[0],
+        value: 50,
+        rectText: 50,
+        ratio: [50, 2391],
+        descriptionMessage: 'a good day to start with in Texas with best air quality',
+      },
+      {
+        x: xPoint[1],
+        y: yPoint[1],
+        value: 25,
+        rectText: 25,
+        ratio: [25, 2479],
+        descriptionMessage: `Due to unexpected heavy rain, all the pollutants are washed
+        off and people of alaska are hoping for more of this days`,
+      },
+    ],
+  },
+];
+
+describe('HeatMap chart rendering', () => {
+  test('Should re-render the HeatMap chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(
+      <HeatMapChart
+        data={[]}
+        domainValuesForColorScale={[0, 600]}
+        rangeValuesForColorScale={['lightblue', 'darkblue']}
+      />,
+    );
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_HeatMap_empty/i)).toHaveLength(1);
+    // Act
+    rerender(
+      <HeatMapChart
+        data={HeatMapData}
+        domainValuesForColorScale={[0, 600]}
+        rangeValuesForColorScale={['lightblue', 'darkblue']}
+      />,
+    );
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_HeatMap_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
index 92ee1fa981fcf..78a1e9731e086 100644
--- a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -69,7 +69,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 275)"
       />
       <g
@@ -97,7 +97,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -215,7 +215,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -573,7 +573,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -586,7 +586,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -626,7 +626,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 275)"
       />
       <g
@@ -654,7 +654,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -778,7 +778,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -915,7 +915,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -928,7 +928,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -968,7 +968,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 275)"
       />
       <g
@@ -996,7 +996,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -1120,7 +1120,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1348,7 +1348,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1361,7 +1361,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1401,7 +1401,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 315)"
       />
       <g
@@ -1429,7 +1429,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -1529,7 +1529,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1542,7 +1542,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1582,7 +1582,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 275)"
       />
       <g
@@ -1610,7 +1610,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -1734,7 +1734,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1871,7 +1871,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1884,7 +1884,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1924,7 +1924,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 275)"
       />
       <g
@@ -1952,7 +1952,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -2076,7 +2076,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..e5a964a816edd
--- /dev/null
+++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
@@ -0,0 +1,324 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HeatMap chart rendering Should re-render the HeatMap chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_HeatMap_empty0"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`HeatMap chart rendering Should re-render the HeatMap chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    id="chart_1"
+    role="presentation"
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+          {
+            overflow: auto;
+          }
+      data-focuszone-id="FocusZone2"
+    >
+      <svg
+        focusable="false"
+        height="0"
+        style="display: block;"
+        width="0"
+      >
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+                width: 1px;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+          id="xAxisGElementchart_1"
+          transform="translate(0, -35)"
+        />
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+          id="yAxisGElementchart_1"
+          transform="translate(40, 0)"
+        />
+        <g
+          aria-label="2020-03-04T00:00:00.000Z, p2. Execllent (0-200), 25/2479. Due to unexpected heavy rain, all the pollutants are washed
+        off and people of alaska are hoping for more of this days."
+          data-is-focusable="true"
+          fill-opacity="1"
+          role="img"
+          tabindex="0"
+          transform="translate(-19.405940594059405, -7.227722772277229)"
+        >
+          <rect
+            fill="rgb(166, 207, 226)"
+            height="26.683168316831683"
+            width="29.10891089108911"
+          />
+          <text
+            class=
+
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  fill: #ffffff;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 600;
+                  pointer-events: none;
+                }
+            dominant-baseline="middle"
+            text-anchor="middle"
+            transform="translate(14.554455445544555, 13.341584158415841)"
+          >
+            25
+          </text>
+        </g>
+        <g
+          aria-label="2020-03-03T00:00:00.000Z, p1. Execllent (0-200), 50/2391. a good day to start with in Texas with best air quality."
+          data-is-focusable="true"
+          fill-opacity="1"
+          role="img"
+          tabindex="-1"
+          transform="translate(10.297029702970299, -34.45544554455446)"
+        >
+          <rect
+            fill="rgb(159, 198, 222)"
+            height="26.683168316831683"
+            width="29.10891089108911"
+          />
+          <text
+            class=
+
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  fill: #ffffff;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 600;
+                  pointer-events: none;
+                }
+            dominant-baseline="middle"
+            text-anchor="middle"
+            transform="translate(14.554455445544555, 13.341584158415841)"
+          >
+            50
+          </text>
+        </g>
+      </svg>
+    </div>
+    <div
+      class=
+
+          {
+            margin-left: 20px;
+            margin-top: 8px;
+          }
+    >
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
+            }
+      >
+        <div>
+          <div
+            style="position: relative;"
+          >
+            <div
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
+            >
+              <div
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
+                    }
+                data-focuszone-id="FocusZone3"
+                role="listbox"
+              >
+                <div
+                  class=
+                      ms-OverflowSet
+                      {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: unset;
+                        position: relative;
+                      }
+                  role="group"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="Execllent (0-200)"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="1"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: rgb(144, 180, 215);
+                              border-color: rgb(144, 180, 215);
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, rgb(144, 180, 215), rgb(144, 180, 215));
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        Execllent (0-200)
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      class="ms-layer"
+    />
+  </div>
+</div>
+`;
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index d9dbd7ac34425..c9208fb923533 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -30,7 +30,6 @@ export interface IHorizontalBarChartState {
   yCalloutValue?: string;
   barCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
-  emptyChart?: boolean;
 }
 
 export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {
@@ -41,6 +40,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
   private _refArray: IRefArrayData[];
   private _calloutAnchorPoint: IChartDataPoint | null;
   private _isRTL: boolean = getRTL();
+  private _emptyChartId: string;
 
   constructor(props: IHorizontalBarChartProps) {
     super(props);
@@ -54,19 +54,12 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       color: '',
       xCalloutValue: '',
       yCalloutValue: '',
-      emptyChart: false,
     };
     this._refArray = [];
     this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);
     this._hoverOff = this._hoverOff.bind(this);
     this._calloutId = getId('callout');
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty: boolean = !(this.props.data && this.props.data.length > 0);
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_HBC_empty');
   }
 
   public render(): JSX.Element {
@@ -74,7 +67,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     this._adjustProps();
     const { palette } = theme!;
     let datapoint: number | undefined = 0;
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>
         {data!.map((points: IChartProps, index: number) => {
           if (points.chartData && points.chartData![0] && points.chartData![0].horizontalBarChartdata!.x) {
@@ -171,7 +164,12 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
         </Callout>
       </div>
     ) : (
-      <div id={getId('_HBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
+      <div
+        id={this._emptyChartId}
+        role={'alert'}
+        style={{ opacity: '0' }}
+        aria-label={'Graph has no data to display'}
+      />
     );
   }
 
@@ -393,4 +391,8 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.y}` : 0);
     return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(this.props.data && this.props.data.length > 0);
+  }
 }
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx
index 804d52e7100a3..f8a8a6bd829fb 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx
@@ -28,7 +28,7 @@ function sharedAfterEach() {
   }
 }
 
-const chartPoints: IChartProps[] = [
+export const chartPoints: IChartProps[] = [
   {
     chartTitle: 'one',
     chartData: [
diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index 53719454a4670..495795292a967 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -71,7 +71,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -112,7 +112,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -194,7 +194,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -238,7 +238,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -279,7 +279,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -537,7 +537,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -581,7 +581,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -622,7 +622,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -704,7 +704,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -748,7 +748,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -789,7 +789,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -967,7 +967,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone8"
+        data-focuszone-id="FocusZone10"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1011,7 +1011,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             </span>
             <div
               hidden={true}
-              id="tooltip9"
+              id="tooltip11"
               style={
                 Object {
                   "border": 0,
@@ -1039,7 +1039,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone10"
+        data-focuszone-id="FocusZone12"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1099,7 +1099,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone11"
+        data-focuszone-id="FocusZone13"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1143,7 +1143,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             </span>
             <div
               hidden={true}
-              id="tooltip12"
+              id="tooltip14"
               style={
                 Object {
                   "border": 0,
@@ -1171,7 +1171,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone13"
+        data-focuszone-id="FocusZone15"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1248,7 +1248,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1292,7 +1292,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -1320,7 +1320,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             {
               padding-right: 40px;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1398,7 +1398,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1442,7 +1442,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -1470,7 +1470,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             {
               padding-right: 40px;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
index bedf80dbf3d75..d397eb83b171f 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -138,8 +138,6 @@ export interface ILineChartState extends IBasestate {
   nearestCircleToHighlight: ILineChartDataPoint | null;
 
   activeLine: number | null;
-
-  emptyChart?: boolean;
 }
 
 export class LineChartBase extends React.Component<ILineChartProps, ILineChartState> {
@@ -171,6 +169,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   private _staticHighlightCircle: string;
   private _createLegendsMemoized: (data: LineChartDataWithIndex[]) => JSX.Element;
   private _firstRenderOptimization: boolean;
+  private _emptyChartId: string;
 
   constructor(props: ILineChartProps) {
     super(props);
@@ -187,7 +186,6 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       activePoint: '',
       nearestCircleToHighlight: null,
       activeLine: null,
-      emptyChart: false,
     };
     this._refArray = [];
     this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
@@ -203,6 +201,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     this._staticHighlightCircle = getId('staticHighlightCircle');
     this._createLegendsMemoized = memoizeFunction((data: LineChartDataWithIndex[]) => this._createLegends(data));
     this._firstRenderOptimization = true;
+    this._emptyChartId = getId('_LineChart_empty');
 
     props.eventAnnotationProps &&
       props.eventAnnotationProps.labelHeight &&
@@ -223,18 +222,6 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     }
   }
 
-  public componentDidMount(): void {
-    const isChartEmpty: boolean = !(
-      this.props.data &&
-      this.props.data.lineChartData &&
-      this.props.data.lineChartData.length > 0 &&
-      this.props.data.lineChartData.filter((item: ILineChartPoints) => item.data.length).length > 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
-  }
-
   public render(): JSX.Element {
     const { tickValues, tickFormat, eventAnnotationProps, legendProps, data } = this.props;
     this._points = this._injectIndexPropertyInLineChartData(data.lineChartData);
@@ -272,7 +259,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       tickFormat: tickFormat,
     };
 
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <CartesianChart
         {...this.props}
         chartTitle={data.chartTitle}
@@ -336,7 +323,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       />
     ) : (
       <div
-        id={getId('_LineChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -1389,4 +1376,13 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     const yValue = point.yAxisCalloutData || point.y;
     return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.lineChartData &&
+      this.props.data.lineChartData.length > 0 &&
+      this.props.data.lineChartData.filter((item: ILineChartPoints) => item.data.length).length > 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/LineChart/LineChart.test.tsx b/packages/react-charting/src/components/LineChart/LineChart.test.tsx
index 74db68b8bd3e1..4221fee9fd2d2 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.test.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.test.tsx
@@ -46,12 +46,12 @@ const points: ILineChartPoints[] = [
     color: 'red',
   },
 ];
-const chartPoints = {
+export const chartPoints = {
   chartTitle: 'LineChart',
   lineChartData: points,
 };
 
-const emptyChartPoints = {
+export const emptyChartPoints = {
   chartTitle: 'EmptyLineChart',
   lineChartData: [],
 };
diff --git a/packages/react-charting/src/components/LineChart/LineChartRTL.test.tsx b/packages/react-charting/src/components/LineChart/LineChartRTL.test.tsx
new file mode 100644
index 0000000000000..d1871de807a4c
--- /dev/null
+++ b/packages/react-charting/src/components/LineChart/LineChartRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { chartPoints, emptyChartPoints } from './LineChart.test';
+import { LineChart } from './index';
+
+describe('Line chart rendering', () => {
+  test('Should re-render the Line chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<LineChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_LineChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<LineChart data={chartPoints} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_LineChart_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
index 37500215689d9..5bfa9e1a48c8d 100644
--- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
+++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -70,7 +70,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -98,7 +98,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -214,7 +214,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -540,7 +540,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -553,7 +553,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -594,7 +594,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -622,7 +622,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -738,7 +738,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -962,7 +962,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -975,7 +975,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1016,7 +1016,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -1044,7 +1044,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -1160,7 +1160,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1384,7 +1384,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1397,7 +1397,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1438,7 +1438,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -1466,7 +1466,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -1588,7 +1588,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1725,7 +1725,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1738,7 +1738,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1779,7 +1779,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -1807,7 +1807,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -1929,7 +1929,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2066,7 +2066,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2079,7 +2079,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2120,7 +2120,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -2148,7 +2148,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -2253,7 +2253,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone10"
+        data-focuszone-id="FocusZone11"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2387,7 +2387,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2400,7 +2400,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2441,7 +2441,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 315)"
       />
       <g
@@ -2469,7 +2469,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -2567,7 +2567,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2580,7 +2580,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2621,7 +2621,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -2649,7 +2649,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -2771,7 +2771,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2908,7 +2908,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2921,7 +2921,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2962,7 +2962,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -2990,7 +2990,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -3112,7 +3112,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3249,7 +3249,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3262,7 +3262,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3303,7 +3303,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -3331,7 +3331,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -3453,7 +3453,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3590,7 +3590,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3603,7 +3603,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3644,7 +3644,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -3672,7 +3672,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -3794,7 +3794,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..1e8b8514ba0ac
--- /dev/null
+++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
@@ -0,0 +1,4232 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line chart rendering Should re-render the Line chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_LineChart_empty42"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Line chart rendering Should re-render the Line chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    id="chart_43"
+    role="presentation"
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+          {
+            overflow: auto;
+          }
+      data-focuszone-id="FocusZone44"
+    >
+      <svg
+        aria-label="LineChart"
+        focusable="false"
+        height="0"
+        style="display: block;"
+        width="0"
+      >
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+                width: 1px;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+          id="xAxisGElementchart_43"
+          transform="translate(0, -35)"
+        />
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+          id="yAxisGElementchart_43"
+          transform="translate(40, 0)"
+        />
+        <g>
+          <line
+            id="verticalLine37"
+            stroke="#323130"
+            stroke-dasharray="5,5"
+            visibility="hidden"
+            x1="0"
+            x2="0"
+            y1="0"
+            y2="0"
+          />
+          <g>
+            <line
+              id="lineID35_0_1"
+              opacity="1"
+              stroke="red"
+              stroke-linecap="round"
+              stroke-width="4"
+              x1="40"
+              x2="-20"
+              y1="-0.625"
+              y2="20"
+            />
+            <path
+              aria-label="20. metaData1, 50."
+              d="M39.5 -0.625
+     A0.5 0.5 0 1 0 40.5 -0.625
+     M39.5 -0.625
+     A 0.5 0.5 0 1 1 40.5 -0.625
+     "
+              data-is-focusable="true"
+              fill="red"
+              id="circle34_0_1"
+              opacity="1"
+              role="img"
+              stroke="red"
+              stroke-width="4"
+              tabindex="0"
+            />
+            <path
+              aria-label="40. metaData1, 80."
+              d="M-20.5 20
+     A0.5 0.5 0 1 0 -19.5 20
+     M-20.5 20
+     A 0.5 0.5 0 1 1 -19.5 20
+     "
+              data-is-focusable="true"
+              fill="red"
+              id="circle34_0_11L"
+              opacity="1"
+              role="img"
+              stroke="red"
+              stroke-width="4"
+              tabindex="-1"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div
+      class=
+
+          {
+            margin-left: 20px;
+            margin-top: 8px;
+          }
+    >
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
+            }
+      >
+        <div>
+          <div
+            style="position: relative;"
+          >
+            <div
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
+            >
+              <div
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
+                    }
+                data-focuszone-id="FocusZone45"
+                role="listbox"
+              >
+                <div
+                  class=
+                      ms-OverflowSet
+                      {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: unset;
+                        position: relative;
+                      }
+                  role="group"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="metaData1"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="1"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: red;
+                              border-color: red;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, red, red);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        metaData1
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      class="ms-layer"
+    />
+  </div>
+</div>
+`;
+
+exports[`LineChart - mouse events Should render callout correctly on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M34.5 115.625
+     A5.5 5.5 0 1 0 45.5 115.625
+     M34.5 115.625
+     A 5.5 5.5 0 1 1 45.5 115.625
+     "
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcircle0_0_1"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                display: grid;
+                overflow: hidden;
+                padding-bottom: 10px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 11px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                }
+            style={Object {}}
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #605e5c;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: 0.8;
+                  }
+              data-is-focusable={false}
+              role="text"
+            >
+              20
+            </div>
+          </div>
+          <div
+            style={Object {}}
+          >
+            <div
+              data-is-focusable={false}
+              key="callout-content-0"
+              role="text"
+              style={Object {}}
+            >
+              <div
+                style={Object {}}
+              >
+                <div
+                  className=
+
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        border-left: 4px solid red;
+                        color: #323130;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 16px;
+                        font-weight: 400;
+                        margin-top: 13px;
+                        padding-left: 8px;
+                      }
+                      @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                        forced-color-adjust: none;
+                      }
+                  id="0_50"
+                >
+                  <div>
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #605e5c;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                          }
+                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                            color: rgb(255, 255, 255);
+                          }
+                    >
+                       
+                      metaData1
+                    </div>
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 16px;
+                            font-weight: bold;
+                            line-height: 22px;
+                          }
+                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                            color: rgb(255, 255, 255);
+                          }
+                    >
+                      50
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LineChart - mouse events Should render customized callout on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M34.5 115.625
+     A5.5 5.5 0 1 0 45.5 115.625
+     M34.5 115.625
+     A 5.5 5.5 0 1 1 45.5 115.625
+     "
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcircle0_0_1"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "x": 20,
+  "values": [
+    {
+      "legend": "metaData1",
+      "y": 50,
+      "color": "red",
+      "index": -1
+    }
+  ]
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LineChart - mouse events Should render customized callout per stack on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M34.5 115.625
+     A5.5 5.5 0 1 0 45.5 115.625
+     M34.5 115.625
+     A 5.5 5.5 0 1 1 45.5 115.625
+     "
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcircle0_0_1"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "x": 20,
+  "values": [
+    {
+      "legend": "metaData1",
+      "y": 50,
+      "color": "red",
+      "index": -1
+    }
+  ]
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LineChart snapShot testing Should render with default colors when line color is not provided 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="#637cef"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="#637cef"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="#637cef"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="#637cef"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="#637cef"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #637cef;
+                            border-color: #637cef;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #637cef, #637cef);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone11"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="metaData1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={1}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: red;
+                      border-color: red;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, red, red);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                metaData1
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={350}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 315)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={350}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={130.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 130.625
+     A0.5 0.5 0 1 0 40.5 130.625
+     M39.5 130.625
+     A 0.5 0.5 0 1 1 40.5 130.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={140}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={120}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M119.5 20
+     A0.5 0.5 0 1 0 120.5 20
+     M119.5 20
+     A 0.5 0.5 0 1 1 120.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
diff --git a/packages/react-charting/src/components/PieChart/PieChart.base.tsx b/packages/react-charting/src/components/PieChart/PieChart.base.tsx
index 9b500672680c1..da671491182bd 100644
--- a/packages/react-charting/src/components/PieChart/PieChart.base.tsx
+++ b/packages/react-charting/src/components/PieChart/PieChart.base.tsx
@@ -5,34 +5,19 @@ import { Pie } from './Pie/Pie';
 import { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 
 const getClassNames = classNamesFunction<IPieChartStyleProps, IPieChartStyles>();
-export interface IPieChartState {
-  emptyChart?: boolean;
-}
 
-export class PieChartBase extends React.Component<IPieChartProps, IPieChartState> {
+export class PieChartBase extends React.Component<IPieChartProps, {}> {
   public static defaultProps: Partial<IPieChartProps> = {
     data: [],
     width: 600,
     height: 350,
   };
   private _classNames: IProcessedStyleSet<IPieChartStyles>;
+  private _emptyChartId: string;
 
   public constructor(props: IPieChartProps) {
     super(props);
-    this.state = {
-      emptyChart: false,
-    };
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty = !(
-      this.props.data &&
-      this.props.data.length > 0 &&
-      this.props.data.filter(item => item.y > 0).length > 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_PieChart_empty');
   }
 
   public render(): JSX.Element {
@@ -48,7 +33,7 @@ export class PieChartBase extends React.Component<IPieChartProps, IPieChartState
     const radius = Math.min(width!, height!) / 2;
     const outerRadius = radius - 10;
 
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <div className={this._classNames.root}>
         {this.props.chartTitle && <p className={this._classNames.chartTitle}>{this.props.chartTitle}</p>}
         <Pie
@@ -64,11 +49,15 @@ export class PieChartBase extends React.Component<IPieChartProps, IPieChartState
       </div>
     ) : (
       <div
-        id={getId('_PieChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
       />
     );
   }
+
+  private _isChartEmpty(): boolean {
+    return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(item => item.y > 0).length > 0);
+  }
 }
diff --git a/packages/react-charting/src/components/PieChart/PieChart.test.tsx b/packages/react-charting/src/components/PieChart/PieChart.test.tsx
index efc592626d28f..71e6c02446ee5 100644
--- a/packages/react-charting/src/components/PieChart/PieChart.test.tsx
+++ b/packages/react-charting/src/components/PieChart/PieChart.test.tsx
@@ -28,12 +28,12 @@ function sharedAfterEach() {
   }
 }
 
-const chartPoints = [
+export const chartPoints = [
   { y: 50, x: 'A' },
   { y: 25, x: 'B' },
   { y: 25, x: 'C' },
 ];
-const colors = [DefaultPalette.red, DefaultPalette.blue, DefaultPalette.green];
+export const colors = [DefaultPalette.red, DefaultPalette.blue, DefaultPalette.green];
 
 describe('PieChart snapShot testing', () => {
   it('renders PieChart correctly', () => {
diff --git a/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx b/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx
new file mode 100644
index 0000000000000..3d5cd25ebe576
--- /dev/null
+++ b/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { PieChart } from './index';
+import { chartPoints, colors } from './PieChart.test';
+
+describe('Pie chart rendering', () => {
+  test('Should re-render the Pie chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<PieChart data={[]} colors={colors} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_PieChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<PieChart data={chartPoints} colors={colors} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_PieChart_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap b/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..e730fc97eced3
--- /dev/null
+++ b/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap
@@ -0,0 +1,288 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pie chart rendering Should re-render the Pie chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_PieChart_empty5"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Pie chart rendering Should re-render the Pie chart with data 2`] = `
+<div>
+  <div
+    class=
+        ms-PieChart
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          width: 670px;
+        }
+    style=""
+  >
+    <svg
+      height="350"
+      width="600"
+    >
+      <g
+        transform="translate(300, 175)"
+      >
+        <g
+          class="arc"
+        >
+          <path
+            class=
+
+                {
+                  fill: #e81123;
+                  stroke-width: 2px;
+                  stroke: #ffffff;
+                }
+            d="M0,-165A165,165,0,1,1,0,165L0,0Z"
+          />
+          <text
+            text-anchor="middle"
+            transform="translate(82.5, 1.8318679906315083e-14)"
+          >
+            A
+            -
+            50
+          </text>
+        </g>
+        <g
+          class="arc"
+        >
+          <path
+            class=
+
+                {
+                  fill: #0078d4;
+                  stroke-width: 2px;
+                  stroke: #ffffff;
+                }
+            d="M0,165A165,165,0,0,1,-165,0L0,0Z"
+          />
+          <text
+            text-anchor="middle"
+            transform="translate(-58.33630944789022, 58.33630944789013)"
+          >
+            B
+            -
+            25
+          </text>
+        </g>
+        <g
+          class="arc"
+        >
+          <path
+            class=
+
+                {
+                  fill: #107c10;
+                  stroke-width: 2px;
+                  stroke: #ffffff;
+                }
+            d="M-165,0A165,165,0,0,1,0,-165L0,0Z"
+          />
+          <text
+            text-anchor="middle"
+            transform="translate(-58.33630944789013, -58.33630944789022)"
+          >
+            C
+            -
+            25
+          </text>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
+<div
+  className=
+      ms-PieChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        width: 670px;
+      }
+>
+  <svg
+    height={350}
+    width={600}
+  >
+    <g
+      transform="translate(300, 175)"
+    >
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #e81123;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M0,-165A165,165,0,1,1,0,165L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(82.5, 1.8318679906315083e-14)"
+        >
+          A
+          -
+          50
+        </text>
+      </g>
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #0078d4;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M0,165A165,165,0,0,1,-165,0L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(-58.33630944789022, 58.33630944789013)"
+        >
+          B
+          -
+          25
+        </text>
+      </g>
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #107c10;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M-165,0A165,165,0,0,1,0,-165L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(-58.33630944789013, -58.33630944789022)"
+        >
+          C
+          -
+          25
+        </text>
+      </g>
+    </g>
+  </svg>
+</div>
+`;
+
+exports[`PieChart snapShot testing renders with colors, width and height data correctly 1`] = `
+<div
+  className=
+      ms-PieChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        width: 670px;
+      }
+>
+  <svg
+    height={300}
+    width={600}
+  >
+    <g
+      transform="translate(300, 150)"
+    >
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #e81123;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M0,-140A140,140,0,1,1,0,140L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(70, 1.554312234475219e-14)"
+        >
+          A
+          -
+          50
+        </text>
+      </g>
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #0078d4;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M0,140A140,140,0,0,1,-140,0L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(-49.49747468305837, 49.49747468305829)"
+        >
+          B
+          -
+          25
+        </text>
+      </g>
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #107c10;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M-140,0A140,140,0,0,1,0,-140L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(-49.49747468305829, -49.49747468305837)"
+        >
+          C
+          -
+          25
+        </text>
+      </g>
+    </g>
+  </svg>
+</div>
+`;
diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx
index f75f01b507b95..9e61cf5354f5f 100644
--- a/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx
+++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx
@@ -29,7 +29,6 @@ export interface ISankeyChartState extends IBasestate, IChartHoverCardProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   selectedLink?: SLink;
   shouldOverflow: boolean;
-  emptyChart?: boolean;
 }
 
 const NON_SELECTED_NODE_AND_STREAM_COLOR: string = '#757575';
@@ -66,6 +65,7 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
   private _margins: IMargins;
   private _isRtl: boolean = getRTL();
   private _normalizeData: (data: ISankeyChartData) => void;
+  private _emptyChartId: string;
 
   constructor(props: ISankeyChartProps) {
     super(props);
@@ -77,18 +77,13 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
       selectedNodes: new Set<number>(),
       shouldOverflow: false,
       isCalloutVisible: false,
-      emptyChart: !(
-        this.props.data &&
-        this.props.data.SankeyChartData &&
-        this.props.data.SankeyChartData.nodes.length > 0 &&
-        this.props.data.SankeyChartData.links.length > 0
-      ),
     };
     this._calloutId = getId('callout');
     this._linkId = getId('link');
     this._margins = { top: 36, right: 48, bottom: 32, left: 48 };
     this._preRenderLayout();
     this._normalizeData = memoizeFunction((data: ISankeyChartData) => this._normalizeSankeyData(data));
+    this._emptyChartId = getId('_SankeyChart_empty');
   }
   public componentDidMount(): void {
     this._fitParentContainer();
@@ -103,7 +98,7 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
     cancelAnimationFrame(this._reqID);
   }
   public render(): React.ReactNode {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       const { theme, className, styles, pathColor } = this.props;
       this._classNames = getClassNames(styles!, {
         theme: theme!,
@@ -173,7 +168,7 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
     }
     return (
       <div
-        id={getId('_SankeyChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -786,8 +781,8 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
     const { containerWidth, containerHeight } = this.state;
     this._reqID = requestAnimationFrame(() => {
       const container = this.props.parentRef ? this.props.parentRef : this.chartContainer;
-      const currentContainerWidth = container.getBoundingClientRect().width;
-      const currentContainerHeight = container.getBoundingClientRect().height;
+      const currentContainerWidth = container && container.getBoundingClientRect().width;
+      const currentContainerHeight = container && container.getBoundingClientRect().height;
       const shouldResize = containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight;
       if (shouldResize) {
         this.setState({
@@ -858,4 +853,13 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
   private _hideTooltip(div: any) {
     div.style('opacity', 0);
   }
+
+  private _isChartEmpty() {
+    return !(
+      this.props.data &&
+      this.props.data.SankeyChartData &&
+      this.props.data.SankeyChartData.nodes.length > 0 &&
+      this.props.data.SankeyChartData.links.length > 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.test.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChart.test.tsx
index 13226931a3587..f843b5b1ec163 100644
--- a/packages/react-charting/src/components/SankeyChart/SankeyChart.test.tsx
+++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.test.tsx
@@ -29,7 +29,7 @@ function sharedAfterEach() {
   }
 }
 
-const data: IChartProps = {
+export const data: IChartProps = {
   chartTitle: 'Sankey Chart',
   SankeyChartData: {
     nodes: [
diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx
new file mode 100644
index 0000000000000..f874d1411ad27
--- /dev/null
+++ b/packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { data } from './SankeyChart.test';
+import { IChartProps, SankeyChart } from './index';
+import { resetIds } from '../../Utilities';
+import { SankeyChartBase } from './SankeyChart.base';
+
+const emptyChartPoints: IChartProps = {
+  chartData: [],
+};
+
+function sharedBeforeEach() {
+  resetIds();
+}
+
+describe('Sankey chart rendering', () => {
+  beforeEach(sharedBeforeEach);
+  test('Should re-render the Sankey chart with data', async () => {
+    jest.spyOn(SankeyChartBase.prototype as any, '_truncateText').mockImplementation(() => 'test');
+    jest.spyOn(SankeyChartBase.prototype as any, '_createNodes').mockImplementation(() => []);
+    // Arrange
+    const { container, rerender } = render(<SankeyChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_SankeyChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<SankeyChart data={data} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_SankeyChart_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap b/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap
index cd53268e646ac..04f43c50417bb 100644
--- a/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap
+++ b/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap
@@ -25,14 +25,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone51"
+    data-focuszone-id="FocusZone52"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart50"
+      id="sankeyChart51"
       width={864}
     >
       <g
@@ -72,7 +72,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link38"
+            id="link39"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -107,7 +107,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link39"
+            id="link40"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -142,7 +142,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link40"
+            id="link41"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -177,7 +177,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link41"
+            id="link42"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -212,7 +212,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link42"
+            id="link43"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -247,7 +247,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link43"
+            id="link44"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -282,7 +282,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link44"
+            id="link45"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -317,7 +317,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link45"
+            id="link46"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -352,7 +352,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link46"
+            id="link47"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -387,7 +387,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link47"
+            id="link48"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -422,7 +422,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link48"
+            id="link49"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -457,7 +457,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link49"
+            id="link50"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -480,14 +480,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             }
       >
         <g
-          id="nodeGElement4"
+          id="nodeGElement5"
         >
           <rect
             aria-label="node192.168.42.72with weight80"
             data-is-focusable={true}
             fill="#8764B8"
             height={129.31506849315068}
-            id="nodeBar3"
+            id="nodeBar4"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -522,7 +522,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar3-name"
+                id="nodeBar4-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -548,14 +548,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement7"
+          id="nodeGElement8"
         >
           <rect
             aria-label="node172.152.48.13with weight78"
             data-is-focusable={true}
             fill="#8764B8"
             height={126.08219178082172}
-            id="nodeBar6"
+            id="nodeBar7"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -590,7 +590,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar6-name"
+                id="nodeBar7-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -616,14 +616,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement10"
+          id="nodeGElement11"
         >
           <rect
             aria-label="node124.360.55.1with weight14"
             data-is-focusable={true}
             fill="#8764B8"
             height={22.630136986301352}
-            id="nodeBar9"
+            id="nodeBar10"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -637,14 +637,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           />
         </g>
         <g
-          id="nodeGElement13"
+          id="nodeGElement14"
         >
           <rect
             aria-label="node192.564.10.2with weight27"
             data-is-focusable={true}
             fill="#8764B8"
             height={43.643835616438366}
-            id="nodeBar12"
+            id="nodeBar13"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -679,7 +679,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar12-name"
+                id="nodeBar13-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -705,14 +705,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement16"
+          id="nodeGElement17"
         >
           <rect
             aria-label="node124.124.50.1with weight10"
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar15"
+            id="nodeBar16"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -726,14 +726,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           />
         </g>
         <g
-          id="nodeGElement19"
+          id="nodeGElement20"
         >
           <rect
             aria-label="node172.630.89.4with weight10"
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar18"
+            id="nodeBar19"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -747,14 +747,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           />
         </g>
         <g
-          id="nodeGElement22"
+          id="nodeGElement23"
         >
           <rect
             aria-label="nodeinboxwith weight130"
             data-is-focusable={true}
             fill="#0E7878"
             height={210.13698630136994}
-            id="nodeBar21"
+            id="nodeBar22"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -789,7 +789,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar21-name"
+                id="nodeBar22-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -815,14 +815,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement25"
+          id="nodeGElement26"
         >
           <rect
             aria-label="nodeJunk Folderwith weight69"
             data-is-focusable={true}
             fill="#0E7878"
             height={111.53424657534248}
-            id="nodeBar24"
+            id="nodeBar25"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -857,7 +857,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar24-name"
+                id="nodeBar25-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -883,14 +883,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement28"
+          id="nodeGElement29"
         >
           <rect
             aria-label="nodeDeleted Folderwith weight20"
             data-is-focusable={true}
             fill="#0E7878"
             height={32.32876712328766}
-            id="nodeBar27"
+            id="nodeBar28"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -925,7 +925,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar27-name"
+                id="nodeBar28-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -951,14 +951,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement31"
+          id="nodeGElement32"
         >
           <rect
             aria-label="nodeClickedwith weight30"
             data-is-focusable={true}
             fill="#4F6BED"
             height={48.49315068493148}
-            id="nodeBar30"
+            id="nodeBar31"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -993,7 +993,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar30-name"
+                id="nodeBar31-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1019,14 +1019,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement34"
+          id="nodeGElement35"
         >
           <rect
             aria-label="nodeOpenedwith weight55"
             data-is-focusable={true}
             fill="#4F6BED"
             height={88.90410958904114}
-            id="nodeBar33"
+            id="nodeBar34"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1061,7 +1061,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar33-name"
+                id="nodeBar34-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1087,14 +1087,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement37"
+          id="nodeGElement38"
         >
           <rect
             aria-label="node No further action  requiredwith weight62"
             data-is-focusable={true}
             fill="#4F6BED"
             height={100.21917808219177}
-            id="nodeBar36"
+            id="nodeBar37"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1129,7 +1129,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar36-name"
+                id="nodeBar37-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1185,14 +1185,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone103"
+    data-focuszone-id="FocusZone105"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart102"
+      id="sankeyChart104"
       width={864}
     >
       <g
@@ -1211,7 +1211,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-0"
+              id="gradient-link54-0"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1232,7 +1232,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link90"
+            id="link92"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1246,7 +1246,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-1"
+              id="gradient-link54-1"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1267,7 +1267,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link91"
+            id="link93"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1281,7 +1281,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-2"
+              id="gradient-link54-2"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1302,7 +1302,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link92"
+            id="link94"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1316,7 +1316,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-3"
+              id="gradient-link54-3"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1337,7 +1337,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link93"
+            id="link95"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1351,7 +1351,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-4"
+              id="gradient-link54-4"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1372,7 +1372,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link94"
+            id="link96"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1386,7 +1386,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-5"
+              id="gradient-link54-5"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1407,7 +1407,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link95"
+            id="link97"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1421,7 +1421,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-6"
+              id="gradient-link54-6"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1442,7 +1442,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link96"
+            id="link98"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1456,7 +1456,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-7"
+              id="gradient-link54-7"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1477,7 +1477,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link97"
+            id="link99"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1491,7 +1491,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-8"
+              id="gradient-link54-8"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1512,7 +1512,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link98"
+            id="link100"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1526,7 +1526,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-9"
+              id="gradient-link54-9"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1547,7 +1547,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link99"
+            id="link101"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1561,7 +1561,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-10"
+              id="gradient-link54-10"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1582,7 +1582,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link100"
+            id="link102"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1596,7 +1596,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-11"
+              id="gradient-link54-11"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1617,7 +1617,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link101"
+            id="link103"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1640,14 +1640,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             }
       >
         <g
-          id="nodeGElement56"
+          id="nodeGElement58"
         >
           <rect
             aria-label="node192.168.42.72with weight80"
             data-is-focusable={true}
             fill="#E3008C"
             height={129.31506849315068}
-            id="nodeBar55"
+            id="nodeBar57"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1682,7 +1682,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar55-name"
+                id="nodeBar57-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1708,14 +1708,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement59"
+          id="nodeGElement61"
         >
           <rect
             aria-label="node172.152.48.13with weight78"
             data-is-focusable={true}
             fill="#00A2AD"
             height={126.08219178082172}
-            id="nodeBar58"
+            id="nodeBar60"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1750,7 +1750,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar58-name"
+                id="nodeBar60-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1776,14 +1776,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement62"
+          id="nodeGElement64"
         >
           <rect
             aria-label="node124.360.55.1with weight14"
             data-is-focusable={true}
             fill="#022F22"
             height={22.630136986301352}
-            id="nodeBar61"
+            id="nodeBar63"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1797,14 +1797,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           />
         </g>
         <g
-          id="nodeGElement65"
+          id="nodeGElement67"
         >
           <rect
             aria-label="node192.564.10.2with weight27"
             data-is-focusable={true}
             fill="#00188F"
             height={43.643835616438366}
-            id="nodeBar64"
+            id="nodeBar66"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1838,7 +1838,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar64-name"
+                id="nodeBar66-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1864,14 +1864,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement68"
+          id="nodeGElement70"
         >
           <rect
             aria-label="node124.124.50.1with weight10"
             data-is-focusable={true}
             fill="#E3008C"
             height={16.16438356164383}
-            id="nodeBar67"
+            id="nodeBar69"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1885,14 +1885,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           />
         </g>
         <g
-          id="nodeGElement71"
+          id="nodeGElement73"
         >
           <rect
             aria-label="node172.630.89.4with weight10"
             data-is-focusable={true}
             fill="#00A2AD"
             height={16.16438356164383}
-            id="nodeBar70"
+            id="nodeBar72"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1906,14 +1906,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           />
         </g>
         <g
-          id="nodeGElement74"
+          id="nodeGElement76"
         >
           <rect
             aria-label="nodeinboxwith weight130"
             data-is-focusable={true}
             fill="#022F22"
             height={210.13698630136994}
-            id="nodeBar73"
+            id="nodeBar75"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1948,7 +1948,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar73-name"
+                id="nodeBar75-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1974,14 +1974,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement77"
+          id="nodeGElement79"
         >
           <rect
             aria-label="nodeJunk Folderwith weight69"
             data-is-focusable={true}
             fill="#00188F"
             height={111.53424657534248}
-            id="nodeBar76"
+            id="nodeBar78"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2015,7 +2015,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar76-name"
+                id="nodeBar78-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2041,14 +2041,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement80"
+          id="nodeGElement82"
         >
           <rect
             aria-label="nodeDeleted Folderwith weight20"
             data-is-focusable={true}
             fill="#E3008C"
             height={32.32876712328766}
-            id="nodeBar79"
+            id="nodeBar81"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2083,7 +2083,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar79-name"
+                id="nodeBar81-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2109,14 +2109,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement83"
+          id="nodeGElement85"
         >
           <rect
             aria-label="nodeClickedwith weight30"
             data-is-focusable={true}
             fill="#00A2AD"
             height={48.49315068493148}
-            id="nodeBar82"
+            id="nodeBar84"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2151,7 +2151,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar82-name"
+                id="nodeBar84-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2177,14 +2177,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement86"
+          id="nodeGElement88"
         >
           <rect
             aria-label="nodeOpenedwith weight55"
             data-is-focusable={true}
             fill="#022F22"
             height={88.90410958904114}
-            id="nodeBar85"
+            id="nodeBar87"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2219,7 +2219,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar85-name"
+                id="nodeBar87-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2245,14 +2245,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement89"
+          id="nodeGElement91"
         >
           <rect
             aria-label="node No further action  requiredwith weight62"
             data-is-focusable={true}
             fill="#00188F"
             height={100.21917808219177}
-            id="nodeBar88"
+            id="nodeBar90"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2286,7 +2286,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar88-name"
+                id="nodeBar90-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2342,14 +2342,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone85"
+    data-focuszone-id="FocusZone87"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart84"
+      id="sankeyChart86"
       width={864}
     >
       <g
@@ -2368,7 +2368,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-0"
+              id="gradient-link54-0"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2389,7 +2389,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,36C455.5,36,455.5,47.952,739,47.952L739,51.422C455.5,51.422,455.5,39.471,172,39.471Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link78"
+            id="link80"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2403,7 +2403,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-1"
+              id="gradient-link54-1"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2424,7 +2424,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,47.471C455.5,47.471,455.5,51.422,739,51.422L739,54.893C455.5,54.893,455.5,50.941,172,50.941Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link79"
+            id="link81"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2438,7 +2438,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-2"
+              id="gradient-link54-2"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2459,7 +2459,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,58.941C455.5,58.941,455.5,54.893,739,54.893L739,58.363C455.5,58.363,455.5,62.412,172,62.412Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link80"
+            id="link82"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2473,7 +2473,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-3"
+              id="gradient-link54-3"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2494,7 +2494,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,70.412C455.5,70.412,455.5,58.363,739,58.363L739,61.834C455.5,61.834,455.5,73.882,172,73.882Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link81"
+            id="link83"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2508,7 +2508,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-4"
+              id="gradient-link54-4"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2529,7 +2529,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,81.882C455.5,81.882,455.5,82.445,739,82.445L739,394.798C455.5,394.798,455.5,394.235,172,394.235Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link82"
+            id="link84"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2543,7 +2543,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-5"
+              id="gradient-link54-5"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2564,7 +2564,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,402.235C455.5,402.235,455.5,394.798,739,394.798L739,422.562C455.5,422.562,455.5,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link83"
+            id="link85"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2587,14 +2587,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             }
       >
         <g
-          id="nodeGElement56"
+          id="nodeGElement58"
         >
           <rect
             aria-label="nodenode0with weight5"
             data-is-focusable={true}
             fill="#0078D4"
             height={3.470588235294116}
-            id="nodeBar55"
+            id="nodeBar57"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2608,14 +2608,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           />
         </g>
         <g
-          id="nodeGElement59"
+          id="nodeGElement61"
         >
           <rect
             aria-label="nodenode1with weight5"
             data-is-focusable={true}
             fill="#0078D4"
             height={3.470588235294116}
-            id="nodeBar58"
+            id="nodeBar60"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2629,14 +2629,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           />
         </g>
         <g
-          id="nodeGElement62"
+          id="nodeGElement64"
         >
           <rect
             aria-label="nodenode2with weight5"
             data-is-focusable={true}
             fill="#0078D4"
             height={3.470588235294116}
-            id="nodeBar61"
+            id="nodeBar63"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2650,14 +2650,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           />
         </g>
         <g
-          id="nodeGElement65"
+          id="nodeGElement67"
         >
           <rect
             aria-label="nodenode3with weight5"
             data-is-focusable={true}
             fill="#0078D4"
             height={3.470588235294116}
-            id="nodeBar64"
+            id="nodeBar66"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2671,14 +2671,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           />
         </g>
         <g
-          id="nodeGElement68"
+          id="nodeGElement70"
         >
           <rect
             aria-label="nodenode4with weight900"
             data-is-focusable={true}
             fill="#0078D4"
             height={312.3529411764705}
-            id="nodeBar67"
+            id="nodeBar69"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2713,7 +2713,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar67-name"
+                id="nodeBar69-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2739,14 +2739,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           </g>
         </g>
         <g
-          id="nodeGElement71"
+          id="nodeGElement73"
         >
           <rect
             aria-label="nodenode5with weight80"
             data-is-focusable={true}
             fill="#0078D4"
             height={27.764705882352928}
-            id="nodeBar70"
+            id="nodeBar72"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2781,7 +2781,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar70-name"
+                id="nodeBar72-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2807,14 +2807,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           </g>
         </g>
         <g
-          id="nodeGElement74"
+          id="nodeGElement76"
         >
           <rect
             aria-label="nodenode6with weight20"
             data-is-focusable={true}
             fill="#E3008C"
             height={13.882352941176471}
-            id="nodeBar73"
+            id="nodeBar75"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2828,14 +2828,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           />
         </g>
         <g
-          id="nodeGElement77"
+          id="nodeGElement79"
         >
           <rect
             aria-label="nodenode7with weight980"
             data-is-focusable={true}
             fill="#E3008C"
             height={340.1176470588236}
-            id="nodeBar76"
+            id="nodeBar78"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2870,7 +2870,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar76-name"
+                id="nodeBar78-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2926,14 +2926,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone51"
+    data-focuszone-id="FocusZone52"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart100"
+      id="sankeyChart101"
       width={864}
     >
       <g
@@ -2975,7 +2975,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link88"
+            id="link89"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3012,7 +3012,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link89"
+            id="link90"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3049,7 +3049,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link90"
+            id="link91"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3087,7 +3087,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link91"
+            id="link92"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3124,7 +3124,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link92"
+            id="link93"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3161,7 +3161,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link93"
+            id="link94"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3198,7 +3198,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link94"
+            id="link95"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3235,7 +3235,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link95"
+            id="link96"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3272,7 +3272,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link96"
+            id="link97"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3309,7 +3309,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link97"
+            id="link98"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3347,7 +3347,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link98"
+            id="link99"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3384,7 +3384,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link99"
+            id="link100"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3407,14 +3407,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             }
       >
         <g
-          id="nodeGElement54"
+          id="nodeGElement55"
           key="0"
         >
           <rect
             aria-label="node192.168.42.72with weight80"
             data-is-focusable={true}
             height={129.31506849315068}
-            id="nodeBar53"
+            id="nodeBar54"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3449,7 +3449,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar53-name"
+                id="nodeBar54-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3475,14 +3475,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement57"
+          id="nodeGElement58"
           key="1"
         >
           <rect
             aria-label="node172.152.48.13with weight78"
             data-is-focusable={true}
             height={126.08219178082172}
-            id="nodeBar56"
+            id="nodeBar57"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3517,7 +3517,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar56-name"
+                id="nodeBar57-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3543,7 +3543,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement60"
+          id="nodeGElement61"
           key="2"
         >
           <rect
@@ -3551,7 +3551,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={22.630136986301352}
-            id="nodeBar59"
+            id="nodeBar60"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3565,14 +3565,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement63"
+          id="nodeGElement64"
           key="3"
         >
           <rect
             aria-label="node192.564.10.2with weight27"
             data-is-focusable={true}
             height={43.643835616438366}
-            id="nodeBar62"
+            id="nodeBar63"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3607,7 +3607,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar62-name"
+                id="nodeBar63-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3633,14 +3633,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement66"
+          id="nodeGElement67"
           key="4"
         >
           <rect
             aria-label="node124.124.50.1with weight10"
             data-is-focusable={true}
             height={16.16438356164383}
-            id="nodeBar65"
+            id="nodeBar66"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3654,14 +3654,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement69"
+          id="nodeGElement70"
           key="5"
         >
           <rect
             aria-label="node172.630.89.4with weight10"
             data-is-focusable={true}
             height={16.16438356164383}
-            id="nodeBar68"
+            id="nodeBar69"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3675,14 +3675,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement72"
+          id="nodeGElement73"
           key="6"
         >
           <rect
             aria-label="nodeinboxwith weight130"
             data-is-focusable={true}
             height={210.13698630136994}
-            id="nodeBar71"
+            id="nodeBar72"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3717,7 +3717,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar71-name"
+                id="nodeBar72-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3743,7 +3743,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement75"
+          id="nodeGElement76"
           key="7"
         >
           <rect
@@ -3751,7 +3751,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={111.53424657534248}
-            id="nodeBar74"
+            id="nodeBar75"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3786,7 +3786,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar74-name"
+                id="nodeBar75-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3812,14 +3812,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement78"
+          id="nodeGElement79"
           key="8"
         >
           <rect
             aria-label="nodeDeleted Folderwith weight20"
             data-is-focusable={true}
             height={32.32876712328766}
-            id="nodeBar77"
+            id="nodeBar78"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3854,7 +3854,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar77-name"
+                id="nodeBar78-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3880,14 +3880,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement81"
+          id="nodeGElement82"
           key="9"
         >
           <rect
             aria-label="nodeClickedwith weight30"
             data-is-focusable={true}
             height={48.49315068493148}
-            id="nodeBar80"
+            id="nodeBar81"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3922,7 +3922,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar80-name"
+                id="nodeBar81-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3948,14 +3948,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement84"
+          id="nodeGElement85"
           key="10"
         >
           <rect
             aria-label="nodeOpenedwith weight55"
             data-is-focusable={true}
             height={88.90410958904114}
-            id="nodeBar83"
+            id="nodeBar84"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3990,7 +3990,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar83-name"
+                id="nodeBar84-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4016,7 +4016,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement87"
+          id="nodeGElement88"
           key="11"
         >
           <rect
@@ -4024,7 +4024,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={100.21917808219177}
-            id="nodeBar86"
+            id="nodeBar87"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4059,7 +4059,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar86-name"
+                id="nodeBar87-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4118,14 +4118,14 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone51"
+    data-focuszone-id="FocusZone52"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart100"
+      id="sankeyChart101"
       width={864}
     >
       <g
@@ -4167,7 +4167,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link88"
+            id="link89"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4205,7 +4205,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="url(#gradient-link1-1)"
             fillOpacity={0.3}
-            id="link89"
+            id="link90"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4242,7 +4242,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link90"
+            id="link91"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4279,7 +4279,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link91"
+            id="link92"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4316,7 +4316,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link92"
+            id="link93"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4353,7 +4353,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link93"
+            id="link94"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4390,7 +4390,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link94"
+            id="link95"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4427,7 +4427,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link95"
+            id="link96"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4465,7 +4465,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="url(#gradient-link1-8)"
             fillOpacity={0.3}
-            id="link96"
+            id="link97"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4503,7 +4503,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="url(#gradient-link1-9)"
             fillOpacity={0.3}
-            id="link97"
+            id="link98"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4540,7 +4540,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link98"
+            id="link99"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4577,7 +4577,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link99"
+            id="link100"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4600,7 +4600,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             }
       >
         <g
-          id="nodeGElement54"
+          id="nodeGElement55"
           key="0"
         >
           <rect
@@ -4608,7 +4608,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={129.31506849315068}
-            id="nodeBar53"
+            id="nodeBar54"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4643,7 +4643,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar53-name"
+                id="nodeBar54-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4669,7 +4669,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement57"
+          id="nodeGElement58"
           key="1"
         >
           <rect
@@ -4677,7 +4677,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={126.08219178082172}
-            id="nodeBar56"
+            id="nodeBar57"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4712,7 +4712,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar56-name"
+                id="nodeBar57-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4738,7 +4738,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement60"
+          id="nodeGElement61"
           key="2"
         >
           <rect
@@ -4746,7 +4746,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={22.630136986301352}
-            id="nodeBar59"
+            id="nodeBar60"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4760,7 +4760,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement63"
+          id="nodeGElement64"
           key="3"
         >
           <rect
@@ -4768,7 +4768,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={43.643835616438366}
-            id="nodeBar62"
+            id="nodeBar63"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4803,7 +4803,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar62-name"
+                id="nodeBar63-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4829,7 +4829,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement66"
+          id="nodeGElement67"
           key="4"
         >
           <rect
@@ -4837,7 +4837,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar65"
+            id="nodeBar66"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4851,7 +4851,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement69"
+          id="nodeGElement70"
           key="5"
         >
           <rect
@@ -4859,7 +4859,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar68"
+            id="nodeBar69"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4873,7 +4873,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement72"
+          id="nodeGElement73"
           key="6"
         >
           <rect
@@ -4881,7 +4881,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#0E7878"
             height={210.13698630136994}
-            id="nodeBar71"
+            id="nodeBar72"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4916,7 +4916,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar71-name"
+                id="nodeBar72-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4942,7 +4942,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement75"
+          id="nodeGElement76"
           key="7"
         >
           <rect
@@ -4950,7 +4950,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#0E7878"
             height={111.53424657534248}
-            id="nodeBar74"
+            id="nodeBar75"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4985,7 +4985,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar74-name"
+                id="nodeBar75-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5011,7 +5011,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement78"
+          id="nodeGElement79"
           key="8"
         >
           <rect
@@ -5019,7 +5019,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#0E7878"
             height={32.32876712328766}
-            id="nodeBar77"
+            id="nodeBar78"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5054,7 +5054,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar77-name"
+                id="nodeBar78-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5080,7 +5080,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement81"
+          id="nodeGElement82"
           key="9"
         >
           <rect
@@ -5088,7 +5088,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#4F6BED"
             height={48.49315068493148}
-            id="nodeBar80"
+            id="nodeBar81"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5123,7 +5123,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar80-name"
+                id="nodeBar81-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5149,7 +5149,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement84"
+          id="nodeGElement85"
           key="10"
         >
           <rect
@@ -5157,7 +5157,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#4F6BED"
             height={88.90410958904114}
-            id="nodeBar83"
+            id="nodeBar84"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5192,7 +5192,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar83-name"
+                id="nodeBar84-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5218,7 +5218,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement87"
+          id="nodeGElement88"
           key="11"
         >
           <rect
@@ -5226,7 +5226,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#4F6BED"
             height={100.21917808219177}
-            id="nodeBar86"
+            id="nodeBar87"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5261,7 +5261,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar86-name"
+                id="nodeBar87-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5320,14 +5320,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone51"
+    data-focuszone-id="FocusZone52"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart100"
+      id="sankeyChart101"
       width={864}
     >
       <g
@@ -5369,7 +5369,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link88"
+            id="link89"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5407,7 +5407,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link89"
+            id="link90"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5445,7 +5445,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link90"
+            id="link91"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5482,7 +5482,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link91"
+            id="link92"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5519,7 +5519,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link92"
+            id="link93"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5556,7 +5556,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link93"
+            id="link94"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5593,7 +5593,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link94"
+            id="link95"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5630,7 +5630,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link95"
+            id="link96"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5668,7 +5668,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link96"
+            id="link97"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5706,7 +5706,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link97"
+            id="link98"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5744,7 +5744,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link98"
+            id="link99"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5781,7 +5781,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link99"
+            id="link100"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5804,14 +5804,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             }
       >
         <g
-          id="nodeGElement54"
+          id="nodeGElement55"
           key="0"
         >
           <rect
             aria-label="node192.168.42.72with weight80"
             data-is-focusable={true}
             height={129.31506849315068}
-            id="nodeBar53"
+            id="nodeBar54"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5846,7 +5846,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar53-name"
+                id="nodeBar54-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5872,7 +5872,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement57"
+          id="nodeGElement58"
           key="1"
         >
           <rect
@@ -5880,7 +5880,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={126.08219178082172}
-            id="nodeBar56"
+            id="nodeBar57"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5915,7 +5915,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar56-name"
+                id="nodeBar57-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5941,14 +5941,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement60"
+          id="nodeGElement61"
           key="2"
         >
           <rect
             aria-label="node124.360.55.1with weight14"
             data-is-focusable={true}
             height={22.630136986301352}
-            id="nodeBar59"
+            id="nodeBar60"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5962,14 +5962,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement63"
+          id="nodeGElement64"
           key="3"
         >
           <rect
             aria-label="node192.564.10.2with weight27"
             data-is-focusable={true}
             height={43.643835616438366}
-            id="nodeBar62"
+            id="nodeBar63"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6004,7 +6004,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar62-name"
+                id="nodeBar63-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6030,14 +6030,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement66"
+          id="nodeGElement67"
           key="4"
         >
           <rect
             aria-label="node124.124.50.1with weight10"
             data-is-focusable={true}
             height={16.16438356164383}
-            id="nodeBar65"
+            id="nodeBar66"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6051,14 +6051,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement69"
+          id="nodeGElement70"
           key="5"
         >
           <rect
             aria-label="node172.630.89.4with weight10"
             data-is-focusable={true}
             height={16.16438356164383}
-            id="nodeBar68"
+            id="nodeBar69"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6072,7 +6072,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement72"
+          id="nodeGElement73"
           key="6"
         >
           <rect
@@ -6080,7 +6080,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={210.13698630136994}
-            id="nodeBar71"
+            id="nodeBar72"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6115,7 +6115,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar71-name"
+                id="nodeBar72-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6141,7 +6141,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement75"
+          id="nodeGElement76"
           key="7"
         >
           <rect
@@ -6149,7 +6149,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={111.53424657534248}
-            id="nodeBar74"
+            id="nodeBar75"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6184,7 +6184,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar74-name"
+                id="nodeBar75-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6210,14 +6210,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement78"
+          id="nodeGElement79"
           key="8"
         >
           <rect
             aria-label="nodeDeleted Folderwith weight20"
             data-is-focusable={true}
             height={32.32876712328766}
-            id="nodeBar77"
+            id="nodeBar78"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6252,7 +6252,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar77-name"
+                id="nodeBar78-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6278,7 +6278,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement81"
+          id="nodeGElement82"
           key="9"
         >
           <rect
@@ -6286,7 +6286,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={48.49315068493148}
-            id="nodeBar80"
+            id="nodeBar81"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6321,7 +6321,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar80-name"
+                id="nodeBar81-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6347,7 +6347,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement84"
+          id="nodeGElement85"
           key="10"
         >
           <rect
@@ -6355,7 +6355,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={88.90410958904114}
-            id="nodeBar83"
+            id="nodeBar84"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6390,7 +6390,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar83-name"
+                id="nodeBar84-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6416,7 +6416,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement87"
+          id="nodeGElement88"
           key="11"
         >
           <rect
@@ -6424,7 +6424,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={100.21917808219177}
-            id="nodeBar86"
+            id="nodeBar87"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6459,7 +6459,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar86-name"
+                id="nodeBar87-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6515,14 +6515,14 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone51"
+    data-focuszone-id="FocusZone52"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart50"
+      id="sankeyChart51"
       width={864}
     >
       <g
@@ -6564,7 +6564,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link38"
+            id="link39"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6601,7 +6601,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link39"
+            id="link40"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6638,7 +6638,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link40"
+            id="link41"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6675,7 +6675,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link41"
+            id="link42"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6712,7 +6712,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link42"
+            id="link43"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6749,7 +6749,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link43"
+            id="link44"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6786,7 +6786,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link44"
+            id="link45"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6823,7 +6823,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link45"
+            id="link46"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6860,7 +6860,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link46"
+            id="link47"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6897,7 +6897,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link47"
+            id="link48"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6934,7 +6934,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link48"
+            id="link49"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6971,7 +6971,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link49"
+            id="link50"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6994,7 +6994,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             }
       >
         <g
-          id="nodeGElement4"
+          id="nodeGElement5"
           key="0"
         >
           <rect
@@ -7002,7 +7002,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={129.31506849315068}
-            id="nodeBar3"
+            id="nodeBar4"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7037,7 +7037,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar3-name"
+                id="nodeBar4-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7063,7 +7063,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement7"
+          id="nodeGElement8"
           key="1"
         >
           <rect
@@ -7071,7 +7071,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={126.08219178082172}
-            id="nodeBar6"
+            id="nodeBar7"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7106,7 +7106,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar6-name"
+                id="nodeBar7-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7132,7 +7132,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement10"
+          id="nodeGElement11"
           key="2"
         >
           <rect
@@ -7140,7 +7140,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={22.630136986301352}
-            id="nodeBar9"
+            id="nodeBar10"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7154,7 +7154,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement13"
+          id="nodeGElement14"
           key="3"
         >
           <rect
@@ -7162,7 +7162,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={43.643835616438366}
-            id="nodeBar12"
+            id="nodeBar13"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7197,7 +7197,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar12-name"
+                id="nodeBar13-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7223,7 +7223,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement16"
+          id="nodeGElement17"
           key="4"
         >
           <rect
@@ -7231,7 +7231,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar15"
+            id="nodeBar16"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7245,7 +7245,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement19"
+          id="nodeGElement20"
           key="5"
         >
           <rect
@@ -7253,7 +7253,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar18"
+            id="nodeBar19"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7267,7 +7267,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement22"
+          id="nodeGElement23"
           key="6"
         >
           <rect
@@ -7275,7 +7275,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#0E7878"
             height={210.13698630136994}
-            id="nodeBar21"
+            id="nodeBar22"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7310,7 +7310,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar21-name"
+                id="nodeBar22-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7336,7 +7336,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement25"
+          id="nodeGElement26"
           key="7"
         >
           <rect
@@ -7344,7 +7344,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#0E7878"
             height={111.53424657534248}
-            id="nodeBar24"
+            id="nodeBar25"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7379,7 +7379,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar24-name"
+                id="nodeBar25-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7405,7 +7405,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement28"
+          id="nodeGElement29"
           key="8"
         >
           <rect
@@ -7413,7 +7413,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#0E7878"
             height={32.32876712328766}
-            id="nodeBar27"
+            id="nodeBar28"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7448,7 +7448,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar27-name"
+                id="nodeBar28-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7474,7 +7474,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement31"
+          id="nodeGElement32"
           key="9"
         >
           <rect
@@ -7482,7 +7482,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#4F6BED"
             height={48.49315068493148}
-            id="nodeBar30"
+            id="nodeBar31"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7517,7 +7517,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar30-name"
+                id="nodeBar31-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7543,7 +7543,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement34"
+          id="nodeGElement35"
           key="10"
         >
           <rect
@@ -7551,7 +7551,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#4F6BED"
             height={88.90410958904114}
-            id="nodeBar33"
+            id="nodeBar34"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7586,7 +7586,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar33-name"
+                id="nodeBar34-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7612,7 +7612,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement37"
+          id="nodeGElement38"
           key="11"
         >
           <rect
@@ -7620,7 +7620,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#4F6BED"
             height={100.21917808219177}
-            id="nodeBar36"
+            id="nodeBar37"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7655,7 +7655,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar36-name"
+                id="nodeBar37-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
diff --git a/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap b/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..88bbcc1d28bf7
--- /dev/null
+++ b/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap
@@ -0,0 +1,8146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone52"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart51"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link39"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link40"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link41"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link42"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link43"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link44"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link45"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link46"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link47"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link48"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link49"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link50"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement5"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={129.31506849315068}
+            id="nodeBar4"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar4-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement8"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={126.08219178082172}
+            id="nodeBar7"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar7-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement11"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={22.630136986301352}
+            id="nodeBar10"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement14"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={43.643835616438366}
+            id="nodeBar13"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar13-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement17"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar16"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement20"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar19"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement23"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={210.13698630136994}
+            id="nodeBar22"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar22-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement26"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={111.53424657534248}
+            id="nodeBar25"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar25-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement29"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={32.32876712328766}
+            id="nodeBar28"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar28-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement32"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={48.49315068493148}
+            id="nodeBar31"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar31-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement35"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={88.90410958904114}
+            id="nodeBar34"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar34-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement38"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={100.21917808219177}
+            id="nodeBar37"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar37-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nodecolors and border colors  1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone105"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart104"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#E3008C"
+              />
+              <stop
+                offset="100%"
+                stopColor="#022F22"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link92"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00A2AD"
+              />
+              <stop
+                offset="100%"
+                stopColor="#022F22"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link93"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00A2AD"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link94"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#022F22"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link95"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00188F"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link96"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00188F"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link97"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#E3008C"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link98"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00A2AD"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link99"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#022F22"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00A2AD"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link100"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#022F22"
+              />
+              <stop
+                offset="100%"
+                stopColor="#022F22"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link101"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00188F"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link102"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#E3008C"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link103"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement58"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            fill="#E3008C"
+            height={129.31506849315068}
+            id="nodeBar57"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#002E39"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar57-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement61"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            fill="#00A2AD"
+            height={126.08219178082172}
+            id="nodeBar60"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#43002C"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar60-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement64"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            fill="#022F22"
+            height={22.630136986301352}
+            id="nodeBar63"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement67"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            fill="#00188F"
+            height={43.643835616438366}
+            id="nodeBar66"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar66-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement70"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            fill="#E3008C"
+            height={16.16438356164383}
+            id="nodeBar69"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#002E39"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement73"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            fill="#00A2AD"
+            height={16.16438356164383}
+            id="nodeBar72"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#43002C"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement76"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            fill="#022F22"
+            height={210.13698630136994}
+            id="nodeBar75"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar75-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement79"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#00188F"
+            height={111.53424657534248}
+            id="nodeBar78"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar78-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement82"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            fill="#E3008C"
+            height={32.32876712328766}
+            id="nodeBar81"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#002E39"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar81-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement85"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            fill="#00A2AD"
+            height={48.49315068493148}
+            id="nodeBar84"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#43002C"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar84-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement88"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            fill="#022F22"
+            height={88.90410958904114}
+            id="nodeBar87"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar87-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement91"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#00188F"
+            height={100.21917808219177}
+            id="nodeBar90"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar90-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Sankey chart rendering Should re-render the Sankey chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_SankeyChart_empty2"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Sankey chart rendering Should re-render the Sankey chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    role="presentation"
+    style=""
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+      data-focuszone-id="FocusZone16"
+    >
+      <svg
+        focusable="false"
+        height="436"
+        id="sankeyChart15"
+        width="864"
+      >
+        <g
+          class=
+
+              {
+                fill: #ffffff;
+                stroke-width: 3px;
+                stroke: #000000;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                fill: #000000;
+              }
+          stroke-opacity="1"
+        >
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-0"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from192.168.42.72toinboxwith weight80"
+              d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link3"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="0"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-1"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from172.152.48.13toinboxwith weight50"
+              d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link4"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-2"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from172.152.48.13toJunk Folderwith weight28"
+              d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link5"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-3"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from124.360.55.1toJunk Folderwith weight14"
+              d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link6"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-4"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from192.564.10.2toJunk Folderwith weight7"
+              d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link7"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-5"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+              d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link8"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-6"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from124.124.50.1toJunk Folderwith weight10"
+              d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link9"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-7"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from172.630.89.4toJunk Folderwith weight10"
+              d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link10"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-8"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#0E7878"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#4F6BED"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link frominboxtoClickedwith weight30"
+              d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link11"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-9"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#0E7878"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#4F6BED"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link frominboxtoOpenedwith weight55"
+              d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link12"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-10"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#0E7878"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#4F6BED"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+              d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link13"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-11"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#0E7878"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#4F6BED"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+              d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link14"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+        </g>
+        <g
+          class=
+
+              {
+                fill: #F5F5F5;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                fill: #000000;
+              }
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on providing height less than onepercent of total height 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone87"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart86"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode0tonode6with weight5"
+            d="M172,36C455.5,36,455.5,47.952,739,47.952L739,51.422C455.5,51.422,455.5,39.471,172,39.471Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link80"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode1tonode6with weight5"
+            d="M172,47.471C455.5,47.471,455.5,51.422,739,51.422L739,54.893C455.5,54.893,455.5,50.941,172,50.941Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link81"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode2tonode6with weight5"
+            d="M172,58.941C455.5,58.941,455.5,54.893,739,54.893L739,58.363C455.5,58.363,455.5,62.412,172,62.412Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link82"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode3tonode6with weight5"
+            d="M172,70.412C455.5,70.412,455.5,58.363,739,58.363L739,61.834C455.5,61.834,455.5,73.882,172,73.882Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link83"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode4tonode7with weight900"
+            d="M172,81.882C455.5,81.882,455.5,82.445,739,82.445L739,394.798C455.5,394.798,455.5,394.235,172,394.235Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link84"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode5tonode7with weight80"
+            d="M172,402.235C455.5,402.235,455.5,394.798,739,394.798L739,422.562C455.5,422.562,455.5,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link85"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement58"
+        >
+          <rect
+            aria-label="nodenode0with weight5"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={3.470588235294116}
+            id="nodeBar57"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+        </g>
+        <g
+          id="nodeGElement61"
+        >
+          <rect
+            aria-label="nodenode1with weight5"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={3.470588235294116}
+            id="nodeBar60"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={47.470588235294116}
+          />
+        </g>
+        <g
+          id="nodeGElement64"
+        >
+          <rect
+            aria-label="nodenode2with weight5"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={3.470588235294116}
+            id="nodeBar63"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={58.94117647058823}
+          />
+        </g>
+        <g
+          id="nodeGElement67"
+        >
+          <rect
+            aria-label="nodenode3with weight5"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={3.470588235294116}
+            id="nodeBar66"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={70.41176470588235}
+          />
+        </g>
+        <g
+          id="nodeGElement70"
+        >
+          <rect
+            aria-label="nodenode4with weight900"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={312.3529411764705}
+            id="nodeBar69"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={81.88235294117646}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar69-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={81.88235294117646}
+              >
+                node4
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={81.88235294117646}
+            >
+              900
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement73"
+        >
+          <rect
+            aria-label="nodenode5with weight80"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={27.764705882352928}
+            id="nodeBar72"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={402.23529411764696}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar72-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={402.23529411764696}
+              >
+                node5
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={164}
+              y={402.23529411764696}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement76"
+        >
+          <rect
+            aria-label="nodenode6with weight20"
+            data-is-focusable={true}
+            fill="#E3008C"
+            height={13.882352941176471}
+            id="nodeBar75"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={47.951536403029024}
+          />
+        </g>
+        <g
+          id="nodeGElement79"
+        >
+          <rect
+            aria-label="nodenode7with weight980"
+            data-is-focusable={true}
+            fill="#E3008C"
+            height={340.1176470588236}
+            id="nodeBar78"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={82.44476169854653}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar78-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={82.44476169854653}
+              >
+                node7
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={82.44476169854653}
+            >
+              980
+            </text>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`SankeyChart - mouse events Should render callout correctly on mouseover when height of node is less than 24px 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone52"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart101"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g
+          key="link1-0"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link89"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-1"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link90"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-2"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link91"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-3"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link92"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-4"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link93"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-5"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link94"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-6"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link95"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-7"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link96"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-8"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link97"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-9"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link98"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-10"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link99"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-11"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link100"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement55"
+          key="0"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            height={129.31506849315068}
+            id="nodeBar54"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar54-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement58"
+          key="1"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            height={126.08219178082172}
+            id="nodeBar57"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar57-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement61"
+          key="2"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={22.630136986301352}
+            id="nodeBar60"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement64"
+          key="3"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            height={43.643835616438366}
+            id="nodeBar63"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar63-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement67"
+          key="4"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            height={16.16438356164383}
+            id="nodeBar66"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement70"
+          key="5"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            height={16.16438356164383}
+            id="nodeBar69"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement73"
+          key="6"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            height={210.13698630136994}
+            id="nodeBar72"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar72-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement76"
+          key="7"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={111.53424657534248}
+            id="nodeBar75"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar75-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement79"
+          key="8"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            height={32.32876712328766}
+            id="nodeBar78"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar78-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement82"
+          key="9"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            height={48.49315068493148}
+            id="nodeBar81"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar81-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement85"
+          key="10"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            height={88.90410958904114}
+            id="nodeBar84"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar84-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement88"
+          key="11"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={100.21917808219177}
+            id="nodeBar87"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar87-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+      <span
+        className="ms-layer"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone52"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart101"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g
+          key="link1-0"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link89"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-1"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fill="url(#gradient-link1-1)"
+            fillOpacity={0.3}
+            id="link90"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="url(#gradient-link1-1)"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-2"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link91"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-3"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link92"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-4"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link93"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-5"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link94"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-6"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link95"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-7"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link96"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-8"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fill="url(#gradient-link1-8)"
+            fillOpacity={0.3}
+            id="link97"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="url(#gradient-link1-8)"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-9"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fill="url(#gradient-link1-9)"
+            fillOpacity={0.3}
+            id="link98"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="url(#gradient-link1-9)"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-10"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link99"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-11"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link100"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement55"
+          key="0"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={129.31506849315068}
+            id="nodeBar54"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar54-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement58"
+          key="1"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={126.08219178082172}
+            id="nodeBar57"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar57-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement61"
+          key="2"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={22.630136986301352}
+            id="nodeBar60"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement64"
+          key="3"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={43.643835616438366}
+            id="nodeBar63"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar63-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement67"
+          key="4"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar66"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement70"
+          key="5"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar69"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement73"
+          key="6"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={210.13698630136994}
+            id="nodeBar72"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar72-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement76"
+          key="7"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={111.53424657534248}
+            id="nodeBar75"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar75-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement79"
+          key="8"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={32.32876712328766}
+            id="nodeBar78"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar78-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement82"
+          key="9"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={48.49315068493148}
+            id="nodeBar81"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar81-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement85"
+          key="10"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={88.90410958904114}
+            id="nodeBar84"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar84-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement88"
+          key="11"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={100.21917808219177}
+            id="nodeBar87"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar87-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+      <span
+        className="ms-layer"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone52"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart101"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g
+          key="link1-0"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link89"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-1"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link90"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-2"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link91"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-3"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link92"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-4"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link93"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-5"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link94"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-6"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link95"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-7"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link96"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-8"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link97"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-9"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link98"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-10"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link99"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-11"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link100"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement55"
+          key="0"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            height={129.31506849315068}
+            id="nodeBar54"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar54-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement58"
+          key="1"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={126.08219178082172}
+            id="nodeBar57"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar57-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement61"
+          key="2"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            height={22.630136986301352}
+            id="nodeBar60"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement64"
+          key="3"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            height={43.643835616438366}
+            id="nodeBar63"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar63-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement67"
+          key="4"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            height={16.16438356164383}
+            id="nodeBar66"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement70"
+          key="5"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            height={16.16438356164383}
+            id="nodeBar69"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement73"
+          key="6"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={210.13698630136994}
+            id="nodeBar72"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar72-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement76"
+          key="7"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={111.53424657534248}
+            id="nodeBar75"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar75-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement79"
+          key="8"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            height={32.32876712328766}
+            id="nodeBar78"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar78-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement82"
+          key="9"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={48.49315068493148}
+            id="nodeBar81"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar81-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement85"
+          key="10"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={88.90410958904114}
+            id="nodeBar84"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar84-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement88"
+          key="11"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={100.21917808219177}
+            id="nodeBar87"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar87-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover when node description is large 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone52"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart51"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g
+          key="link1-0"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link39"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-1"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link40"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-2"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link41"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-3"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link42"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-4"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link43"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-5"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link44"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-6"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link45"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-7"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link46"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-8"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link47"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-9"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link48"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-10"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link49"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-11"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link50"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement5"
+          key="0"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={129.31506849315068}
+            id="nodeBar4"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar4-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement8"
+          key="1"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={126.08219178082172}
+            id="nodeBar7"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar7-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement11"
+          key="2"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={22.630136986301352}
+            id="nodeBar10"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement14"
+          key="3"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={43.643835616438366}
+            id="nodeBar13"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar13-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement17"
+          key="4"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar16"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement20"
+          key="5"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar19"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement23"
+          key="6"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={210.13698630136994}
+            id="nodeBar22"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar22-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement26"
+          key="7"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={111.53424657534248}
+            id="nodeBar25"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar25-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement29"
+          key="8"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={32.32876712328766}
+            id="nodeBar28"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar28-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement32"
+          key="9"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={48.49315068493148}
+            id="nodeBar31"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar31-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement35"
+          key="10"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={88.90410958904114}
+            id="nodeBar34"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar34-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement38"
+          key="11"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={100.21917808219177}
+            id="nodeBar37"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar37-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx b/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx
index 62a20b9cdbfec..1c822c192ea9b 100644
--- a/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx
+++ b/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx
@@ -14,7 +14,6 @@ export interface ISparklineState {
   _width: number;
   _height: number;
   _valueTextWidth: number;
-  _emptyChart?: boolean;
 }
 
 export class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {
@@ -32,6 +31,7 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
   private y: any;
   private area: any;
   private line: any;
+  private _emptyChartId: string;
 
   constructor(props: ISparklineProps) {
     super(props);
@@ -40,20 +40,12 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
       _width: this.props.width! || 80,
       _height: this.props.height! || 20,
       _valueTextWidth: this.props.valueTextWidth! || 80,
-      _emptyChart: false,
     };
+    this._emptyChartId = getId('_SparklineChart_empty');
   }
 
   public componentDidMount() {
-    const isChartEmpty: boolean = !(
-      this.props.data &&
-      this.props.data.lineChartData &&
-      this.props.data.lineChartData.length > 0 &&
-      this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0
-    );
-    if (this.state._emptyChart !== isChartEmpty) {
-      this.setState({ _emptyChart: isChartEmpty });
-    } else {
+    if (!this._isChartEmpty()) {
       const area = d3Area()
         /* eslint-disable @typescript-eslint/no-explicit-any */
         .x((d: any) => this.x(d.x))
@@ -117,7 +109,7 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
     const classNames = getClassNames(this.props.styles!, {
       theme: this.props.theme!,
     });
-    return !this.state._emptyChart ? (
+    return !this._isChartEmpty() ? (
       <FocusZone
         direction={FocusZoneDirection.horizontal}
         isCircularNavigation={true}
@@ -144,11 +136,20 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
       </FocusZone>
     ) : (
       <div
-        id={getId('_SparklineChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
       />
     );
   }
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.lineChartData &&
+      this.props.data.lineChartData.length > 0 &&
+      this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.test.tsx b/packages/react-charting/src/components/Sparkline/Sparkline.test.tsx
index 82aa9df15c500..9f9ab1e350a0e 100644
--- a/packages/react-charting/src/components/Sparkline/Sparkline.test.tsx
+++ b/packages/react-charting/src/components/Sparkline/Sparkline.test.tsx
@@ -9,7 +9,7 @@ import { ISparklineState, SparklineBase } from './Sparkline.base';
 // Wrapper of the SparklineChart to be tested.
 let wrapper: ReactWrapper<ISparklineProps, ISparklineState, SparklineBase> | undefined;
 
-const sparkline1Points: IChartProps = {
+export const sparkline1Points: IChartProps = {
   chartTitle: '10.21',
   lineChartData: [
     {
@@ -89,7 +89,7 @@ const sparkline2Points: IChartProps = {
   ],
 };
 
-const emptySparklinePoints: IChartProps = {
+export const emptySparklinePoints: IChartProps = {
   chartTitle: 'Empty sparkline chart',
   lineChartData: [
     {
diff --git a/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx b/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx
new file mode 100644
index 0000000000000..264467b29faae
--- /dev/null
+++ b/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { emptySparklinePoints, sparkline1Points } from './Sparkline.test';
+import { Sparkline } from './index';
+
+describe('Sparkline chart rendering', () => {
+  test('Should re-render the Sparkline chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<Sparkline data={emptySparklinePoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_SparklineChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<Sparkline data={sparkline1Points} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_SparklineChart_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap b/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap
index b8d2e6dd002de..08c880c9b4139 100644
--- a/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap
+++ b/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = `
       {
         display: inline;
       }
-  data-focuszone-id="FocusZone0"
+  data-focuszone-id="FocusZone1"
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}
@@ -82,7 +82,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly with no legend 1
       {
         display: inline;
       }
-  data-focuszone-id="FocusZone1"
+  data-focuszone-id="FocusZone3"
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap b/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap
new file mode 100644
index 0000000000000..4665434cf887c
--- /dev/null
+++ b/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap
@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sparkline chart rendering Should re-render the Sparkline chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_SparklineChart_empty7"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Sparkline chart rendering Should re-render the Sparkline chart with data 2`] = `
+<div>
+  <div
+    class=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          display: inline;
+        }
+    data-focuszone-id="FocusZone8"
+  >
+    <div
+      class=
+
+          {
+            display: inline;
+          }
+    >
+      <svg
+        data-is-focusable="true"
+        height="20"
+        tabindex="0"
+        width="80"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = `
+<div
+  className=
+      ms-FocusZone
+      &:focus {
+        outline: none;
+      }
+      {
+        display: inline;
+      }
+  data-focuszone-id="FocusZone1"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDownCapture={[Function]}
+>
+  <div
+    className=
+
+        {
+          display: inline;
+        }
+  >
+    <svg
+      data-is-focusable={true}
+      height={20}
+      width={80}
+    >
+      <path
+        className="line"
+        d="M0,12.578L11.429,2L22.857,17.446L34.286,8.547L45.714,7.36L57.143,18.304L68.571,16.001L80,18.696"
+        fill="transparent"
+        opacity={1}
+        stroke="#00AA00"
+        strokeWidth={2}
+      />
+      <path
+        aria-label="Sparkline with label 19.64"
+        className="area"
+        d="M0,12.578L11.429,2L22.857,17.446L34.286,8.547L45.714,7.36L57.143,18.304L68.571,16.001L80,18.696L80,20L68.571,20L57.143,20L45.714,20L34.286,20L22.857,20L11.429,20L0,20Z"
+        fill="#00AA00"
+        fillOpacity={0.2}
+        opacity={1}
+      />
+    </svg>
+    <svg
+      data-is-focusable={true}
+      height={20}
+      width={80}
+    >
+      <text
+        className=
+
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #000000;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 12px;
+              font-weight: 400;
+            }
+        dx={8}
+        dy={-5}
+        x="0%"
+        y="100%"
+      >
+        19.64
+      </text>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Sparkline snapShot testing renders Sparkline correctly with no legend 1`] = `
+<div
+  className=
+      ms-FocusZone
+      &:focus {
+        outline: none;
+      }
+      {
+        display: inline;
+      }
+  data-focuszone-id="FocusZone3"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDownCapture={[Function]}
+>
+  <div
+    className=
+
+        {
+          display: inline;
+        }
+  >
+    <svg
+      data-is-focusable={true}
+      height={20}
+      width={80}
+    >
+      <path
+        className="line"
+        d="M0,14.155L16,5.757L32,7.96L48,2L64,16.187L80,10.079"
+        fill="transparent"
+        opacity={1}
+        stroke="#E60000"
+        strokeWidth={2}
+      />
+      <path
+        aria-label="Sparkline with label 131.33"
+        className="area"
+        d="M0,14.155L16,5.757L32,7.96L48,2L64,16.187L80,10.079L80,20L64,20L48,20L32,20L16,20L0,20Z"
+        fill="#E60000"
+        fillOpacity={0.2}
+        opacity={1}
+      />
+    </svg>
+  </div>
+</div>
+`;
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index 4905b1e16ba62..b2f39a9d6132c 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -38,7 +38,6 @@ export interface IMultiStackedBarChartState {
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
-  emptyChart?: boolean;
 }
 
 export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {
@@ -53,6 +52,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
   private _calloutAnchorPoint: IChartDataPoint | null;
   private _longestBarTotalValue: number;
   private _isRTL: boolean = getRTL();
+  private _emptyChartId: string;
 
   public constructor(props: IMultiStackedBarChartProps) {
     super(props);
@@ -67,26 +67,15 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       xCalloutValue: '',
       yCalloutValue: '',
       calloutLegend: '',
-      emptyChart: false,
     };
     this._onLeave = this._onLeave.bind(this);
     this._onBarLeave = this._onBarLeave.bind(this);
     this._calloutId = getId('callout');
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty: boolean = !(
-      this.props.data &&
-      this.props.data.length > 0 &&
-      this.props.data.filter(item => item.chartData && item.chartData.length === 0).length === 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_MSBC_empty');
   }
 
   public render(): JSX.Element {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       const { data, theme, culture } = this.props;
       this._adjustProps();
       const { palette } = theme!;
@@ -147,7 +136,12 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       );
     }
     return (
-      <div id={getId('_MSBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
+      <div
+        id={this._emptyChartId}
+        role={'alert'}
+        style={{ opacity: '0' }}
+        aria-label={'Graph has no data to display'}
+      />
     );
   }
 
@@ -563,4 +557,12 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     });
     return longestBarTotalValue;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.length > 0 &&
+      this.props.data.filter(item => item.chartData && item.chartData.length === 0).length === 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx
index cd88dbdeb14d5..b6632c0b21523 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx
@@ -69,7 +69,7 @@ const secondChartPoints: IChartDataPoint[] = [
   },
 ];
 
-const chartPoints: IChartProps[] = [
+export const chartPoints: IChartProps[] = [
   {
     chartTitle: 'Monitored',
     chartData: firstChartPoints,
@@ -80,7 +80,7 @@ const chartPoints: IChartProps[] = [
   },
 ];
 
-const emptyChartPoints: IChartProps[] = [
+export const emptyChartPoints: IChartProps[] = [
   {
     chartTitle: 'Monitored',
     chartData: [],
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
index 43b50ea8a25cc..d7e61f03267ce 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
@@ -23,7 +23,6 @@ export interface IStackedBarChartState {
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
-  emptyChart?: boolean;
 }
 
 export class StackedBarChartBase extends React.Component<IStackedBarChartProps, IStackedBarChartState> {
@@ -37,6 +36,7 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
   private _calloutId: string;
   private _refArray: IRefArrayData[];
   private _calloutAnchorPoint: IChartDataPoint | null;
+  private _emptyChartId: string;
 
   public constructor(props: IStackedBarChartProps) {
     super(props);
@@ -50,28 +50,17 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
       xCalloutValue: '',
       yCalloutValue: '',
       calloutLegend: '',
-      emptyChart: false,
     };
     this._refArray = [];
     this._onLeave = this._onLeave.bind(this);
     this._refCallback = this._refCallback.bind(this);
     this._onBarLeave = this._onBarLeave.bind(this);
     this._calloutId = getId('callout');
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty: boolean = !(
-      this.props.data &&
-      this.props.data.chartData &&
-      this.props.data.chartData.length > 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_SBC_empty');
   }
 
   public render(): JSX.Element {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       this._adjustProps();
       const { data, benchmarkData, targetData, hideNumberDisplay, ignoreFixStyle, culture } = this.props;
       const { palette } = this.props.theme!;
@@ -194,7 +183,12 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
       );
     }
     return (
-      <div id={getId('_SBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
+      <div
+        id={this._emptyChartId}
+        role={'alert'}
+        style={{ opacity: '0' }}
+        aria-label={'Graph has no data to display'}
+      />
     );
   }
 
@@ -477,4 +471,8 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
     const yValue = point.yAxisCalloutData || point.data || 0;
     return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(this.props.data && this.props.data.chartData && this.props.data.chartData.length > 0);
+  }
 }
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx
index 6b9b30be98245..e89a300b9771f 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx
@@ -35,12 +35,12 @@ const points: IChartDataPoint[] = [
 ];
 const chartTitle = 'Stacked bar chart 2nd example';
 
-const chartPoints: IChartProps = {
+export const chartPoints: IChartProps = {
   chartTitle: chartTitle,
   chartData: points,
 };
 
-const emptyChartPoints: IChartProps = {
+export const emptyChartPoints: IChartProps = {
   chartTitle: chartTitle,
   chartData: [],
 };
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
index 768da972c94ff..5d9bc64f1b2a5 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -79,7 +79,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -130,7 +130,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -241,7 +241,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -285,7 +285,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -336,7 +336,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -476,7 +476,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -699,7 +699,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -743,7 +743,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -794,7 +794,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -905,7 +905,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -949,7 +949,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -1000,7 +1000,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1140,7 +1140,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1280,7 +1280,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone48"
+        data-focuszone-id="FocusZone55"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1324,7 +1324,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             </span>
             <div
               hidden={true}
-              id="tooltip49"
+              id="tooltip56"
               style={
                 Object {
                   "border": 0,
@@ -1349,7 +1349,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone50"
+        data-focuszone-id="FocusZone57"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1454,7 +1454,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone51"
+        data-focuszone-id="FocusZone58"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1498,7 +1498,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             </span>
             <div
               hidden={true}
-              id="tooltip52"
+              id="tooltip59"
               style={
                 Object {
                   "border": 0,
@@ -1523,7 +1523,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone53"
+        data-focuszone-id="FocusZone60"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1659,7 +1659,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone54"
+              data-focuszone-id="FocusZone61"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1721,7 +1721,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone40"
+        data-focuszone-id="FocusZone46"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1765,7 +1765,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             </span>
             <div
               hidden={true}
-              id="tooltip41"
+              id="tooltip47"
               style={
                 Object {
                   "border": 0,
@@ -1790,7 +1790,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone42"
+        data-focuszone-id="FocusZone48"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1912,7 +1912,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone43"
+        data-focuszone-id="FocusZone49"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1956,7 +1956,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             </span>
             <div
               hidden={true}
-              id="tooltip44"
+              id="tooltip50"
               style={
                 Object {
                   "border": 0,
@@ -1981,7 +1981,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone45"
+        data-focuszone-id="FocusZone51"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2134,7 +2134,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone46"
+              data-focuszone-id="FocusZone52"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2196,7 +2196,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2240,7 +2240,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -2291,7 +2291,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2396,7 +2396,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2440,7 +2440,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -2491,7 +2491,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2627,7 +2627,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2689,7 +2689,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone32"
+        data-focuszone-id="FocusZone37"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2733,7 +2733,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             </span>
             <div
               hidden={true}
-              id="tooltip33"
+              id="tooltip38"
               style={
                 Object {
                   "border": 0,
@@ -2774,7 +2774,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone34"
+        data-focuszone-id="FocusZone39"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2879,7 +2879,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone35"
+        data-focuszone-id="FocusZone40"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2923,7 +2923,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             </span>
             <div
               hidden={true}
-              id="tooltip36"
+              id="tooltip41"
               style={
                 Object {
                   "border": 0,
@@ -2964,7 +2964,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone37"
+        data-focuszone-id="FocusZone42"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3100,7 +3100,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone38"
+              data-focuszone-id="FocusZone43"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3162,7 +3162,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone9"
+        data-focuszone-id="FocusZone11"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3206,7 +3206,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip10"
+              id="tooltip12"
               style={
                 Object {
                   "border": 0,
@@ -3257,7 +3257,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone11"
+        data-focuszone-id="FocusZone13"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3362,7 +3362,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone12"
+        data-focuszone-id="FocusZone14"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3406,7 +3406,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip13"
+              id="tooltip15"
               style={
                 Object {
                   "border": 0,
@@ -3457,7 +3457,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone14"
+        data-focuszone-id="FocusZone16"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3584,7 +3584,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone24"
+        data-focuszone-id="FocusZone28"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3628,7 +3628,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             </span>
             <div
               hidden={true}
-              id="tooltip25"
+              id="tooltip29"
               style={
                 Object {
                   "border": 0,
@@ -3653,7 +3653,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone26"
+        data-focuszone-id="FocusZone30"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3758,7 +3758,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone27"
+        data-focuszone-id="FocusZone31"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3802,7 +3802,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             </span>
             <div
               hidden={true}
-              id="tooltip28"
+              id="tooltip32"
               style={
                 Object {
                   "border": 0,
@@ -3853,7 +3853,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone29"
+        data-focuszone-id="FocusZone33"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3989,7 +3989,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone30"
+              data-focuszone-id="FocusZone34"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4232,7 +4232,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone16"
+        data-focuszone-id="FocusZone19"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4276,7 +4276,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip17"
+              id="tooltip20"
               style={
                 Object {
                   "border": 0,
@@ -4327,7 +4327,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone18"
+        data-focuszone-id="FocusZone21"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4432,7 +4432,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone19"
+        data-focuszone-id="FocusZone22"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4476,7 +4476,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip20"
+              id="tooltip23"
               style={
                 Object {
                   "border": 0,
@@ -4527,7 +4527,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone21"
+        data-focuszone-id="FocusZone24"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4663,7 +4663,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone22"
+              data-focuszone-id="FocusZone25"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
index e97b8b9e5af37..0d819c590b4bf 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -66,7 +66,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
         </span>
         <div
           hidden={true}
-          id="tooltip2"
+          id="tooltip3"
           style={
             Object {
               "border": 0,
@@ -117,7 +117,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -392,7 +392,7 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -436,7 +436,7 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
         </span>
         <div
           hidden={true}
-          id="tooltip2"
+          id="tooltip3"
           style={
             Object {
               "border": 0,
@@ -487,7 +487,7 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -679,7 +679,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -723,7 +723,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
         </span>
         <div
           hidden={true}
-          id="tooltip2"
+          id="tooltip3"
           style={
             Object {
               "border": 0,
@@ -774,7 +774,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -886,7 +886,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone26"
+    data-focuszone-id="FocusZone33"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -930,7 +930,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
         </span>
         <div
           hidden={true}
-          id="tooltip27"
+          id="tooltip34"
           style={
             Object {
               "border": 0,
@@ -981,7 +981,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone28"
+    data-focuszone-id="FocusZone35"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1093,7 +1093,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone22"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1137,7 +1137,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
         </span>
         <div
           hidden={true}
-          id="tooltip18"
+          id="tooltip23"
           style={
             Object {
               "border": 0,
@@ -1178,7 +1178,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone19"
+    data-focuszone-id="FocusZone24"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1290,7 +1290,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone5"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1334,7 +1334,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
         </span>
         <div
           hidden={true}
-          id="tooltip6"
+          id="tooltip8"
           style={
             Object {
               "border": 0,
@@ -1385,7 +1385,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone7"
+    data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1497,7 +1497,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone13"
+    data-focuszone-id="FocusZone17"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1541,7 +1541,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
         </span>
         <div
           hidden={true}
-          id="tooltip14"
+          id="tooltip18"
           style={
             Object {
               "border": 0,
@@ -1566,7 +1566,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone15"
+    data-focuszone-id="FocusZone19"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1678,7 +1678,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone12"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1722,7 +1722,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
         </span>
         <div
           hidden={true}
-          id="tooltip10"
+          id="tooltip13"
           style={
             Object {
               "border": 0,
@@ -1773,7 +1773,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone11"
+    data-focuszone-id="FocusZone14"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1885,7 +1885,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone21"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1929,7 +1929,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
         </span>
         <div
           hidden={true}
-          id="tooltip22"
+          id="tooltip28"
           style={
             Object {
               "border": 0,
@@ -1954,7 +1954,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone23"
+    data-focuszone-id="FocusZone29"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2089,7 +2089,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone24"
+              data-focuszone-id="FocusZone30"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
index 6ce8d3317cce4..830eef808829d 100644
--- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
+++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -74,6 +74,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
   private _xAxisType: XAxisTypes;
   private _calloutAnchorPoint: IVerticalBarChartDataPoint | null;
   private _domainMargin: number;
+  private _emptyChartId: string;
 
   public constructor(props: IVerticalBarChartProps) {
     super(props);
@@ -100,6 +101,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
         ? (getTypeOfAxis(this.props.data![0].x, true) as XAxisTypes)
         : XAxisTypes.StringAxis;
     this._domainMargin = MIN_DOMAIN_MARGIN;
+    this._emptyChartId = getId('_VBC_empty');
   }
 
   public render(): JSX.Element {
@@ -181,7 +183,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       />
     ) : (
       <div
-        id={getId('_VBC_empty')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
index 2632076c3df9c..828e8962dccc6 100644
--- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -69,7 +69,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -97,7 +97,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -114,7 +114,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#0078d4"
             height={51}
-            id="_VBC_bar_14"
+            id="_VBC_bar_15"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -153,7 +153,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#002050"
             height={255}
-            id="_VBC_bar_15"
+            id="_VBC_bar_16"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -192,7 +192,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#00188f"
             height={153}
-            id="_VBC_bar_16"
+            id="_VBC_bar_17"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -250,7 +250,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -726,7 +726,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -739,7 +739,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -779,7 +779,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -807,7 +807,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -824,7 +824,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#0078d4"
             height={51}
-            id="_VBC_bar_8"
+            id="_VBC_bar_9"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -863,7 +863,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#002050"
             height={255}
-            id="_VBC_bar_9"
+            id="_VBC_bar_10"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -902,7 +902,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#00188f"
             height={153}
-            id="_VBC_bar_10"
+            id="_VBC_bar_11"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -960,7 +960,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1355,7 +1355,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_36"
+  id="chart_44"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1368,7 +1368,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone37"
+    data-focuszone-id="FocusZone45"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1408,7 +1408,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_36"
+        id="xAxisGElementchart_44"
         transform="translate(0, -35)"
       />
       <g
@@ -1436,7 +1436,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_36"
+        id="yAxisGElementchart_44"
         transform="translate(40, 0)"
       />
       <g>
@@ -1492,7 +1492,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone38"
+              data-focuszone-id="FocusZone46"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1808,7 +1808,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1821,7 +1821,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1861,7 +1861,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, -35)"
       />
       <g
@@ -1889,7 +1889,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -1945,7 +1945,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2261,7 +2261,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
         overflow: hidden;
         width: 100%;
       }
-  id="chart_16"
+  id="chart_20"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2274,7 +2274,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone21"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2314,7 +2314,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             & path {
               display: none;
             }
-        id="xAxisGElementchart_16"
+        id="xAxisGElementchart_20"
         transform="translate(0, -35)"
       />
       <g
@@ -2342,7 +2342,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_16"
+        id="yAxisGElementchart_20"
         transform="translate(40, 0)"
       />
       <g>
@@ -2381,7 +2381,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone18"
+        data-focuszone-id="FocusZone22"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2694,7 +2694,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_7"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2707,7 +2707,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone8"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2747,7 +2747,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_7"
+        id="xAxisGElementchart_9"
         transform="translate(0, -35)"
       />
       <g
@@ -2775,7 +2775,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_7"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -2807,7 +2807,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_11"
+  id="chart_14"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2820,7 +2820,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone12"
+    data-focuszone-id="FocusZone15"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2860,7 +2860,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_11"
+        id="xAxisGElementchart_14"
         transform="translate(0, -35)"
       />
       <g
@@ -2888,7 +2888,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_11"
+        id="yAxisGElementchart_14"
         transform="translate(40, 0)"
       />
       <g>
@@ -2944,7 +2944,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone13"
+              data-focuszone-id="FocusZone16"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3260,7 +3260,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_21"
+  id="chart_26"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3273,7 +3273,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone22"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3313,7 +3313,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_21"
+        id="xAxisGElementchart_26"
         transform="translate(0, -35)"
       />
       <g
@@ -3341,7 +3341,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_21"
+        id="yAxisGElementchart_26"
         transform="translate(40, 0)"
       />
       <g>
@@ -3397,7 +3397,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone23"
+              data-focuszone-id="FocusZone28"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3713,7 +3713,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_26"
+  id="chart_32"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3726,7 +3726,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone27"
+    data-focuszone-id="FocusZone33"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3766,7 +3766,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_26"
+        id="xAxisGElementchart_32"
         transform="translate(0, -35)"
       />
       <g
@@ -3794,7 +3794,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_26"
+        id="yAxisGElementchart_32"
         transform="translate(40, 0)"
       />
       <g>
@@ -3850,7 +3850,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone28"
+              data-focuszone-id="FocusZone34"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4166,7 +4166,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_31"
+  id="chart_38"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4179,7 +4179,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone32"
+    data-focuszone-id="FocusZone39"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4219,7 +4219,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_31"
+        id="xAxisGElementchart_38"
         transform="translate(0, -35)"
       />
       <g
@@ -4247,7 +4247,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_31"
+        id="yAxisGElementchart_38"
         transform="translate(40, 0)"
       />
       <g>
@@ -4303,7 +4303,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone33"
+              data-focuszone-id="FocusZone40"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap
index fa893cb669fbe..7ddc5bc624d93 100644
--- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
           overflow: hidden;
           width: 100%;
         }
-    id="chart_492"
+    id="chart_514"
     role="presentation"
   >
     <div
@@ -29,7 +29,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
           {
             overflow: auto;
           }
-      data-focuszone-id="FocusZone493"
+      data-focuszone-id="FocusZone515"
     >
       <svg
         focusable="false"
@@ -63,7 +63,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
               & path {
                 display: none;
               }
-          id="xAxisGElementchart_492"
+          id="xAxisGElementchart_514"
           transform="translate(0, -35)"
         />
         <g
@@ -91,7 +91,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 opacity: 0.1;
                 stroke: rgb(179, 179, 179);
               }
-          id="yAxisGElementchart_492"
+          id="yAxisGElementchart_514"
           transform="translate(40, 0)"
         />
         <g>
@@ -138,7 +138,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone494"
+                data-focuszone-id="FocusZone516"
                 role="listbox"
               >
                 <div
@@ -441,7 +441,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
           overflow: hidden;
           width: 100%;
         }
-    id="chart_497"
+    id="chart_520"
     role="presentation"
   >
     <div
@@ -453,7 +453,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
           {
             overflow: auto;
           }
-      data-focuszone-id="FocusZone498"
+      data-focuszone-id="FocusZone521"
     >
       <svg
         focusable="false"
@@ -487,7 +487,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
               & path {
                 display: none;
               }
-          id="xAxisGElementchart_497"
+          id="xAxisGElementchart_520"
           transform="translate(0, -35)"
         />
         <g
@@ -515,7 +515,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 opacity: 0.1;
                 stroke: rgb(179, 179, 179);
               }
-          id="yAxisGElementchart_497"
+          id="yAxisGElementchart_520"
           transform="translate(40, 0)"
         />
         <g>
@@ -562,7 +562,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone499"
+                data-focuszone-id="FocusZone522"
                 role="listbox"
               >
                 <div
@@ -878,7 +878,7 @@ exports[`Should reflect theme change 1`] = `
             overflow: hidden;
             width: 100%;
           }
-      id="chart_505"
+      id="chart_529"
       role="presentation"
     >
       <div
@@ -890,7 +890,7 @@ exports[`Should reflect theme change 1`] = `
             {
               overflow: auto;
             }
-        data-focuszone-id="FocusZone506"
+        data-focuszone-id="FocusZone530"
       >
         <svg
           focusable="false"
@@ -924,7 +924,7 @@ exports[`Should reflect theme change 1`] = `
                 & path {
                   display: none;
                 }
-            id="xAxisGElementchart_505"
+            id="xAxisGElementchart_529"
             transform="translate(0, -35)"
           />
           <g
@@ -952,7 +952,7 @@ exports[`Should reflect theme change 1`] = `
                   opacity: 0.1;
                   stroke: rgb(179, 179, 179);
                 }
-            id="yAxisGElementchart_505"
+            id="yAxisGElementchart_529"
             transform="translate(40, 0)"
           />
           <g>
@@ -999,7 +999,7 @@ exports[`Should reflect theme change 1`] = `
                       &:focus {
                         outline: none;
                       }
-                  data-focuszone-id="FocusZone507"
+                  data-focuszone-id="FocusZone531"
                   role="listbox"
                 >
                   <div
@@ -1290,7 +1290,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
 <div>
   <div
     aria-label="Graph has no data to display"
-    id="_VBC_empty510"
+    id="_VBC_empty534"
     role="alert"
     style="opacity: 0;"
   />
@@ -1314,7 +1314,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
           overflow: hidden;
           width: 100%;
         }
-    id="chart_511"
+    id="chart_535"
     role="presentation"
   >
     <div
@@ -1326,7 +1326,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
           {
             overflow: auto;
           }
-      data-focuszone-id="FocusZone512"
+      data-focuszone-id="FocusZone536"
     >
       <svg
         focusable="false"
@@ -1360,7 +1360,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
               & path {
                 display: none;
               }
-          id="xAxisGElementchart_511"
+          id="xAxisGElementchart_535"
           transform="translate(0, -35)"
         />
         <g
@@ -1388,7 +1388,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
                 opacity: 0.1;
                 stroke: rgb(179, 179, 179);
               }
-          id="yAxisGElementchart_511"
+          id="yAxisGElementchart_535"
           transform="translate(40, 0)"
         />
         <g>
@@ -1435,7 +1435,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone513"
+                data-focuszone-id="FocusZone537"
                 role="listbox"
               >
                 <div
@@ -1738,7 +1738,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
           overflow: hidden;
           width: 100%;
         }
-    id="chart_32"
+    id="chart_36"
     role="presentation"
   >
     <div
@@ -1750,7 +1750,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
           {
             overflow: auto;
           }
-      data-focuszone-id="FocusZone33"
+      data-focuszone-id="FocusZone37"
     >
       <svg
         focusable="false"
@@ -1784,7 +1784,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
               & path {
                 display: none;
               }
-          id="xAxisGElementchart_32"
+          id="xAxisGElementchart_36"
           transform="translate(0, -35)"
         />
         <g
@@ -1812,7 +1812,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
                 opacity: 0.1;
                 stroke: rgb(179, 179, 179);
               }
-          id="yAxisGElementchart_32"
+          id="yAxisGElementchart_36"
           transform="translate(40, 0)"
         />
         <g>
@@ -1859,7 +1859,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone34"
+                data-focuszone-id="FocusZone38"
                 role="listbox"
               >
                 <div
@@ -2162,7 +2162,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
           overflow: hidden;
           width: 100%;
         }
-    id="chart_37"
+    id="chart_42"
     role="presentation"
   >
     <div
@@ -2174,7 +2174,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
           {
             overflow: auto;
           }
-      data-focuszone-id="FocusZone38"
+      data-focuszone-id="FocusZone43"
     >
       <svg
         focusable="false"
@@ -2208,7 +2208,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
               & path {
                 display: none;
               }
-          id="xAxisGElementchart_37"
+          id="xAxisGElementchart_42"
           transform="translate(0, -35)"
         />
         <g
@@ -2236,7 +2236,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
                 opacity: 0.1;
                 stroke: rgb(179, 179, 179);
               }
-          id="yAxisGElementchart_37"
+          id="yAxisGElementchart_42"
           transform="translate(40, 0)"
         />
         <g>
@@ -2284,7 +2284,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone39"
+                data-focuszone-id="FocusZone44"
                 role="listbox"
               >
                 <div
@@ -2664,7 +2664,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2677,7 +2677,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2717,7 +2717,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -2745,7 +2745,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -2762,7 +2762,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#0078d4"
             height={51}
-            id="_VBC_bar_14"
+            id="_VBC_bar_15"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -2801,7 +2801,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#002050"
             height={255}
-            id="_VBC_bar_15"
+            id="_VBC_bar_16"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -2840,7 +2840,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#00188f"
             height={153}
-            id="_VBC_bar_16"
+            id="_VBC_bar_17"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -2898,7 +2898,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3374,7 +3374,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3387,7 +3387,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3427,7 +3427,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -3455,7 +3455,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -3472,7 +3472,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#0078d4"
             height={51}
-            id="_VBC_bar_8"
+            id="_VBC_bar_9"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -3511,7 +3511,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#002050"
             height={255}
-            id="_VBC_bar_9"
+            id="_VBC_bar_10"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -3550,7 +3550,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#00188f"
             height={153}
-            id="_VBC_bar_10"
+            id="_VBC_bar_11"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -3608,7 +3608,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4003,7 +4003,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_36"
+  id="chart_44"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4016,7 +4016,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone37"
+    data-focuszone-id="FocusZone45"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4056,7 +4056,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_36"
+        id="xAxisGElementchart_44"
         transform="translate(0, -35)"
       />
       <g
@@ -4084,7 +4084,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_36"
+        id="yAxisGElementchart_44"
         transform="translate(40, 0)"
       />
       <g>
@@ -4140,7 +4140,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone38"
+              data-focuszone-id="FocusZone46"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4456,7 +4456,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4469,7 +4469,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4509,7 +4509,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, -35)"
       />
       <g
@@ -4537,7 +4537,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -4593,7 +4593,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4909,7 +4909,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
         overflow: hidden;
         width: 100%;
       }
-  id="chart_16"
+  id="chart_20"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4922,7 +4922,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone21"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4962,7 +4962,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             & path {
               display: none;
             }
-        id="xAxisGElementchart_16"
+        id="xAxisGElementchart_20"
         transform="translate(0, -35)"
       />
       <g
@@ -4990,7 +4990,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_16"
+        id="yAxisGElementchart_20"
         transform="translate(40, 0)"
       />
       <g>
@@ -5029,7 +5029,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone18"
+        data-focuszone-id="FocusZone22"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -5342,7 +5342,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_7"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -5355,7 +5355,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone8"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -5395,7 +5395,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_7"
+        id="xAxisGElementchart_9"
         transform="translate(0, -35)"
       />
       <g
@@ -5423,7 +5423,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_7"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -5455,7 +5455,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_11"
+  id="chart_14"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -5468,7 +5468,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone12"
+    data-focuszone-id="FocusZone15"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -5508,7 +5508,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_11"
+        id="xAxisGElementchart_14"
         transform="translate(0, -35)"
       />
       <g
@@ -5536,7 +5536,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_11"
+        id="yAxisGElementchart_14"
         transform="translate(40, 0)"
       />
       <g>
@@ -5592,7 +5592,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone13"
+              data-focuszone-id="FocusZone16"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -5908,7 +5908,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_21"
+  id="chart_26"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -5921,7 +5921,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone22"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -5961,7 +5961,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_21"
+        id="xAxisGElementchart_26"
         transform="translate(0, -35)"
       />
       <g
@@ -5989,7 +5989,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_21"
+        id="yAxisGElementchart_26"
         transform="translate(40, 0)"
       />
       <g>
@@ -6045,7 +6045,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone23"
+              data-focuszone-id="FocusZone28"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -6361,7 +6361,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_26"
+  id="chart_32"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -6374,7 +6374,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone27"
+    data-focuszone-id="FocusZone33"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -6414,7 +6414,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_26"
+        id="xAxisGElementchart_32"
         transform="translate(0, -35)"
       />
       <g
@@ -6442,7 +6442,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_26"
+        id="yAxisGElementchart_32"
         transform="translate(40, 0)"
       />
       <g>
@@ -6498,7 +6498,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone28"
+              data-focuszone-id="FocusZone34"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -6814,7 +6814,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_31"
+  id="chart_38"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -6827,7 +6827,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone32"
+    data-focuszone-id="FocusZone39"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -6867,7 +6867,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_31"
+        id="xAxisGElementchart_38"
         transform="translate(0, -35)"
       />
       <g
@@ -6895,7 +6895,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_31"
+        id="yAxisGElementchart_38"
         transform="translate(40, 0)"
       />
       <g>
@@ -6951,7 +6951,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone33"
+              data-focuszone-id="FocusZone40"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
index c92745e47f0cb..7dd1a5a5a85e9 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -68,7 +68,6 @@ export interface IVerticalStackedBarChartState extends IBasestate {
   activeXAxisDataPoint: number | string;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
-  emptyChart?: boolean;
 }
 export class VerticalStackedBarChartBase extends React.Component<
   IVerticalStackedBarChartProps,
@@ -91,6 +90,7 @@ export class VerticalStackedBarChartBase extends React.Component<
   private _calloutAnchorPoint: IVSChartDataPoint | null;
   private _domainMargin: number;
   private _classNames: IProcessedStyleSet<IVerticalStackedBarChartStyles>;
+  private _emptyChartId: string;
 
   public constructor(props: IVerticalStackedBarChartProps) {
     super(props);
@@ -107,11 +107,6 @@ export class VerticalStackedBarChartBase extends React.Component<
       yCalloutValue: '',
       activeXAxisDataPoint: '',
       calloutLegend: '',
-      emptyChart: !(
-        this.props.data &&
-        this.props.data.length > 0 &&
-        this.props.data.filter(item => item.chartData.length === 0).length === 0
-      ),
     };
     warnDeprecations(COMPONENT_NAME, props, {
       colors: 'IVSChartDataPoint.color',
@@ -120,18 +115,13 @@ export class VerticalStackedBarChartBase extends React.Component<
     this._handleMouseOut = this._handleMouseOut.bind(this);
     this._calloutId = getId('callout');
     this._tooltipId = getId('VSBCTooltipId_');
-    if (
-      this.props.data &&
-      this.props.data.length &&
-      !this.props.data.filter((item: IVerticalStackedChartProps) => item.xAxisPoint === undefined).length
-    ) {
+    if (this._isChartEmpty()) {
       this._adjustProps();
       this._dataset = this._createDataSetLayer();
-    } else {
-      this.state = { ...this.state, emptyChart: true };
     }
     this._createLegendsForLine = memoizeFunction((data: IVerticalStackedChartProps[]) => this._getLineLegends(data));
     this._domainMargin = MIN_DOMAIN_MARGIN;
+    this._emptyChartId = getId('_VSBC_empty');
   }
 
   public componentDidUpdate(prevProps: IVerticalStackedBarChartProps): void {
@@ -146,7 +136,7 @@ export class VerticalStackedBarChartBase extends React.Component<
   }
 
   public render(): React.ReactNode {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       this._adjustProps();
       const _isHavingLines = this.props.data.some(
         (item: IVerticalStackedChartProps) => item.lineData && item.lineData.length > 0,
@@ -231,7 +221,12 @@ export class VerticalStackedBarChartBase extends React.Component<
       );
     }
     return (
-      <div id={getId('_VSBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
+      <div
+        id={this._emptyChartId}
+        role={'alert'}
+        style={{ opacity: '0' }}
+        aria-label={'Graph has no data to display'}
+      />
     );
   }
 
@@ -1042,4 +1037,12 @@ export class VerticalStackedBarChartBase extends React.Component<
       right: this.margins.right! + this._domainMargin,
     };
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.length > 0 &&
+      this.props.data.filter(item => item.chartData.length === 0).length === 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
index 5793e1137061b..a91183d816c10 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
@@ -70,7 +70,7 @@ const secondChartPoints: IVSChartDataPoint[] = [
   },
 ];
 
-const chartPoints: IVerticalStackedChartProps[] = [
+export const chartPoints: IVerticalStackedChartProps[] = [
   { chartData: firstChartPoints, xAxisPoint: 0 },
   { chartData: secondChartPoints, xAxisPoint: 20 },
 ];
@@ -84,7 +84,7 @@ const chartPoints2: IVerticalStackedChartProps[] = [
   },
 ];
 
-const emptyChartPoints: IVerticalStackedChartProps[] = [{ chartData: [], xAxisPoint: 0 }];
+export const emptyChartPoints: IVerticalStackedChartProps[] = [{ chartData: [], xAxisPoint: 0 }];
 
 describe('VerticalStackedBarChart snapShot testing', () => {
   it('renders VerticalStackedBarChart correctly', () => {
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
new file mode 100644
index 0000000000000..caae9733cb38e
--- /dev/null
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { emptyChartPoints, chartPoints } from './VerticalStackedBarChart.test';
+import { VerticalStackedBarChart } from './index';
+
+describe('Vertical stacked bar chart rendering', () => {
+  test('Should re-render the Vertical stacked bar chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<VerticalStackedBarChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_VSBC_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<VerticalStackedBarChart data={chartPoints} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_VSBC_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
index 91e13ed176a12..d2915a27babcf 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -69,7 +69,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -97,7 +97,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -280,7 +280,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -665,7 +665,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -678,7 +678,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -718,7 +718,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -746,7 +746,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -929,7 +929,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1232,7 +1232,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1245,7 +1245,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1285,7 +1285,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -1313,7 +1313,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -1515,7 +1515,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1930,7 +1930,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_41"
+  id="chart_50"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1943,7 +1943,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone42"
+    data-focuszone-id="FocusZone51"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1983,7 +1983,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_41"
+        id="xAxisGElementchart_50"
         transform="translate(0, -35)"
       />
       <g
@@ -2011,7 +2011,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_41"
+        id="yAxisGElementchart_50"
         transform="translate(40, 0)"
       />
       <g />
@@ -2064,7 +2064,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone43"
+              data-focuszone-id="FocusZone52"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2290,7 +2290,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2303,7 +2303,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2343,7 +2343,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, -35)"
       />
       <g
@@ -2371,7 +2371,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g />
@@ -2424,7 +2424,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2650,7 +2650,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
         overflow: hidden;
         width: 100%;
       }
-  id="chart_16"
+  id="chart_20"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2663,7 +2663,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone21"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2703,7 +2703,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
             & path {
               display: none;
             }
-        id="xAxisGElementchart_16"
+        id="xAxisGElementchart_20"
         transform="translate(0, -35)"
       />
       <g
@@ -2731,7 +2731,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_16"
+        id="yAxisGElementchart_20"
         transform="translate(40, 0)"
       />
       <g />
@@ -2767,7 +2767,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone18"
+        data-focuszone-id="FocusZone22"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2990,7 +2990,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_7"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3003,7 +3003,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone8"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3043,7 +3043,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_7"
+        id="xAxisGElementchart_9"
         transform="translate(0, -35)"
       />
       <g
@@ -3071,7 +3071,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_7"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g />
@@ -3100,7 +3100,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
         overflow: hidden;
         width: 100%;
       }
-  id="chart_11"
+  id="chart_14"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3113,7 +3113,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone12"
+    data-focuszone-id="FocusZone15"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3153,7 +3153,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
             & path {
               display: none;
             }
-        id="xAxisGElementchart_11"
+        id="xAxisGElementchart_14"
         transform="translate(0, -35)"
       />
       <g
@@ -3181,7 +3181,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_11"
+        id="yAxisGElementchart_14"
         transform="translate(40, 0)"
       />
       <g />
@@ -3234,7 +3234,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone13"
+              data-focuszone-id="FocusZone16"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3460,7 +3460,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
         overflow: hidden;
         width: 100%;
       }
-  id="chart_31"
+  id="chart_38"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3473,7 +3473,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone32"
+    data-focuszone-id="FocusZone39"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3513,7 +3513,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
             & path {
               display: none;
             }
-        id="xAxisGElementchart_31"
+        id="xAxisGElementchart_38"
         transform="translate(0, -35)"
       />
       <g
@@ -3541,7 +3541,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_31"
+        id="yAxisGElementchart_38"
         transform="translate(40, 0)"
       />
       <g />
@@ -3594,7 +3594,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone33"
+              data-focuszone-id="FocusZone40"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3820,7 +3820,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
         overflow: hidden;
         width: 100%;
       }
-  id="chart_21"
+  id="chart_26"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3833,7 +3833,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone22"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3873,7 +3873,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
             & path {
               display: none;
             }
-        id="xAxisGElementchart_21"
+        id="xAxisGElementchart_26"
         transform="translate(0, -35)"
       />
       <g
@@ -3901,7 +3901,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_21"
+        id="yAxisGElementchart_26"
         transform="translate(40, 0)"
       />
       <g />
@@ -3954,7 +3954,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone23"
+              data-focuszone-id="FocusZone28"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4180,7 +4180,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_26"
+  id="chart_32"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4193,7 +4193,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone27"
+    data-focuszone-id="FocusZone33"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4233,7 +4233,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_26"
+        id="xAxisGElementchart_32"
         transform="translate(0, -35)"
       />
       <g
@@ -4261,7 +4261,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_26"
+        id="yAxisGElementchart_32"
         transform="translate(40, 0)"
       />
       <g />
@@ -4314,7 +4314,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone28"
+              data-focuszone-id="FocusZone34"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4540,7 +4540,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_36"
+  id="chart_44"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4553,7 +4553,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone37"
+    data-focuszone-id="FocusZone45"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4593,7 +4593,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_36"
+        id="xAxisGElementchart_44"
         transform="translate(0, -35)"
       />
       <g
@@ -4621,7 +4621,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_36"
+        id="yAxisGElementchart_44"
         transform="translate(40, 0)"
       />
       <g />
@@ -4674,7 +4674,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone38"
+              data-focuszone-id="FocusZone46"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..2701e910e20c2
--- /dev/null
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap
@@ -0,0 +1,5231 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Vertical stacked bar chart rendering Should re-render the Vertical stacked bar chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_VSBC_empty5"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Vertical stacked bar chart rendering Should re-render the Vertical stacked bar chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    id="chart_6"
+    role="presentation"
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+          {
+            overflow: auto;
+          }
+      data-focuszone-id="FocusZone7"
+    >
+      <svg
+        focusable="false"
+        height="0"
+        style="display: block;"
+        width="0"
+      >
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+                width: 1px;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+          id="xAxisGElementchart_6"
+          transform="translate(0, -35)"
+        />
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+          id="yAxisGElementchart_6"
+          transform="translate(40, 0)"
+        />
+        <g />
+        <g />
+      </svg>
+    </div>
+    <div
+      class=
+
+          {
+            margin-left: 20px;
+            margin-top: 8px;
+          }
+    >
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
+            }
+      >
+        <div>
+          <div
+            style="position: relative;"
+          >
+            <div
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
+            >
+              <div
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
+                    }
+                data-focuszone-id="FocusZone8"
+                role="listbox"
+              >
+                <div
+                  class=
+                      ms-OverflowSet
+                      {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: unset;
+                        position: relative;
+                      }
+                  role="group"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="Metadata1"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="2"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: #0078d4;
+                              border-color: #0078d4;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #0078d4, #0078d4);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        Metadata1
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="Metadata2"
+                      aria-posinset="2"
+                      aria-selected="false"
+                      aria-setsize="2"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="-1"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: #00188f;
+                              border-color: #00188f;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #00188f, #00188f);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        Metadata2
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      class="ms-layer"
+    />
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart - mouse events Should render callout correctly on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0false"
+        >
+          <g
+            id="0-singleBar"
+          >
+            <rect
+              aria-label="2020/04/30. Metadata1, 40%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#0078d4"
+              height={196.15384615384616}
+              key="0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={78.84615384615384}
+            />
+            <rect
+              aria-label="2020/04/30. Metadata2, 5%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#00188f"
+              height={24.51923076923077}
+              key="1"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={54.326923076923066}
+            />
+          </g>
+          <text
+            aria-label="Total: 45"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={56}
+            y={48.326923076923066}
+          >
+            45
+          </text>
+        </g>
+        <g
+          key="1false"
+        >
+          <g
+            id="1-singleBar"
+          >
+            <rect
+              aria-label="2020/04/30. Metadata1, 30%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#0078d4"
+              height={147.1153846153846}
+              key="1"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={127.88461538461539}
+            />
+            <rect
+              aria-label="2020/04/30. Metadata2, 20%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#00188f"
+              height={98.07692307692308}
+              key="2"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={29.807692307692307}
+            />
+          </g>
+          <text
+            aria-label="Total: 50"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={-36}
+            y={23.807692307692307}
+          >
+            50
+          </text>
+        </g>
+      </g>
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone5"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata2
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                display: grid;
+                overflow: hidden;
+                padding-bottom: 10px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 11px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                }
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #605e5c;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: 0.8;
+                  }
+            >
+              2020/04/30
+               
+            </div>
+          </div>
+          <div
+            className=""
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    border-left: 4px solid #0078d4;
+                    color: #323130;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 28px;
+                    font-weight: 600;
+                    line-height: 22px;
+                    margin-top: 13px;
+                    padding-left: 8px;
+                  }
+            >
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                    }
+              >
+                Metadata1
+              </div>
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #0078d4;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 28px;
+                      font-weight: bold;
+                      line-height: 36px;
+                    }
+              >
+                40%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart - mouse events Should render customized callout on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0false"
+        >
+          <g
+            id="0-singleBar"
+          >
+            <rect
+              aria-label="2020/04/30. Metadata1, 40%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#0078d4"
+              height={196.15384615384616}
+              key="0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={78.84615384615384}
+            />
+            <rect
+              aria-label="2020/04/30. Metadata2, 5%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#00188f"
+              height={24.51923076923077}
+              key="1"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={54.326923076923066}
+            />
+          </g>
+          <text
+            aria-label="Total: 45"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={56}
+            y={48.326923076923066}
+          >
+            45
+          </text>
+        </g>
+        <g
+          key="1false"
+        >
+          <g
+            id="1-singleBar"
+          >
+            <rect
+              aria-label="2020/04/30. Metadata1, 30%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#0078d4"
+              height={147.1153846153846}
+              key="1"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={127.88461538461539}
+            />
+            <rect
+              aria-label="2020/04/30. Metadata2, 20%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#00188f"
+              height={98.07692307692308}
+              key="2"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={29.807692307692307}
+            />
+          </g>
+          <text
+            aria-label="Total: 50"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={-36}
+            y={23.807692307692307}
+          >
+            50
+          </text>
+        </g>
+      </g>
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone5"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata2
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "legend": "Metadata1",
+  "data": 40,
+  "color": "#0078d4",
+  "xAxisCalloutData": "2020/04/30",
+  "yAxisCalloutData": "40%"
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart - mouse events Should render customized callout per stack on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0true"
+        >
+          <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%. Line1, 15."
+            data-is-focusable={true}
+            id="0-singleBar"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          >
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#0078d4"
+              height={196.15384615384616}
+              key="0"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={78.84615384615384}
+            />
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#00188f"
+              height={24.51923076923077}
+              key="1"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={54.326923076923066}
+            />
+          </g>
+          <text
+            aria-label="Total: 45"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={56}
+            y={48.326923076923066}
+          >
+            45
+          </text>
+        </g>
+        <g
+          key="1true"
+        >
+          <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%. Line1, 30."
+            data-is-focusable={true}
+            id="1-singleBar"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          >
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#0078d4"
+              height={147.1153846153846}
+              key="1"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={127.88461538461539}
+            />
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#00188f"
+              height={98.07692307692308}
+              key="2"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={29.807692307692307}
+            />
+          </g>
+          <text
+            aria-label="Total: 50"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={-36}
+            y={23.807692307692307}
+          >
+            50
+          </text>
+        </g>
+      </g>
+      <g>
+        <line
+          key="0-1-line"
+          opacity={1}
+          stroke="#ffb900"
+          strokeLinecap="round"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          x1={56}
+          x2={-36}
+          y1={201.4423076923077}
+          y2={127.88461538461539}
+        />
+        <circle
+          cx={56}
+          cy={201.4423076923077}
+          fill="#ffffff"
+          key="0-0-dot"
+          onMouseOver={[Function]}
+          r={8}
+          stroke="#ffb900"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          visibility="visibility"
+        />
+        <circle
+          cx={-36}
+          cy={127.88461538461539}
+          fill="#ffffff"
+          key="0-1-dot"
+          onMouseOver={[Function]}
+          r={8}
+          stroke="#ffb900"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          visibility="hidden"
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone5"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="Line1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #ffb900;
+                      border-color: #ffb900;
+                      border: 1px solid;
+                      content: ;
+                      height: 4px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #ffb900, #ffb900);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Line1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="2"
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={3}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata2
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "chartData": [
+    {
+      "legend": "Metadata1",
+      "data": 40,
+      "color": "#0078d4",
+      "xAxisCalloutData": "2020/04/30",
+      "yAxisCalloutData": "40%"
+    },
+    {
+      "legend": "Metadata2",
+      "data": 5,
+      "color": "#00188f",
+      "xAxisCalloutData": "2020/04/30",
+      "yAxisCalloutData": "5%"
+    }
+  ],
+  "xAxisPoint": 0,
+  "lineData": [
+    {
+      "y": 15,
+      "legend": "Line1",
+      "color": "#ffb900",
+      "data": 15,
+      "shouldDrawBorderBottom": true
+    }
+  ]
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_50"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone51"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_50"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_50"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone52"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChart correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_20"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone21"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_20"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_20"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone22"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata2
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_14"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone15"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_14"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_14"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone16"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_38"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone39"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_38"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_38"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone40"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_26"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone27"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_26"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_26"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone28"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_32"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone33"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_32"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_32"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone34"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_44"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone45"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_44"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_44"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone46"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;

From ed5421e62b010bfb8cb368757c2c34baccb0076e Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Tue, 1 Aug 2023 14:05:06 +0200
Subject: [PATCH 37/37] release (#28696)

---
 apps/public-docsite-v9/package.json                        | 1 +
 ...-tags-preview-7c233ae6-998d-44ce-811e-7f13798be096.json | 7 +++++++
 packages/react-components/react-tags-preview/package.json  | 1 -
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-react-tags-preview-7c233ae6-998d-44ce-811e-7f13798be096.json

diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json
index 09d8b9b6dd484..37ac0d9725e06 100644
--- a/apps/public-docsite-v9/package.json
+++ b/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": "*",
diff --git a/change/@fluentui-react-tags-preview-7c233ae6-998d-44ce-811e-7f13798be096.json b/change/@fluentui-react-tags-preview-7c233ae6-998d-44ce-811e-7f13798be096.json
new file mode 100644
index 0000000000000..e64c37e53428e
--- /dev/null
+++ b/change/@fluentui-react-tags-preview-7c233ae6-998d-44ce-811e-7f13798be096.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: release preview package",
+  "packageName": "@fluentui/react-tags-preview",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tags-preview/package.json b/packages/react-components/react-tags-preview/package.json
index a58fa43cf0f53..4a68bb8191ba6 100644
--- a/packages/react-components/react-tags-preview/package.json
+++ b/packages/react-components/react-tags-preview/package.json
@@ -1,7 +1,6 @@
 {
   "name": "@fluentui/react-tags-preview",
   "version": "0.0.0",
-  "private": true,
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",