Skip to content

chore/react portal 19 attempt3 #34869

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from

Conversation

layershifter
Copy link
Member

  • chore(react-portal): add more tests for Portal
  • restore changes
  • add test
  • update impl of setVirtualParent
  • improve stories
  • update implementation

Previous Behavior

New Behavior

Related Issue(s)

  • Fixes #

Copy link

github-actions bot commented Jul 18, 2025

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-combobox
Combobox (including child components)
106.069 kB
34.498 kB
106.894 kB
34.769 kB
825 B
271 B
react-combobox
Dropdown (including child components)
106.699 kB
34.413 kB
107.524 kB
34.698 kB
825 B
285 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
235.687 kB
68.205 kB
236.512 kB
68.472 kB
825 B
267 B
react-components
react-components: entire library
1.273 MB
320.869 kB
1.274 MB
321.13 kB
825 B
261 B
react-datepicker-compat
DatePicker Compat
225.772 kB
63.867 kB
226.597 kB
64.094 kB
825 B
227 B
react-menu
Menu (including children components)
164.126 kB
49.677 kB
164.951 kB
49.924 kB
825 B
247 B
react-menu
Menu (including selectable components)
167.108 kB
50.264 kB
167.933 kB
50.524 kB
825 B
260 B
react-popover
Popover
131.354 kB
40.872 kB
132.179 kB
41.112 kB
825 B
240 B
react-portal
Portal
14.567 kB
5.104 kB
15.396 kB
5.363 kB
829 B
259 B
react-tag-picker
@fluentui/react-tag-picker - package
187.417 kB
56.185 kB
188.242 kB
56.425 kB
825 B
240 B
react-timepicker-compat
TimePicker
109.052 kB
36.053 kB
109.877 kB
36.31 kB
825 B
257 B
react-toast
Toast (including Toaster)
102.637 kB
30.72 kB
103.462 kB
30.954 kB
825 B
234 B
react-tooltip
Tooltip
57.009 kB
19.777 kB
57.834 kB
20.012 kB
825 B
235 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
keyboard-key
keyboard-key package
3.746 kB
1.928 kB
keyboard-keys
Multiple keyCodes
50 B
70 B
keyboard-keys
Multiple keys
87 B
94 B
keyboard-keys
Single key
44 B
64 B
keyboard-keys
Single keyCode
39 B
59 B
priority-overflow
createOverflowManager
4.481 kB
1.864 kB
react
ActivityItem
71.196 kB
23.345 kB
react
Announced
38.466 kB
13.274 kB
react
Autofill
15.42 kB
4.766 kB
react
Breadcrumb
200.704 kB
59.591 kB
react
Button
194.253 kB
55.877 kB
react
ButtonGrid
179.141 kB
53.883 kB
react
Calendar
121.126 kB
36.822 kB
react
Callout
84.233 kB
27.586 kB
react
Check
53.182 kB
17.832 kB
react
Checkbox
59.948 kB
19.872 kB
react
ChoiceGroup
65.458 kB
21.462 kB
react
ChoiceGroupOption
58.745 kB
19.351 kB
react
Coachmark
92.652 kB
29.303 kB
react
Color
7.789 kB
3.127 kB
react
ColorPicker
134.856 kB
42.108 kB
react
ComboBox
250.586 kB
71.503 kB
react
CommandBar
201.76 kB
59.381 kB
react
ContextualMenu
154.128 kB
47.559 kB
react
DatePicker
183.167 kB
55.875 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
229.851 kB
65.759 kB
react
Dialog
210.059 kB
62.349 kB
react
Divider
19.582 kB
6.838 kB
react
DocumentCard
215.742 kB
63.648 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.28 kB
11.488 kB
react
Dropdown
233.008 kB
67.935 kB
react
ExtendedPicker
96.823 kB
27.866 kB
react
Fabric
41.722 kB
14.34 kB
react
Facepile
209.276 kB
62.369 kB
react
FloatingPicker
240.764 kB
68.214 kB
react
FocusTrapZone
16.978 kB
5.889 kB
react
FocusZone
55.1 kB
17.451 kB
react
Grid
179.141 kB
53.883 kB
react
GroupedList
135.012 kB
40.664 kB
react
GroupedListV2
122.629 kB
37.753 kB
react
HoverCard
96.718 kB
30.685 kB
react
Icon
51.863 kB
17.261 kB
react
Icons
66.339 kB
24.386 kB
react
Image
46.877 kB
15.692 kB
react
Keytip
81.241 kB
26.671 kB
react
KeytipData
14.032 kB
4.582 kB
react
KeytipLayer
103.029 kB
31.896 kB
react
Keytips
105.801 kB
32.898 kB
react
Label
38.318 kB
13.239 kB
react
Layer
48.077 kB
16.346 kB
react
Link
39.659 kB
13.651 kB
react
List
39.346 kB
12.454 kB
react
MarqueeSelection
74.484 kB
22.396 kB
react
MessageBar
189.287 kB
56.32 kB
react
Modal
93.678 kB
30.217 kB
react
Nav
186.724 kB
55.713 kB
react
OverflowSet
33.336 kB
11.279 kB
react
Overlay
40.879 kB
14.075 kB
react
Panel
200.226 kB
59.327 kB
react
Persona
114.513 kB
36.43 kB
react
PersonaCoin
114.513 kB
36.43 kB
react
PersonaPresence
58.052 kB
19.371 kB
react
Pickers
297.723 kB
82.966 kB
react
Pivot
187.621 kB
56.485 kB
react
Popup
12.294 kB
4.195 kB
react
Positioning
22.764 kB
7.683 kB
react
PositioningContainer
73.415 kB
23.685 kB
react
ProgressIndicator
39.471 kB
13.526 kB
react
Rating
82.056 kB
26.086 kB
react
Fluent UI React (entire library)
1.019 MB
283.073 kB
react
ResizeGroup
13.338 kB
4.377 kB
react
ResponsiveMode
8.13 kB
2.966 kB
react
ScrollablePane
55.535 kB
17.715 kB
react
SearchBox
187.523 kB
55.912 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
231.249 kB
67.169 kB
react
Selection
42.418 kB
12.26 kB
react
Separator
35.359 kB
12.13 kB
react
Shimmer
49.237 kB
16.255 kB
react
ShimmeredDetailsList
240.633 kB
68.513 kB
react
Slider
57.615 kB
19.194 kB
react
SpinButton
191.196 kB
56.998 kB
react
Spinner
41.753 kB
14.466 kB
react
Stack
42.03 kB
14.386 kB
react
Sticky
32.577 kB
10.488 kB
react
Styling
46.033 kB
15.135 kB
react
SwatchColorPicker
189.536 kB
57.41 kB
react
TeachingBubble
204.538 kB
60.3 kB
react
Text
36.886 kB
12.806 kB
react
TextField
80.768 kB
25.3 kB
react
Theme
43.486 kB
14.168 kB
react
ThemeGenerator
12.384 kB
4.116 kB
react
TimePicker
240.414 kB
69.299 kB
react
Toggle
46.189 kB
15.954 kB
react
Tooltip
87.013 kB
28.144 kB
react
Utilities
82.932 kB
25.149 kB
react
Viewport
23.872 kB
7.642 kB
react
WeeklyDayPicker
101.318 kB
31.639 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
108.383 kB
33.152 kB
react-aria
ARIA - Default
237 B
181 B
react-avatar
Avatar
48.518 kB
15.508 kB
react-avatar
AvatarGroup
19.235 kB
7.617 kB
react-avatar
AvatarGroupItem
62.662 kB
19.727 kB
react-badge
Badge
25.06 kB
8.242 kB
react-badge
CounterBadge
25.84 kB
8.517 kB
react-badge
PresenceBadge
24.929 kB
9.147 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
114.212 kB
31.517 kB
react-button
Button
36.705 kB
10.508 kB
react-button
CompoundButton
43.117 kB
11.812 kB
react-button
MenuButton
41.6 kB
11.902 kB
react-button
SplitButton
49.667 kB
13.477 kB
react-button
ToggleButton
52.636 kB
12.285 kB
react-calendar-compat
Calendar Compat
149.756 kB
39.957 kB
react-card
Card - All
101.577 kB
28.578 kB
react-card
Card
94.223 kB
26.749 kB
react-card
CardFooter
13.662 kB
5.517 kB
react-card
CardHeader
16.195 kB
6.38 kB
react-card
CardPreview
13.729 kB
5.645 kB
react-checkbox
Checkbox
34.335 kB
11.786 kB
react-color-picker
ColorArea
49.32 kB
17.32 kB
react-color-picker
ColorPicker
17.95 kB
7.143 kB
react-color-picker
ColorSlider
41.493 kB
15.375 kB
react-components
react-components: Button, FluentProvider & webLightTheme
68.79 kB
19.902 kB
react-components
react-components: FluentProvider & webLightTheme
43.624 kB
14.255 kB
react-dialog
Dialog (including children components)
102.484 kB
30.641 kB
react-divider
Divider
20.456 kB
7.598 kB
react-field
Field
22.657 kB
8.602 kB
react-image
Image
14.489 kB
5.882 kB
react-input
Input
27.148 kB
9.108 kB
react-jsx-runtime
Classic Pragma
1.101 kB
550 B
react-jsx-runtime
JSX Dev Runtime
2.8 kB
1.251 kB
react-jsx-runtime
JSX Runtime
3.422 kB
1.493 kB
react-label
Label
13.799 kB
5.644 kB
react-link
Link
16.728 kB
6.784 kB
react-list
List
88.742 kB
26.341 kB
react-list
ListItem
112.167 kB
33.161 kB
react-message-bar
MessageBar (all components)
24.088 kB
8.96 kB
react-motion
@fluentui/react-motion - createMotionComponent()
3.995 kB
1.755 kB
react-motion
@fluentui/react-motion - createPresenceComponent()
5.628 kB
2.36 kB
react-motion
@fluentui/react-motion - PresenceGroup
1.727 kB
823 B
react-overflow
hooks only
12.832 kB
4.828 kB
react-persona
Persona
55.409 kB
17.389 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-positioning
usePositioning
28.865 kB
10.146 kB
react-positioning
useSafeZoneArea
12.29 kB
4.967 kB
react-progress
ProgressBar
16.593 kB
6.613 kB
react-provider
FluentProvider
23.8 kB
8.556 kB
react-radio
Radio
31.8 kB
10.006 kB
react-radio
RadioGroup
14.889 kB
6.09 kB
react-select
Select
26.95 kB
9.833 kB
react-slider
Slider
37.211 kB
12.461 kB
react-spinbutton
SpinButton
34.431 kB
11.449 kB
react-spinner
Spinner
24.374 kB
8.192 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
106.039 kB
30.537 kB
react-switch
Switch
34.51 kB
11.014 kB
react-table
DataGrid
161.217 kB
45.579 kB
react-table
Table (Primitives only)
41.978 kB
13.573 kB
react-table
Table as DataGrid
131.476 kB
36.341 kB
react-table
Table (Selection only)
69.846 kB
19.704 kB
react-table
Table (Sort only)
68.489 kB
19.321 kB
react-tags
InteractionTag
14.563 kB
5.864 kB
react-tags
Tag
29.811 kB
9.662 kB
react-tags
TagGroup
83.089 kB
24.555 kB
react-teaching-popover
TeachingPopover
102.747 kB
30.737 kB
react-text
Text - Default
16.19 kB
6.366 kB
react-text
Text - Wrappers
19.35 kB
6.695 kB
react-textarea
Textarea
25.715 kB
9.416 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
35.835 kB
7.512 kB
react-theme
Teams: Light theme
19.794 kB
5.602 kB
react-tree
FlatTree
149.134 kB
42.698 kB
react-tree
PersonaFlatTree
149.89 kB
42.826 kB
react-tree
PersonaTree
146.148 kB
41.698 kB
react-tree
Tree
145.398 kB
41.555 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against e0161d6f134a7f86ece58894cc9d0fc02a97b783

