feat: Implement useUncontrolledFocus hook by ling1726 · Pull Request #29895 · microsoft/fluentui

ling1726 · 2023-11-21T21:17:24Z

Exposes a hook to enable uncontrolled tabster to improve interop between v8 FocusZone and FocusTrapZone.

Also updates useTabster to use the new external focus trap check so that it works with v8 FocusTrapZone

Exposes a hook to enable uncontrolled tabster to improve interop between v8 FocusZone and FocusTrapZone. Also updates `useTabster` to use the new external focus trap check so that it works with v8 FocusTrapZone

fabricteam · 2023-11-21T21:26:48Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	mount	71	85	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	632	664	5000
Button	mount	314	304	5000
Field	mount	1076	1119	5000
FluentProvider	mount	698	714	5000
FluentProviderWithTheme	mount	71	85	10	Possible regression
FluentProviderWithTheme	virtual-rerender	62	65	10
FluentProviderWithTheme	virtual-rerender-with-unmount	72	68	10
MakeStyles	mount	852	851	50000
Persona	mount	1732	1730	5000
SpinButton	mount	1326	1411	5000

fabricteam · 2023-11-21T21:31:36Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`93.44 kB` `28.513 kB`	`93.591 kB` `28.552 kB`	`151 B` `39 B`
`react-calendar-compat` Calendar Compat	`141.822 kB` `36.959 kB`	`141.973 kB` `36.998 kB`	`151 B` `39 B`
`react-card` Card - All	`93.423 kB` `27.059 kB`	`93.574 kB` `27.101 kB`	`151 B` `42 B`
`react-card` Card	`88.247 kB` `25.559 kB`	`88.398 kB` `25.603 kB`	`151 B` `44 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`208.155 kB` `59.527 kB`	`208.306 kB` `59.569 kB`	`151 B` `42 B`
`react-datepicker-compat` DatePicker Compat	`213.382 kB` `59.599 kB`	`213.533 kB` `59.648 kB`	`151 B` `49 B`
`react-dialog` Dialog (including children components)	`95.021 kB` `28.381 kB`	`95.172 kB` `28.425 kB`	`151 B` `44 B`
`react-infobutton` InfoButton	`131.616 kB` `41.398 kB`	`131.767 kB` `41.438 kB`	`151 B` `40 B`
`react-infobutton` InfoLabel	`135.302 kB` `42.548 kB`	`135.453 kB` `42.586 kB`	`151 B` `38 B`
`react-menu` Menu (including children components)	`140.971 kB` `43.239 kB`	`141.122 kB` `43.283 kB`	`151 B` `44 B`
`react-menu` Menu (including selectable components)	`143.657 kB` `43.747 kB`	`143.808 kB` `43.788 kB`	`151 B` `41 B`
`react-popover` Popover	`120.349 kB` `37.903 kB`	`120.5 kB` `37.958 kB`	`151 B` `55 B`
`react-table` DataGrid	`154.146 kB` `43.413 kB`	`154.297 kB` `43.454 kB`	`151 B` `41 B`
`react-table` Table as DataGrid	`127.366 kB` `34.751 kB`	`127.517 kB` `34.792 kB`	`151 B` `41 B`
`react-tags` TagGroup	`74.271 kB` `22.229 kB`	`74.422 kB` `22.269 kB`	`151 B` `40 B`
`react-toast` Toast (including Toaster)	`93.195 kB` `27.948 kB`	`93.346 kB` `27.986 kB`	`151 B` `38 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-alert` Alert	`84.293 kB` `23.456 kB`
`react-avatar` Avatar	`50.534 kB` `15.923 kB`
`react-avatar` AvatarGroup	`20.064 kB` `7.894 kB`
`react-avatar` AvatarGroupItem	`65.19 kB` `20.259 kB`
`react-button` Button	`40.074 kB` `11.292 kB`
`react-button` CompoundButton	`47.43 kB` `12.787 kB`
`react-button` MenuButton	`44.848 kB` `12.668 kB`
`react-button` SplitButton	`52.862 kB` `14.254 kB`
`react-button` ToggleButton	`57.122 kB` `13.194 kB`
`react-card` CardFooter	`13.423 kB` `5.481 kB`
`react-card` CardHeader	`15.666 kB` `6.235 kB`
`react-card` CardPreview	`14.374 kB` `5.854 kB`
`react-checkbox` Checkbox	`34.424 kB` `11.829 kB`
`react-combobox` Combobox (including child components)	`92.437 kB` `30.132 kB`
`react-combobox` Dropdown (including child components)	`90.858 kB` `29.794 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`70.184 kB` `20.225 kB`
`react-components` react-components: FluentProvider & webLightTheme	`42.468 kB` `14.059 kB`
`react-link` Link	`17.4 kB` `6.977 kB`
`react-message-bar` MessageBar (all components)	`25.54 kB` `9.102 kB`
`react-persona` Persona	`57.425 kB` `17.798 kB`
`react-portal` Portal	`12.571 kB` `4.594 kB`
`react-portal-compat` PortalCompatProvider	`6.822 kB` `2.311 kB`
`react-provider` FluentProvider	`23.008 kB` `8.48 kB`
`react-radio` Radio	`31.437 kB` `10.314 kB`
`react-radio` RadioGroup	`15.704 kB` `6.35 kB`
`react-slider` Slider	`38.52 kB` `12.646 kB`
`react-switch` Switch	`33.902 kB` `10.944 kB`
`react-table` Table (Primitives only)	`44.112 kB` `13.81 kB`
`react-table` Table (Selection only)	`72.696 kB` `19.959 kB`
`react-table` Table (Sort only)	`71.303 kB` `19.562 kB`
`react-tags` InteractionTag	`15.618 kB` `6.152 kB`
`react-tags` Tag	`30.341 kB` `9.505 kB`
`react-timepicker-compat-preview` TimePicker	`93.834 kB` `31.42 kB`
`react-tooltip` Tooltip	`53.173 kB` `18.712 kB`

