Skip to content

feat: Implement onPositioningEnd callback #30177

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.

Sign up for GitHub

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

Jump to bottom
Merged
ling1726 merged 7 commits into from
Jan 9, 2024
Merged

feat: Implement onPositioningEnd callback #30177

ling1726 merged 7 commits into from
Jan 9, 2024

Conversation

@ling1726
Copy link
Contributor

@ling1726 ling1726 commented Dec 29, 2023 •
edited
Loading

The vanilla-js positioning manager now dispatches a custom DOM event when a position update has finished. The position update is considered 'finished' once the coordinates have been written to the container element.

Updates the React binding to have a onPositoningEnd callback that listens to the new custom DOM event

<Popover positioning={{onPositioningEnd: () => console.log('positioning end')}} />

Fixes #30176
Fixes #19782

@ling1726 ling1726 marked this pull request as ready for review December 29, 2023 11:42
@ling1726 ling1726 requested review from a team as code owners December 29, 2023 11:42
@fabricteam
Copy link
Collaborator

fabricteam commented Dec 29, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 96 87 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 708 690 5000
Button mount 312 307 5000
Field mount 1177 1257 5000
FluentProvider mount 723 745 5000
FluentProviderWithTheme mount 96 87 10 Possible regression
FluentProviderWithTheme virtual-rerender 88 76 10
FluentProviderWithTheme virtual-rerender-with-unmount 86 92 10
MakeStyles mount 865 852 50000
Persona mount 1935 1771 5000
SpinButton mount 1438 1420 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 29, 2023 •
edited
Loading

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 b664e78:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
jovial-archimedes-zqkd3s Issue #19782

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 29, 2023 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-combobox
Combobox (including child components)		 95.176 kB
30.712 kB		 95.436 kB
30.792 kB		 260 B
80 B
react-combobox
Dropdown (including child components)		 93.762 kB
30.392 kB		 94.022 kB
30.47 kB		 260 B
78 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 209.905 kB
59.925 kB		 210.164 kB
59.999 kB		 259 B
74 B
react-datepicker-compat
DatePicker Compat		 213.658 kB
59.949 kB		 213.918 kB
60.021 kB		 260 B
72 B
react-infobutton
InfoButton		 132.737 kB
41.771 kB		 132.996 kB
41.838 kB		 259 B
67 B
react-infobutton
InfoLabel		 136.424 kB
42.903 kB		 136.684 kB
42.979 kB		 260 B
76 B
react-menu
Menu (including children components)		 142.09 kB
43.583 kB		 142.349 kB
43.657 kB		 259 B
74 B
react-menu
Menu (including selectable components)		 144.776 kB
44.092 kB		 145.035 kB
44.163 kB		 259 B
71 B
react-popover
Popover		 120.931 kB
38.165 kB		 121.19 kB
38.227 kB		 259 B
62 B
react-positioning
usePositioning		 25.891 kB
9.362 kB		 26.162 kB
9.465 kB		 271 B
103 B
react-timepicker-compat
TimePicker		 97.013 kB
32.163 kB		 97.272 kB
32.257 kB		 259 B
94 B
react-timepicker-compat-preview
TimePicker		 97.013 kB
32.163 kB		 97.272 kB
32.257 kB		 259 B
94 B
react-tooltip
Tooltip		 53.371 kB
18.855 kB		 53.63 kB
18.924 kB		 259 B
69 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-alert
Alert		 83.737 kB
23.474 kB
react-avatar
Avatar		 50.175 kB
15.944 kB
react-avatar
AvatarGroup		 19.704 kB
7.796 kB
react-avatar
AvatarGroupItem		 64.831 kB
20.274 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 69.901 kB
20.261 kB
react-components
react-components: FluentProvider & webLightTheme		 42.388 kB
14.103 kB
react-persona
Persona		 57.066 kB
17.821 kB
react-portal-compat
PortalCompatProvider		 7.099 kB
2.385 kB
react-table
DataGrid		 156.347 kB
43.735 kB
react-table
Table (Primitives only)		 43.899 kB
13.781 kB
react-table
Table as DataGrid		 129.567 kB
35 kB
react-table
Table (Selection only)		 74.744 kB
20.215 kB
react-table
Table (Sort only)		 73.351 kB
19.806 kB
react-tags
InteractionTag		 15.259 kB
6.058 kB
react-tags
Tag		 29.982 kB
9.439 kB
react-tags
TagGroup		 74.334 kB
22.284 kB
🤖 This report was generated against 99e1128925fa5863a99e311884cc2c710c2606bd

@size-auditor
Copy link

size-auditor bot commented Dec 29, 2023 •
edited
Loading

Asset size changes

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

Baseline commit: 99e1128925fa5863a99e311884cc2c710c2606bd (build)

@ling1726 ling1726 enabled auto-merge (squash) January 8, 2024 13:11
@ling1726 ling1726 merged commit 5f9ae1e into microsoft:master Jan 9, 2024
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jan 10, 2024
@marcosmoura
Merge branch 'master' into fix/react-card/keyboard-focus-regression
5617a43 
* master: (166 commits)
  Remove v0 dependency from v0 compat package (microsoft#30276)
  applying package updates
  Disallow `window` and `document` access for `@fluentui/react` and related packages. (microsoft#30063)
  Update Rating api and stories (microsoft#30092)
  TeachingPopover: Minor style changes (microsoft#30270)
  feat(scripts-gulp): replace lerna with nx (microsoft#30266)
  ci: remove canary and nightly functionality from northstar (microsoft#30264)
  List: Re-initialize on mount in React 18. (microsoft#29881)
  feat(scripts-monorepo): replace lerna/utils with pure nx apis (microsoft#30178)
  chore: remove react-timepicker-compat-preview (microsoft#30263)
  applying package updates
  feat(TimePicker-compat): stable release  (microsoft#30217)
  feat: Implement onPositioningEnd callback (microsoft#30177)
  applying package updates
  v8 registerIcons compat (microsoft#30003)
  Adding Planner, ToDoItem and updated Project filetype icons. Updating FabricCDN url to latest datecode. (microsoft#30079)
  Scaffolds more Nav components (microsoft#30227)
  chore: migrate to nx 17.2 (microsoft#30187)
  applying package updates
  feat: Update position when target or container dimensions change (microsoft#30179)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fabricteam fabricteam fabricteam left review comments

@khmakoto khmakoto khmakoto approved these changes

@layershifter layershifter layershifter approved these changes

Assignees

No one assigned

Labels

Component: Menu

Projects

None yet

Milestone

January Project Cycle Q1 2024

Development

Successfully merging this pull request may close these issues.

[Feature]: Notify position update was completed Menu: opening multiple nested menus at the same time can result in weird positioning

4 participants

@ling1726 @fabricteam @khmakoto @layershifter