fix(react-positioning): update writeArrowUpdates to correctly resolve arrow positioning

[mainframev]

Updates logic inside writeArrowUpdates to correctly apply positioning offsets for X and Y. The story added for demonstration purposes and easier code review and can be dropped after.

Previous Behavior

Screen.Recording.2024-11-12.at.16.44.43.mov

New Behavior

Screen.Recording.2024-11-12.at.16.45.35.mov

Related Issue(s)

• Fixes [Bug]: The arrow on components such as Teaching Popover Surface and Tooltip is not always showing in the correct place when fallback positions are used #32804

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-combobox Combobox (including child components)	104.387 kB 34.201 kB	104.409 kB 34.217 kB	22 B 16 B
react-combobox Dropdown (including child components)	105.011 kB 34.126 kB	105.033 kB 34.142 kB	22 B 16 B
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	220.616 kB 63.902 kB	220.638 kB 63.918 kB	22 B 16 B
react-components react-components: entire library	1.162 MB 291.14 kB	1.162 MB 291.153 kB	22 B 13 B
react-datepicker-compat DatePicker Compat	224.165 kB 63.423 kB	224.187 kB 63.434 kB	22 B 11 B
react-menu Menu (including children components)	152.661 kB 46.116 kB	152.683 kB 46.128 kB	22 B 12 B
react-menu Menu (including selectable components)	155.342 kB 46.598 kB	155.364 kB 46.61 kB	22 B 12 B
react-popover Popover	128.904 kB 40.314 kB	128.926 kB 40.326 kB	22 B 12 B
react-positioning usePositioning	27.057 kB 9.698 kB	27.079 kB 9.71 kB	22 B 12 B
react-tag-picker @fluentui/react-tag-picker - package	184.091 kB 55.425 kB	184.113 kB 55.436 kB	22 B 11 B
react-teaching-popover TeachingPopover	90.611 kB 27.593 kB	90.633 kB 27.604 kB	22 B 11 B
react-timepicker-compat TimePicker	107.376 kB 35.759 kB	107.398 kB 35.772 kB	22 B 13 B
react-tooltip Tooltip	55.895 kB 19.599 kB	55.917 kB 19.611 kB	22 B 12 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-avatar Avatar	49.303 kB 15.815 kB
react-avatar AvatarGroup	20.106 kB 7.968 kB
react-avatar AvatarGroupItem	63.447 kB 20.034 kB
react-breadcrumb @fluentui/react-breadcrumb - package	114.291 kB 31.695 kB
react-checkbox Checkbox	35.118 kB 12.077 kB
react-components react-components: Button, FluentProvider & webLightTheme	69.21 kB 20.174 kB
react-components react-components: FluentProvider & webLightTheme	44.447 kB 14.59 kB
react-dialog Dialog (including children components)	100.297 kB 30.076 kB
react-field Field	23.399 kB 8.898 kB
react-input Input	28.014 kB 9.444 kB
react-list-preview List	89.164 kB 26.599 kB
react-list-preview ListItem	112.731 kB 33.432 kB
react-overflow hooks only	12.808 kB 4.819 kB
react-persona Persona	56.194 kB 17.695 kB
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB
react-progress ProgressBar	17.084 kB 6.891 kB
react-radio Radio	32.672 kB 10.343 kB
react-radio RadioGroup	15.762 kB 6.423 kB
react-select Select	27.732 kB 10.124 kB
react-slider Slider	37.52 kB 12.621 kB
react-spinbutton SpinButton	36.06 kB 11.815 kB
react-switch Switch	35.319 kB 11.314 kB
react-table DataGrid	161.034 kB 45.71 kB
react-table Table (Primitives only)	42.666 kB 13.854 kB
react-table Table as DataGrid	131.869 kB 36.57 kB
react-table Table (Selection only)	70.536 kB 19.999 kB
react-table Table (Sort only)	69.179 kB 19.61 kB
react-tags InteractionTag	15.199 kB 6.157 kB
react-tags Tag	29.072 kB 9.55 kB
react-tags TagGroup	82.719 kB 24.524 kB
react-textarea Textarea	26.572 kB 9.755 kB
react-tree FlatTree	145.048 kB 41.691 kB
react-tree PersonaFlatTree	145.736 kB 41.798 kB
react-tree PersonaTree	141.967 kB 40.615 kB
react-tree Tree	141.279 kB 40.522 kB

_{🤖 This report was generated against 72ede6a929015e7111c2833624cce7c571b1936c}

[github-actions]

Pull request demo site: URL

[layershifter]

There are valid visual regressions, please address them first.

[layershifter]

Let's move the story to VR tests. Other than, LGTM 👍