fluentui
fluentui copied to clipboard
microsoft
chore: migrate to TS 4.6
New Behavior
typescript bump to 4.6 + api-extractor family of packages which is compatible with TS 4.6
TS release notes (affecting our codebase):
https://devblogs.microsoft.com/typescript/announcing-typescript-4-6/
API extractor changes:
- fixed some non reported bugs so there are some api.md updates
Related Issue(s)
- Fixes partially #25488
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 df1ecd1f6be390c61c9bd63c0855e1202daf66dd:
| Sandbox | Source |
|---|---|
| @fluentui/react 8 starter | Configuration |
| @fluentui/react-components 9 starter | Configuration |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
📊 Bundle size report
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| global-context createContext |
510 B330 B |
| global-context createContextSelector |
537 B342 B |
| priority-overflow createOverflowManager |
3.194 kB1.315 kB |
| react-accordion Accordion (including children components) |
88.516 kB26.795 kB |
| react-alert Alert |
93.549 kB22.537 kB |
| react-avatar Avatar |
57.797 kB15.091 kB |
| react-avatar AvatarGroup |
15.646 kB6.298 kB |
| react-avatar AvatarGroupItem |
73.973 kB19.582 kB |
| react-badge Badge |
23.555 kB7.256 kB |
| react-badge CounterBadge |
24.457 kB7.559 kB |
| react-badge PresenceBadge |
32.135 kB8.423 kB |
| react-button Button |
36.742 kB9.5 kB |
| react-button CompoundButton |
43.896 kB10.98 kB |
| react-button MenuButton |
41.427 kB10.836 kB |
| react-button SplitButton |
49.649 kB12.42 kB |
| react-button ToggleButton |
55.024 kB11.436 kB |
| react-card Card - All |
88.716 kB25.114 kB |
| react-card Card |
83.651 kB23.658 kB |
| react-card CardFooter |
9.193 kB3.892 kB |
| react-card CardHeader |
11.089 kB4.588 kB |
| react-card CardPreview |
9.998 kB4.24 kB |
| react-checkbox Checkbox |
34.5 kB10.878 kB |
| react-combobox Combobox (including child components) |
87.735 kB28.243 kB |
| react-combobox Dropdown (including child components) |
86.074 kB27.848 kB |
| react-components react-components: Button, FluentProvider & webLightTheme |
64.899 kB17.91 kB |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
206.425 kB57.914 kB |
| react-components react-components: FluentProvider & webLightTheme |
36.132 kB11.954 kB |
| react-datepicker-compat DatePicker Compat |
222.56 kB59.204 kB |
| react-dialog Dialog (including children components) |
92.076 kB27.492 kB |
| react-divider Divider |
17.441 kB6.349 kB |
| react-field Field |
18.9 kB7.083 kB |
| react-image Image |
11.514 kB4.619 kB |
| react-infobutton InfoButton |
130.121 kB39.785 kB |
| react-infobutton InfoLabel |
133.586 kB40.852 kB |
| react-input Input |
24.183 kB7.772 kB |
| react-label Label |
10.139 kB4.231 kB |
| react-link Link |
12.339 kB5.105 kB |
| react-menu Menu (including children components) |
130.848 kB39.946 kB |
| react-menu Menu (including selectable components) |
133.832 kB40.479 kB |
| react-overflow hooks only |
11.206 kB4.266 kB |
| react-persona Persona |
64.718 kB17.012 kB |
| react-popover Popover |
117.083 kB36.122 kB |
| react-portal Portal |
11.676 kB4.31 kB |
| react-portal-compat PortalCompatProvider |
6.473 kB2.196 kB |
| react-positioning usePositioning |
24.249 kB8.856 kB |
| react-progress ProgressBar |
13.891 kB5.482 kB |
| react-provider FluentProvider |
18.079 kB6.713 kB |
| react-radio Radio |
27.404 kB8.722 kB |
| react-radio RadioGroup |
11.326 kB4.743 kB |
| react-select Select |
25.373 kB8.826 kB |
| react-slider Slider |
34.322 kB11.099 kB |
| react-spinbutton SpinButton |
34.121 kB10.421 kB |
| react-spinner Spinner |
21.327 kB7.015 kB |
| react-switch Switch |
29.924 kB9.342 kB |
| react-table DataGrid |
150.868 kB41.518 kB |
| react-table Table (Primitives only) |
45.111 kB12.567 kB |
| react-table Table as DataGrid |
133.356 kB34.002 kB |
| react-table Table (Selection only) |
79.125 kB19.379 kB |
| react-table Table (Sort only) |
78.455 kB19.187 kB |
| react-tags Tag |
22.004 kB7.93 kB |
| react-text Text - Default |
12.527 kB4.963 kB |
| react-text Text - Wrappers |
15.677 kB5.284 kB |
| react-textarea Textarea |
27.686 kB9.126 kB |
| react-theme Single theme token import |
69 B89 B |
| react-theme Teams: all themes |
31.33 kB6.764 kB |
| react-theme Teams: Light theme |
17.895 kB5.162 kB |
| react-tooltip Tooltip |
47.119 kB16.528 kB |
| react-utilities SSRProvider |
180 B159 B |
Asset size changes
| Project | Bundle | Baseline Size | New Size | Difference |
|---|---|---|---|---|
| office-ui-fabric-react | fluentui-react-Dialog | 201.955 kB | 201.962 kB |  7 bytes |
| office-ui-fabric-react | fluentui-react-SelectedItemsList | 223.618 kB | 223.625 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Rating | 78.537 kB | 78.544 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Pivot | 181.422 kB | 181.429 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Pickers | 283.66 kB | 283.667 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Panel | 191.538 kB | 191.545 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-MessageBar | 181.397 kB | 181.404 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-GroupedListV2 | 118.086 kB | 118.093 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-GroupedList | 130.398 kB | 130.405 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Grid | 173.098 kB | 173.105 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-FocusZone | 53.156 kB | 53.163 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-FloatingPicker | 233.21 kB | 233.217 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Facepile | 202.972 kB | 202.979 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-ExtendedPicker | 94.423 kB | 94.43 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Dropdown | 224.172 kB | 224.179 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-DocumentCard | 208.049 kB | 208.056 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-DetailsList | 224.262 kB | 224.269 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-ContextualMenu | 147.805 kB | 147.812 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-CommandBar | 194.172 kB | 194.179 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-ComboBox | 241.176 kB | 241.183 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Breadcrumb | 193.047 kB | 193.054 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Button | 187.355 kB | 187.362 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-ButtonGrid | 173.098 kB | 173.105 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-SearchBox | 180.162 kB | 180.169 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Nav | 180.448 kB | 180.455 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-Calendar | 118.395 kB | 118.402 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-TimePicker | 231.328 kB | 231.335 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-SpinButton | 183.843 kB | 183.85 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-ShimmeredDetailsList | 235.012 kB | 235.019 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-TeachingBubble | 196.96 kB | 196.967 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-SwatchColorPicker | 182.911 kB | 182.918 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-WeeklyDayPicker | 98.657 kB | 98.664 kB | 7 bytes |
| office-ui-fabric-react | fluentui-react-DatePicker | 177.897 kB | 177.881 kB |  -16 bytes |
Over Tolerance (1024 B) Over Baseline Below Baseline 
New 
Removed 1 kB = 1000 B
Baseline commit: 65f0125dd6a85c3c772d63ad3350561af77addbc (build)
![size-auditor[bot] avatar](https://avatars.githubusercontent.com/in/13711?v=4 "Published by a pub.dev verified publisher"){kind=small}
Perf Analysis (@fluentui/react-components)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 580 | 572 | 5000 | |
| Button | mount | 299 | 290 | 5000 | |
| Field | mount | 1017 | 1009 | 5000 | |
| FluentProvider | mount | 640 | 641 | 5000 | |
| FluentProviderWithTheme | mount | 70 | 81 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 73 | 69 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 69 | 74 | 10 | |
| InfoButton | mount | 16 | 13 | 5000 | |
| MakeStyles | mount | 871 | 885 | 50000 | |
| Persona | mount | 1603 | 1554 | 5000 | |
| SpinButton | mount | 1310 | 1259 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| RefMinimalPerf.default | 114 | 104 | 1.1:1 |
| ChatDuplicateMessagesPerf.default | 152 | 141 | 1.08:1 |
| FlexMinimalPerf.default | 157 | 146 | 1.08:1 |
| ReactionMinimalPerf.default | 219 | 205 | 1.07:1 |
| TableMinimalPerf.default | 248 | 231 | 1.07:1 |
| ButtonMinimalPerf.default | 91 | 87 | 1.05:1 |
| CarouselMinimalPerf.default | 275 | 262 | 1.05:1 |
| ChatMinimalPerf.default | 456 | 436 | 1.05:1 |
| TooltipMinimalPerf.default | 1318 | 1251 | 1.05:1 |
| AccordionMinimalPerf.default | 84 | 81 | 1.04:1 |
| AttachmentMinimalPerf.default | 81 | 78 | 1.04:1 |
| AttachmentSlotsPerf.default | 674 | 646 | 1.04:1 |
| BoxMinimalPerf.default | 200 | 193 | 1.04:1 |
| LoaderMinimalPerf.default | 202 | 194 | 1.04:1 |
| SegmentMinimalPerf.default | 198 | 190 | 1.04:1 |
| ItemLayoutMinimalPerf.default | 731 | 707 | 1.03:1 |
| LabelMinimalPerf.default | 218 | 212 | 1.03:1 |
| PopupMinimalPerf.default | 351 | 340 | 1.03:1 |
| PortalMinimalPerf.default | 95 | 92 | 1.03:1 |
| ProviderMinimalPerf.default | 203 | 197 | 1.03:1 |
| IconMinimalPerf.default | 397 | 385 | 1.03:1 |
| CheckboxMinimalPerf.default | 1140 | 1122 | 1.02:1 |
| DatepickerMinimalPerf.default | 3584 | 3523 | 1.02:1 |
| DialogMinimalPerf.default | 460 | 449 | 1.02:1 |
| GridMinimalPerf.default | 189 | 185 | 1.02:1 |
| HeaderMinimalPerf.default | 211 | 207 | 1.02:1 |
| ImageMinimalPerf.default | 224 | 219 | 1.02:1 |
| InputMinimalPerf.default | 549 | 540 | 1.02:1 |
| ListNestedPerf.default | 328 | 322 | 1.02:1 |
| MenuMinimalPerf.default | 502 | 493 | 1.02:1 |
| ProviderMergeThemesPerf.default | 678 | 667 | 1.02:1 |
| CustomToolbarPrototype.default | 1455 | 1424 | 1.02:1 |
| TreeWith60ListItems.default | 87 | 85 | 1.02:1 |
| EmbedMinimalPerf.default | 1761 | 1740 | 1.01:1 |
| SkeletonMinimalPerf.default | 199 | 198 | 1.01:1 |
| SliderMinimalPerf.default | 690 | 686 | 1.01:1 |
| ButtonOverridesMissPerf.default | 632 | 631 | 1:1 |
| ButtonSlotsPerf.default | 315 | 316 | 1:1 |
| DropdownManyItemsPerf.default | 388 | 389 | 1:1 |
| DropdownMinimalPerf.default | 1419 | 1415 | 1:1 |
| FormMinimalPerf.default | 227 | 227 | 1:1 |
| HeaderSlotsPerf.default | 476 | 478 | 1:1 |
| SplitButtonMinimalPerf.default | 2270 | 2269 | 1:1 |
| ToolbarMinimalPerf.default | 549 | 549 | 1:1 |
| AnimationMinimalPerf.default | 293 | 297 | 0.99:1 |
| ChatWithPopoverPerf.default | 188 | 190 | 0.99:1 |
| ListWith60ListItems.default | 362 | 366 | 0.99:1 |
| MenuButtonMinimalPerf.default | 959 | 972 | 0.99:1 |
| RosterPerf.default | 1551 | 1567 | 0.99:1 |
| RadioGroupMinimalPerf.default | 267 | 269 | 0.99:1 |
| TableManyItemsPerf.default | 1137 | 1144 | 0.99:1 |
| TreeMinimalPerf.default | 476 | 479 | 0.99:1 |
| CardMinimalPerf.default | 305 | 311 | 0.98:1 |
| LayoutMinimalPerf.default | 205 | 209 | 0.98:1 |
| VideoMinimalPerf.default | 434 | 443 | 0.98:1 |
| AlertMinimalPerf.default | 154 | 158 | 0.97:1 |
| DividerMinimalPerf.default | 201 | 208 | 0.97:1 |
| ListCommonPerf.default | 389 | 402 | 0.97:1 |
| StatusMinimalPerf.default | 394 | 405 | 0.97:1 |
| TextMinimalPerf.default | 190 | 196 | 0.97:1 |
| AvatarMinimalPerf.default | 105 | 109 | 0.96:1 |
| ListMinimalPerf.default | 300 | 316 | 0.95:1 |
| TextAreaMinimalPerf.default | 282 | 298 | 0.95:1 |
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 632 | 635 | 5000 | |
| Breadcrumb | mount | 1675 | 1696 | 1000 | |
| Checkbox | mount | 1706 | 1706 | 5000 | |
| CheckboxBase | mount | 1477 | 1479 | 5000 | |
| ChoiceGroup | mount | 2982 | 2994 | 5000 | |
| ComboBox | mount | 657 | 688 | 1000 | |
| CommandBar | mount | 6292 | 6283 | 1000 | |
| ContextualMenu | mount | 12354 | 13169 | 1000 | |
| DefaultButton | mount | 761 | 741 | 5000 | |
| DetailsRow | mount | 2190 | 2196 | 5000 | |
| DetailsRowFast | mount | 2216 | 2205 | 5000 | |
| DetailsRowNoStyles | mount | 1992 | 2058 | 5000 | |
| Dialog | mount | 2635 | 2639 | 1000 | |
| DocumentCardTitle | mount | 215 | 225 | 1000 | |
| Dropdown | mount | 1999 | 1998 | 5000 | |
| FocusTrapZone | mount | 1132 | 1095 | 5000 | |
| FocusZone | mount | 1088 | 1040 | 5000 | |
| GroupedList | mount | 41941 | 41986 | 2 | |
| GroupedList | virtual-rerender | 20018 | 20034 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 51001 | 51064 | 2 | |
| GroupedListV2 | mount | 237 | 222 | 2 | |
| GroupedListV2 | virtual-rerender | 206 | 213 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 222 | 226 | 2 | |
| IconButton | mount | 1099 | 1072 | 5000 | |
| Label | mount | 346 | 330 | 5000 | |
| Layer | mount | 2709 | 2725 | 5000 | |
| Link | mount | 405 | 389 | 5000 | |
| MenuButton | mount | 949 | 939 | 5000 | |
| MessageBar | mount | 21711 | 21470 | 5000 | |
| Nav | mount | 1952 | 1974 | 1000 | |
| OverflowSet | mount | 775 | 776 | 5000 | |
| Panel | mount | 1779 | 1793 | 1000 | |
| Persona | mount | 734 | 759 | 1000 | |
| Pivot | mount | 877 | 869 | 1000 | |
| PrimaryButton | mount | 850 | 831 | 5000 | |
| Rating | mount | 4623 | 4639 | 5000 | |
| SearchBox | mount | 921 | 887 | 5000 | |
| Shimmer | mount | 1876 | 1888 | 5000 | |
| Slider | mount | 1368 | 1355 | 5000 | |
| SpinButton | mount | 2901 | 2941 | 5000 | |
| Spinner | mount | 393 | 381 | 5000 | |
| SplitButton | mount | 1830 | 1808 | 5000 | |
| Stack | mount | 411 | 416 | 5000 | |
| StackWithIntrinsicChildren | mount | 882 | 870 | 5000 | |
| StackWithTextChildren | mount | 2696 | 2611 | 5000 | |
| SwatchColorPicker | mount | 6169 | 6121 | 5000 | |
| TagPicker | mount | 1444 | 1453 | 5000 | |
| Text | mount | 383 | 368 | 5000 | |
| TextField | mount | 976 | 949 | 5000 | |
| ThemeProvider | mount | 829 | 840 | 5000 | |
| ThemeProvider | virtual-rerender | 585 | 583 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1276 | 1278 | 5000 | |
| Toggle | mount | 592 | 606 | 5000 | |
| buttonNative | mount | 191 | 191 | 5000 |