chore: Upgrade Popper to Floating UI #21828

ling1726 · 2022-02-22T08:37:40Z

Upgrades to Floating UI which is popper v3 (same author, same repo)

There aren't too many concepts that change although the API does change. This upgrade mainly brings about some nice bundle size decreases (~15%)

⚠️ BREAKING CHANGES

TS4 minbar

Template literal types used internally in Floating UI

Communicated with our partner still on TS3.8, ok with patching this on their side

Offset array -> Offset object

Floating UI introduced a new Offset API that is actually an improvement over the previous array type. A new shorthand offset for the main axis is also introduced

Before

<Popover positioning={{ offset: [0, 10] }} />

After

<Popover positioning={{ offset: { crossAxis: 0, mainAxis: 10} }} />
// main axis shorthand
<Popover positioning={{ offset: 10 />

Offset function argument

Before:

export type OffsetFunctionParam = {
  popper: Rect;
  reference: Rect;
  placement: Placement;
};

After:

export type OffsetFunctionParam = {
  floating: Rect;
  reference: Rect;
  placement: Placement;
};

Virual element API

smaller breaking change.

Previously Popper used the element.getBoundingClientRect() return as the interface for a virtual element, the new types are custom written to work also for non web (i.e. React native) usages. Most of the time the usages should match up.

Before:

interface DOMRect extends DOMRectReadOnly {
    height: number;
    width: number;
    x: number;
    y: number;
}

interface ClientRect {
    bottom: number;
    readonly height: number;
    left: number;
    right: number;
    top: number;
    readonly width: number;
}

type ClientObject = ClientRect | DOMRect

After:

interface Coords {
  x: number;
  y: number;
}

interface Dimensions {
  width: number;
  height: number;
}

interface SideObject {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

type ClientRectObject = Rect & SideObject;

popperRef -> positioningRef

Removes Popper instances from our API

Before

type PopperRefHandle = {
  updatePosition: () => void;
  setTarget: (target: HTMLElement | PositioningVirtualElement) => void;
}

<Popover positioning={{ popperRef }} />

After

type PositioningRefHandle = {
  updatePosition: () => void;
  setTarget: (target: HTMLElement | PositioningVirtualElement) => void;
}
<Popover positioning={{ positioningRef }} />

PopperVirtualElement -> PositioningVirtualElement

Removes Popper instances from our types, none of these types are exported from react-components is this a breaking change ?

Related Issue(s)

Fixes #22067

codesandbox-ci · 2022-02-22T08:45:52Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8445272:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2022-02-22T08:55:03Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 4603faeb3a875836dd0e3901ad4cef92d5473ce0 (build)

fabricteam · 2022-02-22T09:00:45Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-combobox` Combobox	`54.566 kB` `18.884 kB`	`50.389 kB` `17.902 kB`	`-4.177 kB` `-982 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`176.089 kB` `49.113 kB`	`171.803 kB` `47.87 kB`	`-4.286 kB` `-1.243 kB`
`react-menu` Menu (including children components)	`105.852 kB` `32.433 kB`	`101.624 kB` `31.437 kB`	`-4.228 kB` `-996 B`
`react-menu` Menu (including selectable components)	`109.031 kB` `32.897 kB`	`104.803 kB` `31.893 kB`	`-4.228 kB` `-1.004 kB`
`react-popover` Popover	`96.787 kB` `29.559 kB`	`92.524 kB` `28.514 kB`	`-4.263 kB` `-1.045 kB`
`react-positioning` usePopper	`23.21 kB` `8.084 kB`	`233 B` `176 B`	`-22.977 kB` `-7.908 kB`
`react-tooltip` Tooltip	`42.837 kB` `14.727 kB`	`38.6 kB` `13.69 kB`	`-4.237 kB` `-1.037 kB`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`priority-overflow` createOverflowManager	`2.836 kB` `1.209 kB`
`react-accordion` Accordion (including children components)	`74.792 kB` `22.516 kB`
`react-avatar` Avatar	`45.142 kB` `13.111 kB`
`react-badge` Badge	`20.895 kB` `6.567 kB`
`react-badge` CounterBadge	`21.848 kB` `6.883 kB`
`react-badge` PresenceBadge	`21.951 kB` `6.565 kB`
`react-button` Button	`28.013 kB` `8.059 kB`
`react-button` CompoundButton	`33.508 kB` `9.092 kB`
`react-button` MenuButton	`29.796 kB` `8.665 kB`
`react-button` SplitButton	`36.268 kB` `9.863 kB`
`react-button` ToggleButton	`37.395 kB` `8.68 kB`
`react-card` Card - All	`53.619 kB` `15.372 kB`
`react-card` Card	`48.904 kB` `14.089 kB`
`react-card` CardFooter	`7.686 kB` `3.264 kB`
`react-card` CardHeader	`9.251 kB` `3.78 kB`
`react-card` CardPreview	`7.658 kB` `3.291 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.601 kB` `10.668 kB`
`react-divider` Divider	`15.385 kB` `5.539 kB`
`react-image` Image	`10.109 kB` `3.958 kB`
`react-input` Input	`21.661 kB` `7.18 kB`
`react-label` Label	`8.371 kB` `3.504 kB`
`react-link` Link	`11.106 kB` `4.507 kB`
`react-portal` Portal	`6.272 kB` `2.17 kB`
`react-priority-overflow` hooks only	`10.606 kB` `4.087 kB`
`react-provider` FluentProvider	`14.009 kB` `5.25 kB`
`react-select` Select	`16.562 kB` `6.264 kB`
`react-slider` Slider	`25.549 kB` `8.25 kB`
`react-spinbutton` SpinButton	`41.512 kB` `11.912 kB`
`react-spinner` Spinner	`16.459 kB` `5.549 kB`
`react-switch` Switch	`24.279 kB` `8.001 kB`
`react-text` Text - Default	`10.797 kB` `4.233 kB`
`react-text` Text - Wrappers	`14.113 kB` `4.576 kB`
`react-textarea` Textarea	`20.602 kB` `7.033 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.676 kB` `6.604 kB`
`react-theme` Teams: Light theme	`18.492 kB` `5.296 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 4603faeb3a875836dd0e3901ad4cef92d5473ce0}

fabricteam · 2022-02-22T09:12:36Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	775	778	5000
Breadcrumb	mount	2393	2439	1000
Checkbox	mount	1280	1282	5000
CheckboxBase	mount	1086	1096	5000
ChoiceGroup	mount	4084	4084	5000
ComboBox	mount	818	890	1000
CommandBar	mount	9145	9233	1000
ContextualMenu	mount	10536	10651	1000
DefaultButton	mount	988	997	5000
DetailsRow	mount	3377	3291	5000
DetailsRowFast	mount	3334	3326	5000
DetailsRowNoStyles	mount	3209	3115	5000
Dialog	mount	1911	1911	1000
DocumentCardTitle	mount	146	147	1000
Dropdown	mount	2868	2850	5000
FocusTrapZone	mount	1543	1565	5000
FocusZone	mount	1564	1551	5000
IconButton	mount	1523	1544	5000
Label	mount	302	300	5000
Layer	mount	2550	2539	5000
Link	mount	402	409	5000
MenuButton	mount	1293	1287	5000
MessageBar	mount	1884	1847	5000
Nav	mount	2827	2869	1000
OverflowSet	mount	937	965	5000
Panel	mount	1838	1848	1000
Persona	mount	863	866	1000
Pivot	mount	1255	1240	1000
PrimaryButton	mount	1119	1128	5000
Rating	mount	6640	6688	5000
SearchBox	mount	1127	1133	5000
Shimmer	mount	2168	2130	5000
Slider	mount	1687	1659	5000
SpinButton	mount	4277	4307	5000
Spinner	mount	375	371	5000
SplitButton	mount	2720	2688	5000
Stack	mount	447	456	5000
StackWithIntrinsicChildren	mount	1987	1980	5000
StackWithTextChildren	mount	4507	4499	5000
SwatchColorPicker	mount	9943	9984	5000
TagPicker	mount	2287	2266	5000
TeachingBubble	mount	79944	80265	5000
Text	mount	365	371	5000
TextField	mount	1206	1210	5000
ThemeProvider	mount	1017	1020	5000
ThemeProvider	virtual-rerender	556	569	5000
ThemeProvider	virtual-rerender-with-unmount	1601	1601	5000
Toggle	mount	671	680	5000
buttonNative	mount	115	122	5000

ling1726 · 2022-02-22T09:31:11Z

/azp run

azure-pipelines · 2022-02-22T09:31:39Z

Azure Pipelines successfully started running 3 pipeline(s).

fabricteam · 2022-02-26T14:59:47Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	129	119	1.08:1
ButtonMinimalPerf.default	143	133	1.08:1
ButtonSlotsPerf.default	463	435	1.06:1
ListWith60ListItems.default	549	525	1.05:1
RadioGroupMinimalPerf.default	378	361	1.05:1
SegmentMinimalPerf.default	296	281	1.05:1
ListCommonPerf.default	541	521	1.04:1
PortalMinimalPerf.default	147	141	1.04:1
AlertMinimalPerf.default	223	217	1.03:1
GridMinimalPerf.default	282	273	1.03:1
LabelMinimalPerf.default	325	317	1.03:1
ListNestedPerf.default	459	447	1.03:1
RefMinimalPerf.default	200	195	1.03:1
SkeletonMinimalPerf.default	289	281	1.03:1
TextMinimalPerf.default	284	277	1.03:1
ToolbarMinimalPerf.default	809	784	1.03:1
AnimationMinimalPerf.default	462	451	1.02:1
ButtonOverridesMissPerf.default	1257	1229	1.02:1
CardMinimalPerf.default	465	456	1.02:1
DividerMinimalPerf.default	293	288	1.02:1
FlexMinimalPerf.default	238	234	1.02:1
HeaderMinimalPerf.default	300	293	1.02:1
HeaderSlotsPerf.default	635	622	1.02:1
ImageMinimalPerf.default	311	306	1.02:1
PopupMinimalPerf.default	529	518	1.02:1
ProviderMinimalPerf.default	335	327	1.02:1
StatusMinimalPerf.default	567	558	1.02:1
TableManyItemsPerf.default	1618	1590	1.02:1
TableMinimalPerf.default	335	328	1.02:1
TreeMinimalPerf.default	682	670	1.02:1
BoxMinimalPerf.default	280	278	1.01:1
CarouselMinimalPerf.default	399	396	1.01:1
DialogMinimalPerf.default	638	632	1.01:1
DropdownManyItemsPerf.default	563	556	1.01:1
EmbedMinimalPerf.default	3465	3418	1.01:1
FormMinimalPerf.default	343	338	1.01:1
LayoutMinimalPerf.default	295	293	1.01:1
LoaderMinimalPerf.default	572	568	1.01:1
SplitButtonMinimalPerf.default	3665	3643	1.01:1
TextAreaMinimalPerf.default	404	399	1.01:1
VideoMinimalPerf.default	535	530	1.01:1
AccordionMinimalPerf.default	118	118	1:1
ChatMinimalPerf.default	617	614	1:1
CheckboxMinimalPerf.default	2247	2258	1:1
DropdownMinimalPerf.default	2559	2562	1:1
InputMinimalPerf.default	1080	1081	1:1
ItemLayoutMinimalPerf.default	988	992	1:1
ListMinimalPerf.default	425	427	1:1
MenuMinimalPerf.default	709	709	1:1
MenuButtonMinimalPerf.default	1415	1408	1:1
ProviderMergeThemesPerf.default	1071	1071	1:1
ReactionMinimalPerf.default	311	310	1:1
CustomToolbarPrototype.default	2282	2276	1:1
TooltipMinimalPerf.default	899	897	1:1
AvatarMinimalPerf.default	152	153	0.99:1
ChatDuplicateMessagesPerf.default	248	251	0.99:1
RosterPerf.default	910	922	0.99:1
SliderMinimalPerf.default	1398	1418	0.99:1
TreeWith60ListItems.default	145	147	0.99:1
ChatWithPopoverPerf.default	313	320	0.98:1
DatepickerMinimalPerf.default	4713	4787	0.98:1
AttachmentSlotsPerf.default	915	965	0.95:1
IconMinimalPerf.default	484	515	0.94:1

into chore/floating-ui

…eb7af.json Co-authored-by: Martin Hochel <[email protected]>

change/@fluentui-react-tooltip-3f810af7-b574-4988-bf02-21dbdde3e0db.json

…3e0db.json

into chore/floating-ui

change/@fluentui-react-menu-16ea1e78-a70f-4378-9515-49a0254f3217.json

…17.json

GeoffCoxMSFT

LGTM given the things to resolve identified by others

spmonahan

Just putting a block here so we can coordinate merging breaking changes.

msft-fluent-ui-bot · 2022-05-27T03:00:02Z

This pull request has been automatically marked as stale because it was marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 5 days of this comment. Thank you for your contributions to Fluent UI!

ling1726 · 2022-05-27T08:21:38Z

bot, keep this open!

ling1726 · 2022-08-05T12:56:31Z

Built up a lot of conflicts, succeeded by #24254

ling1726 added 2 commits February 17, 2022 20:31

init

0b3d545

final touches

707a4a1

msft-fluent-ui-bot assigned tomi-msft Feb 22, 2022

ling1726 added 2 commits February 22, 2022 08:40

Change files

36904c7

Merge branch 'master' into chore/floating-ui

4bd223f

support imperative handle

9738d0c

ling1726 mentioned this pull request Feb 23, 2022

RTL affects vertical cross axis offsets for popper #21840

Closed

Merge branch 'master' into chore/floating-ui

ccfbfd5

layershifter mentioned this pull request Feb 23, 2022

feat: add isIntersectingModifier to usePopper in v0 #21829

Merged

ling1726 added 8 commits February 24, 2022 11:39

debounce

8ca61b2

changes

005166f

finally understood scroll jumping fix

fb1c088

disableTether and positionFixed

cfe0909

gpu accel

5196d59

remove firstUpdate concept

02b0f8c

change doc

1eec43e

merge master

7e89d6f

ling1726 added 6 commits March 1, 2022 11:09

merge master

f5cb3c1

hide middleware and intersection observer

9775df4

remove old middleware

7bb4808

remove popper from deps

4b34449

cleanup event listeners

636b23c

update md

add88c4

ling1726 and others added 10 commits April 8, 2022 19:00

use window from context

a6e32ef

remove jsdoc

ef658f4

update API to wrap around floating UI completely

4fae144

update react-positioning usages

d6d41f8

remove export *

b296be4

remove poppse from hook names

02309b9

merge master

c2b3a49

Merge branch 'chore/floating-ui' of https://github.com/ling1726/fluentui

4759559

into chore/floating-ui

remove duplicate import

b961173

Update change/@fluentui-react-popover-7c1b5c26-eb72-4d8b-8951-f6a5501…

3e24d1c

…eb7af.json Co-authored-by: Martin Hochel <[email protected]>

ling1726 commented Apr 13, 2022

View reviewed changes

change/@fluentui-react-tooltip-3f810af7-b574-4988-bf02-21dbdde3e0db.json Outdated Show resolved Hide resolved

ling1726 added 3 commits April 13, 2022 09:02

Update change/@fluentui-react-tooltip-3f810af7-b574-4988-bf02-21dbdde…

c21ca5a

…3e0db.json

change file

b880b4a

Merge branch 'chore/floating-ui' of https://github.com/ling1726/fluentui

31f605f

into chore/floating-ui

ling1726 commented Apr 13, 2022

View reviewed changes

change/@fluentui-react-menu-16ea1e78-a70f-4378-9515-49a0254f3217.json Outdated Show resolved Hide resolved

Update change/@fluentui-react-menu-16ea1e78-a70f-4378-9515-49a0254f32…

8445272

…17.json

ling1726 mentioned this pull request Apr 21, 2022

Floating UI breaking changes #22585

Closed

GeoffCoxMSFT approved these changes May 2, 2022

View reviewed changes

spmonahan requested changes May 18, 2022

View reviewed changes

msft-fluent-ui-bot added the Needs: Author Feedback label May 18, 2022

spmonahan changed the base branch from master to 9.0-breaking-changes May 19, 2022 19:24

spmonahan changed the base branch from 9.0-breaking-changes to master May 20, 2022 01:22

msft-fluent-ui-bot added the Status: No Recent Activity label May 27, 2022

msft-fluent-ui-bot removed Needs: Author Feedback Status: No Recent Activity labels May 27, 2022

ling1726 mentioned this pull request Aug 5, 2022

feat: Upgrade to Floating UI v1 #24254

Merged

ling1726 closed this Aug 5, 2022

chore: Upgrade Popper to Floating UI #21828

chore: Upgrade Popper to Floating UI #21828

Uh oh!

Conversation

ling1726 commented Feb 22, 2022 • edited by layershifter Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ BREAKING CHANGES

TS4 minbar

Offset array -> Offset object

Offset function argument

Virual element API

popperRef -> positioningRef

PopperVirtualElement -> PositioningVirtualElement

Related Issue(s)

Uh oh!

codesandbox-ci bot commented Feb 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Feb 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Feb 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Feb 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

ling1726 commented Feb 22, 2022

Uh oh!

azure-pipelines bot commented Feb 22, 2022

Uh oh!

fabricteam commented Feb 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

Uh oh!

Uh oh!

GeoffCoxMSFT left a comment

Choose a reason for hiding this comment

Uh oh!

spmonahan left a comment

Choose a reason for hiding this comment

Uh oh!

msft-fluent-ui-bot commented May 27, 2022

Uh oh!

ling1726 commented May 27, 2022

Uh oh!

ling1726 commented Aug 5, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

ling1726 commented Feb 22, 2022 •

edited by layershifter

Loading

codesandbox-ci bot commented Feb 22, 2022 •

edited

Loading

size-auditor bot commented Feb 22, 2022 •

edited

Loading

fabricteam commented Feb 22, 2022 •

edited

Loading

fabricteam commented Feb 22, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Feb 26, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)