fix(react-utilities): add compatibility with shadow DOM by layershifter · Pull Request #28307 · microsoft/fluentui

layershifter · 2023-06-23T09:35:13Z

New Behavior

This PR updates useOnClickOutside() and useOnScrollOutside() to use .composedPath() where we can get a proper event target (event.target will be a shadow root if event happened inside it).

Also adds Cypress tests and Cypress configuration files to cover the scenario with browser tests.

Related Issue(s)

Fixes #27763

size-auditor · 2023-06-23T09:46:29Z

Asset size changes

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

Baseline commit: d93cb0b8cb80f56e753ad18c645eeb84a9c10256 (build)

fabricteam · 2023-06-23T09:46:47Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	67	60	10	Possible regression
InfoButton	mount	16	6	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	593	588	5000
Button	mount	303	288	5000
Field	mount	1047	1051	5000
FluentProvider	mount	645	640	5000
FluentProviderWithTheme	mount	71	79	10
FluentProviderWithTheme	virtual-rerender	67	60	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	71	76	10
InfoButton	mount	16	6	5000	Possible regression
MakeStyles	mount	857	844	50000
Persona	mount	1601	1615	5000
SpinButton	mount	1324	1316	5000

codesandbox-ci · 2023-06-23T09:47:05Z

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

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

fabricteam · 2023-06-23T09:47:24Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	86	75	1.15:1
TextMinimalPerf.default	195	181	1.08:1
CarouselMinimalPerf.default	264	246	1.07:1
ItemLayoutMinimalPerf.default	729	682	1.07:1
RefMinimalPerf.default	111	105	1.06:1
TreeMinimalPerf.default	484	456	1.06:1
AttachmentMinimalPerf.default	81	77	1.05:1
ButtonMinimalPerf.default	85	81	1.05:1
HeaderSlotsPerf.default	472	450	1.05:1
ListMinimalPerf.default	308	292	1.05:1
ReactionMinimalPerf.default	218	208	1.05:1
SegmentMinimalPerf.default	203	194	1.05:1
TextAreaMinimalPerf.default	292	279	1.05:1
AvatarMinimalPerf.default	106	102	1.04:1
ChatMinimalPerf.default	430	414	1.04:1
ListNestedPerf.default	319	311	1.03:1
ProviderMergeThemesPerf.default	673	656	1.03:1
SliderMinimalPerf.default	762	741	1.03:1
StatusMinimalPerf.default	399	389	1.03:1
AttachmentSlotsPerf.default	636	624	1.02:1
ChatDuplicateMessagesPerf.default	150	147	1.02:1
FlexMinimalPerf.default	152	149	1.02:1
MenuButtonMinimalPerf.default	946	928	1.02:1
RosterPerf.default	1510	1483	1.02:1
SkeletonMinimalPerf.default	196	192	1.02:1
SplitButtonMinimalPerf.default	2246	2199	1.02:1
AnimationMinimalPerf.default	294	292	1.01:1
ButtonSlotsPerf.default	306	302	1.01:1
DatepickerMinimalPerf.default	3484	3465	1.01:1
FormMinimalPerf.default	219	216	1.01:1
GridMinimalPerf.default	188	186	1.01:1
ListCommonPerf.default	384	380	1.01:1
ListWith60ListItems.default	356	353	1.01:1
PopupMinimalPerf.default	348	346	1.01:1
PortalMinimalPerf.default	85	84	1.01:1
RadioGroupMinimalPerf.default	258	255	1.01:1
TableMinimalPerf.default	236	234	1.01:1
CustomToolbarPrototype.default	1469	1449	1.01:1
BoxMinimalPerf.default	186	186	1:1
ButtonOverridesMissPerf.default	654	656	1:1
ChatWithPopoverPerf.default	195	195	1:1
DialogMinimalPerf.default	440	441	1:1
DropdownManyItemsPerf.default	390	390	1:1
LabelMinimalPerf.default	221	220	1:1
TableManyItemsPerf.default	1116	1115	1:1
DividerMinimalPerf.default	197	199	0.99:1
DropdownMinimalPerf.default	1430	1443	0.99:1
EmbedMinimalPerf.default	1829	1851	0.99:1
HeaderMinimalPerf.default	200	203	0.99:1
LoaderMinimalPerf.default	189	191	0.99:1
TooltipMinimalPerf.default	1242	1251	0.99:1
CheckboxMinimalPerf.default	1120	1140	0.98:1
MenuMinimalPerf.default	480	489	0.98:1
IconMinimalPerf.default	370	376	0.98:1
AlertMinimalPerf.default	151	155	0.97:1
CardMinimalPerf.default	307	316	0.97:1
InputMinimalPerf.default	526	543	0.97:1
ToolbarMinimalPerf.default	518	532	0.97:1
LayoutMinimalPerf.default	200	208	0.96:1
ProviderMinimalPerf.default	198	206	0.96:1
VideoMinimalPerf.default	430	446	0.96:1
ImageMinimalPerf.default	220	232	0.95:1
AccordionMinimalPerf.default	75	82	0.91:1

