fix(react-aria): Updating scrollIntoView to support ancestral scroll parents + scrollMargin computed styles

[stevencomsft]

Previous Behavior

If using Listbox as a standalone in a scroll container, the scrollIntoView logic doesn't work as it only looks at the listbox parent directly, and not any ancestral scroll containers. Additionally, it does not take into account the scrollMargin styling set on Options

New Behavior

Listboxes will now recursively find their first scrollable parent and take scrollMargin values into account when calculating scrollTo values

Tested with new unit tests and manual tests using existing storybook entries for combobox

ComboboxScrollIntoView.mp4

ListboxScrollIntoView_NoFilterOrScrollMargin.mp4

ListboxScrollIntoView_FilterAndScrollMargins.mp4

[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.

[stevencomsft]

This is an additional fix to go along with #31140 to make Listbox work better as a standalone component

[ling1726]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 4 pipeline(s).

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	767	752	5000
Button	mount	363	362	5000
Field	mount	1329	1273	5000
FluentProvider	mount	869	914	5000
FluentProviderWithTheme	mount	144	142	10
FluentProviderWithTheme	virtual-rerender	49	48	10
FluentProviderWithTheme	virtual-rerender-with-unmount	149	137	10
MakeStyles	mount	1066	1055	50000
Persona	mount	2205	2083	5000
SpinButton	mount	1738	1720	5000
SwatchPicker	mount	2093	2131	5000

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-combobox Combobox (including child components)	103.128 kB 33.283 kB	103.58 kB 33.44 kB	452 B 157 B
react-combobox Dropdown (including child components)	104.606 kB 33.244 kB	105.052 kB 33.394 kB	446 B 150 B
react-components react-components: entire library	1.096 MB 265.999 kB	1.097 MB 266.16 kB	449 B 161 B
react-tag-picker-preview @fluentui/react-tag-picker-preview - package	185.641 kB 54.844 kB	186.09 kB 55.008 kB	449 B 164 B
react-timepicker-compat TimePicker	105.149 kB 34.653 kB	105.6 kB 34.784 kB	451 B 131 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	100.94 kB 30.574 kB
react-alert Alert	83.737 kB 23.475 kB
react-avatar Avatar	50.175 kB 15.944 kB
react-avatar AvatarGroup	19.702 kB 7.794 kB
react-avatar AvatarGroupItem	64.829 kB 20.272 kB
react-breadcrumb @fluentui/react-breadcrumb - package	116.817 kB 32.173 kB
react-button Button	39.513 kB 11.17 kB
react-button CompoundButton	46.874 kB 12.662 kB
react-button MenuButton	44.292 kB 12.544 kB
react-button SplitButton	52.306 kB 14.135 kB
react-button ToggleButton	56.558 kB 13.068 kB
react-card Card - All	103.992 kB 29.35 kB
react-card Card	97.003 kB 27.61 kB
react-card CardFooter	13.971 kB 5.626 kB
react-card CardHeader	16.214 kB 6.386 kB
react-card CardPreview	14.015 kB 5.752 kB
react-components react-components: Button, FluentProvider & webLightTheme	71.104 kB 20.52 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	221.098 kB 62.406 kB
react-components react-components: FluentProvider & webLightTheme	43.591 kB 14.356 kB
react-datepicker-compat DatePicker Compat	227.367 kB 63.503 kB
react-dialog Dialog (including children components)	100.478 kB 30.071 kB
react-infobutton InfoButton	139.602 kB 43.628 kB
react-infobutton InfoLabel	143.417 kB 44.844 kB
react-menu Menu (including children components)	153.638 kB 46.013 kB
react-menu Menu (including selectable components)	156.324 kB 46.568 kB
react-message-bar MessageBar (all components)	24.204 kB 8.983 kB
react-persona Persona	57.066 kB 17.821 kB
react-popover Popover	127.849 kB 40.049 kB
react-portal-compat PortalCompatProvider	7.944 kB 2.588 kB
react-table DataGrid	168.508 kB 46.729 kB
react-table Table (Primitives only)	45.324 kB 14.116 kB
react-table Table as DataGrid	137.912 kB 37.14 kB
react-table Table (Selection only)	76.328 kB 20.545 kB
react-table Table (Sort only)	74.971 kB 20.148 kB
react-tags InteractionTag	15.299 kB 6.08 kB
react-tags Tag	29.092 kB 9.418 kB
react-tags TagGroup	82.044 kB 24.39 kB
react-toast Toast (including Toaster)	98.381 kB 29.706 kB

_{🤖 This report was generated against dfcce5778a439feb180a4b1d33088068fd17caa5}

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main