fluentui chore: migrate to TS 4.7

trafficstars

Previous Behavior

New Behavior

Release note: https://devblogs.microsoft.com/typescript/announcing-typescript-4-7

Related Issue(s)

Fixes partially #25488

May 31 '23 11:05 Hotell

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`3.194 kB` `1.315 kB`
`react-accordion` Accordion (including children components)	`88.064 kB` `26.659 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	`88.752 kB` `25.122 kB`
`react-card` Card	`83.687 kB` `23.666 kB`
`react-card` CardFooter	`9.229 kB` `3.9 kB`
`react-card` CardHeader	`11.125 kB` `4.596 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: Accordion, Button, FluentProvider, Image, Menu, Popover	`210.103 kB` `58.624 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.395 kB` `11.996 kB`
`react-datepicker-compat` DatePicker Compat	`221.601 kB` `59.012 kB`
`react-dialog` Dialog (including children components)	`91.673 kB` `27.385 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-infobutton` InfoButton	`131.018 kB` `40.224 kB`
`react-infobutton` InfoLabel	`134.483 kB` `41.291 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-menu` Menu (including children components)	`132.175 kB` `40.453 kB`
`react-menu` Menu (including selectable components)	`134.939 kB` `40.948 kB`
`react-overflow` hooks only	`11.206 kB` `4.266 kB`
`react-persona` Persona	`54.621 kB` `16.435 kB`
`react-popover` Popover	`119.608 kB` `36.799 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.086 kB` `42.712 kB`
`react-table` Table (Primitives only)	`44.615 kB` `12.472 kB`
`react-table` Table as DataGrid	`131.742 kB` `33.728 kB`
`react-table` Table (Selection only)	`77.524 kB` `19.166 kB`
`react-table` Table (Sort only)	`76.854 kB` `18.976 kB`
`react-tags` Tag	`21.343 kB` `7.822 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.263 kB` `16.585 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 402599eb2172bf1cd13c003f5050e4d172ed9742}

May 31 '23 11:05 fabricteam

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	631	597	5000
Button	mount	297	303	5000
Field	mount	1091	1036	5000
FluentProvider	mount	633	657	5000
FluentProviderWithTheme	mount	76	75	10
FluentProviderWithTheme	virtual-rerender	62	65	10
FluentProviderWithTheme	virtual-rerender-with-unmount	70	69	10
InfoButton	mount	14	17	5000
MakeStyles	mount	859	862	50000
Persona	mount	1647	1560	5000
SpinButton	mount	1316	1282	5000

May 31 '23 11:05 fabricteam

🕵 fluentuiv8 No visual regressions between this PR and main

May 31 '23 11:05 fabricteam

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	90	78	1.15:1
ListMinimalPerf.default	310	291	1.07:1
LoaderMinimalPerf.default	189	177	1.07:1
ReactionMinimalPerf.default	218	205	1.06:1
ButtonMinimalPerf.default	87	83	1.05:1
DropdownManyItemsPerf.default	392	374	1.05:1
GridMinimalPerf.default	199	190	1.05:1
InputMinimalPerf.default	548	523	1.05:1
SegmentMinimalPerf.default	204	194	1.05:1
IconMinimalPerf.default	388	369	1.05:1
AttachmentMinimalPerf.default	83	80	1.04:1
ChatDuplicateMessagesPerf.default	158	152	1.04:1
ImageMinimalPerf.default	226	218	1.04:1
TableMinimalPerf.default	234	226	1.04:1
TreeWith60ListItems.default	88	85	1.04:1
AlertMinimalPerf.default	158	153	1.03:1
FormMinimalPerf.default	222	215	1.03:1
SkeletonMinimalPerf.default	199	193	1.03:1
AttachmentSlotsPerf.default	641	629	1.02:1
CarouselMinimalPerf.default	252	247	1.02:1
EmbedMinimalPerf.default	1874	1839	1.02:1
ItemLayoutMinimalPerf.default	706	690	1.02:1
MenuButtonMinimalPerf.default	946	926	1.02:1
PopupMinimalPerf.default	356	349	1.02:1
ProviderMinimalPerf.default	201	197	1.02:1
RefMinimalPerf.default	106	104	1.02:1
StatusMinimalPerf.default	404	396	1.02:1
TableManyItemsPerf.default	1145	1118	1.02:1
TextAreaMinimalPerf.default	290	283	1.02:1
CustomToolbarPrototype.default	1483	1455	1.02:1
ButtonSlotsPerf.default	310	306	1.01:1
DatepickerMinimalPerf.default	3536	3501	1.01:1
HeaderMinimalPerf.default	207	204	1.01:1
ListWith60ListItems.default	368	366	1.01:1
RosterPerf.default	1533	1521	1.01:1
ProviderMergeThemesPerf.default	677	667	1.01:1
RadioGroupMinimalPerf.default	258	256	1.01:1
SplitButtonMinimalPerf.default	2286	2257	1.01:1
CardMinimalPerf.default	307	308	1:1
CheckboxMinimalPerf.default	1118	1120	1:1
LabelMinimalPerf.default	223	223	1:1
PortalMinimalPerf.default	86	86	1:1
TooltipMinimalPerf.default	1239	1238	1:1
TreeMinimalPerf.default	471	473	1:1
ButtonOverridesMissPerf.default	624	633	0.99:1
DropdownMinimalPerf.default	1436	1454	0.99:1
VideoMinimalPerf.default	426	432	0.99:1
AnimationMinimalPerf.default	287	294	0.98:1
DialogMinimalPerf.default	437	446	0.98:1
HeaderSlotsPerf.default	453	463	0.98:1
MenuMinimalPerf.default	495	504	0.98:1
SliderMinimalPerf.default	734	747	0.98:1
ToolbarMinimalPerf.default	520	533	0.98:1
ChatWithPopoverPerf.default	187	192	0.97:1
DividerMinimalPerf.default	208	214	0.97:1
ListNestedPerf.default	310	318	0.97:1
TextMinimalPerf.default	187	192	0.97:1
ChatMinimalPerf.default	414	430	0.96:1
FlexMinimalPerf.default	149	156	0.96:1
LayoutMinimalPerf.default	195	203	0.96:1
ListCommonPerf.default	366	381	0.96:1
BoxMinimalPerf.default	185	195	0.95:1
AvatarMinimalPerf.default	101	110	0.92:1

May 31 '23 11:05 fabricteam

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

May 31 '23 11:05 fabricteam

🕵 fluentuiv9 No visual regressions between this PR and main

May 31 '23 11:05 fabricteam

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	619	623	5000
Breadcrumb	mount	1672	1662	1000
Checkbox	mount	1666	1677	5000
CheckboxBase	mount	1452	1466	5000
ChoiceGroup	mount	2924	2847	5000
ComboBox	mount	650	650	1000
CommandBar	mount	6268	6229	1000
ContextualMenu	mount	12207	12010	1000
DefaultButton	mount	744	727	5000
DetailsRow	mount	2230	2138	5000
DetailsRowFast	mount	2195	2201	5000
DetailsRowNoStyles	mount	2048	2048	5000
Dialog	mount	2643	2620	1000
DocumentCardTitle	mount	225	236	1000
Dropdown	mount	1975	1946	5000
FocusTrapZone	mount	1114	1122	5000
FocusZone	mount	1047	1033	5000
GroupedList	mount	41594	41668	2
GroupedList	virtual-rerender	19895	19872	2
GroupedList	virtual-rerender-with-unmount	50573	50615	2
GroupedListV2	mount	228	229	2
GroupedListV2	virtual-rerender	214	219	2
GroupedListV2	virtual-rerender-with-unmount	237	230	2
IconButton	mount	1072	1089	5000
Label	mount	329	338	5000
Layer	mount	2751	2729	5000
Link	mount	421	388	5000
MenuButton	mount	947	947	5000
MessageBar	mount	21507	21501	5000
Nav	mount	1913	1941	1000
OverflowSet	mount	774	748	5000
Panel	mount	1771	1784	1000
Persona	mount	746	760	1000
Pivot	mount	888	858	1000
PrimaryButton	mount	861	854	5000
Rating	mount	4559	4648	5000
SearchBox	mount	885	915	5000
Shimmer	mount	1896	1878	5000
Slider	mount	1315	1331	5000
SpinButton	mount	2808	2897	5000
Spinner	mount	396	399	5000
SplitButton	mount	1843	1844	5000
Stack	mount	420	397	5000
StackWithIntrinsicChildren	mount	863	837	5000
StackWithTextChildren	mount	2636	2626	5000
SwatchColorPicker	mount	5987	6071	5000
TagPicker	mount	1443	1450	5000
Text	mount	380	378	5000
TextField	mount	942	908	5000
ThemeProvider	mount	824	836	5000
ThemeProvider	virtual-rerender	593	586	5000
ThemeProvider	virtual-rerender-with-unmount	1277	1272	5000
Toggle	mount	600	601	5000
buttonNative	mount	192	190	5000

May 31 '23 11:05 fabricteam

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

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

Jun 02 '23 12:06 codesandbox-ci[bot]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-northstar-Dialog	117.07 kB	117.074 kB	4 bytes
office-ui-fabric-react	fluentui-react-northstar-Portal	59.825 kB	59.829 kB	4 bytes
office-ui-fabric-react	fluentui-react-northstar-Dropdown	203.794 kB	203.798 kB	4 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted Removed 1 kB = 1000 B