feat(compose): add shorthandConfig to options

[mnajdova]

shorthandConfig option was added to compose. If you are using compose in your component, make sure that you move the static shorthandConfig to the compose options. For backward compatibility, the factories are still handling the shorthandConfig defined as static prop too.

Before

const Component = compose((props, ref, options) => {...});
Component.shorthandConfig = {
  mappedProp: 'content',
};

After

const Component = compose((orios, ref, options) => {...}, {
  shorthandConfig: {
    mappedProp: 'content',
  };
);

[msft-github-bot]

Perf Analysis

No significant results to display.

All results

Scenario	Master Ticks	PR Ticks	Iterations	Status
BaseButton	735	772	5000
Checkbox	1444	1412	5000
CheckboxBase	1242	1200	5000
CheckboxNext	1436	1435	5000
ChoiceGroup	4487	4503	5000
ComboBox	815	818	1000
CommandBar	6505	6429	1000
ContextualMenu	11644	11645	1000
DefaultButton	936	1024	5000
DetailsRow	3057	3086	5000
DetailsRow (fast icons)	3098	3139	5000
DetailsRow without styles	2957	2906	5000
Dialog	1307	1366	1000
DocumentCardTitle with truncation	1380	1385	1000
Dropdown	2267	2211	5000
FocusZone	1532	1578	5000
IconButton	1555	1550	5000
Label	261	265	5000
Link	439	445	5000
LinkNext	403	415	5000
MenuButton	1266	1371	5000
Nav	2827	2881	1000
Panel	1288	1259	1000
Persona	732	754	1000
Pivot	1165	1195	1000
PrimaryButton	1069	1127	5000
SearchBox	1149	1161	5000
Slider	1335	1370	5000
SliderNext	1406	1383	5000
Spinner	370	360	5000
SplitButton	2747	2799	5000
Stack	431	449	5000
Stack with Intrinsic children	1016	995	5000
Stack with Text children	4205	4126	5000
TagPicker	2474	2523	5000
Text	401	365	5000
TextField	1285	1260	5000
Toggle	866	819	5000
ToggleNext	820	822	5000
button	59	69	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🔧	Avatar.Fluent	0.44	0.43	1.02:1	2000	884
🦄	Button.Fluent	0.11	0.17	0.65:1	5000	540
🔧	Checkbox.Fluent	0.6	0.32	1.88:1	1000	596
🔧	Dialog.Fluent	0.28	0.19	1.47:1	5000	1394
🔧	Dropdown.Fluent	2.87	0.41	7:1	1000	2873
🔧	Icon.Fluent	0.14	0.05	2.8:1	5000	706
🎯	Image.Fluent	0.08	0.1	0.8:1	5000	380
🔧	Slider.Fluent	1.24	0.33	3.76:1	1000	1244
🔧	Text.Fluent	0.07	0.02	3.5:1	5000	334
🦄	Tooltip.Fluent	0.09	14.71	0.01:1	5000	426

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	108	93	1.16:1
ProviderMinimalPerf.default	668	576	1.16:1
Image.Fluent	380	336	1.13:1
TextAreaMinimalPerf.default	469	419	1.12:1
AttachmentMinimalPerf.default	145	133	1.09:1
MenuMinimalPerf.default	785	722	1.09:1
LabelMinimalPerf.default	411	379	1.08:1
RadioGroupMinimalPerf.default	596	550	1.08:1
TreeWith60ListItems.default	222	205	1.08:1
AnimationMinimalPerf.default	624	583	1.07:1
ChatMinimalPerf.default	616	577	1.07:1
TableMinimalPerf.default	392	367	1.07:1
Tooltip.Fluent	426	399	1.07:1
ButtonMinimalPerf.default	153	145	1.06:1
EmbedMinimalPerf.default	1915	1809	1.06:1
HeaderMinimalPerf.default	502	473	1.06:1
ReactionMinimalPerf.default	377	354	1.06:1
VideoMinimalPerf.default	654	615	1.06:1
CardMinimalPerf.default	572	546	1.05:1
DialogMinimalPerf.default	1494	1423	1.05:1
HeaderSlotsPerf.default	1466	1397	1.05:1
ListCommonPerf.default	965	922	1.05:1
RefMinimalPerf.default	196	186	1.05:1
SplitButtonMinimalPerf.default	3277	3115	1.05:1
StatusMinimalPerf.default	649	618	1.05:1
ToolbarMinimalPerf.default	786	746	1.05:1
TreeMinimalPerf.default	1218	1162	1.05:1
Checkbox.Fluent	596	570	1.05:1
CarouselMinimalPerf.default	442	423	1.04:1
ImageMinimalPerf.default	358	343	1.04:1
IconMinimalPerf.default	616	590	1.04:1
TextMinimalPerf.default	330	316	1.04:1
ProviderMergeThemesPerf.default	1796	1741	1.03:1
Icon.Fluent	706	691	1.02:1
AvatarMinimalPerf.default	459	454	1.01:1
ChatDuplicateMessagesPerf.default	381	376	1.01:1
LoaderMinimalPerf.default	687	682	1.01:1
CustomToolbarPrototype.default	3254	3221	1.01:1
BoxMinimalPerf.default	311	311	1:1
ChatWithPopoverPerf.default	448	448	1:1
CheckboxMinimalPerf.default	2663	2651	1:1
DividerMinimalPerf.default	331	332	1:1
ItemLayoutMinimalPerf.default	1577	1583	1:1
SegmentMinimalPerf.default	328	327	1:1
SliderMinimalPerf.default	1215	1219	1:1
Button.Fluent	540	541	1:1
AttachmentSlotsPerf.default	1102	1108	0.99:1
DropdownManyItemsPerf.default	1226	1241	0.99:1
FormMinimalPerf.default	386	390	0.99:1
MenuButtonMinimalPerf.default	1528	1537	0.99:1
Slider.Fluent	1244	1251	0.99:1
AlertMinimalPerf.default	283	290	0.98:1
FlexMinimalPerf.default	284	291	0.98:1
GridMinimalPerf.default	673	685	0.98:1
HierarchicalTreeMinimalPerf.default	405	412	0.98:1
ListMinimalPerf.default	465	476	0.98:1
PopupMinimalPerf.default	246	252	0.98:1
Dialog.Fluent	1394	1428	0.98:1
ButtonSlotsPerf.default	567	586	0.97:1
InputMinimalPerf.default	862	886	0.97:1
ListWith60ListItems.default	1097	1134	0.97:1
TooltipMinimalPerf.default	658	678	0.97:1
Avatar.Fluent	884	913	0.97:1
Text.Fluent	334	346	0.97:1
LayoutMinimalPerf.default	524	544	0.96:1
ListNestedPerf.default	853	884	0.96:1
Dropdown.Fluent	2873	2981	0.96:1
DropdownMinimalPerf.default	2875	3030	0.95:1
AccordionMinimalPerf.default	132	160	0.83:1

[size-auditor]

Asset size changes

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

Baseline commit: 30fa92e7c750651fa609aa6c924b83155bebe203 (build)

[msft-github-bot]

🎉@fluentui/react-compose@v0.5.0 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release