Combobox: move to react-next/react

[joschect]

Pull request checklist

• Addresses an existing issue: Part of Merge OUFR and react-next into react #15152
• Include a change request file using $ yarn change

Description of changes

Move version 8 ComboBox and Autofill changes from react-next to react, including strict mode fixes from #14719.

[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 7acdc3a:

Sandbox	Source
Fluent UI Button	Configuration
microsoft/fluentui: codesandbox-react-template	Configuration
microsoft/fluentui: codesandbox-react-next-template	Configuration
microsoft/fluentui: codesandbox-react-northstar-template	Configuration

[msft-github-bot]

Perf Analysis

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
ComboBox	mount	913	988	1000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	826	841	5000
BaseButton	mount	906	908	5000
Breadcrumb	mount	160547	163354	5000
ButtonNext	mount	554	561	5000
Checkbox	mount	1593	1533	5000
CheckboxBase	mount	1293	1291	5000
CheckboxNext	mount	1556	1506	5000
ChoiceGroup	mount	4694	4776	5000
ComboBox	mount	913	988	1000	Possible regression
CommandBar	mount	22280	22305	1000
ContextualMenu	mount	5892	5951	1000
DefaultButton	mount	1182	1137	5000
DetailsRow	mount	3721	3817	5000
DetailsRowFast	mount	3791	3726	5000
DetailsRowNoStyles	mount	3610	3528	5000
Dialog	mount	1538	1498	1000
DocumentCardTitle	mount	1841	1880	1000
Dropdown	mount	2558	2670	5000
FocusTrapZone	mount	1706	1741	5000
FocusTrapZoneNext	mount	1849	1819	5000
FocusZone	mount	1837	1818	5000
IconButton	mount	1801	1743	5000
Label	mount	362	331	5000
Layer	mount	1815	1830	5000
Link	mount	481	487	5000
LinkNext	mount	504	485	5000
MenuButton	mount	1530	1542	5000
MessageBar	mount	2128	2063	5000
Nav	mount	3306	3248	1000
OverflowSet	mount	1071	1042	5000
Panel	mount	1449	1440	1000
Persona	mount	902	889	1000
Pivot	mount	1434	1478	1000
PivotNext	mount	1434	1403	1000
PrimaryButton	mount	1303	1291	5000
Rating	mount	7516	7524	5000
SearchBox	mount	1335	1360	5000
Shimmer	mount	2532	2556	5000
Slider	mount	1938	1926	5000
SliderNext	mount	1965	1975	5000
SpinButton	mount	5173	5189	5000
Spinner	mount	446	424	5000
SplitButton	mount	3219	3165	5000
Stack	mount	535	540	5000
StackWithIntrinsicChildren	mount	1970	1930	5000
StackWithTextChildren	mount	5103	4982	5000
SwatchColorPicker	mount	10440	10700	5000
TagPicker	mount	2786	2878	5000
TeachingBubble	mount	52011	51989	5000
Text	mount	435	451	5000
TextField	mount	1397	1404	5000
ThemeProvider	mount	2028	2051	5000
ThemeProvider	virtual-rerender	630	645	5000
Toggle	mount	831	830	5000
ToggleNext	mount	793	828	5000
button	mount	121	125	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.45	0.53	0.85:1	2000	906
🦄	Button.Fluent	0.12	0.2	0.6:1	5000	584
🔧	Checkbox.Fluent	0.67	0.35	1.91:1	1000	671
🦄	Dialog.Fluent	0.16	0.24	0.67:1	5000	804
🔧	Dropdown.Fluent	3.14	0.47	6.68:1	1000	3140
🔧	Icon.Fluent	0.15	0.06	2.5:1	5000	730
🦄	Image.Fluent	0.09	0.13	0.69:1	5000	430
🔧	Slider.Fluent	1.65	0.45	3.67:1	1000	1651
🔧	Text.Fluent	0.08	0.04	2:1	5000	390
🦄	Tooltip.Fluent	0.12	9.88	0.01:1	5000	595

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ListMinimalPerf.default	547	495	1.11:1
Image.Fluent	430	386	1.11:1
CarouselMinimalPerf.default	483	448	1.08:1
DropdownManyItemsPerf.default	843	784	1.08:1
TextMinimalPerf.default	392	364	1.08:1
FormMinimalPerf.default	470	439	1.07:1
ListCommonPerf.default	711	665	1.07:1
ListNestedPerf.default	629	588	1.07:1
ChatWithPopoverPerf.default	513	484	1.06:1
AvatarMinimalPerf.default	517	493	1.05:1
HeaderMinimalPerf.default	415	397	1.05:1
HeaderSlotsPerf.default	846	808	1.05:1
ListWith60ListItems.default	990	941	1.05:1
PortalMinimalPerf.default	175	166	1.05:1
Text.Fluent	390	370	1.05:1
AccordionMinimalPerf.default	169	162	1.04:1
BoxMinimalPerf.default	407	393	1.04:1
LabelMinimalPerf.default	462	445	1.04:1
PopupMinimalPerf.default	733	708	1.04:1
ReactionMinimalPerf.default	434	416	1.04:1
AttachmentMinimalPerf.default	178	173	1.03:1
GridMinimalPerf.default	379	367	1.03:1
TableMinimalPerf.default	443	430	1.03:1
AnimationMinimalPerf.default	454	443	1.02:1
ButtonSlotsPerf.default	625	615	1.02:1
ChatDuplicateMessagesPerf.default	453	442	1.02:1
DropdownMinimalPerf.default	3065	3017	1.02:1
MenuMinimalPerf.default	905	890	1.02:1
SkeletonMinimalPerf.default	471	462	1.02:1
TableManyItemsPerf.default	2264	2230	1.02:1
VideoMinimalPerf.default	680	664	1.02:1
ButtonOverridesMissPerf.default	1743	1727	1.01:1
DialogMinimalPerf.default	841	829	1.01:1
LayoutMinimalPerf.default	441	438	1.01:1
LoaderMinimalPerf.default	763	759	1.01:1
MenuButtonMinimalPerf.default	1605	1584	1.01:1
SliderMinimalPerf.default	1655	1634	1.01:1
SplitButtonMinimalPerf.default	3957	3900	1.01:1
TreeMinimalPerf.default	921	910	1.01:1
Button.Fluent	584	577	1.01:1
Checkbox.Fluent	671	662	1.01:1
Slider.Fluent	1651	1633	1.01:1
Tooltip.Fluent	595	587	1.01:1
ButtonUseCssNestingPerf.default	1137	1141	1:1
CardMinimalPerf.default	580	580	1:1
ChatMinimalPerf.default	652	652	1:1
CheckboxMinimalPerf.default	2941	2934	1:1
DividerMinimalPerf.default	396	397	1:1
FlexMinimalPerf.default	326	326	1:1
ImageMinimalPerf.default	396	396	1:1
InputMinimalPerf.default	1362	1358	1:1
ProviderMergeThemesPerf.default	2168	2165	1:1
IconMinimalPerf.default	698	697	1:1
TreeWith60ListItems.default	204	205	1:1
Avatar.Fluent	906	902	1:1
Dropdown.Fluent	3140	3125	1:1
ButtonMinimalPerf.default	191	192	0.99:1
EmbedMinimalPerf.default	1974	1988	0.99:1
ProviderMinimalPerf.default	1068	1083	0.99:1
RefMinimalPerf.default	243	246	0.99:1
CustomToolbarPrototype.default	4003	4054	0.99:1
AlertMinimalPerf.default	325	330	0.98:1
ItemLayoutMinimalPerf.default	1293	1313	0.98:1
RadioGroupMinimalPerf.default	460	471	0.98:1
SegmentMinimalPerf.default	393	400	0.98:1
ToolbarMinimalPerf.default	964	986	0.98:1
ButtonUseCssPerf.default	850	877	0.97:1
StatusMinimalPerf.default	761	783	0.97:1
TooltipMinimalPerf.default	840	865	0.97:1
Icon.Fluent	730	750	0.97:1
TextAreaMinimalPerf.default	503	522	0.96:1
AttachmentSlotsPerf.default	1152	1208	0.95:1
Dialog.Fluent	804	851	0.94:1

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-ComboBox	234.972 kB	235.394 kB	422 bytes
office-ui-fabric-react	fluentui-react-ExtendedPicker	74.437 kB	74.51 kB	73 bytes
office-ui-fabric-react	fluentui-react-Pickers	272.671 kB	272.686 kB	15 bytes
office-ui-fabric-react	fluentui-react-Autofill	15.71 kB	15.719 kB	9 bytes
office-ui-fabric-react	fluentui-react-next-Autofill	16.033 kB		-16.033 kB
office-ui-fabric-react	fluentui-react-next-ComboBox	243.021 kB		-243.021 kB

 Over Tolerance (1024 B)  Over Baseline  Below Baseline  New   Removed 1 kB = 1000 B

Baseline commit: 72907bfda0cd61232232c62de4448b6bfabd487f (build)

[ecraig12345]

Thanks! Ideally the examples/docs should be updated too, but I don't expect the ComboBox ones will have changed, so at this point we can just delete the extra examples later in a cleanup pass.