feat: use tabster restorer API #28530

ling1726 · 2023-07-14T16:20:00Z

Implements and documents the new restore focus hooks for react-tabster:

useRestoreFocusTarget
useRestoreFocusSource

Removes the usage of deloser from Tabster in favour of the new API.

Dialog

The documentation example for the Dialog without trigger uses the useRestoreFocusTarget hook

Popover

Adds a documentation example for Popover with out trigger that uses useRestoreFocusTarget hook

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	602	592	5000
Button	mount	301	294	5000
Field	mount	1078	1096	5000
FluentProvider	mount	623	664	5000
FluentProviderWithTheme	mount	74	71	10
FluentProviderWithTheme	virtual-rerender	63	66	10
FluentProviderWithTheme	virtual-rerender-with-unmount	75	69	10
InfoButton	mount	15	17	5000
MakeStyles	mount	862	867	50000
Persona	mount	1675	1632	5000
SpinButton	mount	1290	1339	5000

codesandbox-ci · 2023-07-14T16:31:49Z

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

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

fabricteam · 2023-07-14T16:33:19Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-07-14T16:34:21Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonSlotsPerf.default	313	290	1.08:1
VideoMinimalPerf.default	433	400	1.08:1
ChatMinimalPerf.default	451	422	1.07:1
AttachmentMinimalPerf.default	81	77	1.05:1
ReactionMinimalPerf.default	215	204	1.05:1
PopupMinimalPerf.default	355	340	1.04:1
RefMinimalPerf.default	116	112	1.04:1
AttachmentSlotsPerf.default	651	633	1.03:1
AvatarMinimalPerf.default	108	105	1.03:1
ButtonMinimalPerf.default	91	88	1.03:1
FlexMinimalPerf.default	158	153	1.03:1
HeaderMinimalPerf.default	209	202	1.03:1
ListMinimalPerf.default	311	303	1.03:1
ListWith60ListItems.default	378	366	1.03:1
MenuMinimalPerf.default	502	487	1.03:1
TextMinimalPerf.default	194	189	1.03:1
ItemLayoutMinimalPerf.default	713	698	1.02:1
PortalMinimalPerf.default	83	81	1.02:1
ProviderMergeThemesPerf.default	667	656	1.02:1
ProviderMinimalPerf.default	199	196	1.02:1
SplitButtonMinimalPerf.default	2241	2207	1.02:1
StatusMinimalPerf.default	404	398	1.02:1
TreeMinimalPerf.default	473	465	1.02:1
AnimationMinimalPerf.default	301	297	1.01:1
DialogMinimalPerf.default	440	435	1.01:1
DividerMinimalPerf.default	205	203	1.01:1
DropdownManyItemsPerf.default	380	376	1.01:1
HeaderSlotsPerf.default	458	453	1.01:1
RadioGroupMinimalPerf.default	265	262	1.01:1
TableMinimalPerf.default	231	228	1.01:1
TextAreaMinimalPerf.default	288	285	1.01:1
CardMinimalPerf.default	310	311	1:1
CheckboxMinimalPerf.default	1114	1116	1:1
DropdownMinimalPerf.default	1401	1402	1:1
LayoutMinimalPerf.default	202	201	1:1
LoaderMinimalPerf.default	197	197	1:1
CustomToolbarPrototype.default	1457	1451	1:1
TooltipMinimalPerf.default	1262	1264	1:1
AccordionMinimalPerf.default	82	83	0.99:1
ChatDuplicateMessagesPerf.default	149	151	0.99:1
DatepickerMinimalPerf.default	3568	3609	0.99:1
ImageMinimalPerf.default	225	228	0.99:1
InputMinimalPerf.default	528	531	0.99:1
ListNestedPerf.default	319	321	0.99:1
MenuButtonMinimalPerf.default	930	938	0.99:1
RosterPerf.default	1514	1533	0.99:1
SkeletonMinimalPerf.default	198	199	0.99:1
SliderMinimalPerf.default	751	756	0.99:1
TableManyItemsPerf.default	1102	1110	0.99:1
ToolbarMinimalPerf.default	528	533	0.99:1
AlertMinimalPerf.default	153	156	0.98:1
ButtonOverridesMissPerf.default	630	640	0.98:1
EmbedMinimalPerf.default	1810	1850	0.98:1
FormMinimalPerf.default	224	230	0.97:1
IconMinimalPerf.default	370	387	0.96:1
LabelMinimalPerf.default	215	226	0.95:1
CarouselMinimalPerf.default	251	267	0.94:1
ListCommonPerf.default	371	393	0.94:1
GridMinimalPerf.default	177	190	0.93:1
ChatWithPopoverPerf.default	174	191	0.91:1
SegmentMinimalPerf.default	182	199	0.91:1
BoxMinimalPerf.default	191	212	0.9:1
TreeWith60ListItems.default	75	86	0.87:1

