fix(react-utilities): drag scrollbar should invoke callback in `useOnScrollOutside` with event type cast #29062

YuanboXue-Amber · 2023-09-04T17:17:42Z

This is the same fix as #28964.

#28964 tries to add Event into the callback type: from callback: (ev: MouseEvent | TouchEvent) => void to callback: (ev: Event | MouseEvent | TouchEvent) => void. But it can be a breaking change and potentially block fluent ui upgrade (see this comment on the original PR)

This PR resolves the same issue using type cast. It's not perfect, but not the worst.
I plan to take the original PR to tech sync and discuss the typing issue there.

fabricteam · 2023-09-04T17:27:26Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	635	607	5000
Button	mount	315	311	5000
Field	mount	1093	1081	5000
FluentProvider	mount	701	689	5000
FluentProviderWithTheme	mount	81	81	10
FluentProviderWithTheme	virtual-rerender	83	74	10
FluentProviderWithTheme	virtual-rerender-with-unmount	75	81	10
InfoButton	mount	12	10	5000
MakeStyles	mount	855	870	50000
Persona	mount	1705	1700	5000
SpinButton	mount	1351	1360	5000

codesandbox-ci · 2023-09-04T17:31:31Z

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 5eb036e:

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

fabricteam · 2023-09-04T17:32:02Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`208.067 kB` `59.345 kB`	`208.194 kB` `59.365 kB`	`127 B` `20 B`
`react-datepicker-compat` DatePicker Compat	`211.173 kB` `58.752 kB`	`211.3 kB` `58.763 kB`	`127 B` `11 B`
`react-infobutton` InfoButton	`129.184 kB` `40.661 kB`	`129.311 kB` `40.674 kB`	`127 B` `13 B`
`react-infobutton` InfoLabel	`132.909 kB` `41.852 kB`	`133.036 kB` `41.865 kB`	`127 B` `13 B`
`react-menu` Menu (including children components)	`139.369 kB` `42.976 kB`	`139.496 kB` `42.99 kB`	`127 B` `14 B`
`react-menu` Menu (including selectable components)	`142.105 kB` `43.507 kB`	`142.232 kB` `43.523 kB`	`127 B` `16 B`
`react-popover` Popover	`118.438 kB` `37.318 kB`	`118.565 kB` `37.335 kB`	`127 B` `17 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`react-accordion` Accordion (including children components)	`91.384 kB` `27.926 kB`
`react-alert` Alert	`84.549 kB` `23.128 kB`
`react-avatar` Avatar	`49.738 kB` `15.631 kB`
`react-avatar` AvatarGroup	`18.584 kB` `7.448 kB`
`react-avatar` AvatarGroupItem	`64.39 kB` `19.977 kB`
`react-badge` Badge	`25.793 kB` `8.348 kB`
`react-badge` CounterBadge	`26.694 kB` `8.658 kB`
`react-badge` PresenceBadge	`24.75 kB` `8.96 kB`
`react-button` Button	`39.658 kB` `10.79 kB`
`react-button` CompoundButton	`47.013 kB` `12.284 kB`
`react-button` MenuButton	`44.085 kB` `12.041 kB`
`react-button` SplitButton	`52.111 kB` `13.612 kB`
`react-button` ToggleButton	`56.746 kB` `12.698 kB`
`react-card` Card - All	`91.249 kB` `26.409 kB`
`react-card` Card	`86.038 kB` `24.868 kB`
`react-card` CardFooter	`11.951 kB` `5.031 kB`
`react-card` CardHeader	`14.237 kB` `5.798 kB`
`react-card` CardPreview	`12.903 kB` `5.408 kB`
`react-checkbox` Checkbox	`35.614 kB` `11.771 kB`
`react-combobox` Combobox (including child components)	`90.383 kB` `29.52 kB`
`react-combobox` Dropdown (including child components)	`88.738 kB` `29.167 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.517 kB` `19.64 kB`
`react-components` react-components: FluentProvider & webLightTheme	`40.713 kB` `13.509 kB`
`react-dialog` Dialog (including children components)	`89.917 kB` `27.447 kB`
`react-divider` Divider	`19.704 kB` `7.38 kB`
`react-field` Field	`21.036 kB` `8.091 kB`
`react-image` Image	`14.62 kB` `5.869 kB`
`react-input` Input	`25.955 kB` `8.81 kB`
`react-jsx-runtime` Classic Pragma	`1.072 kB` `544 B`
`react-jsx-runtime` JSX Dev Runtime	`2.775 kB` `1.29 kB`
`react-jsx-runtime` JSX Runtime	`3.293 kB` `1.529 kB`
`react-label` Label	`13.036 kB` `5.405 kB`
`react-link` Link	`15.902 kB` `6.506 kB`
`react-overflow` hooks only	`12.594 kB` `4.702 kB`
`react-persona` Persona	`56.629 kB` `17.505 kB`
`react-portal` Portal	`12.362 kB` `4.543 kB`
`react-portal-compat` PortalCompatProvider	`6.541 kB` `2.227 kB`
`react-positioning` usePositioning	`25.245 kB` `9.141 kB`
`react-progress` ProgressBar	`16.409 kB` `6.58 kB`
`react-provider` FluentProvider	`21.258 kB` `7.937 kB`
`react-radio` Radio	`29.318 kB` `9.699 kB`
`react-radio` RadioGroup	`14.344 kB` `5.942 kB`
`react-select` Select	`27.324 kB` `9.773 kB`
`react-slider` Slider	`36.849 kB` `12.171 kB`
`react-spinbutton` SpinButton	`35.53 kB` `11.367 kB`
`react-spinner` Spinner	`22.292 kB` `8.113 kB`
`react-switch` Switch	`31.885 kB` `10.356 kB`
`react-table` DataGrid	`156.473 kB` `43.597 kB`
`react-table` Table (Primitives only)	`42.52 kB` `13.286 kB`
`react-table` Table as DataGrid	`129.333 kB` `34.77 kB`
`react-table` Table (Selection only)	`74.617 kB` `20.089 kB`
`react-table` Table (Sort only)	`73.248 kB` `19.685 kB`
`react-tags-preview` InteractionTag	`13.85 kB` `5.626 kB`
`react-tags-preview` Tag	`29.604 kB` `9.567 kB`
`react-tags-preview` TagGroup	`72.493 kB` `21.628 kB`
`react-text` Text - Default	`15.644 kB` `6.223 kB`
`react-text` Text - Wrappers	`18.817 kB` `6.546 kB`
`react-textarea` Textarea	`30.005 kB` `10.156 kB`
`react-toast` Toast (including Toaster)	`90.782 kB` `27.171 kB`
`react-tooltip` Tooltip	`51.154 kB` `18.06 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 0bf811dbcaaa6b78743537d142fe4d348b457045}

size-auditor · 2023-09-04T17:37:52Z

Asset size changes

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

Baseline commit: 0bf811dbcaaa6b78743537d142fe4d348b457045 (build)

fabricteam · 2023-09-04T17:39:25Z

🕵 fluentuiv9 No visual regressions between this PR and main

…n `useOnScrollOutside` with event type cast (#29062)" This reverts commit e1a8824.

…n `useOnScrollOutside` with event type cast (microsoft#29062)" This reverts commit e1a8824.

…ollbar (#29412) * Revert "fix(react-utilities): drag scrollbar should invoke callback in `useOnScrollOutside` with event type cast (#29062)" This reverts commit e1a8824. * chg * whitespace

YuanboXue-Amber added 3 commits September 4, 2023 19:12

chg

398465f

fix

2937f9c

UT

5eb036e

YuanboXue-Amber requested a review from a team as a code owner September 4, 2023 17:17

ling1726 approved these changes Sep 5, 2023

View reviewed changes

YuanboXue-Amber mentioned this pull request Sep 5, 2023

fix(react-utilities): drag scrollbar should invoke callback in useOnScrollOutside with extending event type #28964

Closed

YuanboXue-Amber merged commit e1a8824 into microsoft:master Sep 5, 2023

YuanboXue-Amber mentioned this pull request Sep 5, 2023

[Bug]: The PopoverSurface doesn't close automatically when the Popover is used with closeOnScroll #28938

Closed

2 tasks

YuanboXue-Amber deleted the scroll branch September 5, 2023 15:47

YuanboXue-Amber added a commit that referenced this pull request Oct 5, 2023

Revert "fix(react-utilities): drag scrollbar should invoke callback i…

6f6b625

…n `useOnScrollOutside` with event type cast (#29062)" This reverts commit e1a8824.

YuanboXue-Amber added a commit to YuanboXue-Amber/fluentui that referenced this pull request Oct 5, 2023

Revert "fix(react-utilities): drag scrollbar should invoke callback i…

e94aba0

…n `useOnScrollOutside` with event type cast (microsoft#29062)" This reverts commit e1a8824.

YuanboXue-Amber mentioned this pull request Oct 5, 2023

Revert fix: useOnScrollOutside should invoke callback on dragging scrollbar #29412

Merged

YuanboXue-Amber mentioned this pull request Oct 5, 2023

chore(react-utilities): add e2e test to useOnScrollOutside #29413

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(react-utilities): drag scrollbar should invoke callback in `useOnScrollOutside` with event type cast #29062

fix(react-utilities): drag scrollbar should invoke callback in `useOnScrollOutside` with event type cast #29062

Uh oh!

YuanboXue-Amber commented Sep 4, 2023 •

edited

Loading

Uh oh!

fabricteam commented Sep 4, 2023

Uh oh!

codesandbox-ci bot commented Sep 4, 2023

Uh oh!

fabricteam commented Sep 4, 2023

Uh oh!

size-auditor bot commented Sep 4, 2023

Uh oh!

fabricteam commented Sep 4, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix(react-utilities): drag scrollbar should invoke callback in useOnScrollOutside with event type cast #29062

fix(react-utilities): drag scrollbar should invoke callback in useOnScrollOutside with event type cast #29062

Uh oh!

Conversation

YuanboXue-Amber commented Sep 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

This is the same fix as #28964.

Uh oh!

fabricteam commented Sep 4, 2023

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci bot commented Sep 4, 2023

Uh oh!

fabricteam commented Sep 4, 2023

📊 Bundle size report

Uh oh!

size-auditor bot commented Sep 4, 2023

Asset size changes

Uh oh!

fabricteam commented Sep 4, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix(react-utilities): drag scrollbar should invoke callback in `useOnScrollOutside` with event type cast #29062

fix(react-utilities): drag scrollbar should invoke callback in `useOnScrollOutside` with event type cast #29062

YuanboXue-Amber commented Sep 4, 2023 •

edited

Loading

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