_{🤖 This report was generated against 31dd521cf40a23d78d1169cbe4f31a107c782178}

fabricteam · 2023-11-21T21:40:53Z

🕵 fluentuiv9 No visual regressions between this PR and main

codesandbox-ci · 2023-11-22T10:59:06Z

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

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

size-auditor · 2023-11-22T11:06:50Z

Asset size changes

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

Baseline commit: 31dd521cf40a23d78d1169cbe4f31a107c782178 (build)

change/@fluentui-react-components-22466e0d-b22b-4ce2-9dc7-624450174651.json

…50174651.json

change/@fluentui-react-tabster-aacd5d7c-2260-4855-ace5-a3aeeb6c862b.json

feat: Implement useTabsterUncontrolled hook

09032c8

Exposes a hook to enable uncontrolled tabster to improve interop between v8 FocusZone and FocusTrapZone. Also updates `useTabster` to use the new external focus trap check so that it works with v8 FocusTrapZone

ling1726 marked this pull request as ready for review November 21, 2023 21:17

ling1726 requested review from a team and behowell as code owners November 21, 2023 21:17

github-actions bot added this to the November Project Cycle Q1 2024 milestone Nov 21, 2023

ling1726 added 2 commits November 21, 2023 22:18

changefiles

acdc374

revert

cfa9847

ling1726 removed request for a team and behowell November 21, 2023 21:19

update md

9d758a8

layershifter approved these changes Nov 22, 2023

View reviewed changes

rename to useUncontrolledFocus

8c4290b

ling1726 changed the title ~~feat: Implement useTabsterUncontrolled hook~~ feat: Implement useUncontrolledFocus hook Nov 26, 2023

ling1726 commented Nov 26, 2023

View reviewed changes

change/@fluentui-react-components-22466e0d-b22b-4ce2-9dc7-624450174651.json Outdated Show resolved Hide resolved

Update change/@fluentui-react-components-22466e0d-b22b-4ce2-9dc7-6244…

c623a69

…50174651.json

ling1726 commented Nov 26, 2023

View reviewed changes

change/@fluentui-react-tabster-aacd5d7c-2260-4855-ace5-a3aeeb6c862b.json Show resolved Hide resolved

ling1726 merged commit 499eb8b into microsoft:master Nov 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement useUncontrolledFocus hook#29895

feat: Implement useUncontrolledFocus hook#29895
ling1726 merged 6 commits intomicrosoft:masterfrom
ling1726:feat/use-tabster-uncontrolled

ling1726 commented Nov 21, 2023

Uh oh!

fabricteam commented Nov 21, 2023 •

edited

Loading

Uh oh!

fabricteam commented Nov 21, 2023 •

edited

Loading

Uh oh!

fabricteam commented Nov 21, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Nov 22, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Nov 22, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

ling1726 commented Nov 21, 2023

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Nov 21, 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!

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

Uh oh!

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fabricteam commented Nov 21, 2023 •

edited

Loading

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

fabricteam commented Nov 21, 2023 •

edited

Loading

fabricteam commented Nov 21, 2023 •

edited

Loading

codesandbox-ci bot commented Nov 22, 2023 •

edited

Loading

size-auditor bot commented Nov 22, 2023 •

edited

Loading