Copy link

Pull request demo site: URL

@@ -1,6 +1,7 @@
import * as React from 'react';
Copy link

@github-actions github-actions bot Jul 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

vr-tests-react-components/Avatar Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png 3 Changed
vr-tests-react-components/Charts-DonutChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 27053 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png 12635 Changed
vr-tests-react-components/Drawer 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Drawer.overlay drawer full.chromium.png 6934 Changed
vr-tests-react-components/Drawer.overlay drawer full - Dark Mode.chromium.png 3776 Changed
vr-tests-react-components/Drawer.overlay drawer full - RTL.chromium.png 1145 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 499 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 711 Changed
vr-tests-react-components/Skeleton converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Skeleton converged.Opaque Skeleton with square - Dark Mode.default.chromium.png 3 Changed
vr-tests-react-components/TagPicker 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 659 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png 1321 Changed
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 678 Changed
vr-tests-web-components/Accordion 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Accordion. - Dark Mode.normal.chromium_1.png 3151 Changed
vr-tests-web-components/Badge 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png 444 Changed
vr-tests-web-components/MenuList 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - RTL.2nd selected.chromium.png 17 Changed
vr-tests-web-components/TextInput 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/TextInput. - Dark Mode.normal.chromium_1.png 286 Changed
vr-tests/Callout 8 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Callout.Beak 25.default.chromium.png 2185 Changed
vr-tests/Callout.Bottom right edge - RTL.default.chromium.png 1114 Changed
vr-tests/Callout.Bottom left edge - RTL.default.chromium.png 2186 Changed
vr-tests/Callout.Bottom right edge.default.chromium.png 1120 Changed
vr-tests/Callout.Left center.default.chromium.png 2544 Changed
vr-tests/Callout.Right bottom edge.default.chromium.png 3037 Changed
vr-tests/Callout.No beak.default.chromium.png 2177 Changed
vr-tests/Callout.No callout width specified.default.chromium.png 2126 Changed
vr-tests/Keytip 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Keytip.Offset.default.chromium.png 86 Changed
vr-tests/react-charting-GaugeChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-GaugeChart.Basic.default.chromium.png 2 Changed
vr-tests/react-charting-LineChart 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-LineChart.Events.default.chromium.png 1 Changed
vr-tests/react-charting-LineChart.Multiple.default.chromium.png 192 Changed
vr-tests/react-charting-LineChart.Multiple - RTL.default.chromium.png 200 Changed
vr-tests/react-charting-VerticalBarChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-VerticalBarChart.Basic - Secondary Y Axis.default.chromium.png 3 Changed

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant