Skip to content

feat(react-positioning): replace Floating UI with custom positioning engine (exploration) - #36870

Draft
Dmytro Kirpa (dmytrokirpa) wants to merge 20 commits into
microsoft:masterfrom
dmytrokirpa:claude/exciting-fermi-h0j6uv
Draft

Dmytro Kirpa (dmytrokirpa) wants to merge 20 commits into
microsoft:masterfrom
dmytrokirpa:claude/exciting-fermi-h0j6uv

Conversation

@dmytrokirpa

Copy link
Copy Markdown
Contributor

Previous Behavior

New Behavior

Related Issue(s)

  • Fixes #

@github-actions

github-actions Bot commented Oct 12, 2026 •

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-charts
AreaChart
403.243 kB
125.989 kB
388.988 kB
121.338 kB
-14.255 kB
-4.651 kB
react-charts
DeclarativeChart
757.029 kB
222.016 kB
742.77 kB
217.172 kB
-14.259 kB
-4.844 kB
react-charts
DonutChart
313.568 kB
96.743 kB
299.313 kB
92.083 kB
-14.255 kB
-4.66 kB
react-charts
FunnelChart
304.983 kB
93.455 kB
290.728 kB
88.802 kB
-14.255 kB
-4.653 kB
react-charts
GanttChart
386.151 kB
120.413 kB
371.89 kB
115.715 kB
-14.261 kB
-4.698 kB
react-charts
GaugeChart
313.535 kB
96.295 kB
299.28 kB
91.633 kB
-14.255 kB
-4.662 kB
react-charts
GroupedVerticalBarChart
394.478 kB
123.274 kB
380.217 kB
118.573 kB
-14.261 kB
-4.701 kB
react-charts
HeatMapChart
388.351 kB
121.402 kB
374.096 kB
116.729 kB
-14.255 kB
-4.673 kB
react-charts
HorizontalBarChart
293.252 kB
89.12 kB
278.991 kB
84.315 kB
-14.261 kB
-4.805 kB
react-charts
Legends
232.643 kB
69.738 kB
218.426 kB
65.061 kB
-14.217 kB
-4.677 kB
react-charts
LineChart
414.525 kB
129.128 kB
400.264 kB
124.396 kB
-14.261 kB
-4.732 kB
react-charts
PolarChart
341.42 kB
106.647 kB
327.159 kB
101.905 kB
-14.261 kB
-4.742 kB
react-charts
SankeyChart
209.167 kB
67.254 kB
194.906 kB
62.597 kB
-14.261 kB
-4.657 kB
react-charts
ScatterChart
393.719 kB
123.111 kB
379.458 kB
118.401 kB
-14.261 kB
-4.71 kB
react-charts
VerticalBarChart
430.679 kB
128.132 kB
416.418 kB
123.458 kB
-14.261 kB
-4.674 kB
react-charts
VerticalStackedBarChart
400.254 kB
124.616 kB
385.993 kB
119.899 kB
-14.261 kB
-4.717 kB
react-combobox
Combobox (including child components)
137.079 kB
44.297 kB
122.86 kB
39.402 kB
-14.219 kB
-4.895 kB
react-combobox
Dropdown (including child components)
135.754 kB
43.713 kB
121.535 kB
38.857 kB
-14.219 kB
-4.856 kB
react-components
react-components: all base hooks
219.725 kB
68.644 kB
205.52 kB
63.891 kB
-14.205 kB
-4.753 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
223.356 kB
67.405 kB
209.149 kB
62.649 kB
-14.207 kB
-4.756 kB
react-components
react-components: entire library
1.283 MB
322.264 kB
1.269 MB
317.063 kB
-14.202 kB
-5.201 kB
react-datepicker-compat
DatePicker Compat
216.697 kB
64.458 kB
202.476 kB
59.734 kB
-14.221 kB
-4.724 kB
react-headless-components-preview
react-headless-components-preview: entire library
228.459 kB
67.629 kB
245.599 kB
73.635 kB
17.14 kB
6.006 kB
react-headless-components-preview
@fluentui/react-headless-components-preview/positioning: usePositioning
0 B
0 B
22.18 kB
7.842 kB
🆕 New entry
react-menu
Menu (including children components)
156.759 kB
49.835 kB
142.705 kB
45.225 kB
-14.054 kB
-4.61 kB
react-menu
Menu (including selectable components)
159.924 kB
50.475 kB
145.87 kB
45.848 kB
-14.054 kB
-4.627 kB
react-popover
Popover
122.126 kB
39.376 kB
108.054 kB
34.816 kB
-14.072 kB
-4.56 kB
react-positioning
usePositioning
29.164 kB
10.252 kB
14.635 kB
5.547 kB
-14.529 kB
-4.705 kB
react-tag-picker
@fluentui/react-tag-picker - package
171.186 kB
53.362 kB
156.969 kB
48.704 kB
-14.217 kB
-4.658 kB
react-teaching-popover
TeachingPopover
97.09 kB
30.614 kB
83.021 kB
26.019 kB
-14.069 kB
-4.595 kB
react-timepicker-compat
TimePicker
139.8 kB
45.595 kB
125.581 kB
40.688 kB
-14.219 kB
-4.907 kB
react-tooltip
Tooltip
55.003 kB
19.545 kB
41.017 kB
14.946 kB
-13.986 kB
-4.599 kB
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
326 B
global-context
createContextSelector
531 B
334 B
keyboard-key
keyboard-key package
3.927 kB
1.99 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
5.416 kB
2.191 kB
react
ActivityItem
71.827 kB
23.603 kB
react
Announced
39.065 kB
13.523 kB
react
Autofill
15.557 kB
4.803 kB
react
Breadcrumb
201.081 kB
59.91 kB
react
Button
194.713 kB
56.19 kB
react
ButtonGrid
179.546 kB
54.199 kB
react
Calendar
121.593 kB
37.09 kB
react
Callout
84.756 kB
27.836 kB
react
Check
53.774 kB
18.079 kB
react
Checkbox
60.527 kB
20.13 kB
react
ChoiceGroup
66.038 kB
21.703 kB
react
ChoiceGroupOption
59.333 kB
19.594 kB
react
Coachmark
93.132 kB
29.567 kB
react
Color
7.94 kB
3.172 kB
react
ColorPicker
135.394 kB
42.386 kB
react
ComboBox
250.892 kB
71.805 kB
react
CommandBar
202.143 kB
59.685 kB
react
ContextualMenu
154.579 kB
47.83 kB
react
DatePicker
183.523 kB
56.145 kB
react
DateTimeUtilities
5.447 kB
1.917 kB
react
DetailsList
230.308 kB
66.152 kB
react
Dialog
210.376 kB
62.633 kB
react
Divider
20.182 kB
7.074 kB
react
DocumentCard
216.129 kB
63.993 kB
react
DragDrop
8.546 kB
2.789 kB
react
DraggableZone
34.867 kB
11.718 kB
react
Dropdown
233.381 kB
68.269 kB
react
ExtendedPicker
97.386 kB
28.087 kB
react
Fabric
42.305 kB
14.594 kB
react
Facepile
209.694 kB
62.698 kB
react
FloatingPicker
241.15 kB
68.562 kB
react
FocusTrapZone
17.462 kB
6.12 kB
react
FocusZone
55.696 kB
17.674 kB
react
Grid
179.546 kB
54.199 kB
react
GroupedList
135.516 kB
40.954 kB
react
GroupedListV2
123.14 kB
38.026 kB
react
HoverCard
97.22 kB
30.948 kB
react
Icon
52.459 kB
17.507 kB
react
Icons
66.918 kB
24.614 kB
react
Image
47.469 kB
15.914 kB
react
Keytip
81.786 kB
26.887 kB
react
KeytipData
14.546 kB
4.828 kB
react
KeytipLayer
103.529 kB
32.149 kB
react
Keytips
106.3 kB
33.156 kB
react
Label
38.911 kB
13.484 kB
react
Layer
48.647 kB
16.599 kB
react
Link
40.245 kB
13.906 kB
react
List
39.953 kB
12.657 kB
react
MarqueeSelection
75.078 kB
22.66 kB
react
MessageBar
189.694 kB
56.635 kB
react
Modal
94.148 kB
30.451 kB
react
Nav
187.163 kB
56.028 kB
react
OverflowSet
33.922 kB
11.493 kB
react
Overlay
41.474 kB
14.324 kB
react
Panel
200.622 kB
59.618 kB
react
Persona
115.043 kB
36.722 kB
react
PersonaCoin
115.043 kB
36.722 kB
react
PersonaPresence
58.644 kB
19.613 kB
react
Pickers
298.149 kB
83.358 kB
react
Pivot
188.02 kB
56.764 kB
react
Popup
12.427 kB
4.226 kB
react
Positioning
23.45 kB
7.878 kB
react
PositioningContainer
73.984 kB
23.94 kB
react
ProgressIndicator
40.064 kB
13.768 kB
react
Rating
82.626 kB
26.36 kB
react
Fluent UI React (entire library)
1.018 MB
283.771 kB
react
ResizeGroup
13.467 kB
4.42 kB
react
ResponsiveMode
8.271 kB
3.006 kB
react
ScrollablePane
56.088 kB
17.955 kB
react
SearchBox
187.934 kB
56.206 kB
react
SelectableOption
927 B
479 B
react
SelectedItemsList
231.646 kB
67.506 kB
react
Selection
43.019 kB
12.515 kB
react
Separator
35.952 kB
12.359 kB
react
Shimmer
49.795 kB
16.486 kB
react
ShimmeredDetailsList
241.04 kB
68.863 kB
react
Slider
58.19 kB
19.443 kB
react
SpinButton
191.6 kB
57.301 kB
react
Spinner
42.344 kB
14.701 kB
react
Stack
42.643 kB
14.594 kB
react
Sticky
33.164 kB
10.726 kB
react
Styling
46.665 kB
15.362 kB
react
SwatchColorPicker
189.899 kB
57.734 kB
react
TeachingBubble
204.91 kB
60.62 kB
react
Text
37.475 kB
13.004 kB
react
TextField
81.327 kB
25.554 kB
react
Theme
44.125 kB
14.405 kB
react
ThemeGenerator
12.525 kB
4.15 kB
react
TimePicker
240.706 kB
69.592 kB
react
Toggle
46.766 kB
16.205 kB
react
Tooltip
87.56 kB
28.389 kB
react
Utilities
83.437 kB
25.4 kB
react
Viewport
24.462 kB
7.84 kB
react
WeeklyDayPicker
101.844 kB
31.918 kB
react
WindowProvider
1.262 kB
614 B
react-accordion
Accordion (including children components)
87.85 kB
27.743 kB
react-aria
ARIA - useARIAButtonProps
1.35 kB
631 B
react-aria
ARIA - AriaLiveAnnouncer
3.265 kB
1.499 kB
react-avatar
Avatar
49.178 kB
15.656 kB
react-avatar
AvatarGroup
14.126 kB
5.693 kB
react-avatar
AvatarGroupItem
58.655 kB
18.173 kB
react-badge
Badge
24.49 kB
7.923 kB
react-badge
CounterBadge
25.212 kB
8.182 kB
react-badge
PresenceBadge
25.018 kB
9.094 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
103.23 kB
29.068 kB
react-button
Button
34.065 kB
9.044 kB
react-button
CompoundButton
40.945 kB
10.362 kB
react-button
MenuButton
39.729 kB
10.706 kB
react-button
SplitButton
49.148 kB
12.477 kB
react-button
ToggleButton
53.722 kB
11.179 kB
react-calendar-compat
Calendar Compat
142.741 kB
40.596 kB
react-calendar-preview
Calendar
169.495 kB
47.952 kB
react-card
Card - All
93.139 kB
27.131 kB
react-card
Card
85.734 kB
25.242 kB
react-card
CardFooter
13.021 kB
5.168 kB
react-card
CardHeader
15.568 kB
6.015 kB
react-card
CardPreview
13.099 kB
5.28 kB
react-charting
AreaChart
305.604 kB
96.064 kB
react-charting
ChartHoverCard
37.583 kB
12.898 kB
react-charting
DeclarativeChart
682.303 kB
194.265 kB
react-charting
DonutChart
204.722 kB
64.446 kB
react-charting
GanttChart
287.668 kB
90.971 kB
react-charting
GaugeChart
198.031 kB
61.913 kB
react-charting
GroupedVerticalBarChart
297.52 kB
93.326 kB
react-charting
HeatMapChart
288.382 kB
90.725 kB
react-charting
HorizontalBarChart
127.789 kB
40.246 kB
react-charting
HorizontalBarChartWithAxis
298.841 kB
93.377 kB
react-charting
Legends
152.339 kB
46.989 kB
react-charting
LineChart
335.132 kB
103.104 kB
react-charting
MultiStackedBarChart
182.884 kB
55.982 kB
react-charting
PieChart
135.373 kB
42.885 kB
react-charting
PolarChart
236.069 kB
74.906 kB
react-charting
SankeyChart
158.995 kB
49.787 kB
react-charting
ScatterChart
291.625 kB
92.346 kB
react-charting
Sparkline
88.444 kB
29.993 kB
react-charting
StackedBarChart
176.459 kB
53.543 kB
react-charting
TreeChart
86.064 kB
27.233 kB
react-charting
VerticalBarChart
308.514 kB
95.448 kB
react-charting
VerticalStackedBarChart
305.607 kB
95.128 kB
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-charts
Sparkline
79.8 kB
26.591 kB
react-checkbox
Checkbox
31.71 kB
11.291 kB
react-color-picker
ColorArea
27.778 kB
10.463 kB
react-color-picker
ColorPicker
12.913 kB
5.245 kB
react-color-picker
ColorSlider
22.818 kB
9.02 kB
react-components
react-components: Button, FluentProvider & webLightTheme
68.229 kB
19.872 kB
react-components
react-components: FluentProvider & webLightTheme
41.459 kB
13.908 kB
react-dialog
Dialog (including children components)
86.881 kB
26.936 kB
react-divider
Divider
16.488 kB
5.963 kB
react-field
Field
23.331 kB
8.679 kB
react-image
Image
13.855 kB
5.584 kB
react-input
Input
26.599 kB
8.778 kB
react-jsx-runtime
Classic Pragma
1.282 kB
613 B
react-jsx-runtime
JSX Dev Runtime
2.137 kB
988 B
react-jsx-runtime
JSX Runtime
2.134 kB
948 B
react-label
Label
13.201 kB
5.309 kB
react-link
Link
16.77 kB
6.605 kB
react-list
List
71.03 kB
21.795 kB
react-list
ListItem
95.724 kB
29.158 kB
react-message-bar
MessageBar (all components)
26.363 kB
9.349 kB
react-motion
@fluentui/react-motion - createMotionComponent()
4.275 kB
1.864 kB
react-motion
@fluentui/react-motion - createPresenceComponent()
6.007 kB
2.484 kB
react-motion
@fluentui/react-motion - PresenceGroup
1.715 kB
816 B
react-overflow
hooks only
10.203 kB
3.694 kB
react-persona
Persona
56.131 kB
17.602 kB
react-portal
Portal
13.969 kB
5.462 kB
react-portal-compat
PortalCompatProvider
5.202 kB
2.106 kB
react-positioning
useSafeZoneArea
13.461 kB
5.425 kB
react-progress
ProgressBar
20.578 kB
7.974 kB
react-provider
FluentProvider
20.851 kB
8.061 kB
react-radio
Radio
28.38 kB
9.231 kB
react-radio
RadioGroup
14.29 kB
5.754 kB
react-range-slider-preview
RangeSlider
39.895 kB
13.471 kB
react-select
Select
27.189 kB
9.833 kB
react-slider
Slider
33.727 kB
11.608 kB
react-spinbutton
SpinButton
34.739 kB
11.443 kB
react-spinner
Spinner
23.962 kB
7.928 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
89.212 kB
26.279 kB
react-switch
Switch
34.382 kB
10.936 kB
react-table
DataGrid
143.692 kB
42.585 kB
react-table
Table (Primitives only)
38.955 kB
13.033 kB
react-table
Table as DataGrid
119.198 kB
33.788 kB
react-table
Table (Selection only)
67.461 kB
19.3 kB
react-table
Table (Sort only)
66.124 kB
18.925 kB
react-tags
InteractionTag
13.986 kB
5.529 kB
react-tags
Tag
30.614 kB
9.763 kB
react-tags
TagGroup
69.63 kB
21.544 kB
react-text
Text - Default
15.542 kB
6.02 kB
react-text
Text - Wrappers
18.706 kB
6.343 kB
react-textarea
Textarea
24.964 kB
9.05 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
37.967 kB
7.989 kB
react-theme
Teams: Light theme
20.797 kB
5.863 kB
react-toast
Toast (including Toaster)
90.519 kB
28.278 kB
react-tree
FlatTree
132.727 kB
39.465 kB
react-tree
PersonaFlatTree
134.584 kB
39.965 kB
react-tree
PersonaTree
130.671 kB
38.775 kB
react-tree
Tree
128.814 kB
38.289 kB
react-utilities
SSRProvider
182 B
160 B
🤖 This report was generated against e2642c72390b31645e5766683776199f0ab01ce2

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,6 @@
{

@github-actions github-actions Bot Oct 12, 2026 •

Copy link
Copy Markdown

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.normal.chromium.png 4 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 404 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 138 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 732 Changed
vr-tests-react-components/ProgressBar converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 52 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 104 Changed
vr-tests-web-components/Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium_1.png 298 Changed
vr-tests-web-components/MenuList 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - Dark Mode.normal.chromium.png 498 Changed
vr-tests-web-components/MenuList. - RTL.1st selected.chromium_2.png 39384 Changed
vr-tests/Callout 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Callout.Bottom left edge - RTL.default.chromium.png 2199 Changed
vr-tests/Callout.Left bottom edge.default.chromium.png 3182 Changed
vr-tests/Callout.Rendering callout attached to a rectangle.default.chromium.png 1835 Changed
vr-tests/Coachmark 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Coachmark.Collapsed.default.chromium.png 159 Changed
vr-tests/react-charting-LineChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-LineChart.Multiple.default.chromium.png 192 Changed
vr-tests/react-charting-LineChart.Multiple - Dark Mode.default.chromium.png 181 Changed
vr-tests/react-charting-MultiStackBarChart 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - RTL.default.chromium.png 343 Changed
vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole.default.chromium.png 359 Changed
vr-tests/react-charting-MultiStackBarChart.Basic_Absolute.default.chromium.png 359 Changed
vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole - RTL.default.chromium.png 343 Changed

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

@dmytrokirpa
Dmytro Kirpa (dmytrokirpa) force-pushed the claude/exciting-fermi-h0j6uv branch 2 times, most recently from ff66b9d to 31c2544 Compare October 13, 2026 07:22
@dmytrokirpa Dmytro Kirpa (dmytrokirpa) changed the title replace Floating UI with a CSS-anchor-positioning-style engine [DO NOT REVIEW] replace Floating UI with a CSS-anchor-positioning-style engine Oct 13, 2026
…oning-style engine

Port the JavaScript positioning engine into react-positioning and use it in
place of @floating-ui/dom to reduce the bundle size: position-area style
placements, first-fit fallbacks, margin offsets, containing block detection,
boundaries, autoSize, arrow and visibility attributes. Floating UI
dependencies are removed.

The position manager is slimmer (a capturing scroll listener replaces scroll
parent discovery, the direction is read from the containing block) and it can
also run when the browser does the positioning with CSS anchor positioning.

The headless usePositioning uses CSS anchor positioning by default and the
position manager of react-positioning as the fallback, when the browser lacks
support or an option can't be handled by CSS (function offsets, boundaries and
virtual element targets). autoSize, the arrow and onPositioningEnd are handled
in both modes. It writes data-positioning-hidden and data-positioning-escaped,
react-positioning keeps the data-popper-* attributes.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YQM28hNQxTep97H3Ur6xDm
Claude (claude) and others added 3 commits October 13, 2026 10:12
`strategy ?? positionFixed ? 'fixed' : 'absolute'` was parsed as
`(strategy ?? positionFixed) ? 'fixed' : 'absolute'`, so any set strategy,
including 'absolute', resulted in 'fixed'.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YQM28hNQxTep97H3Ur6xDm
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@dmytrokirpa Dmytro Kirpa (dmytrokirpa) changed the title [DO NOT REVIEW] replace Floating UI with a CSS-anchor-positioning-style engine [DO NOT REVIEW] replace Floating UI with custom positioning engine Oct 13, 2026
@dmytrokirpa Dmytro Kirpa (dmytrokirpa) changed the title [DO NOT REVIEW] replace Floating UI with custom positioning engine [DO NOT REVIEW] replace Floating UI with custom positioning engine (exploration) Oct 15, 2026
@dmytrokirpa Dmytro Kirpa (dmytrokirpa) changed the title [DO NOT REVIEW] replace Floating UI with custom positioning engine (exploration) feat(react-positioning): replace Floating UI with custom positioning engine (exploration) Oct 15, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants