feature(react-tree): preventScroll on navigation

[bsunderhus]

Previous Behavior

In the nested tree when navigating, we focus on the TreeItem itself and since that item includes all its children nested inside of it the browser will automatically scroll that whole item into view (see #31557).

New Behavior

1. adds preventScroll and isScrollPrevented methods to onNavigation data parameter. When preventScroll is invoked then the navigation focus will not scroll to the element while focusing (see preventScroll)

With this feature now it's possible to maintain navigation as is while opting out of the scroll mechanism, allowing the user to create its own (in the case of #31557 we could just scroll into the TreeItemLayout instead of the TreeItem when navigating)

const handleNavigation: TreeProps['onNavigation'] = (_event, data) => {
  data.preventScroll();
  // request animation frame to wait for the active element to be updated
  targetDocument?.defaultView?.requestAnimationFrame(() => {
    const layoutElement = targetDocument?.activeElement?.querySelector<HTMLElement>(
      `.${treeItemLayoutClassNames.root}`,
    );
    if (layoutElement && !isElementInViewport(layoutElement)) {
      layoutElement.scrollIntoView({ block: 'nearest', behavior: 'auto' });
    }
  });
};

Related Issue(s)

• Fixes [Bug]: Scroll jump when navigating nested tree using keyboard #31557

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	mount	76	87	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	638	626	5000
Button	mount	309	308	5000
Field	mount	1134	1141	5000
FluentProvider	mount	692	702	5000
FluentProviderWithTheme	mount	76	87	10	Possible regression
FluentProviderWithTheme	virtual-rerender	42	34	10
FluentProviderWithTheme	virtual-rerender-with-unmount	74	76	10
MakeStyles	mount	881	869	50000
Persona	mount	1766	1731	5000
SpinButton	mount	1424	1416	5000
SwatchPicker	mount	1549	1541	5000

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.092 MB 269.585 kB	1.092 MB 269.637 kB	110 B 52 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	69.141 kB 20.157 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	212.636 kB 61.23 kB
react-components react-components: FluentProvider & webLightTheme	44.442 kB 14.607 kB
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB

_{🤖 This report was generated against f0fd89b619b2e8bb520b08f1face7aaad9adfdb2}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.