fabricteam · 2023-06-23T09:49:21Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-06-23T09:53:35Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`210.365 kB` `58.697 kB`	`210.395 kB` `58.717 kB`	`30 B` `20 B`
`react-datepicker-compat` DatePicker Compat	`221.863 kB` `59.081 kB`	`221.893 kB` `59.104 kB`	`30 B` `23 B`
`react-infobutton` InfoButton	`131.161 kB` `40.259 kB`	`131.191 kB` `40.269 kB`	`30 B` `10 B`
`react-infobutton` InfoLabel	`134.626 kB` `41.328 kB`	`134.656 kB` `41.338 kB`	`30 B` `10 B`
`react-menu` Menu (including children components)	`132.358 kB` `40.508 kB`	`132.388 kB` `40.52 kB`	`30 B` `12 B`
`react-menu` Menu (including selectable components)	`135.122 kB` `41.002 kB`	`135.152 kB` `41.012 kB`	`30 B` `10 B`
`react-popover` Popover	`119.751 kB` `36.834 kB`	`119.781 kB` `36.844 kB`	`30 B` `10 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`4.248 kB` `1.671 kB`
`react-accordion` Accordion (including children components)	`88.246 kB` `26.712 kB`
`react-alert` Alert	`82.552 kB` `21.771 kB`
`react-avatar` Avatar	`47.7 kB` `14.504 kB`
`react-avatar` AvatarGroup	`15.682 kB` `6.306 kB`
`react-avatar` AvatarGroupItem	`63.876 kB` `18.984 kB`
`react-badge` Badge	`23.591 kB` `7.264 kB`
`react-badge` CounterBadge	`24.493 kB` `7.565 kB`
`react-badge` PresenceBadge	`22.213 kB` `7.872 kB`
`react-button` Button	`36.778 kB` `9.51 kB`
`react-button` CompoundButton	`43.932 kB` `10.99 kB`
`react-button` MenuButton	`40.965 kB` `10.705 kB`
`react-button` SplitButton	`49.197 kB` `12.27 kB`
`react-button` ToggleButton	`55.06 kB` `11.446 kB`
`react-card` Card - All	`89.11 kB` `25.236 kB`
`react-card` Card	`83.764 kB` `23.685 kB`
`react-card` CardFooter	`9.229 kB` `3.9 kB`
`react-card` CardHeader	`11.402 kB` `4.683 kB`
`react-card` CardPreview	`10.034 kB` `4.248 kB`
`react-checkbox` Checkbox	`33.164 kB` `10.699 kB`
`react-combobox` Combobox (including child components)	`86.98 kB` `28.084 kB`
`react-combobox` Dropdown (including child components)	`85.321 kB` `27.675 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`65.162 kB` `17.952 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.395 kB` `11.996 kB`
`react-dialog` Dialog (including children components)	`92.138 kB` `27.487 kB`
`react-divider` Divider	`17.477 kB` `6.357 kB`
`react-field` Field	`18.003 kB` `6.931 kB`
`react-image` Image	`11.55 kB` `4.627 kB`
`react-input` Input	`24.219 kB` `7.781 kB`
`react-label` Label	`10.175 kB` `4.243 kB`
`react-link` Link	`12.375 kB` `5.113 kB`
`react-overflow` hooks only	`12.505 kB` `4.626 kB`
`react-persona` Persona	`54.621 kB` `16.435 kB`
`react-portal` Portal	`11.82 kB` `4.391 kB`
`react-portal-compat` PortalCompatProvider	`6.473 kB` `2.196 kB`
`react-positioning` usePositioning	`24.249 kB` `8.856 kB`
`react-progress` ProgressBar	`13.927 kB` `5.488 kB`
`react-provider` FluentProvider	`18.115 kB` `6.719 kB`
`react-radio` Radio	`26.952 kB` `8.608 kB`
`react-radio` RadioGroup	`11.362 kB` `4.753 kB`
`react-select` Select	`24.915 kB` `8.708 kB`
`react-slider` Slider	`34.358 kB` `11.107 kB`
`react-spinbutton` SpinButton	`33.452 kB` `10.296 kB`
`react-spinner` Spinner	`21.363 kB` `7.021 kB`
`react-switch` Switch	`29.472 kB` `9.226 kB`
`react-table` DataGrid	`156.306 kB` `42.785 kB`
`react-table` Table (Primitives only)	`44.652 kB` `12.468 kB`
`react-table` Table as DataGrid	`131.96 kB` `33.791 kB`
`react-table` Table (Selection only)	`77.561 kB` `19.178 kB`
`react-table` Table (Sort only)	`76.891 kB` `18.989 kB`
`react-tags` Tag	`23.153 kB` `7.922 kB`
`react-text` Text - Default	`12.563 kB` `4.972 kB`
`react-text` Text - Wrappers	`15.713 kB` `5.293 kB`
`react-textarea` Textarea	`27.69 kB` `9.125 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.987 kB` `6.85 kB`
`react-theme` Teams: Light theme	`18.121 kB` `5.194 kB`
`react-tooltip` Tooltip	`47.319 kB` `16.618 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against d93cb0b8cb80f56e753ad18c645eeb84a9c10256}

fabricteam · 2023-06-23T09:55:32Z

🕵 FluentUI-v0 No visual regressions between this PR and main

fabricteam · 2023-06-23T09:56:51Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-06-23T09:57:47Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	610	623	5000
Breadcrumb	mount	1666	1676	1000
Checkbox	mount	1693	1685	5000
CheckboxBase	mount	1465	1479	5000
ChoiceGroup	mount	2942	2894	5000
ComboBox	mount	662	635	1000
CommandBar	mount	6138	6069	1000
ContextualMenu	mount	12108	12143	1000
DefaultButton	mount	742	747	5000
DetailsRow	mount	2184	2198	5000
DetailsRowFast	mount	2208	2154	5000
DetailsRowNoStyles	mount	1960	1980	5000
Dialog	mount	2605	2593	1000
DocumentCardTitle	mount	231	228	1000
Dropdown	mount	1978	1932	5000
FocusTrapZone	mount	1101	1097	5000
FocusZone	mount	1052	1069	5000
GroupedList	mount	40615	41001	2
GroupedList	virtual-rerender	19560	19563	2
GroupedList	virtual-rerender-with-unmount	50568	50093	2
GroupedListV2	mount	224	222	2
GroupedListV2	virtual-rerender	214	206	2
GroupedListV2	virtual-rerender-with-unmount	238	237	2
IconButton	mount	1102	1081	5000
Label	mount	353	324	5000
Layer	mount	2714	2730	5000
Link	mount	393	387	5000
MenuButton	mount	934	926	5000
MessageBar	mount	21425	21329	5000
Nav	mount	1901	1925	1000
OverflowSet	mount	773	784	5000
Panel	mount	1754	1742	1000
Persona	mount	735	747	1000
Pivot	mount	850	855	1000
PrimaryButton	mount	824	846	5000
Rating	mount	4477	4550	5000
SearchBox	mount	922	899	5000
Shimmer	mount	1826	1841	5000
Slider	mount	1343	1320	5000
SpinButton	mount	2928	2894	5000
Spinner	mount	373	386	5000
SplitButton	mount	1806	1810	5000
Stack	mount	413	410	5000
StackWithIntrinsicChildren	mount	849	867	5000
StackWithTextChildren	mount	2621	2597	5000
SwatchColorPicker	mount	6077	6033	5000
TagPicker	mount	1394	1452	5000
Text	mount	375	385	5000
TextField	mount	920	920	5000
ThemeProvider	mount	820	825	5000
ThemeProvider	virtual-rerender	588	585	5000
ThemeProvider	virtual-rerender-with-unmount	1285	1273	5000
Toggle	mount	615	616	5000
buttonNative	mount	192	184	5000

package.json

msft-fluent-ui-bot · 2023-06-27T07:40:35Z

🎉@fluentui/react-utilities@v9.9.4 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-06-27T07:40:41Z

🎉@fluentui/react-components@v9.22.1 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot assigned ValentinaKozlova Jun 23, 2023

github-actions bot added this to the June Project Cycle Q2 2023 milestone Jun 23, 2023

fix(react-utilities): add compatibility with shadow DOM

d5bf205

layershifter force-pushed the fix/utils-compat branch from 6760052 to d5bf205 Compare June 23, 2023 10:08

layershifter unassigned ValentinaKozlova Jun 23, 2023

layershifter marked this pull request as ready for review June 23, 2023 10:09

layershifter requested review from a team as code owners June 23, 2023 10:09

bsunderhus approved these changes Jun 23, 2023

View reviewed changes

package.json Show resolved Hide resolved

ling1726 approved these changes Jun 26, 2023

View reviewed changes

layershifter merged commit 025ea2c into microsoft:master Jun 26, 2023

layershifter deleted the fix/utils-compat branch June 26, 2023 09:03

msft-fluent-ui-bot mentioned this pull request Jun 27, 2023

[Bug]: event handlers should be bind properly for Shadow DOM [v9] #27763

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(react-utilities): add compatibility with shadow DOM#28307

fix(react-utilities): add compatibility with shadow DOM#28307
layershifter merged 1 commit intomicrosoft:masterfrom
layershifter:fix/utils-compat

layershifter commented Jun 23, 2023 •

edited by bsunderhus

Loading

Uh oh!

size-auditor bot commented Jun 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jun 23, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Jun 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jun 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jun 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jun 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jun 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jun 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jun 23, 2023 •

edited

Loading

Uh oh!

Uh oh!

msft-fluent-ui-bot commented Jun 27, 2023

Uh oh!

msft-fluent-ui-bot commented Jun 27, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

layershifter commented Jun 23, 2023 • edited by bsunderhus Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New Behavior

Related Issue(s)

Uh oh!

size-auditor bot commented Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci bot commented Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUI-v0 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Uh oh!

msft-fluent-ui-bot commented Jun 27, 2023

Uh oh!

msft-fluent-ui-bot commented Jun 27, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

layershifter commented Jun 23, 2023 •

edited by bsunderhus

Loading

size-auditor bot commented Jun 23, 2023 •

edited

Loading

fabricteam commented Jun 23, 2023 •

edited

Loading

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

codesandbox-ci bot commented Jun 23, 2023 •

edited

Loading

fabricteam commented Jun 23, 2023 •

edited

Loading

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

fabricteam commented Jun 23, 2023 •

edited

Loading

fabricteam commented Jun 23, 2023 •

edited

Loading

fabricteam commented Jun 23, 2023 •

edited

Loading

fabricteam commented Jun 23, 2023 •

edited

Loading

fabricteam commented Jun 23, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)