chore(react-utilities): Migrate DX

[ling1726]

Pull request checklist

• Addresses an existing issue: Partially fixes migration: migrate converged packages to new DX (1st stage) #18579
• Include a change request file using $ yarn change

Description of changes

(give an overview)

Focus areas to test

(optional)

[size-auditor]

Asset size changes

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

Baseline commit: c939e67b1840a9eb5f7706afcda8c14df8f18d33 (build)

[codesandbox-ci]

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

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	790	795	5000
BaseButton	mount	887	872	5000
Breadcrumb	mount	2614	2620	1000
ButtonNext	mount	504	512	5000
Checkbox	mount	1489	1496	5000
CheckboxBase	mount	1260	1256	5000
ChoiceGroup	mount	4710	4613	5000
ComboBox	mount	967	970	1000
CommandBar	mount	9963	9966	1000
ContextualMenu	mount	6185	6156	1000
DefaultButton	mount	1112	1100	5000
DetailsRow	mount	3633	3670	5000
DetailsRowFast	mount	3717	3648	5000
DetailsRowNoStyles	mount	3442	3484	5000
Dialog	mount	2111	2072	1000
DocumentCardTitle	mount	143	144	1000
Dropdown	mount	3188	3172	5000
FluentProviderNext	mount	7156	7151	5000
FocusTrapZone	mount	1766	1775	5000
FocusZone	mount	1748	1772	5000
IconButton	mount	1694	1709	5000
Label	mount	333	334	5000
Layer	mount	1751	1752	5000
Link	mount	443	451	5000
MakeStyles	mount	1803	1801	50000
MenuButton	mount	1448	1424	5000
MessageBar	mount	1990	2038	5000
Nav	mount	3213	3171	1000
OverflowSet	mount	1023	1038	5000
Panel	mount	2028	2039	1000
Persona	mount	811	812	1000
Pivot	mount	1372	1373	1000
PrimaryButton	mount	1253	1280	5000
Rating	mount	7343	7373	5000
SearchBox	mount	1265	1306	5000
Shimmer	mount	2484	2500	5000
Slider	mount	1891	1951	5000
SpinButton	mount	4862	4899	5000
Spinner	mount	409	409	5000
SplitButton	mount	3130	3101	5000
Stack	mount	490	488	5000
StackWithIntrinsicChildren	mount	1465	1470	5000
StackWithTextChildren	mount	4400	4427	5000
SwatchColorPicker	mount	9991	9932	5000
Tabs	mount	1374	1381	1000
TagPicker	mount	2346	2346	5000
TeachingBubble	mount	11673	11690	5000
Text	mount	398	419	5000
TextField	mount	1332	1335	5000
ThemeProvider	mount	1158	1164	5000
ThemeProvider	virtual-rerender	589	597	5000
Toggle	mount	789	814	5000
buttonNative	mount	114	109	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
BoxMinimalPerf.default	357	323	1.11:1
IconMinimalPerf.default	633	584	1.08:1
ImageMinimalPerf.default	368	344	1.07:1
TreeWith60ListItems.default	172	163	1.06:1
ButtonMinimalPerf.default	169	161	1.05:1
FormMinimalPerf.default	401	382	1.05:1
DividerMinimalPerf.default	361	347	1.04:1
SegmentMinimalPerf.default	350	336	1.04:1
StatusMinimalPerf.default	664	641	1.04:1
AnimationMinimalPerf.default	410	397	1.03:1
HeaderSlotsPerf.default	747	727	1.03:1
RefMinimalPerf.default	243	235	1.03:1
TextMinimalPerf.default	341	331	1.03:1
VideoMinimalPerf.default	624	605	1.03:1
AttachmentMinimalPerf.default	155	152	1.02:1
CarouselMinimalPerf.default	454	444	1.02:1
DropdownMinimalPerf.default	3048	2987	1.02:1
LayoutMinimalPerf.default	363	356	1.02:1
ListCommonPerf.default	613	599	1.02:1
MenuButtonMinimalPerf.default	1547	1523	1.02:1
ReactionMinimalPerf.default	372	365	1.02:1
SkeletonMinimalPerf.default	350	343	1.02:1
TextAreaMinimalPerf.default	485	475	1.02:1
TreeMinimalPerf.default	797	782	1.02:1
AlertMinimalPerf.default	262	260	1.01:1
AttachmentSlotsPerf.default	1046	1032	1.01:1
ButtonSlotsPerf.default	539	535	1.01:1
CardMinimalPerf.default	542	537	1.01:1
ChatMinimalPerf.default	647	638	1.01:1
DatepickerMinimalPerf.default	5328	5296	1.01:1
DialogMinimalPerf.default	749	742	1.01:1
DropdownManyItemsPerf.default	671	666	1.01:1
EmbedMinimalPerf.default	4061	4039	1.01:1
FlexMinimalPerf.default	274	272	1.01:1
InputMinimalPerf.default	1238	1228	1.01:1
ItemLayoutMinimalPerf.default	1170	1160	1.01:1
SliderMinimalPerf.default	1535	1521	1.01:1
SplitButtonMinimalPerf.default	3628	3599	1.01:1
CheckboxMinimalPerf.default	2706	2713	1:1
LabelMinimalPerf.default	371	372	1:1
LoaderMinimalPerf.default	675	673	1:1
MenuMinimalPerf.default	833	830	1:1
PopupMinimalPerf.default	554	554	1:1
PortalMinimalPerf.default	173	173	1:1
ProviderMergeThemesPerf.default	1630	1622	1:1
ProviderMinimalPerf.default	943	941	1:1
RadioGroupMinimalPerf.default	427	427	1:1
TableManyItemsPerf.default	1848	1844	1:1
CustomToolbarPrototype.default	3694	3678	1:1
ToolbarMinimalPerf.default	908	904	1:1
TooltipMinimalPerf.default	946	946	1:1
GridMinimalPerf.default	327	329	0.99:1
ListMinimalPerf.default	494	501	0.99:1
ListWith60ListItems.default	623	631	0.99:1
AvatarMinimalPerf.default	186	189	0.98:1
ButtonOverridesMissPerf.default	1617	1642	0.98:1
ChatWithPopoverPerf.default	353	362	0.98:1
HeaderMinimalPerf.default	346	353	0.98:1
ListNestedPerf.default	539	551	0.98:1
RosterPerf.default	1105	1130	0.98:1
TableMinimalPerf.default	389	396	0.98:1
AccordionMinimalPerf.default	142	148	0.96:1
ChatDuplicateMessagesPerf.default	279	290	0.96:1