feat(react-menu): integrate useSafeZoneArea()

[layershifter]

• feat(positioning): implement useSafeZoneArea() hook
• PR review, tests
• add UTs for SVG update
• feat(react-menu): integrate useSafeZoneArea()

Previous Behavior

New Behavior

Related Issue(s)

• Fixes #

[github-actions]

Pull request demo site: URL

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	227.132 kB 65.811 kB	234.486 kB 67.815 kB	7.354 kB 2.004 kB
react-components react-components: entire library	1.23 MB 309.987 kB	1.237 MB 312.155 kB	6.571 kB 2.168 kB
react-menu Menu (including children components)	156.997 kB 47.203 kB	164.348 kB 49.628 kB	7.351 kB 2.425 kB
react-menu Menu (including selectable components)	159.979 kB 47.804 kB	167.33 kB 50.236 kB	7.351 kB 2.432 kB
react-positioning useSafeZoneArea	0 B 0 B	12.1 kB 4.678 kB	🆕 New entry

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-avatar Avatar	49.376 kB 15.835 kB
react-avatar AvatarGroup	20.177 kB 7.974 kB
react-avatar AvatarGroupItem	63.52 kB 20.047 kB
react-breadcrumb @fluentui/react-breadcrumb - package	114.855 kB 31.795 kB
react-checkbox Checkbox	35.189 kB 12.093 kB
react-combobox Combobox (including child components)	107.617 kB 35.006 kB
react-combobox Dropdown (including child components)	108.241 kB 34.952 kB
react-components react-components: Button, FluentProvider & webLightTheme	69.732 kB 20.259 kB
react-components react-components: FluentProvider & webLightTheme	44.567 kB 14.62 kB
react-datepicker-compat DatePicker Compat	226.856 kB 64.285 kB
react-dialog Dialog (including children components)	102.102 kB 30.643 kB
react-field Field	23.515 kB 8.917 kB
react-input Input	28.085 kB 9.456 kB
react-list List	89.47 kB 26.644 kB
react-list ListItem	112.813 kB 33.432 kB
react-overflow hooks only	12.832 kB 4.828 kB
react-persona Persona	56.267 kB 17.712 kB
react-popover Popover	132.54 kB 41.322 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-positioning usePositioning	28.865 kB 10.146 kB
react-progress ProgressBar	17.156 kB 6.9 kB
react-radio Radio	32.743 kB 10.357 kB
react-radio RadioGroup	15.831 kB 6.446 kB
react-select Select	27.804 kB 10.14 kB
react-slider Slider	38.3 kB 12.836 kB
react-spinbutton SpinButton	35.284 kB 11.765 kB
react-swatch-picker @fluentui/react-swatch-picker - package	106.687 kB 30.807 kB
react-switch Switch	35.371 kB 11.336 kB
react-table DataGrid	161.242 kB 45.689 kB
react-table Table (Primitives only)	42.764 kB 13.871 kB
react-table Table as DataGrid	132.05 kB 36.604 kB
react-table Table (Selection only)	70.632 kB 20.011 kB
react-table Table (Sort only)	69.275 kB 19.623 kB
react-tag-picker @fluentui/react-tag-picker - package	188.516 kB 56.55 kB
react-tags InteractionTag	15.506 kB 6.232 kB
react-tags Tag	30.306 kB 9.905 kB
react-tags TagGroup	83.817 kB 24.856 kB
react-teaching-popover TeachingPopover	102.316 kB 30.658 kB
react-textarea Textarea	26.652 kB 9.764 kB
react-timepicker-compat TimePicker	110.6 kB 36.56 kB
react-tooltip Tooltip	58.64 kB 20.312 kB
react-tree FlatTree	148.593 kB 42.623 kB
react-tree PersonaFlatTree	149.345 kB 42.738 kB
react-tree PersonaTree	145.604 kB 41.626 kB
react-tree Tree	144.858 kB 41.498 kB

_{🤖 This report was generated against 8d9faeb128c66042497f54ba87602747e1171773}

[github-actions]

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Menu Converged - split item 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Menu Converged - split item.default.submenu open.chromium.png	777	Changed
vr-tests-react-components/Menu Converged - split item.default - RTL.submenu open.chromium.png	775	Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png	725	Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	309	Changed

vr-tests-react-components/Positioning (safe area) 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning (safe area).using safe zone area.chromium.png	0	Added

vr-tests-react-components/TagPicker 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png	1321	Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png	678	Changed

There were 2 duplicate changes discarded. Check the build logs for more information.