fabricteam · 2023-07-14T16:38:42Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`88.286 kB` `26.724 kB`	`88.535 kB` `26.796 kB`	`249 B` `72 B`
`react-card` Card - All	`89.36 kB` `25.284 kB`	`89.609 kB` `25.358 kB`	`249 B` `74 B`
`react-card` Card	`83.778 kB` `23.685 kB`	`84.027 kB` `23.768 kB`	`249 B` `83 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`213.111 kB` `59.12 kB`	`207.114 kB` `57.7 kB`	`-5.997 kB` `-1.42 kB`
`react-datepicker-compat` DatePicker Compat	`223.394 kB` `59.277 kB`	`217.386 kB` `57.966 kB`	`-6.008 kB` `-1.311 kB`
`react-dialog` Dialog (including children components)	`92.762 kB` `27.587 kB`	`87.367 kB` `26.408 kB`	`-5.395 kB` `-1.179 kB`
`react-infobutton` InfoButton	`131.361 kB` `40.326 kB`	`125.967 kB` `39.119 kB`	`-5.394 kB` `-1.207 kB`
`react-infobutton` InfoLabel	`134.966 kB` `41.462 kB`	`129.567 kB` `40.262 kB`	`-5.399 kB` `-1.2 kB`
`react-menu` Menu (including children components)	`132.703 kB` `40.62 kB`	`135.142 kB` `41.215 kB`	`2.439 kB` `595 B`
`react-menu` Menu (including selectable components)	`135.467 kB` `41.115 kB`	`137.906 kB` `41.715 kB`	`2.439 kB` `600 B`
`react-popover` Popover	`119.925 kB` `36.895 kB`	`114.526 kB` `35.703 kB`	`-5.399 kB` `-1.192 kB`
`react-table` DataGrid	`158.216 kB` `42.389 kB`	`158.464 kB` `42.465 kB`	`248 B` `76 B`
`react-table` Table as DataGrid	`132.019 kB` `33.82 kB`	`132.268 kB` `33.902 kB`	`249 B` `82 B`
`react-tags-preview` TagGroup	`69.142 kB` `20.294 kB`	`69.398 kB` `20.364 kB`	`256 B` `70 B`
`react-toast` Toast (including Toaster)	`78.365 kB` `23.67 kB`	`78.573 kB` `23.728 kB`	`208 B` `58 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-alert` Alert	`84.992 kB` `22.03 kB`
`react-avatar` Avatar	`47.739 kB` `14.521 kB`
`react-avatar` AvatarGroup	`15.695 kB` `6.314 kB`
`react-avatar` AvatarGroupItem	`63.915 kB` `19.001 kB`
`react-badge` Badge	`23.604 kB` `7.272 kB`
`react-badge` CounterBadge	`24.506 kB` `7.574 kB`
`react-badge` PresenceBadge	`22.253 kB` `7.891 kB`
`react-button` Button	`39.193 kB` `9.743 kB`
`react-button` CompoundButton	`46.661 kB` `11.257 kB`
`react-button` MenuButton	`43.553 kB` `10.979 kB`
`react-button` SplitButton	`51.758 kB` `12.571 kB`
`react-button` ToggleButton	`57.629 kB` `11.645 kB`
`react-card` CardFooter	`9.24 kB` `3.907 kB`
`react-card` CardHeader	`11.652 kB` `4.741 kB`
`react-card` CardPreview	`10.048 kB` `4.254 kB`
`react-checkbox` Checkbox	`33.224 kB` `10.727 kB`
`react-combobox` Combobox (including child components)	`87.199 kB` `28.143 kB`
`react-combobox` Dropdown (including child components)	`85.602 kB` `27.746 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`67.576 kB` `18.225 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.409 kB` `12.003 kB`
`react-divider` Divider	`17.49 kB` `6.364 kB`
`react-field` Field	`18.174 kB` `6.977 kB`
`react-image` Image	`11.561 kB` `4.637 kB`
`react-input` Input	`24.232 kB` `7.781 kB`
`react-label` Label	`10.186 kB` `4.253 kB`
`react-link` Link	`12.782 kB` `5.247 kB`
`react-overflow` hooks only	`12.505 kB` `4.626 kB`
`react-persona` Persona	`55.293 kB` `16.535 kB`
`react-portal` Portal	`11.935 kB` `4.421 kB`
`react-portal-compat` PortalCompatProvider	`6.48 kB` `2.203 kB`
`react-positioning` usePositioning	`24.272 kB` `8.866 kB`
`react-progress` ProgressBar	`13.941 kB` `5.498 kB`
`react-provider` FluentProvider	`18.129 kB` `6.73 kB`
`react-radio` Radio	`27.017 kB` `8.638 kB`
`react-radio` RadioGroup	`11.376 kB` `4.763 kB`
`react-select` Select	`24.955 kB` `8.722 kB`
`react-slider` Slider	`34.87 kB` `11.178 kB`
`react-spinbutton` SpinButton	`33.756 kB` `10.35 kB`
`react-spinner` Spinner	`21.77 kB` `7.134 kB`
`react-switch` Switch	`29.511 kB` `9.239 kB`
`react-table` Table (Primitives only)	`43.95 kB` `12.263 kB`
`react-table` Table (Selection only)	`77.643 kB` `19.195 kB`
`react-table` Table (Sort only)	`76.262 kB` `18.798 kB`
`react-tags-preview` InteractionTag	`34.171 kB` `9.199 kB`
`react-tags-preview` Tag	`25.962 kB` `8.49 kB`
`react-text` Text - Default	`12.574 kB` `4.982 kB`
`react-text` Text - Wrappers	`15.726 kB` `5.302 kB`
`react-textarea` Textarea	`27.703 kB` `9.126 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.463 kB` `16.655 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against aebf58a3a35a7453be8879c3b19668432e77a997}

fabricteam · 2023-07-14T16:40:12Z

🕵 fluentuiv9 No visual regressions between this PR and main

size-auditor · 2023-07-14T16:40:31Z

Asset size changes

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

Baseline commit: aebf58a3a35a7453be8879c3b19668432e77a997 (build)

fabricteam · 2023-07-14T16:43:08Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	614	614	5000
Breadcrumb	mount	1667	1647	1000
Checkbox	mount	1662	1689	5000
CheckboxBase	mount	1476	1480	5000
ChoiceGroup	mount	2952	2898	5000
ComboBox	mount	652	666	1000
CommandBar	mount	6152	6104	1000
ContextualMenu	mount	13433	13022	1000
DefaultButton	mount	763	733	5000
DetailsRow	mount	2127	2157	5000
DetailsRowFast	mount	2189	2119	5000
DetailsRowNoStyles	mount	2007	1989	5000
Dialog	mount	2636	2629	1000
DocumentCardTitle	mount	224	225	1000
Dropdown	mount	1965	1950	5000
FocusTrapZone	mount	1121	1109	5000
FocusZone	mount	1079	1052	5000
GroupedList	mount	40727	40902	2
GroupedList	virtual-rerender	19539	19794	2
GroupedList	virtual-rerender-with-unmount	49911	50415	2
GroupedListV2	mount	235	225	2
GroupedListV2	virtual-rerender	208	210	2
GroupedListV2	virtual-rerender-with-unmount	221	219	2
IconButton	mount	1059	1088	5000
Label	mount	329	334	5000
Layer	mount	2752	2720	5000
Link	mount	393	391	5000
MenuButton	mount	919	934	5000
MessageBar	mount	21692	21597	5000
Nav	mount	1922	1911	1000
OverflowSet	mount	801	750	5000
Panel	mount	1782	1743	1000
Persona	mount	738	745	1000
Pivot	mount	866	861	1000
PrimaryButton	mount	838	848	5000
Rating	mount	4571	4552	5000
SearchBox	mount	909	932	5000
Shimmer	mount	1872	1833	5000
Slider	mount	1305	1324	5000
SpinButton	mount	2832	2869	5000
Spinner	mount	391	385	5000
SplitButton	mount	1791	1781	5000
Stack	mount	408	423	5000
StackWithIntrinsicChildren	mount	879	854	5000
StackWithTextChildren	mount	2571	2639	5000
SwatchColorPicker	mount	6060	6107	5000
TagPicker	mount	1412	1432	5000
Text	mount	380	375	5000
TextField	mount	917	926	5000
ThemeProvider	mount	837	824	5000
ThemeProvider	virtual-rerender	582	591	5000
ThemeProvider	virtual-rerender-with-unmount	1223	1254	5000
Toggle	mount	604	607	5000
buttonNative	mount	189	193	5000

change/@fluentui-react-dialog-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json

packages/react-components/react-menu/stories/Menu/MenuNestedSubmenus.stories.tsx

packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx

packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.styles.ts

packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx

fabricteam · 2023-07-21T10:41:57Z

🕵 FluentUIV0 No visual regressions between this PR and main

tudorpopams

approving for v-build owned files.

Fixes regression from microsoft#28530 The `contextMenuProps` aren't really for just the context menu but common props for all menus fter the refactor in microsoft#25044. We should probably revisit the menu trigger code and clean it up but this fix is more urgent

* fix: Context menu close should restore focus Fixes regression from #28530 The `contextMenuProps` aren't really for just the context menu but common props for all menus fter the refactor in #25044. We should probably revisit the menu trigger code and clean it up but this fix is more urgent * changefile * revert * revert

feat: use tabster restorer API

e10e1a2

github-actions bot added this to the July Project Cycle Q3 2023 milestone Jul 14, 2023

ling1726 added 11 commits July 18, 2023 07:00

custom restorer hook

f3c68c3

update patch

38fd2c4

update snapshots

ce6d0e7

update patch

fbdaf8e

fix enums

d4af5f6

update patch

fe3b8dd

bump tabster

014db7b

update md

246572f

add docs

5e704be

changefiles

6d4fb38

add stories prefix

d7ba263

ling1726 marked this pull request as ready for review July 21, 2023 08:01

ling1726 requested review from a team as code owners July 21, 2023 08:01

bsunderhus reviewed Jul 21, 2023

View reviewed changes

change/@fluentui-react-dialog-6ac1e0ff-b5c6-4471-836a-49470b24f8c3.json Outdated Show resolved Hide resolved

layershifter reviewed Jul 21, 2023

View reviewed changes

packages/react-components/react-menu/stories/Menu/MenuNestedSubmenus.stories.tsx Outdated Show resolved Hide resolved

bsunderhus approved these changes Jul 21, 2023

View reviewed changes

layershifter reviewed Jul 21, 2023

View reviewed changes

packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed Jul 21, 2023

View reviewed changes

packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.styles.ts Show resolved Hide resolved

layershifter reviewed Jul 21, 2023

View reviewed changes

packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx Show resolved Hide resolved

ling1726 added 4 commits July 21, 2023 08:36

remove changes

47bc7c1

update documentation example

2cbee5d

rename useMenuTrigger

86bb206

pr fixes

ba6aa05

tudorpopams approved these changes Jul 21, 2023

View reviewed changes

ling1726 added 2 commits July 25, 2023 08:13

update docs

22d75b0

add popover doc example

e2b820b

layershifter approved these changes Jul 25, 2023

View reviewed changes

ling1726 merged commit c0c62f9 into microsoft:master Jul 25, 2023

ling1726 mentioned this pull request Jul 25, 2023

Restore focus API for Dialog/Popover/Menu #28635

Closed

ling1726 mentioned this pull request Sep 6, 2023

[Bug]: Focus on an unexpected element when the MenuPopover is closed. #28915

Closed

2 tasks

ling1726 mentioned this pull request Sep 26, 2023

fix: Context menu close should restore focus #29290

Merged

ling1726 mentioned this pull request Sep 23, 2024

fix(Menu): Do not rely on tabster restorer for focus restore #32840

Merged

feat: use tabster restorer API #28530

feat: use tabster restorer API #28530

Uh oh!

Conversation

ling1726 commented Jul 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dialog

Popover

Menu

Uh oh!

fabricteam commented Jul 14, 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 Jul 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jul 14, 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 Jul 14, 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 Jul 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Jul 14, 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!

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

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jul 14, 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

tudorpopams left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ling1726 commented Jul 14, 2023 •

edited

Loading

fabricteam commented Jul 14, 2023 •

edited

Loading

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

codesandbox-ci bot commented Jul 14, 2023 •

edited

Loading

fabricteam commented Jul 14, 2023 •

edited

Loading

fabricteam commented Jul 14, 2023 •

edited

Loading

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

fabricteam commented Jul 14, 2023 •

edited

Loading

fabricteam commented Jul 14, 2023 •

edited

Loading

size-auditor bot commented Jul 14, 2023 •

edited

Loading

fabricteam commented Jul 14, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Jul 21, 2023 •

edited

Loading