chore(react-portal): refactor portals creation

[layershifter]

Previous Behavior

New Behavior

Related Issue(s)

• Fixes #

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-combobox Combobox (including child components)	104.398 kB 34.199 kB	103.791 kB 34.004 kB	-607 B -195 B
react-combobox Dropdown (including child components)	105.011 kB 34.125 kB	104.404 kB 33.937 kB	-607 B -188 B
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	220.616 kB 63.902 kB	220.011 kB 63.67 kB	-605 B -232 B
react-components react-components: entire library	1.16 MB 290.616 kB	1.16 MB 290.432 kB	-520 B -184 B
react-datepicker-compat DatePicker Compat	224.165 kB 63.423 kB	223.567 kB 63.276 kB	-598 B -147 B
react-menu Menu (including children components)	152.661 kB 46.116 kB	152.055 kB 45.924 kB	-606 B -192 B
react-menu Menu (including selectable components)	155.342 kB 46.598 kB	154.736 kB 46.405 kB	-606 B -193 B
react-popover Popover	128.904 kB 40.314 kB	128.403 kB 40.171 kB	-501 B -143 B
react-portal Portal	14.563 kB 5.118 kB	18.752 kB 6.736 kB	4.189 kB 1.618 kB
react-tag-picker @fluentui/react-tag-picker - package	184.106 kB 55.428 kB	183.512 kB 55.294 kB	-594 B -134 B
react-timepicker-compat TimePicker	107.387 kB 35.758 kB	106.786 kB 35.553 kB	-601 B -205 B
react-toast Toast (including Toaster)	98.338 kB 29.591 kB	97.732 kB 29.406 kB	-606 B -185 B
react-tooltip Tooltip	55.517 kB 19.515 kB	55.018 kB 19.393 kB	-499 B -122 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.384 kB 8.891 kB
react-input Input	28.014 kB 9.444 kB
react-list-preview List	89.148 kB 26.597 kB
react-list-preview ListItem	112.707 kB 33.428 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.169 kB 12.538 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.016 kB 9.524 kB
react-tags TagGroup	82.719 kB 24.524 kB
react-textarea Textarea	26.572 kB 9.755 kB

_{🤖 This report was generated against 3d044da6af6296382d423ae205a4cac2b5caeef0}

[fabricteam]

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 2 screenshots

Image Name	Diff(in Pixels)	Image Type
Avatar Converged.badgeMask.chromium.png	5	Changed
Avatar Converged.Badge Mask RTL.chromium.png	2	Changed

Dialog 4 screenshots

Image Name	Diff(in Pixels)	Image Type
Dialog.nested.chromium.png	12768	Changed
Dialog.Nested RTL.chromium.png	12727	Changed
Dialog.Nested Dark Mode.chromium.png	4761	Changed
Dialog.Nested High Contrast.chromium.png	9003	Changed

Drawer 1 screenshots

Image Name	Diff(in Pixels)	Image Type
Drawer.Full Overlay Dark Mode.chromium.png	970	Changed